@toptal/picasso-button 1.0.10-alpha-feature-migrate-buttons-638be38bb.19 → 1.0.10-alpha-FX-5195-fix-update-problems-902f38edb.16

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,CA+CrD,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, active: active, hovered: hovered, focused: focused, 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,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"}
+{"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":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,UAAU,GAQX,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,CAAC,cAAc,EAAE,KAAK,CAAC,CAAA;IAE1C,IAAI,UAAU,EAAE;QACd,UAAU,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAA;KACjE;SAAM;QACL,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;KACvC;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAAoB,EACpB,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,GAMP,EACS,EAAE;IACZ,MAAM,iBAAiB,GAAG,EAAE,CAAA;IAE5B,QAAQ,OAAO,EAAE;QACf,KAAK,SAAS;YACZ,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;YACrC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;YACpC,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;YAE5C,IAAI,QAAQ,EAAE;gBACZ,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;aACtC;iBAAM;gBACL,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;gBAC5C,iBAAiB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;gBAE7C,iBAAiB,CAAC,IAAI,CACpB,uDAAuD,CACxD,CAAA;gBACD,IAAI,OAAO,EAAE;oBACX,iBAAiB,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAA;iBAClE;gBAED,IAAI,OAAO,EAAE;oBACX,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;iBACvC;qBAAM,IAAI,MAAM,EAAE;oBACjB,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;iBACvC;qBAAM;oBACL,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;iBACtC;aACF;YACD,MAAK;QACP,KAAK,MAAM;YACT,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;YACrC,iBAAiB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;YAE3C,IAAI,QAAQ,EAAE;gBACZ,iBAAiB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;gBAC3C,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;gBACxC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;aACzC;iBAAM;gBACL,iBAAiB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;gBAC3C,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA;gBAE5C,iBAAiB,CAAC,IAAI,CACpB,uDAAuD,CACxD,CAAA;gBACD,IAAI,OAAO,EAAE;oBACX,iBAAiB,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAA;iBAClE;gBAED,IAAI,OAAO,EAAE;oBACX,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;iBACtC;qBAAM,IAAI,MAAM,EAAE;oBACjB,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;iBACtC;qBAAM;oBACL,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;iBACzC;aACF;YACD,MAAK;QACP,KAAK,aAAa;YAChB,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;YACrC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;YAEpC,IAAI,QAAQ,EAAE;gBACZ,iBAAiB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;gBAC3C,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;aACzC;iBAAM;gBACL,iBAAiB,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAA;gBAC/C,iBAAiB,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAA;gBAEhD,iBAAiB,CAAC,IAAI,CACpB,yDAAyD,CAC1D,CAAA;gBACD,IAAI,OAAO,EAAE;oBACX,iBAAiB,CAAC,IAAI,CAAC,2CAA2C,CAAC,CAAA;iBACpE;gBAED,IAAI,OAAO,EAAE;oBACX,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;iBAC1C;qBAAM,IAAI,MAAM,EAAE;oBACjB,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;iBAC1C;qBAAM;oBACL,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;iBACzC;aACF;YAED,MAAK;KACR;IAED,OAAO,iBAAiB,CAAA;AAC1B,CAAC,CAAA"}
+{"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/styles.d.ts

@@ -1,3 +1,3 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "small" | "content" | "root" | "medium" | "large">;
+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/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"}