@toptal/picasso-button 1.0.13 → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonGroupItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EACL,oBAAoB,EACpB,WAAW,EACX,aAAa,GACd,MAAM,kBAAkB,CAAA;AAEzB,eAAe,CAAC,KAAY,EAAE,EAAE,CAC9B,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,oFAAoF,EAClF;YACE,kEAAkE;YAClE,uCAAuC;YACvC,MAAM,EAAE,CAAC;SACV;QACH,SAAS,kCACJ,oBAAoB,CAAC,KAAK,CAAC,KAC9B,oBAAoB,EAAE,WAAW,CAAC,KAAK,CAAC,EACxC,wBAAwB,EAAE,aAAa,CAAC,KAAK,CAAC,GAC/C;KACF;IACD,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,EAAE;CACV,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonGroupItem/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,EAC9C,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,GAOP,EAAE,EAAE;IACH,MAAM,UAAU,GAAG;QACjB,cAAc;QACd,+BAA+B;QAC/B,6DAA6D;KAC9D,CAAA;IAED,IAAI,MAAM,IAAI,OAAO,IAAI,OAAO,IAAI,QAAQ,EAAE;QAC5C,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KACzB;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAC3C,QAAQ,EACR,OAAO,EACP,MAAM,GAMP,EAAY,EAAE;IACb,MAAM,UAAU,GAAG,CAAC,oBAAoB,EAAE,cAAc,CAAC,CAAA;IAEzD,IAAI,QAAQ,EAAE;QACZ,UAAU,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;QACrC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;QAEhC,IAAI,MAAM,EAAE;YACV,UAAU,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAA;SACvD;aAAM;YACL,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;SACnC;KACF;SAAM;QACL,UAAU,CAAC,IAAI,CACb,qEAAqE,CACtE,CAAA;QACD,UAAU,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;QAErC,IAAI,OAAO,EAAE;YACX,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA;SAC3C;aAAM,IAAI,MAAM,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,gDAAgD,CAAC,CAAA;YACjE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;SAC/B;aAAM;YACL,UAAU,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAA;SAC9C;KACF;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonSplit.d.ts","sourceRoot":"","sources":["../../../src/ButtonSplit/ButtonSplit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAc,cAAc,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAY,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK5C,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACjD,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAA;IACnB,wDAAwD;IACxD,IAAI,EAAE,SAAS,CAAA;IACf,iDAAiD;IACjD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,wCAAwC;IACxC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,yBAAyB;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;IAC/C,iBAAiB,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;IACjD,OAAO,CAAC,EAAE;QACR,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;CACF;AAiCD,eAAO,MAAM,WAAW,8EAmFvB,CAAA;AASD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"ButtonSplit.d.ts","sourceRoot":"","sources":["../../../src/ButtonSplit/ButtonSplit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAc,cAAc,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAY,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAS5C,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACjD,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAA;IACnB,wDAAwD;IACxD,IAAI,EAAE,SAAS,CAAA;IACf,iDAAiD;IACjD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,wCAAwC;IACxC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,yBAAyB;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;IAC/C,iBAAiB,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;IACjD,OAAO,CAAC,EAAE;QACR,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;CACF;AA0BD,eAAO,MAAM,WAAW,8EA4FvB,CAAA;AASD,eAAe,WAAW,CAAA"}

package/dist-package/src/ButtonSplit/ButtonSplit.js

@@ -10,20 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { ArrowDownMinor24, ArrowDownMinor16 } from '@toptal/picasso-icons';
 import { Dropdown } from '@toptal/picasso-dropdown';
 import { Button } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
