@testpig/avataaars 1.0.0

package/.idea/avataaars.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/codeStyles/Project.xml

@@ -0,0 +1,67 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+      <option name="SPACE_WITHIN_TYPE_ASSERTION" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
+      <option name="SPACE_BEFORE_METHOD_PARENTHESES" value="true" />
+      <option name="IF_BRACE_FORCE" value="1" />
+      <option name="DOWHILE_BRACE_FORCE" value="1" />
+      <option name="WHILE_BRACE_FORCE" value="1" />
+      <option name="FOR_BRACE_FORCE" value="1" />
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

package/.idea/git_toolbox_blame.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GitToolBoxBlameSettings">
+    <option name="version" value="2" />
+  </component>
+</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="TsLint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/avataaars.iml" filepath="$PROJECT_DIR$/.idea/avataaars.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "semi": false,
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "jsxBracketSameLine": true,
+  "trailingComma": "es5"
+}

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": [ "remimarsal.prettier-now", "eg2.tslint" ]
+}

package/.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+    "editor.formatOnSave": true,
+    "prettier.useTabs": false,
+    "prettier.tabWidth": 2,
+    "prettier.typescriptEnable": ["typescript"],
+    "prettier.jsonEnable": ["json"],
+    "prettier.singleQuote": true,
+    "prettier.semi": false,
+    "prettier.spaceBeforeFunctionParen": true,
+    "prettier.bracketSpacing": false,
+    "prettier.printWidth": 80,
+    "prettier.arrowParens": false,
+    "editor.tabSize": 2
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Pablo Stanley, Fang-Pen Lin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,80 @@
+# React component for Avataaars
+
+The core React component for [Avataaars Generator](https://getavataaars.com/) developed by [Fang-Pen Lin](https://twitter.com/fangpenlin), based on the Sketch library [Avataaars](https://avataaars.com/) designed by [Pablo Stanley](https://twitter.com/pablostanley). 
+
+<p align="center"><img src='avataaars-example.png?raw=true' style='width: 300px; height: 300px;' /></p>
+
+## Features
+
+ - SVG based
+ - Light weight 
+ - Scalable
+ - Easy to use
+ - Easy to integrate with custom editor
+ - Comes with [official editor](https://getavataaars.com/)
+
+## Usage
+
+First, you need to install the avataaars component package, here you run
+
+```
+yarn add avataaars
+```
+
+or
+
+```
+npm install avataaars --save
+```
+
+if you are using npm. Then, in your React app, import the Avataaar component and put it where you like it to be, for example
+
+```jsximport Avatar from 'avataaars'
+
+export default function MyComponent () {
+    return 
+      <div>
+        Your avatar:
+        <Avatar
+          style={{width: '100px', height: '100px'}}
+          avatarStyle='Circle'
+          topType='LongHairMiaWallace'
+          accessoriesType='Prescription02'
+          hairColor='BrownDark'
+          facialHairType='Blank'
+          clotheType='Hoodie'
+          clotheColor='PastelBlue'
+          eyeType='Happy'
+          eyebrowType='Default'
+          mouthType='Smile'
+          skinColor='Light'
+        />
+      </div>
+}
+```
+
+To showcase individual pieces of the avatar you can use the Piece component, for example:
+
+```jsximport {Piece} from 'avataaars';
+
+export default function MyComponent () {
+    return 
+      <div>
+        <Piece pieceType="mouth" pieceSize="100" mouthType="Eating"/>
+        <Piece pieceType="eyes" pieceSize="100" eyeType="Dizzy"/>
+        <Piece pieceType="eyebrows" pieceSize="100" eyebrowType="RaisedExcited"/>
+        <Piece pieceType="accessories" pieceSize="100" accessoriesType="Round"/>
+        <Piece pieceType="top" pieceSize="100" topType="LongHairFro" hairColor="Red"/>
+        <Piece pieceType="facialHair" pieceSize="100" facialHairType="BeardMajestic"/>
+        <Piece pieceType="clothe" pieceSize="100" clotheType="Hoodie" clotheColor="Red"/>
+        <Piece pieceType="graphics" pieceSize="100" graphicType="Skull" />
+        <Piece pieceType="skin" pieceSize="100" skinColor="Brown" />
+      </div>
+}
+```
+
+To explore avatar options and generate the React code, please use [Avataaars Generator](https://getavataaars.com/)
+
+## Collect options
+
+To build your own avatar editor, you may want to use lower level `Avatar` component along with `OptionContext`. For more details usage, please reference to source code of [avataaars-generator](https://github.com/fangpenlin/avataaars-geneator), see how it uses `OptionContext` to collection available options.

package/dist/avatar/Avatar.d.ts

@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+import AvatarProps from './AvatarProps';
+type Props = AvatarProps & SVGProps<SVGSVGElement>;
+export default function Avatar({ style, circle, topType, accessoriesType, hairColor, facialHairType, facialHairColor, clotheType, clotheColor, graphicType, eyeType, eyebrowType, mouthType, skinColor, hatColor, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/avatar/Avatar.js

@@ -0,0 +1,60 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var AvatarContext_1 = __importDefault(require("./AvatarContext"));
+var clothes_1 = __importDefault(require("./clothes"));
+var face_1 = __importDefault(require("./face"));
+var Skin_1 = __importDefault(require("./Skin"));
+var top_1 = __importDefault(require("./top"));
+var accessories_1 = __importDefault(require("./top/accessories"));
+function Avatar(_a) {
+    var style = _a.style, circle = _a.circle, topType = _a.topType, accessoriesType = _a.accessoriesType, hairColor = _a.hairColor, facialHairType = _a.facialHairType, facialHairColor = _a.facialHairColor, clotheType = _a.clotheType, clotheColor = _a.clotheColor, graphicType = _a.graphicType, eyeType = _a.eyeType, eyebrowType = _a.eyebrowType, mouthType = _a.mouthType, skinColor = _a.skinColor, hatColor = _a.hatColor, props = __rest(_a, ["style", "circle", "topType", "accessoriesType", "hairColor", "facialHairType", "facialHairColor", "clotheType", "clotheColor", "graphicType", "eyeType", "eyebrowType", "mouthType", "skinColor", "hatColor"]);
+    var path1 = (0, react_1.useId)();
+    var path2 = (0, react_1.useId)();
+    var path3 = (0, react_1.useId)();
+    var mask1 = (0, react_1.useId)();
+    var mask2 = (0, react_1.useId)();
+    var mask3 = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsx)(AvatarContext_1.default.Provider, __assign({ value: {
+            topType: topType,
+            accessoriesType: accessoriesType,
+            hairColor: hairColor,
+            facialHairType: facialHairType,
+            facialHairColor: facialHairColor,
+            clotheType: clotheType,
+            clotheColor: clotheColor,
+            graphicType: graphicType,
+            eyeType: eyeType,
+            eyebrowType: eyebrowType,
+            mouthType: mouthType,
+            skinColor: skinColor,
+            hatColor: hatColor
+        } }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ width: '264px', height: '280px', viewBox: '0 0 264 280', version: '1.1', xmlns: 'http://www.w3.org/2000/svg', xmlnsXlink: 'http://www.w3.org/1999/xlink', style: style }, props, { children: [(0, jsx_runtime_1.jsx)("desc", { children: "Created with getavataaars.com" }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("circle", { id: path1, cx: '120', cy: '120', r: '120' }), (0, jsx_runtime_1.jsx)("path", { id: path2, d: 'M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z' }), (0, jsx_runtime_1.jsx)("path", { id: path3, d: 'M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z' })] }), (0, jsx_runtime_1.jsxs)("g", __assign({ stroke: 'none', strokeWidth: '1', fill: 'none', fillRule: 'evenodd' }, { children: [circle && ((0, jsx_runtime_1.jsxs)("g", __assign({ strokeWidth: '1', fillRule: 'evenodd', transform: 'translate(12, 40)' }, { children: [(0, jsx_runtime_1.jsx)("mask", __assign({ id: mask1, fill: 'white' }, { children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: '#' + path1 }) })), (0, jsx_runtime_1.jsx)("use", { fill: '#E6E6E6', xlinkHref: '#' + path1 }), (0, jsx_runtime_1.jsx)("g", __assign({ mask: 'url(#' + mask1 + ')', fill: '#65C9FF' }, { children: (0, jsx_runtime_1.jsx)("rect", { x: '0', y: '0', width: '240', height: '240' }) }))] }))), circle && ((0, jsx_runtime_1.jsx)("mask", __assign({ id: mask2, fill: 'white' }, { children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: '#' + path2 }) }))), (0, jsx_runtime_1.jsxs)("g", __assign({ strokeWidth: '1', fillRule: 'evenodd', mask: 'url(#' + mask2 + ')' }, { children: [(0, jsx_runtime_1.jsxs)("g", __assign({ transform: 'translate(32, 36)' }, { children: [(0, jsx_runtime_1.jsx)("mask", __assign({ id: mask3, fill: 'white' }, { children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: '#' + path3 }) })), (0, jsx_runtime_1.jsx)("use", { fill: '#D0C6AC', xlinkHref: '#' + path3 }), (0, jsx_runtime_1.jsx)(Skin_1.default, { maskID: mask3 }), (0, jsx_runtime_1.jsx)("path", { fillOpacity: '0.100000001', fill: '#000000', mask: 'url(#' + mask3 + ')', d: 'M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z' })] })), (0, jsx_runtime_1.jsx)(clothes_1.default, {}), (0, jsx_runtime_1.jsx)(face_1.default, {}), (0, jsx_runtime_1.jsx)(top_1.default, { children: (0, jsx_runtime_1.jsx)(accessories_1.default, {}) })] }))] }))] })) })));
+}
+exports.default = Avatar;

