react-loading-skeleton - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

2159

dist/bundle.js

		@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
		root["Skeleton"] = factory(root["_"]);
		})(this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
		})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
		return /******/ (function(modules) { // webpackBootstrap
		@@ -77,3 +77,3 @@ /******/ // The module cache
		/******/ // Load entry module and return exports
		/******/ return __webpack_require__(__webpack_require__.s = 8);
		/******/ return __webpack_require__(__webpack_require__.s = 13);
		/******/ })
		@@ -83,8 +83,2 @@ /************************************************************************/
		/* 0 */
		/***/ (function(module, exports) {

		module.exports = __WEBPACK_EXTERNAL_MODULE_0__;

		/***/ }),
		/* 1 */
		/***/ (function(module, exports, __webpack_require__) {
		@@ -96,22 +90,16 @@
		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});
		exports.SkeletonTheme = undefined;
		exports.skeletonClass = exports.skeletonKeyframes = exports.defaultHighlightColor = exports.defaultBaseColor = undefined;

		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 _skeletonTheme = __webpack_require__(2);
		var _templateObject = _taggedTemplateLiteral(["\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n"], ["\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n"]),
		_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n background-size: 200px 100%;\n background-repeat: no-repeat;\n border-radius: 4px;\n display: inline-block;\n line-height: 1;\n width: 100%;\n"], ["\n background-color: ", ";\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n background-size: 200px 100%;\n background-repeat: no-repeat;\n border-radius: 4px;\n display: inline-block;\n line-height: 1;\n width: 100%;\n"]);

		Object.defineProperty(exports, 'SkeletonTheme', {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_skeletonTheme).default;
		}
		});
		var _react = __webpack_require__(2);

		var _react = __webpack_require__(0);

		var _react2 = _interopRequireDefault(_react);

		__webpack_require__(5);
		var _emotion = __webpack_require__(1);

		@@ -126,53 +114,63 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

		var defaultBaseColor = exports.defaultBaseColor = "#eee";

		var defaultHighlightColor = exports.defaultHighlightColor = "#f5f5f5";

		var skeletonKeyframes = exports.skeletonKeyframes = (0, _emotion.keyframes)(_templateObject);

		var skeletonClass = exports.skeletonClass = (0, _emotion.css)(_templateObject2, defaultBaseColor, defaultBaseColor, defaultHighlightColor, defaultBaseColor);

		var Skeleton = function (_Component) {
		_inherits(Skeleton, _Component);
		_inherits(Skeleton, _Component);

		function Skeleton() {
		_classCallCheck(this, Skeleton);
		function Skeleton() {
		_classCallCheck(this, Skeleton);

		return _possibleConstructorReturn(this, (Skeleton.__proto__ \|\| Object.getPrototypeOf(Skeleton)).apply(this, arguments));
		}
		return _possibleConstructorReturn(this, (Skeleton.__proto__ \|\| Object.getPrototypeOf(Skeleton)).apply(this, arguments));
		}

		_createClass(Skeleton, [{
		key: 'render',
		value: function render() {
		var elements = [];
		for (var i = 0; i < this.props.count; i++) {
		var style = {
		animation: "progress " + String(this.props.duration) + "s ease-in-out infinite"
		};
		if (this.props.width != null) {
		style.width = this.props.width;
		}
		elements.push(_react2.default.createElement(
		'span',
		{ key: i, className: 'react-loading-skeleton', style: style },
		'\u200C'
		));
		}

		var Wrapper = this.props.wrapper;
		return _react2.default.createElement(
		'span',
		null,
		Wrapper ? elements.map(function (element, i) {
		return _react2.default.createElement(
		Wrapper,
		{ key: i },
		element,
		'\u200C'
		);
		}) : elements
		);
		_createClass(Skeleton, [{
		key: "render",
		value: function render() {
		var elements = [];
		for (var i = 0; i < this.props.count; i++) {
		var style = {
		animation: skeletonKeyframes + " " + String(this.props.duration) + "s ease-in-out infinite"
		};
		if (this.props.width != null) {
		style.width = this.props.width;
		}
		}]);
		elements.push(_react2.default.createElement(
		"span",
		{ key: i, className: skeletonClass, style: style },
		"\u200C"
		));
		}

		return Skeleton;
		var Wrapper = this.props.wrapper;
		return _react2.default.createElement(
		"span",
		null,
		Wrapper ? elements.map(function (element, i) {
		return _react2.default.createElement(
		Wrapper,
		{ key: i },
		element,
		"\u200C"
		);
		}) : elements
		);
		}
		}]);

		return Skeleton;
		}(_react.Component);

		Skeleton.defaultProps = {
		count: 1,
		duration: 1.2,
		width: null,
		wrapper: null
		count: 1,
		duration: 1.2,
		width: null,
		wrapper: null
		};
		@@ -182,3 +180,46 @@ exports.default = Skeleton;
		/***/ }),
		/* 1 */
		/***/ (function(module, __webpack_exports__, __webpack_require__) {

		"use strict";
		Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
		/* WEBPACK VAR INJECTION /(function(global) {/ harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "flush", function() { return flush; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hydrate", function() { return hydrate; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "cx", function() { return cx; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "merge", function() { return merge; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getRegisteredStyles", function() { return getRegisteredStyles; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "injectGlobal", function() { return injectGlobal; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "keyframes", function() { return keyframes; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "css", function() { return css; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sheet", function() { return sheet; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "caches", function() { return caches; });
		/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_create_emotion__ = __webpack_require__(9);


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

		var _createEmotion = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0_create_emotion__["a" /* default */])(context),
		flush = _createEmotion.flush,
		hydrate = _createEmotion.hydrate,
		cx = _createEmotion.cx,
		merge = _createEmotion.merge,
		getRegisteredStyles = _createEmotion.getRegisteredStyles,
		injectGlobal = _createEmotion.injectGlobal,
		keyframes = _createEmotion.keyframes,
		css = _createEmotion.css,
		sheet = _createEmotion.sheet,
		caches = _createEmotion.caches;



		/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(12)))

		/***/ }),
		/* 2 */
		/***/ (function(module, exports) {

		module.exports = __WEBPACK_EXTERNAL_MODULE_2__;

		/***/ }),
		/* 3 */
		/***/ (function(module, exports, __webpack_require__) {
		@@ -190,662 +231,1656 @@
		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});

		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 _skeleton = __webpack_require__(0);

		var _react = __webpack_require__(0);
		Object.defineProperty(exports, "default", {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_skeleton).default;
		}
		});

		var _react2 = _interopRequireDefault(_react);
		var _skeletonTheme = __webpack_require__(8);

		Object.defineProperty(exports, "SkeletonTheme", {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_skeletonTheme).default;
		}
		});

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		/***/ }),
		/* 4 */
		/***/ (function(module, __webpack_exports__, __webpack_require__) {

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }
		"use strict";
		/* 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;

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
		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;
		}

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

		var css = function css(id) {
		var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#eee';
		var highlight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '#f5f5f5';
		return '.react-loading-theme-' + id + ' .react-loading-skeleton {\n background-color: ' + color + ';\n background-image: linear-gradient(90deg, ' + color + ', ' + highlight + ', ' + color + ');\n}';
		};
		case 2:
		h ^= (str.charCodeAt(i + 1) & 0xff) << 8;

		var createStyleElement = function createStyleElement(css) {
		var element = document.createElement('style');
		element.textContent = css;
		document.head.appendChild(element);
		return element;
		};
		case 1:
		h ^= str.charCodeAt(i) & 0xff;
		h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		}

		var SkeletonTheme = function (_Component) {
		_inherits(SkeletonTheme, _Component);
		h ^= h >>> 13;
		h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
		h ^= h >>> 15;
		return (h >>> 0).toString(36);
		}

		function SkeletonTheme(props) {
		_classCallCheck(this, SkeletonTheme);
		/* harmony default export */ __webpack_exports__["a"] = (murmurhash2_32_gc);
		//# sourceMappingURL=hash.esm.js.map

		var _this = _possibleConstructorReturn(this, (SkeletonTheme.__proto__ \|\| Object.getPrototypeOf(SkeletonTheme)).call(this, props));

		_this.id = counter++;
		return _this;
		/***/ }),
		/* 5 */
		/***/ (function(module, __webpack_exports__, __webpack_require__) {

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

		/* harmony default export */ __webpack_exports__["a"] = (memoize);
		//# sourceMappingURL=memoize.esm.js.map


		/***/ }),
		/* 6 */
		/***/ (function(module, __webpack_exports__, __webpack_require__) {

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

		if (0 === b + n + v + m) {
		if (l === I && (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 < K;) {
		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 < I; ++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++ < I && e.charCodeAt(l) !== g;) {
		}

		}

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

		k = e.substring(t, l);
		0 === q && (q = (f = f.replace(ea, '').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 < B && (r = Y(O, f, z), C = H(3, k, r, c, D, A, 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(fa, ha);

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

		case 107:
		f = f.replace(ia, '$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, Y(c, f, z), k, h, a + 1);
		}

		F += k;
		k = z = 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 < B && void 0 !== (C = H(1, f, c, d, D, A, 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)));
		}
		z = 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 < B * Z && H(0, f, c, d, D, A, p.length, h, a, h);
		A = 1;
		D++;
		break;

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

		default:
		A++;
		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 = z = 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 === J && (E = J);
		}
		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 * J) {
		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);
		}

		J = x;
		x = g;
		l++;
		}

		_createClass(SkeletonTheme, [{
		key: 'componentWillMount',
		value: function componentWillMount() {
		this.style = createStyleElement(css(this.id, this.props.color, this.props.highlightColor));
		t = p.length;

		if (0 < t) {
		r = c;
		if (0 < B && (C = H(2, p, r, d, D, A, 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(ja, ':-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;
		}
		}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
		this.style.remove();

		E = 0;
		}
		}

		return G + p + F;
		}

		function Y(d, c, e) {
		var h = c.trim().split(ka);
		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] = aa(d, c[b], e, m).trim();
		}
		}, {
		key: 'render',
		value: function render() {
		return _react2.default.createElement(
		'div',
		{ className: 'react-loading-theme-' + this.id },
		this.props.children
		);

		break;

		default:
		var v = b = 0;

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

		return SkeletonTheme;
		}(_react.Component);
		}

		exports.default = SkeletonTheme;
		return c;
		}

		/***/ }),
		/* 3 */
		/***/ (function(module, exports, __webpack_require__) {
		function aa(d, c, e) {
		var h = c.charCodeAt(0);
		33 > h && (h = (c = c.trim()).charCodeAt(0));

		exports = module.exports = __webpack_require__(4)(undefined);
		// imports
		switch (h) {
		case 38:
		return c.replace(F, '$1' + d.trim());

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

		// module
		exports.push([module.i, "@keyframes progress {\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n}\n\n.react-loading-skeleton {\n /* animation: progress 1.2s ease-in-out infinite; */\n background-color: #eee;\n background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n background-size: 200px 100%;\n background-repeat: no-repeat;\n border-radius: 4px;\n display: inline-block;\n line-height: 1;\n width: 100%;\n}", ""]);
		default:
		if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());
		}

		// exports
		return d + c;
		}

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

		/***/ }),
		/* 4 */
		/***/ (function(module, exports) {
		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;
		}

		/*
		MIT License http://www.opensource.org/licenses/mit-license.php
		Author Tobias Koppers @sokra
		*/
		// css base code, injected by the css-loader
		module.exports = function(useSourceMap) {
		var list = [];
		if (0 === w \|\| 2 === w && !L(a, 1)) return a;

		// return the list of modules as css string
		list.toString = function toString() {
		return this.map(function (item) {
		var content = cssWithMappingToString(item, useSourceMap);
		if(item[2]) {
		return "@media " + item[2] + "{" + content + "}";
		} else {
		return content;
		}
		}).join("");
		};
		switch (m) {
		case 1015:
		return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;

		// import a list of modules into the list
		list.i = function(modules, mediaQuery) {
		if(typeof modules === "string")
		modules = [[null, modules, ""]];
		var alreadyImportedModules = {};
		for(var i = 0; i < this.length; i++) {
		var id = this[i][0];
		if(typeof id === "number")
		alreadyImportedModules[id] = true;
		}
		for(i = 0; i < modules.length; i++) {
		var item = modules[i];
		// skip already imported module
		// this implementation is not 100% perfect for weird media query combinations
		// when a module is imported multiple times with different media queries.
		// I hope this will never occur (Hey this way we have smaller bundles)
		if(typeof item[0] !== "number" \|\| !alreadyImportedModules[item[0]]) {
		if(mediaQuery && !item[2]) {
		item[2] = mediaQuery;
		} else if(mediaQuery) {
		item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
		}
		list.push(item);
		}
		}
		};
		return list;
		};
		case 951:
		return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;

		function cssWithMappingToString(item, useSourceMap) {
		var content = item[1] \|\| '';
		var cssMapping = item[3];
		if (!cssMapping) {
		return content;
		}
		case 963:
		return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;

		if (useSourceMap && typeof btoa === 'function') {
		var sourceMapping = toComment(cssMapping);
		var sourceURLs = cssMapping.sources.map(function (source) {
		return '/# sourceURL=' + cssMapping.sourceRoot + source + ' /'
		});
		case 1009:
		if (100 !== a.charCodeAt(4)) break;

		return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
		}
		case 969:
		case 942:
		return '-webkit-' + a + a;

		return [content].join('\n');
		}
		case 978:
		return '-webkit-' + a + '-moz-' + a + a;

		// Adapted from convert-source-map (MIT)
		function toComment(sourceMap) {
		// eslint-disable-next-line no-undef
		var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
		var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
		case 1019:
		case 983:
		return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;

		return '/# ' + data + ' /';
		}
		case 883:
		if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;
		if (0 < a.indexOf('image-set(', 11)) return a.replace(la, '$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;

		/***/ }),
		/* 5 */
		/***/ (function(module, exports, __webpack_require__) {
		case 115:
		return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;

		// style-loader: Adds some css to the DOM by adding a <style> tag
		case 98:
		return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;
		}
		return '-webkit-' + a + '-ms-' + a + a;

		// load the styles
		var content = __webpack_require__(3);
		if(typeof content === 'string') content = [[module.i, content, '']];
		// Prepare cssTransformation
		var transform;
		case 964:
		return '-webkit-' + a + '-ms-flex-' + a + a;

		var options = {}
		options.transform = transform
		// add the styles to the DOM
		var update = __webpack_require__(6)(content, options);
		if(content.locals) module.exports = content.locals;
		// Hot Module Replacement
		if(false) {
		// When the styles change, update the <style> tags
		if(!content.locals) {
		module.hot.accept("!!../node_modules/css-loader/index.js!./index.css", function() {
		var newContent = require("!!../node_modules/css-loader/index.js!./index.css");
		if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
		update(newContent);
		});
		}
		// When the module is disposed, remove the <style> tags
		module.hot.dispose(function() { update(); });
		}
		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;

		/***/ }),
		/* 6 */
		/***/ (function(module, exports, __webpack_require__) {
		case 1005:
		return ma.test(a) ? a.replace(ba, ':-webkit-') + a.replace(ba, ':-moz-') + a : a;

		/*
		MIT License http://www.opensource.org/licenses/mit-license.php
		Author Tobias Koppers @sokra
		*/
		case 1e3:
		b = a.substring(13).trim();
		c = b.indexOf('-') + 1;

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

		var memoize = function (fn) {
		var memo;
		case 232:
		b = a.replace(G, 'tb-rl');
		break;

		return function () {
		if (typeof memo === "undefined") memo = fn.apply(this, arguments);
		return memo;
		};
		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(ca, '') + a;

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

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

		case 931:
		case 953:
		if (!0 === na.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(oa, '$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(pa, '$1'), e, c);
		}

		function ha(d, c) {
		var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));
		return e !== c + ';' ? e.replace(qa, ' 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 < B; ++g) {
		switch (w = S[g].call(z, 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:
		B = S.length = 0;
		break;

		default:
		switch (d.constructor) {
		case Array:
		for (var c = 0, e = d.length; c < e; ++c) {
		T(d[c]);
		}

		break;

		case Function:
		S[B++] = d;
		break;

		case Boolean:
		Z = !!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 z(d, c) {
		if (void 0 !== this && this.constructor === z) return da(d);
		var e = d;
		33 > e.charCodeAt(0) && (e = e.trim());
		V = e;
		e = [V];

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

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

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

		var isOldIE = memoize(function () {
		// Test for IE <= 9 as proposed by Browserhacks
		// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
		// Tests for existence of standard globals is to allow style-loader
		// to operate correctly into non-standard environments
		// @see https://github.com/webpack-contrib/style-loader/issues/177
		return window && document && document.all && !window.atob;
		});
		/* harmony default export */ __webpack_exports__["a"] = (W);
		//# sourceMappingURL=stylis.esm.js.map

		var getElement = (function (fn) {
		var memo = {};

		return function(selector) {
		if (typeof memo[selector] === "undefined") {
		memo[selector] = fn.call(this, selector);
		}
		/***/ }),
		/* 7 */
		/***/ (function(module, __webpack_exports__, __webpack_require__) {

		return memo[selector]
		};
		})(function (target) {
		return document.querySelector(target)
		"use strict";
		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,
		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
		};

		/* harmony default export */ __webpack_exports__["a"] = (unitlessKeys);


		/***/ }),
		/* 8 */
		/***/ (function(module, exports, __webpack_require__) {

		"use strict";


		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var singleton = null;
		var singletonCounter = 0;
		var stylesInsertedAtTop = [];
		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 fixUrls = __webpack_require__(7);
		var _templateObject = _taggedTemplateLiteral(["\n .", " {\n background-color: ", ";\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n }\n "], ["\n .", " {\n background-color: ", ";\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n }\n "]);

		module.exports = function(list, options) {
		if (typeof DEBUG !== "undefined" && DEBUG) {
		if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
		}
		var _react = __webpack_require__(2);

		options = options \|\| {};
		var _react2 = _interopRequireDefault(_react);

		options.attrs = typeof options.attrs === "object" ? options.attrs : {};
		var _emotion = __webpack_require__(1);

		// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
		// tags it will allow on a page
		if (!options.singleton) options.singleton = isOldIE();
		var _skeleton = __webpack_require__(0);

		// By default, add <style> tags to the <head> element
		if (!options.insertInto) options.insertInto = "head";
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		// By default, add <style> tags to the bottom of the target
		if (!options.insertAt) options.insertAt = "bottom";
		function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

		var styles = listToStyles(list, options);
		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		addStylesToDom(styles, options);
		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		return function update (newList) {
		var mayRemove = [];
		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		for (var i = 0; i < styles.length; i++) {
		var item = styles[i];
		var domStyle = stylesInDom[item.id];
		var SkeletonTheme = function (_Component) {
		_inherits(SkeletonTheme, _Component);

		domStyle.refs--;
		mayRemove.push(domStyle);
		}
		function SkeletonTheme(props) {
		_classCallCheck(this, SkeletonTheme);

		if(newList) {
		var newStyles = listToStyles(newList, options);
		addStylesToDom(newStyles, options);
		}
		var _this = _possibleConstructorReturn(this, (SkeletonTheme.__proto__ \|\| Object.getPrototypeOf(SkeletonTheme)).call(this, props));

		for (var i = 0; i < mayRemove.length; i++) {
		var domStyle = mayRemove[i];
		_this.themeClass = (0, _emotion.css)(_templateObject, _skeleton.skeletonClass, props.color, props.color, props.highlightColor, props.color);
		return _this;
		}

		if(domStyle.refs === 0) {
		for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();
		_createClass(SkeletonTheme, [{
		key: "render",
		value: function render() {
		return _react2.default.createElement(
		"div",
		{ className: this.themeClass },
		this.props.children
		);
		}
		}]);

		delete stylesInDom[domStyle.id];
		}
		}
		};
		return SkeletonTheme;
		}(_react.Component);

		SkeletonTheme.defaultProps = {
		color: _skeleton.defaultBaseColor,
		highlightColor: _skeleton.defaultHighlightColor
		};
		exports.default = SkeletonTheme;

		function addStylesToDom (styles, options) {
		for (var i = 0; i < styles.length; i++) {
		var item = styles[i];
		var domStyle = stylesInDom[item.id];
		/***/ }),
		/* 9 */
		/***/ (function(module, __webpack_exports__, __webpack_require__) {

		if(domStyle) {
		domStyle.refs++;
		"use strict";
		/* WEBPACK VAR INJECTION /(function(process) {/ harmony import */ var __WEBPACK_IMPORTED_MODULE_0__emotion_memoize__ = __webpack_require__(5);
		/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__emotion_unitless__ = __webpack_require__(7);
		/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__emotion_hash__ = __webpack_require__(4);
		/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__emotion_stylis__ = __webpack_require__(6);
		/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_stylis_rule_sheet__ = __webpack_require__(11);
		/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_stylis_rule_sheet___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_stylis_rule_sheet__);

		for(var j = 0; j < domStyle.parts.length; j++) {
		domStyle.parts[j](item.parts[j]);
		}

		for(; j < item.parts.length; j++) {
		domStyle.parts.push(addStyle(item.parts[j], options));
		}
		} else {
		var parts = [];

		for(var j = 0; j < item.parts.length; j++) {
		parts.push(addStyle(item.parts[j], options));
		}

		stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
		}
		}
		}

		function listToStyles (list, options) {
		var styles = [];
		var newStyles = {};

		for (var i = 0; i < list.length; i++) {
		var item = list[i];
		var id = options.base ? item[0] + options.base : item[0];
		var css = item[1];
		var media = item[2];
		var sourceMap = item[3];
		var part = {css: css, media: media, sourceMap: sourceMap};
		var hyphenateRegex = /[A-Z]\|^ms/g;
		var processStyleName = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__emotion_memoize__["a" /* default */])(function (styleName) {
		return styleName.replace(hyphenateRegex, '-$&').toLowerCase();
		});
		var processStyleValue = function processStyleValue(key, value) {
		if (value == null \|\| typeof value === 'boolean') {
		return '';
		}

		if(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]});
		else newStyles[id].parts.push(part);
		}
		if (__WEBPACK_IMPORTED_MODULE_1__emotion_unitless__["a" /* default */][key] !== 1 && key.charCodeAt(1) !== 45 && // custom properties
		!isNaN(value) && value !== 0) {
		return value + 'px';
		}

		return styles;
		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;

		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 + "\"'`");
		}
		}

		return oldProcessStyleValue(key, value);
		};
		}

		function insertStyleElement (options, style) {
		var target = getElement(options.insertInto)
		var classnames = function classnames(args) {
		var len = args.length;
		var i = 0;
		var cls = '';

		if (!target) {
		throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
		}
		for (; i < len; i++) {
		var arg = args[i];
		if (arg == null) continue;
		var toAdd = void 0;

		var lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];
		switch (typeof arg) {
		case 'boolean':
		break;

		if (options.insertAt === "top") {
		if (!lastStyleElementInsertedAtTop) {
		target.insertBefore(style, target.firstChild);
		} else if (lastStyleElementInsertedAtTop.nextSibling) {
		target.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);
		} else {
		target.appendChild(style);
		}
		stylesInsertedAtTop.push(style);
		} else if (options.insertAt === "bottom") {
		target.appendChild(style);
		} else {
		throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
		}
		}
		case 'function':
		if (process.env.NODE_ENV !== 'production') {
		console.error('Passing functions to cx is deprecated and will be removed in the next major version of Emotion.\n' + 'Please call the function before passing it to cx.');
		}

		function removeStyleElement (style) {
		if (style.parentNode === null) return false;
		style.parentNode.removeChild(style);
		toAdd = classnames([arg()]);
		break;

		var idx = stylesInsertedAtTop.indexOf(style);
		if(idx >= 0) {
		stylesInsertedAtTop.splice(idx, 1);
		}
		}
		case 'object':
		{
		if (Array.isArray(arg)) {
		toAdd = classnames(arg);
		} else {
		toAdd = '';

		function createStyleElement (options) {
		var style = document.createElement("style");
		for (var k in arg) {
		if (arg[k] && k) {
		toAdd && (toAdd += ' ');
		toAdd += k;
		}
		}
		}

		options.attrs.type = "text/css";
		break;
		}

		addAttrs(style, options.attrs);
		insertStyleElement(options, style);
		default:
		{
		toAdd = arg;
		}
		}

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

		function createLinkElement (options) {
		var link = document.createElement("link");
		return cls;
		};
		var isBrowser = typeof document !== 'undefined';

		options.attrs.type = "text/css";
		options.attrs.rel = "stylesheet";
		/*

		addAttrs(link, options.attrs);
		insertStyleElement(options, link);
		high performance StyleSheet for css-in-js systems

		return link;
		- uses multiple style tags behind the scenes for millions of rules
		- uses `insertRule` for appending in production for much faster performance
		- 'polyfills' on server side

		// usage

		import StyleSheet from 'glamor/lib/sheet'
		let styleSheet = new StyleSheet()

		styleSheet.inject()
		- 'injects' the stylesheet into the page (or into memory if on server)

		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


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

		function addAttrs (el, attrs) {
		Object.keys(attrs).forEach(function (key) {
		el.setAttribute(key, attrs[key]);
		});
		function makeStyleTag(opts) {
		var tag = document.createElement('style');
		tag.setAttribute('data-emotion', opts.key \|\| '');

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

		tag.appendChild(document.createTextNode('')) // $FlowFixMe
		;
		(opts.container !== undefined ? opts.container : document.head).appendChild(tag);
		return tag;
		}

		function addStyle (obj, options) {
		var style, update, remove, result;
		var StyleSheet =
		/#__PURE__/
		function () {
		function StyleSheet(options) {
		this.isSpeedy = process.env.NODE_ENV === 'production'; // the big drawback here is that the css won't be editable in devtools

		// If a transform function was defined, run it on the css
		if (options.transform && obj.css) {
		result = options.transform(obj.css);
		this.tags = [];
		this.ctr = 0;
		this.opts = options;
		}

		if (result) {
		// If transform returns a value, use that instead of the original css.
		// This allows running runtime transformations on the css.
		obj.css = result;
		} else {
		// If the transform function returns a falsy value, don't add this css.
		// This allows conditional loading of css
		return function() {
		// noop
		};
		}
		}
		var _proto = StyleSheet.prototype;

		if (options.singleton) {
		var styleIndex = singletonCounter++;
		_proto.inject = function inject() {
		if (this.injected) {
		throw new Error('already injected!');
		}

		style = singleton \|\| (singleton = createStyleElement(options));
		this.tags[0] = makeStyleTag(this.opts);
		this.injected = true;
		};

		update = applyToSingletonTag.bind(null, style, styleIndex, false);
		remove = applyToSingletonTag.bind(null, style, styleIndex, true);
		_proto.speedy = function speedy(bool) {
		if (this.ctr !== 0) {
		// cannot change speedy mode after inserting any rule to sheet. Either call speedy(${bool}) earlier in your app, or call flush() before speedy(${bool})
		throw new Error("cannot change speedy now");
		}

		} else if (
		obj.sourceMap &&
		typeof URL === "function" &&
		typeof URL.createObjectURL === "function" &&
		typeof URL.revokeObjectURL === "function" &&
		typeof Blob === "function" &&
		typeof btoa === "function"
		) {
		style = createLinkElement(options);
		update = updateLink.bind(null, style, options);
		remove = function () {
		removeStyleElement(style);
		this.isSpeedy = !!bool;
		};

		if(style.href) URL.revokeObjectURL(style.href);
		};
		} else {
		style = createStyleElement(options);
		update = applyToTag.bind(null, style);
		remove = function () {
		removeStyleElement(style);
		};
		}
		_proto.insert = function insert(rule, sourceMap) {
		// this is the ultrafast version, works across browsers
		if (this.isSpeedy) {
		var tag = this.tags[this.tags.length - 1];
		var sheet = sheetForTag(tag);

		update(obj);
		try {
		sheet.insertRule(rule, sheet.cssRules.length);
		} catch (e) {
		if (process.env.NODE_ENV !== 'production') {
		console.warn('illegal rule', rule); // eslint-disable-line no-console
		}
		}
		} else {
		var _tag = makeStyleTag(this.opts);

		return function updateStyle (newObj) {
		if (newObj) {
		if (
		newObj.css === obj.css &&
		newObj.media === obj.media &&
		newObj.sourceMap === obj.sourceMap
		) {
		return;
		}
		this.tags.push(_tag);

		update(obj = newObj);
		} else {
		remove();
		}
		};
		}
		_tag.appendChild(document.createTextNode(rule + (sourceMap \|\| '')));
		}

		var replaceText = (function () {
		var textStore = [];
		this.ctr++;

		return function (index, replacement) {
		textStore[index] = replacement;
		if (this.ctr % 65000 === 0) {
		this.tags.push(makeStyleTag(this.opts));
		}
		};

		return textStore.filter(Boolean).join('\n');
		};
		})();
		_proto.flush = function flush() {
		// $FlowFixMe
		this.tags.forEach(function (tag) {
		return tag.parentNode.removeChild(tag);
		});
		this.tags = [];
		this.ctr = 0; // todo - look for remnants in document.styleSheets

		function applyToSingletonTag (style, index, remove, obj) {
		var css = remove ? "" : obj.css;
		this.injected = false;
		};

		if (style.styleSheet) {
		style.styleSheet.cssText = replaceText(index, css);
		} else {
		var cssNode = document.createTextNode(css);
		var childNodes = style.childNodes;
		return StyleSheet;
		}();

		if (childNodes[index]) style.removeChild(childNodes[index]);
		function createEmotion(context, options) {
		if (context.__SECRET_EMOTION__ !== undefined) {
		return context.__SECRET_EMOTION__;
		}

		if (childNodes.length) {
		style.insertBefore(cssNode, childNodes[index]);
		} else {
		style.appendChild(cssNode);
		}
		}
		}
		if (options === undefined) options = {};
		var key = options.key \|\| 'css';

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

		if(media) {
		style.setAttribute("media", media)
		}
		var current;

		if(style.styleSheet) {
		style.styleSheet.cssText = css;
		} else {
		while(style.firstChild) {
		style.removeChild(style.firstChild);
		}
		function insertRule(rule) {
		current += rule;

		style.appendChild(document.createTextNode(css));
		}
		}
		if (isBrowser) {
		sheet.insert(rule, currentSourceMap);
		}
		}

		function updateLink (link, options, obj) {
		var css = obj.css;
		var sourceMap = obj.sourceMap;
		var insertionPlugin = __WEBPACK_IMPORTED_MODULE_4_stylis_rule_sheet___default()(insertRule);
		var stylisOptions;

		/*
		If convertToAbsoluteUrls isn't defined, but sourcemaps are enabled
		and there is no publicPath defined then lets turn convertToAbsoluteUrls
		on by default. Otherwise default to the convertToAbsoluteUrls option
		directly
		*/
		var autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;
		if (options.prefix !== undefined) {
		stylisOptions = {
		prefix: options.prefix
		};
		}

		if (options.convertToAbsoluteUrls \|\| autoFixUrls) {
		css = fixUrls(css);
		}
		var caches = {
		registered: {},
		inserted: {},
		nonce: options.nonce,
		key: key
		};
		var sheet = new StyleSheet(options);

		if (sourceMap) {
		// http://stackoverflow.com/a/26603875
		css += "\n/# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " /";
		}
		if (isBrowser) {
		// 🚀
		sheet.inject();
		}

		var blob = new Blob([css], { type: "text/css" });
		var stylis = new __WEBPACK_IMPORTED_MODULE_3__emotion_stylis__["a" /* default */](stylisOptions);
		stylis.use(options.stylisPlugins)(insertionPlugin);
		var currentSourceMap = '';

		var oldSrc = link.href;
		function handleInterpolation(interpolation, couldBeSelectorInterpolation) {
		if (interpolation == null) {
		return '';
		}

		link.href = URL.createObjectURL(blob);
		switch (typeof interpolation) {
		case 'boolean':
		return '';

		if(oldSrc) URL.revokeObjectURL(oldSrc);
		case 'function':
		if (interpolation.__emotion_styles !== undefined) {
		var selector = interpolation.toString();

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

		return selector;
		}

		if (this === undefined && process.env.NODE_ENV !== 'production') {
		console.error('Interpolating functions in css calls is deprecated and will be removed in the next major version of Emotion.\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}`");
		}

		return handleInterpolation.call(this, this === undefined ? interpolation() : // $FlowFixMe
		interpolation(this.mergedProps, this.context), couldBeSelectorInterpolation);

		case 'object':
		return createStringFromObject.call(this, interpolation);

		default:
		var cached = caches.registered[interpolation];
		return couldBeSelectorInterpolation === false && cached !== undefined ? cached : interpolation;
		}
		}

		var objectToStringCache = new WeakMap();

		function createStringFromObject(obj) {
		if (objectToStringCache.has(obj)) {
		// $FlowFixMe
		return objectToStringCache.get(obj);
		}

		var string = '';

		if (Array.isArray(obj)) {
		obj.forEach(function (interpolation) {
		string += handleInterpolation.call(this, interpolation, false);
		}, this);
		} else {
		Object.keys(obj).forEach(function (key) {
		if (typeof obj[key] !== 'object') {
		if (caches.registered[obj[key]] !== undefined) {
		string += key + "{" + caches.registered[obj[key]] + "}";
		} else {
		string += processStyleName(key) + ":" + processStyleValue(key, obj[key]) + ";";
		}
		} 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(obj[key]) && typeof obj[key][0] === 'string' && caches.registered[obj[key][0]] === undefined) {
		obj[key].forEach(function (value) {
		string += processStyleName(key) + ":" + processStyleValue(key, value) + ";";
		});
		} else {
		string += key + "{" + handleInterpolation.call(this, obj[key], false) + "}";
		}
		}
		}, this);
		}

		objectToStringCache.set(obj, string);
		return string;
		}

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

		var createClassName = function createClassName(styles, identifierName) {
		return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__emotion_hash__["a" /* default */])(styles + identifierName) + identifierName;
		};

		if (process.env.NODE_ENV !== 'production') {
		var oldCreateClassName = createClassName;
		var sourceMappingUrlPattern = /\/\#\ssourceMappingURL=data:application\/json;\S+\s+\\//g;

		createClassName = function createClassName(styles, identifierName) {
		return oldCreateClassName(styles.replace(sourceMappingUrlPattern, function (sourceMap) {
		currentSourceMap = sourceMap;
		return '';
		}), identifierName);
		};
		}

		var createStyles = function createStyles(strings) {
		var stringMode = true;
		var styles = '';
		var identifierName = '';

		if (strings == null \|\| strings.raw === undefined) {
		stringMode = false;
		styles += handleInterpolation.call(this, strings, false);
		} else {
		styles += strings[0];
		}

		for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
		interpolations[_key - 1] = arguments[_key];
		}

		interpolations.forEach(function (interpolation, i) {
		styles += handleInterpolation.call(this, interpolation, styles.charCodeAt(styles.length - 1) === 46 // .
		);

		if (stringMode === true && strings[i + 1] !== undefined) {
		styles += strings[i + 1];
		}
		}, this);
		stylesWithLabel = styles;
		styles = styles.replace(labelPattern, function (match, p1) {
		identifierName += "-" + p1;
		return '';
		});
		name = createClassName(styles, identifierName);
		return styles;
		};

		if (process.env.NODE_ENV !== 'production') {
		var oldStylis = stylis;

		stylis = function stylis(selector, styles) {
		oldStylis(selector, styles);
		currentSourceMap = '';
		};
		}

		function insert(scope, styles) {
		if (caches.inserted[name] === undefined) {
		current = '';
		stylis(scope, styles);
		caches.inserted[name] = current;
		}
		}

		var css = function css() {
		var styles = createStyles.apply(this, arguments);
		var selector = key + "-" + name;

		if (caches.registered[selector] === undefined) {
		caches.registered[selector] = stylesWithLabel;
		}

		insert("." + selector, styles);
		return selector;
		};

		var keyframes = function keyframes() {
		var styles = createStyles.apply(this, arguments);
		var animation = "animation-" + name;
		insert('', "@keyframes " + animation + "{" + styles + "}");
		return animation;
		};

		var injectGlobal = function injectGlobal() {
		var styles = createStyles.apply(this, arguments);
		insert('', styles);
		};

		function getRegisteredStyles(registeredStyles, classNames) {
		var rawClassName = '';
		classNames.split(' ').forEach(function (className) {
		if (caches.registered[className] !== undefined) {
		registeredStyles.push(className);
		} else {
		rawClassName += className + " ";
		}
		});
		return rawClassName;
		}

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

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

		return rawClassName + css(registeredStyles, sourceMap);
		}

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

		return merge(classnames(classNames));
		}

		function hydrateSingleId(id) {
		caches.inserted[id] = true;
		}

		function hydrate(ids) {
		ids.forEach(hydrateSingleId);
		}

		function flush() {
		if (isBrowser) {
		sheet.flush();
		sheet.inject();
		}

		caches.inserted = {};
		caches.registered = {};
		}

		if (isBrowser) {
		var chunks = document.querySelectorAll("[data-emotion-" + key + "]");
		Array.prototype.forEach.call(chunks, function (node) {
		// $FlowFixMe
		sheet.tags[0].parentNode.insertBefore(node, sheet.tags[0]); // $FlowFixMe

		node.getAttribute("data-emotion-" + key).split(' ').forEach(hydrateSingleId);
		});
		}

		var emotion = {
		flush: flush,
		hydrate: hydrate,
		cx: cx,
		merge: merge,
		getRegisteredStyles: getRegisteredStyles,
		injectGlobal: injectGlobal,
		keyframes: keyframes,
		css: css,
		sheet: sheet,
		caches: caches
		};
		context.__SECRET_EMOTION__ = emotion;
		return emotion;
		}

		/* harmony default export */ __webpack_exports__["a"] = (createEmotion);
		//# sourceMappingURL=index.esm.js.map

		/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(10)))

		/***/ }),
		/* 7 */
		/* 10 */
		/***/ (function(module, exports) {

		// shim for using process in browser
		var process = module.exports = {};

		/**
		* When source maps are enabled, `style-loader` uses a link element with a data-uri to
		* embed the css on the page. This breaks all relative urls because now they are relative to a
		* bundle instead of the current page.
		*
		* One solution is to only use full urls, but that may be impossible.
		*
		* Instead, this function "fixes" the relative urls to be absolute according to the current page location.
		*
		* A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.
		*
		*/
		// cached from whatever global is present so that test runners that stub it
		// don't break things. But we need to wrap it in a try catch in case it is
		// wrapped in strict mode code which doesn't define any globals. It's inside a
		// function because try/catches deoptimize in certain engines.

		module.exports = function (css) {
		// get current location
		var location = typeof window !== "undefined" && window.location;
		var cachedSetTimeout;
		var cachedClearTimeout;

		if (!location) {
		throw new Error("fixUrls requires window.location");
		}
		function defaultSetTimout() {
		throw new Error('setTimeout has not been defined');
		}
		function defaultClearTimeout () {
		throw new Error('clearTimeout has not been defined');
		}
		(function () {
		try {
		if (typeof setTimeout === 'function') {
		cachedSetTimeout = setTimeout;
		} else {
		cachedSetTimeout = defaultSetTimout;
		}
		} catch (e) {
		cachedSetTimeout = defaultSetTimout;
		}
		try {
		if (typeof clearTimeout === 'function') {
		cachedClearTimeout = clearTimeout;
		} else {
		cachedClearTimeout = defaultClearTimeout;
		}
		} catch (e) {
		cachedClearTimeout = defaultClearTimeout;
		}
		} ())
		function runTimeout(fun) {
		if (cachedSetTimeout === setTimeout) {
		//normal enviroments in sane situations
		return setTimeout(fun, 0);
		}
		// if setTimeout wasn't available but was latter defined
		if ((cachedSetTimeout === defaultSetTimout \|\| !cachedSetTimeout) && setTimeout) {
		cachedSetTimeout = setTimeout;
		return setTimeout(fun, 0);
		}
		try {
		// when when somebody has screwed with setTimeout but no I.E. maddness
		return cachedSetTimeout(fun, 0);
		} catch(e){
		try {
		// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
		return cachedSetTimeout.call(null, fun, 0);
		} catch(e){
		// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
		return cachedSetTimeout.call(this, fun, 0);
		}
		}

		// blank or null?
		if (!css \|\| typeof css !== "string") {
		return css;
		}

		var baseUrl = location.protocol + "//" + location.host;
		var currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/");
		}
		function runClearTimeout(marker) {
		if (cachedClearTimeout === clearTimeout) {
		//normal enviroments in sane situations
		return clearTimeout(marker);
		}
		// if clearTimeout wasn't available but was latter defined
		if ((cachedClearTimeout === defaultClearTimeout \|\| !cachedClearTimeout) && clearTimeout) {
		cachedClearTimeout = clearTimeout;
		return clearTimeout(marker);
		}
		try {
		// when when somebody has screwed with setTimeout but no I.E. maddness
		return cachedClearTimeout(marker);
		} catch (e){
		try {
		// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
		return cachedClearTimeout.call(null, marker);
		} catch (e){
		// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
		// Some versions of I.E. have different rules for clearTimeout vs setTimeout
		return cachedClearTimeout.call(this, marker);
		}
		}

		// convert each url(...)
		/*
		This regular expression is just a way to recursively match brackets within
		a string.

		/url\s*\( = Match on the word "url" with any whitespace after it and then a parens
		( = Start a capturing group
		(?: = Start a non-capturing group
		[^)(] = Match anything that isn't a parentheses
		\| = OR
		\( = Match a start parentheses
		(?: = Start another non-capturing groups
		[^)(]+ = Match anything that isn't a parentheses
		\| = OR
		\( = Match a start parentheses
		[^)(]* = Match anything that isn't a parentheses
		\) = Match a end parentheses
		) = End Group
		*\) = Match anything and then a close parens
		) = Close non-capturing group
		* = Match anything
		) = Close capturing group
		\) = Match a close parens

		/gi = Get all matches, not the first. Be case insensitive.
		*/
		var fixedCss = css.replace(/url\s$((?:[^)(]\|\((?:[^)(]+\|\([^)(]$)\)))\)/gi, function(fullMatch, origUrl) {
		// strip quotes (if they exist)
		var unquotedOrigUrl = origUrl
		.trim()
		.replace(/^"(.*)"$/, function(o, $1){ return $1; })
		.replace(/^'(.*)'$/, function(o, $1){ return $1; });
		}
		var queue = [];
		var draining = false;
		var currentQueue;
		var queueIndex = -1;

		// already a full url? no change
		if (/^(#\|data:\|http:\/\/\|https:\/\/\|file:\/\/\/)/i.test(unquotedOrigUrl)) {
		return fullMatch;
		}
		function cleanUpNextTick() {
		if (!draining \|\| !currentQueue) {
		return;
		}
		draining = false;
		if (currentQueue.length) {
		queue = currentQueue.concat(queue);
		} else {
		queueIndex = -1;
		}
		if (queue.length) {
		drainQueue();
		}
		}

		// convert the url to a full url
		var newUrl;
		function drainQueue() {
		if (draining) {
		return;
		}
		var timeout = runTimeout(cleanUpNextTick);
		draining = true;

		if (unquotedOrigUrl.indexOf("//") === 0) {
		//TODO: should we add protocol?
		newUrl = unquotedOrigUrl;
		} else if (unquotedOrigUrl.indexOf("/") === 0) {
		// path should be relative to the base url
		newUrl = baseUrl + unquotedOrigUrl; // already starts with '/'
		} else {
		// path should be relative to current directory
		newUrl = currentDir + unquotedOrigUrl.replace(/^\.\//, ""); // Strip leading './'
		}
		var len = queue.length;
		while(len) {
		currentQueue = queue;
		queue = [];
		while (++queueIndex < len) {
		if (currentQueue) {
		currentQueue[queueIndex].run();
		}
		}
		queueIndex = -1;
		len = queue.length;
		}
		currentQueue = null;
		draining = false;
		runClearTimeout(timeout);
		}

		// send back the fixed url(...)
		return "url(" + JSON.stringify(newUrl) + ")";
		});
		process.nextTick = function (fun) {
		var args = new Array(arguments.length - 1);
		if (arguments.length > 1) {
		for (var i = 1; i < arguments.length; i++) {
		args[i - 1] = arguments[i];
		}
		}
		queue.push(new Item(fun, args));
		if (queue.length === 1 && !draining) {
		runTimeout(drainQueue);
		}
		};

		// send back the fixed css
		return fixedCss;
		// v8 likes predictible objects
		function Item(fun, array) {
		this.fun = fun;
		this.array = array;
		}
		Item.prototype.run = function () {
		this.fun.apply(null, this.array);
		};
		process.title = 'browser';
		process.browser = true;
		process.env = {};
		process.argv = [];
		process.version = ''; // empty string to avoid regexp issues
		process.versions = {};

		function noop() {}

		process.on = noop;
		process.addListener = noop;
		process.once = noop;
		process.off = noop;
		process.removeListener = noop;
		process.removeAllListeners = noop;
		process.emit = noop;
		process.prependListener = noop;
		process.prependOnceListener = noop;

		process.listeners = function (name) { return [] }

		process.binding = function (name) {
		throw new Error('process.binding is not supported');
		};

		process.cwd = function () { return '/' };
		process.chdir = function (dir) {
		throw new Error('process.chdir is not supported');
		};
		process.umask = function() { return 0; };


		/***/ }),
		/* 8 */
		/* 11 */
		/***/ (function(module, exports, __webpack_require__) {

		module.exports = __webpack_require__(1);
		(function (factory) {
		true ? (module['exports'] = factory()) :
		typeof define === 'function' && define['amd'] ? define(factory()) :
		(window['stylisRuleSheet'] = factory())
		}(function () {

		'use strict'

		return function (insertRule) {
		var delimiter = '/\|/'
		var needle = delimiter+'}'

		function toSheet (block) {
		if (block)
		try {
		insertRule(block + '}')
		} catch (e) {}
		}

		return function ruleSheet (context, content, selectors, parents, line, column, length, ns, depth, at) {
		switch (context) {
		// property
		case 1:
		// @import
		if (depth === 0 && content.charCodeAt(0) === 64)
		return insertRule(content+';'), ''
		break
		// selector
		case 2:
		if (ns === 0)
		return content + delimiter
		break
		// at-rule
		case 3:
		switch (ns) {
		// @font-face, @page
		case 102:
		case 112:
		return insertRule(selectors[0]+content), ''
		default:
		return content + (at === 0 ? delimiter : '')
		}
		case -2:
		content.split(needle).forEach(toSheet)
		}
		}
		}
		}))


		/***/ }),
		/* 12 */
		/***/ (function(module, exports) {

		var g;

		// This works in non-strict mode
		g = (function() {
		return this;
		})();

		try {
		// This works if eval is allowed (see CSP)
		g = g \|\| Function("return this")() \|\| (1,eval)("this");
		} catch(e) {
		// This works if the window reference is available
		if(typeof window === "object")
		g = window;
		}

		// g can still be undefined, but nothing to do about it...
		// We return undefined, instead of nothing here, so it's
		// easier to handle this case. if(!global) { ...}

		module.exports = g;


		/***/ }),
		/* 13 */
		/***/ (function(module, exports, __webpack_require__) {

		module.exports = __webpack_require__(3);


		/***/ })
		/******/ ]);
		});

