@toptal/picasso-button 1.0.10-alpha-feature-migrate-buttons-876f8c430.20 → 1.0.10-alpha-FX-5195-fix-button-css-precedence-06be01cc1.19

package/dist-package/src/Button/Button.d.ts

@@ -1,6 +1,5 @@
 import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react';
 import type { StandardProps, SizeType, ButtonOrAnchorProps, OverridableComponent, TextLabelProps } from '@toptal/picasso-shared';
-import '@toptal/picasso-link';
 export declare type VariantType = 'primary' | 'negative' | 'positive' | 'secondary' | 'transparent';
 export declare type IconPositionType = 'left' | 'right';
 export interface Props extends StandardProps, TextLabelProps, ButtonOrAnchorProps {

package/dist-package/src/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAI7E,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACf,MAAM,wBAAwB,CAAA;AAI/B,OAAO,sBAAsB,CAAA;AAU7B,oBAAY,WAAW,GACnB,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,aAAa,CAAA;AAEjB,oBAAY,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,cAAc,EACd,mBAAmB;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,gBAAgB,CAAA;IAC/B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC5E,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CACrC;AA2BD,eAAO,MAAM,MAAM,EAAE,oBAAoB,CAAC,KAAK,CA0E7C,CAAA;AAoBF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAG7E,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EAEf,MAAM,wBAAwB,CAAA;AAmB/B,oBAAY,WAAW,GACnB,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,aAAa,CAAA;AAEjB,oBAAY,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,cAAc,EACd,mBAAmB;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,gBAAgB,CAAA;IAC/B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC5E,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CACrC;AA8BD,eAAO,MAAM,MAAM,EAAE,oBAAoB,CAAC,KAAK,CAmG7C,CAAA;AAoBF,eAAe,MAAM,CAAA"}

package/dist-package/src/Button/Button.js

@@ -11,54 +11,64 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
-import { twMerge } from 'tailwind-merge';
-import { noop } from '@toptal/picasso-utils';
-// we need to ensure the correct order of styles import
-// @TODO: to be removed when the component is migrated in FX-4614
-import '@toptal/picasso-link';
-import { ButtonBase } from '../ButtonBase';
-import { createVariantClassNames, createCoreClassNames, createSizeClassNames, createIconClassNames, } from './styles';
-const getIcon = ({ children, icon, iconPosition, size, }) => {
+import { useTitleCase } from '@toptal/picasso-shared';
+import { makeStyles, ButtonBase } from '@material-ui/core';
+import { Loader } from '@toptal/picasso-loader';
+import { Container } from '@toptal/picasso-container';
+import { noop, toTitleCase } from '@toptal/picasso-utils';
+import styles from './styles';
+// Using { index: -50 } to inject CSS link to the bottom of the head
+// in order to prevent Link and Typography styles to override Button's ones
+// More specific button components like ButtonCircular, ButtonSplit, ButtonControlLabel, ButtonAction
+// have even lower indexes, so higher priority
+const useStyles = makeStyles(styles, {
+    name: 'PicassoButton',
+    index: -50,
+});
+const getClickHandler = (loading, handler) => loading ? noop : handler;
+const getIcon = (classes, children, icon, iconPosition) => {
     if (!icon) {
-        return undefined;
+        return null;
     }
-    const iconClassNames = createIconClassNames({
-        size,
-        iconPosition: children && iconPosition ? iconPosition : undefined,
-    });
+    const { icon: iconClass, iconLeft: iconLeftClass, iconRight: iconRightClass, } = classes;
     return React.cloneElement(icon, {
-        className: twMerge(iconClassNames, icon.props.className),
+        className: cx(iconClass, icon.props.className, {
+            [iconLeftClass]: children && iconPosition === 'left',
+            [iconRightClass]: children && iconPosition === 'right',
+        }),
+        key: 'button-icon',
     });
 };
 export const Button = forwardRef(function Button(props, ref) {
-    const { icon, iconPosition, loading, className, fullWidth, variant = 'primary', size = 'medium', focused, hovered, disabled, active } = props, rest = __rest(props, ["icon", "iconPosition", "loading", "className", "fullWidth", "variant", "size", "focused", "hovered", "disabled", "active"]);
-    const iconComponent = getIcon({
-        children: rest.children,
-        icon,
-        iconPosition,
-        size,
-    });
-    const coreClassNames = createCoreClassNames({
-        disabled,
-        focused,
-        hovered,
-        active,
-    });
-    const variantClassNames = createVariantClassNames(variant, {
-        disabled,
-        focused,
-        hovered,
-        active,
-    });
-    const sizeClassNames = createSizeClassNames(size);
-    const finalClassName = twMerge(coreClassNames, variantClassNames, sizeClassNames, fullWidth ? 'w-full' : '', className);
-    const contentSizeClassNames = {
-        small: ['text-button-small'],
-        medium: ['text-button-medium'],
-        large: ['text-button-large'],
-    };
-    const contentClassName = cx('font-semibold whitespace-nowrap', contentSizeClassNames[size], loading ? 'opacity-0' : '');
-    return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, className: finalClassName, contentClassName: contentClassName, icon: iconComponent, iconPosition: iconPosition, loading: loading, disabled: disabled })));
+    const { icon, iconPosition, loading, children, className, style, fullWidth, variant = 'primary', size = 'medium', focused, hovered, disabled, active, onClick, title, value, type, as = 'button', titleCase: propsTitleCase } = props, rest = __rest(props, ["icon", "iconPosition", "loading", "children", "className", "style", "fullWidth", "variant", "size", "focused", "hovered", "disabled", "active", "onClick", "title", "value", "type", "as", "titleCase"]);
+    const classes = useStyles(props);
+    const { root: rootClass, hidden: hiddenClass, loader: loaderClass, content: contentClass, } = classes;
+    const titleCase = useTitleCase(propsTitleCase);
+    const finalChildren = [titleCase ? toTitleCase(children) : children];
+    if (icon) {
+        const iconComponent = getIcon(classes, children, icon, iconPosition);
+        if (iconPosition === 'left') {
+            finalChildren.unshift(iconComponent);
+        }
+        else {
+            finalChildren.push(iconComponent);
+        }
+    }
+    const variantClassName = classes[variant];
+    const sizeClassName = classes[size];
+    const rootClassName = cx({
+        [classes.fullWidth]: fullWidth,
+        [classes.active]: active,
+        [classes.focused]: focused,
+        [classes.hovered]: hovered,
+        [classes.disabled]: disabled,
+    }, sizeClassName, variantClassName, rootClass);
+    return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, classes: {
+            root: rootClassName,
+            focusVisible: cx(classes.focusVisible),
+        }, onClick: getClickHandler(loading, onClick), className: className, style: style, disabled: disabled, title: title, value: value, type: type, component: as, "data-component-type": 'button' }),
+        React.createElement(Container, { as: 'span', inline: true, flex: true, direction: 'row', alignItems: 'center', className: cx({ [hiddenClass]: loading }, contentClass) }, finalChildren),
+        loading && (React.createElement(Loader, { variant: 'inherit', className: loaderClass, inline: true, size: 'small' }))));
 });
 Button.defaultProps = {
     active: false,

package/dist-package/src/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/Button/styles.d.ts

@@ -1,20 +1,46 @@
-import type { SizeType } from '@toptal/picasso-shared';
-import type { IconPositionType, VariantType } from './Button';
-export declare const createSizeClassNames: (size: 'small' | 'medium' | 'large') => string[];
-export declare const createVariantClassNames: (variant: VariantType, { disabled, focused, hovered, active, }: {
-    disabled?: boolean | undefined;
-    focused?: boolean | undefined;
-    hovered?: boolean | undefined;
-    active?: boolean | undefined;
-}) => string[];
-export declare const createCoreClassNames: ({ disabled, focused, active, }: {
-    disabled?: boolean | undefined;
-    focused?: boolean | undefined;
-    hovered?: boolean | undefined;
-    active?: boolean | undefined;
-}) => string[];
-export declare const createIconClassNames: ({ iconPosition, size, }: {
-    iconPosition?: IconPositionType | undefined;
-    size: SizeType<'small' | 'medium' | 'large'>;
-}) => string[];
+import type { Theme } from '@material-ui/core/styles';
+export declare const createOutlineCommons: ({ palette }: Theme) => {
+    color: string;
+    backgroundColor: string;
+    '&:hover, &$hovered': {
+        borderColor: string;
+    };
+    '&&&:visited': {
+        color: string;
+    };
+    '&$disabled': {
+        color: string | undefined;
+        borderColor: string | undefined;
+        backgroundColor: string;
+    };
+};
+export declare const activeGroup: ({ palette }: Theme) => {
+    backgroundColor: string | undefined;
+    borderColor: string | undefined;
+    color: string;
+};
+export declare const disabledGroup: ({ palette }: Theme) => {
+    color: string | undefined;
+    cursor: string;
+    pointerEvents: string;
+};
+export declare const createVariant: (mainColor: string, { palette }: Theme) => {
+    border: string;
+    color: string;
+    backgroundColor: string;
+    '&:hover, &$hovered': {
+        backgroundColor: string;
+    };
+    '&:active, &$active': {
+        backgroundColor: string;
+    };
+    '&&&:visited': {
+        color: string;
+    };
+    '&$disabled': {
+        backgroundColor: string | undefined;
+    };
+};
+declare const _default: (theme: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "transparent" | "hidden" | "medium" | "large" | "small" | "icon" | "active" | "disabled" | "loader" | "primary" | "negative" | "positive" | "secondary" | "fullWidth" | "hovered" | "focused" | "focusVisible" | "iconLeft" | "iconRight">;
+export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Button/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE7D,eAAO,MAAM,oBAAoB,SACzB,OAAO,GAAG,QAAQ,GAAG,OAAO,KACjC,MAAM,EAWR,CAAA;AAED,eAAO,MAAM,uBAAuB,YACzB,WAAW;;;;;MAYnB,MAAM,EAmIR,CAAA;AAED,eAAO,MAAM,oBAAoB;;;;;MAS7B,MAAM,EAgBT,CAAA;AAED,eAAO,MAAM,oBAAoB;;UAKzB,SAAS,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;MAC1C,MAAM,EAeT,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAMrD,eAAO,MAAM,oBAAoB,gBAAiB,KAAK;;;;;;;;;;;;;;CAkBrD,CAAA;AAEF,eAAO,MAAM,WAAW,gBAAiB,KAAK;;;;CAI5C,CAAA;AAEF,eAAO,MAAM,aAAa,gBAAiB,KAAK;;;;CAI9C,CAAA;AAEF,eAAO,MAAM,aAAa,cAAe,MAAM,eAAe,KAAK;;;;;;;;;;;;;;;;CAoBjE,CAAA;gCAEqB,KAAK;AAA5B,wBAiKC"}

package/dist-package/src/Button/styles.js

@@ -1,162 +1,180 @@
-export const createSizeClassNames = (size) => {
-    const sizeClassNames = {
-        small: ['min-w-14', 'h-6', 'py-0', 'px-3'],
-        medium: ['min-w-16', 'h-8', 'py-0', 'px-4'],
-        large: ['min-w-24', 'h-12', 'py-0', 'px-8'],
-    };
-    return sizeClassNames[size];
-};
-export const createVariantClassNames = (variant, { disabled, focused, hovered, active, }) => {
-    const variantClassNames = [];
-    switch (variant) {
-        case 'primary':
-            variantClassNames.push('border-none');
-            variantClassNames.push('text-white');
-            variantClassNames.push('visited:text-white');
-            if (disabled) {
-                variantClassNames.push('bg-gray-400');
-            }
-            else {
-                variantClassNames.push('hover:bg-[#4269D6]');
-                variantClassNames.push('active:bg-[#1A41AB]');
-                if (hovered) {
-                    variantClassNames.push('bg-[#4269D6]');
-                }
-                else if (active) {
-                    variantClassNames.push('bg-[#1A41AB]');
-                }
-                else {
-                    variantClassNames.push('bg-blue-500');
-                }
-            }
-            break;
-        case 'negative':
-            variantClassNames.push('border-none');
-            variantClassNames.push('text-white');
-            variantClassNames.push('visited:text-white');
-            if (disabled) {
-                variantClassNames.push('bg-gray-400');
-            }
-            else {
-                variantClassNames.push('hover:bg-[#DB466B]');
-                variantClassNames.push('active:bg-[#B01F43]');
-                if (hovered) {
-                    variantClassNames.push('bg-[#DB466B]');
-                }
-                else if (active) {
-                    variantClassNames.push('bg-[#B01F43]');
-                }
-                else {
-                    variantClassNames.push('bg-red-500');
-                }
-            }
-            break;
-        case 'positive':
-            variantClassNames.push('border-none');
-            variantClassNames.push('text-white');
-            variantClassNames.push('visited:text-white');
-            if (disabled) {
-                variantClassNames.push('bg-gray-400');
-            }
-            else {
-                variantClassNames.push('hover:bg-[#27D496]');
-                variantClassNames.push('active:bg-[#00A96C]');
-                if (hovered) {
-                    variantClassNames.push('bg-[#27D496]');
-                }
-                else if (active) {
-                    variantClassNames.push('bg-[#00A96C]');
-                }
-                else {
-                    variantClassNames.push('bg-green-500');
-                }
-            }
-            break;
-        case 'secondary':
-            variantClassNames.push('border border-solid');
-            if (disabled) {
-                variantClassNames.push('text-gray-500');
-                variantClassNames.push('border-gray-500');
-                variantClassNames.push('bg-white');
-            }
-            else {
-                variantClassNames.push('text-black');
-                variantClassNames.push('hover:border-black');
-                variantClassNames.push('visited:text-black');
-                variantClassNames.push('active:bg-gray-200');
-                variantClassNames.push('active:border-black');
-                if (hovered) {
-                    variantClassNames.push('border-black');
-                    variantClassNames.push('bg-white');
-                }
-                else if (active) {
-                    variantClassNames.push('border-black');
-                    variantClassNames.push('bg-gray-200');
-                }
-                else {
-                    variantClassNames.push('bg-white');
-                    variantClassNames.push('border-gray-400');
-                }
-            }
-            break;
-        case 'transparent':
-            variantClassNames.push('border border-solid');
-            if (disabled) {
-                variantClassNames.push('text-white/[0.32]');
-                variantClassNames.push('border-white/[0.32]');
-                variantClassNames.push('bg-transparent');
-            }
-            else {
-                variantClassNames.push('text-white');
-                variantClassNames.push('visited:text-white');
-                variantClassNames.push('border-solid');
-                variantClassNames.push('hover:border-white');
-                variantClassNames.push('active:border-white');
-                variantClassNames.push('active:bg-white/[.16]');
-                variantClassNames.push('focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)]');
-                if (hovered) {
-                    variantClassNames.push('border-white');
-                    variantClassNames.push('bg-transparent');
-                }
-                else if (active) {
-                    variantClassNames.push('border-white');
-                    variantClassNames.push('bg-white/[.16]');
-                }
-                else {
-                    variantClassNames.push('border-white/[0.32]');
-                    variantClassNames.push('bg-transparent');
-                }
-                if (focused) {
-                    variantClassNames.push('shadow-[0_0_0_3px_rgba(255,255,255,0.48)]');
-                }
-            }
-            break;
-    }
-    return variantClassNames;
-};
-export const createCoreClassNames = ({ disabled, focused, active, }) => {
-    const classNames = ['no-underline', 'rounded-sm', 'shadow-none'];
-    if (!disabled) {
-        classNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
-        if (focused) {
-            classNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
-        }
-        if (active) {
-            classNames.push('shadow-none');
-        }
-    }
-    return classNames;
-};
-export const createIconClassNames = ({ iconPosition, size, }) => {
-    const sizeClassNames = {
-        small: [iconPosition === 'left' ? 'ml-[-0.125em]' : 'mr-[-0.125em]'],
-        medium: [iconPosition === 'left' ? 'ml-[-0.25em]' : 'mr-[-0.25em]'],
-        large: [iconPosition === 'left' ? 'ml-[-0.5em]' : 'mr-[-0.5em]'],
-    };
-    return [
-        sizeClassNames[size].join(' '),
-        iconPosition === 'left' ? 'mr-[0.5em]' : '',
-        iconPosition === 'right' ? 'ml-[0.5em]' : '',
-    ];
+import { createStyles } from '@material-ui/core/styles';
+import { alpha, outline, mix } from '@toptal/picasso-shared';
+const ICON_SPACING = '0.5em';
+export const createOutlineCommons = ({ palette }) => ({
+    color: palette.common.black,
+    backgroundColor: palette.common.white,
+    '&:hover, &$hovered': {
+        borderColor: palette.common.black,
+    },
+    // when we use <Button as={Link} />
+    '&&&:visited': {
+        color: palette.common.black,
+    },
+    '&$disabled': {
+        color: palette.grey.main,
+        borderColor: palette.grey.main,
+        backgroundColor: palette.common.white,
+    },
+});
+export const activeGroup = ({ palette }) => ({
+    backgroundColor: palette.grey.dark,
+    borderColor: palette.grey.dark,
+    color: palette.common.white,
+});
+export const disabledGroup = ({ palette }) => ({
+    color: palette.grey.main,
+    cursor: 'not-allowed',
+    pointerEvents: 'all',
+});
+export const createVariant = (mainColor, { palette }) => ({
+    border: 'none',
+    color: palette.common.white,
+    backgroundColor: mainColor,
+    '&:hover, &$hovered': {
+        backgroundColor: mix(mainColor, palette.common.white, 0.152),
+    },
+    '&:active, &$active': {
+        backgroundColor: mix(mainColor, palette.common.black, 0.172),
+    },
+    // when we use <Button as={Link} />
+    '&&&:visited': {
+        color: palette.common.white,
+    },
+    '&$disabled': {
+        backgroundColor: palette.grey.light2,
+    },
+});
+export default (theme) => {
+    const { palette, sizes, transitions, typography } = theme;
+    return createStyles({
+        root: {
+            position: 'relative',
+            textTransform: 'none',
+            borderRadius: sizes.borderRadius.small,
+            border: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
+            fontSize: '1rem',
+            transitionDuration: `${transitions.duration.short}ms`,
+            transitionTimingFunction: transitions.easing.easeOut,
+            transitionProperty: 'border, color, background',
+            boxShadow: 'none',
+            flexShrink: 0,
+            '&$focusVisible, &$focused': Object.assign({}, outline(palette.primary.main)),
+            '&+&': {
+                marginLeft: '1rem',
+            },
+        },
+        content: {
+            lineHeight: '1.5em',
+            fontWeight: typography.fontWeights.semibold,
+            whiteSpace: 'nowrap',
+        },
+        loader: {
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+        },
+        // sizes
+        small: {
+            minWidth: '3.5em',
+            height: '1.5em',
+            padding: '0 0.75em',
+            '& $content': {
+                fontSize: typography.buttons.fontSizeSmall,
+                lineHeight: typography.buttons.lineHeightSmall,
+            },
+            '& $iconLeft': {
+                marginLeft: '-0.125em',
+            },
+            '& $iconRight': {
+                marginRight: '-0.125em',
+            },
+        },
+        medium: {
+            minWidth: '4em',
+            height: '2em',
+            padding: '0 1em',
+            '& $content': {
+                fontSize: typography.buttons.fontSizeMedium,
+                lineHeight: typography.buttons.lineHeightMedium,
+            },
+            '& $iconLeft': {
+                marginLeft: '-0.25em',
+            },
+            '& $iconRight': {
+                marginRight: '-0.25em',
+            },
+        },
+        large: {
+            minWidth: '6em',
+            height: '3em',
+            padding: '0 2em',
+            '& $content': {
+                fontSize: typography.buttons.fontSizeLarge,
+                lineHeight: typography.buttons.lineHeightLarge,
+            },
+            '& $iconLeft': {
+                marginLeft: '-0.5em',
+            },
+            '& $iconRight': {
+                marginRight: '-0.5em',
+            },
+        },
+        // variants
+        primary: createVariant(palette.primary.main, theme),
+        negative: createVariant(palette.red.main, theme),
+        positive: createVariant(palette.green.main, theme),
+        secondary: Object.assign(Object.assign({}, createOutlineCommons(theme)), { '&:active, &$active': {
+                backgroundColor: palette.grey.lighter2,
+                borderColor: palette.common.black,
+            } }),
+        transparent: {
+            color: palette.common.white,
+            border: `solid ${sizes.borderWidth} ${alpha(palette.common.white, 0.32)}`,
+            // when we use <Button as={Link} />
+            '&&&:visited': {
+                color: palette.common.white,
+            },
+            '&$focusVisible, &$focused': Object.assign({}, outline(palette.common.white)),
+            '&:hover, &$hovered': {
+                borderColor: palette.common.white,
+            },
+            '&:active, &$active': {
+                backgroundColor: alpha(palette.common.white, 0.16),
+                borderColor: palette.common.white,
+            },
+            '&$disabled': {
+                color: alpha(palette.common.white, 0.32),
+                borderColor: alpha(palette.common.white, 0.32),
+                backgroundColor: 'initial',
+            },
+        },
+        // Other props
+        fullWidth: {
+            width: '100%',
+        },
+        hovered: {},
+        focused: {},
+        active: {
+            boxShadow: 'none',
+        },
+        disabled: {},
+        focusVisible: {},
+        // Child elements
+        icon: {
+            fontSize: '1.2em !important',
+            flex: '1 1 0%', // IE11 fix
+        },
+        iconLeft: {
+            marginRight: ICON_SPACING,
+        },
+        iconRight: {
+            marginLeft: ICON_SPACING,
+        },
+        hidden: {
+            opacity: 0,
+        },
+    });
 };
 //# sourceMappingURL=styles.js.map