		import React, { Component } from 'react';
		import PropTypes from 'prop-types';
		import cx from 'classnames';
		import { polyfill } from 'react-lifecycles-compat';
		import { ThemeContext } from '@hig/theme-context';

		/*

		Based off glamor's StyleSheet, thanks Sunil ❤️

		high performance StyleSheet for css-in-js systems

		- uses multiple style tags behind the scenes for millions of rules
		- uses `insertRule` for appending in production for much faster performance

		// usage

		import { StyleSheet } from '@emotion/sheet'

		let styleSheet = new StyleSheet({ key: '', container: document.head })

		styleSheet.insert('#box { border: 1px solid red; }')
		- appends a css rule into the stylesheet

		styleSheet.flush()
		- empties the stylesheet of all its contents

		*/
		// $FlowFixMe
		function sheetForTag(tag) {
		if (tag.sheet) {
		// $FlowFixMe
		return tag.sheet;
		} // this weirdness brought to you by firefox

		/* istanbul ignore next */

		for (var i = 0; i < document.styleSheets.length; i++) {
		if (document.styleSheets[i].ownerNode === tag) {
		// $FlowFixMe
		return document.styleSheets[i];
		}
		}
		}

		function createStyleElement(options) {
		var tag = document.createElement('style');
		tag.setAttribute('data-emotion', options.key);

		if (options.nonce !== undefined) {
		tag.setAttribute('nonce', options.nonce);
		}

		tag.appendChild(document.createTextNode(''));
		return tag;
		}

		var StyleSheet =
		/#__PURE__/
		function () {
		function StyleSheet(options) {
		this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
		this.tags = [];
		this.ctr = 0;
		this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets

		this.key = options.key;
		this.container = options.container;
		this.before = null;
		}

		var _proto = StyleSheet.prototype;

		_proto.insert = function insert(rule) {
		// the max length is how many rules we have per style tag, it's 65000 in speedy mode
		// it's 1 in dev because we insert source maps that map a single rule to a location
		// and you can only have one source map per style tag
		if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
		var _tag = createStyleElement(this);

		var before;

		if (this.tags.length === 0) {
		before = this.before;
		} else {
		before = this.tags[this.tags.length - 1].nextSibling;
		}

		this.container.insertBefore(_tag, before);
		this.tags.push(_tag);
		}

		var tag = this.tags[this.tags.length - 1];

		if (this.isSpeedy) {
		var sheet = sheetForTag(tag);

		try {
		// this is a really hot path
		// we check the second character first because having "i"
		// as the second character will happen less often than
		// having "@" as the first character
		var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers
		// the big drawback is that the css won't be editable in devtools

		sheet.insertRule(rule, // we need to insert @import rules before anything else
		// otherwise there will be an error
		// technically this means that the @import rules will
		// _usually_(not always since there could be multiple style tags)
		// be the first ones in prod and generally later in dev
		// this shouldn't really matter in the real world though
		// @import is generally only used for font faces from google fonts and etc.
		// so while this could be technically correct then it would be slower and larger
		// for a tiny bit of correctness that won't matter in the real world
		isImportRule ? 0 : sheet.cssRules.length);
		} catch (e) {
		if (process.env.NODE_ENV !== 'production') {
		console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
		}
		}
		} else {
		tag.appendChild(document.createTextNode(rule));
		}

		this.ctr++;
		};

		_proto.flush = function flush() {
		// $FlowFixMe
		this.tags.forEach(function (tag) {
		return tag.parentNode.removeChild(tag);
		});
		this.tags = [];
		this.ctr = 0;
		};

		return StyleSheet;
		}();

		var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

		function stylis_min(W) {
		function M(d, c, e, h, a) {
		for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
		g = e.charCodeAt(l);
		l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);

		if (0 === b + n + v + m) {
		if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
		switch (g) {
		case 32:
		case 9:
		case 59:
		case 13:
		case 10:
		break;

		default:
		f += e.charAt(l);
		}

		g = 59;
		}

		switch (g) {
		case 123:
		f = f.trim();
		q = f.charCodeAt(0);
		k = 1;

		for (t = ++l; l < B;) {
		switch (g = e.charCodeAt(l)) {
		case 123:
		k++;
		break;

		case 125:
		k--;
		break;

		case 47:
		switch (g = e.charCodeAt(l + 1)) {
		case 42:
		case 47:
		a: {
		for (u = l + 1; u < J; ++u) {
		switch (e.charCodeAt(u)) {
		case 47:
		if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {
		l = u + 1;
		break a;
		}

		break;

		case 10:
		if (47 === g) {
		l = u + 1;
		break a;
		}

		}
		}

		l = u;
		}

		}

		break;

		case 91:
		g++;

		case 40:
		g++;

		case 34:
		case 39:
		for (; l++ < J && e.charCodeAt(l) !== g;) {}

		}

		if (0 === k) break;
		l++;
		}

		k = e.substring(t, l);
		0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));

		switch (q) {
		case 64:
		0 < r && (f = f.replace(N, ''));
		g = f.charCodeAt(1);

		switch (g) {
		case 100:
		case 109:
		case 115:
		case 45:
		r = c;
		break;

		default:
		r = O;
		}

		k = M(c, r, k, g, a + 1);
		t = k.length;
		0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));
		if (0 < t) switch (g) {
		case 115:
		f = f.replace(da, ea);

		case 100:
		case 109:
		case 45:
		k = f + '{' + k + '}';
		break;

		case 107:
		f = f.replace(fa, '$1 $2');
		k = f + '{' + k + '}';
		k = 1 === w \|\| 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;
		break;

		default:
		k = f + k, 112 === h && (k = (p += k, ''));
		} else k = '';
		break;

		default:
		k = M(c, X(c, f, I), k, h, a + 1);
		}

		F += k;
		k = I = r = u = q = 0;
		f = '';
		g = e.charCodeAt(++l);
		break;

		case 125:
		case 59:
		f = (0 < r ? f.replace(N, '') : f).trim();
		if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q \|\| 96 < q && 123 > q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\x00\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {
		case 0:
		break;

		case 64:
		if (105 === g \|\| 99 === g) {
		G += f + e.charAt(l);
		break;
		}

		default:
		58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));
		}
		I = r = u = q = 0;
		f = '';
		g = e.charCodeAt(++l);
		}
		}

		switch (g) {
		case 13:
		case 10:
		47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00');
		0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);
		z = 1;
		D++;
		break;

		case 59:
		case 125:
		if (0 === b + n + v + m) {
		z++;
		break;
		}

		default:
		z++;
		y = e.charAt(l);

		switch (g) {
		case 9:
		case 32:
		if (0 === n + m + b) switch (x) {
		case 44:
		case 58:
		case 9:
		case 32:
		y = '';
		break;

		default:
		32 !== g && (y = ' ');
		}
		break;

		case 0:
		y = '\\0';
		break;

		case 12:
		y = '\\f';
		break;

		case 11:
		y = '\\v';
		break;

		case 38:
		0 === n + b + m && (r = I = 1, y = '\f' + y);
		break;

		case 108:
		if (0 === n + b + m + E && 0 < u) switch (l - u) {
		case 2:
		112 === x && 58 === e.charCodeAt(l - 3) && (E = x);

		case 8:
		111 === K && (E = K);
		}
		break;

		case 58:
		0 === n + b + m && (u = l);
		break;

		case 44:
		0 === b + v + n + m && (r = 1, y += '\r');
		break;

		case 34:
		case 39:
		0 === b && (n = n === g ? 0 : 0 === n ? g : n);
		break;

		case 91:
		0 === n + b + v && m++;
		break;

		case 93:
		0 === n + b + v && m--;
		break;

		case 41:
		0 === n + b + m && v--;
		break;

		case 40:
		if (0 === n + b + m) {
		if (0 === q) switch (2 * x + 3 * K) {
		case 533:
		break;

		default:
		q = 1;
		}
		v++;
		}

		break;

		case 64:
		0 === b + v + n + m + u + k && (k = 1);
		break;

		case 42:
		case 47:
		if (!(0 < n + m + v)) switch (b) {
		case 0:
		switch (2 * g + 3 * e.charCodeAt(l + 1)) {
		case 235:
		b = 47;
		break;

		case 220:
		t = l, b = 42;
		}

		break;

		case 42:
		47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);
		}
		}

		0 === b && (f += y);
		}

		K = x;
		x = g;
		l++;
		}

		t = p.length;

		if (0 < t) {
		r = c;
		if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;
		p = r.join(',') + '{' + p + '}';

		if (0 !== w * E) {
		2 !== w \|\| L(p, 2) \|\| (E = 0);

		switch (E) {
		case 111:
		p = p.replace(ha, ':-moz-$1') + p;
		break;

		case 112:
		p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;
		}

		E = 0;
		}
		}

		return G + p + F;
		}

		function X(d, c, e) {
		var h = c.trim().split(ia);
		c = h;
		var a = h.length,
		m = d.length;

		switch (m) {
		case 0:
		case 1:
		var b = 0;

		for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
		c[b] = Z(d, c[b], e, m).trim();
		}

		break;

		default:
		var v = b = 0;

		for (c = []; b < a; ++b) {
		for (var n = 0; n < m; ++n) {
		c[v++] = Z(d[n] + ' ', h[b], e, m).trim();
		}
		}

		}

		return c;
		}

		function Z(d, c, e) {
		var h = c.charCodeAt(0);
		33 > h && (h = (c = c.trim()).charCodeAt(0));

		switch (h) {
		case 38:
		return c.replace(F, '$1' + d.trim());

		case 58:
		return d.trim() + c.replace(F, '$1' + d.trim());

		default:
		if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());
		}

		return d + c;
		}

		function P(d, c, e, h) {
		var a = d + ';',
		m = 2 * c + 3 * e + 4 * h;

		if (944 === m) {
		d = a.indexOf(':', 9) + 1;
		var b = a.substring(d, a.length - 1).trim();
		b = a.substring(0, d).trim() + b + ';';
		return 1 === w \|\| 2 === w && L(b, 1) ? '-webkit-' + b + b : b;
		}

		if (0 === w \|\| 2 === w && !L(a, 1)) return a;

		switch (m) {
		case 1015:
		return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;

		case 951:
		return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;

		case 963:
		return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;

		case 1009:
		if (100 !== a.charCodeAt(4)) break;

		case 969:
		case 942:
		return '-webkit-' + a + a;

		case 978:
		return '-webkit-' + a + '-moz-' + a + a;

		case 1019:
		case 983:
		return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;

		case 883:
		if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;
		if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;
		break;

		case 932:
		if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {
		case 103:
		return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;

		case 115:
		return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;

		case 98:
		return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;
		}
		return '-webkit-' + a + '-ms-' + a + a;

		case 964:
		return '-webkit-' + a + '-ms-flex-' + a + a;

		case 1023:
		if (99 !== a.charCodeAt(8)) break;
		b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');
		return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;

		case 1005:
		return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;

		case 1e3:
		b = a.substring(13).trim();
		c = b.indexOf('-') + 1;

		switch (b.charCodeAt(0) + b.charCodeAt(c)) {
		case 226:
		b = a.replace(G, 'tb');
		break;

		case 232:
		b = a.replace(G, 'tb-rl');
		break;

		case 220:
		b = a.replace(G, 'lr');
		break;

		default:
		return a;
		}

		return '-webkit-' + a + '-ms-' + b + a;

		case 1017:
		if (-1 === a.indexOf('sticky', 9)) break;

		case 975:
		c = (a = d).length - 10;
		b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();

		switch (m = b.charCodeAt(0) + (b.charCodeAt(7) \| 0)) {
		case 203:
		if (111 > b.charCodeAt(8)) break;

		case 115:
		a = a.replace(b, '-webkit-' + b) + ';' + a;
		break;

		case 207:
		case 102:
		a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;
		}

		return a + ';';

		case 938:
		if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {
		case 105:
		return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;

		case 115:
		return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;

		default:
		return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;
		}
		break;

		case 973:
		case 989:
		if (45 !== a.charCodeAt(3) \|\| 122 === a.charCodeAt(4)) break;

		case 931:
		case 953:
		if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;
		break;

		case 962:
		if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;
		}

		return a;
		}

		function L(d, c) {
		var e = d.indexOf(1 === c ? ':' : '{'),
		h = d.substring(0, 3 !== c ? e : 10);
		e = d.substring(e + 1, d.length - 1);
		return R(2 !== c ? h : h.replace(na, '$1'), e, c);
		}

		function ea(d, c) {
		var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));
		return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';
		}

		function H(d, c, e, h, a, m, b, v, n, q) {
		for (var g = 0, x = c, w; g < A; ++g) {
		switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {
		case void 0:
		case !1:
		case !0:
		case null:
		break;

		default:
		x = w;
		}
		}

		if (x !== c) return x;
		}

		function T(d) {
		switch (d) {
		case void 0:
		case null:
		A = S.length = 0;
		break;

		default:
		if ('function' === typeof d) S[A++] = d;else if ('object' === (typeof d === 'undefined' ? 'undefined' : _typeof(d))) for (var c = 0, e = d.length; c < e; ++c) {
		T(d[c]);
		} else Y = !!d \| 0;
		}

		return T;
		}

		function U(d) {
		d = d.prefix;
		void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);
		return U;
		}

		function B(d, c) {
		var e = d;
		33 > e.charCodeAt(0) && (e = e.trim());
		V = e;
		e = [V];

		if (0 < A) {
		var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);
		void 0 !== h && 'string' === typeof h && (c = h);
		}

		var a = M(O, e, c, 0, 0);
		0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));
		V = '';
		E = 0;
		z = D = 1;
		return a;
		}

		var ca = /^\0+/g,
		N = /[\0\r\f]/g,
		aa = /: */g,
		ka = /zoo\|gra/,
		ma = /([,: ])(transform)/g,
		ia = /,\r+?/g,
		F = /([\t\r\n ])*\f?&/g,
		fa = /@(k\w+)\s(\S)\s*/,
		Q = /::(place)/g,
		ha = /:(read-only)/g,
		G = /[svh]\w+-[tblr]{2}/,
		da = /$\s(.)\s*$/g,
		oa = /([\s\S]*?);/g,
		ba = /-self\|flex-/g,
		na = /[^]?(:[rp][el]a[\w-]+)[^]/,
		la = /stretch\|:\s*\w+\-(?:conte\|avail)/,
		ja = /([^-])(image-set\()/,
		z = 1,
		D = 1,
		E = 0,
		w = 1,
		O = [],
		S = [],
		A = 0,
		R = null,
		Y = 0,
		V = '';
		B.use = T;
		B.set = U;
		void 0 !== W && U(W);
		return B;
		}

		var weakMemoize = function weakMemoize(func) {
		// $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
		var cache = new WeakMap();
		return function (arg) {
		if (cache.has(arg)) {
		// $FlowFixMe
		return cache.get(arg);
		}

		var ret = func(arg);
		cache.set(arg, ret);
		return ret;
		};
		};

		// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
		// inlined to avoid umd wrapper and peerDep warnings/installing stylis
		// since we use stylis after closure compiler
		var delimiter = '/\|/';
		var needle = delimiter + '}';

		function toSheet(block) {
		if (block) {
		Sheet.current.insert(block + '}');
		}
		}

		var Sheet = {
		current: null
		};
		var ruleSheet = function ruleSheet(context, content, selectors, parents, line, column, length, ns, depth, at) {
		switch (context) {
		// property
		case 1:
		{
		switch (content.charCodeAt(0)) {
		case 64:
		{
		// @import
		Sheet.current.insert(content + ';');
		return '';
		}
		// charcode for l

		case 108:
		{
		// charcode for b
		// this ignores label
		if (content.charCodeAt(2) === 98) {
		return '';
		}
		}
		}

		break;
		}
		// selector

		case 2:
		{
		if (ns === 0) return content + delimiter;
		break;
		}
		// at-rule

		case 3:
		{
		switch (ns) {
		// @font-face, @page
		case 102:
		case 112:
		{
		Sheet.current.insert(selectors[0] + content);
		return '';
		}

		default:
		{
		return content + (at === 0 ? delimiter : '');
		}
		}
		}

		case -2:
		{
		content.split(needle).forEach(toSheet);
		}
		}
		};
		var removeLabel = function removeLabel(context, content) {
		if (context === 1 && // charcode for l
		content.charCodeAt(0) === 108 && // charcode for b
		content.charCodeAt(2) === 98 // this ignores label
		) {
		return '';
		}
		};

		var isBrowser = typeof document !== 'undefined';
		var rootServerStylisCache = {};
		var getServerStylisCache = isBrowser ? undefined : weakMemoize(function () {
		var getCache = weakMemoize(function () {
		return {};
		});
		var prefixTrueCache = {};
		var prefixFalseCache = {};
		return function (prefix) {
		if (prefix === undefined \|\| prefix === true) {
		return prefixTrueCache;
		}

		if (prefix === false) {
		return prefixFalseCache;
		}

		return getCache(prefix);
		};
		});

		var createCache = function createCache(options) {
		if (options === undefined) options = {};
		var key = options.key \|\| 'css';
		var stylisOptions;

		if (options.prefix !== undefined) {
		stylisOptions = {
		prefix: options.prefix
		};
		}

		var stylis = new stylis_min(stylisOptions);

		if (process.env.NODE_ENV !== 'production') {
		// $FlowFixMe
		if (/[^a-z-]/.test(key)) {
		throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
		}
		}

		var inserted = {}; // $FlowFixMe

		var container;

		if (isBrowser) {
		container = options.container \|\| document.head;
		var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
		Array.prototype.forEach.call(nodes, function (node) {
		var attrib = node.getAttribute("data-emotion-" + key); // $FlowFixMe

		attrib.split(' ').forEach(function (id) {
		inserted[id] = true;
		});

		if (node.parentNode !== container) {
		container.appendChild(node);
		}
		});
		}

		var _insert;

		if (isBrowser) {
		stylis.use(options.stylisPlugins)(ruleSheet);

		_insert = function insert(selector, serialized, sheet, shouldCache) {
		var name = serialized.name;
		Sheet.current = sheet;

		if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {
		var map = serialized.map;
		Sheet.current = {
		insert: function insert(rule) {
		sheet.insert(rule + map);
		}
		};
		}

		stylis(selector, serialized.styles);

		if (shouldCache) {
		cache.inserted[name] = true;
		}
		};
		} else {
		stylis.use(removeLabel);
		var serverStylisCache = rootServerStylisCache;

		if (options.stylisPlugins \|\| options.prefix !== undefined) {
		stylis.use(options.stylisPlugins); // $FlowFixMe

		serverStylisCache = getServerStylisCache(options.stylisPlugins \|\| rootServerStylisCache)(options.prefix);
		}

		var getRules = function getRules(selector, serialized) {
		var name = serialized.name;

		if (serverStylisCache[name] === undefined) {
		serverStylisCache[name] = stylis(selector, serialized.styles);
		}

		return serverStylisCache[name];
		};

		_insert = function _insert(selector, serialized, sheet, shouldCache) {
		var name = serialized.name;
		var rules = getRules(selector, serialized);

		if (cache.compat === undefined) {
		// in regular mode, we don't set the styles on the inserted cache
		// since we don't need to and that would be wasting memory
		// we return them so that they are rendered in a style tag
		if (shouldCache) {
		cache.inserted[name] = true;
		}

		if ( // using === development instead of !== production
		// because if people do ssr in tests, the source maps showing up would be annoying
		process.env.NODE_ENV === 'development' && serialized.map !== undefined) {
		return rules + serialized.map;
		}

		return rules;
		} else {
		// in compat mode, we put the styles on the inserted cache so
		// that emotion-server can pull out the styles
		// except when we don't want to cache it(just the Global component right now)
		if (shouldCache) {
		cache.inserted[name] = rules;
		} else {
		return rules;
		}
		}
		};
		}

		if (process.env.NODE_ENV !== 'production') {
		// https://esbench.com/bench/5bf7371a4cd7e6009ef61d0a
		var commentStart = /\/\*/g;
		var commentEnd = /\*\//g;
		stylis.use(function (context, content) {
		switch (context) {
		case -1:
		{
		while (commentStart.test(content)) {
		commentEnd.lastIndex = commentStart.lastIndex;

		if (commentEnd.test(content)) {
		commentStart.lastIndex = commentEnd.lastIndex;
		continue;
		}

		throw new Error('Your styles have an unterminated comment ("/" without corresponding "/").');
		}

		commentStart.lastIndex = 0;
		break;
		}
		}
		});
		stylis.use(function (context, content, selectors) {
		switch (context) {
		case 2:
		{
		for (var i = 0, len = selectors.length; len > i; i++) {
		// :last-child isn't included here since it's safe
		// because a style element will never be the last element
		var match = selectors[i].match(/:(first\|nth\|nth-last)-child/);

		if (match !== null) {
		console.error("The pseudo class \"" + match[0] + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + match[1] + "-of-type\"");
		}
		}

		break;
		}
		}
		});
		}

		var cache = {
		key: key,
		sheet: new StyleSheet({
		key: key,
		container: container,
		nonce: options.nonce,
		speedy: options.speedy
		}),
		nonce: options.nonce,
		inserted: inserted,
		registered: {},
		insert: _insert
		};
		return cache;
		};

		/* eslint-disable */
		// murmurhash2 via https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js
		function murmurhash2_32_gc(str) {
		var l = str.length,
		h = l ^ l,
		i = 0,
		k;

		while (l >= 4) {
		k = str.charCodeAt(i) & 0xff \| (str.charCodeAt(++i) & 0xff) << 8 \| (str.charCodeAt(++i) & 0xff) << 16 \| (str.charCodeAt(++i) & 0xff) << 24;
		k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		k ^= k >>> 24;
		k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16) ^ k;
		l -= 4;
		++i;
		}

		switch (l) {
		case 3:
		h ^= (str.charCodeAt(i + 2) & 0xff) << 16;

		case 2:
		h ^= (str.charCodeAt(i + 1) & 0xff) << 8;

		case 1:
		h ^= str.charCodeAt(i) & 0xff;
		h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		}

		h ^= h >>> 13;
		h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		h ^= h >>> 15;
		return (h >>> 0).toString(36);
		}

		var unitlessKeys = {
		animationIterationCount: 1,
		borderImageOutset: 1,
		borderImageSlice: 1,
		borderImageWidth: 1,
		boxFlex: 1,
		boxFlexGroup: 1,
		boxOrdinalGroup: 1,
		columnCount: 1,
		columns: 1,
		flex: 1,
		flexGrow: 1,
		flexPositive: 1,
		flexShrink: 1,
		flexNegative: 1,
		flexOrder: 1,
		gridRow: 1,
		gridRowEnd: 1,
		gridRowSpan: 1,
		gridRowStart: 1,
		gridColumn: 1,
		gridColumnEnd: 1,
		gridColumnSpan: 1,
		gridColumnStart: 1,
		msGridRow: 1,
		msGridRowSpan: 1,
		msGridColumn: 1,
		msGridColumnSpan: 1,
		fontWeight: 1,
		lineHeight: 1,
		opacity: 1,
		order: 1,
		orphans: 1,
		tabSize: 1,
		widows: 1,
		zIndex: 1,
		zoom: 1,
		WebkitLineClamp: 1,
		// SVG-related properties
		fillOpacity: 1,
		floodOpacity: 1,
		stopOpacity: 1,
		strokeDasharray: 1,
		strokeDashoffset: 1,
		strokeMiterlimit: 1,
		strokeOpacity: 1,
		strokeWidth: 1
		};

		function memoize(fn) {
		var cache = {};
		return function (arg) {
		if (cache[arg] === undefined) cache[arg] = fn(arg);
		return cache[arg];
		};
		}

		var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

		var hyphenateRegex = /[A-Z]\|^ms/g;
		var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
		var processStyleName = memoize(function (styleName) {
		return styleName.replace(hyphenateRegex, '-$&').toLowerCase();
		});

		var processStyleValue = function processStyleValue(key, value) {
		if (value == null \|\| typeof value === 'boolean') {
		return '';
		}

		switch (key) {
		case 'animation':
		case 'animationName':
		{
		if (typeof value === 'string') {
		value = value.replace(animationRegex, function (match, p1, p2) {
		cursor = {
		name: p1,
		styles: p2,
		next: cursor
		};
		return p1;
		});
		}
		}
		}

		if (unitlessKeys[key] !== 1 && key.charCodeAt(1) !== 45 && // custom properties
		typeof value === 'number' && value !== 0) {
		return value + 'px';
		}

		return value;
		};

		if (process.env.NODE_ENV !== 'production') {
		var contentValuePattern = /(attr\|calc\|counters?\|url)\(/;
		var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
		var oldProcessStyleValue = processStyleValue;
		var msPattern = /^-ms-/;
		var hyphenPattern = /-(.)/g;
		var hyphenatedCache = {};

		processStyleValue = function processStyleValue(key, value) {
		if (key === 'content') {
		if (typeof value !== 'string' \|\| contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) \|\| value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
		console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
		}
		}

		if (key.charCodeAt(1) !== 45 && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
		hyphenatedCache[key] = true;
		console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, char) {
		return char.toUpperCase();
		}) + "?");
		}

		return oldProcessStyleValue(key, value);
		};
		}

		var shouldWarnAboutInterpolatingClassNameFromCss = true;

		function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
		if (interpolation == null) {
		return '';
		}

		if (interpolation.__emotion_styles !== undefined) {
		if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
		throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
		}

		return interpolation;
		}

		switch (typeof interpolation === 'undefined' ? 'undefined' : _typeof$1(interpolation)) {
		case 'boolean':
		{
		return '';
		}

		case 'object':
		{
		if (interpolation.anim === 1) {
		cursor = {
		name: interpolation.name,
		styles: interpolation.styles,
		next: cursor
		};
		return interpolation.name;
		}

		if (interpolation.styles !== undefined) {
		var next = interpolation.next;

		if (next !== undefined) {
		// not the most efficient thing ever but this is a pretty rare case
		// and there will be very few iterations of this generally
		while (next !== undefined) {
		cursor = {
		name: next.name,
		styles: next.styles,
		next: cursor
		};
		next = next.next;
		}
		}

		return interpolation.styles;
		}

		return createStringFromObject(mergedProps, registered, interpolation);
		}

		case 'function':
		{
		if (mergedProps !== undefined) {
		var previousCursor = cursor;
		var result = interpolation(mergedProps);
		cursor = previousCursor;
		return handleInterpolation(mergedProps, registered, result, couldBeSelectorInterpolation);
		} else if (process.env.NODE_ENV !== 'production') {
		console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
		}
		}
		// eslint-disable-next-line no-fallthrough

		default:
		{
		if (registered == null) {
		return interpolation;
		}

		var cached = registered[interpolation];

		if (process.env.NODE_ENV !== 'production' && couldBeSelectorInterpolation && shouldWarnAboutInterpolatingClassNameFromCss && cached !== undefined) {
		console.error('Interpolating a className from css`` is not recommended and will cause problems with composition.\n' + 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion');
		shouldWarnAboutInterpolatingClassNameFromCss = false;
		}

		return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
		}
		}
		}

		function createStringFromObject(mergedProps, registered, obj) {
		var string = '';

		if (Array.isArray(obj)) {
		for (var i = 0; i < obj.length; i++) {
		string += handleInterpolation(mergedProps, registered, obj[i], false);
		}
		} else {
		for (var _key in obj) {
		var value = obj[_key];

		if ((typeof value === 'undefined' ? 'undefined' : _typeof$1(value)) !== 'object') {
		if (registered != null && registered[value] !== undefined) {
		string += _key + "{" + registered[value] + "}";
		} else {
		string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
		}
		} else {
		if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
		throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
		}

		if (Array.isArray(value) && (registered == null \|\| typeof value[0] === 'string' && registered[value[0]] === undefined)) {
		for (var _i = 0; _i < value.length; _i++) {
		string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
		}
		} else {
		string += _key + "{" + handleInterpolation(mergedProps, registered, value, false) + "}";
		}
		}
		}
		}

		return string;
		}

		var labelPattern = /label:\s([^\s;\n{]+)\s;/g;
		var sourceMapPattern;

		if (process.env.NODE_ENV !== 'production') {
		sourceMapPattern = /\/\#\ssourceMappingURL=data:application\/json;\S+\s+\\//;
		} // this is the cursor for keyframes
		// keyframes are stored on the SerializedStyles object as a linked list


		var cursor;
		var serializeStyles = function serializeStyles(args, registered, mergedProps) {
		if (args.length === 1 && _typeof$1(args[0]) === 'object' && args[0] !== null && args[0].styles !== undefined) {
		return args[0];
		}

		var stringMode = true;
		var styles = '';
		cursor = undefined;
		var strings = args[0];

		if (strings == null \|\| strings.raw === undefined) {
		stringMode = false;
		styles += handleInterpolation(mergedProps, registered, strings, false);
		} else {
		styles += strings[0];
		} // we start at 1 since we've already handled the first arg


		for (var i = 1; i < args.length; i++) {
		styles += handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);

		if (stringMode) {
		styles += strings[i];
		}
		}

		var sourceMap;

		if (process.env.NODE_ENV !== 'production') {
		styles = styles.replace(sourceMapPattern, function (match) {
		sourceMap = match;
		return '';
		});
		} // using a global regex with .exec is stateful so lastIndex has to be reset each time


		labelPattern.lastIndex = 0;
		var identifierName = '';
		var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5

		while ((match = labelPattern.exec(styles)) !== null) {
		identifierName += '-' + // $FlowFixMe we know it's not null
		match[1];
		}

		var name = murmurhash2_32_gc(styles) + identifierName;

		if (process.env.NODE_ENV !== 'production') {
		return {
		name: name,
		styles: styles,
		map: sourceMap,
		next: cursor
		};
		}

		return {
		name: name,
		styles: styles,
		next: cursor
		};
		};

		var isBrowser$1 = typeof document !== 'undefined';
		function getRegisteredStyles(registered, registeredStyles, classNames) {
		var rawClassName = '';
		classNames.split(' ').forEach(function (className) {
		if (registered[className] !== undefined) {
		registeredStyles.push(registered[className]);
		} else {
		rawClassName += className + " ";
		}
		});
		return rawClassName;
		}
		var insertStyles = function insertStyles(cache, serialized, isStringTag) {
		var className = cache.key + "-" + serialized.name;

		if ( // we only need to add the styles to the registered cache if the
		// class name could be used further down
		// the tree but if it's a string tag, we know it won't
		// so we don't have to add it to registered cache.
		// this improves memory usage since we can avoid storing the whole style string
		(isStringTag === false \|\| // we need to always store it if we're in compat mode and
		// in node since emotion-server relies on whether a style is in
		// the registered cache to know whether a style is global or not
		// also, note that this check will be dead code eliminated in the browser
		isBrowser$1 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
		cache.registered[className] = serialized.styles;
		}

		if (cache.inserted[serialized.name] === undefined) {
		var stylesForSSR = '';
		var current = serialized;

		do {
		var maybeStyles = cache.insert("." + className, current, cache.sheet, true);

		if (!isBrowser$1 && maybeStyles !== undefined) {
		stylesForSSR += maybeStyles;
		}

		current = current.next;
		} while (current !== undefined);

		if (!isBrowser$1 && stylesForSSR.length !== 0) {
		return stylesForSSR;
		}
		}
		};

		var _typeof$2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

		function insertWithoutScoping(cache, serialized) {
		if (cache.inserted[serialized.name] === undefined) {
		return cache.insert('', serialized, cache.sheet, true);
		}
		}

		function merge(registered, css, className) {
		var registeredStyles = [];
		var rawClassName = getRegisteredStyles(registered, registeredStyles, className);

		if (registeredStyles.length < 2) {
		return className;
		}

		return rawClassName + css(registeredStyles);
		}

		var createEmotion = function createEmotion(options) {
		var cache = createCache(options); // $FlowFixMe

		cache.sheet.speedy = function (value) {
		if (process.env.NODE_ENV !== 'production' && this.ctr !== 0) {
		throw new Error('speedy must be changed before any rules are inserted');
		}

		this.isSpeedy = value;
		};

		cache.compat = true;

		var css = function css() {
		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		var serialized = serializeStyles(args, cache.registered, this !== undefined ? this.mergedProps : undefined);
		insertStyles(cache, serialized, false);
		return cache.key + "-" + serialized.name;
		};

		var keyframes = function keyframes() {
		for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
		args[_key2] = arguments[_key2];
		}

		var serialized = serializeStyles(args, cache.registered);
		var animation = "animation-" + serialized.name;
		insertWithoutScoping(cache, {
		name: serialized.name,
		styles: "@keyframes " + animation + "{" + serialized.styles + "}"
		});
		return animation;
		};

		var injectGlobal = function injectGlobal() {
		for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
		args[_key3] = arguments[_key3];
		}

		var serialized = serializeStyles(args, cache.registered);
		insertWithoutScoping(cache, serialized);
		};

		var cx = function cx() {
		for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
		args[_key4] = arguments[_key4];
		}

		return merge(cache.registered, css, classnames(args));
		};

		return {
		css: css,
		cx: cx,
		injectGlobal: injectGlobal,
		keyframes: keyframes,
		hydrate: function hydrate(ids) {
		ids.forEach(function (key) {
		cache.inserted[key] = true;
		});
		},
		flush: function flush() {
		cache.registered = {};
		cache.inserted = {};
		cache.sheet.flush();
		},
		// $FlowFixMe
		sheet: cache.sheet,
		cache: cache,
		getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
		merge: merge.bind(null, cache.registered, css)
		};
		};

		var classnames = function classnames(args) {
		var cls = '';

		for (var i = 0; i < args.length; i++) {
		var arg = args[i];
		if (arg == null) continue;
		var toAdd = void 0;

		switch (typeof arg === 'undefined' ? 'undefined' : _typeof$2(arg)) {
		case 'boolean':
		break;

		case 'object':
		{
		if (Array.isArray(arg)) {
		toAdd = classnames(arg);
		} else {
		toAdd = '';

		for (var k in arg) {
		if (arg[k] && k) {
		toAdd && (toAdd += ' ');
		toAdd += k;
		}
		}
		}

		break;
		}

		default:
		{
		toAdd = arg;
		}
		}

		if (toAdd) {
		cls && (cls += ' ');
		cls += toAdd;
		}
		}

		return cls;
		};

		var context = typeof global !== 'undefined' ? global : {};

		var _createEmotion = createEmotion(context),
		css = _createEmotion.css;

		var sizes = Object.freeze({
		@@ -10,4 +1598,3 @@ SMALL_16: "small",
		MEDIUM_32: "medium-32",
		LARGE_36: "large",
		LARGE_48: "large-48",
		LARGE_48: "large",
		XLARGE_64: "extralarge"
		@@ -18,6 +1605,57 @@ });

		var _SizeMapping;

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		var SizeMapping = (_SizeMapping = {}, _defineProperty(_SizeMapping, sizes.SMALL_16, "extraSmall"), _defineProperty(_SizeMapping, sizes.MEDIUM_24, "small"), _defineProperty(_SizeMapping, sizes.MEDIUM_32, "medium"), _defineProperty(_SizeMapping, sizes.LARGE_48, "large"), _defineProperty(_SizeMapping, sizes.XLARGE_64, "extraLarge"), _SizeMapping);

		function stylesheet(props, themeData) {
		var size = props.size,
		backgroundId = props.backgroundId;

		var sizeString = size ? SizeMapping[size] : SizeMapping[sizes.MEDIUM_32];
		var diameter = themeData["avatar." + sizeString + ".diameter"];
		var fontSize = themeData["avatar." + sizeString + ".fontSize"];
		var fontFamily = themeData["basics.fontFamilies.main"];
		var bgColor = themeData["avatar.color" + (backgroundId \|\| 1) + ".backgroundColor"];
		var fgColor = themeData["avatar.color" + (backgroundId \|\| 1) + ".fontColor"];

		return {
		avatar: {
		container: {
		backgroundColor: bgColor,
		color: fgColor,
		width: diameter,
		height: diameter,
		lineHeight: diameter,
		fontSize: fontSize,
		display: "block",
		position: "relative",
		margin: 0,
		overflow: "hidden",
		borderRadius: "50%",
		textAlign: "center"
		},
		imageWrapper: {
		position: "absolute",
		display: "flex",
		zIndex: "2",
		fontSize: fontSize
		},
		image: {
		borderRadius: "50%",
		width: diameter,
		height: diameter
		},
		initials: {
		width: diameter,
		height: diameter,
		fontFamily: fontFamily
		}
		}
		};
		}

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _modifiersBySize;

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -29,4 +1667,2 @@

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		/**
		@@ -47,3 +1683,3 @@ * @param {number} value
		function backgroundIdFromName(name) {
		return convertRanges(name.charCodeAt(0) - 65, [0, 26], [1, 9]);
		return convertRanges(name.charCodeAt(0) - 65, [0, 26], [1, 8]);
		}
		@@ -71,11 +1707,14 @@
		name = _ref.name,
		onError = _ref.onError;
		size = _ref.size,
		onError = _ref.onError,
		resolvedRoles = _ref.resolvedRoles;

		var alt = "Avatar image of " + name;
		var styles = stylesheet({ size: size }, resolvedRoles);

		return React.createElement(
		"span",
		{ className: "hig__avatarV2__image-wrapper" },
		{ className: css(styles.avatar.imageWrapper) },
		React.createElement("img", {
		className: "hig__avatarV2__image",
		className: css(styles.avatar.image),
		src: image,
		@@ -95,25 +1734,16 @@ alt: alt,
		function Initials(_ref2) {
		var name = _ref2.name;
		var size = _ref2.size,
		name = _ref2.name,
		resolvedRoles = _ref2.resolvedRoles;

		var styles = stylesheet({ size: size, name: name }, resolvedRoles);
		var initials = initialsFromName(name);

		return React.createElement(
		"span",
		{ className: "hig__avatarV2__initials", "aria-hidden": "true" },
		initialsFromName(name)
		{ className: css(styles.avatar.initials), "aria-hidden": "true" },
		size === sizes.SMALL_16 ? initials[0] : initials
		);
		}

		var modifiersBySize = (_modifiersBySize = {}, _defineProperty(_modifiersBySize, sizes.SMALL_16, "hig__avatarV2--size--small"), _defineProperty(_modifiersBySize, sizes.MEDIUM_24, "hig__avatarV2--size--medium"), _defineProperty(_modifiersBySize, sizes.MEDIUM_32, "hig__avatarV2--size--medium-32"), _defineProperty(_modifiersBySize, sizes.LARGE_36, "hig__avatarV2--size--large"), _defineProperty(_modifiersBySize, sizes.LARGE_48, "hig__avatarV2--size--large-48"), _defineProperty(_modifiersBySize, sizes.XLARGE_64, "hig__avatarV2--size--extralarge"), _modifiersBySize);

		var modifiersByBackgroundId = {
		"1": "hig__avatarV2__background--turquoise",
		"2": "hig__avatarV2__background--purple",
		"3": "hig__avatarV2__background--pink",
		"4": "hig__avatarV2__background--salmon",
		"5": "hig__avatarV2__background--blue",
		"6": "hig__avatarV2__background--green",
		"7": "hig__avatarV2__background--turquoise",
		"8": "hig__avatarV2__background--indigo",
		"9": "hig__avatarV2__background--gold"
		};

		/**
		@@ -179,9 +1809,28 @@ * @typedef {Object} AvatarProps
		var showImage = imageUrl && !hasImageError;
		var classes = cx("hig__avatarV2", modifiersBySize[size], modifiersByBackgroundId[backgroundId]);
		var styles = function styles(roles) {
		return stylesheet({ size: size, backgroundId: backgroundId }, roles);
		};

		return React.createElement(
		"span",
		{ "aria-label": label, className: classes, role: "img" },
		!showImage ? null : React.createElement(Image, { image: imageUrl, name: name, onError: handleImageError }),
		React.createElement(Initials, { name: name })
		ThemeContext.Consumer,
		null,
		function (_ref4) {
		var resolvedRoles = _ref4.resolvedRoles;
		return React.createElement(
		"span",
		{
		"aria-label": label,
		className: css(styles(resolvedRoles).avatar.container),
		role: "img"
		},
		!showImage ? null : React.createElement(Image, {
		resolvedRoles: resolvedRoles,
		size: size,
		image: imageUrl,
		name: name,
		onError: handleImageError
		}),
		React.createElement(Initials, { name: name, size: size, resolvedRoles: resolvedRoles })
		);
		}
		);
		@@ -188,0 +1837,0 @@ }

1715

build/index.js

		@@ -10,5 +10,1593 @@ 'use strict';
		var PropTypes = _interopDefault(require('prop-types'));
		var cx = _interopDefault(require('classnames'));
		var reactLifecyclesCompat = require('react-lifecycles-compat');
		var themeContext = require('@hig/theme-context');

		/*

		Based off glamor's StyleSheet, thanks Sunil ❤️

		high performance StyleSheet for css-in-js systems

		- uses multiple style tags behind the scenes for millions of rules
		- uses `insertRule` for appending in production for much faster performance

		// usage

		import { StyleSheet } from '@emotion/sheet'

		let styleSheet = new StyleSheet({ key: '', container: document.head })

		styleSheet.insert('#box { border: 1px solid red; }')
		- appends a css rule into the stylesheet

		styleSheet.flush()
		- empties the stylesheet of all its contents

		*/
		// $FlowFixMe
		function sheetForTag(tag) {
		if (tag.sheet) {
		// $FlowFixMe
		return tag.sheet;
		} // this weirdness brought to you by firefox

		/* istanbul ignore next */

		for (var i = 0; i < document.styleSheets.length; i++) {
		if (document.styleSheets[i].ownerNode === tag) {
		// $FlowFixMe
		return document.styleSheets[i];
		}
		}
		}

		function createStyleElement(options) {
		var tag = document.createElement('style');
		tag.setAttribute('data-emotion', options.key);

		if (options.nonce !== undefined) {
		tag.setAttribute('nonce', options.nonce);
		}

		tag.appendChild(document.createTextNode(''));
		return tag;
		}

		var StyleSheet =
		/#__PURE__/
		function () {
		function StyleSheet(options) {
		this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
		this.tags = [];
		this.ctr = 0;
		this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets

		this.key = options.key;
		this.container = options.container;
		this.before = null;
		}

		var _proto = StyleSheet.prototype;

		_proto.insert = function insert(rule) {
		// the max length is how many rules we have per style tag, it's 65000 in speedy mode
		// it's 1 in dev because we insert source maps that map a single rule to a location
		// and you can only have one source map per style tag
		if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
		var _tag = createStyleElement(this);

		var before;

		if (this.tags.length === 0) {
		before = this.before;
		} else {
		before = this.tags[this.tags.length - 1].nextSibling;
		}

		this.container.insertBefore(_tag, before);
		this.tags.push(_tag);
		}

		var tag = this.tags[this.tags.length - 1];

		if (this.isSpeedy) {
		var sheet = sheetForTag(tag);

		try {
		// this is a really hot path
		// we check the second character first because having "i"
		// as the second character will happen less often than
		// having "@" as the first character
		var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers
		// the big drawback is that the css won't be editable in devtools

		sheet.insertRule(rule, // we need to insert @import rules before anything else
		// otherwise there will be an error
		// technically this means that the @import rules will
		// _usually_(not always since there could be multiple style tags)
		// be the first ones in prod and generally later in dev
		// this shouldn't really matter in the real world though
		// @import is generally only used for font faces from google fonts and etc.
		// so while this could be technically correct then it would be slower and larger
		// for a tiny bit of correctness that won't matter in the real world
		isImportRule ? 0 : sheet.cssRules.length);
		} catch (e) {
		if (process.env.NODE_ENV !== 'production') {
		console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
		}
		}
		} else {
		tag.appendChild(document.createTextNode(rule));
		}

		this.ctr++;
		};

		_proto.flush = function flush() {
		// $FlowFixMe
		this.tags.forEach(function (tag) {
		return tag.parentNode.removeChild(tag);
		});
		this.tags = [];
		this.ctr = 0;
		};

		return StyleSheet;
		}();

		var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

		function stylis_min(W) {
		function M(d, c, e, h, a) {
		for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
		g = e.charCodeAt(l);
		l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);

		if (0 === b + n + v + m) {
		if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
		switch (g) {
		case 32:
		case 9:
		case 59:
		case 13:
		case 10:
		break;

		default:
		f += e.charAt(l);
		}

		g = 59;
		}

		switch (g) {
		case 123:
		f = f.trim();
		q = f.charCodeAt(0);
		k = 1;

		for (t = ++l; l < B;) {
		switch (g = e.charCodeAt(l)) {
		case 123:
		k++;
		break;

		case 125:
		k--;
		break;

		case 47:
		switch (g = e.charCodeAt(l + 1)) {
		case 42:
		case 47:
		a: {
		for (u = l + 1; u < J; ++u) {
		switch (e.charCodeAt(u)) {
		case 47:
		if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {
		l = u + 1;
		break a;
		}

		break;

		case 10:
		if (47 === g) {
		l = u + 1;
		break a;
		}

		}
		}

		l = u;
		}

		}

		break;

		case 91:
		g++;

		case 40:
		g++;

		case 34:
		case 39:
		for (; l++ < J && e.charCodeAt(l) !== g;) {}

		}

		if (0 === k) break;
		l++;
		}

		k = e.substring(t, l);
		0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));

		switch (q) {
		case 64:
		0 < r && (f = f.replace(N, ''));
		g = f.charCodeAt(1);

		switch (g) {
		case 100:
		case 109:
		case 115:
		case 45:
		r = c;
		break;

		default:
		r = O;
		}

		k = M(c, r, k, g, a + 1);
		t = k.length;
		0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));
		if (0 < t) switch (g) {
		case 115:
		f = f.replace(da, ea);

		case 100:
		case 109:
		case 45:
		k = f + '{' + k + '}';
		break;

		case 107:
		f = f.replace(fa, '$1 $2');
		k = f + '{' + k + '}';
		k = 1 === w \|\| 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;
		break;

		default:
		k = f + k, 112 === h && (k = (p += k, ''));
		} else k = '';
		break;

		default:
		k = M(c, X(c, f, I), k, h, a + 1);
		}

		F += k;
		k = I = r = u = q = 0;
		f = '';
		g = e.charCodeAt(++l);
		break;

		case 125:
		case 59:
		f = (0 < r ? f.replace(N, '') : f).trim();
		if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q \|\| 96 < q && 123 > q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\x00\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {
		case 0:
		break;

		case 64:
		if (105 === g \|\| 99 === g) {
		G += f + e.charAt(l);
		break;
		}

		default:
		58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));
		}
		I = r = u = q = 0;
		f = '';
		g = e.charCodeAt(++l);
		}
		}

		switch (g) {
		case 13:
		case 10:
		47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00');
		0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);
		z = 1;
		D++;
		break;

		case 59:
		case 125:
		if (0 === b + n + v + m) {
		z++;
		break;
		}

		default:
		z++;
		y = e.charAt(l);

		switch (g) {
		case 9:
		case 32:
		if (0 === n + m + b) switch (x) {
		case 44:
		case 58:
		case 9:
		case 32:
		y = '';
		break;

		default:
		32 !== g && (y = ' ');
		}
		break;

		case 0:
		y = '\\0';
		break;

		case 12:
		y = '\\f';
		break;

		case 11:
		y = '\\v';
		break;

		case 38:
		0 === n + b + m && (r = I = 1, y = '\f' + y);
		break;

		case 108:
		if (0 === n + b + m + E && 0 < u) switch (l - u) {
		case 2:
		112 === x && 58 === e.charCodeAt(l - 3) && (E = x);

		case 8:
		111 === K && (E = K);
		}
		break;

		case 58:
		0 === n + b + m && (u = l);
		break;

		case 44:
		0 === b + v + n + m && (r = 1, y += '\r');
		break;

		case 34:
		case 39:
		0 === b && (n = n === g ? 0 : 0 === n ? g : n);
		break;

		case 91:
		0 === n + b + v && m++;
		break;

		case 93:
		0 === n + b + v && m--;
		break;

		case 41:
		0 === n + b + m && v--;
		break;

		case 40:
		if (0 === n + b + m) {
		if (0 === q) switch (2 * x + 3 * K) {
		case 533:
		break;

		default:
		q = 1;
		}
		v++;
		}

		break;

		case 64:
		0 === b + v + n + m + u + k && (k = 1);
		break;

		case 42:
		case 47:
		if (!(0 < n + m + v)) switch (b) {
		case 0:
		switch (2 * g + 3 * e.charCodeAt(l + 1)) {
		case 235:
		b = 47;
		break;

		case 220:
		t = l, b = 42;
		}

		break;

		case 42:
		47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);
		}
		}

		0 === b && (f += y);
		}

		K = x;
		x = g;
		l++;
		}

		t = p.length;

		if (0 < t) {
		r = c;
		if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;
		p = r.join(',') + '{' + p + '}';

		if (0 !== w * E) {
		2 !== w \|\| L(p, 2) \|\| (E = 0);

		switch (E) {
		case 111:
		p = p.replace(ha, ':-moz-$1') + p;
		break;

		case 112:
		p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;
		}

		E = 0;
		}
		}

		return G + p + F;
		}

		function X(d, c, e) {
		var h = c.trim().split(ia);
		c = h;
		var a = h.length,
		m = d.length;

		switch (m) {
		case 0:
		case 1:
		var b = 0;

		for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
		c[b] = Z(d, c[b], e, m).trim();
		}

		break;

		default:
		var v = b = 0;

		for (c = []; b < a; ++b) {
		for (var n = 0; n < m; ++n) {
		c[v++] = Z(d[n] + ' ', h[b], e, m).trim();
		}
		}

		}

		return c;
		}

		function Z(d, c, e) {
		var h = c.charCodeAt(0);
		33 > h && (h = (c = c.trim()).charCodeAt(0));

		switch (h) {
		case 38:
		return c.replace(F, '$1' + d.trim());

		case 58:
		return d.trim() + c.replace(F, '$1' + d.trim());

		default:
		if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());
		}

		return d + c;
		}

		function P(d, c, e, h) {
		var a = d + ';',
		m = 2 * c + 3 * e + 4 * h;

		if (944 === m) {
		d = a.indexOf(':', 9) + 1;
		var b = a.substring(d, a.length - 1).trim();
		b = a.substring(0, d).trim() + b + ';';
		return 1 === w \|\| 2 === w && L(b, 1) ? '-webkit-' + b + b : b;
		}

		if (0 === w \|\| 2 === w && !L(a, 1)) return a;

		switch (m) {
		case 1015:
		return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;

		case 951:
		return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;

		case 963:
		return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;

		case 1009:
		if (100 !== a.charCodeAt(4)) break;

		case 969:
		case 942:
		return '-webkit-' + a + a;

		case 978:
		return '-webkit-' + a + '-moz-' + a + a;

		case 1019:
		case 983:
		return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;

		case 883:
		if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;
		if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;
		break;

		case 932:
		if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {
		case 103:
		return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;

		case 115:
		return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;

		case 98:
		return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;
		}
		return '-webkit-' + a + '-ms-' + a + a;

		case 964:
		return '-webkit-' + a + '-ms-flex-' + a + a;

		case 1023:
		if (99 !== a.charCodeAt(8)) break;
		b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');
		return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;

		case 1005:
		return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;

		case 1e3:
		b = a.substring(13).trim();
		c = b.indexOf('-') + 1;

		switch (b.charCodeAt(0) + b.charCodeAt(c)) {
		case 226:
		b = a.replace(G, 'tb');
		break;

		case 232:
		b = a.replace(G, 'tb-rl');
		break;

		case 220:
		b = a.replace(G, 'lr');
		break;

		default:
		return a;
		}

		return '-webkit-' + a + '-ms-' + b + a;

		case 1017:
		if (-1 === a.indexOf('sticky', 9)) break;

		case 975:
		c = (a = d).length - 10;
		b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();

		switch (m = b.charCodeAt(0) + (b.charCodeAt(7) \| 0)) {
		case 203:
		if (111 > b.charCodeAt(8)) break;

		case 115:
		a = a.replace(b, '-webkit-' + b) + ';' + a;
		break;

		case 207:
		case 102:
		a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;
		}

		return a + ';';

		case 938:
		if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {
		case 105:
		return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;

		case 115:
		return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;

		default:
		return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;
		}
		break;

		case 973:
		case 989:
		if (45 !== a.charCodeAt(3) \|\| 122 === a.charCodeAt(4)) break;

		case 931:
		case 953:
		if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;
		break;

		case 962:
		if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;
		}

		return a;
		}

		function L(d, c) {
		var e = d.indexOf(1 === c ? ':' : '{'),
		h = d.substring(0, 3 !== c ? e : 10);
		e = d.substring(e + 1, d.length - 1);
		return R(2 !== c ? h : h.replace(na, '$1'), e, c);
		}

		function ea(d, c) {
		var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));
		return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';
		}

		function H(d, c, e, h, a, m, b, v, n, q) {
		for (var g = 0, x = c, w; g < A; ++g) {
		switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {
		case void 0:
		case !1:
		case !0:
		case null:
		break;

		default:
		x = w;
		}
		}

		if (x !== c) return x;
		}

		function T(d) {
		switch (d) {
		case void 0:
		case null:
		A = S.length = 0;
		break;

		default:
		if ('function' === typeof d) S[A++] = d;else if ('object' === (typeof d === 'undefined' ? 'undefined' : _typeof(d))) for (var c = 0, e = d.length; c < e; ++c) {
		T(d[c]);
		} else Y = !!d \| 0;
		}

		return T;
		}

		function U(d) {
		d = d.prefix;
		void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);
		return U;
		}

		function B(d, c) {
		var e = d;
		33 > e.charCodeAt(0) && (e = e.trim());
		V = e;
		e = [V];

		if (0 < A) {
		var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);
		void 0 !== h && 'string' === typeof h && (c = h);
		}

		var a = M(O, e, c, 0, 0);
		0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));
		V = '';
		E = 0;
		z = D = 1;
		return a;
		}

		var ca = /^\0+/g,
		N = /[\0\r\f]/g,
		aa = /: */g,
		ka = /zoo\|gra/,
		ma = /([,: ])(transform)/g,
		ia = /,\r+?/g,
		F = /([\t\r\n ])*\f?&/g,
		fa = /@(k\w+)\s(\S)\s*/,
		Q = /::(place)/g,
		ha = /:(read-only)/g,
		G = /[svh]\w+-[tblr]{2}/,
		da = /$\s(.)\s*$/g,
		oa = /([\s\S]*?);/g,
		ba = /-self\|flex-/g,
		na = /[^]?(:[rp][el]a[\w-]+)[^]/,
		la = /stretch\|:\s*\w+\-(?:conte\|avail)/,
		ja = /([^-])(image-set\()/,
		z = 1,
		D = 1,
		E = 0,
		w = 1,
		O = [],
		S = [],
		A = 0,
		R = null,
		Y = 0,
		V = '';
		B.use = T;
		B.set = U;
		void 0 !== W && U(W);
		return B;
		}

		var weakMemoize = function weakMemoize(func) {
		// $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
		var cache = new WeakMap();
		return function (arg) {
		if (cache.has(arg)) {
		// $FlowFixMe
		return cache.get(arg);
		}

		var ret = func(arg);
		cache.set(arg, ret);
		return ret;
		};
		};

		// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
		// inlined to avoid umd wrapper and peerDep warnings/installing stylis
		// since we use stylis after closure compiler
		var delimiter = '/\|/';
		var needle = delimiter + '}';

		function toSheet(block) {
		if (block) {
		Sheet.current.insert(block + '}');
		}
		}

		var Sheet = {
		current: null
		};
		var ruleSheet = function ruleSheet(context, content, selectors, parents, line, column, length, ns, depth, at) {
		switch (context) {
		// property
		case 1:
		{
		switch (content.charCodeAt(0)) {
		case 64:
		{
		// @import
		Sheet.current.insert(content + ';');
		return '';
		}
		// charcode for l

		case 108:
		{
		// charcode for b
		// this ignores label
		if (content.charCodeAt(2) === 98) {
		return '';
		}
		}
		}

		break;
		}
		// selector

		case 2:
		{
		if (ns === 0) return content + delimiter;
		break;
		}
		// at-rule

		case 3:
		{
		switch (ns) {
		// @font-face, @page
		case 102:
		case 112:
		{
		Sheet.current.insert(selectors[0] + content);
		return '';
		}

		default:
		{
		return content + (at === 0 ? delimiter : '');
		}
		}
		}

		case -2:
		{
		content.split(needle).forEach(toSheet);
		}
		}
		};
		var removeLabel = function removeLabel(context, content) {
		if (context === 1 && // charcode for l
		content.charCodeAt(0) === 108 && // charcode for b
		content.charCodeAt(2) === 98 // this ignores label
		) {
		return '';
		}
		};

		var isBrowser = typeof document !== 'undefined';
		var rootServerStylisCache = {};
		var getServerStylisCache = isBrowser ? undefined : weakMemoize(function () {
		var getCache = weakMemoize(function () {
		return {};
		});
		var prefixTrueCache = {};
		var prefixFalseCache = {};
		return function (prefix) {
		if (prefix === undefined \|\| prefix === true) {
		return prefixTrueCache;
		}

		if (prefix === false) {
		return prefixFalseCache;
		}

		return getCache(prefix);
		};
		});

		var createCache = function createCache(options) {
		if (options === undefined) options = {};
		var key = options.key \|\| 'css';
		var stylisOptions;

		if (options.prefix !== undefined) {
		stylisOptions = {
		prefix: options.prefix
		};
		}

		var stylis = new stylis_min(stylisOptions);

		if (process.env.NODE_ENV !== 'production') {
		// $FlowFixMe
		if (/[^a-z-]/.test(key)) {
		throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
		}
		}

		var inserted = {}; // $FlowFixMe

		var container;

		if (isBrowser) {
		container = options.container \|\| document.head;
		var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
		Array.prototype.forEach.call(nodes, function (node) {
		var attrib = node.getAttribute("data-emotion-" + key); // $FlowFixMe

		attrib.split(' ').forEach(function (id) {
		inserted[id] = true;
		});

		if (node.parentNode !== container) {
		container.appendChild(node);
		}
		});
		}

		var _insert;

		if (isBrowser) {
		stylis.use(options.stylisPlugins)(ruleSheet);

		_insert = function insert(selector, serialized, sheet, shouldCache) {
		var name = serialized.name;
		Sheet.current = sheet;

		if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {
		var map = serialized.map;
		Sheet.current = {
		insert: function insert(rule) {
		sheet.insert(rule + map);
		}
		};
		}

		stylis(selector, serialized.styles);

		if (shouldCache) {
		cache.inserted[name] = true;
		}
		};
		} else {
		stylis.use(removeLabel);
		var serverStylisCache = rootServerStylisCache;

		if (options.stylisPlugins \|\| options.prefix !== undefined) {
		stylis.use(options.stylisPlugins); // $FlowFixMe

		serverStylisCache = getServerStylisCache(options.stylisPlugins \|\| rootServerStylisCache)(options.prefix);
		}

		var getRules = function getRules(selector, serialized) {
		var name = serialized.name;

		if (serverStylisCache[name] === undefined) {
		serverStylisCache[name] = stylis(selector, serialized.styles);
		}

		return serverStylisCache[name];
		};

		_insert = function _insert(selector, serialized, sheet, shouldCache) {
		var name = serialized.name;
		var rules = getRules(selector, serialized);

		if (cache.compat === undefined) {
		// in regular mode, we don't set the styles on the inserted cache
		// since we don't need to and that would be wasting memory
		// we return them so that they are rendered in a style tag
		if (shouldCache) {
		cache.inserted[name] = true;
		}

		if ( // using === development instead of !== production
		// because if people do ssr in tests, the source maps showing up would be annoying
		process.env.NODE_ENV === 'development' && serialized.map !== undefined) {
		return rules + serialized.map;
		}

		return rules;
		} else {
		// in compat mode, we put the styles on the inserted cache so
		// that emotion-server can pull out the styles
		// except when we don't want to cache it(just the Global component right now)
		if (shouldCache) {
		cache.inserted[name] = rules;
		} else {
		return rules;
		}
		}
		};
		}

		if (process.env.NODE_ENV !== 'production') {
		// https://esbench.com/bench/5bf7371a4cd7e6009ef61d0a
		var commentStart = /\/\*/g;
		var commentEnd = /\*\//g;
		stylis.use(function (context, content) {
		switch (context) {
		case -1:
		{
		while (commentStart.test(content)) {
		commentEnd.lastIndex = commentStart.lastIndex;

		if (commentEnd.test(content)) {
		commentStart.lastIndex = commentEnd.lastIndex;
		continue;
		}

		throw new Error('Your styles have an unterminated comment ("/" without corresponding "/").');
		}

		commentStart.lastIndex = 0;
		break;
		}
		}
		});
		stylis.use(function (context, content, selectors) {
		switch (context) {
		case 2:
		{
		for (var i = 0, len = selectors.length; len > i; i++) {
		// :last-child isn't included here since it's safe
		// because a style element will never be the last element
		var match = selectors[i].match(/:(first\|nth\|nth-last)-child/);

		if (match !== null) {
		console.error("The pseudo class \"" + match[0] + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + match[1] + "-of-type\"");
		}
		}

		break;
		}
		}
		});
		}

		var cache = {
		key: key,
		sheet: new StyleSheet({
		key: key,
		container: container,
		nonce: options.nonce,
		speedy: options.speedy
		}),
		nonce: options.nonce,
		inserted: inserted,
		registered: {},
		insert: _insert
		};
		return cache;
		};

		/* eslint-disable */
		// murmurhash2 via https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js
		function murmurhash2_32_gc(str) {
		var l = str.length,
		h = l ^ l,
		i = 0,
		k;

		while (l >= 4) {
		k = str.charCodeAt(i) & 0xff \| (str.charCodeAt(++i) & 0xff) << 8 \| (str.charCodeAt(++i) & 0xff) << 16 \| (str.charCodeAt(++i) & 0xff) << 24;
		k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		k ^= k >>> 24;
		k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16) ^ k;
		l -= 4;
		++i;
		}

		switch (l) {
		case 3:
		h ^= (str.charCodeAt(i + 2) & 0xff) << 16;

		case 2:
		h ^= (str.charCodeAt(i + 1) & 0xff) << 8;

		case 1:
		h ^= str.charCodeAt(i) & 0xff;
		h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		}

		h ^= h >>> 13;
		h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		h ^= h >>> 15;
		return (h >>> 0).toString(36);
		}

		var unitlessKeys = {
		animationIterationCount: 1,
		borderImageOutset: 1,
		borderImageSlice: 1,
		borderImageWidth: 1,
		boxFlex: 1,
		boxFlexGroup: 1,
		boxOrdinalGroup: 1,
		columnCount: 1,
		columns: 1,
		flex: 1,
		flexGrow: 1,
		flexPositive: 1,
		flexShrink: 1,
		flexNegative: 1,
		flexOrder: 1,
		gridRow: 1,
		gridRowEnd: 1,
		gridRowSpan: 1,
		gridRowStart: 1,
		gridColumn: 1,
		gridColumnEnd: 1,
		gridColumnSpan: 1,
		gridColumnStart: 1,
		msGridRow: 1,
		msGridRowSpan: 1,
		msGridColumn: 1,
		msGridColumnSpan: 1,
		fontWeight: 1,
		lineHeight: 1,
		opacity: 1,
		order: 1,
		orphans: 1,
		tabSize: 1,
		widows: 1,
		zIndex: 1,
		zoom: 1,
		WebkitLineClamp: 1,
		// SVG-related properties
		fillOpacity: 1,
		floodOpacity: 1,
		stopOpacity: 1,
		strokeDasharray: 1,
		strokeDashoffset: 1,
		strokeMiterlimit: 1,
		strokeOpacity: 1,
		strokeWidth: 1
		};

		function memoize(fn) {
		var cache = {};
		return function (arg) {
		if (cache[arg] === undefined) cache[arg] = fn(arg);
		return cache[arg];
		};
		}

		var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

		var hyphenateRegex = /[A-Z]\|^ms/g;
		var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
		var processStyleName = memoize(function (styleName) {
		return styleName.replace(hyphenateRegex, '-$&').toLowerCase();
		});

		var processStyleValue = function processStyleValue(key, value) {
		if (value == null \|\| typeof value === 'boolean') {
		return '';
		}

		switch (key) {
		case 'animation':
		case 'animationName':
		{
		if (typeof value === 'string') {
		value = value.replace(animationRegex, function (match, p1, p2) {
		cursor = {
		name: p1,
		styles: p2,
		next: cursor
		};
		return p1;
		});
		}
		}
		}

		if (unitlessKeys[key] !== 1 && key.charCodeAt(1) !== 45 && // custom properties
		typeof value === 'number' && value !== 0) {
		return value + 'px';
		}

		return value;
		};

		if (process.env.NODE_ENV !== 'production') {
		var contentValuePattern = /(attr\|calc\|counters?\|url)\(/;
		var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
		var oldProcessStyleValue = processStyleValue;
		var msPattern = /^-ms-/;
		var hyphenPattern = /-(.)/g;
		var hyphenatedCache = {};

		processStyleValue = function processStyleValue(key, value) {
		if (key === 'content') {
		if (typeof value !== 'string' \|\| contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) \|\| value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
		console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
		}
		}

		if (key.charCodeAt(1) !== 45 && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
		hyphenatedCache[key] = true;
		console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, char) {
		return char.toUpperCase();
		}) + "?");
		}

		return oldProcessStyleValue(key, value);
		};
		}

		var shouldWarnAboutInterpolatingClassNameFromCss = true;

		function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
		if (interpolation == null) {
		return '';
		}

		if (interpolation.__emotion_styles !== undefined) {
		if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
		throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
		}

		return interpolation;
		}

		switch (typeof interpolation === 'undefined' ? 'undefined' : _typeof$1(interpolation)) {
		case 'boolean':
		{
		return '';
		}

		case 'object':
		{
		if (interpolation.anim === 1) {
		cursor = {
		name: interpolation.name,
		styles: interpolation.styles,
		next: cursor
		};
		return interpolation.name;
		}

		if (interpolation.styles !== undefined) {
		var next = interpolation.next;

		if (next !== undefined) {
		// not the most efficient thing ever but this is a pretty rare case
		// and there will be very few iterations of this generally
		while (next !== undefined) {
		cursor = {
		name: next.name,
		styles: next.styles,
		next: cursor
		};
		next = next.next;
		}
		}

		return interpolation.styles;
		}

		return createStringFromObject(mergedProps, registered, interpolation);
		}

		case 'function':
		{
		if (mergedProps !== undefined) {
		var previousCursor = cursor;
		var result = interpolation(mergedProps);
		cursor = previousCursor;
		return handleInterpolation(mergedProps, registered, result, couldBeSelectorInterpolation);
		} else if (process.env.NODE_ENV !== 'production') {
		console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
		}
		}
		// eslint-disable-next-line no-fallthrough

		default:
		{
		if (registered == null) {
		return interpolation;
		}

		var cached = registered[interpolation];

		if (process.env.NODE_ENV !== 'production' && couldBeSelectorInterpolation && shouldWarnAboutInterpolatingClassNameFromCss && cached !== undefined) {
		console.error('Interpolating a className from css`` is not recommended and will cause problems with composition.\n' + 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion');
		shouldWarnAboutInterpolatingClassNameFromCss = false;
		}

		return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
		}
		}
		}

		function createStringFromObject(mergedProps, registered, obj) {
		var string = '';

		if (Array.isArray(obj)) {
		for (var i = 0; i < obj.length; i++) {
		string += handleInterpolation(mergedProps, registered, obj[i], false);
		}
		} else {
		for (var _key in obj) {
		var value = obj[_key];

		if ((typeof value === 'undefined' ? 'undefined' : _typeof$1(value)) !== 'object') {
		if (registered != null && registered[value] !== undefined) {
		string += _key + "{" + registered[value] + "}";
		} else {
		string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
		}
		} else {
		if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
		throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
		}

		if (Array.isArray(value) && (registered == null \|\| typeof value[0] === 'string' && registered[value[0]] === undefined)) {
		for (var _i = 0; _i < value.length; _i++) {
		string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
		}
		} else {
		string += _key + "{" + handleInterpolation(mergedProps, registered, value, false) + "}";
		}
		}
		}
		}

		return string;
		}

		var labelPattern = /label:\s([^\s;\n{]+)\s;/g;
		var sourceMapPattern;

		if (process.env.NODE_ENV !== 'production') {
		sourceMapPattern = /\/\#\ssourceMappingURL=data:application\/json;\S+\s+\\//;
		} // this is the cursor for keyframes
		// keyframes are stored on the SerializedStyles object as a linked list


		var cursor;
		var serializeStyles = function serializeStyles(args, registered, mergedProps) {
		if (args.length === 1 && _typeof$1(args[0]) === 'object' && args[0] !== null && args[0].styles !== undefined) {
		return args[0];
		}

		var stringMode = true;
		var styles = '';
		cursor = undefined;
		var strings = args[0];

		if (strings == null \|\| strings.raw === undefined) {
		stringMode = false;
		styles += handleInterpolation(mergedProps, registered, strings, false);
		} else {
		styles += strings[0];
		} // we start at 1 since we've already handled the first arg


		for (var i = 1; i < args.length; i++) {
		styles += handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);

		if (stringMode) {
		styles += strings[i];
		}
		}

		var sourceMap;

		if (process.env.NODE_ENV !== 'production') {
		styles = styles.replace(sourceMapPattern, function (match) {
		sourceMap = match;
		return '';
		});
		} // using a global regex with .exec is stateful so lastIndex has to be reset each time


		labelPattern.lastIndex = 0;
		var identifierName = '';
		var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5

		while ((match = labelPattern.exec(styles)) !== null) {
		identifierName += '-' + // $FlowFixMe we know it's not null
		match[1];
		}

		var name = murmurhash2_32_gc(styles) + identifierName;

		if (process.env.NODE_ENV !== 'production') {
		return {
		name: name,
		styles: styles,
		map: sourceMap,
		next: cursor
		};
		}

		return {
		name: name,
		styles: styles,
		next: cursor
		};
		};

		var isBrowser$1 = typeof document !== 'undefined';
		function getRegisteredStyles(registered, registeredStyles, classNames) {
		var rawClassName = '';
		classNames.split(' ').forEach(function (className) {
		if (registered[className] !== undefined) {
		registeredStyles.push(registered[className]);
		} else {
		rawClassName += className + " ";
		}
		});
		return rawClassName;
		}
		var insertStyles = function insertStyles(cache, serialized, isStringTag) {
		var className = cache.key + "-" + serialized.name;

		if ( // we only need to add the styles to the registered cache if the
		// class name could be used further down
		// the tree but if it's a string tag, we know it won't
		// so we don't have to add it to registered cache.
		// this improves memory usage since we can avoid storing the whole style string
		(isStringTag === false \|\| // we need to always store it if we're in compat mode and
		// in node since emotion-server relies on whether a style is in
		// the registered cache to know whether a style is global or not
		// also, note that this check will be dead code eliminated in the browser
		isBrowser$1 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
		cache.registered[className] = serialized.styles;
		}

		if (cache.inserted[serialized.name] === undefined) {
		var stylesForSSR = '';
		var current = serialized;

		do {
		var maybeStyles = cache.insert("." + className, current, cache.sheet, true);

		if (!isBrowser$1 && maybeStyles !== undefined) {
		stylesForSSR += maybeStyles;
		}

		current = current.next;
		} while (current !== undefined);

		if (!isBrowser$1 && stylesForSSR.length !== 0) {
		return stylesForSSR;
		}
		}
		};

		var _typeof$2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

		function insertWithoutScoping(cache, serialized) {
		if (cache.inserted[serialized.name] === undefined) {
		return cache.insert('', serialized, cache.sheet, true);
		}
		}

		function merge(registered, css, className) {
		var registeredStyles = [];
		var rawClassName = getRegisteredStyles(registered, registeredStyles, className);

		if (registeredStyles.length < 2) {
		return className;
		}

		return rawClassName + css(registeredStyles);
		}

		var createEmotion = function createEmotion(options) {
		var cache = createCache(options); // $FlowFixMe

		cache.sheet.speedy = function (value) {
		if (process.env.NODE_ENV !== 'production' && this.ctr !== 0) {
		throw new Error('speedy must be changed before any rules are inserted');
		}

		this.isSpeedy = value;
		};

		cache.compat = true;

		var css = function css() {
		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		var serialized = serializeStyles(args, cache.registered, this !== undefined ? this.mergedProps : undefined);
		insertStyles(cache, serialized, false);
		return cache.key + "-" + serialized.name;
		};

		var keyframes = function keyframes() {
		for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
		args[_key2] = arguments[_key2];
		}

		var serialized = serializeStyles(args, cache.registered);
		var animation = "animation-" + serialized.name;
		insertWithoutScoping(cache, {
		name: serialized.name,
		styles: "@keyframes " + animation + "{" + serialized.styles + "}"
		});
		return animation;
		};

		var injectGlobal = function injectGlobal() {
		for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
		args[_key3] = arguments[_key3];
		}

		var serialized = serializeStyles(args, cache.registered);
		insertWithoutScoping(cache, serialized);
		};

		var cx = function cx() {
		for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
		args[_key4] = arguments[_key4];
		}

		return merge(cache.registered, css, classnames(args));
		};

		return {
		css: css,
		cx: cx,
		injectGlobal: injectGlobal,
		keyframes: keyframes,
		hydrate: function hydrate(ids) {
		ids.forEach(function (key) {
		cache.inserted[key] = true;
		});
		},
		flush: function flush() {
		cache.registered = {};
		cache.inserted = {};
		cache.sheet.flush();
		},
		// $FlowFixMe
		sheet: cache.sheet,
		cache: cache,
		getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
		merge: merge.bind(null, cache.registered, css)
		};
		};

		var classnames = function classnames(args) {
		var cls = '';

		for (var i = 0; i < args.length; i++) {
		var arg = args[i];
		if (arg == null) continue;
		var toAdd = void 0;

		switch (typeof arg === 'undefined' ? 'undefined' : _typeof$2(arg)) {
		case 'boolean':
		break;

		case 'object':
		{
		if (Array.isArray(arg)) {
		toAdd = classnames(arg);
		} else {
		toAdd = '';

		for (var k in arg) {
		if (arg[k] && k) {
		toAdd && (toAdd += ' ');
		toAdd += k;
		}
		}
		}

		break;
		}

		default:
		{
		toAdd = arg;
		}
		}

		if (toAdd) {
		cls && (cls += ' ');
		cls += toAdd;
		}
		}

		return cls;
		};

		var context = typeof global !== 'undefined' ? global : {};

		var _createEmotion = createEmotion(context),
		css = _createEmotion.css;

		var sizes = Object.freeze({
		@@ -18,4 +1606,3 @@ SMALL_16: "small",
		MEDIUM_32: "medium-32",
		LARGE_36: "large",
		LARGE_48: "large-48",
		LARGE_48: "large",
		XLARGE_64: "extralarge"
		@@ -26,6 +1613,57 @@ });

		var _SizeMapping;

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		var SizeMapping = (_SizeMapping = {}, _defineProperty(_SizeMapping, sizes.SMALL_16, "extraSmall"), _defineProperty(_SizeMapping, sizes.MEDIUM_24, "small"), _defineProperty(_SizeMapping, sizes.MEDIUM_32, "medium"), _defineProperty(_SizeMapping, sizes.LARGE_48, "large"), _defineProperty(_SizeMapping, sizes.XLARGE_64, "extraLarge"), _SizeMapping);

		function stylesheet(props, themeData) {
		var size = props.size,
		backgroundId = props.backgroundId;

		var sizeString = size ? SizeMapping[size] : SizeMapping[sizes.MEDIUM_32];
		var diameter = themeData["avatar." + sizeString + ".diameter"];
		var fontSize = themeData["avatar." + sizeString + ".fontSize"];
		var fontFamily = themeData["basics.fontFamilies.main"];
		var bgColor = themeData["avatar.color" + (backgroundId \|\| 1) + ".backgroundColor"];
		var fgColor = themeData["avatar.color" + (backgroundId \|\| 1) + ".fontColor"];

		return {
		avatar: {
		container: {
		backgroundColor: bgColor,
		color: fgColor,
		width: diameter,
		height: diameter,
		lineHeight: diameter,
		fontSize: fontSize,
		display: "block",
		position: "relative",
		margin: 0,
		overflow: "hidden",
		borderRadius: "50%",
		textAlign: "center"
		},
		imageWrapper: {
		position: "absolute",
		display: "flex",
		zIndex: "2",
		fontSize: fontSize
		},
		image: {
		borderRadius: "50%",
		width: diameter,
		height: diameter
		},
		initials: {
		width: diameter,
		height: diameter,
		fontFamily: fontFamily
		}
		}
		};
		}

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _modifiersBySize;

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -37,4 +1675,2 @@

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		/**
		@@ -55,3 +1691,3 @@ * @param {number} value
		function backgroundIdFromName(name) {
		return convertRanges(name.charCodeAt(0) - 65, [0, 26], [1, 9]);
		return convertRanges(name.charCodeAt(0) - 65, [0, 26], [1, 8]);
		}
		@@ -79,11 +1715,14 @@
		name = _ref.name,
		onError = _ref.onError;
		size = _ref.size,
		onError = _ref.onError,
		resolvedRoles = _ref.resolvedRoles;

		var alt = "Avatar image of " + name;
		var styles = stylesheet({ size: size }, resolvedRoles);

		return React__default.createElement(
		"span",
		{ className: "hig__avatarV2__image-wrapper" },
		{ className: css(styles.avatar.imageWrapper) },
		React__default.createElement("img", {
		className: "hig__avatarV2__image",
		className: css(styles.avatar.image),
		src: image,
		@@ -103,25 +1742,16 @@ alt: alt,
		function Initials(_ref2) {
		var name = _ref2.name;
		var size = _ref2.size,
		name = _ref2.name,
		resolvedRoles = _ref2.resolvedRoles;

		var styles = stylesheet({ size: size, name: name }, resolvedRoles);
		var initials = initialsFromName(name);

		return React__default.createElement(
		"span",
		{ className: "hig__avatarV2__initials", "aria-hidden": "true" },
		initialsFromName(name)
		{ className: css(styles.avatar.initials), "aria-hidden": "true" },
		size === sizes.SMALL_16 ? initials[0] : initials
		);
		}

		var modifiersBySize = (_modifiersBySize = {}, _defineProperty(_modifiersBySize, sizes.SMALL_16, "hig__avatarV2--size--small"), _defineProperty(_modifiersBySize, sizes.MEDIUM_24, "hig__avatarV2--size--medium"), _defineProperty(_modifiersBySize, sizes.MEDIUM_32, "hig__avatarV2--size--medium-32"), _defineProperty(_modifiersBySize, sizes.LARGE_36, "hig__avatarV2--size--large"), _defineProperty(_modifiersBySize, sizes.LARGE_48, "hig__avatarV2--size--large-48"), _defineProperty(_modifiersBySize, sizes.XLARGE_64, "hig__avatarV2--size--extralarge"), _modifiersBySize);

		var modifiersByBackgroundId = {
		"1": "hig__avatarV2__background--turquoise",
		"2": "hig__avatarV2__background--purple",
		"3": "hig__avatarV2__background--pink",
		"4": "hig__avatarV2__background--salmon",
		"5": "hig__avatarV2__background--blue",
		"6": "hig__avatarV2__background--green",
		"7": "hig__avatarV2__background--turquoise",
		"8": "hig__avatarV2__background--indigo",
		"9": "hig__avatarV2__background--gold"
		};

		/**
		@@ -187,9 +1817,28 @@ * @typedef {Object} AvatarProps
		var showImage = imageUrl && !hasImageError;
		var classes = cx("hig__avatarV2", modifiersBySize[size], modifiersByBackgroundId[backgroundId]);
		var styles = function styles(roles) {
		return stylesheet({ size: size, backgroundId: backgroundId }, roles);
		};

		return React__default.createElement(
		"span",
		{ "aria-label": label, className: classes, role: "img" },
		!showImage ? null : React__default.createElement(Image, { image: imageUrl, name: name, onError: handleImageError }),
		React__default.createElement(Initials, { name: name })
		themeContext.ThemeContext.Consumer,
		null,
		function (_ref4) {
		var resolvedRoles = _ref4.resolvedRoles;
		return React__default.createElement(
		"span",
		{
		"aria-label": label,
		className: css(styles(resolvedRoles).avatar.container),
		role: "img"
		},
		!showImage ? null : React__default.createElement(Image, {
		resolvedRoles: resolvedRoles,
		size: size,
		image: imageUrl,
		name: name,
		onError: handleImageError
		}),
		React__default.createElement(Initials, { name: name, size: size, resolvedRoles: resolvedRoles })
		);
		}
		);
		@@ -196,0 +1845,0 @@ }

CHANGELOG.md

		@@ -0,1 +1,29 @@
		# [@hig/avatar-v1.0.1](https://github.com/Autodesk/hig/compare/@hig/avatar@1.0.0...@hig/avatar@1.0.1) (2019-01-04)


		### Bug Fixes

		* resolve versioning issue, Avatar 0.2.0->1.0.0 ([535d892](https://github.com/Autodesk/hig/commit/535d892))

		# [@hig/avatar-v1.0.0](https://github.com/Autodesk/hig/compare/@hig/avatar@0.2.0...@hig/avatar@1.0.0) (2019-01-03)


		### Bug Fixes

		* avatar: add theme knobs in avatar storybook, use only one letter for avatar when size is small, fix js warnings ([4057b51](https://github.com/Autodesk/hig/commit/4057b51))


		### Features

		* avatar: themable avatar ([0fbd821](https://github.com/Autodesk/hig/commit/0fbd821))


		### BREAKING CHANGES

		* avatar: The sizes.LARGE_36 size is no longer supported. You can
		substitute with sizes.MEDIUM_32 or sizes.LARGE_48. The "large-48" size
		is no longer supported. You can substitute it with "large" for 48 pixels
		wide or "medium-32" for 32 pixels wide. The previous "large" size is now
		48 pixels wide rather than 36 pixels wide.

		# [@hig/avatar-v0.2.0](https://github.com/Autodesk/hig/compare/@hig/avatar@0.1.3...@hig/avatar@0.2.0) (2018-09-19)
		@@ -2,0 +30,0 @@

package.json

		{
		"name": "@hig/avatar",
		"version": "0.2.0",
		"version": "1.0.1",
		"description": "HIG Avatar",
		@@ -16,3 +16,2 @@ "author": "Autodesk Inc.",
		"module": "build/index.es.js",
		"style": "build/index.css",
		"files": [
		@@ -30,3 +29,3 @@ "build/*"
		"devDependencies": {
		"@hig/babel-preset": "^0.1.0",
		"@hig/babel-preset": "^0.1.1",
		"@hig/eslint-config": "^0.1.0",
		@@ -36,3 +35,3 @@ "@hig/jest-preset": "^0.1.0",
		"@hig/semantic-release-config": "^0.1.0",
		"@hig/styles": "^0.2.3"
		"@hig/styles": "^0.3.0"
		},
		@@ -39,0 +38,0 @@ "scripts": {

README.md

		@@ -21,3 +21,2 @@ # Avatar
		import Avatar, { sizes } from '@hig/avatar';
		import '@hig/avatar/build/index.css';
		```
		@@ -30,4 +29,4 @@
		name="David Gonzales"
		size={sizes.LARGE_36}
		size={sizes.LARGE_48}
		/>
		```

build/index.css

Sorry, the diff of this file is not supported yet

build/index.es.css

Sorry, the diff of this file is not supported yet

@hig/avatar - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics