@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/ButtonControlLabel/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonControlLabel/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,IAAkC,EAC1B,EAAE;IACV,MAAM,cAAc,GAGhB;QACF,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,gBAAgB;QACxB,KAAK,EAAE,gBAAgB;KACxB,CAAA;IAED,OAAO,cAAc,CAAC,IAAI,CAAC,CAAA;AAC7B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,IAAkC,EAC1B,EAAE;IACV,MAAM,cAAc,GAGhB;QACF,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,iBAAiB;KACzB,CAAA;IAED,OAAO,cAAc,CAAC,IAAI,CAAC,CAAA;AAC7B,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonControlLabel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,2BAA2B;QACpC,SAAS,EAAE;YACT,OAAO,EAAE,6BAA6B;SACvC;QACD,SAAS,EAAE;YACT,OAAO,EAAE,qBAAqB;SAC/B;KACF;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE;YACV,QAAQ,EAAE,EAAE;SACb;QACD,UAAU,EAAE;YACV,QAAQ,EAAE,EAAE;SACb;KACF;IACD,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACV,CAAC,CAAA"}

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

@@ -7,7 +7,7 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
 }
 export declare const ButtonGroup: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & {
-    Item: ({ active, disabled, focused, hovered, className, ...rest }: import("../ButtonGroupItem/ButtonGroupItem").Props) => JSX.Element;
+    Item: (props: import("../ButtonGroupItem/ButtonGroupItem").Props) => JSX.Element;
 };
 export default _default;
 //# sourceMappingURL=ButtonGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,4EAA4E;IAC5E,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,WAAW,8EAYvB,CAAA;;;;AAMD,wBAAoE"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAe,MAAM,OAAO,CAAA;AACnE,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,OAAO,KAAK,EAAE,SAAS,EAAW,MAAM,wBAAwB,CAAA;AAOhE,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,4EAA4E;IAC5E,QAAQ,EAAE,SAAS,CAAA;CACpB;AAoBD,eAAO,MAAM,WAAW,8EAyBvB,CAAA;;;;AAMD,wBAAoE"}

package/dist-package/src/ButtonGroup/ButtonGroup.js

@@ -9,14 +9,36 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
+import React, { forwardRef, useMemo } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
+import { addClassesToChildren } from '@toptal/picasso-shared';
+import { Button } from '../Button';
 import { ButtonGroupItem } from '../ButtonGroupItem';
-import { createRootClassNames } from './styles';
+import styles from './styles';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoButtonGroup',
+});
+const getChildrenClassesConfig = (classes) => [
+    [
+        Button,
+        {
+            root: classes.button,
+            active: classes.active,
+            focused: classes.focused,
+            hovered: classes.hovered,
+        },
+    ],
+];
 export const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
     const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
