@skbkontur/react-ui 0.0.0-b408db2ccf → 0.0.0-b4710fb038

package/components/Button/Button.d.ts

@@ -1,178 +1,109 @@
-import React, { AriaAttributes, HTMLAttributes } from 'react';
-import { HTMLProps } from '../../typings/html';
-import { ThemeIn } from '../../lib/theming/Theme';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { SizeProp } from '../../lib/types/props';
-/**
- * @deprecated use SizeProp
- */
-export type ButtonSize = SizeProp;
-export type ButtonType = 'button' | 'submit' | 'reset';
-export type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';
-export interface ButtonProps extends CommonProps, Pick<AriaAttributes, 'aria-haspopup' | 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-checked' | 'aria-expanded'>, Pick<HTMLAttributes<unknown>, 'role'>, Pick<HTMLProps['button'], 'onClickCapture' | 'onMouseUp' | 'onMouseDown'> {
-    /** @ignore */
-    _noPadding?: boolean;
-    /** @ignore */
-    _noRightPadding?: boolean;
-    /**
-     * Применяет к кнопке стили псевдокласса `:active`.
-     */
-    active?: boolean;
-    /**
-     * CSS-свойство `text-align`.
-     */
-    align?: React.CSSProperties['textAlign'];
-    /**
-     * Превращает обычную кнопку в кнопку со стрелкой.
-     */
-    arrow?: boolean | 'left';
-    /**
-     * Даёт кнопке фокус после окончания загрузки страницы.
-     */
-    autoFocus?: boolean;
-    /**
-     * Убирает обводку у кнопки.
-     */
-    borderless?: boolean;
-    /**
-     * @ignore
-     */
-    checked?: boolean;
-    children?: React.ReactNode;
-    /** @ignore */
-    corners?: React.CSSProperties;
-    /**
-     * Отключенное состояние кнопки.
-     */
-    disabled?: boolean;
-    /** @ignore */
-    disableFocus?: boolean;
-    /**
-     * Состояние валидации при ошибке.
-     */
-    error?: boolean;
-    /**
-     * Иконка слева от текста кнопки.
-     */
-    icon?: React.ReactElement;
-    /**
-     * Иконка справа от текста кнопки.
-     */
-    rightIcon?: React.ReactElement;
-    /**
-     * Переводит кнопку в состояние загрузки.
-     */
-    loading?: boolean;
-    /**
-     * Сужает кнопку.
-     */
-    narrow?: boolean;
-    /**
-     * HTML-событие `onblur`.
-     */
-    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onclick`.
-     */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onfocus`.
-     */
-    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `keydown`.
-     */
-    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onmouseenter`.
-     */
-    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `mouseleave`.
-     */
-    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onmouseover`.
-     */
-    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Задаёт размер кнопки.
-     *
-     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
-     */
-    size?: SizeProp;
-    /**
-     * HTML-атрибут `type`.
-     */
-    type?: ButtonType;
-    /**
-     * HTML-атрибут `title`.
-     */
-    title?: string;
-    /**
-     * Стиль кнопки.
-     *
-     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`, `"text"`, `"backless"`.
-     */
-    use?: ButtonUse;
-    /** @ignore */
-    visuallyFocused?: boolean;
-    /**
-     * Состояние валидации при предупреждении.
-     */
-    warning?: boolean;
-    /**
-     * CSS-свойство `width`.
-     */
-    width?: number | string;
-    /**
-     * Обычный объект с переменными темы.
-     * Он будет объединён с темой из контекста.
-     */
-    theme?: ThemeIn;
-}
-export interface ButtonState {
-    focusedByTab: boolean;
-}
-export declare const ButtonDataTids: {
-    readonly rootElement: "Button__rootElement";
-    readonly root: "Button__root";
-    readonly spinner: "Button__spinner";
-};
-type DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;
-export declare class Button extends React.Component<ButtonProps, ButtonState> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    static __BUTTON__: boolean;
-    static defaultProps: DefaultProps;
-    private getProps;
-    state: {
-        focusedByTab: boolean;
-    };
-    private theme;
-    private node;
-    private setRootNode;
-    componentDidMount(): void;
-    static getDerivedStateFromProps(props: ButtonProps): {
-        focusedByTab: boolean;
-    } | null;
-    /**
-     * @public
-     */
-    focus(): void;
-    /**
-     * @public
-     */
-    blur(): void;
-    render(): JSX.Element;
-    private renderLinkRootWithoutHandlers;
-    private renderMain;
-    private renderIcon2022;
-    private getSizeClassName;
-    private getSizeWrapClassName;
-    private handleFocus;
-    private handleBlur;
-    private _ref;
-}
-export declare const isButton: (child: React.ReactNode) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;
-export {};
+import React from 'react';
+import type { ButtonLinkAllowedValues } from '../../lib/types/button-link';
+import type { ThemeIn } from '../../lib/theming/Theme';
+import type { CommonProps } from '../../internal/CommonWrapper';
+import type { SizeProp } from '../../lib/types/props';
+import type { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';
+export interface ButtonInnerProps extends CommonProps {
+    /** @ignore */
+    _noPadding?: boolean;
+    /** @ignore */
+    _noRightPadding?: boolean;
+    /** Применяет к кнопке стили псевдокласса `:active`. */
+    active?: boolean;
+    /** Задаёт выравнивание тексту в кнопке. */
+    align?: React.CSSProperties['textAlign'];
+    /** Превращает обычную кнопку в кнопку со стрелкой. */
+    arrow?: boolean | 'left';
+    /** Устанавливает фокус на контроле после окончания загрузки страницы.*/
+    autoFocus?: boolean;
+    /** Убирает обводку у кнопки. */
+    borderless?: boolean;
+    /** @ignore */
+    checked?: boolean;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** @ignore */
+    corners?: React.CSSProperties;
+    /** Делает компонент недоступным. */
+    disabled?: boolean;
+    /** @ignore */
+    disableFocus?: boolean;
+    /** Переводит контрол в состояние валидации "ошибка". */
+    error?: boolean;
+    /** Добавляет иконку слева от текста кнопки. */
+    icon?: React.ReactElement;
+    /** Добавляет иконку справа от текста кнопки. */
+    rightIcon?: React.ReactElement;
+    /** Переводит кнопку в состояние загрузки. */
+    loading?: boolean;
+    /** Сужает кнопку. */
+    narrow?: boolean;
+    /** Задаёт размер кнопки. */
+    size?: SizeProp;
+    /** Задаёт HTML-атрибут `type`. */
+    type?: ButtonType;
+    /** Задаёт HTML-атрибут `title`. */
+    title?: string;
+    /** Задаёт стиль кнопки.
+     * **Вариант `link` устарел.**
+     * Если нужна кнопка, выглядящая как ссылка, используйте `Link component=button`.
+     */
+    use?: ButtonUse;
+    /** @ignore */
+    visuallyFocused?: boolean;
+    /** Переводит контрол в состояние валидации "предупреждение". */
+    warning?: boolean;
+    /** Задаёт ширину кнопки. */
+    width?: number | string;
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
+    theme?: ThemeIn;
+}
+export declare const BUTTON_DEFAULT_COMPONENT = "button";
+export type ButtonProps<C extends ButtonLinkAllowedValues = typeof BUTTON_DEFAULT_COMPONENT> = PolymorphicPropsWithoutRef<ButtonInnerProps, C>;
+export interface ButtonState {
+    focusedByTab: boolean;
+}
+export declare const ButtonDataTids: {
+    readonly rootElement: "Button__rootElement";
+    readonly root: "Button__root";
+    readonly spinner: "Button__spinner";
+};
+type DefaultProps = Required<Pick<ButtonProps<ButtonLinkAllowedValues>, 'use' | 'size' | 'type' | 'component'>>;
+export declare class Button<C extends ButtonLinkAllowedValues = typeof BUTTON_DEFAULT_COMPONENT> extends React.Component<ButtonProps<C>, ButtonState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static __BUTTON__: boolean;
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: {
+        focusedByTab: boolean;
+    };
+    private theme;
+    private node;
+    private setRootNode;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: ButtonProps): {
+        focusedByTab: boolean;
+    } | null;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
+    render(): JSX.Element;
+    private getTabIndex;
+    private renderMain;
+    private renderIcon2022;
+    private getSizeClassName;
+    private getSizeWrapClassName;
+    private handleFocus;
+    private handleBlur;
+    private _ref;
+}
+export {};