package.json

		{
		"name": "react-loading-skeleton",
		"version": "0.5.0",
		"version": "0.6.0",
		"license": "MIT",
		@@ -12,16 +12,18 @@ "author": "David Tang",
		"main": "dist/bundle.js",
		"sideEffects": false,
		"scripts": {
		"start": "npm run storybook",
		"start": "yarn run storybook",
		"test": "jest",
		"build": "webpack",
		"storybook": "start-storybook -p 8080 -c .storybook",
		"prepublishOnly": "npm run build"
		"prepublishOnly": "yarn run build"
		},
		"jest": {
		"setupFiles": ["<rootDir>/testSetup/testSetup.js"],
		"moduleNameMapper": {
		"\\.css$": "<rootDir>/testSetup/cssMock.js"
		}
		"setupFiles": [
		"<rootDir>/testSetup/testSetup.js"
		]
		},
		"dependencies": {},
		"dependencies": {
		"emotion": "^9.2.8"
		},
		"peerDependencies": {
		@@ -37,6 +39,6 @@ "react": "^15.6.1 \|\| ^16.0.0"
		"babel-preset-react": "^6.24.1",
		"css-loader": "^0.28.4",
		"css-loader": "^1.0.0",
		"enzyme": "^3.1.0",
		"enzyme-adapter-react-16": "^1.0.2",
		"jest": "^21.2.1",
		"jest": "^23.4.1",
		"prop-types": "^15.5.10",
		@@ -46,3 +48,3 @@ "react": "^16.0.0",
		"react-test-renderer": "^16.0.0",
		"style-loader": "^0.18.2",
		"style-loader": "^0.21.0",
		"webpack": "^2.6.1",
		@@ -49,0 +51,0 @@ "webpack-dev-server": "^2.4.5"

README.md

		@@ -32,10 +32,10 @@ # react-loading-skeleton
		class Blogpost extends Component {
		render() {
		return (
		<div style={{fontSize: 20, lineHeight: 2}}>
		<h1>{this.props.title \|\| <Skeleton/>}</h1>
		{this.props.body \|\| <Skeleton count={10}/>}
		</div>
		);
		}
		render() {
		return (
		<div style={{ fontSize: 20, lineHeight: 2 }}>
		<h1>{this.props.title \|\| <Skeleton />}</h1>
		{this.props.body \|\| <Skeleton count={10} />}
		</div>
		);
		}
		}
		@@ -52,8 +52,8 @@ ```

		Instead, make components with built-in skeleton states.
		Instead, make components with _built-in_ skeleton states.

		In addition to keeping the styling in-sync, here are some other reasons to do this:

		1. Components represent all possible states it can be in - loading included.
		1. It allows for more flexible loading patterns - in the `Blogpost` example, it's possible to have the `title` load first, and then the `body`, while having both pieces of content show loading skeletons at the right time.
		1. Components represent all possible states it can be in - loading included.
		1. It allows for more flexible loading patterns - in the `Blogpost` example, it's possible to have the `title` load first, and then the `body`, while having both pieces of content show loading skeletons at the right time.

		@@ -66,14 +66,15 @@ ## Theming
		```javascript
		import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
		import Skeleton, { SkeletonTheme } from "react-loading-skeleton";

		<SkeletonTheme color="#202020" highlightColor="#444">
		<p>
		<Skeleton count={3} />
		</p>
		</SkeletonTheme>
		<p>
		<Skeleton count={3} />
		</p>
		</SkeletonTheme>;
		```

		## Duration

		```javascript
		<Skeleton duration={2}/>
		<Skeleton duration={2} />
		```
		@@ -85,6 +86,8 @@

		## Width

		`width`: Number \| String \| null, defaults to null

		```javascript
		<Skeleton width={100}/>
		<Skeleton width={100} />
		```
		@@ -91,0 +94,0 @@

react-loading-skeleton - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes