@toptal/picasso 26.12.0 → 26.13.0

package/AvatarUpload/AvatarUpload.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BaseProps, SizeType } from '@toptal/picasso-shared';
 import { AvatarUploadOptions } from './types';
+import { Status } from '../OutlinedInput';
 export interface Props extends BaseProps {
     /**
      * Set accepted file types. See https://github.com/okonet/attr-accept for more information.
@@ -42,8 +43,14 @@ export interface Props extends BaseProps {
      * (file: File) => FileError | FileError[] | null
      */
     validator?: AvatarUploadOptions['validator'];
+    /** Indicate `AvatarUpload` is in `error` or `default` state */
+    status?: Extract<Status, 'error' | 'default'>;
     /** Indicate whether the selected file is being uploaded */
     uploading?: boolean;
+    /** Indicate whether component has focused state as default */
+    autoFocus?: boolean;
+    autoHover?: boolean;
+    defaultActive?: boolean;
     testIds?: {
         avatar?: string;
         dropzoneSvg?: string;
@@ -51,5 +58,5 @@ export interface Props extends BaseProps {
         loader?: string;
     };
 }
-export declare const AvatarUpload: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export declare const AvatarUpload: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
 export default AvatarUpload;

package/AvatarUpload/AvatarUpload.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, } from 'react';
 import { capitalize, makeStyles } from '@material-ui/core';
 import { useDropzone } from 'react-dropzone';
 import cx from 'classnames';
@@ -10,10 +10,17 @@ import { Upload24 } from '../Icon';
 const useStyles = makeStyles(styles, {
     name: 'PicassoAvatarUpload',
 });