package/components/Button/Button.md

@@ -1,12 +1,22 @@
-Базовый пример кнопки.
+### Базовый пример
+По умолчанию, кнопка принимает все пропы `HTMLButtonElement`.
 
 ```jsx harmony
 import { Button } from '@skbkontur/react-ui';
 
-<Button>Создать отчёт</Button>;
+<Button onClick={alert} name="report">Создать отчёт</Button>;
 ```
 
-У кнопки есть различные стили.
+### Корневой компонент
+Кнопка может рендерить ссылку в качестве корневого элемента, c помощью пропа `component`. Кнопка принимает все пропы переданного в `component` компонента.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button component='a' href='https://kontur.ru' target="_blank">Ссылка, но выглядит как кнопка</Button>
+```
+
+### Различные стили
 
 ```jsx harmony
 import { Gapped } from '@skbkontur/react-ui';
@@ -43,6 +53,7 @@ const bgStyle = {
 </Gapped>
 ```
 
+### Иконка
 В кнопку можно передать иконку. Иконка может находиться как слева от текста кнопки, так и справа и даже в обоих позициях одновременно.
 
 ```jsx harmony
@@ -56,27 +67,42 @@ import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
 </Gapped>
 ```
 
-У кнопки есть 3 стандартных размера.
+### Размер
 
 ```jsx harmony
 <div
-    style={{
-      display: "flex",
-      alignItems: "end",
-      gap: '10px',
-    }}
-  >
-    <Button size="small">Маленькая</Button>
-    <Button size="medium">Средняя</Button>
-    <Button size="large">Большая</Button>
+  style={{
+    display: "flex",
+    alignItems: "end",
+    gap: '10px',
+  }}
+>
+  <Button size="small">Маленькая</Button>
+  <Button size="medium">Средняя</Button>
+  <Button size="large">Большая</Button>
 </div>
 ```
 
-Кнопки могут принимать вид стрелок. В таком случае иконка привязывается к краю кнопки.
+### Ширина
+
+```jsx harmony
+<Button width={40}>Закрыть</Button>
+```
+
+### Состояние валидации
 
 ```jsx harmony
 import { Gapped, Button } from '@skbkontur/react-ui';
+<Gapped gap={5}>
+  <Button warning>Закрыть</Button>
+  <Button error>Закрыть</Button>
+</Gapped>
+```
 
+### Стрелка
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
 
 <Gapped gap={5}>
   <Button arrow="left" size="medium">
@@ -88,12 +114,10 @@ import { Gapped, Button } from '@skbkontur/react-ui';
 </Gapped>
 ```
 
-Кнопка в состоянии загрузки.
+### Состояние загрузки
 
 **Поведение:**
-
 Кнопка на время нахождения в состоянии загрузки отключается.
-
 Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет — весь контент кнопки заменяется на спиннер. Когда иконки две — заменяется только левая.
 
 ```jsx harmony
@@ -133,7 +157,7 @@ const handleClick = () => {
 
 ```
 
-Пример кнопки с пропом `theme`
+### Проп темы
 
 ```jsx harmony
 import { Button, Gapped } from '@skbkontur/react-ui';
@@ -145,20 +169,18 @@ import { Button, Gapped } from '@skbkontur/react-ui';
 </Gapped>
 ```
 
-
-Пример кастомизации кнопки-ссылки
+### Кастомизация кнопки-ссылки
 
 ```jsx harmony
 import { Toast } from "@skbkontur/react-ui";
 import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
 
 const textDecorationStyles = {
-  btnLinkLineBorderBottomWidth: '0',
-  btnLinkHoverTextDecoration: 'underline'
+  btnLinkTextUnderlineOffset: '1px',
 }
 
 const underlineOnHoverStyles = {
-  btnLinkLineBorderBottomColor: 'transparent',
+  btnLinkTextDecorationColor: 'transparent',
 }
 
 const differentColorStyles = {
@@ -168,7 +190,7 @@ const differentColorStyles = {
 }
 
 const stringify = (styles) => {
-    return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
+  return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
 }
 
 const copyStyles = (styles) => {
@@ -186,19 +208,19 @@ const tdStyle = {
   padding: '8px',
 };
 
-const renderExampleRow = (title, styles, index) => {
-    return (
-        <tr>
-          <td style={tdStyle}>{title}</td>
-          <td style={tdStyle}><Button use={'link'} theme={styles}>Button-link</Button></td>
-          <td style={tdStyle}>
-            <div style={{display: 'flex'}}>
-              <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
-              <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
-            </div>
-          </td>
-        </tr>
-    )
+const renderExampleRow = (title, styles) => {
+  return (
+    <tr>
+      <td style={tdStyle}>{title}</td>
+      <td style={tdStyle}><Button use={'link'} theme={styles}>Button-link</Button></td>
+      <td style={tdStyle}>
+        <div style={{display: 'flex'}}>
+          <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
+          <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
+        </div>
+      </td>
+    </tr>
+  )
 }
 
 <table style={tableStyle}>
@@ -207,8 +229,33 @@ const renderExampleRow = (title, styles, index) => {
     <th style={tdStyle}>Пример</th>
     <th style={tdStyle}>Переменные темы</th>
   </tr>
-  {renderExampleRow('Ссылка с подчеркиванием через text-decoration', textDecorationStyles)}
+  {renderExampleRow('Ссылка с подчеркиванием без отступа', textDecorationStyles)}
   {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)}
   {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
 </table>
 ```
+
+### Узкая Кнопка
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button narrow>
+  Создать отчет
+</Button>
+```
+
+### Состояния валидации
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap={5}>
+  <Button warning>
+    Warning
+  </Button>
+  <Button error>
+    Error
+  </Button>
+</Gapped>
+```

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

@@ -1,47 +1,24 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from "../../../lib/theming/Emotion";
-import { shift } from "../../../lib/styles/DimensionFunctions";
 import { globalClasses } from "../Button.styles";
-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 [shift(top, "" + -offset), shift(bottom, "" + offset)];
-  };
-  if (fontSize === '16px' && offset) {
-    var _shiftUp = shiftUp(paddingTop, paddingBottom, offset);
-    paddingTop = _shiftUp[0];
-    paddingBottom = _shiftUp[1];
-  }
-  if (additionalOffset && offset) {
-    var _shiftUp2 = shiftUp(paddingTop, paddingBottom, additionalOffset);
-    paddingTop = _shiftUp2[0];
-    paddingBottom = _shiftUp2[1];
-  }
-  return paddingTop + " " + paddingX + " " + paddingBottom;
+var getBtnPadding = function getBtnPadding(paddingY, paddingX) {
+  return paddingY + " " + paddingX + " " + paddingY;
 };
-export var buttonUseMixin = function buttonUseMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth) {
+export var buttonUseMixin = function buttonUseMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderWidth) {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 0 ", ";\n    }\n\n    :enabled:hover,\n    :enabled {\n      .", " svg {\n        color: ", ";\n      }\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", color, borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.arrow, color);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", ";\n\n    :enabled:hover,\n    :enabled {\n      .", " svg {\n        color: ", ";\n      }\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", color, borderWidth, borderColor, globalClasses.arrow, color);
 };
-export var buttonHoverMixin = function buttonHoverMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth) {
+export var buttonHoverMixin = function buttonHoverMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderWidth) {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n    color: ", ";\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", color, globalClasses.arrowHelper, borderWidth, borderColor);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", ";\n    color: ", ";\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", borderWidth, borderColor, color);
 };
-export var buttonActiveMixin = function buttonActiveMixin(btnBackground, btnShadow, borderColor, borderTopColor, borderWidth, arrowBgImage) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ", " !important; // override :hover styles\n      box-shadow: 0 0 0 ", " ", "", " !important; // override :hover styles\n\n      .", " {\n        box-shadow: ", ";\n      }\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n\n        &.", " {\n          background-image: ", ";\n        }\n      }\n    }\n  "])), btnBackground, borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "", globalClasses.innerShadow, btnShadow, globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.arrowHelperTop, arrowBgImage);
+export var buttonActiveMixin = function buttonActiveMixin(btnBackground, btnShadow, borderColor, borderWidth) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ", " !important; // override :hover styles\n      box-shadow: 0 0 0 ", " ", " !important; // override :hover styles\n\n      .", " {\n        box-shadow: ", ";\n      }\n    }\n  "])), btnBackground, borderWidth, borderColor, globalClasses.innerShadow, btnShadow);
 };