-    const finalClassName = twMerge(createRootClassNames(), className);
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: finalClassName, style: style }), children));
+    const classes = useStyles();
+    const childrenWithClasses = useMemo(() => addClassesToChildren({
+        children,
+        classes,
+        config: getChildrenClassesConfig,
+    }), [children, classes]);
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style }), childrenWithClasses));
 });
 ButtonGroup.defaultProps = {};
 ButtonGroup.displayName = 'ButtonGroup';

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,MAAM,cAAc,GAAG,OAAO,CAAC,oBAAoB,EAAE,EAAE,SAAS,CAAC,CAAA;IAEjE,OAAO,CACL,6CAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,KAC7D,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG,EAAE,CAAA;AAE7B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAA"}
+{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,wBAAwB,GAAG,CAC/B,OAAgB,EACU,EAAE,CAAC;IAC7B;QACE,MAAM;QACN;YACE,IAAI,EAAE,OAAO,CAAC,MAAM;YACpB,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,OAAO,EAAE,OAAO,CAAC,OAAO;SACzB;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IACrD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CACH,oBAAoB,CAAC;QACnB,QAAQ;QACR,OAAO;QACP,MAAM,EAAE,wBAAwB;KACjC,CAAC,EACJ,CAAC,QAAQ,EAAE,OAAO,CAAC,CACpB,CAAA;IAED,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,KAEX,mBAAmB,CAChB,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG,EAAE,CAAA;AAE7B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAA"}

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

@@ -1,2 +1,3 @@
-export declare const createRootClassNames: () => string[];
+declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "active" | "hovered" | "focused">;
+export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,gBA4BhC,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":";AA+BA,wBAuCI"}

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

@@ -1,22 +1,49 @@
-export const createRootClassNames = () => {
-    const classNames = [
-        'flex',
-        'justify-start',
-        '[&>[data-component-type="button"]:hover]:z-[1]',
-        '[&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r-none',
-        '[&>[data-component-type="button"]:first-child:not(:last-child)]:ml-0',
-        '[&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded-none',
-        '[&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[-1px]',
-        '[&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l-none',
-        '[&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[-1px]',
-        // nested buttons
-        '[&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r-none',
-        '[&_:first-child:not(:last-child)_[data-component-type="button"]]:ml-0',
-        '[&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded-none',
-        '[&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[-1px]',
-        '[&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l-none',
-        '[&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-[-1px]',
-    ];
-    return classNames;
+import { createStyles } from '@material-ui/core/styles';
+const baseButtonProps = {
+    transitionProperty: 'color, background',
+    '&:active, &$active, &:hover, &$hovered, &:focus, &$focused': {
+        // border overlap to keep proper border width, but on state change
+        // we need to move up overlapped border
+        zIndex: 1,
+    },
 };
+const firstButtonProps = {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    marginLeft: '0rem',
+};
+const middleButtonProps = {
+    borderRadius: 0,
+    // prevents border between 2 buttons to be wider then specified
+    marginLeft: '-1px',
+};
+const lastButtonProps = {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    // prevents border between 2 buttons to be wider then specified
+    marginLeft: '-1px',
+};
+export default () => createStyles({
+    root: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        // default case
+        '& [data-component-type="button"]': Object.assign(Object.assign({}, baseButtonProps), { 
+            // first item
+            '&:first-child:not(:last-child)': firstButtonProps, 
+            // middle item
+            '&:not(:first-child):not(:last-child)': middleButtonProps, 
+            // last item
+            '&:last-child:not(:first-child)': lastButtonProps }),
+        // nested case when button is nested in first item in ButtonGroup
+        '& :first-child:not(:last-child) [data-component-type="button"]': Object.assign(Object.assign({}, baseButtonProps), firstButtonProps),
+        // nested case when button is nested in middle item in ButtonGroup
+        '& :not(:first-child):not(:last-child) [data-component-type="button"]': Object.assign(Object.assign({}, baseButtonProps), middleButtonProps),
+        // nested case when button is nested in last item in ButtonGroup
+        '& :last-child:not(:first-child) [data-component-type="button"]': Object.assign(Object.assign({}, baseButtonProps), lastButtonProps),
+    },
+    active: {},
+    focused: {},
+    hovered: {},
+});
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,UAAU,GAAa;QAC3B,MAAM;QACN,eAAe;QAEf,gDAAgD;QAEhD,gFAAgF;QAChF,sEAAsE;QAEtE,oFAAoF;QACpF,iFAAiF;QAEjF,gFAAgF;QAChF,2EAA2E;QAE3E,iBAAiB;QACjB,iFAAiF;QACjF,uEAAuE;QAEvE,qFAAqF;QACrF,kFAAkF;QAElF,iFAAiF;QACjF,4EAA4E;KAC7E,CAAA;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,MAAM,eAAe,GAAG;IACtB,kBAAkB,EAAE,mBAAmB;IAEvC,4DAA4D,EAAE;QAC5D,kEAAkE;QAClE,uCAAuC;QACvC,MAAM,EAAE,CAAC;KACV;CACF,CAAA;AAED,MAAM,gBAAgB,GAAG;IACvB,oBAAoB,EAAE,CAAC;IACvB,uBAAuB,EAAE,CAAC;IAC1B,UAAU,EAAE,MAAM;CACnB,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,YAAY,EAAE,CAAC;IACf,+DAA+D;IAC/D,UAAU,EAAE,MAAM;CACnB,CAAA;AAED,MAAM,eAAe,GAAG;IACtB,mBAAmB,EAAE,CAAC;IACtB,sBAAsB,EAAE,CAAC;IACzB,+DAA+D;IAC/D,UAAU,EAAE,MAAM;CACnB,CAAA;AAED,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,YAAY;QAE5B,eAAe;QACf,kCAAkC,kCAC7B,eAAe;YAElB,aAAa;YACb,gCAAgC,EAAE,gBAAgB;YAClD,cAAc;YACd,sCAAsC,EAAE,iBAAiB;YACzD,YAAY;YACZ,gCAAgC,EAAE,eAAe,GAClD;QAED,iEAAiE;QACjE,gEAAgE,kCAC3D,eAAe,GACf,gBAAgB,CACpB;QAED,kEAAkE;QAClE,sEAAsE,kCACjE,eAAe,GACf,iBAAiB,CACrB;QAED,gEAAgE;QAChE,gEAAgE,kCAC3D,eAAe,GACf,eAAe,CACnB;KACF;IACD,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;CACZ,CAAC,CAAA"}

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

@@ -2,6 +2,6 @@
 import type { ButtonProps } from '../Button';
 export interface Props extends ButtonProps {
 }
-declare const ButtonGroupItem: ({ active, disabled, focused, hovered, className, ...rest }: Props) => JSX.Element;
+declare const ButtonGroupItem: (props: Props) => JSX.Element;
 export default ButtonGroupItem;
 //# sourceMappingURL=ButtonGroupItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroupItem.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroupItem/ButtonGroupItem.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAO5C,MAAM,WAAW,KAAM,SAAQ,WAAW;CAAG;AAE7C,QAAA,MAAM,eAAe,+DAOlB,KAAK,gBAkBP,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"ButtonGroupItem.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroupItem/ButtonGroupItem.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAQ5C,MAAM,WAAW,KAAM,SAAQ,WAAW;CAAG;AAE7C,QAAA,MAAM,eAAe,UAAW,KAAK,gBAapC,CAAA;AAED,eAAe,eAAe,CAAA"}

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

@@ -1,22 +1,17 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
-import { twMerge } from 'tailwind-merge';
+import { makeStyles } from '@material-ui/core';
+import cx from 'classnames';
 import { Button } from '../Button';
-import { createButtonGroupItemClassNames, createGroupVariantClassNames, } from './styles';
-const ButtonGroupItem = (_a) => {
-    var { active, disabled, focused, hovered, className } = _a, rest = __rest(_a, ["active", "disabled", "focused", "hovered", "className"]);
-    const finalClassName = twMerge(createButtonGroupItemClassNames({ active, disabled, focused, hovered }), createGroupVariantClassNames({ active, disabled, hovered }), className);
-    return (React.createElement(Button, Object.assign({}, rest, { active: active, disabled: disabled, focused: focused, hovered: hovered, className: finalClassName, variant: 'secondary' })));
+import styles from './styles';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoButtonGroupItem',
+});
+const ButtonGroupItem = (props) => {
+    const classes = useStyles();
+    return (React.createElement(Button, Object.assign({}, props, { className: cx(props.className, classes.root, classes.group, {
+            [classes.active]: props.active,
+            [classes.disabled]: props.disabled,
+        }), variant: 'secondary' })));
 };
 export default ButtonGroupItem;
 //# sourceMappingURL=ButtonGroupItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroupItem.js","sourceRoot":"","sources":["../../../src/ButtonGroupItem/ButtonGroupItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EACL,+BAA+B,EAC/B,4BAA4B,GAC7B,MAAM,UAAU,CAAA;AAIjB,MAAM,eAAe,GAAG,CAAC,EAOjB,EAAE,EAAE;QAPa,EACvB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,OAEH,EADH,IAAI,cANgB,yDAOxB,CADQ;IAEP,MAAM,cAAc,GAAG,OAAO,CAC5B,+BAA+B,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EACvE,4BAA4B,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,CACV,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,cAAc,EACzB,OAAO,EAAC,WAAW,IACnB,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"ButtonGroupItem.js","sourceRoot":"","sources":["../../../src/ButtonGroupItem/ButtonGroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,wBAAwB;CAC/B,CAAC,CAAA;AAIF,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,MAAM,oBACD,KAAK,IACT,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE;YAC1D,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM;YAC9B,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;SACnC,CAAC,EACF,OAAO,EAAC,WAAW,IACnB,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

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