-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 ButtonSplit's ones
-// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
-const useStyles = makeStyles(styles, {
-    name: 'PicassoButtonSplit',
-    index: -1,
-});
+import { createButtonGroupItemClassNames } from '../ButtonGroupItem/styles';
+import { createActionButtonClassNames, createMenuButtonClassNames, } from './styles';
 const DropdownIcon = ({ size, className, }) => {
     if (size === 'large') {
         return React.createElement(ArrowDownMinor24, { className: className });
@@ -38,23 +31,34 @@ const EventStopPropagation = ({ children }) => {
 };
 export const ButtonSplit = forwardRef(function ButtonSplit(props, ref) {
     const { size = 'medium', menu, children, variant = 'primary', disabled, style, className, onClick, menuButtonProps, actionButtonProps, testIds = {} } = props, rest = __rest(props, ["size", "menu", "children", "variant", "disabled", "style", "className", "onClick", "menuButtonProps", "actionButtonProps", "testIds"]);
-    const classes = useStyles();
-    const commonClasses = cx(classes.button, {
-        [classes.primaryVariant]: variant === 'primary',
-        [classes.disabled]: disabled,
-    });
-    const renderMenuButton = ({ isOpen, disabled, }) => {
-        const menuButton = (React.createElement(Button, Object.assign({}, menuButtonProps, { variant: variant, className: `${commonClasses} ${classes.menuButton} ${classes[`${size}Size`]}`, size: size, disabled: disabled, "data-testid": testIds.menuButton }),
-            React.createElement(DropdownIcon, { className: cx({
-                    [classes.rotated]: isOpen,
-                }), size: size })));
+    const renderMenuButton = ({ isOpen }) => {
+        const menuButtonClassName = twMerge(createButtonGroupItemClassNames({
+            active: menuButtonProps === null || menuButtonProps === void 0 ? void 0 : menuButtonProps.active,
+            hovered: menuButtonProps === null || menuButtonProps === void 0 ? void 0 : menuButtonProps.hovered,
+            disabled: (menuButtonProps === null || menuButtonProps === void 0 ? void 0 : menuButtonProps.disabled) || disabled,
+            focused: menuButtonProps === null || menuButtonProps === void 0 ? void 0 : menuButtonProps.focused,
+        }), createMenuButtonClassNames({
+            variant,
+            size,
+            disabled: (menuButtonProps === null || menuButtonProps === void 0 ? void 0 : menuButtonProps.disabled) || disabled,
+        }), menuButtonProps === null || menuButtonProps === void 0 ? void 0 : menuButtonProps.className);
+        const iconClassName = isOpen ? 'rotate-180' : '';
+        const menuButton = (React.createElement(Button, Object.assign({}, menuButtonProps, { variant: variant, className: menuButtonClassName, size: size, disabled: disabled, "data-testid": testIds.menuButton }),
+            React.createElement(DropdownIcon, { className: iconClassName, size: size })));
         return disabled ? (React.createElement(EventStopPropagation, null, menuButton)) : (menuButton);
     };
+    const actionButtonClassName = twMerge(createButtonGroupItemClassNames({
+        active: actionButtonProps === null || actionButtonProps === void 0 ? void 0 : actionButtonProps.active,
+        hovered: actionButtonProps === null || actionButtonProps === void 0 ? void 0 : actionButtonProps.hovered,
+        disabled: (actionButtonProps === null || actionButtonProps === void 0 ? void 0 : actionButtonProps.disabled) || disabled,
+        focused: actionButtonProps === null || actionButtonProps === void 0 ? void 0 : actionButtonProps.focused,
+    }), createActionButtonClassNames({
+        variant,
+    }), actionButtonProps === null || actionButtonProps === void 0 ? void 0 : actionButtonProps.className);
+    const dropdownClassName = twMerge('block cursor-pointer', disabled && '[&>div]:cursor-auto');
     return (React.createElement(ButtonGroup, Object.assign({}, rest, { ref: ref, style: style, className: className }),
-        React.createElement(Button, Object.assign({}, actionButtonProps, { className: `${commonClasses} ${classes.actionButton}`, size: size, variant: variant, disabled: disabled, onClick: onClick, "data-testid": testIds.actionButton }), children),
-        React.createElement(Dropdown, { content: menu, className: cx(classes.dropdown, {
-                [classes.disabled]: disabled,
-            }) }, ({ isOpen }) => renderMenuButton({ isOpen, disabled }))));
+        React.createElement(Button, Object.assign({}, actionButtonProps, { className: actionButtonClassName, size: size, variant: variant, disabled: disabled, onClick: onClick, "data-testid": testIds.actionButton }), children),
+        React.createElement(Dropdown, { content: menu, className: dropdownClassName }, ({ isOpen }) => renderMenuButton({ isOpen }))));
 });
 ButtonSplit.defaultProps = {
     size: 'medium',

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

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

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

@@ -1,4 +1,10 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "disabled" | "actionButton" | "menuButton" | "primaryVariant" | "smallSize" | "mediumSize" | "largeSize" | "dropdown" | "rotated">;
-export default _default;
+import type { SizeType } from '@toptal/picasso-shared';
+export declare const createActionButtonClassNames: ({ variant, }: {
+    variant?: "primary" | "secondary" | undefined;
+}) => string;
+export declare const createMenuButtonClassNames: ({ variant, size, disabled, }: {
+    variant?: "primary" | "secondary" | undefined;
+    size: SizeType<'small' | 'medium' | 'large'>;
+    disabled?: boolean | undefined;
+}) => string;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAuDI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAGtD,eAAO,MAAM,4BAA4B;;YAUxC,CAAA;AAWD,eAAO,MAAM,0BAA0B;;UAM/B,SAAS,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;;YAS7C,CAAA"}

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

@@ -1,51 +1,14 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette }) => createStyles({
-    actionButton: {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-    },
-    menuButton: {
-        minWidth: '2em',
-        paddingLeft: '0.5em',
-        paddingRight: '0.5em',
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-        marginLeft: 0,
-    },
-    primaryVariant: {
-        '&$actionButton': {
-            borderRight: `1px solid ${palette.blue.darker}`,
-        },
-        '&$menuButton': {
-            borderLeft: `1px solid ${palette.blue.darker}`,
-            '&$disabled': {
-                borderLeftColor: palette.grey.main,
-            },
-        },
-    },
-    smallSize: {
-        minWidth: '1.5em',
-        paddingLeft: '0.25em',
-        paddingRight: '0.25em',
-    },
-    mediumSize: {},
-    largeSize: {
-        minWidth: '3em',
-        paddingLeft: '0.75em',
-        paddingRight: '0.75em',
-    },
-    dropdown: {
-        display: 'block',
-        cursor: 'pointer',
-    },
-    disabled: {
-        // override dropdown anchor styles
-        '& > div': {
-            cursor: 'auto',
-        },
-    },
-    rotated: {
-        transform: 'rotate(180deg)',
-    },
-});
+import { twMerge } from 'tailwind-merge';
+export const createActionButtonClassNames = ({ variant, }) => {
+    return twMerge('transition-[color,background]', variant === 'primary' &&
+        'border-r border-l-0 border-y-0 border-solid border-blue-700');
+};
+const menuButtonSizeClassNames = {
+    small: 'min-w-[1.5em] px-[0.25em]',
+    medium: 'min-w-[2em] px-[0.5em]',
+    large: 'min-w-[3em] px-[0.75em]',
+};
+export const createMenuButtonClassNames = ({ variant, size, disabled, }) => {
+    return twMerge(menuButtonSizeClassNames[size], variant === 'primary' && 'border-l border-r-0 border-y-0 border-solid', variant === 'primary' && disabled && 'border-gray-500', variant === 'primary' && !disabled && 'border-blue-700');
+};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,YAAY,EAAE;QACZ,oBAAoB,EAAE,CAAC;QACvB,uBAAuB,EAAE,CAAC;KAC3B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,OAAO;QACpB,YAAY,EAAE,OAAO;QACrB,mBAAmB,EAAE,CAAC;QACtB,sBAAsB,EAAE,CAAC;QACzB,UAAU,EAAE,CAAC;KACd;IAED,cAAc,EAAE;QACd,gBAAgB,EAAE;YAChB,WAAW,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;SAChD;QACD,cAAc,EAAE;YACd,UAAU,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;YAE9C,YAAY,EAAE;gBACZ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;aACnC;SACF;KACF;IAED,SAAS,EAAE;QACT,QAAQ,EAAE,OAAO;QACjB,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,QAAQ;KACvB;IACD,UAAU,EAAE,EAAE;IACd,SAAS,EAAE;QACT,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,QAAQ;KACvB;IAED,QAAQ,EAAE;QACR,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,SAAS;KAClB;IAED,QAAQ,EAAE;QACR,kCAAkC;QAClC,SAAS,EAAE;YACT,MAAM,EAAE,MAAM;SACf;KACF;IAED,OAAO,EAAE;QACP,SAAS,EAAE,gBAAgB;KAC5B;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAC3C,OAAO,GAGR,EAAE,EAAE;IACH,OAAO,OAAO,CACZ,+BAA+B,EAC/B,OAAO,KAAK,SAAS;QACnB,6DAA6D,CAChE,CAAA;AACH,CAAC,CAAA;AAED,MAAM,wBAAwB,GAG1B;IACF,KAAK,EAAE,2BAA2B;IAClC,MAAM,EAAE,wBAAwB;IAChC,KAAK,EAAE,yBAAyB;CACjC,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,EACzC,OAAO,EACP,IAAI,EACJ,QAAQ,GAKT,EAAE,EAAE;IACH,OAAO,OAAO,CACZ,wBAAwB,CAAC,IAAI,CAAC,EAC9B,OAAO,KAAK,SAAS,IAAI,6CAA6C,EACtE,OAAO,KAAK,SAAS,IAAI,QAAQ,IAAI,iBAAiB,EACtD,OAAO,KAAK,SAAS,IAAI,CAAC,QAAQ,IAAI,iBAAiB,CACxD,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-button",
-  "version": "1.0.13",
+  "version": "2.0.0",
   "description": "Toptal UI components library - Button",
   "publishConfig": {
     "access": "public"
@@ -22,17 +22,19 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-checkbox": "2.0.0",
-    "@toptal/picasso-container": "1.0.2",
-    "@toptal/picasso-dropdown": "2.0.1",
-    "@toptal/picasso-icons": "1.1.0",
-    "@toptal/picasso-loader": "1.0.2",
-    "@toptal/picasso-radio": "2.0.0",
-    "@toptal/picasso-shared": "14.0.1",
-    "@toptal/picasso-utils": "1.0.2",
-    "@toptal/picasso-link": "1.0.2",
+    "@toptal/picasso-checkbox": "2.0.1",
+    "@toptal/picasso-container": "1.0.3",
+    "@toptal/picasso-dropdown": "2.0.2",
+    "@toptal/picasso-icons": "1.1.1",
+    "@toptal/picasso-loader": "1.0.3",
+    "@toptal/picasso-radio": "2.0.1",
+    "@toptal/picasso-shared": "15.0.0",
+    "@toptal/picasso-utils": "1.0.3",
+    "@toptal/picasso-link": "1.0.3",
     "ap-style-title-case": "^1.1.2",
-    "classnames": "^2.5.1"
+    "@mui/base": "5.0.0-beta.40",
+    "classnames": "^2.5.1",
+    "tailwind-merge": "^2.2.2"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -40,15 +42,17 @@
   ],
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind": "^2.5.0",
     "@toptal/picasso-provider": "*",
-    "react": ">=16.12.0 < 19.0.0"
+    "react": ">=16.12.0 < 19.0.0",
+    "tailwindcss": ">=3"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
     "@toptal/picasso-provider": "4.2.1",
-    "@toptal/picasso-test-utils": "1.1.0"
+    "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [
     "dist-package/**",

package/src/Button/Button.tsx

@@ -1,33 +1,30 @@
 import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react'
 import React, { forwardRef } from 'react'
 import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 import type {
   StandardProps,
   SizeType,
   ButtonOrAnchorProps,
   OverridableComponent,
   TextLabelProps,
-  Classes,
 } from '@toptal/picasso-shared'
-import { useTitleCase } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core'
-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 { noop } from '@toptal/picasso-utils'
 // we need to ensure the correct order of styles import
 // TODO: [FX-4614] To be removed when Link component is migrated to tailwind
 import { Link } from '@toptal/picasso-link'
 
-import styles from './styles'
+import { ButtonBase } from '../ButtonBase'
+import {
+  createVariantClassNames,
+  createCoreClassNames,
+  createSizeClassNames,
+  createIconClassNames,
+} from './styles'
 
 // HACK: This statement is only used to prevent webpack from tree shaking the import
 void Link
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoButton',
-})
-
 export type VariantType =
   | 'primary'
   | 'negative'
@@ -73,31 +70,28 @@ export interface Props
   type?: 'button' | 'reset' | 'submit'
 }
 
-const getClickHandler = (loading?: boolean, handler?: Props['onClick']) =>
-  loading ? noop : handler
-
-const getIcon = (
-  classes: Classes,
-  children: ReactNode,
-  icon?: ReactElement,
+const getIcon = ({
+  children,
+  icon,
+  iconPosition,
+  size,
+}: {
+  children: ReactNode
+  icon?: ReactElement
   iconPosition?: IconPositionType
-) => {
+  size: SizeType<'small' | 'medium' | 'large'>
+}) => {
   if (!icon) {
-    return null
+    return undefined
   }
 
-  const {
-    icon: iconClass,
-    iconLeft: iconLeftClass,
-    iconRight: iconRightClass,
-  } = classes
+  const iconClassNames = createIconClassNames({
+    size,
+    iconPosition: children && iconPosition ? iconPosition : undefined,
+  })
 
   return React.cloneElement(icon, {
-    className: cx(iconClass, icon.props.className, {
-      [iconLeftClass]: children && iconPosition === 'left',
-      [iconRightClass]: children && iconPosition === 'right',
-    }),
-    key: 'button-icon',
+    className: twMerge(iconClassNames, icon.props.className),
   })
 }
 
@@ -109,9 +103,7 @@ export const Button: OverridableComponent<Props> = forwardRef<
     icon,
     iconPosition,
     loading,
-    children,
     className,
-    style,
     fullWidth,
     variant = 'primary',
     size = 'medium',
@@ -119,86 +111,63 @@ export const Button: OverridableComponent<Props> = forwardRef<
     hovered,
     disabled,
     active,
-    onClick,
-    title,
-    value,
-    type,
-    as = 'button',
-    titleCase: propsTitleCase,
     ...rest
   } = props
