@toptal/picasso-button 1.0.13-alpha-fx-5263-merge-feature-branch-d124b1f9a.10 → 1.0.13-alpha-fx-4593-migrate-tag-4f7c872c8.4

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonAction.d.ts","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAa,MAAM,OAAO,CAAA;AAG7E,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA0BjD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,mBAAmB;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iGAAiG;IACjG,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,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,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAID,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,KAAK,CA0CnD,CAAA;AAQF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ButtonAction.d.ts","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAIjD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,mBAAmB;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iGAAiG;IACjG,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,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,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAYD,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,KAAK,CAkEnD,CAAA;AAQF,eAAe,YAAY,CAAA"}

package/dist-package/src/ButtonAction/ButtonAction.js

@@ -11,32 +11,40 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
+import { makeStyles } from '@material-ui/core/styles';
 import { Loader } from '@toptal/picasso-loader';
-import { ButtonBase } from '../ButtonBase';
-import { createRootClassNames, createIconClassNames } from './styles';
-const getIcon = ({ children, icon, iconPosition, }) => {
-    if (!icon) {
-        return null;
-    }
-    const iconClassNames = createIconClassNames({
-        iconPosition: children && iconPosition ? iconPosition : undefined,
-    });
-    return React.cloneElement(icon, {
-        className: cx(iconClassNames, icon.props.className),
-    });
-};
+import { Button } from '../Button';
+import styles from './styles';
+// Using { index: -1 } to inject CSS link to the bottom of the head
+// in order to prevent Button's styles to override ButtonAction's ones
+// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
+const useStyles = makeStyles(styles, {
+    name: 'PicassoButtonAction',
+    index: -1,
+});
 const loaderIcon = React.createElement(Loader, { size: 'small', variant: 'inherit' });
 export const ButtonAction = forwardRef(function ButtonAction(props, ref) {
     const { className, active, focused, hovered, disabled, loading, icon, iconPosition, onClick } = props, rest = __rest(props, ["className", "active", "focused", "hovered", "disabled", "loading", "icon", "iconPosition", "onClick"]);
+    const classes = useStyles();
+    const { root: rootClass, content, icon: iconClassName, iconLeft, iconRight, small, } = classes;
+    const rootClassName = cx({
+        [classes.active]: active,
+        [classes.focused]: focused,
+        [classes.hovered]: hovered,
+        [classes.disabled]: disabled,
+        [classes.loading]: loading,
+        [classes.iconless]: !icon,
+    }, rootClass);
     const usedIcon = loading ? loaderIcon : icon;
     const usedIconPosition = icon ? iconPosition : 'right';
-    const finalClassName = cx(createRootClassNames(props), className);
-    const finalIcon = getIcon({
-        children: rest.children,
-        icon: usedIcon,
-        iconPosition: usedIconPosition,
-    });
-    return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, icon: finalIcon, iconPosition: usedIconPosition, onClick: loading ? undefined : onClick, className: finalClassName, contentClassName: 'font-semibold text-blue-500 text-md', active: active, hovered: hovered, focused: focused, disabled: disabled })));
+    return (React.createElement(Button, Object.assign({}, rest, { ref: ref, icon: usedIcon, iconPosition: usedIconPosition, onClick: loading ? undefined : onClick, variant: 'secondary', classes: {
+            root: rootClassName,
+            content,
+            icon: iconClassName,
+            iconLeft,
+            iconRight,
+            small,
+        }, className: className, size: 'small', active: active, hovered: hovered, focused: focused, disabled: disabled })));
 });
 ButtonAction.defaultProps = {
     iconPosition: 'left',

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonAction.js","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAM3B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAErE,MAAM,OAAO,GAAG,CAAC,EACf,QAAQ,EACR,IAAI,EACJ,YAAY,GAKb,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,cAAc,GAAG,oBAAoB,CAAC;QAC1C,YAAY,EAAE,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;KAClE,CAAC,CAAA;IAEF,OAAO,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;QAC9B,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;KACpD,CAAC,CAAA;AACJ,CAAC,CAAA;AAyBD,MAAM,UAAU,GAAG,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,GAAG,CAAA;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAgC,UAAU,CAGjE,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,EACJ,SAAS,EACT,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,uGAWL,CAAQ,CAAA;IAET,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;IAC5C,MAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAA;IAEtD,MAAM,cAAc,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAA;IACjE,MAAM,SAAS,GAAG,OAAO,CAAC;QACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,gBAAgB;KAC/B,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACtC,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAC,qCAAqC,EACtD,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,YAAY,CAAC,YAAY,GAAG;IAC1B,YAAY,EAAE,MAAM;CACrB,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ButtonAction.js","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAMrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAG/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AAyB7B,mEAAmE;AACnE,sEAAsE;AACtE,uEAAuE;AACvE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,qBAAqB;IAC3B,KAAK,EAAE,CAAC,CAAC;CACV,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,GAAG,CAAA;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAgC,UAAU,CAGjE,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,EACJ,SAAS,EACT,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,uGAWL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EACJ,IAAI,EAAE,SAAS,EACf,OAAO,EACP,IAAI,EAAE,aAAa,EACnB,QAAQ,EACR,SAAS,EACT,KAAK,GACN,GAAG,OAAO,CAAA;IAEX,MAAM,aAAa,GAAG,EAAE,CACtB;QACE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM;QACxB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ;QAC5B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI;KAC1B,EACD,SAAS,CACV,CAAA;IAED,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;IAC5C,MAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAA;IAEtD,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACtC,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,OAAO;YACP,IAAI,EAAE,aAAa;YACnB,QAAQ;YACR,SAAS;YACT,KAAK;SACN,EACD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,YAAY,CAAC,YAAY,GAAG;IAC1B,YAAY,EAAE,MAAM;CACrB,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}

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