@@ -1,14 +1,4 @@
-export declare const createButtonGroupItemClassNames: ({ disabled, focused, hovered, active, }: {
-    disabled?: boolean | undefined;
-    focused?: boolean | undefined;
-    hovered?: boolean | undefined;
-    active?: boolean | undefined;
-    loading?: boolean | undefined;
-}) => string[];
-export declare const createGroupVariantClassNames: ({ disabled, hovered, active, }: {
-    disabled?: boolean | undefined;
-    hovered?: boolean | undefined;
-    active?: boolean | undefined;
-    loading?: boolean | undefined;
-}) => string[];
+import type { Theme } from '@material-ui/core/styles';
+declare const _default: (theme: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "active" | "disabled" | "hovered" | "focused" | "group">;
+export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroupItem/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,+BAA+B;;;;;;cAuB3C,CAAA;AAED,eAAO,MAAM,4BAA4B;;;;;MASrC,MAAM,EA6BT,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroupItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;gCAS9B,KAAK;AAA5B,wBAoBI"}

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

@@ -1,40 +1,18 @@
-export const createButtonGroupItemClassNames = ({ disabled, focused, hovered, active, }) => {
-    const classNames = [
-        'border-solid',
-        'transition-[color,background]',
-        'active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1]',
-    ];
-    if (active || hovered || focused || disabled) {
-        classNames.push('z-[1]');
-    }
-    return classNames;
-};
-export const createGroupVariantClassNames = ({ disabled, hovered, active, }) => {
-    const classNames = ['visited:text-black', 'border-solid'];
-    if (disabled) {
-        classNames.push('cursor-not-allowed');
-        classNames.push('text-gray-500');
-        if (active) {
-            classNames.push('bg-graphite-700 border-graphite-700');
-        }
-        else {
-            classNames.push('border-gray-500');
-        }
-    }
-    else {
-        classNames.push('active:bg-graphite-700 active:border-graphite-700 active:text-white');
-        classNames.push('hover:border-black');
-        if (hovered) {
-            classNames.push('border-black text-black');
-        }
-        else if (active) {
-            classNames.push('bg-graphite-700 border-graphite-700 text-white');
-            classNames.push('shadow-none');
-        }
-        else {
-            classNames.push('border-gray-400 text-black');
-        }
-    }
-    return classNames;
-};
+import { createStyles } from '@material-ui/core/styles';
+import { createOutlineCommons, activeGroup, disabledGroup, } from '../Button/styles';
+export default (theme) => createStyles({
+    root: {
+        '&:active, &$active, &:hover, &$hovered, &:focus, &$focused, &:disabled, &$disabled': {
+            // border overlap to keep proper border width, but on state change
+            // we need to move up overlapped border
+            zIndex: 1,
+        },
+        '&$group': Object.assign(Object.assign({}, createOutlineCommons(theme)), { '&:active, &$active': activeGroup(theme), '&:disabled, &$disabled': disabledGroup(theme) }),
+    },
+    active: {},
+    hovered: {},
+    focused: {},
+    disabled: {},
+    group: {},
+});
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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"}

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;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"}
+{"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"}

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

@@ -10,13 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
 import { ArrowDownMinor24, ArrowDownMinor16 } from '@toptal/picasso-icons';
 import { Dropdown } from '@toptal/picasso-dropdown';
 import { Button } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
-import { createButtonGroupItemClassNames } from '../ButtonGroupItem/styles';
-import { createActionButtonClassNames, createMenuButtonClassNames, } 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 ButtonSplit's ones
+// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
+const useStyles = makeStyles(styles, {
+    name: 'PicassoButtonSplit',
+    index: -1,
+});
 const DropdownIcon = ({ size, className, }) => {
     if (size === 'large') {
         return React.createElement(ArrowDownMinor24, { className: className });
@@ -31,34 +38,23 @@ 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 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 })));
+    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 })));
         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: actionButtonClassName, size: size, variant: variant, disabled: disabled, onClick: onClick, "data-testid": testIds.actionButton }), children),
