@toptal/picasso-avatar 2.0.7-alpha-fx-null-fix-button-e862ee8b7.0 → 3.0.0

package/dist-package/src/Avatar/TextAvatar/TextAvatar.js

@@ -1,24 +1,9 @@
 import React from 'react';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
 import { Typography } from '@toptal/picasso-typography';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoTextAvatar',
-});
-const TextAvatar = ({ children, className, style, 'data-testid': dataTestID, fontSize, size, 'data-private': dataPrivate, }) => {
-    const classes = useStyles();
-    const SIZE_TO_FONT_SIZE = {
-        small: '!text-[0.666666667em]',
-        large: '!text-[1em]',
-    };
-    return (React.createElement("div", { 
-        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        className: cx(classes.root, className, classes[size]), style: style, "data-private": dataPrivate },
-        React.createElement(Typography, { "data-testid": dataTestID, 
-            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-            className: SIZE_TO_FONT_SIZE[fontSize], invert: true }, children)));
-};
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
+import { containerTextClassBySize, typographyTextClassBySize } from './styles';
+const TextAvatar = ({ children, className, style, 'data-testid': dataTestID, fontSize, size, 'data-private': dataPrivate, }) => (React.createElement("div", { className: twMerge('uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)]', containerTextClassBySize[size], className), style: style, "data-private": dataPrivate },
+    React.createElement(Typography, { "data-testid": dataTestID, className: twJoin(fontSize ? typographyTextClassBySize[fontSize] : '', 'leading-[1.5em]'), invert: true }, children)));
 TextAvatar.defaultProps = {
     size: 'large',
 };

package/dist-package/src/Avatar/TextAvatar/TextAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextAvatar.js","sourceRoot":"","sources":["../../../../src/Avatar/TextAvatar/TextAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAQ7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,IAAI,EACJ,cAAc,EAAE,WAAW,GACrB,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,iBAAiB,GAAG;QACxB,KAAK,EAAE,uBAAuB;QAC9B,KAAK,EAAE,aAAa;KACrB,CAAA;IAED,OAAO,CACL;QACE,uEAAuE;QACvE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,IAAK,CAAC,CAAC,EACtD,KAAK,EAAE,KAAK,kBACE,WAAW;QAEzB,oBAAC,UAAU,mBACI,UAAU;YACvB,uEAAuE;YACvE,SAAS,EAAE,iBAAiB,CAAC,QAAS,CAAC,EACvC,MAAM,UAEL,QAAQ,CACE,CACT,CACP,CAAA;AACH,CAAC,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,IAAI,EAAE,OAAO;CACd,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TextAvatar.js","sourceRoot":"","sources":["../../../../src/Avatar/TextAvatar/TextAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAA;AAY9E,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,IAAI,EACJ,cAAc,EAAE,WAAW,GACrB,EAAE,EAAE,CAAC,CACX,6BACE,SAAS,EAAE,OAAO,CAChB,sEAAsE,EACtE,wBAAwB,CAAC,IAAI,CAAC,EAC9B,SAAS,CACV,EACD,KAAK,EAAE,KAAK,kBACE,WAAW;IAEzB,oBAAC,UAAU,mBACI,UAAU,EACvB,SAAS,EAAE,MAAM,CACf,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EACnD,iBAAiB,CAClB,EACD,MAAM,UAEL,QAAQ,CACE,CACT,CACP,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,IAAI,EAAE,OAAO;CACd,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist-package/src/Avatar/TextAvatar/styles.d.ts

@@ -1,3 +1,4 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "medium" | "large" | "small" | "xxsmall" | "xsmall" | "root" | "smallFont" | "largeFont">;
-export default _default;
+import type { FontSize, Size } from './TextAvatar';
+export declare const containerTextClassBySize: Record<Size, string>;
+export declare const typographyTextClassBySize: Record<FontSize, string>;
 //# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Avatar/TextAvatar/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/TextAvatar/styles.ts"],"names":[],"mappings":";AAEA,wBAsBI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/TextAvatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAElD,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAMzD,CAAA;AAED,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAG9D,CAAA"}