@@ -1,12 +1,4 @@
-import type { IconPositionType } from '../ButtonBase';
-export declare const createRootClassNames: ({ disabled, focused, hovered, active, loading, }: {
-    disabled?: boolean | undefined;
-    focused?: boolean | undefined;
-    hovered?: boolean | undefined;
-    active?: boolean | undefined;
-    loading?: boolean | undefined;
-}) => string[];
-export declare const createIconClassNames: ({ iconPosition, }: {
-    iconPosition?: IconPositionType | undefined;
-}) => string[];
+import type { Theme } from '@material-ui/core/styles';
+declare const _default: ({ palette, typography }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "small" | "icon" | "active" | "disabled" | "hovered" | "focused" | "iconLeft" | "iconRight" | "loading">;
+export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonAction/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAErD,eAAO,MAAM,oBAAoB;;;;;;cAyChC,CAAA;AAED,eAAO,MAAM,oBAAoB;;MAI7B,MAAM,EAQT,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonAction/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;kDAGZ,KAAK;AAA9C,wBAsDI"}

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

@@ -1,37 +1,56 @@
-export const createRootClassNames = ({ disabled, focused, hovered, active, loading, }) => {
-    const classNames = ['border-none', 'px-0', 'bg-transparent', 'h-[1.5em]'];
-    if (disabled) {
-        classNames.push('opacity-[.48]');
-    }
-    else if (loading) {
-        classNames.push('no-underline');
-        classNames.push('!cursor-default');
-    }
-    else {
-        classNames.push('hover:text-blue-500');
-        classNames.push('hover:underline');
-        classNames.push('active:text-blue-500');
-        classNames.push('active:underline');
-        if (hovered || active) {
-            classNames.push('text-blue-500');
-            classNames.push('underline');
-        }
-        classNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
-        classNames.push('focus-visible:rounded-sm');
-        if (focused) {
-            classNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
-            classNames.push('rounded-sm');
-        }
-    }
-    return classNames;
-};
-export const createIconClassNames = ({ iconPosition, }) => {
-    return [
-        'w-4',
-        'h-4',
-        'text-graphite-700',
-        iconPosition === 'left' ? 'mr-[0.5rem]' : '',
-        iconPosition === 'right' ? 'ml-[0.5rem]' : '',
-    ];
-};
+import { createStyles } from '@material-ui/core/styles';
+export default ({ palette, typography }) => createStyles({
+    root: {
+        border: 'none',
+        minWidth: 'unset',
+        paddingLeft: '0',
+        paddingRight: '0',
+        backgroundColor: 'transparent',
+        '&:active, &$active, &:hover, &$hovered': {
+            backgroundColor: 'transparent',
+            color: palette.blue.main,
+            textDecoration: 'underline',
+        },
+        '&$loading': {
+            textDecoration: 'none',
+            cursor: 'default',
+        },
+        '&$disabled': {
+            backgroundColor: 'transparent',
+            opacity: 0.48,
+        },
+    },
+    content: {
+        fontWeight: typography.fontWeights.semibold,
+        color: palette.blue.main,
+    },
+    small: {
+        '& $content': {
+            fontSize: '0.875rem',
+            lineHeight: '1.375rem',
+        },
+        '& $iconLeft': {
+            marginLeft: 0,
+        },
+        '& $iconRight': {
+            marginRight: 0,
+        },
+    },
+    icon: {
+        width: '1rem',
+        height: '1rem',
+        color: palette.grey.dark,
+    },
+    iconLeft: {
+        marginRight: '0.5rem',
+    },
+    iconRight: {
+        marginLeft: '0.5rem',
+    },
+    active: {},
+    disabled: {},
+    hovered: {},
+    focused: {},
+    loading: {},
+});
 //# sourceMappingURL=styles.js.map

package/dist-package/src/ButtonAction/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonAction/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,OAAO,GAOR,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAAA;IAEzE,IAAI,QAAQ,EAAE;QACZ,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;KACjC;SAAM,IAAI,OAAO,EAAE;QAClB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAC/B,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;KACnC;SAAM;QACL,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QACtC,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;QAClC,UAAU,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAA;QACvC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;QAEnC,IAAI,OAAO,IAAI,MAAM,EAAE;YACrB,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;YAChC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;SAC7B;QAED,UAAU,CAAC,IAAI,CAAC,uDAAuD,CAAC,CAAA;QACxE,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA;QAE3C,IAAI,OAAO,EAAE;YACX,UAAU,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAA;YAC1D,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;SAC9B;KACF;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,YAAY,GAGb,EAAY,EAAE;IACb,OAAO;QACL,KAAK;QACL,KAAK;QACL,mBAAmB;QACnB,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;QAC5C,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;KAC9C,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonAction/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,UAAU,EAAS,EAAE,EAAE,CAChD,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,OAAO;QACjB,WAAW,EAAE,GAAG;QAChB,YAAY,EAAE,GAAG;QACjB,eAAe,EAAE,aAAa;QAC9B,wCAAwC,EAAE;YACxC,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACxB,cAAc,EAAE,WAAW;SAC5B;QACD,WAAW,EAAE;YACX,cAAc,EAAE,MAAM;YACtB,MAAM,EAAE,SAAS;SAClB;QACD,YAAY,EAAE;YACZ,eAAe,EAAE,aAAa;YAC9B,OAAO,EAAE,IAAI;SACd;KACF;IACD,OAAO,EAAE;QACP,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,QAAQ;QAC3C,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,KAAK,EAAE;QACL,YAAY,EAAE;YACZ,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,UAAU;SACvB;QACD,aAAa,EAAE;YACb,UAAU,EAAE,CAAC;SACd;QACD,cAAc,EAAE;YACd,WAAW,EAAE,CAAC;SACf;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,QAAQ;KACtB;IACD,SAAS,EAAE;QACT,UAAU,EAAE,QAAQ;KACrB;IACD,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;CACZ,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonCircular.d.ts","sourceRoot":"","sources":["../../../src/ButtonCircular/ButtonCircular.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAGlE,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAK/B,oBAAY,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,CAAA;AAE5D,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,mBAAmB;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iGAAiG;IACjG,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,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,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,KAAK,CA4CrD,CAAA;AAQF,eAAe,cAAc,CAAA"}
+{"version":3,"file":"ButtonCircular.d.ts","sourceRoot":"","sources":["../../../src/ButtonCircular/ButtonCircular.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAM/B,oBAAY,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,CAAA;AAE5D,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,mBAAmB;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iGAAiG;IACjG,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,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,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAUD,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,KAAK,CAgDrD,CAAA;AAQF,eAAe,cAAc,CAAA"}

package/dist-package/src/ButtonCircular/ButtonCircular.js

@@ -11,19 +11,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
-import { ButtonBase } from '../ButtonBase';
-import { createRootClassNames, createVariantClassNames } from './styles';
+import { makeStyles } from '@material-ui/core/styles';
+import { kebabToCamelCase } from '@toptal/picasso-utils';
+import { Button } from '../Button';
+import styles from './styles';
+// Using { index: -1 } to inject CSS link to the bottom of the head
+// in order to prevent Button's styles to override ButtonCircular's ones
+// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
+const useStyles = makeStyles(styles, {
+    name: 'PicassoButtonCircular',
+    index: -1,
+});
 export const ButtonCircular = forwardRef(function ButtonCircular(props, ref) {
-    const { className, variant = 'primary', active, focused, hovered, disabled, responsive, loading } = props, rest = __rest(props, ["className", "variant", "active", "focused", "hovered", "disabled", "responsive", "loading"]);
-    const variantClassNames = createVariantClassNames(variant, {
-        disabled,
-        focused,
-        hovered,
-        active,
-    });
-    const finalClassName = cx(createRootClassNames({ responsive, active, disabled, focused, hovered }), variantClassNames, className);
-    const contentClassName = cx('font-semibold whitespace-nowrap', 'text-button-small', loading ? 'opacity-0' : '');
-    return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, loading: loading, className: finalClassName, contentClassName: contentClassName, disabled: disabled })));
+    const { className, variant = 'primary', active, focused, hovered, disabled, responsive } = props, rest = __rest(props, ["className", "variant", "active", "focused", "hovered", "disabled", "responsive"]);
+    const classes = useStyles();
+    const { root: rootClass, focusVisible: focusVisibleClass } = classes;
+    const variantClassName = classes[kebabToCamelCase(variant)];
+    const rootClassName = cx({
+        [classes.active]: active,
+        [classes.focused]: focused,
+        [classes.hovered]: hovered,
+        [classes.disabled]: disabled,
+        [classes.responsive]: responsive,
+    }, variantClassName, rootClass);
+    return (React.createElement(Button, Object.assign({}, rest, { ref: ref, classes: {
+            root: rootClassName,
+            focusVisible: focusVisibleClass,
+        }, className: className, size: 'small', active: active, hovered: hovered, focused: focused, disabled: disabled })));
 });
 ButtonCircular.defaultProps = {
     variant: 'primary',

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonCircular.js","sourceRoot":"","sources":["../../../src/ButtonCircular/ButtonCircular.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAO3B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AA6BxE,MAAM,CAAC,MAAM,cAAc,GAAgC,UAAU,CAGnE,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,EACJ,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,6FAUL,CAAQ,CAAA;IACT,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,OAAO,EAAE;QACzD,QAAQ;QACR,OAAO;QACP,OAAO;QACP,MAAM;KACP,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,EAAE,CACvB,oBAAoB,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EACxE,iBAAiB,EACjB,SAAS,CACV,CAAA;IAED,MAAM,gBAAgB,GAAG,EAAE,CACzB,iCAAiC,EACjC,mBAAmB,EACnB,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAC3B,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,cAAc,CAAC,YAAY,GAAG;IAC5B,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,eAAe,cAAc,CAAA"}
+{"version":3,"file":"ButtonCircular.js","sourceRoot":"","sources":["../../../src/ButtonCircular/ButtonCircular.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAMrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AA6B7B,mEAAmE;AACnE,wEAAwE;AACxE,uEAAuE;AACvE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,uBAAuB;IAC7B,KAAK,EAAE,CAAC,CAAC;CACV,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAgC,UAAU,CAGnE,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,EACJ,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,KAER,KAAK,EADJ,IAAI,UACL,KAAK,EATH,kFASL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,GAAG,OAAO,CAAA;IAEpE,MAAM,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAA;IAE3D,MAAM,aAAa,GAAG,EAAE,CACtB;QACE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM;QACxB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ;QAC5B,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,UAAU;KACjC,EACD,gBAAgB,EAChB,SAAS,CACV,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,iBAAiB;SAChC,EACD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,cAAc,CAAC,YAAY,GAAG;IAC5B,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,eAAe,cAAc,CAAA"}

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

@@ -1,16 +1,4 @@
-import type { VariantType } from './ButtonCircular';
-export declare const createRootClassNames: ({ responsive, }: {
-    disabled?: boolean | undefined;
-    focused?: boolean | undefined;
-    hovered?: boolean | undefined;
-    active?: boolean | undefined;
-    loading?: boolean | undefined;
-    responsive?: boolean | undefined;
-}) => string[];
-export declare const createVariantClassNames: (variant: VariantType, { disabled, focused, hovered, active, }: {
-    disabled?: boolean | undefined;
-    focused?: boolean | undefined;
-    hovered?: boolean | undefined;
-    active?: boolean | undefined;
-}) => string[];
+import type { Theme } from '@material-ui/core/styles';
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "transparent" | "flat" | "active" | "disabled" | "primary" | "hovered" | "focused" | "focusVisible" | "responsive">;
+export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonCircular/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,eAAO,MAAM,oBAAoB;;;;;;;cAmBhC,CAAA;AAED,eAAO,MAAM,uBAAuB,YACzB,WAAW;;;;;MAYnB,MAAM,EA0FR,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonCircular/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAKxB,KAAK;AAAlC,wBAqEI"}

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

@@ -1,93 +1,58 @@
-export const createRootClassNames = ({ responsive, }) => {
-    const classNames = ['rounded-full', 'p-0'];
-    if (responsive) {
-        classNames.push('w-[2.5em] h-[2.5em] xl:w-[1.5em] xl:h-[1.5em]');
-    }
-    else {
-        classNames.push('w-[1.5em] h-[1.5em]');
-    }
-    return classNames;
-};
-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]');
-                variantClassNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
-                if (focused) {
-                    variantClassNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
-                }
-                if (hovered) {
-                    variantClassNames.push('bg-[#4269D6]');
-                }
-                else if (active) {
-                    variantClassNames.push('bg-[#1A41AB]');
-                }
-                else {
-                    variantClassNames.push('bg-blue-500');
-                }
-            }
-            break;
-        case 'flat':
-            variantClassNames.push('border-none');
-            variantClassNames.push('text-graphite-700');
-            if (disabled) {
-                variantClassNames.push('text-graphite-700');
-                variantClassNames.push('opacity-[0.48]');
-                variantClassNames.push('bg-transparent');
-            }
-            else {
-                variantClassNames.push('hover:bg-gray-200');
-                variantClassNames.push('active:bg-gray-400');
-                variantClassNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
-                if (focused) {
-                    variantClassNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
-                }
-                if (hovered) {
-                    variantClassNames.push('bg-gray-200');
-                }
-                else if (active) {
-                    variantClassNames.push('bg-gray-400');
-                }
-                else {
-                    variantClassNames.push('bg-transparent');
-                }
-            }
-            break;
-        case 'transparent':
-            variantClassNames.push('border-none');
-            variantClassNames.push('text-white');
-            if (disabled) {
-                variantClassNames.push('text-white/[0.48]');
-                variantClassNames.push('bg-transparent');
-            }
-            else {
-                variantClassNames.push('hover:bg-white/[0.08]');
-                variantClassNames.push('active:bg-white/[0.16]');
-                variantClassNames.push('focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)]');
-                if (focused) {
-                    variantClassNames.push('shadow-[0_0_0_3px_rgba(255,255,255,0.48)]');
-                }
-                if (hovered) {
-                    variantClassNames.push('bg-white/[0.08]');
-                }
-                else if (active) {
-                    variantClassNames.push('bg-white/[0.16]');
-                }
-                else {
-                    variantClassNames.push('bg-transparent');
-                }
-            }
-            break;
-    }
-    return variantClassNames;
-};
+import { createStyles } from '@material-ui/core/styles';
+import { alpha, outline } from '@toptal/picasso-shared';
+import { screens } from '@toptal/picasso-provider';
+export default ({ palette }) => createStyles({
+    root: {
+        borderRadius: '50%',
+        padding: 0,
+        minWidth: 'initial',
+        width: '1.5em',
+    },
+    primary: {},
+    responsive: {
+        width: '2.5em',
+        height: '2.5em',
+        [screens('xl')]: {
+            width: '1.5em',
+            height: '1.5em',
+        },
+    },
+    flat: {
+        color: palette.grey.dark,
+        backgroundColor: 'initial',
+        '&:hover, &$hovered': {
+            backgroundColor: palette.grey.lighter2,
+        },
+        '&:active, &$active': {
+            backgroundColor: palette.grey.light2,
+        },
+        '&$disabled': {
+            opacity: 0.48,
+            color: palette.grey.dark,
+            backgroundColor: 'initial',
+        },
+        border: 'none',
+    },
+    transparent: {
+        border: 'none',
+        color: palette.common.white,
+        backgroundColor: 'initial',
+        '&$focusVisible, &$focused': Object.assign({}, outline(palette.common.white)),
+        '&:hover, &$hovered': {
+            backgroundColor: alpha(palette.common.white, 0.08),
+        },
+        '&:active, &$active': {
+            backgroundColor: alpha(palette.common.white, 0.16),
+        },
+        '&$disabled': {
+            color: alpha(palette.common.white, 0.48),
+            backgroundColor: 'initial',
+        },
+    },
+    disabled: {},
+    hovered: {},
+    focused: {},
+    active: {},
+    focusVisible: {},
+});
 //# sourceMappingURL=styles.js.map

package/dist-package/src/ButtonCircular/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonCircular/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonCircular/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAElD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,SAAS;QACnB,KAAK,EAAE,OAAO;KACf;IAED,OAAO,EAAE,EAAE;IAEX,UAAU,EAAE;QACV,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;QACf,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE;YACf,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;KACF;IAED,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,eAAe,EAAE,SAAS;QAE1B,oBAAoB,EAAE;YACpB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;SACvC;QAED,oBAAoB,EAAE;YACpB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;SACrC;QAED,YAAY,EAAE;YACZ,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACxB,eAAe,EAAE,SAAS;SAC3B;QAED,MAAM,EAAE,MAAM;KACf;IAED,WAAW,EAAE;QACX,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QAC3B,eAAe,EAAE,SAAS;QAE1B,2BAA2B,oBACtB,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CACjC;QAED,oBAAoB,EAAE;YACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC;SACnD;QAED,oBAAoB,EAAE;YACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC;SACnD;QAED,YAAY,EAAE;YACZ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC;YACxC,eAAe,EAAE,SAAS;SAC3B;KACF;IAED,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,EAAE;CACjB,CAAC,CAAA"}

package/dist-package/src/ButtonCompound/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const ButtonCompound: import("packages/shared/dist-package/src").OverridableComponent<import("../Button").Props> & {
     Group: import("react").ForwardRefExoticComponent<import("../ButtonGroup/ButtonGroup").Props & import("react").RefAttributes<HTMLDivElement>> & {
-        Item: ({ active, disabled, focused, hovered, className, ...rest }: import("../ButtonGroupItem/ButtonGroupItem").Props) => JSX.Element;
+        Item: (props: import("../ButtonGroupItem/ButtonGroupItem").Props) => JSX.Element;
     };
     Circular: import("packages/shared/dist-package/src").OverridableComponent<import("../ButtonCircular/ButtonCircular").Props>;
     Action: import("packages/shared/dist-package/src").OverridableComponent<import("../ButtonAction/ButtonAction").Props>;

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonControlLabel.d.ts","sourceRoot":"","sources":["../../../src/ButtonControlLabel/ButtonControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAOjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,0EAA0E;IAC1E,OAAO,EAAE,YAAY,CAAA;CACtB;AAED,QAAA,MAAM,kBAAkB;+FAWrB,KAAK;;;;CAsBP,CAAA;AAMD,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"ButtonControlLabel.d.ts","sourceRoot":"","sources":["../../../src/ButtonControlLabel/ButtonControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AASjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,0EAA0E;IAC1E,OAAO,EAAE,YAAY,CAAA;CACtB;AAUD,QAAA,MAAM,kBAAkB;+FAWrB,KAAK;;;;CAqBP,CAAA;AAMD,eAAe,kBAAkB,CAAA"}

package/dist-package/src/ButtonControlLabel/ButtonControlLabel.js

@@ -10,16 +10,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { twMerge } from 'tailwind-merge';
+import { makeStyles } from '@material-ui/core';
+import cx from 'classnames';
 import { Container } from '@toptal/picasso-container';
 import { Button } from '../Button';
-import { createSizeClassNames, createContentSizeClassNames } from './styles';
+import styles from './styles';
+// Using { index: -1 } to inject CSS link to the bottom of the head
+// in order to prevent Button's styles to override ButtonAction's ones
+// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
+const useStyles = makeStyles(styles, {
+    name: 'PicassoButtonControlLabel',
+    index: -1,
+});
 const ButtonControlLabel = (_a) => {
     var { children, size = 'medium', className, checked, onChange, id, control, value, disabled } = _a, props = __rest(_a, ["children", "size", "className", "checked", "onChange", "id", "control", "value", "disabled"]);
+    const classes = useStyles();
     const contentLeftSpacing = size === 'large' ? 1 : 0.5;
-    return (React.createElement(Button, Object.assign({}, props, { className: twMerge('text-center', createSizeClassNames(size), className), variant: 'secondary', size: size, as: 'label', htmlFor: id, disabled: disabled }),
+    return (React.createElement(Button, Object.assign({}, props, { className: cx(className, classes.root, classes[size]), variant: 'secondary', size: size, as: 'label', htmlFor: id, disabled: disabled }),
         React.cloneElement(control, { id, checked, value, onChange, disabled }),
-        React.createElement(Container, { className: createContentSizeClassNames(size), left: contentLeftSpacing }, children)));
+        React.createElement(Container, { className: classes.content, left: contentLeftSpacing }, children)));
 };
 ButtonControlLabel.defaultProps = {
     size: 'medium',

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonControlLabel.js","sourceRoot":"","sources":["../../../src/ButtonControlLabel/ButtonControlLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAA;AA8B5E,MAAM,kBAAkB,GAAG,CAAC,EAWpB,EAAE,EAAE;QAXgB,EAC1B,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,OAEF,EADH,KAAK,cAVkB,8FAW3B,CADS;IAER,MAAM,kBAAkB,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IAErD,OAAO,CACL,oBAAC,MAAM,oBACD,KAAK,IACT,SAAS,EAAE,OAAO,CAAC,aAAa,EAAE,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EACxE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,EAAE,EACX,QAAQ,EAAE,QAAQ;QAEjB,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;QACxE,oBAAC,SAAS,IACR,SAAS,EAAE,2BAA2B,CAAC,IAAI,CAAC,EAC5C,IAAI,EAAE,kBAAkB,IAEvB,QAAQ,CACC,CACL,CACV,CAAA;AACH,CAAC,CAAA;AAED,kBAAkB,CAAC,YAAY,GAAG;IAChC,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"ButtonControlLabel.js","sourceRoot":"","sources":["../../../src/ButtonControlLabel/ButtonControlLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AA8B7B,mEAAmE;AACnE,sEAAsE;AACtE,uEAAuE;AACvE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,2BAA2B;IACjC,KAAK,EAAE,CAAC,CAAC;CACV,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAWpB,EAAE,EAAE;QAXgB,EAC1B,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,OAEF,EADH,KAAK,cAVkB,8FAW3B,CADS;IAER,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,kBAAkB,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IAErD,OAAO,CACL,oBAAC,MAAM,oBACD,KAAK,IACT,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,EACrD,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,EAAE,EACX,QAAQ,EAAE,QAAQ;QAEjB,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;QACxE,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,kBAAkB,IAC5D,QAAQ,CACC,CACL,CACV,CAAA;AACH,CAAC,CAAA;AAED,kBAAkB,CAAC,YAAY,GAAG;IAChC,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,eAAe,kBAAkB,CAAA"}

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

@@ -1,3 +1,3 @@
-export declare const createSizeClassNames: (size: 'small' | 'medium' | 'large') => string;
-export declare const createContentSizeClassNames: (size: 'small' | 'medium' | 'large') => string;
+declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "medium" | "large" | "small">;
+export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonControlLabel/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,SACzB,OAAO,GAAG,QAAQ,GAAG,OAAO,KACjC,MAWF,CAAA;AAED,eAAO,MAAM,2BAA2B,SAChC,OAAO,GAAG,QAAQ,GAAG,OAAO,KACjC,MAWF,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonControlLabel/styles.ts"],"names":[],"mappings":";AAEA,wBAwBI"}

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

@@ -1,17 +1,26 @@
-export const createSizeClassNames = (size) => {
-    const sizeClassNames = {
-        small: 'py-1 pr-4 pl-2',
-        medium: 'py-2 pr-6 pl-4',
-        large: 'py-4 pr-8 pl-4',
-    };
-    return sizeClassNames[size];
-};
-export const createContentSizeClassNames = (size) => {
-    const sizeClassNames = {
-        small: 'min-w-12',
-        medium: 'min-w-16',
-        large: 'min-w-[5.25rem]',
-    };
-    return sizeClassNames[size];
-};
+import { createStyles } from '@material-ui/core/styles';
+export default () => createStyles({
+    root: {
+        textAlign: 'center',
+        padding: '0.5rem 1.5rem 0.5rem 1rem',
+        '&$small': {
+            padding: '0.25rem 1rem 0.25rem 0.5rem',
+        },
+        '&$large': {
+            padding: '1rem 2rem 1rem 1rem',
+        },
+    },
+    content: {
+        minWidth: 64,
+        '$small &': {
+            minWidth: 48,
+        },
+        '$large &': {
+            minWidth: 84,
+        },
+    },
+    small: {},
+    medium: {},
+    large: {},
+});
 //# sourceMappingURL=styles.js.map