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

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAYrE,MAAM,WAAW,KAAM,SAAQ,aAAa,EAAE,cAAc,CAAC,cAAc,CAAC;IAC1E,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACpE,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kCAAkC;IAClC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;IAC7C,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IAC1C,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;CACF;AAMD,eAAO,MAAM,MAAM;YAAW,KAAK;;;;;;CAsGlC,CAAA;AASD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AASrE,MAAM,WAAW,KAAM,SAAQ,aAAa,EAAE,cAAc,CAAC,cAAc,CAAC;IAC1E,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACpE,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kCAAkC;IAClC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;IAC7C,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IAC1C,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;CACF;AAED,eAAO,MAAM,MAAM;YAAW,KAAK;;;;;;CAsGlC,CAAA;AASD,eAAe,MAAM,CAAA"}

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

@@ -10,17 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 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';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoAvatarWrapper',
-});
 export const Avatar = (props) => {
     const { alt, src, className, name, size, style, variant, testIds, onEdit, 'data-private': dataPrivate } = props, rest = __rest(props, ["alt", "src", "className", "name", "size", "style", "variant", "testIds", "onEdit", 'data-private']);
     const renderAvatar = useCallback(() => {
@@ -49,8 +44,8 @@ export const Avatar = (props) => {
         testIds === null || testIds === void 0 ? void 0 : testIds.text,
         name,
         style,
+        dataPrivate,
     ]);
-    const classes = useStyles(props);
     const isEditable = Boolean(onEdit);
     const avatar = (React.createElement(AvatarWrapper
     /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
@@ -60,7 +55,7 @@ export const Avatar = (props) => {
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
         size: size, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.wrapper }, rest), renderAvatar()));
     if (isEditable) {
-        return (React.createElement("div", { className: classes.editableAvatarContainer },
+        return (React.createElement("div", { className: 'relative' },
             avatar,
             isEditable && (React.createElement(AvatarEditContainer, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.editContainer, onClick: onEdit, size: size }))));
     }

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

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

package/dist-package/src/Avatar/AvatarEditContainer/AvatarEditContainer.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { BaseProps, SizeType } from '@toptal/picasso-shared';
+export declare 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;
 }

package/dist-package/src/Avatar/AvatarEditContainer/AvatarEditContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarEditContainer.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/AvatarEditContainer/AvatarEditContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAOjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CAC5C;AAMD,eAAO,MAAM,mBAAmB;YAAW,KAAK;;;;;CAsD/C,CAAA;AAQD,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"AvatarEditContainer.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/AvatarEditContainer/AvatarEditContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAOjE,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,IAAI,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CAC5C;AAED,eAAO,MAAM,mBAAmB;YAAW,KAAK;;;;;CAyD/C,CAAA;AAQD,eAAe,mBAAmB,CAAA"}

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

@@ -1,18 +1,13 @@
 import React, { useState } from 'react';
-import { capitalize, makeStyles } from '@material-ui/core';
-import cx from 'classnames';
 import { Pencil16, Pencil24 } from '@toptal/picasso-icons';
-import styles from './styles';
+import { twJoin } from '@toptal/picasso-tailwind-merge';
+import { rootClassBySize, svgClassBySize } from './styles';
 import { AVATAR_DROPZONE_SVG_SHAPES } from '../../AvatarDropzoneSvg';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoDropzoneSvg',