package/dist/avatar/AvatarContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import AvatarProps from './AvatarProps';
+declare const AvatarContext: React.Context<AvatarProps>;
+export default AvatarContext;

package/dist/avatar/AvatarContext.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var AvatarContext = react_1.default.createContext({});
+exports.default = AvatarContext;

package/dist/avatar/AvatarProps.d.ts

@@ -0,0 +1,25 @@
+import ClotheType from './clothes/ClotheType';
+import GraphicType from './clothes/GraphicType';
+import EyebrowType from './face/eyebrow/EyebrowType';
+import AccessoriesType from './top/accessories/AccessoriesType';
+import FacialHairType from './top/facialHair/FacialHairType';
+import TopType from './top/TopType';
+import EyeType from './face/eyes/EyeType';
+import MouthType from './face/mouth/MouthType';
+type AvatarProps = {
+    circle?: boolean;
+    topType?: TopType;
+    accessoriesType?: AccessoriesType;
+    hairColor?: string;
+    facialHairType?: FacialHairType;
+    facialHairColor?: string;
+    clotheType?: ClotheType;
+    clotheColor?: string;
+    graphicType?: GraphicType;
+    eyeType?: EyeType;
+    eyebrowType?: EyebrowType;
+    mouthType?: MouthType;
+    skinColor?: string;
+    hatColor?: string;
+};
+export default AvatarProps;

package/dist/avatar/AvatarProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/avatar/Color.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+type Props = {
+    maskID: string;
+    color: string;
+} & SVGProps<SVGGElement>;
+export default function Color({ maskID, color, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/avatar/Color.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+function Color(_a) {
+    var maskID = _a.maskID, color = _a.color, props = __rest(_a, ["maskID", "color"]);
+    return ((0, jsx_runtime_1.jsx)("g", __assign({ mask: "url(#".concat(maskID, ")"), fill: color }, props, { children: (0, jsx_runtime_1.jsx)("rect", { x: '0', y: '0', width: '264', height: '280' }) })));
+}
+exports.default = Color;

package/dist/avatar/Skin.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    maskID: string;
+};
+export default function Skin({ maskID }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/avatar/Skin.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var AvatarContext_1 = __importDefault(require("./AvatarContext"));
+var SkinColor_1 = __importDefault(require("./SkinColor"));
+var Color_1 = __importDefault(require("./Color"));
+function Skin(_a) {
+    var maskID = _a.maskID;
+    var color = (0, react_1.useContext)(AvatarContext_1.default).skinColor;
+    return (0, jsx_runtime_1.jsx)(Color_1.default, { maskID: maskID, color: getSkinColor(color) });
+}
+exports.default = Skin;
+function getSkinColor(color) {
+    if (color && color.startsWith('#'))
+        return color;
+    switch (color) {
+        case SkinColor_1.default.Tanned:
+            return '#FD9841';
+        case SkinColor_1.default.Yellow:
+            return '#F8D25C';
+        case SkinColor_1.default.Pale:
+            return '#FFDBB4';
+        case SkinColor_1.default.Brown:
+            return '#D08B5B';
+        case SkinColor_1.default.DarkBrown:
+            return '#AE5D29';
+        case SkinColor_1.default.Black:
+            return '#614335';
+        case SkinColor_1.default.Light:
+        default:
+            return '#EDB98A';
+    }
+}

package/dist/avatar/SkinColor.d.ts

@@ -0,0 +1,10 @@
+declare enum SkinColor {
+    Tanned = "Tanned",
+    Yellow = "Yellow",
+    Pale = "Pale",
+    Light = "Light",
+    Brown = "Brown",
+    DarkBrown = "DarkBrown",
+    Black = "Black"
+}
+export default SkinColor;

package/dist/avatar/SkinColor.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var SkinColor;
+(function (SkinColor) {
+    SkinColor["Tanned"] = "Tanned";
+    SkinColor["Yellow"] = "Yellow";
+    SkinColor["Pale"] = "Pale";
+    SkinColor["Light"] = "Light";
+    SkinColor["Brown"] = "Brown";
+    SkinColor["DarkBrown"] = "DarkBrown";
+    SkinColor["Black"] = "Black";
+})(SkinColor || (SkinColor = {}));
+exports.default = SkinColor;

package/dist/avatar/clothes/BlazerShirt.d.ts

@@ -0,0 +1 @@
+export default function BlazerShirt(): import("react/jsx-runtime").JSX.Element;

package/dist/avatar/clothes/BlazerShirt.js

@@ -0,0 +1,21 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+function BlazerShirt() {
+    var path1 = (0, react_1.useId)();
+    var mask1 = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)("g", __assign({ transform: 'translate(0, 170)' }, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("path", { id: path1, d: 'M133.960472,0.294916112 C170.936473,3.32499816 200,34.2942856 200,72.0517235 L200,81 L0,81 L0,72.0517235 C1.22536245e-14,33.9525631 29.591985,2.76498122 67.0454063,0.219526408 C67.0152598,0.593114549 67,0.969227185 67,1.34762511 C67,13.2107177 81.9984609,22.8276544 100.5,22.8276544 C119.001539,22.8276544 134,13.2107177 134,1.34762511 C134,0.994669088 133.986723,0.64370138 133.960472,0.294916112 Z' }) }), (0, jsx_runtime_1.jsxs)("g", __assign({ transform: 'translate(32, 29)' }, { children: [(0, jsx_runtime_1.jsx)("mask", __assign({ id: mask1, fill: 'white' }, { children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: '#' + path1 }) })), (0, jsx_runtime_1.jsx)("use", { fill: '#E6E6E6', xlinkHref: '#' + path1 }), (0, jsx_runtime_1.jsx)("g", __assign({ mask: "url(#".concat(mask1, ")"), fill: '#262E33' }, { children: (0, jsx_runtime_1.jsx)("g", __assign({ transform: 'translate(-32, -29)' }, { children: (0, jsx_runtime_1.jsx)("rect", { x: '0', y: '0', width: '264', height: '110' }) })) })), (0, jsx_runtime_1.jsx)("g", __assign({ opacity: '0.599999964', mask: "url(#".concat(mask1, ")"), fillOpacity: '0.16', fill: '#000000' }, { children: (0, jsx_runtime_1.jsx)("g", __assign({ transform: 'translate(60, -25)' }, { children: (0, jsx_runtime_1.jsx)("ellipse", { cx: '40.5', cy: '27.8476251', rx: '39.6351047', ry: '26.9138272' }) })) }))] })), (0, jsx_runtime_1.jsxs)("g", __assign({ transform: 'translate(32, 28)' }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: '#3A4C5A', d: 'M68.784807,1.12222847 C30.512317,2.80409739 -1.89486556e-14,34.3646437 -1.42108547e-14,73.0517235 L0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z' }), (0, jsx_runtime_1.jsx)("path", { fill: '#E6E6E6', d: 'M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z' }), (0, jsx_runtime_1.jsx)("path", { fill: '#2F4351', d: 'M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z' }), (0, jsx_runtime_1.jsx)("path", { fill: '#2F4351', transform: 'translate(141, 41) scale(-1, 1) translate(-141, -41)', d: 'M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z' })] }))] })));
+}
+exports.default = BlazerShirt;