-        React.createElement(Dropdown, { content: menu, className: dropdownClassName }, ({ isOpen }) => renderMenuButton({ isOpen }))));
+        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 }))));
 });
 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":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAC3E,OAAO,EACL,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,UAAU,CAAA;AA0BjB,MAAM,YAAY,GAAG,CAAC,EACpB,IAAI,EACJ,SAAS,GAIV,EAAE,EAAE;IACH,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,oBAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,GAAI,CAAA;KAClD;IAED,OAAO,oBAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,GAAI,CAAA;AACnD,CAAC,CAAA;AAED,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IACrE,MAAM,WAAW,GAAG,CAClB,KAAwD,EACxD,EAAE;QACF,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC,CAAA;IAED,OAAO,8BAAM,OAAO,EAAE,WAAW,IAAG,QAAQ,CAAQ,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EACJ,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,OAAO,GAAG,EAAE,KAEV,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,uIAaL,CAAQ,CAAA;IAET,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,EAAE,EAAE;QAC3D,MAAM,mBAAmB,GAAG,OAAO,CACjC,+BAA+B,CAAC;YAC9B,MAAM,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM;YAC/B,OAAO,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO;YACjC,QAAQ,EAAE,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,KAAI,QAAQ;YAC/C,OAAO,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO;SAClC,CAAC,EACF,0BAA0B,CAAC;YACzB,OAAO;YACP,IAAI;YACJ,QAAQ,EAAE,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,KAAI,QAAQ;SAChD,CAAC,EACF,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,SAAS,CAC3B,CAAA;QAED,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;QAEhD,MAAM,UAAU,GAAG,CACjB,oBAAC,MAAM,oBACD,eAAe,IACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,iBACL,OAAO,CAAC,UAAU;YAE/B,oBAAC,YAAY,IAAC,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,GAAI,CAC/C,CACV,CAAA;QAED,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,oBAAC,oBAAoB,QAAE,UAAU,CAAwB,CAC1D,CAAC,CAAC,CAAC,CACF,UAAU,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,OAAO,CACnC,+BAA+B,CAAC;QAC9B,MAAM,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM;QACjC,OAAO,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,OAAO;QACnC,QAAQ,EAAE,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,QAAQ,KAAI,QAAQ;QACjD,OAAO,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,OAAO;KACpC,CAAC,EACF,4BAA4B,CAAC;QAC3B,OAAO;KACR,CAAC,EACF,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,SAAS,CAC7B,CAAA;IAED,MAAM,iBAAiB,GAAG,OAAO,CAC/B,sBAAsB,EACtB,QAAQ,IAAI,qBAAqB,CAClC,CAAA;IAED,OAAO,CACL,oBAAC,WAAW,oBAAK,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;QACjE,oBAAC,MAAM,oBACD,iBAAiB,IACrB,SAAS,EAAE,qBAAqB,EAChC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,iBACH,OAAO,CAAC,YAAY,KAEhC,QAAQ,CACF;QACT,oBAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,IAClD,CAAC,EAAE,MAAM,EAAuB,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC,CACzD,CACC,CACf,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}
