@toptal/picasso-button 1.0.13 → 2.0.0

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

@@ -1,58 +1,93 @@
-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: {},
-});
+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;
+};
 //# 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":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonCircular/styles.ts"],"names":[],"mappings":"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"}

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: (props: import("../ButtonGroupItem/ButtonGroupItem").Props) => JSX.Element;
+        Item: ({ active, disabled, focused, hovered, className, ...rest }: import("../ButtonGroupItem/ButtonGroupItem").Props) => JSX.Element;
     };
     Circular: import("packages/shared/dist-package/src").OverridableComponent<import("../ButtonCircular/ButtonCircular").Props>;
     Action: import("packages/shared/dist-package/src").OverridableComponent<import("../ButtonAction/ButtonAction").Props>;

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

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

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

@@ -10,25 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
-import cx from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { Container } from '@toptal/picasso-container';
 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: 'PicassoButtonControlLabel',
-    index: -1,
-});
+import { createSizeClassNames, createContentSizeClassNames } from './styles';
 const ButtonControlLabel = (_a) => {
     var { children, size = 'medium', className, checked, onChange, id, control, value, disabled } = _a, props = __rest(_a, ["children", "size", "className", "checked", "onChange", "id", "control", "value", "disabled"]);
-    const classes = useStyles();
     const contentLeftSpacing = size === 'large' ? 1 : 0.5;
-    return (React.createElement(Button, Object.assign({}, props, { className: cx(className, classes.root, classes[size]), variant: 'secondary', size: size, as: 'label', htmlFor: id, disabled: disabled }),
+    return (React.createElement(Button, Object.assign({}, props, { className: twMerge('text-center', createSizeClassNames(size), className), variant: 'secondary', size: size, as: 'label', htmlFor: id, disabled: disabled }),
         React.cloneElement(control, { id, checked, value, onChange, disabled }),
-        React.createElement(Container, { className: classes.content, left: contentLeftSpacing }, children)));
+        React.createElement(Container, { className: createContentSizeClassNames(size), left: contentLeftSpacing }, children)));
 };
 ButtonControlLabel.defaultProps = {
     size: 'medium',

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

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

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

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

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

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

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

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

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

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

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: (props: import("../ButtonGroupItem/ButtonGroupItem").Props) => JSX.Element;
+    Item: ({ active, disabled, focused, hovered, className, ...rest }: 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;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"}
+{"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"}

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

@@ -9,36 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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 React, { forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
 import { ButtonGroupItem } from '../ButtonGroupItem';
-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,
-        },
-    ],
-];
+import { createRootClassNames } from './styles';
 export const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
     const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
-    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));
+    const finalClassName = twMerge(createRootClassNames(), className);
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: finalClassName, style: style }), children));
 });
 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,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"}
+{"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"}

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

@@ -1,3 +1,2 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "active" | "hovered" | "focused">;
-export default _default;
+export declare const createRootClassNames: () => string[];
 //# 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":";AA+BA,wBAuCI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,gBA4BhC,CAAA"}

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

@@ -1,49 +1,22 @@
-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,
-    },
+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;
 };
-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,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"}
+{"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"}

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: (props: Props) => JSX.Element;
+declare const ButtonGroupItem: ({ active, disabled, focused, hovered, className, ...rest }: 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":";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"}
+{"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"}

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

@@ -1,17 +1,22 @@
+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 { makeStyles } from '@material-ui/core';
-import cx from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { Button } from '../Button';
-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' })));
+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' })));
 };
 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;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"}
+{"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"}

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

@@ -1,4 +1,14 @@
-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;
+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[];
 //# 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,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;gCAS9B,KAAK;AAA5B,wBAoBI"}
+{"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"}

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

@@ -1,18 +1,40 @@
-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: {},
-});
+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;
+};
 //# sourceMappingURL=styles.js.map