@toptal/picasso-avatar 3.0.0 → 4.0.0

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

@@ -10,8 +10,8 @@ export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
     size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
     /** Photo url */
     src?: string;
-    /** Variant of the avatar shape */
-    variant?: 'square' | 'portrait' | 'landscape';
+    /** Displays Toptal logo */
+    showEmblem?: boolean;
     /** Callback to show edit-on-click and receive event */
     onEdit?: (event: React.MouseEvent) => void;
     testIds?: {
@@ -26,7 +26,6 @@ export declare const Avatar: {
     (props: Props): JSX.Element;
     defaultProps: {
         size: string;
-        variant: string;
     };
     displayName: string;
 };

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;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"}
+{"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,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,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;;;;;CAqGlC,CAAA;AAQD,eAAe,MAAM,CAAA"}

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

@@ -17,7 +17,7 @@ import IconAvatar from './IconAvatar/IconAvatar';
 import AvatarWrapper from './AvatarWrapper/AvatarWrapper';
 import AvatarEditContainer from './AvatarEditContainer/AvatarEditContainer';
 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 { alt, src, className, name, size, style, showEmblem, testIds, onEdit, 'data-private': dataPrivate } = props, rest = __rest(props, ["alt", "src", "className", "name", "size", "style", "showEmblem", "testIds", "onEdit", 'data-private']);
     const renderAvatar = useCallback(() => {
         if (src) {
             return (React.createElement(ImageAvatar, { alt: alt, className: className, name: name, 
@@ -51,9 +51,7 @@ export const Avatar = (props) => {
     /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
     , Object.assign({ 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        variant: variant, 
-        /* 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()));
+        size: size, showEmblem: showEmblem, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.wrapper }, rest), renderAvatar()));
     if (isEditable) {
         return (React.createElement("div", { className: 'relative' },
             avatar,
@@ -63,7 +61,6 @@ export const Avatar = (props) => {
 };
 Avatar.defaultProps = {
     size: 'xsmall',
-    variant: 'square',
 };
 Avatar.displayName = 'Avatar';
 export default Avatar;

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":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAE9E,OAAO,WAAW,MAAM,2BAA2B,CAAA;AACnD,OAAO,UAAU,MAAM,yBAAyB,CAAA;AAChD,OAAO,UAAU,MAAM,yBAAyB,CAAA;AAChD,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,mBAAmB,MAAM,2CAA2C,CAAA;AAwB3E,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAY,EAAE,EAAE;IACrC,MAAM,EACJ,GAAG,EACH,GAAG,EACH,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,cAAc,EAAE,WAAW,KAEzB,KAAK,EADJ,IAAI,UACL,KAAK,EAZH,uGAYL,CAAQ,CAAA;IAET,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,GAAG,EAAE;YACP,OAAO,CACL,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI;gBACV,uEAAuE;gBACvE,IAAI,EAAE,IAAK,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,iBACC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,kBACb,WAAW,GACzB,CACH,CAAA;SACF;QAED,IAAI,IAAI,EAAE;YACR,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;YACtC,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,qBAAqB,CAAA;YAE3D,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;gBACxC,uEAAuE;gBACvE,IAAI,EAAE,IAAK,iBACE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,kBACZ,WAAW,IAExB,QAAQ,CACE,CACd,CAAA;SACF;QAED,OAAO,CACL,oBAAC,UAAU,mBACI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EAC1B,SAAS,EAAE,SAAS;YACpB,uEAAuE;YACvE,IAAI,EAAE,IAAK,GACX,CACH,CAAA;IACH,CAAC,EAAE;QACD,IAAI;QACJ,GAAG;QACH,SAAS;QACT,GAAG;QACH,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;QACb,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK;QACd,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;QACb,IAAI;QACJ,KAAK;QACL,WAAW;KACZ,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;IAElC,MAAM,MAAM,GAAG,CACb,oBAAC,aAAa;IACZ,uEAAuE;;QAAvE,uEAAuE;QACvE,IAAI,EAAE,IAAK,EACX,UAAU,EAAE,UAAU,iBACT,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,IACzB,IAAI,GAEP,YAAY,EAAE,CACD,CACjB,CAAA;IAED,IAAI,UAAU,EAAE;QACd,OAAO,CACL,6BAAK,SAAS,EAAC,UAAU;YACtB,MAAM;YACN,UAAU,IAAI,CACb,oBAAC,mBAAmB,mBACL,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,EACnC,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,GACV,CACH,CACG,CACP,CAAA;KACF;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,MAAM,CAAC,YAAY,GAAG;IACpB,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,eAAe,MAAM,CAAA"}

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

@@ -1,11 +1,10 @@
 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: Size;
-    variant: Variant;
+    showEmblem?: boolean;
 }
 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;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"}
+{"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"}

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

@@ -1,9 +1,24 @@
 import React from 'react';
-import { twMerge } from '@toptal/picasso-tailwind-merge';
-import { classBySizeAndVariant, clipClassBySize } from './styles';
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
+import { Logo } from '@toptal/picasso-logo';
+import { avatarLogoClassesBySize, classBySize, clipClassBySize } from './styles';
+const showLogo = (size, showEmblem) => {
+    const isTooSmall = ['xsmall', 'xxsmall'].includes(size);
+    if (isTooSmall || !showEmblem) {
+        return false;
+    }
+    return true;
+};
+const AvatarLogo = ({ size }) => (React.createElement("div", { className: twJoin('flex absolute bottom-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) => {
-    const { children, className, style, 'data-testid': dataTestId, size, variant, } = props;
-    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));
+    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 })));
 };
 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,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"}
+{"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"}

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

@@ -1,4 +1,5 @@
-import type { Size, Variant } from './AvatarWrapper';
-export declare const classBySizeAndVariant: Record<Size, Record<Variant, string>>;
+import type { Size } from './AvatarWrapper';
+export declare const classBySize: Record<Size, string>;
 export declare const clipClassBySize: Record<Size, string>;
+export declare const avatarLogoClassesBySize: Record<string, 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,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"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAE3C,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAM5C,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAWhD,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAexE,CAAA"}

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

@@ -1,29 +1,9 @@
-export const classBySizeAndVariant = {
-    xxsmall: {
-        square: 'w-[2em] h-[2em]',
-        portrait: 'w-[1.333333333em] h-[2em]',
-        landscape: 'w-[2em] h-[1.333333333em]',
-    },
-    xsmall: {
-        square: 'w-[2.5em] h-[2.5em]',
-        portrait: 'w-[1.666666666em] h-[2.5em]',
-        landscape: 'w-[2.5em] h-[1.666666666em]',
-    },
-    small: {
-        square: 'w-[5em] h-[5em]',
-        portrait: 'w-[3.333333333em] h-[5em]',
-        landscape: 'w-[5em] h-[3.333333333em]',
-    },
-    medium: {
-        square: 'w-[7.5em] h-[7.5em]',
-        portrait: 'w-[5em] h-[7.5em]',
-        landscape: 'w-[7.5em] h-[5em]',
-    },
-    large: {
-        square: 'w-[10em] h-[10em]',
-        portrait: 'w-[7.5em] h-[10em]',
-        landscape: 'w-[10em] h-[7.5em]',
-    },
+export const classBySize = {
+    xxsmall: 'w-[2em] h-[2em]',
+    xsmall: 'w-[2.5em] h-[2.5em]',
+    small: 'w-[5em] h-[5em]',
+    medium: 'w-[7.5em] h-[7.5em]',
+    large: 'w-[10em] h-[10em]',
 };
 export const clipClassBySize = {
     xxsmall: '[clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]',
@@ -32,4 +12,20 @@ export const clipClassBySize = {
     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))]',
 };
+export const avatarLogoClassesBySize = {
+    root: {
+        xxsmall: '',
+        xsmall: '',
+        small: 'pl-[1px] pb-[1px]',
+        medium: 'pl-[2px] pb-[2px]',
+        large: 'pl-[3px] pb-[3px]',
+    },
+    logo: {
+        xxsmall: '',
+        xsmall: '',
+        small: 'w-[5.7px] h-[8px]',
+        medium: 'w-[8.54px] h-[12px]',
+        large: 'w-[7.12px] h-[10px]',
+    },
+};
 //# 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":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/AvatarWrapper/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAyB;IAC/C,OAAO,EAAE,iBAAiB;IAC1B,MAAM,EAAE,qBAAqB;IAC7B,KAAK,EAAE,iBAAiB;IACxB,MAAM,EAAE,qBAAqB;IAC7B,KAAK,EAAE,mBAAmB;CAC3B,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;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAyC;IAC3E,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE;QACX,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,mBAAmB;QAC1B,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,mBAAmB;KAC3B;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE;QACX,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,mBAAmB;QAC1B,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,qBAAqB;KAC7B;CACF,CAAA"}

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":";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"}
+{"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;AAIjE,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;AAED,QAAA,MAAM,WAAW,UAAW,KAAK,gBA0BhC,CAAA;AAED,eAAe,WAAW,CAAA"}

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

@@ -1,20 +1,10 @@
 import React from 'react';
-import { Logo } from '@toptal/picasso-logo';
 import { Image } from '@toptal/picasso-image';
 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: '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 { 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(AvatarLogo, { 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 })));
 };
 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,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"}
+{"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"}

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

@@ -3,12 +3,11 @@ export declare const AvatarCompound: {
     (props: import("../Avatar/Avatar").Props): JSX.Element;
     defaultProps: {
         size: string;
-        variant: string;
     };
     displayName: string;
 } & {
     Group: {
-        ({ className, style, testIds, items, limit, size, }: import("../AvatarGroup/AvatarGroup").Props): JSX.Element | null;
+        ({ className, style, testIds, items, limit, size, showEmblem, }: import("../AvatarGroup/AvatarGroup").Props): JSX.Element | null;
         defaultProps: {
             limit: number;
             size: string;

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;;;;;;;;;;;;;;CAEzB,CAAA"}

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

@@ -13,6 +13,8 @@ export interface Props extends Omit<BaseProps, 'data-testid'> {
     limit?: number;
     /** Size */
     size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
+    /** Displays Toptal logo */
+    showEmblem?: boolean;
     /** data-testid to all parts of component */
     testIds?: {
         container?: string;
@@ -20,7 +22,7 @@ export interface Props extends Omit<BaseProps, 'data-testid'> {
     };
 }
 declare const AvatarGroup: {
-    ({ className, style, testIds, items, limit, size, }: Props): JSX.Element | null;
+    ({ className, style, testIds, items, limit, size, showEmblem, }: Props): JSX.Element | null;
     defaultProps: {
         limit: number;
         size: string;

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;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"}
+{"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,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED,QAAA,MAAM,WAAW;qEAQd,KAAK;;;;;CAkDP,CAAA;AAOD,eAAe,WAAW,CAAA"}

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

@@ -4,7 +4,7 @@ import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { Avatar } from '../Avatar';
 import AvatarWrapper from '../Avatar/AvatarWrapper/AvatarWrapper';
 import TextAvatar from '../Avatar/TextAvatar/TextAvatar';
-const AvatarGroup = ({ className, style, testIds, items, limit, size, }) => {
+const AvatarGroup = ({ className, style, testIds, items, limit, size, showEmblem = false, }) => {
     /* 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
@@ -19,10 +19,10 @@ const AvatarGroup = ({ className, style, testIds, items, limit, size, }) => {
     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 }))),
+            size: size, showEmblem: showEmblem, src: src, "data-testid": avatarTestId }))),
         isOverLimit ? (
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        React.createElement(AvatarWrapper, { size: size, variant: 'square' },
+        React.createElement(AvatarWrapper, { size: size },
             React.createElement(TextAvatar, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.overLimit, size: size },
                 "+",
                 itemsOverLimit))) : null));

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,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"}
+{"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;AAyBxD,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,KAAK,GACZ,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,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,iBACK,YAAY,GACzB,CACH,CACF;QACA,WAAW,CAAC,CAAC,CAAC;QACb,uEAAuE;QACvE,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAK;YAExB,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": "3.0.0",
+  "version": "4.0.0",
   "description": "Toptal UI components library - Avatar",
   "publishConfig": {
     "access": "public"
@@ -23,9 +23,9 @@
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
     "@toptal/picasso-container": "1.0.3",
-    "@toptal/picasso-icons": "1.4.0",
+    "@toptal/picasso-icons": "1.5.0",
     "@toptal/picasso-image": "1.0.3",
-    "@toptal/picasso-logo": "1.0.7",
+    "@toptal/picasso-logo": "1.0.8",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-typography": "2.0.2",
     "@toptal/picasso-utils": "1.0.3"

package/src/Avatar/Avatar.tsx

@@ -18,8 +18,8 @@ export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
   size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
   /** Photo url */
   src?: string
-  /** Variant of the avatar shape */
-  variant?: 'square' | 'portrait' | 'landscape'
+  /** Displays Toptal logo */
+  showEmblem?: boolean
   /** Callback to show edit-on-click and receive event */
   onEdit?: (event: React.MouseEvent) => void
   testIds?: {
@@ -39,7 +39,7 @@ export const Avatar = (props: Props) => {
     name,
     size,
     style,
-    variant,
+    showEmblem,
     testIds,
     onEdit,
     'data-private': dataPrivate,
@@ -106,10 +106,9 @@ export const Avatar = (props: Props) => {
 
   const avatar = (
     <AvatarWrapper
-      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-      variant={variant!}
       /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
       size={size!}
+      showEmblem={showEmblem}
       data-testid={testIds?.wrapper}
       {...rest}
     >
@@ -137,7 +136,6 @@ export const Avatar = (props: Props) => {
 
 Avatar.defaultProps = {
   size: 'xsmall',
-  variant: 'square',
 }
 
 Avatar.displayName = 'Avatar'

package/src/Avatar/AvatarWrapper/AvatarWrapper.tsx

@@ -1,20 +1,49 @@
 import type { ReactNode } from 'react'
 import React from 'react'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import { twMerge } from '@toptal/picasso-tailwind-merge'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
+import { Logo } from '@toptal/picasso-logo'
 
-import { classBySizeAndVariant, clipClassBySize } from './styles'
+import { avatarLogoClassesBySize, classBySize, clipClassBySize } from './styles'
 
 export type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
 
-export type Variant = 'square' | 'portrait' | 'landscape'
-
 export interface Props extends BaseProps {
   children: ReactNode
   size: Size
-  variant: Variant
+  showEmblem?: boolean
 }
 
+const showLogo = (size: Size, showEmblem?: boolean): boolean => {
+  const isTooSmall = ['xsmall', 'xxsmall'].includes(size)
+
+  if (isTooSmall || !showEmblem) {
+    return false
+  }
+
+  return true
+}
+
+const AvatarLogo = ({ size }: Pick<Props, 'size'>) => (
+  <div
+    className={twJoin(
+      'flex absolute bottom-0',
+      avatarLogoClassesBySize.root[size]
+    )}
+    role='img'
+    aria-label='photo placeholder'
+  >
+    <Logo
+      emblem
+      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]}
+    />
+  </div>
+)
+
 const AvatarWrapper = (props: Props) => {
   const {
     children,
@@ -22,21 +51,30 @@ const AvatarWrapper = (props: Props) => {
     style,
     'data-testid': dataTestId,
     size,
-    variant,
+    showEmblem = false,
   } = props
 
   return (
     <div
-      style={style}
-      data-testid={dataTestId}
-      className={twMerge(
-        'relative bg-gray-500 text-[1rem] shrink-0 grow-0',
-        classBySizeAndVariant[size][variant],
-        clipClassBySize[size],
-        className
+      className={twJoin(
+        `flex relative`,
+        showLogo(size, showEmblem) && 'bg-white'
       )}
     >
-      {children}
+      <div
+        style={style}
+        data-testid={dataTestId}
+        className={twMerge(
+          'relative bg-gray-500 text-[1rem] shrink-0 grow-0',
+          classBySize[size],
+          clipClassBySize[size],
+          className
+        )}
+      >
+        {children}
+      </div>
+
+      {showLogo(size, showEmblem) && <AvatarLogo size={size} />}
     </div>
   )
 }

package/src/Avatar/AvatarWrapper/styles.ts

@@ -1,31 +1,11 @@
-import type { Size, Variant } from './AvatarWrapper'
+import type { Size } from './AvatarWrapper'
 
-export const classBySizeAndVariant: Record<Size, Record<Variant, string>> = {
-  xxsmall: {
-    square: 'w-[2em] h-[2em]',
-    portrait: 'w-[1.333333333em] h-[2em]',
-    landscape: 'w-[2em] h-[1.333333333em]',
-  },
-  xsmall: {
-    square: 'w-[2.5em] h-[2.5em]',
-    portrait: 'w-[1.666666666em] h-[2.5em]',
-    landscape: 'w-[2.5em] h-[1.666666666em]',
-  },
-  small: {
-    square: 'w-[5em] h-[5em]',
-    portrait: 'w-[3.333333333em] h-[5em]',
-    landscape: 'w-[5em] h-[3.333333333em]',
-  },
-  medium: {
-    square: 'w-[7.5em] h-[7.5em]',
-    portrait: 'w-[5em] h-[7.5em]',
-    landscape: 'w-[7.5em] h-[5em]',
-  },
-  large: {
-    square: 'w-[10em] h-[10em]',
-    portrait: 'w-[7.5em] h-[10em]',
-    landscape: 'w-[10em] h-[7.5em]',
-  },
+export const classBySize: Record<Size, string> = {
+  xxsmall: 'w-[2em] h-[2em]',
+  xsmall: 'w-[2.5em] h-[2.5em]',
+  small: 'w-[5em] h-[5em]',
+  medium: 'w-[7.5em] h-[7.5em]',
+  large: 'w-[10em] h-[10em]',
 }
 
 export const clipClassBySize: Record<Size, string> = {
@@ -40,3 +20,20 @@ export const clipClassBySize: Record<Size, string> = {
   large:
     '[clip-path:polygon(0_0,_100%_0,_100%_100%,_1.5em_100%,_0_calc(100%-1.5em))]',
 }
+
+export const avatarLogoClassesBySize: Record<string, Record<Size, string>> = {
+  root: {
+    xxsmall: '',
+    xsmall: '',
+    small: 'pl-[1px] pb-[1px]',
+    medium: 'pl-[2px] pb-[2px]',
+    large: 'pl-[3px] pb-[3px]',
+  },
+  logo: {
+    xxsmall: '',
+    xsmall: '',
+    small: 'w-[5.7px] h-[8px]',
+    medium: 'w-[8.54px] h-[12px]',
+    large: 'w-[7.12px] h-[10px]',
+  },
+}

package/src/Avatar/ImageAvatar/ImageAvatar.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import { Logo } from '@toptal/picasso-logo'
 import { Image } from '@toptal/picasso-image'
 import { twMerge } from '@toptal/picasso-tailwind-merge'
 
@@ -13,34 +12,11 @@ export interface Props extends BaseProps {
   name?: string
 }
 
-type LogoProps = {
-  size: Size
-}
-
-const AvatarLogo = ({ size }: LogoProps) => {
-  const isTooSmall = ['small', 'xsmall', 'xxsmall'].includes(size)
-
-  if (isTooSmall) {
-    return null
-  }
-
-  return (
-    <div
-      className='flex absolute bottom-4 left-4'
-      role='img'
-      aria-label='photo placeholder'
-    >
-      <Logo emblem variant='white' className='w-[1.0625rem] h-6' />
-    </div>
-  )
-}
-
 const ImageAvatar = (props: Props) => {
   const {
     alt,
     className,
     name,
-    size,
     src,
     style,
     'data-testid': dataTestId,
@@ -60,7 +36,6 @@ const ImageAvatar = (props: Props) => {
         data-testid={dataTestId}
         data-private={dataPrivate}
       />
-      <AvatarLogo size={size} />
     </>
   )
 }

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

@@ -0,0 +1,35 @@
+import React from 'react'
+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>
+)
+
+export default Example

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

@@ -20,20 +20,11 @@ const Example = () => (
     </Container>
     <Container inline left={SPACING_4}>
       <Avatar
-        variant='portrait'
-        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
-        variant='landscape'
         size='medium'
         alt='Jacqueline Roque. Pablo Picasso, 1954'
         name='Jacqueline Roque'
         src='./jacqueline-with-flowers-1954-square.jpg'
+        showEmblem
       />
     </Container>
   </div>

package/src/Avatar/story/index.jsx

@@ -34,5 +34,10 @@ page
     'Editable state',
     'base/Avatar'
   )
+  .addExample(
+    'Avatar/story/ToptalLogo.example.tsx',
+    'Variant with Toptal logo',
+    'base/Avatar'
+  )
 
 page.connect(AvatarGroupStory.chapter)

package/src/Avatar/test.tsx

@@ -6,7 +6,7 @@ import type { Props } from './Avatar'
 import { Avatar } from './Avatar'
 
 const renderAvatar = (props: OmitInternalProps<Props>) => {
-  const { alt, name, src, size, onEdit, testIds } = props
+  const { alt, name, src, size, showEmblem = false, onEdit, testIds } = props
 
   return render(
     <Avatar
@@ -14,6 +14,7 @@ const renderAvatar = (props: OmitInternalProps<Props>) => {
       name={name}
       src={src}
       size={size}
+      showEmblem={showEmblem}
       testIds={testIds}
       onEdit={onEdit}
     />
@@ -50,7 +51,11 @@ describe('Avatar', () => {
   })
 
   it('renders with logo', () => {
-    const { getAllByRole } = renderAvatar({ src: 'foobar', size: 'medium' })
+    const { getAllByRole } = renderAvatar({
+      src: 'foobar',
+      size: 'medium',
+      showEmblem: true,
+    })
 
     expect(getAllByRole('img')).toHaveLength(2)
   })

package/src/AvatarGroup/AvatarGroup.tsx

@@ -21,6 +21,8 @@ export interface Props extends Omit<BaseProps, 'data-testid'> {
   limit?: number
   /** Size */
   size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
+  /** Displays Toptal logo */
+  showEmblem?: boolean
   /** data-testid to all parts of component */
   testIds?: {
     container?: string
@@ -35,6 +37,7 @@ const AvatarGroup = ({
   items,
   limit,
   size,
+  showEmblem = false,
 }: Props) => {
   /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
   const isOverLimit = items.length > limit!
@@ -68,6 +71,7 @@ const AvatarGroup = ({
             name={name}
             /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
             size={size!}
+            showEmblem={showEmblem}
             src={src}
             data-testid={avatarTestId}
           />
@@ -75,7 +79,7 @@ const AvatarGroup = ({
       )}
       {isOverLimit ? (
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        <AvatarWrapper size={size!} variant='square'>
+        <AvatarWrapper size={size!}>
           {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
           <TextAvatar data-testid={testIds?.overLimit} size={size!}>
             +{itemsOverLimit}