+{"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,10 +1,4 @@
-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;
+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;
 //# 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,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"}
+{"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"}

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

@@ -1,14 +1,51 @@
-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');
-};
+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)',
+    },
+});
 //# 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,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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-button",
-  "version": "1.0.13-alpha-fx-5263-merge-feature-branch-d124b1f9a.10+d124b1f9a",
+  "version": "1.0.13-alpha-fx-4593-migrate-tag-4f7c872c8.4+4f7c872c8",
   "description": "Toptal UI components library - Button",
   "publishConfig": {
     "access": "public"
@@ -22,19 +22,17 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@mui/base": "5.0.0-beta.40",
-    "@toptal/picasso-checkbox": "1.0.8-alpha-fx-5263-merge-feature-branch-d124b1f9a.10+d124b1f9a",
-    "@toptal/picasso-container": "1.0.3-alpha-fx-5263-merge-feature-branch-d124b1f9a.72+d124b1f9a",
-    "@toptal/picasso-dropdown": "2.0.2-alpha-fx-5263-merge-feature-branch-d124b1f9a.14+d124b1f9a",
-    "@toptal/picasso-icons": "1.1.1-alpha-fx-5263-merge-feature-branch-d124b1f9a.10+d124b1f9a",
-    "@toptal/picasso-link": "1.0.3-alpha-fx-5263-merge-feature-branch-d124b1f9a.72+d124b1f9a",
-    "@toptal/picasso-loader": "1.0.3-alpha-fx-5263-merge-feature-branch-d124b1f9a.72+d124b1f9a",
-    "@toptal/picasso-radio": "1.0.8-alpha-fx-5263-merge-feature-branch-d124b1f9a.10+d124b1f9a",
-    "@toptal/picasso-shared": "14.0.2-alpha-fx-5263-merge-feature-branch-d124b1f9a.72+d124b1f9a",
-    "@toptal/picasso-utils": "1.0.3-alpha-fx-5263-merge-feature-branch-d124b1f9a.72+d124b1f9a",
+    "@toptal/picasso-checkbox": "1.0.8-alpha-fx-4593-migrate-tag-4f7c872c8.4+4f7c872c8",
+    "@toptal/picasso-container": "1.0.3-alpha-fx-4593-migrate-tag-4f7c872c8.66+4f7c872c8",
+    "@toptal/picasso-dropdown": "2.0.2-alpha-fx-4593-migrate-tag-4f7c872c8.8+4f7c872c8",
+    "@toptal/picasso-icons": "1.1.1-alpha-fx-4593-migrate-tag-4f7c872c8.4+4f7c872c8",
+    "@toptal/picasso-link": "1.0.3-alpha-fx-4593-migrate-tag-4f7c872c8.66+4f7c872c8",
+    "@toptal/picasso-loader": "1.0.3-alpha-fx-4593-migrate-tag-4f7c872c8.66+4f7c872c8",
+    "@toptal/picasso-radio": "1.0.8-alpha-fx-4593-migrate-tag-4f7c872c8.4+4f7c872c8",
+    "@toptal/picasso-shared": "14.0.2-alpha-fx-4593-migrate-tag-4f7c872c8.66+4f7c872c8",
+    "@toptal/picasso-utils": "1.0.3-alpha-fx-4593-migrate-tag-4f7c872c8.66+4f7c872c8",
     "ap-style-title-case": "^1.1.2",
-    "classnames": "^2.5.1",
-    "tailwind-merge": "^2.2.2"
+    "classnames": "^2.5.1"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -43,21 +41,19 @@
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "@toptal/picasso-tailwind": ">=2.0.1",
-    "react": ">=16.12.0 < 19.0.0",
-    "tailwindcss": ">=3"
+    "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1-alpha-fx-5263-merge-feature-branch-d124b1f9a.43+d124b1f9a",
-    "@toptal/picasso-test-utils": "1.1.1-alpha-fx-5263-merge-feature-branch-d124b1f9a.64+d124b1f9a"
+    "@toptal/picasso-provider": "4.2.1-alpha-fx-4593-migrate-tag-4f7c872c8.37+4f7c872c8",
+    "@toptal/picasso-test-utils": "1.1.1-alpha-fx-4593-migrate-tag-4f7c872c8.58+4f7c872c8"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "d124b1f9aadd31c53d6d913526e17fac9cbeedb8"
+  "gitHead": "4f7c872c82174a41e105d465a8e58b7ef489f55d"
 }