package/dist-package/src/Avatar/TextAvatar/styles.js

@@ -1,22 +1,12 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        textTransform: 'uppercase',
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-    },
-    xxsmall: { fontSize: '1em' },
-    xsmall: { fontSize: '1em' },
-    small: { fontSize: '2em' },
-    medium: { fontSize: '3em' },
-    large: { fontSize: '5em' },
-    smallFont: {
-        fontSize: '0.666666667em',
-    },
-    largeFont: {
-        fontSize: '1em',
-    },
-});
+export const containerTextClassBySize = {
+    xxsmall: 'text-[1em]',
+    xsmall: 'text-[1em]',
+    small: 'text-[2em]',
+    medium: 'text-[3em]',
+    large: 'text-[5em]',
+};
+export const typographyTextClassBySize = {
+    small: 'text-[0.666666667em]',
+    large: 'text-[1em]',
+};
 //# sourceMappingURL=styles.js.map

package/dist-package/src/Avatar/TextAvatar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/TextAvatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,aAAa,EAAE,WAAW;QAC1B,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;KACnC;IAED,OAAO,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC5B,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC3B,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC1B,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC3B,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAE1B,SAAS,EAAE;QACT,QAAQ,EAAE,eAAe;KAC1B;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/TextAvatar/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,wBAAwB,GAAyB;IAC5D,OAAO,EAAE,YAAY;IACrB,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE,YAAY;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAA6B;IACjE,KAAK,EAAE,sBAAsB;IAC7B,KAAK,EAAE,YAAY;CACpB,CAAA"}

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

@@ -27,6 +27,7 @@ export declare const AVATAR_DROPZONE_SVG_SHAPES: {
         borders: string;
     };
 };