-});
 export const AvatarEditContainer = (props) => {
     const { size = 'small', onClick, 'data-testid': dataTestId } = props;
     const [focused, setFocused] = useState(false);
     // 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;
     const handleFocus = () => {
         setFocused(true);
@@ -20,13 +15,11 @@ export const AvatarEditContainer = (props) => {
     const handleBlur = () => {
         setFocused(false);
     };
-    return (React.createElement("button", { className: cx(classes.root, classes[`root${capitalize(size)}`]), "data-testid": dataTestId, onClick: onClick, onFocus: handleFocus, onBlur: handleBlur },
-        React.createElement("svg", { className: cx(classes.svg, classes[`svg${capitalize(size)}`]), fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("path", { className: classes.background, fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.background }),
-            React.createElement("path", { className: cx(classes.outline, {
-                    [classes.focused]: focused,
-                }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.outline, strokeOpacity: '.48', strokeWidth: '3', strokeLinejoin: 'round' })),
-        React.createElement(PencilIconComponent, { className: classes.pencilIcon })));
+    return (React.createElement("button", { 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 },
+        React.createElement("svg", { className: twJoin('-m-[3px] absolute', svgClassBySize[size]), fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+            React.createElement("path", { className: 'fill-graphite-800/70', fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.background }),
+            React.createElement("path", { className: twJoin('stroke-blue-500', focused ? '[display:initial]' : 'hidden'), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.outline, strokeOpacity: '.48', strokeWidth: '3', strokeLinejoin: 'round' })),
+        React.createElement(PencilIconComponent, { className: 'text-white z-modal' })));
 };
 AvatarEditContainer.displayName = 'AvatarEditContainer';
 AvatarEditContainer.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarEditContainer.js","sourceRoot":"","sources":["../../../../src/Avatar/AvatarEditContainer/AvatarEditContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE1D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAA;AAQpE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IACpE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,oEAAoE;IACpE,MAAM,MAAM,GAAG,0BAA0B,CAAC,IAAK,CAAC,CAAA;IAEhD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,mBAAmB,GACvB,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE/D,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,UAAU,CAAC,KAAK,CAAC,CAAA;IACnB,CAAC,CAAA;IAED,OAAO,CACL,gCACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,iBAClD,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU;QAElB,6BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAC7D,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;YAElC,8BACE,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,MAAM,CAAC,UAAU,GACpB;YACF,8BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE;oBAC7B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;iBAC3B,CAAC,EACF,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,MAAM,CAAC,OAAO,EACjB,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,GAAG,EACf,cAAc,EAAC,OAAO,GACtB,CACE;QACN,oBAAC,mBAAmB,IAAC,SAAS,EAAE,OAAO,CAAC,UAAU,GAAI,CAC/C,CACV,CAAA;AACH,CAAC,CAAA;AAED,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAEvD,mBAAmB,CAAC,YAAY,GAAG;IACjC,IAAI,EAAE,OAAO;CACd,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"AvatarEditContainer.js","sourceRoot":"","sources":["../../../../src/Avatar/AvatarEditContainer/AvatarEditContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAEvD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAA;AAUpE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IACpE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,oEAAoE;IACpE,MAAM,MAAM,GAAG,0BAA0B,CAAC,IAAK,CAAC,CAAA;IAEhD,MAAM,mBAAmB,GACvB,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE/D,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,UAAU,CAAC,KAAK,CAAC,CAAA;IACnB,CAAC,CAAA;IAED,OAAO,CACL,gCACE,SAAS,EAAE,MAAM,CACf,sEAAsE,EACtE,0CAA0C,EAC1C,eAAe,CAAC,IAAI,CAAC,CACtB,iBACY,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU;QAElB,6BACE,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,EAC5D,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;YAElC,8BACE,SAAS,EAAE,sBAAsB,EACjC,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,MAAM,CAAC,UAAU,GACpB;YACF,8BACE,SAAS,EAAE,MAAM,CACf,iBAAiB,EACjB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CACzC,EACD,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,MAAM,CAAC,OAAO,EACjB,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,GAAG,EACf,cAAc,EAAC,OAAO,GACtB,CACE;QACN,oBAAC,mBAAmB,IAAC,SAAS,EAAC,oBAAoB,GAAG,CAC/C,CACV,CAAA;AACH,CAAC,CAAA;AAED,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAEvD,mBAAmB,CAAC,YAAY,GAAG;IACjC,IAAI,EAAE,OAAO;CACd,CAAA;AAED,eAAe,mBAAmB,CAAA"}

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

@@ -1,4 +1,4 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, zIndex }: Theme) => import("@material-ui/styles").StyleRules<{}, "background" | "outline" | "svg" | "root" | "rootXxsmall" | "rootXsmall" | "rootSmall" | "rootMedium" | "rootLarge" | "svgXxsmall" | "svgXsmall" | "svgSmall" | "svgMedium" | "svgLarge" | "pencilIcon" | "focused">;
-export default _default;
+import type { Size } from './AvatarEditContainer';
+export declare const rootClassBySize: Record<Size, string>;
+export declare const svgClassBySize: Record<Size, string>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/AvatarEditContainer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;8CAIhB,KAAK;AAA1C,wBAmFC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/AvatarEditContainer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAEjD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAMhD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAM/C,CAAA"}

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

@@ -1,80 +1,15 @@
-import { createStyles } from '@material-ui/core/styles';
-import { alpha } from '@toptal/picasso-shared';
-export default ({ palette, zIndex }) => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const hoverColor = alpha(palette.grey.darker, 0.7);
-    return createStyles({
-        root: {
-            border: 'none',
-            cursor: 'pointer',
-            position: 'absolute',
-            left: 0,
-            top: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            outline: 'none',
-            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',
-            position: 'absolute',
-        },
-        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: hoverColor,
-        },
-        outline: {
-            display: 'none',
-            stroke: palette.blue.main,
-            '&$focused': {
-                display: 'initial',
-            },
-        },
-        pencilIcon: {
-            color: palette.common.white,
-            zIndex: zIndex.tooltip,
-        },
-        focused: {},
-    });
+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-[38px] h-[38px]',
+    xsmall: 'w-[46px] h-[46px]',
+    small: 'w-[86px] h-[86px]',
+    medium: 'w-[126px] h-[126px]',
+    large: 'w-[166px] h-[166px]',
 };
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/AvatarEditContainer/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE9C,eAAe,CAAC,EAAE,OAAO,EAAE,MAAM,EAAS,EAAE,EAAE;IAC5C,oEAAoE;IACpE,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAO,EAAE,GAAG,CAAC,CAAA;IAEnD,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,aAAa;SAC1B;QACD,WAAW,EAAE;YACX,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,UAAU,EAAE;YACV,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,UAAU,EAAE;YACV,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;QAED,GAAG,EAAE;YACH,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,UAAU;SACrB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM,EAAE,mBAAmB;SACpC;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM,EAAE,mBAAmB;SACpC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM,EAAE,mBAAmB;SACpC;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO,EAAE,mBAAmB;SACrC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO,EAAE,mBAAmB;SACrC;QAED,UAAU,EAAE;YACV,IAAI,EAAE,UAAU;SACjB;QAED,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAEzB,WAAW,EAAE;gBACX,OAAO,EAAE,SAAS;aACnB;SACF;QAED,UAAU,EAAE;YACV,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YAC3B,MAAM,EAAE,MAAM,CAAC,OAAO;SACvB;QAED,OAAO,EAAE,EAAE;KACZ,CAAC,CAAA;AACJ,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/AvatarEditContainer/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"}

package/dist-package/src/Avatar/AvatarWrapper/AvatarWrapper.d.ts

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
 import type { BaseProps, SizeType } from '@toptal/picasso-shared';
+export declare type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
+export declare type Variant = 'square' | 'portrait' | 'landscape';
 export interface Props extends BaseProps {
     children: ReactNode;
-    size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
-    variant: 'square' | 'portrait' | 'landscape';
+    size: Size;
+    variant: Variant;
 }
 declare const AvatarWrapper: (props: Props) => JSX.Element;
 export default AvatarWrapper;

package/dist-package/src/Avatar/AvatarWrapper/AvatarWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarWrapper.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/AvatarWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAKjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnE,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;CAC7C;AAMD,QAAA,MAAM,aAAa,UAAW,KAAK,gBA4BlC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"AvatarWrapper.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/AvatarWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAKjE,oBAAY,IAAI,GAAG,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;AAEhF,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;AAEzD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;IACV,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,QAAA,MAAM,aAAa,UAAW,KAAK,gBAwBlC,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -1,16 +1,9 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
-import styles, { getCornerClassName, getSizeClassName } from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoAvatarWrapper',
-});
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { classBySizeAndVariant, clipClassBySize } from './styles';
 const AvatarWrapper = (props) => {
     const { children, className, style, 'data-testid': dataTestId, size, variant, } = props;
-    const classes = useStyles();
-    const sizeClassName = getSizeClassName(size, variant);
-    const cornerClassName = getCornerClassName(size);
-    return (React.createElement("div", { style: style, "data-testid": dataTestId, className: cx(className, classes.root, classes[sizeClassName], classes[cornerClassName]) }, children));
+    return (React.createElement("div", { style: style, "data-testid": dataTestId, className: twMerge('relative bg-gray-500 text-[1rem] shrink-0 grow-0', classBySizeAndVariant[size][variant], clipClassBySize[size], className) }, children));
 };
 export default AvatarWrapper;
 //# sourceMappingURL=AvatarWrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarWrapper.js","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/AvatarWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,EAAE,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAQvE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;IACrC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IACrD,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAEhD,OAAO,CACL,6BACE,KAAK,EAAE,KAAK,iBACC,UAAU,EACvB,SAAS,EAAE,EAAE,CACX,SAAS,EACT,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,aAAa,CAAC,EACtB,OAAO,CAAC,eAAe,CAAC,CACzB,IAEA,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"AvatarWrapper.js","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/AvatarWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAYjE,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;IACrC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAA;IAET,OAAO,CACL,6BACE,KAAK,EAAE,KAAK,iBACC,UAAU,EACvB,SAAS,EAAE,OAAO,CAChB,kDAAkD,EAClD,qBAAqB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EACpC,eAAe,CAAC,IAAI,CAAC,EACrB,SAAS,CACV,IAEA,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -1,7 +1,4 @@
-import type { SizeType } from '@toptal/picasso-shared';
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root">;
-export default _default;
-export declare const getSizeClassName: (size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>, variant: 'square' | 'portrait' | 'landscape') => string;
-export declare const getCornerClassName: (size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>) => string;
+import type { Size, Variant } from './AvatarWrapper';
+export declare const classBySizeAndVariant: Record<Size, Record<Variant, string>>;
+export declare const clipClassBySize: Record<Size, string>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAmExB,KAAK;AAAlC,wBAYI;AAEJ,eAAO,MAAM,gBAAgB,SACrB,SAAS,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,WAC1D,QAAQ,GAAG,UAAU,GAAG,WAAW,WAG7C,CAAA;AAED,eAAO,MAAM,kBAAkB,SACvB,SAAS,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,WAGpE,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CA0BvE,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAWhD,CAAA"}

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

@@ -1,63 +1,35 @@
-import { createStyles } from '@material-ui/core/styles';
-import capitalize from '@material-ui/core/utils/capitalize';
-const SETTINGS = {
+export const classBySizeAndVariant = {
     xxsmall: {
-        dimensions: 2,
-        cornerSize: '0.5em',
+        square: 'w-[2em] h-[2em]',
+        portrait: 'w-[1.333333333em] h-[2em]',
+        landscape: 'w-[2em] h-[1.333333333em]',
     },
     xsmall: {
-        dimensions: 2.5,
-        cornerSize: '0.5em',
+        square: 'w-[2.5em] h-[2.5em]',
+        portrait: 'w-[1.666666666em] h-[2.5em]',
+        landscape: 'w-[2.5em] h-[1.666666666em]',
     },
     small: {
-        dimensions: 5,
-        cornerSize: '1em',
+        square: 'w-[5em] h-[5em]',
+        portrait: 'w-[3.333333333em] h-[5em]',
+        landscape: 'w-[5em] h-[3.333333333em]',
     },
     medium: {
-        dimensions: 7.5,
-        cornerSize: '1.5em',
+        square: 'w-[7.5em] h-[7.5em]',
+        portrait: 'w-[5em] h-[7.5em]',
+        landscape: 'w-[7.5em] h-[5em]',
     },
     large: {
-        dimensions: 10,
-        cornerSize: '1.5em',
+        square: 'w-[10em] h-[10em]',
+        portrait: 'w-[7.5em] h-[10em]',
+        landscape: 'w-[10em] h-[7.5em]',
     },
 };
-const VARIANTS = ['square', 'portrait', 'landscape'];
-const sizeClassNames = Object.entries(SETTINGS).reduce((classNames, [size, { dimensions }]) => {
-    VARIANTS.forEach(variant => {
-        const className = `size${capitalize(size)}${capitalize(variant)}`;
-        const ratio = size === 'large' ? 3 / 4 : 2 / 3;
-        const widthRatio = variant === 'portrait' ? ratio : 1;
-        const heightRatio = variant === 'landscape' ? ratio : 1;
-        classNames[className] = {
-            width: `${dimensions * widthRatio}em`,
-            height: `${dimensions * heightRatio}em`,
-        };
-    });
-    return classNames;
-}, {});
-const cornerClassNames = Object.entries(SETTINGS).reduce((classNames, [size, { cornerSize }]) => {
-    const className = `corner${capitalize(size)}`;
-    const clipPath = `polygon(0 0, 100% 0, 100% 100%, ${cornerSize} 100%, 0 calc(100% - ${cornerSize}))`;
-    classNames[className] = {
-        clipPath,
-        // we can remove this prefix as soon as this issue will
-        // be resolved - https://github.com/cssinjs/css-vendor/issues/74
-        '-webkit-clip-path': clipPath,
-    };
-    return classNames;
-}, {});
-export default ({ palette }) => createStyles(Object.assign(Object.assign({ root: {
-        position: 'relative',
-        backgroundColor: palette.grey.main,
-        fontSize: '1rem',
-        flexShrink: 0,
-        flexGrow: 0,
-    } }, sizeClassNames), cornerClassNames));
-export const getSizeClassName = (size, variant) => {
-    return `size${capitalize(size)}${capitalize(variant)}`;
-};
-export const getCornerClassName = (size) => {
-    return `corner${capitalize(size)}`;
+export const clipClassBySize = {
+    xxsmall: '[clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]',
+    xsmall: '[clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]',
+    small: '[clip-path:polygon(0_0,_100%_0,_100%_100%,_1em_100%,_0_calc(100%-1em))]',
+    medium: '[clip-path:polygon(0_0,_100%_0,_100%_100%,_1.5em_100%,_0_calc(100%-1.5em))]',
+    large: '[clip-path:polygon(0_0,_100%_0,_100%_100%,_1.5em_100%,_0_calc(100%-1.5em))]',
 };
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,qBAAqB,GAA0C;IAC1E,OAAO,EAAE;QACP,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,2BAA2B;QACrC,SAAS,EAAE,2BAA2B;KACvC;IACD,MAAM,EAAE;QACN,MAAM,EAAE,qBAAqB;QAC7B,QAAQ,EAAE,6BAA6B;QACvC,SAAS,EAAE,6BAA6B;KACzC;IACD,KAAK,EAAE;QACL,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,2BAA2B;QACrC,SAAS,EAAE,2BAA2B;KACvC;IACD,MAAM,EAAE;QACN,MAAM,EAAE,qBAAqB;QAC7B,QAAQ,EAAE,mBAAmB;QAC7B,SAAS,EAAE,mBAAmB;KAC/B;IACD,KAAK,EAAE;QACL,MAAM,EAAE,mBAAmB;QAC3B,QAAQ,EAAE,oBAAoB;QAC9B,SAAS,EAAE,oBAAoB;KAChC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAyB;IACnD,OAAO,EACL,6EAA6E;IAC/E,MAAM,EACJ,6EAA6E;IAC/E,KAAK,EACH,yEAAyE;IAC3E,MAAM,EACJ,6EAA6E;IAC/E,KAAK,EACH,6EAA6E;CAChF,CAAA"}

package/dist-package/src/Avatar/IconAvatar/IconAvatar.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { BaseProps, SizeType } from '@toptal/picasso-shared';
+export declare type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
 interface Props extends BaseProps {
     size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
 }

package/dist-package/src/Avatar/IconAvatar/IconAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconAvatar.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/IconAvatar/IconAvatar.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAKjE,UAAU,KAAM,SAAQ,SAAS;IAC/B,IAAI,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;CACpE;AAMD,QAAA,MAAM,UAAU,2DAKb,KAAK,gBAWP,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"IconAvatar.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/IconAvatar/IconAvatar.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAMjE,oBAAY,IAAI,GAAG,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;AAEhF,UAAU,KAAM,SAAQ,SAAS;IAC/B,IAAI,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;CACpE;AAED,QAAA,MAAM,UAAU,2DAKb,KAAK,gBAaP,CAAA;AAED,eAAe,UAAU,CAAA"}

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

@@ -1,14 +1,9 @@
 import React from 'react';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
 import { Profile16 } from '@toptal/picasso-icons';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoIconAvatar',
-});
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { classBySize } from './styles';
 const IconAvatar = ({ size, 'data-testid': dataTestId, className, style, }) => {
-    const classes = useStyles();
-    return (React.createElement(Profile16, { className: cx(className, classes.root, classes[`${size}Icon`]), color: 'white', "data-testid": dataTestId, style: style }));
+    return (React.createElement(Profile16, { className: twMerge(className, 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', classBySize[size]), color: 'white', "data-testid": dataTestId, style: style }));
 };
 export default IconAvatar;
 //# sourceMappingURL=IconAvatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconAvatar.js","sourceRoot":"","sources":["../../../../src/Avatar/IconAvatar/IconAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,OAAO,MAAM,MAAM,UAAU,CAAA;AAM7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,aAAa,EAAE,UAAU,EACzB,SAAS,EACT,KAAK,GACC,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,EAC9D,KAAK,EAAC,OAAO,iBACA,UAAU,EACvB,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"IconAvatar.js","sourceRoot":"","sources":["../../../../src/Avatar/IconAvatar/IconAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAQtC,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,aAAa,EAAE,UAAU,EACzB,SAAS,EACT,KAAK,GACC,EAAE,EAAE;IACV,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAChB,SAAS,EACT,6DAA6D,EAC7D,WAAW,CAAC,IAAI,CAAC,CAClB,EACD,KAAK,EAAC,OAAO,iBACA,UAAU,EACvB,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

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

@@ -1,3 +1,3 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "xxsmallIcon" | "xsmallIcon" | "smallIcon" | "mediumIcon" | "largeIcon">;
-export default _default;
+import type { Size } from './IconAvatar';
+export declare const classBySize: Record<Size, string>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/IconAvatar/styles.ts"],"names":[],"mappings":";AAEA,wBAaI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/IconAvatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAExC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAM5C,CAAA"}

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

@@ -1,15 +1,8 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-    },
-    xxsmallIcon: { fontSize: '1em' },
-    xsmallIcon: { fontSize: '1em' },
-    smallIcon: { fontSize: '1.5em' },
-    mediumIcon: { fontSize: '1.875em' },
-    largeIcon: { fontSize: '3em' },
-});
+export const classBySize = {
+    xxsmall: 'text-[1em]',
+    xsmall: 'text-[1em]',
+    small: 'text-[1.5em]',
+    medium: 'text-[1.875em]',
+    large: 'text-[3em]',
+};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/IconAvatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;KACnC;IACD,WAAW,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC/B,SAAS,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;IAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnC,SAAS,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;CAC/B,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/IconAvatar/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAyB;IAC/C,OAAO,EAAE,YAAY;IACrB,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE,cAAc;IACrB,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE,YAAY;CACpB,CAAA"}

package/dist-package/src/Avatar/ImageAvatar/ImageAvatar.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import type { BaseProps, SizeType } from '@toptal/picasso-shared';
+export declare type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
 export interface Props extends BaseProps {
-    size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
+    size: Size;
     src: string;
     alt?: string;
     name?: string;

package/dist-package/src/Avatar/ImageAvatar/ImageAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageAvatar.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/ImageAvatar/ImageAvatar.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAY,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAQ3E,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,IAAI,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnE,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AA4BD,QAAA,MAAM,WAAW,UAAW,KAAK,gBA0BhC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"ImageAvatar.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/ImageAvatar/ImageAvatar.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAKjE,oBAAY,IAAI,GAAG,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;AAEhF,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,IAAI,EAAE,IAAI,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAwBD,QAAA,MAAM,WAAW,UAAW,KAAK,gBA4BhC,CAAA;AAED,eAAe,WAAW,CAAA"}

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

@@ -1,26 +1,20 @@
 import React from 'react';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
 import { Logo } from '@toptal/picasso-logo';
 import { Image } from '@toptal/picasso-image';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoImageAvatar',
-});
-const AvatarLogo = ({ size, classes }) => {
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+const AvatarLogo = ({ size }) => {
     const isTooSmall = ['small', 'xsmall', 'xxsmall'].includes(size);
     if (isTooSmall) {
         return null;
     }
-    return (React.createElement("div", { className: classes.logoContainer, role: 'img', "aria-label": 'photo placeholder' },
-        React.createElement(Logo, { emblem: true, variant: 'white', className: classes.logo })));
+    return (React.createElement("div", { className: 'flex absolute bottom-4 left-4', role: 'img', "aria-label": 'photo placeholder' },
+        React.createElement(Logo, { emblem: true, variant: 'white', className: 'w-[1.0625rem] h-6' })));
 };
 const ImageAvatar = (props) => {
     const { alt, className, name, size, src, style, 'data-testid': dataTestId, 'data-private': dataPrivate, } = props;
-    const classes = useStyles(props);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Image, { alt: alt || name || '', className: cx(classes.image, className), src: src, style: style, "data-testid": dataTestId, "data-private": dataPrivate }),
-        React.createElement(AvatarLogo, { classes: classes, size: size })));
+        React.createElement(Image, { alt: alt || name || '', className: twMerge('object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize-contrast]', className), src: src, style: style, "data-testid": dataTestId, "data-private": dataPrivate }),
+        React.createElement(AvatarLogo, { size: size })));
 };
 export default ImageAvatar;
 //# sourceMappingURL=ImageAvatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageAvatar.js","sourceRoot":"","sources":["../../../../src/Avatar/ImageAvatar/ImageAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAE7C,OAAO,MAAM,MAAM,UAAU,CAAA;AAa7B,MAAM,SAAS,GAAG,UAAU,CAAe,MAAM,EAAE;IACjD,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAa,EAAE,EAAE;IAClD,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEhE,IAAI,UAAU,EAAE;QACd,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BACE,SAAS,EAAE,OAAO,CAAC,aAAa,EAChC,IAAI,EAAC,KAAK,gBACC,mBAAmB;QAE9B,oBAAC,IAAI,IAAC,MAAM,QAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CACpD,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;IACnC,MAAM,EACJ,GAAG,EACH,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,cAAc,EAAE,WAAW,GAC5B,GAAG,KAAK,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,OAAO,CACL;QACE,oBAAC,KAAK,IACJ,GAAG,EAAE,GAAG,IAAI,IAAI,IAAI,EAAE,EACtB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC,EACvC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,iBACC,UAAU,kBACT,WAAW,GACzB;QACF,oBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,GAAI,CAC3C,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"ImageAvatar.js","sourceRoot":"","sources":["../../../../src/Avatar/ImageAvatar/ImageAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAexD,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAa,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEhE,IAAI,UAAU,EAAE;QACd,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BACE,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,KAAK,gBACC,mBAAmB;QAE9B,oBAAC,IAAI,IAAC,MAAM,QAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,mBAAmB,GAAG,CACzD,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;IACnC,MAAM,EACJ,GAAG,EACH,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,cAAc,EAAE,WAAW,GAC5B,GAAG,KAAK,CAAA;IAET,OAAO,CACL;QACE,oBAAC,KAAK,IACJ,GAAG,EAAE,GAAG,IAAI,IAAI,IAAI,EAAE,EACtB,SAAS,EAAE,OAAO,CAChB,8FAA8F,EAC9F,SAAS,CACV,EACD,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,iBACC,UAAU,kBACT,WAAW,GACzB;QACF,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,CACzB,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}

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

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
 import type { BaseProps, SizeType } from '@toptal/picasso-shared';
+export declare type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
+export declare type FontSize = SizeType<'small' | 'large'>;
 interface Props extends BaseProps {
     children: ReactNode;
-    fontSize?: SizeType<'small' | 'large'>;
-    size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
+    fontSize?: FontSize;
+    size: Size;
 }
 declare const TextAvatar: {
     ({ children, className, style, "data-testid": dataTestID, fontSize, size, "data-private": dataPrivate, }: Props): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"TextAvatar.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/TextAvatar/TextAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAKjE,UAAU,KAAM,SAAQ,SAAS;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,CAAA;IACtC,IAAI,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;CACpE;AAMD,QAAA,MAAM,UAAU;8GAQb,KAAK;;;;CAyBP,CAAA;AAMD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TextAvatar.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/TextAvatar/TextAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAMjE,oBAAY,IAAI,GAAG,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;AAEhF,oBAAY,QAAQ,GAAG,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,CAAA;AAElD,UAAU,KAAM,SAAQ,SAAS;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;CACX;AAED,QAAA,MAAM,UAAU;8GAQb,KAAK;;;;CAqBP,CAAA;AAMD,eAAe,UAAU,CAAA"}