-export const AvatarUpload = forwardRef(function AvatarUpload(props, ref) {
-    const { uploading, size = 'small', onEdit, 'data-testid': dataTestId, testIds, src, alt, 
+export const AvatarUpload = forwardRef(
+// eslint-disable-next-line complexity
+function AvatarUpload(props, ref) {
+    const { autoFocus, autoHover, defaultActive, uploading = false, size = 'small', onEdit, status, 'data-testid': dataTestId, testIds, src, alt, 
     // dropzoneOptions
     accept, minSize, maxSize, disabled, onDrop, onDropAccepted, onDropRejected, validator, } = props;
+    const [{ initiallyFocused, initiallyActive, hovered }, setVisualStates] = useState({
+        hovered: autoHover,
+        initiallyFocused: autoFocus,
+        initiallyActive: defaultActive,
+    });
     // callback overrides to return only one file to the parent component
     const handleDrop = useCallback((acceptedFiles, fileRejections, event) => {
         var _a, _b;
@@ -38,17 +45,27 @@ export const AvatarUpload = forwardRef(function AvatarUpload(props, ref) {
             onEdit(event);
         }
     };
-    const showLoader = Boolean(uploading);
-    const showAvatar = !showLoader && Boolean(src);
-    const showUploadIcon = !showAvatar && !showLoader;
-    const showEditIcon = Boolean(onEdit);
-    // after showing avatar, only way to change the file selection is to use 'onEdit'
-    const disableDropzoneClick = showAvatar && !showEditIcon;
-    const disableDropzoneDragAndKeyboard = showAvatar;
+    const onMouseEnter = () => {
+        setVisualStates(oldState => (Object.assign(Object.assign({}, oldState), { hovered: true })));
+    };
+    const onMouseLeave = () => {
+        setVisualStates(oldState => (Object.assign(Object.assign({}, oldState), { hovered: false })));
+    };
+    const showAvatar = !uploading && Boolean(src);
+    const showUploadIcon = !(showAvatar || uploading);
+    // after showing avatar, only way to change the file selection is to use 'onEdit' by clicking
+    const disableDropzoneClick = (showAvatar && !onEdit) || uploading;
+    const disableKeyboardAndDragging = showAvatar || uploading;
     const classes = useStyles();
-    const loadingIcon = showLoader && (React.createElement(Loader, { className: classes.icon, size: 'small', variant: 'inherit', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.loader }));
-    const uploadIcon = showUploadIcon && (React.createElement(Upload24, { className: classes.icon, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.uploadIcon }));
-    const { getInputProps, getRootProps } = useDropzone({
+    const loadingIcon = uploading && (React.createElement(Loader, { className: cx(classes.icon, {
+            [classes.hovered]: hovered,
+            [classes.error]: status === 'error',
+        }), size: 'small', variant: 'inherit', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.loader }));
+    const uploadIcon = showUploadIcon && (React.createElement(Upload24, { className: cx(classes.icon, {
+            [classes.hovered]: hovered,
+            [classes.error]: status === 'error',
+        }), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.uploadIcon }));
+    const { getInputProps, getRootProps, isDragActive, isFocused, rootRef } = useDropzone({
         accept,
         minSize,
         maxSize,
@@ -59,19 +76,35 @@ export const AvatarUpload = forwardRef(function AvatarUpload(props, ref) {
         onDropRejected: handleDropRejected,
         validator,
         noClick: disableDropzoneClick,
-        noDrag: disableDropzoneDragAndKeyboard,
-        noKeyboard: disableDropzoneDragAndKeyboard,
+        noDrag: disableKeyboardAndDragging,
+        noKeyboard: disableKeyboardAndDragging,
     });
+    useEffect(() => {
+        if (initiallyActive && isDragActive) {
+            setVisualStates(oldState => (Object.assign(Object.assign({}, oldState), { initiallyActive: false })));
+        }
+    }, [initiallyActive, isDragActive]);
+    useEffect(() => {
+        if (initiallyFocused && isFocused) {
+            setVisualStates(oldState => (Object.assign(Object.assign({}, oldState), { initiallyFocused: false })));
+        }
+    }, [initiallyFocused, isFocused]);
+    // exposing the rootRef from react-dropzone to the parent component
+    useImperativeHandle(ref, () => { var _a; return (_a = rootRef.current) !== null && _a !== void 0 ? _a : {}; }, [
+        rootRef,
+    ]);
     return (React.createElement("div", Object.assign({}, getRootProps({
-        ref,
-        className: cx(classes.root, classes[`size${capitalize(size)}`]),
+        className: cx(classes.root, classes[`size${capitalize(size)}`], {
+            [classes.disabled]: disabled,
+            [classes.readonlyAvatar]: showAvatar,
+        }),
         'data-testid': dataTestId,
-    })),
+    }), { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
         React.createElement("input", Object.assign({}, getInputProps())),
-        showAvatar ? (React.createElement(Avatar, { size: size, onEdit: showEditIcon ? handleEdit : undefined, 
+        showAvatar ? (React.createElement(Avatar, { size: size, onEdit: onEdit ? handleEdit : undefined, 
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             src: src, alt: alt, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.avatar, variant: 'square' })) : (React.createElement(React.Fragment, null,
-            React.createElement(DropzoneSvg, { size: size, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.dropzoneSvg }),
+            React.createElement(DropzoneSvg, { disabled: disabled, error: status === 'error', size: size, hovered: hovered, focused: initiallyFocused || isFocused, isDragActive: initiallyActive || isDragActive, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.dropzoneSvg }),
             loadingIcon,
             uploadIcon))));
 });
@@ -79,6 +112,7 @@ AvatarUpload.displayName = 'AvatarUpload';
 AvatarUpload.defaultProps = {
     size: 'small',
     disabled: false,
+    uploading: false,
     maxSize: 104857600,
     minSize: 0,
     accept: 'image/*',

package/AvatarUpload/AvatarUpload.js.map

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

package/AvatarUpload/DropzoneSvg/DropzoneSvg.d.ts

@@ -1,6 +1,11 @@
 import { BaseProps, SizeType } from '@toptal/picasso-shared';
 export interface Props extends BaseProps {
     size?: SizeType<'small' | 'large'>;
+    isDragActive?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    focused?: boolean;
+    hovered?: boolean;
 }
 export declare const DropzoneSvg: {
     (props: Props): JSX.Element;

package/AvatarUpload/DropzoneSvg/DropzoneSvg.js

@@ -33,15 +33,28 @@ const useStyles = makeStyles(styles, {
     name: 'PicassoDropzoneSvg',
 });
 export const DropzoneSvg = (props) => {
-    const { size = 'small', 'data-testid': dataTestId } = props;
+    const { size = 'small', disabled, error, focused, hovered, isDragActive, 'data-testid': dataTestId, } = props;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const shapes = SHAPES[size];
     const classes = useStyles();
     return (React.createElement("div", { className: cx(classes.root, classes[`root${capitalize(size)}`]), "data-testid": dataTestId },
         React.createElement("svg", { className: cx(classes.svg, classes[`svg${capitalize(size)}`]), fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("path", { className: classes.background, fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.backgroundShape }),
-            React.createElement("path", { className: classes.outline, fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.outlineShape, strokeOpacity: '.48', strokeWidth: '3', strokeLinejoin: 'round' }),
-            React.createElement("path", { className: classes.border, fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.bordersShape, strokeDasharray: '3 3' }))));
+            React.createElement("path", { className: cx(classes.background, {
+                    [classes.dragActive]: isDragActive,
+                    [classes.disabled]: disabled,
+                    [classes.error]: error,
+                    [classes.focused]: focused,
+                    [classes.hovered]: hovered,
+                }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.backgroundShape }),
+            React.createElement("path", { className: cx(classes.outline, {
+                    [classes.focused]: focused,
+                    [classes.error]: error,
+                }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.outlineShape, strokeOpacity: '.48', strokeWidth: '3', strokeLinejoin: 'round' }),
+            React.createElement("path", { className: cx(classes.border, {
+                    [classes.error]: error,
+                    [classes.focused]: focused,
+                    [classes.hovered]: hovered,
+                }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.bordersShape, strokeDasharray: '3 3' }))));
 };
 DropzoneSvg.displayName = 'DropzoneSvg';
 DropzoneSvg.defaultProps = {

package/AvatarUpload/DropzoneSvg/DropzoneSvg.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropzoneSvg.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/DropzoneSvg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAS,MAAM,mBAAmB,CAAA;AAEjE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9E;;GAEG;AACH,MAAM,cAAc,GAAG,EAAE,CAAA;AACzB,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE;QACL,UAAU,EAAE,CAAC,GAAG,cAAc;QAC9B,UAAU,EAAE,CAAC,GAAG,cAAc;KAC/B;IACD,KAAK,EAAE;QACL,UAAU,EAAE,EAAE,GAAG,cAAc;QAC/B,UAAU,EAAE,GAAG,GAAG,cAAc;KACjC;CACO,CAAA;AAEV,MAAM,MAAM,GAAG;IACb,KAAK,EAAE;QACL,eAAe,EAAE,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC;QACnD,YAAY,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC7C,YAAY,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;KAC9C;IACD,KAAK,EAAE;QACL,eAAe,EAAE,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC;QACnD,YAAY,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC7C,YAAY,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;KAC9C;CACO,CAAA;AAMV,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;IAC1C,MAAM,EAAE,IAAI,GAAG,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAE3D,oEAAoE;IACpE,MAAM,MAAM,GAAG,MAAM,CAAC,IAAK,CAAC,CAAA;IAE5B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,iBAClD,UAAU;QAEvB,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,eAAe,GACzB;YACF,8BACE,SAAS,EAAE,OAAO,CAAC,OAAO,EAC1B,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,MAAM,CAAC,YAAY,EACtB,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,GAAG,EACf,cAAc,EAAC,OAAO,GACtB;YACF,8BACE,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,MAAM,CAAC,YAAY,EACtB,eAAe,EAAC,KAAK,GACrB,CACE,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,WAAW,CAAC,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO;CACd,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"DropzoneSvg.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/DropzoneSvg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAS,MAAM,mBAAmB,CAAA;AAEjE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9E;;GAEG;AACH,MAAM,cAAc,GAAG,EAAE,CAAA;AACzB,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE;QACL,UAAU,EAAE,CAAC,GAAG,cAAc;QAC9B,UAAU,EAAE,CAAC,GAAG,cAAc;KAC/B;IACD,KAAK,EAAE;QACL,UAAU,EAAE,EAAE,GAAG,cAAc;QAC/B,UAAU,EAAE,GAAG,GAAG,cAAc;KACjC;CACO,CAAA;AAEV,MAAM,MAAM,GAAG;IACb,KAAK,EAAE;QACL,eAAe,EAAE,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC;QACnD,YAAY,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC7C,YAAY,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;KAC9C;IACD,KAAK,EAAE;QACL,eAAe,EAAE,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC;QACnD,YAAY,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC7C,YAAY,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;KAC9C;CACO,CAAA;AAWV,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;IAC1C,MAAM,EACJ,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAY,EACZ,aAAa,EAAE,UAAU,GAC1B,GAAG,KAAK,CAAA;IAET,oEAAoE;IACpE,MAAM,MAAM,GAAG,MAAM,CAAC,IAAK,CAAC,CAAA;IAE5B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,iBAClD,UAAU;QAEvB,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,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE;oBAChC,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,YAAY;oBAClC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ;oBAC5B,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK;oBACtB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;oBAC1B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;iBAC3B,CAAC,EACF,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,MAAM,CAAC,eAAe,GACzB;YACF,8BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE;oBAC7B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;oBAC1B,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK;iBACvB,CAAC,EACF,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,MAAM,CAAC,YAAY,EACtB,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,GAAG,EACf,cAAc,EAAC,OAAO,GACtB;YACF,8BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE;oBAC5B,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK;oBACtB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;oBAC1B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;iBAC3B,CAAC,EACF,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,MAAM,CAAC,YAAY,EACtB,eAAe,EAAC,KAAK,GACrB,CACE,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,WAAW,CAAC,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO;CACd,CAAA;AAED,eAAe,WAAW,CAAA"}

package/AvatarUpload/DropzoneSvg/styles.d.ts

@@ -1,3 +1,3 @@
 import { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "background" | "border" | "outline" | "root" | "svg" | "rootSmall" | "rootLarge" | "svgSmall" | "svgLarge">;
+declare const _default: ({ palette, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "background" | "border" | "outline" | "disabled" | "error" | "root" | "svg" | "focused" | "hovered" | "rootSmall" | "rootLarge" | "dragActive" | "svgSmall" | "svgLarge">;
 export default _default;

package/AvatarUpload/DropzoneSvg/styles.js

@@ -1,40 +1,77 @@
 import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, transitions }) => createStyles({
-    root: {
-        position: 'relative',
-        background: 'transparent',
-    },
-    rootSmall: {
-        width: '80px',
-        height: '80px',
-    },
-    rootLarge: {
-        width: '160px',
-        height: '160px',
-    },
-    svg: {
-        margin: '-3px', // to center the svg
-    },
-    svgSmall: {
-        width: '86px',
-        height: '86px', // 6px for the outline stroke
-    },
-    svgLarge: {
-        width: '166px',
-        height: '166px', // 6px for the outline stroke
-    },
-    background: {
-        fill: palette.blue.lighter,
-        transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-        transitionProperty: 'fill',
-    },
-    border: {
-        stroke: palette.blue.main,
-        transition: `stroke ${transitions.duration.short}`,
-    },
-    outline: {
-        display: 'none',
-        stroke: palette.blue.main,
-    },
-});
+import { alpha } from '@toptal/picasso-shared';
+export default ({ palette, transitions }) => {
+    const dragActiveColor = alpha(palette.blue.main, 0.24);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const hoverBackgroundColor = alpha(palette.blue.lighter, 0.84);
+    const hoverBorderColor = alpha(palette.blue.main, 0.84);
+    return createStyles({
+        root: {
+            pointerEvents: 'unset',
+            position: 'relative',
+            background: 'transparent',
+        },
+        rootSmall: {
+            width: '80px',
+            height: '80px',
+        },
+        rootLarge: {
+            width: '160px',
+            height: '160px',
+        },
+        svg: {
+            margin: '-3px', // to center the svg
+        },
+        svgSmall: {
+            width: '86px',
+            height: '86px', // 6px for the outline stroke
+        },
+        svgLarge: {
+            width: '166px',
+            height: '166px', // 6px for the outline stroke
+        },
+        background: {
+            fill: palette.blue.lighter,
+            transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
+            transitionProperty: 'fill',
+            '&$hovered': {
+                fill: hoverBackgroundColor,
+            },
+            '&$dragActive,&:active': {
+                fill: dragActiveColor,
+            },
+            '&$disabled': {
+                fill: palette.grey.lighter,
+                '&$hovered': {
+                    fill: palette.grey.light2,
+                },
+            },
+        },
+        border: {
+            stroke: palette.blue.main,
+            transition: `stroke ${transitions.duration.short}`,
+            '&$hovered': {
+                stroke: hoverBorderColor,
+            },
+            '&$error': {
+                stroke: palette.red.main,
+            },
+        },
+        outline: {
+            display: 'none',
+            stroke: palette.blue.main,
+            '&$focused:not($dragActive)': {
+                display: 'initial',
+            },
+            '&$error': {
+                stroke: palette.red.main,
+            },
+        },
+        dragActive: {},
+        disabled: {},
+        error: {},
+        focused: {},
+        hovered: {},
+    });
+};
 //# sourceMappingURL=styles.js.map

package/AvatarUpload/DropzoneSvg/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE,CACjD,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,aAAa;KAC1B;IACD,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,SAAS,EAAE;QACT,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;KAChB;IAED,GAAG,EAAE;QACH,MAAM,EAAE,MAAM,EAAE,oBAAoB;KACrC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM,EAAE,6BAA6B;KAC9C;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO,EAAE,6BAA6B;KAC/C;IAED,UAAU,EAAE;QACV,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;QAC1B,UAAU,EAAE,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE;QAC/E,kBAAkB,EAAE,MAAM;KAC3B;IACD,MAAM,EAAE;QACN,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACzB,UAAU,EAAE,UAAU,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE;KACnD;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KAC1B;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE9C,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE;IACjD,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IACtD,oEAAoE;IACpE,MAAM,oBAAoB,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAQ,EAAE,IAAI,CAAC,CAAA;IAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAEvD,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,aAAa,EAAE,OAAO;YACtB,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,aAAa;SAC1B;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;QAED,GAAG,EAAE;YACH,MAAM,EAAE,MAAM,EAAE,oBAAoB;SACrC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM,EAAE,6BAA6B;SAC9C;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO,EAAE,6BAA6B;SAC/C;QAED,UAAU,EAAE;YACV,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YAC1B,UAAU,EAAE,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE;YAC/E,kBAAkB,EAAE,MAAM;YAE1B,WAAW,EAAE;gBACX,IAAI,EAAE,oBAAoB;aAC3B;YAED,uBAAuB,EAAE;gBACvB,IAAI,EAAE,eAAe;aACtB;YAED,YAAY,EAAE;gBACZ,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;gBAC1B,WAAW,EAAE;oBACX,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;iBAC1B;aACF;SACF;QACD,MAAM,EAAE;YACN,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACzB,UAAU,EAAE,UAAU,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE;YAElD,WAAW,EAAE;gBACX,MAAM,EAAE,gBAAgB;aACzB;YAED,SAAS,EAAE;gBACT,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;aACzB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAEzB,4BAA4B,EAAE;gBAC5B,OAAO,EAAE,SAAS;aACnB;YAED,SAAS,EAAE;gBACT,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;aACzB;SACF;QAED,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,EAAE;QACT,OAAO,EAAE,EAAE;QACX,OAAO,EAAE,EAAE;KACZ,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/AvatarUpload/styles.d.ts

@@ -1,3 +1,3 @@
 import { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "icon" | "root" | "sizeSmall" | "sizeLarge">;
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "icon" | "disabled" | "error" | "root" | "sizeSmall" | "sizeLarge" | "hovered" | "readonlyAvatar">;
 export default _default;

package/AvatarUpload/styles.js

@@ -1,24 +1,49 @@
 import { createStyles } from '@material-ui/core/styles';
-export default ({ palette }) => createStyles({
-    root: {
-        position: 'relative',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        color: palette.blue.main,
-        outline: 'none',
-    },
-    sizeSmall: {
-        width: '5rem',
-        height: '5rem',
-    },
-    sizeLarge: {
-        width: '10rem',
-        height: '10rem',
-    },
-    icon: {
-        position: 'absolute',
-        cursor: 'pointer',
-    },
-});
+import { alpha } from '@toptal/picasso-shared';
+export default ({ palette }) => {
+    const iconHoverColor = alpha(palette.blue.main, 0.84);
+    const iconHoverErrorColor = alpha(palette.red.main, 0.84);
+    return createStyles({
+        root: {
+            position: 'relative',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: palette.blue.main,
+            outline: 'none',
+            cursor: 'pointer',
+            '&$disabled': {
+                cursor: 'no-drop',
+            },
+            '&$readonlyAvatar': {
+                cursor: 'default',
+            },
+        },
+        sizeSmall: {
+            width: '5rem',
+            height: '5rem',
+        },
+        sizeLarge: {
+            width: '10rem',
+            height: '10rem',
+        },
+        icon: {
+            position: 'absolute',
+            pointerEvents: 'none',
+            '&$error': {
+                color: palette.red.main,
+            },
+            '&$hovered': {
+                color: iconHoverColor,
+                '&$error': {
+                    color: iconHoverErrorColor,
+                },
+            },
+        },
+        error: {},
+        disabled: {},
+        hovered: {},
+        readonlyAvatar: {},
+    });
+};
 //# sourceMappingURL=styles.js.map

package/AvatarUpload/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,OAAO,EAAE,MAAM;KAChB;IAED,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IAED,SAAS,EAAE;QACT,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;KAChB;IAED,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE9C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACpC,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IACrD,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAEzD,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACxB,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,SAAS;YAEjB,YAAY,EAAE;gBACZ,MAAM,EAAE,SAAS;aAClB;YAED,kBAAkB,EAAE;gBAClB,MAAM,EAAE,SAAS;aAClB;SACF;QAED,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QAED,SAAS,EAAE;YACT,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;QAED,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,aAAa,EAAE,MAAM;YAErB,SAAS,EAAE;gBACT,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;aACxB;YAED,WAAW,EAAE;gBACX,KAAK,EAAE,cAAc;gBAErB,SAAS,EAAE;oBACT,KAAK,EAAE,mBAAmB;iBAC3B;aACF;SACF;QAED,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,EAAE;KACnB,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso",
-  "version": "26.12.0",
+  "version": "26.13.0",
   "description": "Toptal UI components library",
   "publishConfig": {
     "access": "public",