package/dist/avatar/clothes/BlazerSweater.d.ts

@@ -0,0 +1 @@
+export default function BlazerSweater(): import("react/jsx-runtime").JSX.Element;

package/dist/avatar/clothes/BlazerSweater.js

@@ -0,0 +1,21 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+function BlazerSweater() {
+    var path1 = (0, react_1.useId)();
+    var mask1 = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)("g", __assign({ transform: 'translate(0, 170)' }, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("path", { id: path1, d: 'M105.192402,29.0517235 L104,29.0517235 L104,29.0517235 C64.235498,29.0517235 32,61.2872215 32,101.051724 L32,110 L232,110 L232,101.051724 C232,61.2872215 199.764502,29.0517235 160,29.0517235 L160,29.0517235 L158.807598,29.0517235 C158.934638,30.0353144 159,31.0364513 159,32.0517235 C159,45.8588423 146.911688,57.0517235 132,57.0517235 C117.088312,57.0517235 105,45.8588423 105,32.0517235 C105,31.0364513 105.065362,30.0353144 105.192402,29.0517235 Z' }) }), (0, jsx_runtime_1.jsx)("mask", __assign({ id: mask1, fill: 'white' }, { children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: '#' + path1 }) })), (0, jsx_runtime_1.jsx)("use", { fill: '#E6E6E6', fillRule: 'evenodd', xlinkHref: '#' + path1 }), (0, jsx_runtime_1.jsx)("g", __assign({ mask: "url(#".concat(mask1, ")"), fillRule: 'evenodd', fill: '#262E33' }, { children: (0, jsx_runtime_1.jsx)("rect", { x: '0', y: '0', width: '264', height: '110' }) })), (0, jsx_runtime_1.jsxs)("g", __assign({ strokeWidth: '1', fillRule: 'evenodd', transform: 'translate(32, 28)' }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: '#3A4C5A', d: 'M68.784807,1.12222847 C30.512317,2.80409739 1.24427139e-14,34.3646437 0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z' }), (0, jsx_runtime_1.jsx)("path", { fill: '#E6E6E6', d: 'M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z' }), (0, jsx_runtime_1.jsx)("path", { fill: '#2F4351', d: 'M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z' }), (0, jsx_runtime_1.jsx)("path", { fill: '#2F4351', transform: 'translate(141, 41) scale(-1, 1) translate(-141, -41)', d: 'M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z' })] })), (0, jsx_runtime_1.jsx)("path", { fill: '#F2F2F2', fillRule: 'evenodd', d: 'M156,21.5390062 C162.772319,26.1359565 167,32.6563196 167,39.8878801 C167,47.2887711 162.572015,53.9447688 155.520105,58.5564942 L149.57933,53.8764929 L145,54.207887 L146,51.0567821 L145.922229,50.995516 C152.022491,47.8530505 156,42.7003578 156,36.8768102 L156,21.5390062 Z M108,21.5390062 C101.227681,26.1359565 97,32.6563196 97,39.8878801 C97,47.2887711 101.427985,53.9447688 108.479895,58.5564942 L114.42067,53.8764929 L119,54.207887 L118,51.0567821 L118.077771,50.995516 C111.977509,47.8530505 108,42.7003578 108,36.8768102 L108,21.5390062 Z' })] })));
+}
+exports.default = BlazerSweater;