-  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)
+  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
+  )
 
-    if (iconPosition === 'left') {
-      finalChildren.unshift(iconComponent)
-    } else {
-      finalChildren.push(iconComponent)
-    }
+  const contentSizeClassNames: Record<
+    SizeType<'small' | 'medium' | 'large'>,
+    string[]
+  > = {
+    small: ['text-button-small'],
+    medium: ['text-button-medium'],
+    large: ['text-button-large'],
   }
 
-  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
+  const contentClassName = cx(
+    'font-semibold whitespace-nowrap',
+    contentSizeClassNames[size],
+    loading ? 'opacity-0' : ''
   )
 
   return (
     <ButtonBase
       {...rest}
       ref={ref}
-      classes={{
-        root: rootClassName,
-        focusVisible: cx(classes.focusVisible),
-      }}
-      onClick={getClickHandler(loading, onClick)}
-      className={className}
-      style={style}
+      className={finalClassName}
+      contentClassName={contentClassName}
+      icon={iconComponent}
+      iconPosition={iconPosition}
+      loading={loading}
       disabled={disabled}
-      title={title}
-      value={value}
-      type={type}
-      component={as}
-      data-component-type='button'
-    >
-      <Container
-        as='span'
-        inline
-        flex
-        direction='row'
-        alignItems='center'
-        className={cx({ [hiddenClass]: loading }, contentClass)}
-      >
-        {finalChildren}
-      </Container>
-
-      {loading && (
-        <Loader variant='inherit' className={loaderClass} inline size='small' />
-      )}
-    </ButtonBase>
+    />
   )
 })
 

package/src/Button/__snapshots__/test.tsx.snap

@@ -7,13 +7,15 @@ exports[`Button disabled button as link renders disabled version 1`] = `
   >
     <a
       aria-disabled="true"
-      class="MuiTypography-root MuiLink-root MuiLink-underlineHover PicassoLink-root MuiButtonBase-root PicassoButton-disabled PicassoButton-medium PicassoButton-primary PicassoButton-root Mui-disabled PicassoLink-blue MuiTypography-colorPrimary"
+      class="MuiTypography-root MuiLink-root MuiLink-underlineHover PicassoLink-root base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4 PicassoLink-blue MuiTypography-colorPrimary"
       data-component-type="button"
+      href="URL"
       role="button"
       tabindex="-1"
+      type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Click me!
       </span>
@@ -28,14 +30,16 @@ exports[`Button disabled button renders disabled version 1`] = `
     class="Picasso-root"
   >
     <button
-      class="MuiButtonBase-root PicassoButton-disabled PicassoButton-medium PicassoButton-primary PicassoButton-root Mui-disabled"
+      aria-disabled="true"
+      class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
       data-component-type="button"
       disabled=""
+      role="button"
       tabindex="-1"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Click me!
       </span>