@atlaskit/media-avatar-picker 24.6.15 → 24.7.0

package/dist/esm/image-navigator/index.js

@@ -28,10 +28,11 @@ import { containerStyles, sliderContainerStyles, fileInputStyles, imageUploaderS
 import { uploadPlaceholder, errorIcon } from './images';
 import { fileSizeMb } from '../util';
 import { ERROR, MAX_SIZE_MB, ACCEPT } from '../avatar-picker-dialog';
-import { Viewport, renderViewport } from '../viewport';
+import { Viewport } from '../viewport';
 import { Slider } from './slider';
 import { CONTAINER_SIZE, CONTAINER_PADDING } from '../avatar-picker-dialog/layout-const';
 import { DragZone } from './dragZone';
+import { exportCroppedImage } from './exportCroppedImage';
 export var viewport = new Viewport(CONTAINER_SIZE, CONTAINER_SIZE, CONTAINER_PADDING);
 var defaultState = {
   imagePos: new Vector2(CONTAINER_PADDING, CONTAINER_PADDING),
@@ -129,15 +130,7 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
       _this.exportCrop();
     });
     _defineProperty(_assertThisInitialized(_this), "exportCroppedImage", function (outputSize) {
-      var _assertThisInitialize = _assertThisInitialized(_this),
-        imageElement = _assertThisInitialize.imageElement;
-      if (imageElement) {
-        var canvas = renderViewport(_this.state.viewport, imageElement, document.createElement('canvas'), outputSize);
-        if (canvas) {
-          return canvas.toDataURL();
-        }
-      }
-      return '';
+      return exportCroppedImage(_this.state.viewport, _this.imageElement, outputSize);
     });
     // Trick to have a nice <input /> appearance
     _defineProperty(_assertThisInitialized(_this), "onUploadButtonClick", function (e) {
@@ -329,7 +322,9 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
           isDisabled: isLoading,
           testId: "upload-button"
         }, jsx(FormattedMessage, messages.upload_photo), jsx("input", {
+          "data-testid": "image-navigator-input-file"
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          ,
           css: fileInputStyles,
           type: "file",
           id: "image-input",

package/dist/types/avatar-picker-dialog/avatar-picker-dialog-error-boundary.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+import { type AvatarPickerDialogProps } from './types';
+export type AvatarPickerDialogErrorBoundaryProps = AvatarPickerDialogProps & {
+    placeholder?: ReactNode;
+};
+export default function AvatarPickerDialogErrorBoundary(props: AvatarPickerDialogErrorBoundaryProps): JSX.Element;

package/dist/types/avatar-picker-dialog/avatar-picker-dialog-loader.d.ts

@@ -1,19 +1,4 @@
-import React from 'react';
-import { type ReactNode } from 'react';
-import { type default as AvatarPickerDialog } from '.';
-import { type AvatarPickerDialogProps } from './types';
-export interface AsyncAvatarPickerDialogState {
-    AvatarPickerDialog?: typeof AvatarPickerDialog;
-}
-export type AsyncAvatarPickerDialogProps = AvatarPickerDialogProps & {
-    placeholder?: ReactNode;
-};
-export default class AsyncAvatarPickerDialog extends React.PureComponent<AsyncAvatarPickerDialogProps, AsyncAvatarPickerDialogState> {
-    static displayName: string;
-    static AvatarPickerDialog?: typeof AvatarPickerDialog;
-    state: {
-        AvatarPickerDialog: React.FC<AvatarPickerDialogProps> | undefined;
-    };
-    UNSAFE_componentWillMount(): Promise<void>;
-    render(): {};
-}
+/// <reference types="react" />
+import { type AvatarPickerDialogErrorBoundaryProps } from './avatar-picker-dialog-error-boundary';
+export type AsyncAvatarPickerDialogProps = AvatarPickerDialogErrorBoundaryProps;
+export default function AsyncAvatarPickerDialog(props: AsyncAvatarPickerDialogProps): JSX.Element;

package/dist/types/avatar-picker-dialog/custom-spinner.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CustomSpinner: () => JSX.Element;

package/dist/types/image-navigator/exportCroppedImage.d.ts

@@ -0,0 +1,2 @@
+import { type Viewport } from '../viewport';
+export declare const exportCroppedImage: (viewport: Viewport, imageElement?: HTMLImageElement, outputSize?: number) => string;

package/dist/types-ts4.5/avatar-picker-dialog/avatar-picker-dialog-error-boundary.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+import { type AvatarPickerDialogProps } from './types';
+export type AvatarPickerDialogErrorBoundaryProps = AvatarPickerDialogProps & {
+    placeholder?: ReactNode;
+};
+export default function AvatarPickerDialogErrorBoundary(props: AvatarPickerDialogErrorBoundaryProps): JSX.Element;

package/dist/types-ts4.5/avatar-picker-dialog/avatar-picker-dialog-loader.d.ts

@@ -1,19 +1,4 @@
-import React from 'react';
-import { type ReactNode } from 'react';
-import { type default as AvatarPickerDialog } from '.';
-import { type AvatarPickerDialogProps } from './types';
-export interface AsyncAvatarPickerDialogState {
-    AvatarPickerDialog?: typeof AvatarPickerDialog;
-}
-export type AsyncAvatarPickerDialogProps = AvatarPickerDialogProps & {
-    placeholder?: ReactNode;
-};
-export default class AsyncAvatarPickerDialog extends React.PureComponent<AsyncAvatarPickerDialogProps, AsyncAvatarPickerDialogState> {
-    static displayName: string;
-    static AvatarPickerDialog?: typeof AvatarPickerDialog;
-    state: {
-        AvatarPickerDialog: React.FC<AvatarPickerDialogProps> | undefined;
-    };
-    UNSAFE_componentWillMount(): Promise<void>;
-    render(): {};
-}
+/// <reference types="react" />
+import { type AvatarPickerDialogErrorBoundaryProps } from './avatar-picker-dialog-error-boundary';
+export type AsyncAvatarPickerDialogProps = AvatarPickerDialogErrorBoundaryProps;
+export default function AsyncAvatarPickerDialog(props: AsyncAvatarPickerDialogProps): JSX.Element;

package/dist/types-ts4.5/avatar-picker-dialog/custom-spinner.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CustomSpinner: () => JSX.Element;

package/dist/types-ts4.5/image-navigator/exportCroppedImage.d.ts

@@ -0,0 +1,2 @@
+import { type Viewport } from '../viewport';
+export declare const exportCroppedImage: (viewport: Viewport, imageElement?: HTMLImageElement, outputSize?: number) => string;

package/example-helpers/index.ts

@@ -1,16 +1,17 @@
 import { type Avatar } from '../src/avatar-list';
+import samples from './samples';
 
-function generateAvatarIds(start: number, count: number): Array<number> {
+function generateAvatarIds(count = samples.length): Array<number> {
 	const result: Array<number> = [];
 	for (let i = 0; i < count; ++i) {
-		result[i] = start + i;
+		result[i] = (i + 1) % samples.length;
 	}
 	return result;
 }
 
-export function generateAvatars(count: number): Array<Avatar> {
-	return generateAvatarIds(18831, count).map((id) => ({
-		dataURI: `https://jdog.jira-dev.com/secure/viewavatar?avatarId=${id}&avatarType=project`,
+export function generateAvatars(count?: number): Array<Avatar> {
+	return generateAvatarIds(count).map((id) => ({
+		dataURI: samples[id],
 		name: id.toString(),
 	}));
 }

package/example-helpers/samples/avatar-1.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_code</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_code">
+            <g id="code">
+                <g>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#FF5630" xlink:href="#path-1"></use>
+                    <path d="M130.3,45.7 C128.5,39.5 131.7,33.7 128.2,28.5 L36.2,28.5 C32.5,28.5 29.5,31.5 29.5,35.2 L29.5,45.7 L130.3,45.7 Z" id="Shape" fill="#EBF2F9" fill-rule="nonzero" ></path>
+                    <circle id="Oval" fill="#FF5630" fill-rule="nonzero"  cx="41.6" cy="37.3" r="3"></circle>
+                    <circle id="Oval" fill="#FFC400" fill-rule="nonzero"  cx="50.2" cy="37.3" r="3"></circle>
+                    <circle id="Oval" fill="#00B8D9" fill-rule="nonzero"  cx="58.7" cy="37.3" r="3"></circle>
+                    <path d="M128.9,128 C128.9,128 130.9,51.3 129.1,45.4 L49.7,45.4 L47.7,45.4 L40.5,45.4 L38.5,45.4 L31.5,45.4 L29.5,45.4 L29.5,133.3 C36.5,138 128.9,128 128.9,128 Z" id="Shape" fill="#253858" fill-rule="nonzero" ></path>
+                    <path d="M78.9,68.2 L42.6,68.2 C40.4,68.2 38.6,66.4 38.6,64.2 L38.6,64.2 C38.6,62 40.4,60.2 42.6,60.2 L79,60.2 C81.2,60.2 83,62 83,64.2 L83,64.2 C82.9,66.4 81.1,68.2 78.9,68.2 Z" id="Shape" fill="#EBF2F9" fill-rule="nonzero" ></path>
+                    <path d="M96.4,68.2 L92.7,68.2 C90.5,68.2 88.7,66.4 88.7,64.2 L88.7,64.2 C88.7,62 90.5,60.2 92.7,60.2 L96.4,60.2 C98.6,60.2 100.4,62 100.4,64.2 L100.4,64.2 C100.4,66.4 98.6,68.2 96.4,68.2 Z" id="Shape" fill="#4C9AFF" fill-rule="nonzero" ></path>
+                    <path d="M54.8,85.7 L42.6,85.7 C40.4,85.7 38.6,83.9 38.6,81.7 L38.6,81.7 C38.6,79.5 40.4,77.7 42.6,77.7 L54.8,77.7 C57,77.7 58.8,79.5 58.8,81.7 L58.8,81.7 C58.7,83.9 56.9,85.7 54.8,85.7 Z" id="Shape" fill="#FF5630" fill-rule="nonzero" ></path>
+                    <path d="M66.5,103.2 L42.5,103.2 C40.3,103.2 38.5,101.4 38.5,99.2 L38.5,99.2 C38.5,97 40.3,95.2 42.5,95.2 L66.5,95.2 C68.7,95.2 70.5,97 70.5,99.2 L70.5,99.2 C70.5,101.4 68.7,103.2 66.5,103.2 Z" id="Shape" fill="#EBF2F9" fill-rule="nonzero" ></path>
+                    <path d="M83.1,103.2 L80.5,103.2 C78.3,103.2 76.5,101.4 76.5,99.2 L76.5,99.2 C76.5,97 78.3,95.2 80.5,95.2 L83.1,95.2 C85.3,95.2 87.1,97 87.1,99.2 L87.1,99.2 C87.1,101.4 85.3,103.2 83.1,103.2 Z" id="Shape" fill="#FF4E4A" fill-rule="nonzero" ></path>
+                    <path d="M105.4,85.7 L68.7,85.7 C66.5,85.7 64.7,83.9 64.7,81.7 L64.7,81.7 C64.7,79.5 66.5,77.7 68.7,77.7 L105.3,77.7 C107.5,77.7 109.3,79.5 109.3,81.7 L109.3,81.7 C109.4,83.9 107.6,85.7 105.4,85.7 Z" id="Shape" fill="#00B8D9" fill-rule="nonzero" ></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-10.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_nature</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_nature">
+            <g id="Nature">
+                <g>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#2684FF" xlink:href="#path-1"></use>
+                    <path d="M59.3,53 C63.7,51.2 66.8,47 66.8,42 C66.8,35.4 61.5,30.1 54.9,30.1 C52,30.1 49.4,31.1 47.4,32.8 L59.3,53 Z" id="Shape" fill="#FFC400" fill-rule="nonzero" ></path>
+                    <path d="M64.1,60.7 L61,63.8 C60.2,64.6 58.9,64.6 58.1,63.8 L54.8,60.5 C54,59.7 52.7,59.7 51.9,60.5 L48.2,64.2 C47.4,65 46.1,65 45.3,64.2 L42,60.9 C41.2,60.1 39.9,60.1 39.1,60.9 L36.1,63.9 C35.3,64.7 34,64.7 33.2,63.9 L30.2,61 C29.4,60.2 28.1,60.2 27.3,61 L24.5,63.8 C23.7,64.6 22.4,64.6 21.6,63.8 L18.4,60.6 C18.2,60.4 18,60.3 17.8,60.2 L-12.6,108.4 C-4.4,132.9 2.3,134.8 29.3,135.9 L63.8,127.9 L66.6,127.9 C78.1,127.4 88.8,123.9 98,118.1 L64.1,60.7 Z" id="Shape" fill="#DEEBFF" fill-rule="nonzero" ></path>
+                    <path d="M78.2,67.1 L51.1,112.8 L51.1,126.7 C55.2,127.5 59.5,128 63.9,128 C79.7,128 94.1,122.3 105.2,112.8 L78.2,67.1 Z" id="Shape" fill="#39A9E2" fill-rule="nonzero" opacity="0.2" ></path>
+                    <path d="M122.3,86.1 L111.9,68.5 C111.4,68.6 111,68.7 110.7,69.1 L107,72.8 C106.2,73.6 104.9,73.6 104.1,72.8 L100.8,69.5 C100,68.7 98.7,68.7 97.9,69.5 L94.9,72.5 C94.1,73.3 92.8,73.3 92,72.5 L89,69.5 C88.2,68.7 86.9,68.7 86.1,69.5 L83.3,72.3 C82.5,73.1 81.2,73.1 80.4,72.3 L77.2,69.1 L46.6,120.3 C45.2,122.6 44,130.9 46.6,131.5 C50.5,132.4 57.3,131.3 61.5,131.5 L64,130.5 L66.5,130.5 C91.5,129.5 135.5,143 139,115 C139.143123,113.855013 122.9,87.1 122.3,86.1 Z" id="Shape" fill="#B3D4FF" fill-rule="nonzero" ></path>
+                    <path d="M72.3,22.2 L29.2,22.2 C24.9,22.2 21.4,25.7 21.4,30 C21.4,34.3 24.9,37.8 29.2,37.8 L72.3,37.8 C76.6,37.8 80.1,34.3 80.1,30 C80.1,25.7 76.6,22.2 72.3,22.2 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" opacity="0.4" ></path>
+                    <path d="M64.2,60.8 L61.1,63.9 C60.3,64.7 59,64.7 58.2,63.9 L54.9,60.6 C54.1,59.8 52.8,59.8 52,60.6 L48.3,64.3 C47.5,65.1 46.2,65.1 45.4,64.3 L42,60.9 C41.7,60.6 41.2,60.4 40.8,60.3 L40.8,131.5 C47.2,134 89.1,123.9 98.2,118.1 L64.2,60.8 Z" id="Shape" fill="#B3D4FF" fill-rule="nonzero" ></path>
+                    <path d="M98.1,45.1 C96.6,42.5 92.8,42.5 91.2,45.1 L76.6,69.7 C76.8,69.8 77,69.9 77.2,70.1 L80.4,73.3 C81.2,74.1 82.5,74.1 83.3,73.3 L86.1,70.5 C86.9,69.7 88.2,69.7 89,70.5 L91.9,73.4 C92.7,74.2 94,74.2 94.8,73.4 L97.8,70.4 C98.6,69.6 99.9,69.6 100.7,70.4 L104,73.7 C104.8,74.5 106.1,74.5 106.9,73.7 L110.6,70 C111.1,69.5 111.8,69.3 112.5,69.4 L98.1,45.1 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M36.2,29.1 L17.3,61.1 C17.7,61.2 18.1,61.3 18.4,61.6 L21.6,64.8 C22.4,65.6 23.7,65.6 24.5,64.8 L27.3,62 C28.1,61.2 29.4,61.2 30.2,62 L33.1,64.9 C33.9,65.7 35.2,65.7 36,64.9 L39,61.9 C39.8,61.1 41.1,61.1 41.9,61.9 L45.2,65.2 C46,66 47.3,66 48.1,65.2 L51.8,61.5 C52.6,60.7 53.9,60.7 54.7,61.5 L58,64.8 C58.8,65.6 60.1,65.6 60.9,64.8 L64.1,61.6 L64.2,61.5 L44.6,28.1 C42.3,25.6 38.1,26 36.2,29.1 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-11.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_yeti</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_yeti">
+            <g id="yeti">
+                <g>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#2684FF" xlink:href="#path-1"></use>
+                    <circle id="Oval" fill="#FFBDAE" fill-rule="nonzero"  cx="25.367" cy="58.293" r="7.001"></circle>
+                    <circle id="Oval" fill="#FFBDAE" fill-rule="nonzero"  cx="99.974" cy="58.293" r="7.001"></circle>
+                    <path d="M62.67,10.657 C42.068,10.657 25.366,27.359 25.366,47.961 L25.366,57.28 L25.366,59.305 L25.366,68.624 L25.366,85.264 L25.366,94.583 L25.366,96.608 L25.366,105.927 L99.974,105.927 L99.974,96.608 L99.974,94.583 L99.974,85.264 L99.974,68.624 L99.974,59.305 L99.974,57.28 L99.974,47.961 C99.974,27.359 83.273,10.657 62.67,10.657 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M75.894,28.875 L49.446,28.875 C40.368,28.875 32.94,36.303 32.94,45.381 L32.94,47.043 L32.94,51.169 L32.94,55.445 C32.94,71.864 46.25,85.175 62.67,85.175 C79.089,85.175 92.4,71.865 92.4,55.445 L92.4,51.169 L92.4,47.043 L92.4,45.38 C92.4,36.302 84.972,28.875 75.894,28.875 Z" id="Shape" fill="#FFBDAD" fill-rule="nonzero" ></path>
+                    <path d="M50.532,72.734 C49.741,69.592 47.339,66.105 47.339,66.105 L47.324,66.111 C46.996,65.739 46.531,65.494 45.996,65.494 C45.008,65.494 44.207,66.295 44.207,67.283 C44.207,67.283 43.791,71.652 44.623,74.149 C45.456,76.645 51.13,75.108 50.532,72.734 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M73.735,72.734 C74.526,69.592 76.928,66.105 76.928,66.105 L76.943,66.111 C77.271,65.739 77.736,65.494 78.271,65.494 C79.259,65.494 80.06,66.295 80.06,67.283 C80.06,67.283 80.476,71.652 79.644,74.149 C78.812,76.645 73.138,75.108 73.735,72.734 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M46.17,45.6 L46.17,49.876 C46.17,51.999 47.891,53.72 50.014,53.72 C52.137,53.72 53.858,51.999 53.858,49.876 L53.858,45.6 L46.17,45.6 Z" id="Shape" fill="#403294" fill-rule="nonzero" ></path>
+                    <path d="M72.064,45.6 L72.064,49.876 C72.064,51.999 73.785,53.72 75.908,53.72 C78.031,53.72 79.752,51.999 79.752,49.876 L79.752,45.6 L72.064,45.6 Z" id="Shape" fill="#403294" fill-rule="nonzero" ></path>
+                    <path d="M68.663,63.952 L57.616,63.952 C56.09,63.952 54.842,62.704 54.842,61.178 L54.842,59.153 C54.842,57.627 56.09,56.379 57.616,56.379 L68.663,56.379 C70.189,56.379 71.437,57.627 71.437,59.153 L71.437,61.178 C71.437,62.704 70.189,63.952 68.663,63.952 Z" id="Shape" fill="#FF4E4A" fill-rule="nonzero" ></path>
+                    <path d="M62.67,68.196 C54.165,68.196 46.54,71.173 41.123,75.889 C46.54,81.597 54.18,85.175 62.67,85.175 L62.671,85.175 C71.162,85.175 78.801,81.597 84.218,75.889 C78.801,71.172 71.175,68.196 62.67,68.196 Z" id="Shape" fill="#FF8F73" fill-rule="nonzero" ></path>
+                    <path d="M81.837,48.741 L43.503,48.741 C41.665,48.741 40.161,47.237 40.161,45.399 L40.161,42.959 C40.161,41.121 41.665,39.617 43.503,39.617 L81.837,39.617 C83.675,39.617 85.179,41.121 85.179,42.959 L85.179,45.399 C85.18,47.237 83.676,48.741 81.837,48.741 Z" id="Shape" fill="#FF8F73" fill-rule="nonzero" ></path>
+                    <path d="M86.63,10.332 L86.616,10.334 C85.03,13.339 75.424,15.41 77.635,12.569 C80.479,8.914 79.29,1.627 76.797,4.903 C72.565,10.464 62.67,10.645 62.67,10.645 L66.281,17.88 C66.281,17.88 82.46,20.995 85.838,18.723 C89.305,16.392 88.424,11.976 87.557,10.3 C86.978,9.273 86.63,10.332 86.63,10.332 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M113,107.5 C113,107.5 103.765,86.772 92,86.772 L74.946,86.772 L51.355,86.772 L37.87,86.772 C26.687,86.772 20,92 15.509,105.649 C11.018,119.298 11.4389177,128.73953 12.5,130.5 C13.5610823,132.26047 24.7236645,127.248142 64.016,127.94 C100.575463,128.583737 109.416343,141.063937 114,132.5 C118.583657,123.936063 113,107.5 113,107.5 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M63.849,129.94 C76.165,129.94 87.653,134.44 97.411,128.408 L97.411,115.28 C97.411,104.759 88.803,96.151 78.283,96.151 L47.058,96.151 C36.537,96.151 27.93,104.759 27.93,115.28 L27.93,128.893 C38.167,135.863 50.529,129.94 63.849,129.94 Z" id="Shape" fill="#FFBDAE" fill-rule="nonzero" ></path>
+                    <circle id="Oval" fill="#FF8F73" fill-rule="nonzero"  cx="48.612" cy="117.676" r="4.23"></circle>
+                    <circle id="Oval" fill="#FF8F73" fill-rule="nonzero"  cx="76.482" cy="117.676" r="4.23"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-12.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_notes</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_notes">
+            <g id="notes">
+                <g>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#00C7E6" xlink:href="#path-1"></use>
+                    <path d="M91.1,18 L36.6,18 C31.7,18 27.8,22 27.8,26.8 L27.8,99.5 C27.8,104.4 31.8,108.3 36.6,108.3 L91,108.3 C95.9,108.3 99.8,104.3 99.8,99.5 L99.8,26.9 C99.9,22 95.9,18 91.1,18 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M89.1,40.6 L43.6,40.6 C42,40.6 40.7,39.3 40.7,37.7 L40.7,37.7 C40.7,36.1 42,34.8 43.6,34.8 L89.1,34.8 C90.7,34.8 92,36.1 92,37.7 L92,37.7 C92,39.3 90.7,40.6 89.1,40.6 Z" id="Shape" fill="#D3E0EA" fill-rule="nonzero" ></path>
+                    <path d="M89.1,53.5 L43.6,53.5 C42,53.5 40.7,52.2 40.7,50.6 L40.7,50.6 C40.7,49 42,47.7 43.6,47.7 L89.1,47.7 C90.7,47.7 92,49 92,50.6 L92,50.6 C92,52.2 90.7,53.5 89.1,53.5 Z" id="Shape" fill="#D3E0EA" fill-rule="nonzero" ></path>
+                    <path d="M61.1,66.4 L43.6,66.4 C42,66.4 40.7,65.1 40.7,63.5 L40.7,63.5 C40.7,61.9 42,60.6 43.6,60.6 L61.1,60.6 C62.7,60.6 64,61.9 64,63.5 L64,63.5 C64,65.1 62.7,66.4 61.1,66.4 Z" id="Shape" fill="#D3E0EA" fill-rule="nonzero" ></path>
+                    <path d="M32.6,92.4 L23.7,92.4 C22.1,92.4 20.8,91.1 20.8,89.5 L20.8,89.5 C20.8,87.9 22.1,86.6 23.7,86.6 L32.6,86.6 C34.2,86.6 35.5,87.9 35.5,89.5 L35.5,89.5 C35.5,91.1 34.2,92.4 32.6,92.4 Z" id="Shape" fill="#2A5083" fill-rule="nonzero" ></path>
+                    <path d="M32.6,75.2 L23.7,75.2 C22.1,75.2 20.8,73.9 20.8,72.3 L20.8,72.3 C20.8,70.7 22.1,69.4 23.7,69.4 L32.6,69.4 C34.2,69.4 35.5,70.7 35.5,72.3 L35.5,72.3 C35.5,73.9 34.2,75.2 32.6,75.2 Z" id="Shape" fill="#2A5083" fill-rule="nonzero" ></path>
+                    <path d="M32.6,57.9 L23.7,57.9 C22.1,57.9 20.8,56.6 20.8,55 L20.8,55 C20.8,53.4 22.1,52.1 23.7,52.1 L32.6,52.1 C34.2,52.1 35.5,53.4 35.5,55 L35.5,55 C35.5,56.6 34.2,57.9 32.6,57.9 Z" id="Shape" fill="#2A5083" fill-rule="nonzero" ></path>
+                    <path d="M32.6,40.6 L23.7,40.6 C22.1,40.6 20.8,39.3 20.8,37.7 L20.8,37.7 C20.8,36.1 22.1,34.8 23.7,34.8 L32.6,34.8 C34.2,34.8 35.5,36.1 35.5,37.7 L35.5,37.7 C35.5,39.3 34.2,40.6 32.6,40.6 Z" id="Shape" fill="#2A5083" fill-rule="nonzero" ></path>
+                    <path d="M98,33.6 C92.8,30.9 87.5,30.7 86.2,33.2 L81.9,41.4 L100.7,51.3 L105,43 C106.3,40.6 103.2,36.3 98,33.6 Z" id="Shape" fill="#FF4E4A" fill-rule="nonzero" ></path>
+                    <path d="M105.3,42 C105.5,39.5 102.5,36 98,33.6 L98,33.6 L91.3,46.3 L100.7,51.2 L100.7,51.2 L101.3,50.1 L105,43 C105.2,42.7 105.3,42.4 105.3,42 Z" id="Shape" fill="#D63E3E" fill-rule="nonzero" ></path>
+                    <rect id="Rectangle-path" fill="#EBF2F9" fill-rule="nonzero"  transform="translate(90.390020, 48.036450) rotate(-152.335657) translate(-90.390020, -48.036450) " x="79.7398124" y="44.8863886" width="21.3004151" height="6.30012279"></rect>
+                    <polygon id="Shape" fill="#FFC400" fill-rule="nonzero"  points="92.1 52.5 85.8 49.2 79.5 45.9 60.6 82 66.9 85.3 73.2 88.6 79.4 91.9 98.4 55.7"></polygon>
+                    <path d="M71.9,84.5 L71.7,83.8 L66.9,85.3 L65.4,80.5 L60.6,82 L60.5,82.2 C60.3,82.5 60.2,82.9 60.3,83.3 L61,93.3 L66,95.9 L71.9,84.5 Z" id="Shape" fill="#FFD49B" fill-rule="nonzero" ></path>
+                    <polygon id="Shape" fill="#FF991F" fill-rule="nonzero"  points="92.1 52.4 88.9 50.8 70 86.9 73.2 88.6 79.4 91.8 81.8 87.2 98.3 55.7"></polygon>
+                    <path d="M69.9,98 L78.6,92.9 C78.9,92.7 79.2,92.4 79.3,92.1 L79.4,91.9 L77.9,87.1 L73.2,88.6 L71.7,83.8 L65.3,95.6 C65.9,96 69.2,98.4 69.9,98 Z" id="Shape" fill="#E2AD79" fill-rule="nonzero" ></path>
+                    <path d="M65.3,95.6 L62.3,101.1 L62.3,101.1 C62.4,101.2 62.6,101.3 62.7,101.3 L62.8,101.3 C63,101.4 63.1,101.4 63.3,101.4 L63.4,101.4 L63.9,101.4 L64,101.4 C64.2,101.4 64.4,101.3 64.6,101.2 L70,98 L65.3,95.6 Z" id="Shape" fill="#173E68" fill-rule="nonzero" ></path>
+                    <path d="M61,93.3 L61.4,99.5 C61.4,100.2 61.8,100.7 62.3,101 L65.3,95.5 L61,93.3 Z" id="Shape" fill="#2A5083" fill-rule="nonzero" ></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-13.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_plane</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_plane">
+            <g id="plane">
+                <g>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#00C7E6" xlink:href="#path-1"></use>
+                    <path d="M68.101,74.324 L44.671,97.754 L73.279,130.588 C73.279,130.588 92.075,138.572 96.55,136.575 L68.101,74.324 Z" id="Shape" fill="#2A5083" fill-rule="nonzero" ></path>
+                    <path d="M84.991,80.553 L92.112,87.674 C93.444,89.006 93.444,91.186 92.112,92.518 L75.49,109.141 C72.199,112.432 66.815,112.432 63.525,109.141 L63.525,109.141 C60.234,105.85 60.234,100.466 63.525,97.176 L80.147,80.554 C81.479,79.221 83.659,79.221 84.991,80.553 Z" id="Shape" fill="#DEEBFF" fill-rule="nonzero" ></path>
+                    <path d="M84.991,80.553 L88.552,84.114 L63.525,109.141 C60.234,105.85 60.234,100.466 63.525,97.176 L80.147,80.554 C81.479,79.221 83.659,79.221 84.991,80.553 Z" id="Shape" fill="#194063" fill-rule="nonzero" opacity="0.2" ></path>
+                    <path d="M-0.498,55.283 L28.325,80.937 L51.755,57.507 L-3.36,33.539 C-3.36,33.539 0.359,49.035 -0.498,55.283 Z" id="Shape" fill="#2A5083" fill-rule="nonzero" ></path>
+                    <path d="M101.639,24.782 C95.065,18.207 79.54,23.071 66.966,35.646 L-3.8,104.412 C-0.71,109.906 -7.835,125.894 -3.324,130.231 L102.759,26.148 C102.431,25.659 102.059,25.201 101.639,24.782 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M-2.536,128.037 C1.44,132.069 9.95,132.567 14.874,135.437 L90.856,59.455 C103.431,46.88 108.295,31.356 101.721,24.781 L-2.536,128.037 Z" id="Shape" fill="#DEEBFF" fill-rule="nonzero" ></path>
+                    <path d="M45.639,41.201 L38.518,34.08 C37.186,32.748 35.006,32.748 33.674,34.08 L17.051,50.702 C13.76,53.993 13.76,59.377 17.051,62.667 L17.051,62.667 C20.342,65.958 25.726,65.958 29.016,62.667 L45.638,46.045 C46.971,44.713 46.971,42.533 45.639,41.201 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M45.639,41.201 L42.078,37.64 L17.051,62.667 C20.342,65.958 25.726,65.958 29.016,62.667 L45.638,46.045 C46.971,44.713 46.971,42.533 45.639,41.201 Z" id="Shape" fill="#DEEBFF" fill-rule="nonzero" opacity="0.2" ></path>
+                    <path d="M71.965,63.574 L63.024,54.633 C61.318,52.927 61.318,50.137 63.024,48.431 L65.099,46.356 C66.805,44.65 69.595,44.65 71.301,46.356 L80.242,55.297 C81.948,57.003 81.948,59.793 80.242,61.499 L78.167,63.574 C76.461,65.28 73.67,65.28 71.965,63.574 Z" id="Shape" fill="#194063" fill-rule="nonzero" opacity="0.2" ></path>
+                    <path d="M71.905,60.107 L71.193,59.395 C70.607,58.809 70.607,57.851 71.193,57.266 L73.946,54.513 C74.532,53.927 75.49,53.927 76.075,54.513 L76.788,55.225 C77.374,55.811 77.374,56.769 76.788,57.354 L74.035,60.107 C73.449,60.693 72.491,60.693 71.905,60.107 Z" id="Shape" fill="#194063" fill-rule="nonzero" ></path>
+                    <path d="M66.965,55.167 L66.252,54.455 C65.666,53.869 65.666,52.911 66.252,52.326 L69.005,49.573 C69.591,48.987 70.549,48.987 71.134,49.573 L71.846,50.285 C72.432,50.871 72.432,51.829 71.846,52.414 L69.093,55.167 C68.509,55.752 67.55,55.752 66.965,55.167 Z" id="Shape" fill="#194063" fill-rule="nonzero" ></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-14.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_power</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_power">
+            <g id="Power">
+                <g>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#00C7E6" xlink:href="#path-1"></use>
+                    <path d="M69.84,38.733 L22.659,38.733 C19.222,38.733 16.41,41.545 16.41,44.982 L16.41,79.206 C16.41,82.643 19.222,85.455 22.659,85.455 L69.84,85.455 L69.84,38.733 Z" id="Shape" fill="#5243AA" fill-rule="nonzero" ></path>
+                    <path d="M109.949,73.725 L98.375,73.725 C96.725,73.725 95.375,72.375 95.375,70.725 L95.375,54.572 C95.375,52.922 96.725,51.572 98.375,51.572 L109.949,51.572 C111.599,51.572 112.949,52.922 112.949,54.572 L112.949,70.725 C112.949,72.375 111.599,73.725 109.949,73.725 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M100.319,38.733 L100.007,38.733 L96.223,38.733 L95.91,38.733 L73.936,38.733 L73.624,38.733 L69.84,38.733 L69.528,38.733 L69.528,85.454 L69.84,85.454 L73.624,85.454 L73.936,85.454 L95.91,85.454 L96.222,85.454 L100.006,85.454 L100.318,85.454 C103.755,85.454 106.567,82.642 106.567,79.205 L106.567,44.982 C106.568,41.545 103.756,38.733 100.319,38.733 Z" id="Shape" fill="#FFBD17" fill-rule="nonzero" ></path>
+                    <path d="M106.255,62.044 L69.84,62.044 L69.528,62.044 L69.528,85.405 L69.84,85.405 L71.084,85.405 L71.396,85.405 L73.623,85.405 L73.935,85.405 L95.91,85.405 L96.222,85.405 L100.006,85.405 L100.318,85.405 C103.755,85.405 106.567,82.593 106.567,79.156 L106.567,62.044 L106.255,62.044 Z" id="Shape" fill="#F2900F" fill-rule="nonzero" ></path>
+                    <path d="M88.83,71.588 L87.577,71.588 C86.528,71.588 85.669,70.729 85.669,69.68 L85.669,54.508 C85.669,53.459 86.528,52.6 87.577,52.6 L88.83,52.6 C89.879,52.6 90.738,53.459 90.738,54.508 L90.738,69.68 C90.738,70.729 89.879,71.588 88.83,71.588 Z" id="Shape" fill="#403294" fill-rule="nonzero" ></path>
+                    <path d="M78.71,62.72 L78.71,61.467 C78.71,60.418 79.569,59.559 80.618,59.559 L95.79,59.559 C96.839,59.559 97.698,60.418 97.698,61.467 L97.698,62.72 C97.698,63.769 96.839,64.628 95.79,64.628 L80.618,64.628 C79.569,64.628 78.71,63.77 78.71,62.72 Z" id="Shape" fill="#403294" fill-rule="nonzero" ></path>
+                    <path d="M16.411,62.044 L16.411,79.156 C16.411,82.593 19.223,85.405 22.66,85.405 L69.528,85.405 L69.528,62.044 L16.411,62.044 Z" id="Shape" fill="#403294" fill-rule="nonzero" ></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-15.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_notes_flag</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_notes_flag">
+            <g id="project_avatar_flag">
+                <g id="Red_flag">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#FFC400" xlink:href="#path-1"></use>
+                    <path d="M112.668,34.252 L65.986,34.252 L65.986,91.44 C65.986,94.386 68.374,96.773 71.319,96.773 L112.668,96.773 L102.391,65.512 L112.668,34.252 Z" id="Shape" fill="#DE350A" fill-rule="nonzero" ></path>
+                    <path d="M33.879,26.684 L73.953,26.684 C76.899,26.684 79.286,29.072 79.286,32.017 L79.286,87.227 L33.879,87.227 L33.879,26.684 Z" id="Shape" fill="#FF5630" fill-rule="nonzero" ></path>
+                    <path d="M65.986,87.227 L65.986,91.44 C65.986,94.386 68.374,96.773 71.319,96.773 L73.015,96.773 L79.287,87.226 L65.986,87.226 L65.986,87.227 Z" id="Shape" fill="#BF2601" fill-rule="nonzero" opacity="0.3" ></path>
+                    <rect id="Rectangle-path" fill="#D32F06" fill-rule="nonzero" opacity="0.2"  x="33.879" y="26.684" width="4.547" height="60.543"></rect>
+                    <path d="M29.744,20.262 C27.158,20.262 25.043,22.378 25.043,24.963 L25.043,128.762 C27.986,131.024 31.13,127.032 34.446,128.762 L34.446,24.964 C34.445,22.378 32.329,20.262 29.744,20.262 Z" id="Shape" fill="#C9E6F4" fill-rule="nonzero" ></path>
+                    <path d="M25.042,24.964 L25.042,128.806 C25.958,129.51 26.89,128.151 27.844,128.806 L27.844,24.964 C27.844,22.869 29.242,21.104 31.144,20.501 C30.698,20.36 30.234,20.262 29.743,20.262 C27.158,20.262 25.042,22.378 25.042,24.964 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-16.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_refresh</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_refresh">
+            <g id="Refresh">
+                <g>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#6555C0" xlink:href="#path-1"></use>
+                    <circle id="Oval" fill="#8777D9" fill-rule="nonzero"  cx="80.078" cy="90.901" r="15.576"></circle>
+                    <circle id="Oval" fill="#8777D9" fill-rule="nonzero"  cx="47.719" cy="35.189" r="15.576"></circle>
+                    <path d="M28.744,77.102 C26.275,77.75 23.848,78.394 21.416,79.021 C19.764,79.447 18.771,78.496 19.196,76.824 C21.493,67.787 23.809,58.755 26.143,49.728 C26.628,47.852 27.858,47.541 29.236,48.942 C34.385,54.177 39.513,59.434 44.647,64.684 C46,66.067 47.359,67.444 48.697,68.841 C49.954,70.155 49.625,71.436 47.894,71.928 C45.556,72.592 43.207,73.219 40.494,73.963 C41.816,75.94 42.882,77.874 44.268,79.542 C48.864,85.077 54.771,88.195 61.979,88.861 C67.472,89.368 72.51,88.047 77.305,85.452 C81.493,83.185 86.418,86.166 86.309,90.887 C86.258,93.096 85.226,94.857 83.315,95.955 C76.196,100.042 68.529,101.829 60.362,100.828 C45.693,99.029 35.305,91.29 29.142,77.866 C29.029,77.621 28.893,77.387 28.744,77.102 Z" id="Shape" fill="#00C7E6" fill-rule="nonzero" ></path>
+                    <path d="M87.743,52.194 C85.932,48.382 83.531,45.305 80.411,42.793 C75.825,39.1 70.536,37.226 64.692,37.09 C60.04,36.982 55.634,38.137 51.56,40.433 C49.865,41.388 48.107,41.753 46.232,41.079 C43.804,40.206 42.401,38.43 42.155,35.904 C41.912,33.415 42.956,31.404 45.122,30.131 C50.128,27.189 55.554,25.433 61.344,25.106 C73.508,24.42 83.875,28.458 92.276,37.342 C95.176,40.408 97.399,43.938 99.1,47.798 C99.272,48.187 99.45,48.573 99.646,49.005 C102.119,48.349 104.506,47.708 106.898,47.084 C108.736,46.605 109.663,47.579 109.176,49.491 C107.691,55.325 106.19,61.155 104.701,66.988 C103.932,70 103.177,73.015 102.408,76.027 C102.202,76.834 102.009,77.849 101.046,77.878 C100.384,77.898 99.547,77.461 99.056,76.964 C92.588,70.422 86.164,63.837 79.739,57.253 C78.441,55.923 78.808,54.639 80.638,54.122 C82.941,53.471 85.256,52.866 87.743,52.194 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-17.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_rocket</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_rocket">
+            <g id="rocket">
+                <g>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#253858" xlink:href="#path-1"></use>
+                    <path d="M27.2,83.1 C27.6,80.2 27.6,74.7 34,64.8 C23.2,67.4 16.4,75 12.9,80.5 C10.4,84.7 14.1,84.4 15.9,84 C16.2,83.9 16.4,83.9 16.7,83.8 L16.8,83.8 L16.8,83.8 C21.3,82.8 24.8,83.4 27.5,84.4 C27.1,83.7 27.2,83.1 27.2,83.1 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M43.7,100.3 C44.8,103 45.4,106.6 44.4,111.1 L44.4,111.1 C44.4,111.1 44.4,111.1 44.4,111.2 C44.3,111.5 44.3,111.7 44.2,112 C43.8,113.8 43.5,117.5 47.7,115 C53.5,111.2 61.7,103.8 63.8,91.8 C53.1,99.3 47.1,99.9 43.7,100.3 Z" id="Shape" fill="#D3E0EA" fill-rule="nonzero" ></path>
+                    <circle id="Oval" fill="#505F79" fill-rule="nonzero"  cx="95.2" cy="97.9" r="3.9"></circle>
+                    <circle id="Oval" fill="#505F79" fill-rule="nonzero"  cx="107" cy="69" r="3.9"></circle>
+                    <circle id="Oval" fill="#505F79" fill-rule="nonzero"  cx="53.7" cy="21.1" r="3.9"></circle>
+                    <circle id="Oval" fill="#505F79" fill-rule="nonzero"  cx="21.1" cy="44.5" r="3.9"></circle>
+                    <circle id="Oval" fill="#505F79" fill-rule="nonzero"  cx="73.7" cy="106.5" r="3.9"></circle>
+                    <g id="Group"  fill-rule="nonzero">
+                        <g transform="translate(26.000000, 26.000000)" id="Shape">
+                            <path d="M15.4,73.7 C15.5,73.8 15.6,73.9 15.8,73.9 C15.6,73.8 15.5,73.8 15.4,73.7 Z" fill="#4AC6C6"></path>
+                            <path d="M8.2,66.6 L8.2,66.6 L64.1,10.7 L54,0.5 C44.9,3.3 35.4,7.5 23.8,19.1 C0.6,42.3 0.9,52.7 0.3,57.1 C0.3,57.1 0.2,58.6 1.5,59.9 L8.2,66.6 Z" fill="#00B8D9"></path>
+                            <path d="M14.9,73.3 C15,73.4 15.1,73.5 15.2,73.6 C15.1,73.4 15,73.3 14.9,73.3 Z" fill="#4AC6C6"></path>
+                        </g>
+                    </g>
+                    <path d="M103.1,28.2 C103.1,27.7 103.1,27.2 103,26.8 C102.9,26.3 102.8,25.9 102.7,25.6 C102.6,25.3 102.5,25.1 102.4,24.9 C102.3,24.8 102.3,24.7 102.2,24.6 L102.2,24.6 L90.2,36.6 L100.3,46.7 C102.1,41.6 102.7,37.2 102.9,33.6 C103,31.6 103,29.7 103.1,28.2 L103.1,28.2 Z" id="Shape" fill="#C5DEEB" fill-rule="nonzero" ></path>
+                    <path d="M90,36.7 L25.2,101.5 L25.2,101.5 C26.8,103.1 32,100.7 37.5,96 L40.7,99.2 L40.8,99.3 C41.1,99.6 42.4,100.7 43.9,100.5 C48.6,99.8 58.9,99.8 81.6,77.1 C93.2,65.5 97.4,56 100.2,46.9 L100.2,46.9 L90,36.7 Z" id="Shape" fill="#008DA6" fill-rule="nonzero" ></path>
+                    <path d="M101.9,24.4 C101.5,24.1 100.5,23.6 98.6,23.7 L98.2,23.7 C94.1,23.8 87.9,23.8 80,26.5 L90.1,36.6 L102.1,24.6 C102,24.5 102,24.5 101.9,24.4 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <path d="M25.3,101.5 C25.4,101.6 25.5,101.7 25.7,101.8 C25.7,101.8 25.8,101.8 25.9,101.9 C26,101.9 26.1,102 26.2,102 L26.4,102 L26.8,102 L27.1,102 L27.5,102 L27.8,102 C27.9,102 28.1,101.9 28.3,101.9 C28.5,101.8 28.7,101.8 29,101.7 C29.1,101.7 29.3,101.6 29.4,101.6 C29.6,101.5 29.8,101.5 29.9,101.4 C30,101.4 30.1,101.3 30.2,101.3 C30.4,101.2 30.6,101.1 30.8,101 C30.9,101 31,100.9 31.1,100.9 C31.3,100.8 31.6,100.7 31.8,100.5 C31.9,100.5 31.9,100.4 32,100.4 C33.5,99.6 35.1,98.4 36.7,97.1 L36.7,97.1 C37,96.8 37.4,96.5 37.7,96.3 C38.8,95.4 39.9,94.4 41,93.3 C47.7,86.6 51.5,79.7 49.6,77.7 L25.3,101.5 L25.3,101.5 L25.3,101.5 Z" id="Shape" fill="#C5DEEB" fill-rule="nonzero" ></path>
+                    <g id="Group"  fill-rule="nonzero" fill="#FFFFFF">
+                        <g transform="translate(24.000000, 76.000000)" id="Shape">
+                            <path d="M25.6,1.4 C23.7,-0.5 16.7,3.3 10,10 C3.3,16.7 -0.5,23.6 1.4,25.6 L25.6,1.4 Z"></path>
+                            <path d="M1.7,25.6 C1.6,25.6 1.6,25.5 1.5,25.5 L1.5,25.5 C1.6,25.5 1.6,25.6 1.7,25.6 Z"></path>
+                        </g>
+                    </g>
+                    <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero"  cx="68.8" cy="57.1" r="8.2"></circle>
+                    <path d="M76.7,49.2 C72.3,44.8 65.2,44.8 60.9,49.2 C56.6,53.6 56.5,60.7 60.9,65 C65.3,69.3 72.4,69.4 76.7,65 C81,60.6 81.1,53.6 76.7,49.2 Z M63.8,62.1 C61.1,59.4 61.1,54.9 63.8,52.2 C66.5,49.5 71,49.5 73.7,52.2 C76.4,54.9 76.4,59.4 73.7,62.1 C71,64.8 66.6,64.8 63.8,62.1 Z" id="Shape" fill="#253858" fill-rule="nonzero" ></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-18.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_science</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_science">
+            <g id="science">
+                <g>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Rectangle" fill="#6555C0" xlink:href="#path-1"></use>
+                    <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero"  cx="63.218" cy="68.882" r="40.675"></circle>
+                    <path d="M81.832,41.449 L45.294,41.449 L45.294,23.237 C45.294,21.58 46.637,20.237 48.294,20.237 L78.832,20.237 C80.489,20.237 81.832,21.58 81.832,23.237 L81.832,41.449 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero" ></path>
+                    <circle id="Oval" fill="#7F4CBF" fill-rule="nonzero" opacity="0.1"  cx="63.127" cy="68.882" r="30.804"></circle>
+                    <path d="M72.24,32.878 L54.886,32.878 C53.229,32.878 51.886,31.535 51.886,29.878 L51.886,14.797 C51.886,13.14 53.229,11.797 54.886,11.797 L72.24,11.797 C73.897,11.797 75.24,13.14 75.24,14.797 L75.24,29.878 C75.24,31.535 73.897,32.878 72.24,32.878 Z" id="Shape" fill="#00C7E6" fill-rule="nonzero" ></path>
+                    <path d="M64.255,68.882 C64.255,68.882 31.745,53.289 32.567,71.881 C33.22,86.665 59.937,83.747 59.937,83.747 L64.255,68.882 Z" id="Shape" fill="#DE350A" fill-rule="nonzero" ></path>
+                    <path d="M62.085,66.354 C79.394,51.896 93.542,70.82 93.542,70.82 L93.69,71.015 C92.594,86.962 79.32,99.56 63.094,99.56 C47.163,99.56 34.071,87.416 32.564,71.88 C33.191,72.369 45.309,80.367 62.085,66.354 Z" id="Shape" fill="#FF5630" fill-rule="nonzero" ></path>
+                    <rect id="Rectangle-path" fill="#FFFFFF" fill-rule="nonzero" opacity="0.5"  x="50.348" y="20.237" width="26.575" height="14.892"></rect>
+                    <circle id="Oval" fill="#FF5630" fill-rule="nonzero"  cx="61.798" cy="47.945" r="6.007"></circle>
+                    <circle id="Oval" fill="#FF5630" fill-rule="nonzero"  cx="74.681" cy="53.024" r="3.793"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/example-helpers/samples/avatar-19.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>project_avatar_settings</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_settings">
+            <g>
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="Rectangle" fill="#FF5630" xlink:href="#path-1"></use>
+                <g id="Settings"  fill-rule="nonzero">
+                    <g transform="translate(20.000000, 17.000000)">
+                        <path d="M74.578,84.289 L72.42,84.289 C70.625,84.289 69.157,82.821 69.157,81.026 L69.157,16.537 C69.157,14.742 70.625,13.274 72.42,13.274 L74.578,13.274 C76.373,13.274 77.841,14.742 77.841,16.537 L77.841,81.026 C77.842,82.82 76.373,84.289 74.578,84.289 Z" id="Shape" fill="#2A5083"></path>
+                        <path d="M14.252,84.289 L12.094,84.289 C10.299,84.289 8.831,82.821 8.831,81.026 L8.831,16.537 C8.831,14.742 10.299,13.274 12.094,13.274 L14.252,13.274 C16.047,13.274 17.515,14.742 17.515,16.537 L17.515,81.026 C17.515,82.82 16.047,84.289 14.252,84.289 Z" id="Shape" fill="#2A5083"></path>
+                        <rect id="Rectangle-path" fill="#153A56" x="8.83" y="51.311" width="8.685" height="7.763"></rect>
+                        <path d="M13.173,53.776 L13.173,53.776 C6.342,53.776 0.753,48.187 0.753,41.356 L0.753,41.356 C0.753,34.525 6.342,28.936 13.173,28.936 L13.173,28.936 C20.004,28.936 25.593,34.525 25.593,41.356 L25.593,41.356 C25.593,48.187 20.004,53.776 13.173,53.776 Z" id="Shape" fill="#FFFFFF"></path>
+                        <path d="M18.021,43.881 L8.324,43.881 C7.453,43.881 6.741,43.169 6.741,42.298 L6.741,41.25 C6.741,40.379 7.453,39.667 8.324,39.667 L18.021,39.667 C18.892,39.667 19.604,40.379 19.604,41.25 L19.604,42.297 C19.605,43.168 18.892,43.881 18.021,43.881 Z" id="Shape" fill="#2A5083" opacity="0.2"></path>
+                        <rect id="Rectangle-path" fill="#153A56" x="69.157" y="68.307" width="8.685" height="7.763"></rect>
+                        <path d="M73.499,70.773 L73.499,70.773 C66.668,70.773 61.079,65.184 61.079,58.353 L61.079,58.353 C61.079,51.522 66.668,45.933 73.499,45.933 L73.499,45.933 C80.33,45.933 85.919,51.522 85.919,58.353 L85.919,58.353 C85.919,65.183 80.33,70.773 73.499,70.773 Z" id="Shape" fill="#FFFFFF"></path>
+                        <path d="M78.348,60.877 L68.651,60.877 C67.78,60.877 67.068,60.165 67.068,59.294 L67.068,58.247 C67.068,57.376 67.781,56.664 68.651,56.664 L78.348,56.664 C79.219,56.664 79.931,57.377 79.931,58.247 L79.931,59.294 C79.931,60.165 79.219,60.877 78.348,60.877 Z" id="Shape" fill="#2A5083" opacity="0.2"></path>
+                        <path d="M44.415,84.289 L42.257,84.289 C40.462,84.289 38.994,82.821 38.994,81.026 L38.994,16.537 C38.994,14.742 40.462,13.274 42.257,13.274 L44.415,13.274 C46.21,13.274 47.678,14.742 47.678,16.537 L47.678,81.026 C47.678,82.82 46.21,84.289 44.415,84.289 Z" id="Shape" fill="#2A5083"></path>
+                        <rect id="Rectangle-path" fill="#153A56" x="38.974" y="23.055" width="8.685" height="7.763"></rect>
+                        <path d="M43.316,25.521 L43.316,25.521 C36.485,25.521 30.896,19.932 30.896,13.101 L30.896,13.101 C30.896,6.27 36.485,0.681 43.316,0.681 L43.316,0.681 C50.147,0.681 55.736,6.27 55.736,13.101 L55.736,13.101 C55.736,19.932 50.147,25.521 43.316,25.521 Z" id="Shape" fill="#FFFFFF"></path>
+                        <path d="M48.165,15.626 L38.468,15.626 C37.597,15.626 36.885,14.914 36.885,14.043 L36.885,12.996 C36.885,12.125 37.597,11.413 38.468,11.413 L48.165,11.413 C49.036,11.413 49.748,12.125 49.748,12.996 L49.748,14.043 C49.748,14.913 49.036,15.626 48.165,15.626 Z" id="Shape" fill="#2A5083" opacity="0.2"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>