package/dist/avatar/clothes/ClotheColor.d.ts

@@ -0,0 +1,4 @@
+export interface Props {
+    maskID: string;
+}
+export default function ClotheColor({ maskID }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/avatar/clothes/ClotheColor.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ClotheColorName_1 = __importDefault(require("./ClotheColorName"));
+var react_1 = require("react");
+var AvatarContext_1 = __importDefault(require("../AvatarContext"));
+var Color_1 = __importDefault(require("../Color"));
+function ClotheColor(_a) {
+    var maskID = _a.maskID;
+    var color = (0, react_1.useContext)(AvatarContext_1.default).clotheColor;
+    return (0, jsx_runtime_1.jsx)(Color_1.default, { maskID: maskID, color: getClothColor(color), fillRule: 'evenodd' });
+}
+exports.default = ClotheColor;
+function getClothColor(color) {
+    if (color && color.startsWith('#'))
+        return color;
+    switch (color) {
+        case ClotheColorName_1.default.Black:
+            return '#262E33';
+        case ClotheColorName_1.default.Blue01:
+            return '#65C9FF';
+        case ClotheColorName_1.default.Blue02:
+            return '#5199E4';
+        case ClotheColorName_1.default.Blue03:
+            return '#25557C';
+        case ClotheColorName_1.default.Gray02:
+            return '#929598';
+        case ClotheColorName_1.default.Heather:
+            return '#3C4F5C';
+        case ClotheColorName_1.default.PastelBlue:
+            return '#B1E2FF';
+        case ClotheColorName_1.default.PastelGreen:
+            return '#A7FFC4';
+        case ClotheColorName_1.default.PastelOrange:
+            return '#FFDEB5';
+        case ClotheColorName_1.default.PastelRed:
+            return '#FFAFB9';
+        case ClotheColorName_1.default.PastelYellow:
+            return '#FFFFB1';
+        case ClotheColorName_1.default.Red:
+            return '#FF5C5C';
+        case ClotheColorName_1.default.Pink:
+            return '#FF488E';
+        case ClotheColorName_1.default.White:
+            return '#FFFFFF';
+        case ClotheColorName_1.default.Gray01:
+        default:
+            return '#E6E6E6';
+    }
+}

package/dist/avatar/clothes/ClotheColorName.d.ts

@@ -0,0 +1,18 @@
+declare enum ClotheColorName {
+    Black = "Black",
+    Blue01 = "Blue01",
+    Blue02 = "Blue02",
+    Blue03 = "Blue03",
+    Gray01 = "Gray01",
+    Gray02 = "Gray02",
+    Heather = "Heather",
+    PastelBlue = "PastelBlue",
+    PastelGreen = "PastelGreen",
+    PastelOrange = "PastelOrange",
+    PastelRed = "PastelRed",
+    PastelYellow = "PastelYellow",
+    Pink = "Pink",
+    Red = "Red",
+    White = "White"
+}
+export default ClotheColorName;