@toptal/picasso-avatar 6.0.1 → 6.1.0

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

@@ -6,6 +6,6 @@ export interface Props extends BaseProps {
     size: Size;
     showEmblem?: boolean;
 }
-declare const AvatarWrapper: (props: Props) => JSX.Element;
+export declare const AvatarWrapper: (props: Props) => JSX.Element;
 export default AvatarWrapper;
 //# sourceMappingURL=AvatarWrapper.d.ts.map

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;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,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAgCD,QAAA,MAAM,aAAa,UAAW,KAAK,gBAiClC,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;AAMjE,oBAAY,IAAI,GAAG,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;AAEhF,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAgCD,eAAO,MAAM,aAAa,UAAW,KAAK,gBAgCzC,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -9,16 +9,17 @@ const showLogo = (size, showEmblem) => {
     }
     return true;
 };
-const AvatarLogo = ({ size }) => (React.createElement("div", { className: twJoin('flex absolute bottom-0', avatarLogoClassesBySize.root[size]), role: 'img', "aria-label": 'photo placeholder' },
+const AvatarLogo = ({ size }) => (React.createElement("div", { className: twJoin('flex absolute bottom-0 left-0', avatarLogoClassesBySize.root[size]), role: 'img', "aria-label": 'photo placeholder' },
     React.createElement(Logo, { emblem: true, variant: 'blue', 
         // Necessary to decrease the default minWeight and minHeight so that the new width and height could apply
         // eslint-disable-next-line no-inline-styles/no-inline-styles
         style: { minWidth: '1px', minHeight: '1px' }, className: avatarLogoClassesBySize.logo[size] })));
-const AvatarWrapper = (props) => {
+export const AvatarWrapper = (props) => {
     const { children, className, style, 'data-testid': dataTestId, size, showEmblem = false, } = props;
-    return (React.createElement("div", { className: twJoin(`flex relative`, showLogo(size, showEmblem) && 'bg-white') },
-        React.createElement("div", { style: style, "data-testid": dataTestId, className: twMerge('relative bg-gray-500 text-[1rem] shrink-0 grow-0', classBySize[size], clipClassBySize[size], className) }, children),
-        showLogo(size, showEmblem) && React.createElement(AvatarLogo, { size: size })));
+    return (React.createElement("div", null,
+        React.createElement("div", { className: twJoin(`relative`, showLogo(size, showEmblem) && 'bg-white') },
+            React.createElement("div", { style: style, "data-testid": dataTestId, className: twMerge('relative bg-gray-500 text-[1rem]', 'grid place-items-center', classBySize[size], clipClassBySize[size], className) }, children),
+            showLogo(size, showEmblem) && React.createElement(AvatarLogo, { size: size }))));
 };
 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,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAUhF,MAAM,QAAQ,GAAG,CAAC,IAAU,EAAE,UAAoB,EAAW,EAAE;IAC7D,MAAM,UAAU,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEvD,IAAI,UAAU,IAAI,CAAC,UAAU,EAAE;QAC7B,OAAO,KAAK,CAAA;KACb;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAuB,EAAE,EAAE,CAAC,CACpD,6BACE,SAAS,EAAE,MAAM,CACf,wBAAwB,EACxB,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CACnC,EACD,IAAI,EAAC,KAAK,gBACC,mBAAmB;IAE9B,oBAAC,IAAI,IACH,MAAM,QACN,OAAO,EAAC,MAAM;QACd,yGAAyG;QACzG,6DAA6D;QAC7D,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAC5C,SAAS,EAAE,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC7C,CACE,CACP,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;IACrC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,IAAI,EACJ,UAAU,GAAG,KAAK,GACnB,GAAG,KAAK,CAAA;IAET,OAAO,CACL,6BACE,SAAS,EAAE,MAAM,CACf,eAAe,EACf,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,UAAU,CACzC;QAED,6BACE,KAAK,EAAE,KAAK,iBACC,UAAU,EACvB,SAAS,EAAE,OAAO,CAChB,kDAAkD,EAClD,WAAW,CAAC,IAAI,CAAC,EACjB,eAAe,CAAC,IAAI,CAAC,EACrB,SAAS,CACV,IAEA,QAAQ,CACL;QAEL,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,CACrD,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,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAUhF,MAAM,QAAQ,GAAG,CAAC,IAAU,EAAE,UAAoB,EAAW,EAAE;IAC7D,MAAM,UAAU,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEvD,IAAI,UAAU,IAAI,CAAC,UAAU,EAAE;QAC7B,OAAO,KAAK,CAAA;KACb;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAuB,EAAE,EAAE,CAAC,CACpD,6BACE,SAAS,EAAE,MAAM,CACf,+BAA+B,EAC/B,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CACnC,EACD,IAAI,EAAC,KAAK,gBACC,mBAAmB;IAE9B,oBAAC,IAAI,IACH,MAAM,QACN,OAAO,EAAC,MAAM;QACd,yGAAyG;QACzG,6DAA6D;QAC7D,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAC5C,SAAS,EAAE,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC7C,CACE,CACP,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;IAC5C,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,IAAI,EACJ,UAAU,GAAG,KAAK,GACnB,GAAG,KAAK,CAAA;IAET,OAAO,CACL;QACE,6BACE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,UAAU,CAAC;YAEvE,6BACE,KAAK,EAAE,KAAK,iBACC,UAAU,EACvB,SAAS,EAAE,OAAO,CAChB,kCAAkC,EAClC,yBAAyB,EACzB,WAAW,CAAC,IAAI,CAAC,EACjB,eAAe,CAAC,IAAI,CAAC,EACrB,SAAS,CACV,IAEA,QAAQ,CACL;YACL,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,CACrD,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

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":";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"}
+{"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,gBASP,CAAA;AAED,eAAe,UAAU,CAAA"}

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

@@ -3,7 +3,7 @@ import { Profile16 } from '@toptal/picasso-icons';
 import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { classBySize } from './styles';
 const IconAvatar = ({ size, 'data-testid': dataTestId, className, 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 }));
+    return (React.createElement(Profile16, { className: twMerge(className, 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;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"}
+{"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,CAAC,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,EAChD,KAAK,EAAC,OAAO,iBACA,UAAU,EACvB,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

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

@@ -4,7 +4,7 @@ import { twMerge } from '@toptal/picasso-tailwind-merge';
 const ImageAvatar = (props) => {
     const { alt, className, name, src, style, 'data-testid': dataTestId, 'data-private': dataPrivate, } = props;
     return (React.createElement(React.Fragment, null,
-        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(Image, { alt: alt || name || '', className: twMerge('object-cover w-full h-full [image-rendering:-webkit-optimize-contrast]', className), src: src, style: style, "data-testid": dataTestId, "data-private": dataPrivate })));
 };
 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;AAEzB,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;IACnC,MAAM,EACJ,GAAG,EACH,SAAS,EACT,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,CACD,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,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;IACnC,MAAM,EACJ,GAAG,EACH,SAAS,EACT,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,wEAAwE,EACxE,SAAS,CACV,EACD,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,iBACC,UAAU,kBACT,WAAW,GACzB,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}

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;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"}
+{"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;;;;CAiBP,CAAA;AAMD,eAAe,UAAU,CAAA"}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Typography } from '@toptal/picasso-typography';
 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 },
+const TextAvatar = ({ children, className, style, 'data-testid': dataTestID, fontSize, size, 'data-private': dataPrivate, }) => (React.createElement("div", { className: twMerge('uppercase', 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;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"}
+{"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,CAAC,WAAW,EAAE,wBAAwB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAC1E,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/index.d.ts

@@ -1,5 +1,6 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared';
 import type { Props } from './Avatar';
 export { default as Avatar } from './Avatar';
+export { AvatarWrapper } from './AvatarWrapper/AvatarWrapper';
 export declare type AvatarProps = OmitInternalProps<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,oBAAY,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,oBAAY,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

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

@@ -1,2 +1,3 @@
 export { default as Avatar } from './Avatar';
+export { AvatarWrapper } from './AvatarWrapper/AvatarWrapper';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Avatar/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Avatar/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA"}

package/dist-package/src/AvatarCompound/index.d.ts

@@ -13,5 +13,6 @@ export declare const AvatarCompound: {
             size: string;
         };
     };
+    Wrapper: (props: import("../Avatar/AvatarWrapper/AvatarWrapper").Props) => JSX.Element;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/AvatarCompound/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AvatarCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;CAEzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AvatarCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;CAGzB,CAAA"}

package/dist-package/src/AvatarCompound/index.js

@@ -1,6 +1,7 @@
-import { Avatar } from '../Avatar';
+import { Avatar, AvatarWrapper } from '../Avatar';
 import { AvatarGroup } from '../AvatarGroup';
 export const AvatarCompound = Object.assign(Avatar, {
     Group: AvatarGroup,
+    Wrapper: AvatarWrapper,
 });
 //# sourceMappingURL=index.js.map

package/dist-package/src/AvatarCompound/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/AvatarCompound/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IAClD,KAAK,EAAE,WAAW;CACnB,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/AvatarCompound/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IAClD,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,aAAa;CACvB,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-avatar",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "Toptal UI components library - Avatar",
   "publishConfig": {
     "access": "public"

package/src/Avatar/AvatarWrapper/AvatarWrapper.tsx

@@ -27,7 +27,7 @@ const showLogo = (size: Size, showEmblem?: boolean): boolean => {
 const AvatarLogo = ({ size }: Pick<Props, 'size'>) => (
   <div
     className={twJoin(
-      'flex absolute bottom-0',
+      'flex absolute bottom-0 left-0',
       avatarLogoClassesBySize.root[size]
     )}
     role='img'
@@ -44,7 +44,7 @@ const AvatarLogo = ({ size }: Pick<Props, 'size'>) => (
   </div>
 )
 
-const AvatarWrapper = (props: Props) => {
+export const AvatarWrapper = (props: Props) => {
   const {
     children,
     className,
@@ -55,26 +55,25 @@ const AvatarWrapper = (props: Props) => {
   } = props
 
   return (
-    <div
-      className={twJoin(
-        `flex relative`,
-        showLogo(size, showEmblem) && 'bg-white'
-      )}
-    >
+    <div>
       <div
-        style={style}
-        data-testid={dataTestId}
-        className={twMerge(
-          'relative bg-gray-500 text-[1rem] shrink-0 grow-0',
-          classBySize[size],
-          clipClassBySize[size],
-          className
-        )}
+        className={twJoin(`relative`, showLogo(size, showEmblem) && 'bg-white')}
       >
-        {children}
+        <div
+          style={style}
+          data-testid={dataTestId}
+          className={twMerge(
+            'relative bg-gray-500 text-[1rem]',
+            'grid place-items-center',
+            classBySize[size],
+            clipClassBySize[size],
+            className
+          )}
+        >
+          {children}
+        </div>
+        {showLogo(size, showEmblem) && <AvatarLogo size={size} />}
       </div>
-
-      {showLogo(size, showEmblem) && <AvatarLogo size={size} />}
     </div>
   )
 }

package/src/Avatar/IconAvatar/IconAvatar.tsx

@@ -19,11 +19,7 @@ const IconAvatar = ({
 }: Props) => {
   return (
     <Profile16
-      className={twMerge(
-        className,
-        'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
-        classBySize[size]
-      )}
+      className={twMerge(className, classBySize[size])}
       color='white'
       data-testid={dataTestId}
       style={style}

package/src/Avatar/ImageAvatar/ImageAvatar.tsx

@@ -28,7 +28,7 @@ const ImageAvatar = (props: Props) => {
       <Image
         alt={alt || name || ''}
         className={twMerge(
-          'object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize-contrast]',
+          'object-cover w-full h-full [image-rendering:-webkit-optimize-contrast]',
           className
         )}
         src={src}

package/src/Avatar/TextAvatar/TextAvatar.tsx

@@ -26,11 +26,7 @@ const TextAvatar = ({
   'data-private': dataPrivate,
 }: Props) => (
   <div
-    className={twMerge(
-      'uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)]',
-      containerTextClassBySize[size],
-      className
-    )}
+    className={twMerge('uppercase', containerTextClassBySize[size], className)}
     style={style}
     data-private={dataPrivate}
   >

package/src/Avatar/index.ts

@@ -3,4 +3,5 @@ import type { OmitInternalProps } from '@toptal/picasso-shared'
 import type { Props } from './Avatar'
 
 export { default as Avatar } from './Avatar'
+export { AvatarWrapper } from './AvatarWrapper/AvatarWrapper'
 export type AvatarProps = OmitInternalProps<Props>

package/src/Avatar/story/LongName.example.tsx

@@ -3,22 +3,12 @@ import { Avatar, Container } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
-  <Container top={SPACING_4}>
-    <Container inline>
-      <Avatar size='xxsmall' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='xsmall' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='small' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='medium' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='large' name='William Wallace Wo Wade' />
-    </Container>
+  <Container top={SPACING_4} flex gap={SPACING_4}>
+    <Avatar size='xxsmall' name='William Wallace Wo Wade' />
+    <Avatar size='xsmall' name='William Wallace Wo Wade' />
+    <Avatar size='small' name='William Wallace Wo Wade' />
+    <Avatar size='medium' name='William Wallace Wo Wade' />
+    <Avatar size='large' name='William Wallace Wo Wade' />
   </Container>
 )
 

package/src/Avatar/story/Sizes.example.tsx

@@ -4,83 +4,53 @@ import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
   <div>
-    <Container>
-      <Container inline>
-        <Avatar
-          size='xxsmall'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='xsmall'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='small'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='medium'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Medium'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='large'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Large'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
+    <Container top={SPACING_4} flex gap={SPACING_4}>
+      <Avatar
+        size='xxsmall'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='xsmall'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='small'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='medium'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Medium'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='large'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Large'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
     </Container>
 
-    <Container top={SPACING_4}>
-      <Container inline>
-        <Avatar size='xxsmall' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='xsmall' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='small' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='medium' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='large' name='Jacqueline Roque' />
-      </Container>
+    <Container top={SPACING_4} flex gap={SPACING_4}>
+      <Avatar size='xxsmall' name='Jacqueline Roque' />
+      <Avatar size='xsmall' name='Jacqueline Roque' />
+      <Avatar size='small' name='Jacqueline Roque' />
+      <Avatar size='medium' name='Jacqueline Roque' />
+      <Avatar size='large' name='Jacqueline Roque' />
     </Container>
 
-    <Container top={SPACING_4}>
-      <Container inline>
-        <Avatar size='xxsmall' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='xsmall' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='small' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='medium' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='large' />
-      </Container>
+    <Container top={SPACING_4} flex gap={SPACING_4}>
+      <Avatar size='xxsmall' />
+      <Avatar size='xsmall' />
+      <Avatar size='small' />
+      <Avatar size='medium' />
+      <Avatar size='large' />
     </Container>
   </div>
 )

package/src/Avatar/story/ToptalLogo.example.tsx

@@ -3,33 +3,19 @@ import { Avatar, Container } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
-  <div>
-    <Container inline>
-      <Avatar size='xxsmall' showEmblem />
-    </Container>
-
-    <Container inline left={SPACING_4}>
-      <Avatar size='xsmall' showEmblem />
-    </Container>
-
-    <Container inline left={SPACING_4}>
-      <Avatar size='small' showEmblem />
-    </Container>
-
-    <Container inline left={SPACING_4}>
-      <Avatar size='medium' name='Jacqueline Roque' showEmblem />
-    </Container>
-
-    <Container inline left={SPACING_4}>
-      <Avatar
-        size='large'
-        alt='Jacqueline Roque. Pablo Picasso, 1954'
-        name='Jacqueline Roque'
-        src='./jacqueline-with-flowers-1954-square.jpg'
-        showEmblem
-      />
-    </Container>
-  </div>
+  <Container top={SPACING_4} flex gap={SPACING_4}>
+    <Avatar size='xxsmall' showEmblem />
+    <Avatar size='xsmall' showEmblem />
+    <Avatar size='small' showEmblem />
+    <Avatar size='medium' name='Jacqueline Roque' showEmblem />
+    <Avatar
+      size='large'
+      alt='Jacqueline Roque. Pablo Picasso, 1954'
+      name='Jacqueline Roque'
+      src='./jacqueline-with-flowers-1954-square.jpg'
+      showEmblem
+    />
+  </Container>
 )
 
 export default Example

package/src/Avatar/story/Variants.example.tsx

@@ -3,31 +3,23 @@ import { Avatar, Container } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
-  <div>
-    <Container inline>
-      <Avatar
-        size='medium'
-        alt='Jacqueline Roque. Pablo Picasso, 1954'
-        name='Jacqueline Roque'
-        src='./jacqueline-with-flowers-1954-square.jpg'
-      />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='medium' name='Jacqueline Roque' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='medium' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar
-        size='medium'
-        alt='Jacqueline Roque. Pablo Picasso, 1954'
-        name='Jacqueline Roque'
-        src='./jacqueline-with-flowers-1954-square.jpg'
-        showEmblem
-      />
-    </Container>
-  </div>
+  <Container top={SPACING_4} flex gap={SPACING_4}>
+    <Avatar
+      size='medium'
+      alt='Jacqueline Roque. Pablo Picasso, 1954'
+      name='Jacqueline Roque'
+      src='./jacqueline-with-flowers-1954-square.jpg'
+    />
+    <Avatar size='medium' name='Jacqueline Roque' />
+    <Avatar size='medium' />
+    <Avatar
+      size='medium'
+      alt='Jacqueline Roque. Pablo Picasso, 1954'
+      name='Jacqueline Roque'
+      src='./jacqueline-with-flowers-1954-square.jpg'
+      showEmblem
+    />
+  </Container>
 )
 
 export default Example

package/src/AvatarCompound/index.ts

@@ -1,6 +1,7 @@
-import { Avatar } from '../Avatar'
+import { Avatar, AvatarWrapper } from '../Avatar'
 import { AvatarGroup } from '../AvatarGroup'
 
 export const AvatarCompound = Object.assign(Avatar, {
   Group: AvatarGroup,
+  Wrapper: AvatarWrapper,
 })