-export var buttonSizeMixin = function buttonSizeMixin(fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])), fontSize, getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation), lineHeight);
+export var buttonSizeMixin = function buttonSizeMixin(fontSize, lineHeight, paddingX, paddingY) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])), fontSize, getBtnPadding(paddingY, paddingX), lineHeight);
 };
-export var buttonSizeMixinIE11 = function buttonSizeMixinIE11(fontSize, paddingX, paddingY, fontFamilyCompensation) {
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    padding: ", ";\n    line-height: normal;\n  "])), getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1));
-};
-export var arrowOutlineMixin = function arrowOutlineMixin(insetWidth, outlineColor, outlineWidth, insetColor) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    .", " {\n      &.", " {\n        box-shadow:\n          inset -", " ", " 0 0 ", ",\n          ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      &.", " {\n        box-shadow:\n          inset -", " -", " 0 0 ", ",\n          ", " 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  "])), globalClasses.arrowHelper, globalClasses.arrowHelperTop, insetWidth, insetWidth, insetColor, outlineWidth, outlineColor, globalClasses.arrowHelperBottom, insetWidth, insetWidth, insetColor, outlineWidth, outlineColor, insetWidth, insetWidth, insetWidth, globalClasses.arrowHelperBottom, insetWidth);
+export var buttonSizeMixinIE11 = function buttonSizeMixinIE11(paddingX, paddingY) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    padding: ", ";\n    line-height: normal;\n  "])), getBtnPadding(paddingY, paddingX));
 };

package/components/Button/Button.mixins/Button.mixins.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","shift","globalClasses","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","_shiftUp","_shiftUp2","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","_templateObject","_taggedTemplateLiteralLoose","arrowHelper","arrow","buttonHoverMixin","_templateObject2","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","_templateObject3","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","_templateObject4","buttonSizeMixinIE11","_templateObject5","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","_templateObject6","arrowHelperBottom"],"sources":["Button.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n  fontSize: string,\n  paddingY: string,\n  paddingX: string,\n  fontFamilyCompensation: string,\n  additionalOffset = 0,\n): string => {\n  let paddingTop = paddingY;\n  let paddingBottom = paddingY;\n  const offset = parseInt(fontFamilyCompensation) || 0;\n\n  const shiftUp = (top: string, bottom: string, offset: number) => {\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n  };\n\n  if (fontSize === '16px' && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n  }\n  if (additionalOffset && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n  }\n\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n\n    :enabled:hover,\n    :enabled {\n      .${globalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n    color: ${color};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderTopColor: string,\n  borderWidth: string,\n  arrowBgImage: string,\n) => {\n  return css`\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ${btnBackground} !important; // override :hover styles\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``} !important; // override :hover styles\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${btnShadow};\n      }\n\n      .${globalClasses.arrowHelper} {\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n        &.${globalClasses.arrowHelperTop} {\n          background-image: ${arrowBgImage};\n        }\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (\n  fontSize: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = (\n  insetWidth: string,\n  outlineColor: string,\n  outlineWidth: string,\n  insetColor: string,\n) => {\n  return css`\n    .${globalClasses.arrowHelper} {\n      &.${globalClasses.arrowHelperTop} {\n        box-shadow:\n          inset -${insetWidth} ${insetWidth} 0 0 ${insetColor},\n          ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      &.${globalClasses.arrowHelperBottom} {\n        box-shadow:\n          inset -${insetWidth} -${insetWidth} 0 0 ${insetColor},\n          ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ${insetWidth};\n        right: ${insetWidth};\n        left: ${insetWidth};\n      }\n      &.${globalClasses.arrowHelperBottom}:before {\n        bottom: ${insetWidth};\n      }\n    }\n  `;\n};\n"],"mappings":"8MAAA,SAASA,GAAG,QAAQ,2BAA2B;AAC/C,SAASC,KAAK,QAAQ,qCAAqC;;AAE3D,SAASC,aAAa,QAAQ,iBAAiB;;AAE/C,IAAMC,aAAa,GAAG,SAAhBA,aAAaA;AACjBC,QAAgB;AAChBC,QAAgB;AAChBC,QAAgB;AAChBC,sBAA8B;AAC9BC,gBAAgB;AACL,KADXA,gBAAgB,cAAhBA,gBAAgB,GAAG,CAAC;EAEpB,IAAIC,UAAU,GAAGJ,QAAQ;EACzB,IAAIK,aAAa,GAAGL,QAAQ;EAC5B,IAAMM,MAAM,GAAGC,QAAQ,CAACL,sBAAsB,CAAC,IAAI,CAAC;;EAEpD,IAAMM,OAAO,GAAG,SAAVA,OAAOA,CAAIC,GAAW,EAAEC,MAAc,EAAEJ,MAAc,EAAK;IAC/D,OAAO,CAACV,KAAK,CAACa,GAAG,OAAK,CAACH,MAAQ,CAAC,EAAEV,KAAK,CAACc,MAAM,OAAKJ,MAAQ,CAAC,CAAC;EAC/D,CAAC;;EAED,IAAIP,QAAQ,KAAK,MAAM,IAAIO,MAAM,EAAE,KAAAK,QAAA;IACHH,OAAO,CAACJ,UAAU,EAAEC,aAAa,EAAEC,MAAM,CAAC,CAAvEF,UAAU,GAAAO,QAAA,IAAEN,aAAa,GAAAM,QAAA;EAC5B;EACA,IAAIR,gBAAgB,IAAIG,MAAM,EAAE,KAAAM,SAAA;IACAJ,OAAO,CAACJ,UAAU,EAAEC,aAAa,EAAEF,gBAAgB,CAAC,CAAjFC,UAAU,GAAAQ,SAAA,IAAEP,aAAa,GAAAO,SAAA;EAC5B;;EAEA,OAAUR,UAAU,SAAIH,QAAQ,SAAII,aAAa;AACnD,CAAC;;AAED,OAAO,IAAMQ,cAAc,GAAG,SAAjBA,cAAcA;AACzBC,aAAqB;AACrBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,KAAa;AACbC,WAAmB;AACnBC,iBAAyB;AACzBC,WAAmB;AAChB;EACH,IAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAAgB;EAC3D,OAAOrB,GAAG,CAAA2B,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACYF,WAAW,eAAeP,aAAa;EACvCO,WAAW,wBAAsBN,kBAAkB,UAAKC,gBAAgB,eAAY;EAC/FC,KAAK;EACMG,WAAW,EAAIF,WAAW,EAAGC,iBAAiB,YAAUC,WAAW,aAAQD,iBAAiB,KAAO;;EAEpHtB,aAAa,CAAC2B,WAAW;EACZJ,WAAW,EAAUF,WAAW;;;;;EAK3CrB,aAAa,CAAC4B,KAAK;EACXR,KAAK;;;;AAItB,CAAC;;AAED,OAAO,IAAMS,gBAAgB,GAAG,SAAnBA,gBAAgBA;AAC3BZ,aAAqB;AACrBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,KAAa;AACbC,WAAmB;AACnBC,iBAAyB;AACzBC,WAAmB;AAChB;EACH,IAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAAgB;EAC3D,OAAOrB,GAAG,CAAAgC,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;EACYF,WAAW,eAAeP,aAAa;EACvCO,WAAW,wBAAsBN,kBAAkB,UAAKC,gBAAgB,eAAY;EACpFI,WAAW,EAAIF,WAAW,EAAGC,iBAAiB,YAAUC,WAAW,aAAQD,iBAAiB,KAAO;EAC9GF,KAAK;;EAEXpB,aAAa,CAAC2B,WAAW;EACZJ,WAAW,EAAQF,WAAW;;;AAGlD,CAAC;;AAED,OAAO,IAAMU,iBAAiB,GAAG,SAApBA,iBAAiBA;AAC5Bd,aAAqB;AACrBe,SAAiB;AACjBX,WAAmB;AACnBY,cAAsB;AACtBV,WAAmB;AACnBW,YAAoB;AACjB;EACH,OAAOpC,GAAG,CAAAqC,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;;;;EAIcT,aAAa;EACbM,WAAW,EAAIF,WAAW,EAAGY,cAAc,aAAWV,WAAW,aAAQU,cAAc,KAAO;;EAE/GjC,aAAa,CAACoC,WAAW;EACZJ,SAAS;;;EAGtBhC,aAAa,CAAC2B,WAAW;EACZJ,WAAW,EAAQF,WAAW;;EAExCrB,aAAa,CAACqC,cAAc;EACVH,YAAY;;;;;AAK1C,CAAC;;AAED,OAAO,IAAMI,eAAe,GAAG,SAAlBA,eAAeA;AAC1BpC,QAAgB;AAChBqC,UAAkB;AAClBnC,QAAgB;AAChBD,QAAgB;AAChBE,sBAA8B;AAC3B;EACH,OAAOP,GAAG,CAAA0C,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;EACKxB,QAAQ;;EAEVD,aAAa,CAACC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,sBAAsB,CAAC;EAC/DkC,UAAU;;AAE7B,CAAC;;AAED,OAAO,IAAME,mBAAmB,GAAG,SAAtBA,mBAAmBA;AAC9BvC,QAAgB;AAChBE,QAAgB;AAChBD,QAAgB;AAChBE,sBAA8B;AAC3B;EACH,OAAOP,GAAG,CAAA4C,gBAAA,KAAAA,gBAAA,GAAAhB,2BAAA;EACGzB,aAAa,CAACC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,sBAAsB,EAAE,CAAC,CAAC;;;AAGrF,CAAC;;AAED,OAAO,IAAMsC,iBAAiB,GAAG,SAApBA,iBAAiBA;AAC5BC,UAAkB;AAClBC,YAAoB;AACpBC,YAAoB;AACpBC,UAAkB;AACf;EACH,OAAOjD,GAAG,CAAAkD,gBAAA,KAAAA,gBAAA,GAAAtB,2BAAA;EACL1B,aAAa,CAAC2B,WAAW;EACtB3B,aAAa,CAACqC,cAAc;;EAEnBO,UAAU,EAAIA,UAAU,EAAQG,UAAU;EACjDD,YAAY,EAAUD,YAAY;;;EAGpC7C,aAAa,CAACiD,iBAAiB;;EAEtBL,UAAU,EAAKA,UAAU,EAAQG,UAAU;EAClDD,YAAY,EAAUD,YAAY;;;;;;EAM/BD,UAAU;EACRA,UAAU;EACXA,UAAU;;EAEhB5C,aAAa,CAACiD,iBAAiB;EACvBL,UAAU;;;;AAI5B,CAAC","ignoreList":[]}
+{"version":3,"names":["css","globalClasses","getBtnPadding","paddingY","paddingX","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderWidth","hasGradient","_templateObject","_taggedTemplateLiteralLoose","arrow","buttonHoverMixin","_templateObject2","buttonActiveMixin","btnShadow","_templateObject3","innerShadow","buttonSizeMixin","fontSize","lineHeight","_templateObject4","buttonSizeMixinIE11","_templateObject5"],"sources":["Button.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (paddingY: string, paddingX: string): string => {\n  return `${paddingY} ${paddingX} ${paddingY}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor};\n\n    :enabled:hover,\n    :enabled {\n      .${globalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor};\n    color: ${color};\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderWidth: string,\n) => {\n  return css`\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ${btnBackground} !important; // override :hover styles\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor} !important; // override :hover styles\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${btnShadow};\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(paddingY, paddingX)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (paddingX: string, paddingY: string) => {\n  return css`\n    padding: ${getBtnPadding(paddingY, paddingX)};\n    line-height: normal;\n  `;\n};\n"],"mappings":"4LAAA,SAASA,GAAG,QAAQ,2BAA2B;;AAE/C,SAASC,aAAa,QAAQ,iBAAiB;;AAE/C,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,QAAgB,EAAEC,QAAgB,EAAa;EACpE,OAAUD,QAAQ,SAAIC,QAAQ,SAAID,QAAQ;AAC5C,CAAC;;AAED,OAAO,IAAME,cAAc,GAAG,SAAjBA,cAAcA;AACzBC,aAAqB;AACrBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,KAAa;AACbC,WAAmB;AACnBC,WAAmB;AAChB;EACH,IAAMC,WAAW,GAAGL,kBAAkB,KAAKC,gBAAgB;EAC3D,OAAOR,GAAG,CAAAa,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACYF,WAAW,eAAeN,aAAa;EACvCM,WAAW,wBAAsBL,kBAAkB,UAAKC,gBAAgB,eAAY;EAC/FC,KAAK;EACME,WAAW,EAAID,WAAW;;;;EAIzCT,aAAa,CAACc,KAAK;EACXN,KAAK;;;;AAItB,CAAC;;AAED,OAAO,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAgBA;AAC3BV,aAAqB;AACrBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,KAAa;AACbC,WAAmB;AACnBC,WAAmB;AAChB;EACH,IAAMC,WAAW,GAAGL,kBAAkB,KAAKC,gBAAgB;EAC3D,OAAOR,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;EACYF,WAAW,eAAeN,aAAa;EACvCM,WAAW,wBAAsBL,kBAAkB,UAAKC,gBAAgB,eAAY;EACpFG,WAAW,EAAID,WAAW;EACrCD,KAAK;;AAElB,CAAC;;AAED,OAAO,IAAMS,iBAAiB,GAAG,SAApBA,iBAAiBA;AAC5BZ,aAAqB;AACrBa,SAAiB;AACjBT,WAAmB;AACnBC,WAAmB;AAChB;EACH,OAAOX,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;EAIcR,aAAa;EACbK,WAAW,EAAID,WAAW;;EAE3CT,aAAa,CAACoB,WAAW;EACZF,SAAS;;;;AAI/B,CAAC;;AAED,OAAO,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,QAAgB,EAAEC,UAAkB,EAAEpB,QAAgB,EAAED,QAAgB,EAAK;EAC3G,OAAOH,GAAG,CAAAyB,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;EACKS,QAAQ;;EAEVrB,aAAa,CAACC,QAAQ,EAAEC,QAAQ,CAAC;EAC7BoB,UAAU;;AAE7B,CAAC;;AAED,OAAO,IAAME,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAItB,QAAgB,EAAED,QAAgB,EAAK;EACzE,OAAOH,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;EACGZ,aAAa,CAACC,QAAQ,EAAEC,QAAQ,CAAC;;;AAGhD,CAAC","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-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, color: 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, 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;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderWidth: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => string;
+export declare const buttonSizeMixinIE11: (paddingX: string, paddingY: string) => string;