@skbkontur/react-ui 0.0.0-9a66eda8b5 → 0.0.0-a18e664e8f

package/cjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"names":["Button","state","focusedByTab","theme","node","handleFocus","e","props","disabled","disableFocus","process","nextTick","tabListener","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","blur","render","renderMain","corners","sizeClass","getSizeClassName","isError","error","isWarning","warning","rootProps","type","className","jsStyles","root","use","default","active","validationRoot","narrow","noPadding","_noPadding","noRightPadding","_noRightPadding","borderless","visuallyFocused","checked","loading","fallback","isIE11","isEdge","style","borderTopLeftRadius","Corners","TOP_LEFT","undefined","borderTopRightRadius","TOP_RIGHT","borderBottomRightRadius","BOTTOM_RIGHT","borderBottomLeftRadius","BOTTOM_LEFT","textAlign","align","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","wrapProps","wrap","wrapArrow","arrow","wrapArrowLeft","width","icon","getSizeIconClassName","arrowWarning","arrowError","arrowLeft","link","Object","assign","wrapLink","caption","children","size","sizeLarge","sizeLargeLoading","sizeMedium","sizeMediumLoading","sizeSmall","sizeSmallLoading","iconLarge","iconMedium","iconSmall","React","Component","__KONTUR_REACT_UI__","__BUTTON__","defaultProps","isButton","child","isValidElement","prototype","hasOwnProperty","call"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { isIE11, isEdge } from '../../lib/utils';\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nimport { jsStyles } from './Button.styles';\r\nimport { Corners } from './Corners';\r\n\r\nexport type ButtonSize = 'small' | 'medium' | 'large';\r\nexport type ButtonType = 'button' | 'submit' | 'reset';\r\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';\r\n\r\nexport interface ButtonProps {\r\n  /** @ignore */\r\n  _noPadding?: boolean;\r\n\r\n  /** @ignore */\r\n  _noRightPadding?: boolean;\r\n\r\n  /**\r\n   * Визуально нажатое состояние.\r\n   */\r\n  active?: boolean;\r\n\r\n  /** `type TextAlignProperty = \"inherit\" | \"initial\" | \"unset\" | \"center\" | \"end\" | \"justify\" | \"left\" | \"match-parent\" | \"right\" | \"start\"` */\r\n  align?: React.CSSProperties['textAlign'];\r\n\r\n  /**\r\n   * Кнопка со стрелкой.\r\n   *\r\n   * `type ButtonArrow = boolean | \"left\"`\r\n   */\r\n  arrow?: boolean | 'left';\r\n\r\n  autoFocus?: boolean;\r\n\r\n  borderless?: boolean;\r\n\r\n  checked?: boolean;\r\n\r\n  children?: React.ReactNode;\r\n\r\n  /** @ignore */\r\n  corners?: number;\r\n\r\n  disabled?: boolean;\r\n\r\n  /** @ignore */\r\n  disableFocus?: boolean;\r\n\r\n  error?: boolean;\r\n\r\n  focused?: boolean;\r\n\r\n  /**\r\n   * Иконка слева от текста кнопки.\r\n   */\r\n  icon?: React.ReactElement<any>;\r\n\r\n  loading?: boolean;\r\n\r\n  narrow?: boolean;\r\n\r\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\r\n\r\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n\r\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\r\n\r\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\r\n\r\n  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\r\n\r\n  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\r\n\r\n  onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\r\n\r\n  /** `type ButtonSize = \"small\" | \"medium\" | \"large\"` */\r\n  size?: ButtonSize;\r\n\r\n  /** `type ButtonType = \"button\" | \"submit\" | \"reset\"` */\r\n  type?: ButtonType;\r\n\r\n  /**\r\n   * Вариант использования. Влияет на цвет кнопки.\r\n   *\r\n   * `type ButtonUse = \"default\" | \"primary\" | \"success\" | \"danger\" | \"pay\" | \"link\"`\r\n   */\r\n  use?: ButtonUse;\r\n\r\n  /** @ignore */\r\n  visuallyFocused?: boolean;\r\n\r\n  warning?: boolean;\r\n\r\n  width?: number | string;\r\n}\r\n\r\nexport interface ButtonState {\r\n  focusedByTab: boolean;\r\n}\r\n\r\nexport class Button extends React.Component<ButtonProps, ButtonState> {\r\n  public static __KONTUR_REACT_UI__ = 'Button';\r\n  public static __BUTTON__ = true;\r\n  public static TOP_LEFT = Corners.TOP_LEFT;\r\n  public static TOP_RIGHT = Corners.TOP_RIGHT;\r\n  public static BOTTOM_RIGHT = Corners.BOTTOM_RIGHT;\r\n  public static BOTTOM_LEFT = Corners.BOTTOM_LEFT;\r\n\r\n  public static defaultProps = {\r\n    use: 'default',\r\n    size: 'small',\r\n    type: 'button',\r\n  };\r\n\r\n  public state = {\r\n    focusedByTab: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private node: HTMLButtonElement | null = null;\r\n\r\n  public componentDidMount() {\r\n    if (this.props.autoFocus) {\r\n      tabListener.isTabPressed = true;\r\n      this.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus() {\r\n    this.node?.focus();\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public blur() {\r\n    this.node?.blur();\r\n  }\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { corners = 0 } = this.props;\r\n    const sizeClass = this.getSizeClassName();\r\n\r\n    const isError = !!this.props.error;\r\n    const isWarning = !!this.props.warning;\r\n    const rootProps = {\r\n      // By default the type attribute is 'submit'. IE8 will fire a click event\r\n      // on this button if somewhere on the page user presses Enter while some\r\n      // input is focused. So we set type to 'button' by default.\r\n      type: this.props.type,\r\n      className: cn({\r\n        [jsStyles.root(this.theme)]: true,\r\n        [(jsStyles[this.props.use!] && jsStyles[this.props.use!](this.theme)) || jsStyles.default(this.theme)]: true,\r\n        [jsStyles.active(this.theme)]: !!this.props.active,\r\n        [jsStyles.validationRoot(this.theme)]: isError || isWarning,\r\n        [jsStyles.narrow()]: !!this.props.narrow,\r\n        [jsStyles.noPadding()]: !!this.props._noPadding,\r\n        [jsStyles.noRightPadding()]: !!this.props._noRightPadding,\r\n        [sizeClass]: true,\r\n        [jsStyles.borderless(this.theme)]: !!this.props.borderless,\r\n        [jsStyles.focus(this.theme)]: this.state.focusedByTab || !!this.props.visuallyFocused,\r\n        [jsStyles.checked(this.theme)]: !!this.props.checked && !this.props.disabled,\r\n        [jsStyles.disabled(this.theme)]: !!this.props.disabled || !!this.props.loading,\r\n        [jsStyles.fallback(this.theme)]: isIE11 || isEdge,\r\n      }),\r\n      style: {\r\n        borderTopLeftRadius: corners & Corners.TOP_LEFT ? 0 : undefined,\r\n        borderTopRightRadius: corners & Corners.TOP_RIGHT ? 0 : undefined,\r\n        borderBottomRightRadius: corners & Corners.BOTTOM_RIGHT ? 0 : undefined,\r\n        borderBottomLeftRadius: corners & Corners.BOTTOM_LEFT ? 0 : undefined,\r\n        textAlign: this.props.align,\r\n      },\r\n      disabled: this.props.disabled || this.props.loading,\r\n      onClick: this.props.onClick,\r\n      onFocus: this.handleFocus,\r\n      onBlur: this.handleBlur,\r\n      onKeyDown: this.props.onKeyDown,\r\n      onMouseEnter: this.props.onMouseEnter,\r\n      onMouseLeave: this.props.onMouseLeave,\r\n      onMouseOver: this.props.onMouseOver,\r\n      tabIndex: this.props.disableFocus ? -1 : 0,\r\n    };\r\n\r\n    const wrapProps = {\r\n      className: cn({\r\n        [jsStyles.wrap(this.theme)]: true,\r\n        [jsStyles.wrapArrow()]: this.props.arrow === true,\r\n        [jsStyles.wrapArrowLeft()]: this.props.arrow === 'left',\r\n      }),\r\n      style: {\r\n        width: this.props.width,\r\n      },\r\n    };\r\n\r\n    let error = null;\r\n    if (this.props.error) {\r\n      error = <div className={jsStyles.error(this.theme)} />;\r\n    } else if (this.props.warning) {\r\n      error = <div className={jsStyles.warning(this.theme)} />;\r\n    }\r\n\r\n    let loading = null;\r\n    if (this.props.loading) {\r\n      loading = <div className={jsStyles.loading()} />;\r\n    }\r\n\r\n    let icon = this.props.icon;\r\n    if (this.props.icon) {\r\n      icon = <span className={this.getSizeIconClassName()}>{this.props.icon}</span>;\r\n    }\r\n\r\n    let arrow = null;\r\n    if (this.props.arrow) {\r\n      arrow = (\r\n        <div\r\n          className={cn({\r\n            [jsStyles.arrowWarning(this.theme)]: isWarning,\r\n            [jsStyles.arrowError(this.theme)]: isError,\r\n            [jsStyles.arrow()]: true,\r\n            [jsStyles.arrowLeft(this.theme)]: this.props.arrow === 'left',\r\n          })}\r\n        />\r\n      );\r\n    }\r\n\r\n    // Force disable all props and features, that cannot be use with Link\r\n    if (this.props.use === 'link') {\r\n      rootProps.className = cn({\r\n        [jsStyles.root(this.theme)]: true,\r\n        [sizeClass]: true,\r\n        [jsStyles.focus(this.theme)]: this.state.focusedByTab || !!this.props.visuallyFocused,\r\n        [jsStyles.link(this.theme)]: true,\r\n        [jsStyles.disabled(this.theme)]: !!this.props.disabled,\r\n      });\r\n      Object.assign(wrapProps, {\r\n        className: cn(jsStyles.wrap(this.theme), {\r\n          [jsStyles.wrapLink(this.theme)]: this.props.use === 'link',\r\n        }),\r\n        style: { width: wrapProps.style.width },\r\n      });\r\n      rootProps.style.textAlign = undefined;\r\n      loading = null;\r\n      arrow = null;\r\n    }\r\n\r\n    return (\r\n      <span {...wrapProps}>\r\n        <button ref={this._ref} {...rootProps}>\r\n          {error}\r\n          {loading}\r\n          {arrow}\r\n          <div className={jsStyles.caption()}>\r\n            {icon}\r\n            {this.props.children}\r\n          </div>\r\n        </button>\r\n      </span>\r\n    );\r\n  }\r\n\r\n  private getSizeClassName() {\r\n    switch (this.props.size) {\r\n      case 'large':\r\n        return cn(jsStyles.sizeLarge(this.theme), {\r\n          [jsStyles.sizeLargeLoading(this.theme)]: this.props.loading,\r\n        });\r\n      case 'medium':\r\n        return cn(jsStyles.sizeMedium(this.theme), {\r\n          [jsStyles.sizeMediumLoading(this.theme)]: this.props.loading,\r\n        });\r\n      case 'small':\r\n      default:\r\n        return cn(jsStyles.sizeSmall(this.theme), {\r\n          [jsStyles.sizeSmallLoading(this.theme)]: this.props.loading,\r\n        });\r\n    }\r\n  }\r\n  private getSizeIconClassName() {\r\n    switch (this.props.size) {\r\n      case 'large':\r\n        return jsStyles.iconLarge(this.theme);\r\n      case 'medium':\r\n        return jsStyles.iconMedium(this.theme);\r\n      case 'small':\r\n      default:\r\n        return jsStyles.iconSmall(this.theme);\r\n    }\r\n  }\r\n\r\n  private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\r\n    if (!this.props.disabled && !this.props.disableFocus) {\r\n      // focus event fires before keyDown eventlistener\r\n      // so we should check tabPressed in async way\r\n      process.nextTick(() => {\r\n        if (tabListener.isTabPressed) {\r\n          this.setState({ focusedByTab: true });\r\n        }\r\n      });\r\n      this.props.onFocus?.(e);\r\n    }\r\n  };\r\n\r\n  private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\r\n    this.setState({ focusedByTab: false });\r\n    if (!this.props.disabled && !this.props.disableFocus) {\r\n      this.props.onBlur?.(e);\r\n    }\r\n  };\r\n\r\n  private _ref = (node: HTMLButtonElement | null) => {\r\n    this.node = node;\r\n  };\r\n}\r\n\r\nexport const isButton = (child: React.ReactChild): child is React.ReactElement<ButtonProps> => {\r\n  return React.isValidElement<ButtonProps>(child)\r\n    ? Object.prototype.hasOwnProperty.call(child.type, '__BUTTON__')\r\n    : false;\r\n};\r\n"]}
+{"version":3,"sources":["Button.tsx"],"names":["Button","state","focusedByTab","theme","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","keyListener","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","renderMain","corners","active","borderless","checked","error","warning","arrow","narrow","icon","_noPadding","_noRightPadding","use","defaultProps","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","sizeClass","getSizeClassName","isFocused","isLink","rootProps","type","className","styles","root","activeStyles","checkedDisabled","noPadding","noRightPadding","style","borderTopLeftRadius","Corners","TOP_LEFT","undefined","borderTopRightRadius","TOP_RIGHT","borderBottomRightRadius","BOTTOM_RIGHT","borderBottomLeftRadius","BOTTOM_LEFT","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","outlineNode","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","loadingNode","getLoadingSpinner","iconNode","getSizeIconClassName","iconNoRightPadding","iconLink","arrowNode","arrowWarning","arrowError","arrowFocus","arrowLeft","globalClasses","arrowHelper","arrowHelperTop","arrowHelperBottom","link","linkFocus","linkDisabled","Object","assign","wrapLink","caption","captionTranslated","captionLink","captionDisabled","visibilityHidden","size","sizeLarge","sizeLargeIE11","isIE11","isEdge","sizeMedium","sizeMediumIE11","sizeSmall","sizeSmallIE11","iconLarge","iconMedium","iconSmall","React","Component","__KONTUR_REACT_UI__","__BUTTON__","isButton","child","isValidElement","prototype","hasOwnProperty","call"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\nimport { Corners } from './Corners';\n\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';\n\nexport interface ButtonProps extends CommonProps {\n  /** @ignore */\n  _noPadding?: boolean;\n\n  /** @ignore */\n  _noRightPadding?: boolean;\n\n  /**\n   * Применяет к кнопке стили псевдокласса `:active`.\n   */\n  active?: boolean;\n\n  /**\n   * CSS-свойство `text-align`.\n   */\n  align?: React.CSSProperties['textAlign'];\n\n  /**\n   * Превращает обычную кнопку в кнопку со стрелкой.\n   */\n  arrow?: boolean | 'left';\n\n  /**\n   * Даёт кнопке фокус после окончания загрузки страницы.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Убирает обводку у кнопки.\n   */\n  borderless?: boolean;\n\n  /**\n   * @ignore\n   */\n  checked?: boolean;\n\n  children?: React.ReactNode;\n\n  /** @ignore */\n  corners?: number;\n\n  /**\n   * Отключенное состояние кнопки.\n   */\n  disabled?: boolean;\n\n  /** @ignore */\n  disableFocus?: boolean;\n\n  /**\n   * Cостояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  /**\n   * Иконка слева от текста кнопки.\n   */\n  icon?: React.ReactElement<any>;\n\n  /**\n   * Переводит кнопку в состояние загрузки.\n   */\n  loading?: boolean;\n\n  /**\n   * Сужает кнопку.\n   */\n  narrow?: boolean;\n\n  /**\n   * HTML-событие `onblur`.\n   */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onfocus`.\n   */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `keydown`.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onmouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onmouseover`.\n   */\n  onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * Задаёт размер кнопки.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: ButtonSize;\n\n  /**\n   * HTML-атрибут `type`.\n   */\n  type?: ButtonType;\n\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: string;\n\n  /**\n   * Стиль кнопки.\n   *\n   * **Допустимые значения**: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`.\n   */\n  use?: ButtonUse;\n\n  /** @ignore */\n  visuallyFocused?: boolean;\n\n  /**\n   * Cостояние валидации при предупреждении.\n   */\n  warning?: boolean;\n\n  /**\n   * CSS-свойство `width`.\n   */\n  width?: number | string;\n}\n\nexport interface ButtonState {\n  focusedByTab: boolean;\n}\n\nexport class Button extends React.Component<ButtonProps, ButtonState> {\n  public static __KONTUR_REACT_UI__ = 'Button';\n  public static __BUTTON__ = true;\n  public static TOP_LEFT = Corners.TOP_LEFT;\n  public static TOP_RIGHT = Corners.TOP_RIGHT;\n  public static BOTTOM_RIGHT = Corners.BOTTOM_RIGHT;\n  public static BOTTOM_LEFT = Corners.BOTTOM_LEFT;\n\n  public static defaultProps = {\n    use: 'default' as ButtonUse,\n    size: 'small' as ButtonSize,\n    type: 'button' as ButtonType,\n  };\n\n  public state = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private node: HTMLButtonElement | null = null;\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  public static getDerivedStateFromProps(props: ButtonProps) {\n    if (props.loading || props.disabled) {\n      return { focusedByTab: false };\n    }\n    return null;\n  }\n\n  /**\n   * @public\n   */\n  public focus() {\n    this.node?.focus();\n  }\n\n  /**\n   * @public\n   */\n  public blur() {\n    this.node?.blur();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      corners = 0,\n      active,\n      disabled,\n      borderless,\n      checked,\n      error,\n      warning,\n      loading,\n      arrow,\n      narrow,\n      icon,\n      _noPadding,\n      _noRightPadding,\n      use = Button.defaultProps.use,\n      visuallyFocused,\n      align,\n      disableFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      onKeyDown,\n      onClick,\n      width,\n      children,\n    } = this.props;\n    const sizeClass = this.getSizeClassName();\n\n    const isFocused = this.state.focusedByTab || visuallyFocused;\n    const isLink = use === 'link';\n    const rootProps = {\n      // By default the type attribute is 'submit'. IE8 will fire a click event\n      // on this button if somewhere on the page user presses Enter while some\n      // input is focused. So we set type to 'button' by default.\n      type: this.props.type,\n      className: cx({\n        [styles.root(this.theme)]: true,\n        [styles[use](this.theme)]: true,\n        [activeStyles[use](this.theme)]: active,\n        [sizeClass]: true,\n        [styles.focus(this.theme)]: isFocused && !checked,\n        [styles.checked(this.theme)]: checked,\n        [styles.disabled(this.theme)]: disabled || loading,\n        [styles.checkedDisabled(this.theme)]: checked && disabled,\n        [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n        [styles.narrow()]: narrow,\n        [styles.noPadding()]: _noPadding,\n        [styles.noRightPadding()]: _noRightPadding,\n      }),\n      style: {\n        borderTopLeftRadius: corners & Corners.TOP_LEFT ? 0 : undefined,\n        borderTopRightRadius: corners & Corners.TOP_RIGHT ? 0 : undefined,\n        borderBottomRightRadius: corners & Corners.BOTTOM_RIGHT ? 0 : undefined,\n        borderBottomLeftRadius: corners & Corners.BOTTOM_LEFT ? 0 : undefined,\n        textAlign: align,\n      },\n      disabled: disabled || loading,\n      onClick: onClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      onKeyDown: onKeyDown,\n      onMouseEnter: onMouseEnter,\n      onMouseLeave: onMouseLeave,\n      onMouseOver: onMouseOver,\n      tabIndex: disableFocus ? -1 : 0,\n      title: this.props.title,\n    };\n\n    const wrapProps = {\n      className: cx({\n        [styles.wrap()]: true,\n        [styles.wrapArrow()]: arrow === true,\n        [styles.wrapArrowLeft()]: arrow === 'left',\n      }),\n      style: {\n        width: width,\n      },\n    };\n\n    let outlineNode = null;\n    if (!isFocused || isLink) {\n      outlineNode = (\n        <div\n          className={cx(styles.outline(), {\n            [styles.outlineWarning(this.theme)]: warning,\n            [styles.outlineError(this.theme)]: error,\n            [styles.outlineLink()]: isLink,\n            [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n            [styles.outlineLinkError(this.theme)]: isLink && error,\n          })}\n        />\n      );\n    }\n\n    let loadingNode = null;\n    if (loading && !icon) {\n      loadingNode = <div className={styles.loading()}>{this.getLoadingSpinner()}</div>;\n    }\n\n    let iconNode = null;\n    if (icon) {\n      iconNode = (\n        <span\n          className={cx(styles.icon(), this.getSizeIconClassName(), {\n            [styles.iconNoRightPadding()]: !children,\n            [styles.iconLink(this.theme)]: isLink,\n          })}\n        >\n          {loading ? this.getLoadingSpinner() : icon}\n        </span>\n      );\n    }\n\n    let arrowNode = null;\n    if (arrow) {\n      arrowNode = (\n        <div\n          className={cx({\n            [styles.arrow()]: true,\n            [styles.arrowWarning(this.theme)]: !checked && warning,\n            [styles.arrowError(this.theme)]: !checked && error,\n            [styles.arrowFocus(this.theme)]: !checked && isFocused,\n            [styles.arrowLeft()]: arrow === 'left',\n          })}\n        >\n          <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)} />\n          <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)} />\n        </div>\n      );\n    }\n\n    // Force disable all props and features, that cannot be use with Link\n    if (isLink) {\n      rootProps.className = cx({\n        [styles.root(this.theme)]: true,\n        [sizeClass]: true,\n        [styles.link(this.theme)]: true,\n        [styles.linkFocus(this.theme)]: isFocused,\n        [styles.linkDisabled(this.theme)]: disabled || loading,\n      });\n      Object.assign(wrapProps, {\n        className: cx(styles.wrap(), styles.wrapLink()),\n        style: { width: wrapProps.style.width },\n      });\n      rootProps.style.textAlign = undefined;\n      arrowNode = null;\n    }\n\n    return (\n      <CommonWrapper {...this.props}>\n        <span {...wrapProps}>\n          <button ref={this._ref} {...rootProps}>\n            {outlineNode}\n            {loadingNode}\n            {arrowNode}\n            <div\n              className={cx(styles.caption(), globalClasses.caption, {\n                [styles.captionTranslated()]: active || checked,\n                [styles.captionLink()]: isLink,\n                [styles.captionDisabled()]: !checked && disabled,\n              })}\n            >\n              {iconNode}\n              <span className={cx({ [styles.visibilityHidden()]: !!loadingNode })}>{children}</span>\n            </div>\n          </button>\n        </span>\n      </CommonWrapper>\n    );\n  }\n\n  private getLoadingSpinner() {\n    return <Spinner caption={null} dimmed type=\"mini\" />;\n  }\n\n  private getSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return cx(styles.sizeLarge(this.theme), { [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge });\n      case 'medium':\n        return cx(styles.sizeMedium(this.theme), { [styles.sizeMediumIE11(this.theme)]: isIE11 || isEdge });\n      case 'small':\n      default:\n        return cx(styles.sizeSmall(this.theme), { [styles.sizeSmallIE11(this.theme)]: isIE11 || isEdge });\n    }\n  }\n\n  private getSizeIconClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.iconLarge(this.theme);\n      case 'medium':\n        return styles.iconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.iconSmall(this.theme);\n    }\n  }\n\n  private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n    if (!this.props.disabled && !this.props.disableFocus) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n      this.props.onFocus?.(e);\n    }\n  };\n\n  private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n    this.setState({ focusedByTab: false });\n    if (!this.props.disabled && !this.props.disableFocus) {\n      this.props.onBlur?.(e);\n    }\n  };\n\n  private _ref = (node: HTMLButtonElement | null) => {\n    this.node = node;\n  };\n}\n\nexport const isButton = (child: React.ReactChild): child is React.ReactElement<ButtonProps> => {\n  return React.isValidElement<ButtonProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__BUTTON__')\n    : false;\n};\n"]}

package/cjs/components/Button/Button.md

@@ -1,89 +1,104 @@
-Button example
-
-```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
-import { Button } from '@skbkontur/react-ui';
-
-<Button icon={<OkIcon />}>Ok</Button>;
-```
-
-Button has different use styles
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button use="default">Default</Button>
-  <Button use="primary">Primary</Button>
-  <Button use="success">Success</Button>
-  <Button use="danger">Danger</Button>
-  <Button use="pay">Pay</Button>
-  <Button use="link">Link</Button>
-</Gapped>;
-```
-
-Button can have different sizes
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button size="small">Small</Button>
-  <Button size="medium">Medium</Button>
-  <Button size="large">Large</Button>
-</Gapped>;
-```
-
-Кнопки-стрелки
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-
-<Gapped gap={25}>
-  <Gapped gap={5}>
-    <Button arrow="left" size="medium">
-      Назад
-    </Button>
-    <Button arrow size="medium">
-      Далее
-    </Button>
-  </Gapped>
-  <Gapped gap={5}>
-    <Button arrow="left" size="large">
-      Назад
-    </Button>
-    <Button arrow size="large">
-      Далее
-    </Button>
-  </Gapped>
-</Gapped>;
-```
-
-Кнопка в сочетании со спиннером
-
-```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
-import { Button, Spinner } from '@skbkontur/react-ui';
-
-const initialState = {
-  loading: false,
-  success: false,
-};
-
-const delay = (time = 0) => data => new Promise(resolve => setTimeout(resolve, time, data));
-
-const handleLoadingStart = () => {
-  delay(2000)()
-    .then(() => new Promise(resolve => setState({ loading: false, success: true }, resolve)))
-    .then(delay(1000))
-    .then(() => setState({ success: false }));
-};
-
-const handleClick = () => {
-  setState({ loading: true, success: false }, handleLoadingStart);
-};
-
-<Button width={150} onClick={handleClick} disabled={state.loading}>
-  {state.loading ? <Spinner type="mini" caption={null} /> : state.success ? <OkIcon /> : 'Сохранить'}
-</Button>;
-```
+Базовый пример кнопки.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button>Создать отчёт</Button>;
+```
+
+У кнопки есть различные стили.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Button use="default">Default</Button>
+  <Button use="primary">Primary</Button>
+  <Button use="success">Success</Button>
+  <Button use="danger">Danger</Button>
+  <Button use="pay">Pay</Button>
+  <Button use="link">Link</Button>
+</Gapped>;
+```
+
+Пример кнопки с иконкой.
+
+```jsx harmony
+import PrintIcon from '@skbkontur/react-icons/Print';
+import { Button } from '@skbkontur/react-ui';
+
+<Button icon={<PrintIcon />}>Напечатать</Button>;
+```
+
+У кнопки есть 3 стандартных размера.
+
+```jsx harmony
+<div
+  style={{
+    display: "flex",
+    alignItems: "end",
+    justifyContent: "space-between",
+    width: "330px"
+  }}>
+  <Button size="small">Маленькая</Button>
+  <Button size="medium">Средняя</Button>
+  <Button size="large">Большая</Button>
+</div>
+```
+
+Кнопки в виде стрелок.
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
+
+<Gapped gap={25}>
+  <Gapped gap={5}>
+    <Button arrow="left" size="medium">
+      Назад
+    </Button>
+    <Button arrow size="medium">
+      Далее
+    </Button>
+  </Gapped>
+</Gapped>;
+```
+
+Кнопка в состоянии загрузки.
+
+**Поведение:**
+
+Кнопка на время нахождения в состоянии загрузки отключается.
+
+Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет - весь контент кнопки заменяется на спиннер.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+import BookmarkIcon from '@skbkontur/react-icons/Bookmark';
+
+const [loading, setLoading] = React.useState(false);
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const handleLoadingStart = () => {
+  delay(2000)()
+    .then(() => {
+      setLoading(false);
+    })
+};
+
+const handleClick = () => {
+  setLoading(true);
+  handleLoadingStart();
+};
+
+<Gapped>
+  <Button width={150} onClick={handleClick} loading={loading}>
+    Сохранить
+  </Button>
+  <Button icon={<BookmarkIcon />} width={150} onClick={handleClick} loading={loading}>
+    Сохранить
+  </Button>
+</Gapped>
+
+```

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

@@ -1,6 +1,6 @@
-export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, arrowBackgroundStart: string, arrowBackgroundEnd: string, shadow: string, shadowArrow: string, shadowArrowLeft: string, color: string, border: string, selectorChecked: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, arrowBackgroundStart: string, arrowBackgroundEnd: string, btnShadow: string, arrowShadow: string, arrowLeftShadow: string, btnBorder: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonActiveMixin: (btnBackground: string, arrowBackground: string, arrowLeftBackground: string, btnShadow: string, arrowShadow: string, arrowLeftShadow: string, selectorActive: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonSizeMixin: (fontSize: string, height: string, heightShift: string, lineHeight: string, paddingX: string, paddingY: string, selectorLink: string, selectorFallback: string) => string;
-export declare const buttonArrowMixin: (top: string, left: string, right: string, size: string, transform: string, selectorArrow: string, selectorArrowLeft: string) => string;
-export declare const buttonLoadingArrowMixin: (top: string, leftArrowTop: string, left: string, height: string, background: string, delay: string, btn_loading_arrow: string, selectorArrow: string, selectorArrowLeft: string) => string;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, height: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const buttonSizeMixinIE11: (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const arrowOutlineMixin: (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => string;

package/cjs/components/Button/Button.mixins.js

@@ -1,18 +1,27 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.buttonLoadingArrowMixin = exports.buttonArrowMixin = exports.buttonSizeMixin = exports.buttonActiveMixin = exports.buttonHoverMixin = exports.buttonUseMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
-var _DimensionFunctions = require("../../lib/styles/DimensionFunctions");function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n    ", "::before {\n      content: '';\n      display: block;\n      position: absolute;\n      top: ", ";\n      left: -207px;\n      right: -72px;\n      height: ", ";\n      background: ", ";\n      background-size: 41px 100%;\n      opacity: 0.2;\n      transform: translateX(50px) rotate(-44.3deg);\n      animation: ", " 1s linear infinite;\n    }\n\n    ", "::before {\n      top: ", ";\n      left: ", ";\n      animation-direction: reverse;\n      transform: translateX(42px) rotate(-44.3deg);\n      animation-delay: ", ";\n    }\n  "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n    ", " {\n      top: ", ";\n      right: ", ";\n      height: ", ";\n      width: ", ";\n      transform: ", ";\n      overflow: hidden;\n    }\n\n    ", " {\n      left: ", ";\n      transform: rotate(232deg) skewX(25deg) skewY(8deg) !important;\n    }\n  "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", " !important;\n\n    &:not(", ") {\n      box-sizing: border-box;\n      height: ", ";\n      padding: ", ";\n      line-height: ", ";\n\n      &", " {\n        padding: ", ";\n      }\n    }\n  "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:active,\n    &", " {\n      background: ", ";\n      box-shadow: ", ";\n\n      ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n    }\n  "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:hover {\n      background: ", ";\n      box-shadow: ", ";\n      border-color: ", ";\n\n      ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n    }\n  "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n    background: ", ";\n    color: ", ";\n    box-shadow: ", ";\n    border: ", ";\n\n    &:not(", ") ", " {\n      background: ", ";\n      box-shadow: ", ";\n    }\n\n    &:not(", ") ", " {\n      background: ", ";\n      box-shadow: ", ";\n    }\n  "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.arrowOutlineMixin = exports.buttonSizeMixinIE11 = exports.buttonSizeMixin = exports.buttonActiveMixin = exports.buttonHoverMixin = exports.buttonUseMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+var _DimensionFunctions = require("../../lib/styles/DimensionFunctions");
 
-var getBtnPadding = function getBtnPadding(fontSize, paddingY, paddingX, additionalOffset) {if (additionalOffset === void 0) {additionalOffset = 0;}
+var _Button = require("./Button.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var getBtnPadding = function getBtnPadding(
+fontSize,
+paddingY,
+paddingX,
+fontFamilyCompensation,
+additionalOffset)
+{if (additionalOffset === void 0) {additionalOffset = 0;}
   var paddingTop = paddingY;
   var paddingBottom = paddingY;
+  var offset = parseInt(fontFamilyCompensation) || 0;
 
   var shiftUp = function shiftUp(top, bottom, offset) {
     return [(0, _DimensionFunctions.shift)(top, "" + -offset), (0, _DimensionFunctions.shift)(bottom, "" + offset)];
   };
 
-  if (fontSize === '16px') {var _shiftUp =
-    shiftUp(paddingTop, paddingBottom, 1);paddingTop = _shiftUp[0];paddingBottom = _shiftUp[1];
+  if (fontSize === '16px' && offset) {var _shiftUp =
+    shiftUp(paddingTop, paddingBottom, offset);paddingTop = _shiftUp[0];paddingBottom = _shiftUp[1];
   }
-  if (additionalOffset) {var _shiftUp2 =
+  if (additionalOffset && offset) {var _shiftUp2 =
     shiftUp(paddingTop, paddingBottom, additionalOffset);paddingTop = _shiftUp2[0];paddingBottom = _shiftUp2[1];
   }
 
@@ -23,37 +32,21 @@ var buttonUseMixin = function buttonUseMixin(
 btnBackground,
 btnBackgroundStart,
 btnBackgroundEnd,
-arrowBackgroundStart,
-arrowBackgroundEnd,
-shadow,
-shadowArrow,
-shadowArrowLeft,
 color,
-border,
-selectorChecked,
-selectorArrow,
-selectorArrowLeft)
+borderColor,
+borderBottomColor,
+borderWidth)
 {
-  return (0, _Emotion.css)(_templateObject(),
-  btnBackgroundStart === btnBackgroundEnd && btnBackground ?
-  btnBackground : "linear-gradient(" +
-  btnBackgroundStart + ", " + btnBackgroundEnd + ")",
+  var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    border-color: ", ";\n    border-bottom-color: ", ";\n\n    .", " {\n      box-shadow: ", " 0 0 0 ", ";\n    }\n  "])),
+  hasGradient ? "initial" : btnBackground,
+  hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
   color,
-  shadow,
-  border,
+  borderColor,
+  borderBottomColor,
 
-  selectorChecked, selectorArrow,
-  arrowBackgroundStart === arrowBackgroundEnd ?
-  arrowBackgroundStart : "linear-gradient(to bottom right, " +
-  arrowBackgroundStart + ", " + arrowBackgroundEnd + ")",
-  shadowArrow,
-
-
-  selectorChecked, selectorArrowLeft,
-  arrowBackgroundStart === arrowBackgroundEnd ?
-  arrowBackgroundStart : "linear-gradient(to top left, " +
-  arrowBackgroundStart + ", " + arrowBackgroundEnd + ")",
-  shadowArrowLeft);
+  _Button.globalClasses.arrowHelper,
+  borderWidth, borderColor);
 
 
 };exports.buttonUseMixin = buttonUseMixin;
@@ -62,35 +55,20 @@ var buttonHoverMixin = function buttonHoverMixin(
 btnBackground,
 btnBackgroundStart,
 btnBackgroundEnd,
-arrowBackgroundStart,
-arrowBackgroundEnd,
-btnShadow,
-arrowShadow,
-arrowLeftShadow,
-btnBorder,
-selectorArrow,
-selectorArrowLeft)
+borderColor,
+borderBottomColor,
+borderWidth)
 {
-  return (0, _Emotion.css)(_templateObject2(),
+  var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:hover {\n      background-color: ", ";\n      background-image: ", ";\n      border-color: ", ";\n      border-bottom-color: ", ";\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n      }\n    }\n  "])),
 
-  btnBackgroundStart === btnBackgroundEnd && btnBackground ?
-  btnBackground : "linear-gradient(" +
-  btnBackgroundStart + ", " + btnBackgroundEnd + ")",
-  btnShadow,
-  btnBorder,
-
-  selectorArrow,
-  arrowBackgroundStart === arrowBackgroundEnd ?
-  arrowBackgroundStart : "linear-gradient(to bottom right, " +
-  arrowBackgroundStart + ", " + arrowBackgroundEnd + ")",
-  arrowShadow,
+  hasGradient ? "initial" : btnBackground,
+  hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
+  borderColor,
+  borderBottomColor,
 
-
-  selectorArrowLeft,
-  arrowBackgroundStart === arrowBackgroundEnd ?
-  arrowBackgroundStart : "linear-gradient(to top left, " +
-  arrowBackgroundStart + ", " + arrowBackgroundEnd + ")",
-  arrowLeftShadow);
+  _Button.globalClasses.arrowHelper,
+  borderWidth, borderColor);
 
 
 
@@ -98,29 +76,24 @@ selectorArrowLeft)
 
 var buttonActiveMixin = function buttonActiveMixin(
 btnBackground,
-arrowBackground,
-arrowLeftBackground,
 btnShadow,
-arrowShadow,
-arrowLeftShadow,
-selectorActive,
-selectorArrow,
-selectorArrowLeft)
+borderColor,
+borderTopColor,
+borderWidth,
+arrowBgImage)
 {
-  return (0, _Emotion.css)(_templateObject3(),
+  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-image: none;\n    background-color: ", ";\n    box-shadow: ", ";\n    border-color: ", ";\n    border-top-color: ", ";\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n\n      &.", " {\n        background-image: ", ";\n      }\n    }\n  "])),
 
-  selectorActive,
   btnBackground,
   btnShadow,
+  borderColor,
+  borderTopColor,
 
-  selectorArrow,
-  arrowBackground,
-  arrowShadow,
-
+  _Button.globalClasses.arrowHelper,
+  borderWidth, borderColor,
 
-  selectorArrowLeft,
-  arrowLeftBackground,
-  arrowLeftShadow);
+  _Button.globalClasses.arrowHelperTop,
+  arrowBgImage);
 
 
 
@@ -129,88 +102,58 @@ selectorArrowLeft)
 var buttonSizeMixin = function buttonSizeMixin(
 fontSize,
 height,
-heightShift,
 lineHeight,
 paddingX,
 paddingY,
-selectorLink,
-selectorFallback)
+fontFamilyCompensation)
 {
-  return (0, _Emotion.css)(_templateObject4(),
+  return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", ";\n    box-sizing: border-box;\n    height: ", ";\n    padding: ", ";\n    line-height: ", ";\n  "])),
   fontSize,
 
-  selectorLink,
-
-  (0, _DimensionFunctions.shift)(height, heightShift),
-  getBtnPadding(fontSize, paddingY, paddingX),
-  lineHeight,
-
-  selectorFallback,
-  getBtnPadding(fontSize, paddingY, paddingX, 1));
-
-
+  height,
+  getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation),
+  lineHeight);
 
 };exports.buttonSizeMixin = buttonSizeMixin;
 
-var buttonArrowMixin = function buttonArrowMixin(
-top,
-left,
-right,
-size,
-transform,
-selectorArrow,
-selectorArrowLeft)
+var buttonSizeMixinIE11 = function buttonSizeMixinIE11(
+fontSize,
+paddingX,
+paddingY,
+fontFamilyCompensation)
 {
-  return (0, _Emotion.css)(_templateObject5(),
-  selectorArrow,
-  top,
-  right,
-  size,
-  size,
-  transform,
-
-
+  return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    padding: ", ";\n    line-height: normal;\n  "])),
+  getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1));
 
-  selectorArrowLeft,
-  left);
 
+};exports.buttonSizeMixinIE11 = buttonSizeMixinIE11;
 
-
-};exports.buttonArrowMixin = buttonArrowMixin;
-
-var buttonLoadingArrowMixin = function buttonLoadingArrowMixin(
-top,
-leftArrowTop,
-left,
-height,
-background,
-delay,
-btn_loading_arrow,
-selectorArrow,
-selectorArrowLeft)
+var arrowOutlineMixin = function arrowOutlineMixin(
+insetWidth,
+outlineColor,
+outlineWidth,
+insetColor)
 {
-  return (0, _Emotion.css)(_templateObject6(),
-  selectorArrow,
-
+  return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n    .", " {\n      &.", " {\n        box-shadow: inset -", " ", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      &.", " {\n        box-shadow: inset -", " -", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ", ";\n        right: ", ";\n        left: ", ";\n      }\n      &.", ":before {\n        bottom: ", ";\n      }\n    }\n  "])),
+  _Button.globalClasses.arrowHelper,
+  _Button.globalClasses.arrowHelperTop,
+  insetWidth, insetWidth, insetColor, outlineWidth, outlineColor,
 
 
-  top,
-
-
-  height,
-  background,
+  _Button.globalClasses.arrowHelperBottom,
+  insetWidth, insetWidth, insetColor, outlineWidth, outlineColor,
 
 
 
-  btn_loading_arrow,
 
 
-  selectorArrowLeft,
-  leftArrowTop,
-  left,
+  insetWidth,
+  insetWidth,
+  insetWidth,
 
+  _Button.globalClasses.arrowHelperBottom,
+  insetWidth);
 
-  delay);
 
 
-};exports.buttonLoadingArrowMixin = buttonLoadingArrowMixin;
+};exports.arrowOutlineMixin = arrowOutlineMixin;