+export declare type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
 export interface Props extends BaseProps {
     size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
     isDragActive?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarDropzoneSvg.d.ts","sourceRoot":"","sources":["../../../src/AvatarDropzoneSvg/AvatarDropzoneSvg.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAkCjE,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CAM7B,CAAA;AAEV,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAMD,eAAO,MAAM,WAAW;YAAW,KAAK;;;;;CAgEvC,CAAA;AAQD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"AvatarDropzoneSvg.d.ts","sourceRoot":"","sources":["../../../src/AvatarDropzoneSvg/AvatarDropzoneSvg.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAuCjE,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CAM7B,CAAA;AAEV,oBAAY,IAAI,GAAG,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;AAEhF,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,WAAW;YAAW,KAAK;;;;;CA+DvC,CAAA;AAQD,eAAe,WAAW,CAAA"}

package/dist-package/src/AvatarDropzoneSvg/AvatarDropzoneSvg.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { capitalize, makeStyles } from '@material-ui/core';
-import cx from 'classnames';
-import styles from './styles';
+import { twJoin } from '@toptal/picasso-tailwind-merge';
+import { getBackgroundFillClass, getBordersStrokeClass, rootClassBySize, svgClassBySize, } from './styles';
 import { getShapes } from './utils';
 /**
  * For measuring, pixel values are used because SVG's "d" attribute works with percentages and pixels only
@@ -36,32 +35,15 @@ export const AVATAR_DROPZONE_SVG_SHAPES = {
     medium: getShapes(SETTINGS.medium),
     large: getShapes(SETTINGS.large),
 };
-const useStyles = makeStyles(styles, {
-    name: 'PicassoDropzoneSvg',
-});
 export const DropzoneSvg = (props) => {
     const { size = 'small', disabled, error, focused, hovered, isDragActive, 'data-testid': dataTestId, } = props;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const shapes = AVATAR_DROPZONE_SVG_SHAPES[size];
-    const classes = useStyles();
-    return (React.createElement("div", { className: cx(classes.root, classes[`root${capitalize(size)}`]), "data-testid": dataTestId },
-        React.createElement("svg", { className: cx(classes.svg, classes[`svg${capitalize(size)}`]), fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("path", { className: cx(classes.background, {
-                    [classes.dragActive]: isDragActive,
-                    [classes.disabled]: disabled,
-                    [classes.error]: error,
-                    [classes.focused]: focused,
-                    [classes.hovered]: hovered,
-                }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.background }),
-            React.createElement("path", { className: cx(classes.outline, {
-                    [classes.focused]: focused,
-                    [classes.error]: error,
-                }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.outline, strokeOpacity: '.48', strokeWidth: '3', strokeLinejoin: 'round' }),
-            React.createElement("path", { className: cx(classes.border, {
-                    [classes.error]: error,
-                    [classes.focused]: focused,
-                    [classes.hovered]: hovered,
-                }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.borders, strokeDasharray: '3 3' }))));
+    return (React.createElement("div", { className: twJoin('[pointer-events:unset] relative bg-transparent', rootClassBySize[size]), "data-testid": dataTestId },
+        React.createElement("svg", { className: twJoin('m-[-3px]', svgClassBySize[size]), fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+            React.createElement("path", { className: twJoin('transition-colors duration-350 ease-out', 'active:fill-blue-500/[0.24]', getBackgroundFillClass({ hovered, isDragActive, disabled })), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.background }),
+            React.createElement("path", { className: twJoin('hidden', focused && !isDragActive && '[display:initial]', error ? 'stroke-red-500' : 'stroke-blue-500'), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.outline, strokeOpacity: '.48', strokeWidth: '3', strokeLinejoin: 'round' }),
+            React.createElement("path", { className: twJoin('transition-[stroke] duration-350', getBordersStrokeClass({ hovered, error })), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.borders, strokeDasharray: '3 3' }))));
 };
 DropzoneSvg.displayName = 'DropzoneSvg';
 DropzoneSvg.defaultProps = {

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

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

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

@@ -1,4 +1,6 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "background" | "border" | "outline" | "disabled" | "svg" | "root" | "rootXxsmall" | "rootXsmall" | "rootSmall" | "rootMedium" | "rootLarge" | "svgXxsmall" | "svgXsmall" | "svgSmall" | "svgMedium" | "svgLarge" | "focused" | "dragActive" | "error" | "hovered">;
-export default _default;
+import type { Props, Size } from './AvatarDropzoneSvg';
+export declare const rootClassBySize: Record<Size, string>;
+export declare const svgClassBySize: Record<Size, string>;
+export declare const getBackgroundFillClass: ({ hovered, isDragActive, disabled, }: Props) => "fill-gray-100" | "fill-blue-500/[0.24]" | "fill-blue-100/[0.84]" | "fill-blue-100";
+export declare const getBordersStrokeClass: ({ hovered, error }: Props) => "stroke-red-500" | "stroke-blue-500/[0.84]" | "stroke-blue-500";
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/AvatarDropzoneSvg/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;mDAIX,KAAK;AAA/C,wBA4GC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/AvatarDropzoneSvg/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAEtD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAMhD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAM/C,CAAA;AAED,eAAO,MAAM,sBAAsB,yCAIhC,KAAK,wFAcP,CAAA;AAED,eAAO,MAAM,qBAAqB,uBAAwB,KAAK,oEAU9D,CAAA"}

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

@@ -1,101 +1,36 @@
-import { createStyles } from '@material-ui/core/styles';
-import { alpha } from '@toptal/picasso-shared';
-export default ({ palette, transitions }) => {
-    const dragActiveColor = alpha(palette.blue.main, 0.24);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const hoverBackgroundColor = alpha(palette.blue.lighter, 0.84);
-    const hoverBorderColor = alpha(palette.blue.main, 0.84);
-    return createStyles({
-        root: {
-            pointerEvents: 'unset',
-            position: 'relative',
-            background: 'transparent',
-        },
-        rootXxsmall: {
-            width: '32px',
-            height: '32px',
-        },
-        rootXsmall: {
-            width: '40px',
-            height: '40px',
-        },
-        rootSmall: {
-            width: '80px',
-            height: '80px',
-        },
-        rootMedium: {
-            width: '120px',
-            height: '120px',
-        },
-        rootLarge: {
-            width: '160px',
-            height: '160px',
-        },
-        svg: {
-            margin: '-3px', // to center the svg
-        },
-        svgXxsmall: {
-            width: '38px',
-            height: '38px', // +6px for outline
-        },
-        svgXsmall: {
-            width: '46px',
-            height: '46px', // +6px for outline
-        },
-        svgSmall: {
-            width: '86px',
-            height: '86px', // +6px for outline
-        },
-        svgMedium: {
-            width: '126px',
-            height: '126px', // +6px for outline
-        },
-        svgLarge: {
-            width: '166px',
-            height: '166px', // +6px for outline
-        },
-        background: {
-            fill: palette.blue.lighter,
-            transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-            transitionProperty: 'fill',
-            '&$hovered': {
-                fill: hoverBackgroundColor,
-            },
-            '&$dragActive,&:active': {
-                fill: dragActiveColor,
-            },
-            '&$disabled': {
-                fill: palette.grey.lighter,
-                '&$hovered': {
-                    fill: palette.grey.light2,
-                },
-            },
-        },
-        border: {
-            stroke: palette.blue.main,
-            transition: `stroke ${transitions.duration.short}ms`,
-            '&$hovered': {
-                stroke: hoverBorderColor,
-            },
-            '&$error': {
-                stroke: palette.red.main,
-            },
-        },
-        outline: {
-            display: 'none',
-            stroke: palette.blue.main,
-            '&$focused:not($dragActive)': {
-                display: 'initial',
-            },
-            '&$error': {
-                stroke: palette.red.main,
-            },
-        },
-        dragActive: {},
-        disabled: {},
-        error: {},
-        focused: {},
-        hovered: {},
-    });
+export const rootClassBySize = {
+    xxsmall: 'w-[32px] h-[32px]',
+    xsmall: 'w-[40px] h-[40px]',
+    small: 'w-[80px] h-[80px]',
+    medium: 'w-[120px] h-[120px]',
+    large: 'w-[160px] h-[160px]',
+};
+export const svgClassBySize = {
+    xxsmall: 'w-[39px] h-[38px]',
+    xsmall: 'w-[46px] h-[46px]',
+    small: 'w-[86px] h-[86px]',
+    medium: 'w-[126px] h-[126px]',
+    large: 'w-[166px] h-[166px]',
+};
+export const getBackgroundFillClass = ({ hovered, isDragActive, disabled, }) => {
+    if (disabled) {
+        return 'fill-gray-100';
+    }
+    if (isDragActive) {
+        return 'fill-blue-500/[0.24]';
+    }
+    if (hovered) {
+        return 'fill-blue-100/[0.84]';
+    }
+    return 'fill-blue-100';
+};
+export const getBordersStrokeClass = ({ hovered, error }) => {
+    if (error) {
+        return 'stroke-red-500';
+    }
+    if (hovered) {
+        return 'stroke-blue-500/[0.84]';
+    }
+    return 'stroke-blue-500';
 };
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarDropzoneSvg/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarDropzoneSvg/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAyB;IACnD,OAAO,EAAE,mBAAmB;IAC5B,MAAM,EAAE,mBAAmB;IAC3B,KAAK,EAAE,mBAAmB;IAC1B,MAAM,EAAE,qBAAqB;IAC7B,KAAK,EAAE,qBAAqB;CAC7B,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAyB;IAClD,OAAO,EAAE,mBAAmB;IAC5B,MAAM,EAAE,mBAAmB;IAC3B,KAAK,EAAE,mBAAmB;IAC1B,MAAM,EAAE,qBAAqB;IAC7B,KAAK,EAAE,qBAAqB;CAC7B,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,OAAO,EACP,YAAY,EACZ,QAAQ,GACF,EAAE,EAAE;IACV,IAAI,QAAQ,EAAE;QACZ,OAAO,eAAe,CAAA;KACvB;IAED,IAAI,YAAY,EAAE;QAChB,OAAO,sBAAsB,CAAA;KAC9B;IAED,IAAI,OAAO,EAAE;QACX,OAAO,sBAAsB,CAAA;KAC9B;IAED,OAAO,eAAe,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAS,EAAE,EAAE;IACjE,IAAI,KAAK,EAAE;QACT,OAAO,gBAAgB,CAAA;KACxB;IAED,IAAI,OAAO,EAAE;QACX,OAAO,wBAAwB,CAAA;KAChC;IAED,OAAO,iBAAiB,CAAA;AAC1B,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAYjE,aAAK,QAAQ,GAAG;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC;IAC3D,gCAAgC;IAChC,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACpE,4CAA4C;IAC5C,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAMD,QAAA,MAAM,WAAW;yDAOd,KAAK;;;;;CAmDP,CAAA;AAOD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AASjE,aAAK,QAAQ,GAAG;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC;IAC3D,gCAAgC;IAChC,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACpE,4CAA4C;IAC5C,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED,QAAA,MAAM,WAAW;yDAOd,KAAK;;;;;CAiDP,CAAA;AAOD,eAAe,WAAW,CAAA"}

package/dist-package/src/AvatarGroup/AvatarGroup.js

@@ -1,16 +1,10 @@
 import React, { useMemo } from 'react';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
 import { Container } from '@toptal/picasso-container';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { Avatar } from '../Avatar';
 import AvatarWrapper from '../Avatar/AvatarWrapper/AvatarWrapper';
 import TextAvatar from '../Avatar/TextAvatar/TextAvatar';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoAvatarGroup',
-});
 const AvatarGroup = ({ className, style, testIds, items, limit, size, }) => {
-    const classes = useStyles();
     /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
     const isOverLimit = items.length > limit;
     // we need to add +1 for the last item that is going to be transformed to numbered Avatar
@@ -22,7 +16,7 @@ const AvatarGroup = ({ className, style, testIds, items, limit, size, }) => {
     if (items.length === 0) {
         return null;
     }
-    return (React.createElement(Container, { className: cx(classes.root, className), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.container, flex: true, gap: 'xsmall', style: style },
+    return (React.createElement(Container, { className: twMerge('max-w-full overflow-x-auto', className), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.container, flex: true, gap: 'xsmall', style: style },
         avatarsToRender.map(({ alt, name, src, 'data-testid': avatarTestId }, index) => (React.createElement(Avatar, { alt: alt, key: `${name}-${alt}-${String(index)}`, name: name, 
             /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
             size: size, src: src, "data-testid": avatarTestId }))),

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,aAAa,MAAM,uCAAuC,CAAA;AACjE,OAAO,UAAU,MAAM,iCAAiC,CAAA;AACxD,OAAO,MAAM,MAAM,UAAU,CAAA;AAuB7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,GACE,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,uEAAuE;IACvE,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,KAAM,CAAA;IACzC,yFAAyF;IACzF,uEAAuE;IACvE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,GAAG,KAAM,GAAG,CAAC,CAAA;IAChD,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE;IACH,uEAAuE;IACvE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAClD,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,CAC5B,CAAA;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,iBACzB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAC/B,IAAI,QACJ,GAAG,EAAC,QAAQ,EACZ,KAAK,EAAE,KAAK;QAEX,eAAe,CAAC,GAAG,CAClB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1D,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,IAAI,IAAI,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,EACtC,IAAI,EAAE,IAAI;YACV,uEAAuE;YACvE,IAAI,EAAE,IAAK,EACX,GAAG,EAAE,GAAG,iBACK,YAAY,GACzB,CACH,CACF;QACA,WAAW,CAAC,CAAC,CAAC;QACb,uEAAuE;QACvE,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAK,EAAE,OAAO,EAAC,QAAQ;YAE1C,oBAAC,UAAU,mBAAc,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,IAAI,EAAE,IAAK;;gBACpD,cAAc,CACL,CACC,CACjB,CAAC,CAAC,CAAC,IAAI,CACE,CACb,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,aAAa,MAAM,uCAAuC,CAAA;AACjE,OAAO,UAAU,MAAM,iCAAiC,CAAA;AAuBxD,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,GACE,EAAE,EAAE;IACV,uEAAuE;IACvE,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,KAAM,CAAA;IACzC,yFAAyF;IACzF,uEAAuE;IACvE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,GAAG,KAAM,GAAG,CAAC,CAAA;IAChD,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE;IACH,uEAAuE;IACvE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAClD,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,CAC5B,CAAA;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,4BAA4B,EAAE,SAAS,CAAC,iBAC9C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAC/B,IAAI,QACJ,GAAG,EAAC,QAAQ,EACZ,KAAK,EAAE,KAAK;QAEX,eAAe,CAAC,GAAG,CAClB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1D,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,IAAI,IAAI,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,EACtC,IAAI,EAAE,IAAI;YACV,uEAAuE;YACvE,IAAI,EAAE,IAAK,EACX,GAAG,EAAE,GAAG,iBACK,YAAY,GACzB,CACH,CACF;QACA,WAAW,CAAC,CAAC,CAAC;QACb,uEAAuE;QACvE,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAK,EAAE,OAAO,EAAC,QAAQ;YAE1C,oBAAC,UAAU,mBAAc,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,IAAI,EAAE,IAAK;;gBACpD,cAAc,CACL,CACC,CACjB,CAAC,CAAC,CAAC,IAAI,CACE,CACb,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,eAAe,WAAW,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-avatar",
-  "version": "2.0.7-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7",
+  "version": "3.0.0",
   "description": "Toptal UI components library - Avatar",
   "publishConfig": {
     "access": "public"
@@ -22,34 +22,33 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7",
-    "@toptal/picasso-icons": "1.4.1-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7",
-    "@toptal/picasso-image": "1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7",
-    "@toptal/picasso-logo": "1.0.8-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7",
-    "@toptal/picasso-shared": "15.0.1-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7",
-    "@toptal/picasso-typography": "2.0.3-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7",
-    "@toptal/picasso-utils": "1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-container": "1.0.3",
+    "@toptal/picasso-icons": "1.4.0",
+    "@toptal/picasso-image": "1.0.3",
+    "@toptal/picasso-logo": "1.0.7",
+    "@toptal/picasso-shared": "15.0.0",
+    "@toptal/picasso-typography": "2.0.2",
+    "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "tailwindcss": ">=3",
     "react": ">=16.12.0 < 19.0.0",
-    "tailwindcss": ">=3"
+    "@toptal/picasso-tailwind-merge": "^1.1.1"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7"
+    "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-tailwind-merge": "1.1.0"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
-  ],
-  "gitHead": "e862ee8b7dd480b508f5258999f409fe0ab1611c"
+  ]
 }

package/src/Avatar/Avatar.tsx

@@ -1,16 +1,13 @@
 import type { HTMLAttributes } from 'react'
 import React, { useCallback } from 'react'
 import type { StandardProps, SizeType } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { AVATAR_INITIALS_LIMIT , getNameInitials } from '@toptal/picasso-utils'
+import { AVATAR_INITIALS_LIMIT, getNameInitials } from '@toptal/picasso-utils'
 
 import ImageAvatar from './ImageAvatar/ImageAvatar'
 import TextAvatar from './TextAvatar/TextAvatar'
 import IconAvatar from './IconAvatar/IconAvatar'
 import AvatarWrapper from './AvatarWrapper/AvatarWrapper'
 import AvatarEditContainer from './AvatarEditContainer/AvatarEditContainer'
-import styles from './styles'
 
 export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
   /** Alt text */
@@ -34,10 +31,6 @@ export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
   }
 }
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoAvatarWrapper',
-})
-
 export const Avatar = (props: Props) => {
   const {
     alt,
@@ -106,9 +99,9 @@ export const Avatar = (props: Props) => {
     testIds?.text,
     name,
     style,
+    dataPrivate,
   ])
 
-  const classes = useStyles(props)
   const isEditable = Boolean(onEdit)
 
   const avatar = (
@@ -126,7 +119,7 @@ export const Avatar = (props: Props) => {
 
   if (isEditable) {
     return (
-      <div className={classes.editableAvatarContainer}>
+      <div className='relative'>
         {avatar}
         {isEditable && (
           <AvatarEditContainer

package/src/Avatar/AvatarEditContainer/AvatarEditContainer.tsx

@@ -1,23 +1,19 @@
 import React, { useState } from 'react'
-import type { Theme } from '@material-ui/core'
-import { capitalize, makeStyles } from '@material-ui/core'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import cx from 'classnames'
 import { Pencil16, Pencil24 } from '@toptal/picasso-icons'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
+import { rootClassBySize, svgClassBySize } from './styles'
 import { AVATAR_DROPZONE_SVG_SHAPES } from '../../AvatarDropzoneSvg'
 
+export type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
+
 export interface Props extends BaseProps {
-  size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
+  size?: Size
   disabled?: boolean
   onClick?: (event: React.MouseEvent) => void
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoDropzoneSvg',
-})
-
 export const AvatarEditContainer = (props: Props) => {
   const { size = 'small', onClick, 'data-testid': dataTestId } = props
   const [focused, setFocused] = useState(false)
@@ -25,8 +21,6 @@ export const AvatarEditContainer = (props: Props) => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const shapes = AVATAR_DROPZONE_SVG_SHAPES[size!]
 
-  const classes = useStyles()
-
   const PencilIconComponent =
     size === 'xxsmall' || size === 'xsmall' ? Pencil16 : Pencil24
 
@@ -40,27 +34,32 @@ export const AvatarEditContainer = (props: Props) => {
 
   return (
     <button
-      className={cx(classes.root, classes[`root${capitalize(size)}`])}
+      className={twJoin(
+        'border-none cursor-pointer absolute left-0 top-0 flex justify-center',
+        'items-center outline-none bg-transparent',
+        rootClassBySize[size]
+      )}
       data-testid={dataTestId}
       onClick={onClick}
       onFocus={handleFocus}
       onBlur={handleBlur}
     >
       <svg
-        className={cx(classes.svg, classes[`svg${capitalize(size)}`])}
+        className={twJoin('-m-[3px] absolute', svgClassBySize[size])}
         fill='none'
         xmlns='http://www.w3.org/2000/svg'
       >
         <path
-          className={classes.background}
+          className={'fill-graphite-800/70'}
           fillRule='evenodd'
           clipRule='evenodd'
           d={shapes.background}
         />
         <path
-          className={cx(classes.outline, {
-            [classes.focused]: focused,
-          })}
+          className={twJoin(
+            'stroke-blue-500',
+            focused ? '[display:initial]' : 'hidden'
+          )}
           fillRule='evenodd'
           clipRule='evenodd'
           d={shapes.outline}
@@ -69,7 +68,7 @@ export const AvatarEditContainer = (props: Props) => {
           strokeLinejoin='round'
         />
       </svg>
-      <PencilIconComponent className={classes.pencilIcon} />
+      <PencilIconComponent className='text-white z-modal' />
     </button>
   )
 }