		throw new Error(
		'A new entrypoint in the `@emotion/styled` package, `@emotion/styled/base`, has replaced the `@emotion/styled-base` package. Please remove this package and use `@emotion/styled/base` instead.'
		)

+2

-124

CHANGELOG.md

		# @emotion/styled-base

		## 11.0.0-next.2
		## 11.0.0-next.3

		### Major Changes

		- [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Remove support for deprecated `innerRef` prop

		* [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use hooks internally for improved bundle size and a better tree in React DevTools

		### Patch Changes

		- Updated dependencies [[`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967)]:
		- @emotion/core@11.0.0-next.2

		## 11.0.0-next.1

		### Major Changes

		- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes:

		- Reduce build times when using emotion
		- In many cases remove the need for manually specifying generic parameters for your emotion components.

		If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below.

		## Improvements

		- useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section.
		- Union types as props are better supported and should be inferred properly
		- Build times should be reduced significantly in larger projects.

		## Breaking changes

		- withTheme can now have the Theme type specified when calling it. For example `withTheme<MyTheme>(MyComponent)`

		Breaking change: Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section

		- `css` function has been restricted to prevent passing of invalid types
		- `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example

		`styled<typeof MyComponent, ExtraProps>(MyComponent)({})`
		to
		`styled(MyComponent)<ExtraProps>({})`

		- `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example:

		`StyledComponent<Props, {}, MyTheme>`
		to
		`StyledComponent<Props & { theme?: MyTheme }>`

		### Patch Changes

		- [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687) [#1588](https://github.com/emotion-js/emotion/pull/1588) Thanks [@FezVrasta](https://github.com/FezVrasta)! - StyledComponent Flow type is now polymorphic, that means you can now define the component prop types to get better type safety.
		- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]:
		- @emotion/serialize@1.0.0-next.0
		- @emotion/core@11.0.0-next.1

		## 11.0.0-next.0

		### Patch Changes

		- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]:
		- @emotion/core@11.0.0-next.0

		## 10.0.24

		### Patch Changes

		- Updated dependencies [[`5e17e456`](https://github.com/emotion-js/emotion/commit/5e17e456a66857bb3a3a5b39c9cd8f8dd89301e5)]:
		- @emotion/is-prop-valid@0.8.5

		## 10.0.23

		### Patch Changes

		- [`97673098`](https://github.com/emotion-js/emotion/commit/97673098945a75b716d4cac100c1af46a5ae18f2) [#1570](https://github.com/emotion-js/emotion/pull/1570) Thanks [@FezVrasta](https://github.com/FezVrasta)! - Fixed package's Flow types

		- Updated dependencies [[`a55f3d49`](https://github.com/emotion-js/emotion/commit/a55f3d49c2febdf7eb1bede3f12da13c3efa1399), [`ca95f385`](https://github.com/emotion-js/emotion/commit/ca95f385f7ce3da6d53de1a652b3b219f11434c4), [`6cdb5695`](https://github.com/emotion-js/emotion/commit/6cdb56959bc4b64d7178604f1eb64a058c2e58c2)]:
		- @emotion/serialize@0.11.14
		- @emotion/is-prop-valid@0.8.4

		## 10.0.22

		### Patch Changes

		- [`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387) [#1219](https://github.com/emotion-js/emotion/pull/1219) Thanks [@Andarist](https://github.com/Andarist)! - Add dev hint about css object being stringified by accident

		* [`c3f0bc10`](https://github.com/emotion-js/emotion/commit/c3f0bc101833fff1ee4e27c7a730b821a7df4a15) [#1545](https://github.com/emotion-js/emotion/pull/1545) Thanks [@jgroszko](https://github.com/jgroszko)! - Accept objects as `className` in styled components (they are stringified) to match React behavior

		* Updated dependencies [[`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387), [`2fc75f26`](https://github.com/emotion-js/emotion/commit/2fc75f266b23cf48fb842953bc47eebcb5241cbd), [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc), [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286)]:
		- @emotion/core@10.0.22
		- @emotion/serialize@0.11.12

		## 10.0.19

		- Updated dependencies [c81c0033]:
		- @emotion/serialize@0.11.11
		- @emotion/is-prop-valid@0.8.3

		## 10.0.17

		### Patch Changes

		- [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Add warnings about using illegal escape sequences
		- [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Update Babel dependencies

		## 10.0.15

		### Patch Changes

		- [8638c416](https://github.com/emotion-js/emotion/commit/8638c416) [#1421](https://github.com/emotion-js/emotion/pull/1421) Thanks [@Andarist](https://github.com/Andarist)! - TS: Disallow Theme parameter when it was already parametrized by using CustomStyled

		## 10.0.14

		### Patch Changes

		- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
		- [c673e200](https://github.com/emotion-js/emotion/commit/c673e200) [#1405](https://github.com/emotion-js/emotion/pull/1405) Thanks [@ryanswanson](https://github.com/ryanswanson)! - PropsOf<C> TypeScript utilities - Support defaultProps by delegating to new JSX and React types.

		## 10.0.13

		- Updated dependencies [52bd655b]:
		- @emotion/is-prop-valid@0.8.1

		## 10.0.12

		- Updated dependencies [06426c95]:
		- @emotion/is-prop-valid@0.8.0
		- [`f9feab1a`](https://github.com/emotion-js/emotion/commit/f9feab1a5d1ca88e53c3f7a063be5d5871cc93e8) [#1575](https://github.com/emotion-js/emotion/pull/1575) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Removed support for `@emotion/styled-base` package. It has been moved to `@emotion/styled` and is available as `@emotion/styled/base`. This simplifies how the regular and base versions relate to each other and eliminates problems with stricter package managers when `@emotion/styled-base` was not installed explicitly by a user.

+1

-178

dist/styled-base.cjs.dev.js

		'use strict';

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

		function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

		var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
		var React = require('react');
		var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
		var core = require('@emotion/core');
		var utils = require('@emotion/utils');
		var serialize = require('@emotion/serialize');

		var testOmitPropsOnStringTag = isPropValid;

		var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
		return key !== 'theme';
		};

		var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
		return typeof tag === 'string' && // 96 is one less than the char code
		// for "a" so this is checking that
		// it's a lowercase character
		tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
		};

		function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
		var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
		var isBrowser = typeof document !== 'undefined';

		var createStyled = function createStyled(tag, options) {
		if (process.env.NODE_ENV !== 'production') {
		if (tag === undefined) {
		throw new Error('You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
		}
		}

		var identifierName;
		var shouldForwardProp;
		var targetClassName;

		if (options !== undefined) {
		identifierName = options.label;
		targetClassName = options.target;
		shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
		return tag.__emotion_forwardProp(propName) && // $FlowFixMe
		options.shouldForwardProp(propName);
		} : options.shouldForwardProp;
		}

		var isReal = tag.__emotion_real === tag;
		var baseTag = isReal && tag.__emotion_base \|\| tag;

		if (typeof shouldForwardProp !== 'function' && isReal) {
		shouldForwardProp = tag.__emotion_forwardProp;
		}

		var defaultShouldForwardProp = shouldForwardProp \|\| getDefaultShouldForwardProp(baseTag);
		var shouldUseAs = !defaultShouldForwardProp('as');
		return function () {
		var args = arguments;
		var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];

		if (identifierName !== undefined) {
		styles.push("label:" + identifierName + ";");
		}

		if (args[0] == null \|\| args[0].raw === undefined) {
		styles.push.apply(styles, args);
		} else {
		if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
		}

		styles.push(args[0][0]);
		var len = args.length;
		var i = 1;

		for (; i < len; i++) {
		if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
		}

		styles.push(args[i], args[0][i]);
		}
		} // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class


		var Styled = core.withEmotionCache(function (props, cache, ref) {
		var finalTag = shouldUseAs && props.as \|\| baseTag;
		var className = '';
		var classInterpolations = [];
		var mergedProps = props;

		if (props.theme == null) {
		mergedProps = {};

		for (var key in props) {
		mergedProps[key] = props[key];
		}

		mergedProps.theme = React.useContext(core.ThemeContext);
		}

		if (typeof props.className === 'string') {
		className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className);
		} else if (props.className != null) {
		className = props.className + " ";
		}

		var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
		var rules = utils.insertStyles(cache, serialized, typeof finalTag === 'string');
		className += cache.key + "-" + serialized.name;

		if (targetClassName !== undefined) {
		className += " " + targetClassName;
		}

		var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
		var newProps = {};

		for (var _key in props) {
		if (shouldUseAs && _key === 'as') continue;

		if ( // $FlowFixMe
		finalShouldForwardProp(_key)) {
		newProps[_key] = props[_key];
		}
		}

		newProps.className = className;
		newProps.ref = ref;
		var ele = React.createElement(finalTag, newProps);

		if (!isBrowser && rules !== undefined) {
		var _ref;

		var serializedNames = serialized.name;
		var next = serialized.next;

		while (next !== undefined) {
		serializedNames += ' ' + next.name;
		next = next.next;
		}

		return React.createElement(React.Fragment, null, React.createElement("style", (_ref = {}, _ref["data-emotion-" + cache.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
		__html: rules
		}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
		}

		return ele;
		});
		Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName \|\| baseTag.name \|\| 'Component') + ")";
		Styled.defaultProps = tag.defaultProps;
		Styled.__emotion_real = Styled;
		Styled.__emotion_base = baseTag;
		Styled.__emotion_styles = styles;
		Styled.__emotion_forwardProp = shouldForwardProp;
		Object.defineProperty(Styled, 'toString', {
		value: function value() {
		if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {
		return 'NO_COMPONENT_SELECTOR';
		} // $FlowFixMe: coerce undefined to string


		return "." + targetClassName;
		}
		});

		Styled.withComponent = function (nextTag, nextOptions) {
		return createStyled(nextTag, nextOptions !== undefined ? _objectSpread({}, options \|\| {}, {}, nextOptions) : options).apply(void 0, styles);
		};

		return Styled;
		};
		};

		exports.default = createStyled;
		throw new Error('A new entrypoint in the `@emotion/styled` package, `@emotion/styled/base`, has replaced the `@emotion/styled-base` package. Please remove this package and use `@emotion/styled/base` instead.');

+1

-89

dist/styled-base.cjs.prod.js

		"use strict";

		function _interopDefault(ex) {
		return ex && "object" == typeof ex && "default" in ex ? ex.default : ex;
		}

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

		var _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), React = require("react"), isPropValid = _interopDefault(require("@emotion/is-prop-valid")), core = require("@emotion/core"), utils = require("@emotion/utils"), serialize = require("@emotion/serialize"), testOmitPropsOnStringTag = isPropValid, testOmitPropsOnComponent = function(key) {
		return "theme" !== key;
		}, getDefaultShouldForwardProp = function(tag) {
		return "string" == typeof tag && tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
		};

		function ownKeys(object, enumerableOnly) {
		var keys = Object.keys(object);
		if (Object.getOwnPropertySymbols) {
		var symbols = Object.getOwnPropertySymbols(object);
		enumerableOnly && (symbols = symbols.filter(function(sym) {
		return Object.getOwnPropertyDescriptor(object, sym).enumerable;
		})), keys.push.apply(keys, symbols);
		}
		return keys;
		}

		function _objectSpread(target) {
		for (var i = 1; i < arguments.length; i++) {
		var source = null != arguments[i] ? arguments[i] : {};
		i % 2 ? ownKeys(source, !0).forEach(function(key) {
		_defineProperty(target, key, source[key]);
		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(source).forEach(function(key) {
		Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
		});
		}
		return target;
		}

		var isBrowser = "undefined" != typeof document, createStyled = function createStyled(tag, options) {
		var identifierName, shouldForwardProp, targetClassName;
		void 0 !== options && (identifierName = options.label, targetClassName = options.target,
		shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function(propName) {
		return tag.__emotion_forwardProp(propName) && options.shouldForwardProp(propName);
		} : options.shouldForwardProp);
		var isReal = tag.__emotion_real === tag, baseTag = isReal && tag.__emotion_base \|\| tag;
		"function" != typeof shouldForwardProp && isReal && (shouldForwardProp = tag.__emotion_forwardProp);
		var defaultShouldForwardProp = shouldForwardProp \|\| getDefaultShouldForwardProp(baseTag), shouldUseAs = !defaultShouldForwardProp("as");
		return function() {
		var args = arguments, styles = isReal && void 0 !== tag.__emotion_styles ? tag.__emotion_styles.slice(0) : [];
		if (void 0 !== identifierName && styles.push("label:" + identifierName + ";"), null == args[0] \|\| void 0 === args[0].raw) styles.push.apply(styles, args); else {
		styles.push(args[0][0]);
		for (var len = args.length, i = 1; i < len; i++) styles.push(args[i], args[0][i]);
		}
		var Styled = core.withEmotionCache(function(props, cache, ref) {
		var finalTag = shouldUseAs && props.as \|\| baseTag, className = "", classInterpolations = [], mergedProps = props;
		if (null == props.theme) {
		for (var key in mergedProps = {}, props) mergedProps[key] = props[key];
		mergedProps.theme = React.useContext(core.ThemeContext);
		}
		"string" == typeof props.className ? className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className) : null != props.className && (className = props.className + " ");
		var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps), rules = utils.insertStyles(cache, serialized, "string" == typeof finalTag);
		className += cache.key + "-" + serialized.name, void 0 !== targetClassName && (className += " " + targetClassName);
		var finalShouldForwardProp = shouldUseAs && void 0 === shouldForwardProp ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp, newProps = {};
		for (var _key in props) shouldUseAs && "as" === _key \|\| finalShouldForwardProp(_key) && (newProps[_key] = props[_key]);
		newProps.className = className, newProps.ref = ref;
		var ele = React.createElement(finalTag, newProps);
		if (!isBrowser && void 0 !== rules) {
		for (var _ref, serializedNames = serialized.name, next = serialized.next; void 0 !== next; ) serializedNames += " " + next.name,
		next = next.next;
		return React.createElement(React.Fragment, null, React.createElement("style", ((_ref = {})["data-emotion-" + cache.key] = serializedNames,
		_ref.dangerouslySetInnerHTML = {
		__html: rules
		}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
		}
		return ele;
		});
		return Styled.displayName = void 0 !== identifierName ? identifierName : "Styled(" + ("string" == typeof baseTag ? baseTag : baseTag.displayName \|\| baseTag.name \|\| "Component") + ")",
		Styled.defaultProps = tag.defaultProps, Styled.__emotion_real = Styled, Styled.__emotion_base = baseTag,
		Styled.__emotion_styles = styles, Styled.__emotion_forwardProp = shouldForwardProp,
		Object.defineProperty(Styled, "toString", {
		value: function() {
		return "." + targetClassName;
		}
		}), Styled.withComponent = function(nextTag, nextOptions) {
		return createStyled(nextTag, void 0 !== nextOptions ? _objectSpread({}, options \|\| {}, {}, nextOptions) : options).apply(void 0, styles);
		}, Styled;
		};
		};

		exports.default = createStyled;
		throw new Error("A new entrypoint in the `@emotion/styled` package, `@emotion/styled/base`, has replaced the `@emotion/styled-base` package. Please remove this package and use `@emotion/styled/base` instead.");

+4

-32

package.json

		{
		"name": "@emotion/styled-base",
		"version": "11.0.0-next.2",
		"description": "base styled API for emotion",
		"version": "11.0.0-next.3",
		"description": "Deprecated package which became `@emotion/styled/base`",
		"main": "dist/styled-base.cjs.js",
		"module": "dist/styled-base.esm.js",
		"browser": {
		"./dist/styled-base.cjs.js": "./dist/styled-base.browser.cjs.js",
		"./dist/styled-base.esm.js": "./dist/styled-base.browser.esm.js"
		},
		"types": "types/index.d.ts",
		"license": "MIT",
		"repository": "https://github.com/emotion-js/emotion/tree/master/packages/styled-base",
		"scripts": {
		"test:typescript": "dtslint types"
		"test:typescript": "exit 0"
		},
		"dependencies": {
		"@babel/runtime": "^7.5.5",
		"@emotion/is-prop-valid": "0.8.5",
		"@emotion/serialize": "^1.0.0-next.0",
		"@emotion/utils": "0.11.2"
		},
		"devDependencies": {
		"@emotion/core": "^11.0.0-next.2",
		"@types/react": "^16.9.11",
		"dtslint": "^0.3.0",
		"react": "^16.11.0"
		},
		"peerDependencies": {
		"@emotion/core": "^11.0.0-next.2",
		"react": ">=16.8.0"
		},
		"publishConfig": {
		"access": "public"
		},
		"files": [
		"src",
		"dist",
		"types"
		],
		"umd:main": "dist/styled-base.umd.min.js",
		"preconstruct": {
		"umdName": "emotionStyledBase"
		"source": "index"
		}
		}

-163

dist/styled-base.browser.cjs.js

		'use strict';

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

		function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

		var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
		var React = require('react');
		var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
		var core = require('@emotion/core');
		var utils = require('@emotion/utils');
		var serialize = require('@emotion/serialize');

		var testOmitPropsOnStringTag = isPropValid;

		var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
		return key !== 'theme';
		};

		var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
		return typeof tag === 'string' && // 96 is one less than the char code
		// for "a" so this is checking that
		// it's a lowercase character
		tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
		};

		function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
		var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";

		var createStyled = function createStyled(tag, options) {
		if (process.env.NODE_ENV !== 'production') {
		if (tag === undefined) {
		throw new Error('You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
		}
		}

		var identifierName;
		var shouldForwardProp;
		var targetClassName;

		if (options !== undefined) {
		identifierName = options.label;
		targetClassName = options.target;
		shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
		return tag.__emotion_forwardProp(propName) && // $FlowFixMe
		options.shouldForwardProp(propName);
		} : options.shouldForwardProp;
		}

		var isReal = tag.__emotion_real === tag;
		var baseTag = isReal && tag.__emotion_base \|\| tag;

		if (typeof shouldForwardProp !== 'function' && isReal) {
		shouldForwardProp = tag.__emotion_forwardProp;
		}

		var defaultShouldForwardProp = shouldForwardProp \|\| getDefaultShouldForwardProp(baseTag);
		var shouldUseAs = !defaultShouldForwardProp('as');
		return function () {
		var args = arguments;
		var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];

		if (identifierName !== undefined) {
		styles.push("label:" + identifierName + ";");
		}

		if (args[0] == null \|\| args[0].raw === undefined) {
		styles.push.apply(styles, args);
		} else {
		if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
		}

		styles.push(args[0][0]);
		var len = args.length;
		var i = 1;

		for (; i < len; i++) {
		if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
		}

		styles.push(args[i], args[0][i]);
		}
		} // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class


		var Styled = core.withEmotionCache(function (props, cache, ref) {
		var finalTag = shouldUseAs && props.as \|\| baseTag;
		var className = '';
		var classInterpolations = [];
		var mergedProps = props;

		if (props.theme == null) {
		mergedProps = {};

		for (var key in props) {
		mergedProps[key] = props[key];
		}

		mergedProps.theme = React.useContext(core.ThemeContext);
		}

		if (typeof props.className === 'string') {
		className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className);
		} else if (props.className != null) {
		className = props.className + " ";
		}

		var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
		var rules = utils.insertStyles(cache, serialized, typeof finalTag === 'string');
		className += cache.key + "-" + serialized.name;

		if (targetClassName !== undefined) {
		className += " " + targetClassName;
		}

		var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
		var newProps = {};

		for (var _key in props) {
		if (shouldUseAs && _key === 'as') continue;

		if ( // $FlowFixMe
		finalShouldForwardProp(_key)) {
		newProps[_key] = props[_key];
		}
		}

		newProps.className = className;
		newProps.ref = ref;
		var ele = React.createElement(finalTag, newProps);

		return ele;
		});
		Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName \|\| baseTag.name \|\| 'Component') + ")";
		Styled.defaultProps = tag.defaultProps;
		Styled.__emotion_real = Styled;
		Styled.__emotion_base = baseTag;
		Styled.__emotion_styles = styles;
		Styled.__emotion_forwardProp = shouldForwardProp;
		Object.defineProperty(Styled, 'toString', {
		value: function value() {
		if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {
		return 'NO_COMPONENT_SELECTOR';
		} // $FlowFixMe: coerce undefined to string


		return "." + targetClassName;
		}
		});

		Styled.withComponent = function (nextTag, nextOptions) {
		return createStyled(nextTag, nextOptions !== undefined ? _objectSpread({}, options \|\| {}, {}, nextOptions) : options).apply(void 0, styles);
		};

		return Styled;
		};
		};

		exports.default = createStyled;

-157

dist/styled-base.browser.esm.js

		import _defineProperty from '@babel/runtime/helpers/defineProperty';
		import { useContext, createElement } from 'react';
		import isPropValid from '@emotion/is-prop-valid';
		import { withEmotionCache, ThemeContext } from '@emotion/core';
		import { getRegisteredStyles, insertStyles } from '@emotion/utils';
		import { serializeStyles } from '@emotion/serialize';

		var testOmitPropsOnStringTag = isPropValid;

		var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
		return key !== 'theme';
		};

		var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
		return typeof tag === 'string' && // 96 is one less than the char code
		// for "a" so this is checking that
		// it's a lowercase character
		tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
		};

		function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
		var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";

		var createStyled = function createStyled(tag, options) {
		if (process.env.NODE_ENV !== 'production') {
		if (tag === undefined) {
		throw new Error('You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
		}
		}

		var identifierName;
		var shouldForwardProp;
		var targetClassName;

		if (options !== undefined) {
		identifierName = options.label;
		targetClassName = options.target;
		shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
		return tag.__emotion_forwardProp(propName) && // $FlowFixMe
		options.shouldForwardProp(propName);
		} : options.shouldForwardProp;
		}

		var isReal = tag.__emotion_real === tag;
		var baseTag = isReal && tag.__emotion_base \|\| tag;

		if (typeof shouldForwardProp !== 'function' && isReal) {
		shouldForwardProp = tag.__emotion_forwardProp;
		}

		var defaultShouldForwardProp = shouldForwardProp \|\| getDefaultShouldForwardProp(baseTag);
		var shouldUseAs = !defaultShouldForwardProp('as');
		return function () {
		var args = arguments;
		var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];

		if (identifierName !== undefined) {
		styles.push("label:" + identifierName + ";");
		}

		if (args[0] == null \|\| args[0].raw === undefined) {
		styles.push.apply(styles, args);
		} else {
		if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
		}

		styles.push(args[0][0]);
		var len = args.length;
		var i = 1;

		for (; i < len; i++) {
		if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
		}

		styles.push(args[i], args[0][i]);
		}
		} // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class


		var Styled = withEmotionCache(function (props, cache, ref) {
		var finalTag = shouldUseAs && props.as \|\| baseTag;
		var className = '';
		var classInterpolations = [];
		var mergedProps = props;

		if (props.theme == null) {
		mergedProps = {};

		for (var key in props) {
		mergedProps[key] = props[key];
		}

		mergedProps.theme = useContext(ThemeContext);
		}

		if (typeof props.className === 'string') {
		className = getRegisteredStyles(cache.registered, classInterpolations, props.className);
		} else if (props.className != null) {
		className = props.className + " ";
		}

		var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
		var rules = insertStyles(cache, serialized, typeof finalTag === 'string');
		className += cache.key + "-" + serialized.name;

		if (targetClassName !== undefined) {
		className += " " + targetClassName;
		}

		var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
		var newProps = {};

		for (var _key in props) {
		if (shouldUseAs && _key === 'as') continue;

		if ( // $FlowFixMe
		finalShouldForwardProp(_key)) {
		newProps[_key] = props[_key];
		}
		}

		newProps.className = className;
		newProps.ref = ref;
		var ele = createElement(finalTag, newProps);

		return ele;
		});
		Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName \|\| baseTag.name \|\| 'Component') + ")";
		Styled.defaultProps = tag.defaultProps;
		Styled.__emotion_real = Styled;
		Styled.__emotion_base = baseTag;
		Styled.__emotion_styles = styles;
		Styled.__emotion_forwardProp = shouldForwardProp;
		Object.defineProperty(Styled, 'toString', {
		value: function value() {
		if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {
		return 'NO_COMPONENT_SELECTOR';
		} // $FlowFixMe: coerce undefined to string


		return "." + targetClassName;
		}
		});

		Styled.withComponent = function (nextTag, nextOptions) {
		return createStyled(nextTag, nextOptions !== undefined ? _objectSpread({}, options \|\| {}, {}, nextOptions) : options).apply(void 0, styles);
		};

		return Styled;
		};
		};

		export default createStyled;

dist/styled-base.cjs.js.flow

Sorry, the diff of this file is not supported yet

-174

dist/styled-base.esm.js

		import _defineProperty from '@babel/runtime/helpers/defineProperty';
		import { useContext, createElement, Fragment } from 'react';
		import isPropValid from '@emotion/is-prop-valid';
		import { withEmotionCache, ThemeContext } from '@emotion/core';
		import { getRegisteredStyles, insertStyles } from '@emotion/utils';
		import { serializeStyles } from '@emotion/serialize';

		var testOmitPropsOnStringTag = isPropValid;

		var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
		return key !== 'theme';
		};

		var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
		return typeof tag === 'string' && // 96 is one less than the char code
		// for "a" so this is checking that
		// it's a lowercase character
		tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
		};

		function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
		var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
		var isBrowser = typeof document !== 'undefined';

		var createStyled = function createStyled(tag, options) {
		if (process.env.NODE_ENV !== 'production') {
		if (tag === undefined) {
		throw new Error('You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
		}
		}

		var identifierName;
		var shouldForwardProp;
		var targetClassName;

		if (options !== undefined) {
		identifierName = options.label;
		targetClassName = options.target;
		shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
		return tag.__emotion_forwardProp(propName) && // $FlowFixMe
		options.shouldForwardProp(propName);
		} : options.shouldForwardProp;
		}

		var isReal = tag.__emotion_real === tag;
		var baseTag = isReal && tag.__emotion_base \|\| tag;

		if (typeof shouldForwardProp !== 'function' && isReal) {
		shouldForwardProp = tag.__emotion_forwardProp;
		}

		var defaultShouldForwardProp = shouldForwardProp \|\| getDefaultShouldForwardProp(baseTag);
		var shouldUseAs = !defaultShouldForwardProp('as');
		return function () {
		var args = arguments;
		var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];

		if (identifierName !== undefined) {
		styles.push("label:" + identifierName + ";");
		}

		if (args[0] == null \|\| args[0].raw === undefined) {
		styles.push.apply(styles, args);
		} else {
		if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
		}

		styles.push(args[0][0]);
		var len = args.length;
		var i = 1;

		for (; i < len; i++) {
		if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
		}

		styles.push(args[i], args[0][i]);
		}
		} // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class


		var Styled = withEmotionCache(function (props, cache, ref) {
		var finalTag = shouldUseAs && props.as \|\| baseTag;
		var className = '';
		var classInterpolations = [];
		var mergedProps = props;

		if (props.theme == null) {
		mergedProps = {};

		for (var key in props) {
		mergedProps[key] = props[key];
		}

		mergedProps.theme = useContext(ThemeContext);
		}

		if (typeof props.className === 'string') {
		className = getRegisteredStyles(cache.registered, classInterpolations, props.className);
		} else if (props.className != null) {
		className = props.className + " ";
		}

		var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
		var rules = insertStyles(cache, serialized, typeof finalTag === 'string');
		className += cache.key + "-" + serialized.name;

		if (targetClassName !== undefined) {
		className += " " + targetClassName;
		}

		var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
		var newProps = {};

		for (var _key in props) {
		if (shouldUseAs && _key === 'as') continue;

		if ( // $FlowFixMe
		finalShouldForwardProp(_key)) {
		newProps[_key] = props[_key];
		}
		}

		newProps.className = className;
		newProps.ref = ref;
		var ele = createElement(finalTag, newProps);

		if (!isBrowser && rules !== undefined) {
		var _ref;

		var serializedNames = serialized.name;
		var next = serialized.next;

		while (next !== undefined) {
		serializedNames += ' ' + next.name;
		next = next.next;
		}

		return createElement(Fragment, null, createElement("style", (_ref = {}, _ref["data-emotion-" + cache.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
		__html: rules
		}, _ref.nonce = cache.sheet.nonce, _ref)), ele);
		}

		return ele;
		});
		Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName \|\| baseTag.name \|\| 'Component') + ")";
		Styled.defaultProps = tag.defaultProps;
		Styled.__emotion_real = Styled;
		Styled.__emotion_base = baseTag;
		Styled.__emotion_styles = styles;
		Styled.__emotion_forwardProp = shouldForwardProp;
		Object.defineProperty(Styled, 'toString', {
		value: function value() {
		if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {
		return 'NO_COMPONENT_SELECTOR';
		} // $FlowFixMe: coerce undefined to string


		return "." + targetClassName;
		}
		});

		Styled.withComponent = function (nextTag, nextOptions) {
		return createStyled(nextTag, nextOptions !== undefined ? _objectSpread({}, options \|\| {}, {}, nextOptions) : options).apply(void 0, styles);
		};

		return Styled;
		};
		};

		export default createStyled;

-2

dist/styled-base.umd.min.js

		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/core")):"function"==typeof define&&define.amd?define(["react","@emotion/core"],t):(e=e\|\|self).emotionStyledBase=t(e.React,e.emotionCore)}(this,function(e,t){"use strict";var r=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e};function n(e){var t={};return function(r){return void 0===t[r]&&(t[r]=e(r)),t[r]}}var o=/^((children\|dangerouslySetInnerHTML\|key\|ref\|autoFocus\|defaultValue\|defaultChecked\|innerHTML\|suppressContentEditableWarning\|suppressHydrationWarning\|valueLink\|accept\|acceptCharset\|accessKey\|action\|allow\|allowUserMedia\|allowPaymentRequest\|allowFullScreen\|allowTransparency\|alt\|async\|autoComplete\|autoPlay\|capture\|cellPadding\|cellSpacing\|challenge\|charSet\|checked\|cite\|classID\|className\|cols\|colSpan\|content\|contentEditable\|contextMenu\|controls\|controlsList\|coords\|crossOrigin\|data\|dateTime\|decoding\|default\|defer\|dir\|disabled\|download\|draggable\|encType\|form\|formAction\|formEncType\|formMethod\|formNoValidate\|formTarget\|frameBorder\|headers\|height\|hidden\|high\|href\|hrefLang\|htmlFor\|httpEquiv\|id\|inputMode\|integrity\|is\|keyParams\|keyType\|kind\|label\|lang\|list\|loading\|loop\|low\|marginHeight\|marginWidth\|max\|maxLength\|media\|mediaGroup\|method\|min\|minLength\|multiple\|muted\|name\|nonce\|noValidate\|open\|optimum\|pattern\|placeholder\|playsInline\|poster\|preload\|profile\|radioGroup\|readOnly\|referrerPolicy\|rel\|required\|reversed\|role\|rows\|rowSpan\|sandbox\|scope\|scoped\|scrolling\|seamless\|selected\|shape\|size\|sizes\|slot\|span\|spellCheck\|src\|srcDoc\|srcLang\|srcSet\|start\|step\|style\|summary\|tabIndex\|target\|title\|type\|useMap\|value\|width\|wmode\|wrap\|about\|datatype\|inlist\|prefix\|property\|resource\|typeof\|vocab\|autoCapitalize\|autoCorrect\|autoSave\|color\|itemProp\|itemScope\|itemType\|itemID\|itemRef\|on\|results\|security\|unselectable\|accentHeight\|accumulate\|additive\|alignmentBaseline\|allowReorder\|alphabetic\|amplitude\|arabicForm\|ascent\|attributeName\|attributeType\|autoReverse\|azimuth\|baseFrequency\|baselineShift\|baseProfile\|bbox\|begin\|bias\|by\|calcMode\|capHeight\|clip\|clipPathUnits\|clipPath\|clipRule\|colorInterpolation\|colorInterpolationFilters\|colorProfile\|colorRendering\|contentScriptType\|contentStyleType\|cursor\|cx\|cy\|d\|decelerate\|descent\|diffuseConstant\|direction\|display\|divisor\|dominantBaseline\|dur\|dx\|dy\|edgeMode\|elevation\|enableBackground\|end\|exponent\|externalResourcesRequired\|fill\|fillOpacity\|fillRule\|filter\|filterRes\|filterUnits\|floodColor\|floodOpacity\|focusable\|fontFamily\|fontSize\|fontSizeAdjust\|fontStretch\|fontStyle\|fontVariant\|fontWeight\|format\|from\|fr\|fx\|fy\|g1\|g2\|glyphName\|glyphOrientationHorizontal\|glyphOrientationVertical\|glyphRef\|gradientTransform\|gradientUnits\|hanging\|horizAdvX\|horizOriginX\|ideographic\|imageRendering\|in\|in2\|intercept\|k\|k1\|k2\|k3\|k4\|kernelMatrix\|kernelUnitLength\|kerning\|keyPoints\|keySplines\|keyTimes\|lengthAdjust\|letterSpacing\|lightingColor\|limitingConeAngle\|local\|markerEnd\|markerMid\|markerStart\|markerHeight\|markerUnits\|markerWidth\|mask\|maskContentUnits\|maskUnits\|mathematical\|mode\|numOctaves\|offset\|opacity\|operator\|order\|orient\|orientation\|origin\|overflow\|overlinePosition\|overlineThickness\|panose1\|paintOrder\|pathLength\|patternContentUnits\|patternTransform\|patternUnits\|pointerEvents\|points\|pointsAtX\|pointsAtY\|pointsAtZ\|preserveAlpha\|preserveAspectRatio\|primitiveUnits\|r\|radius\|refX\|refY\|renderingIntent\|repeatCount\|repeatDur\|requiredExtensions\|requiredFeatures\|restart\|result\|rotate\|rx\|ry\|scale\|seed\|shapeRendering\|slope\|spacing\|specularConstant\|specularExponent\|speed\|spreadMethod\|startOffset\|stdDeviation\|stemh\|stemv\|stitchTiles\|stopColor\|stopOpacity\|strikethroughPosition\|strikethroughThickness\|string\|stroke\|strokeDasharray\|strokeDashoffset\|strokeLinecap\|strokeLinejoin\|strokeMiterlimit\|strokeOpacity\|strokeWidth\|surfaceScale\|systemLanguage\|tableValues\|targetX\|targetY\|textAnchor\|textDecoration\|textRendering\|textLength\|to\|transform\|u1\|u2\|underlinePosition\|underlineThickness\|unicode\|unicodeBidi\|unicodeRange\|unitsPerEm\|vAlphabetic\|vHanging\|vIdeographic\|vMathematical\|values\|vectorEffect\|version\|vertAdvY\|vertOriginX\|vertOriginY\|viewBox\|viewTarget\|visibility\|widths\|wordSpacing\|writingMode\|x\|xHeight\|x1\|x2\|xChannelSelector\|xlinkActuate\|xlinkArcrole\|xlinkHref\|xlinkRole\|xlinkShow\|xlinkTitle\|xlinkType\|xmlBase\|xmlns\|xmlnsXlink\|xmlLang\|xmlSpace\|y\|y1\|y2\|yChannelSelector\|z\|zoomAndPan\|for\|class\|autofocus)\|(([Dd][Aa][Tt][Aa]\|[Aa][Rr][Ii][Aa]\|x)-.))$/,i=n(function(e){return o.test(e)\|\|111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91}),a=function(e){return"theme"!==e},s=function(e){return"string"==typeof e&&e.charCodeAt(0)>96?i:a};var l={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,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},c=/[A-Z]\|^ms/g,d=/_EMO_([^_]+?)_([^]?)_EMO_/g,u=function(e){return 45===e.charCodeAt(1)},p=function(e){return null!=e&&"boolean"!=typeof e},f=n(function(e){return u(e)?e:e.replace(c,"-$&").toLowerCase()}),m=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(d,function(e,t,r){return g={name:t,styles:r,next:g},t})}return 1===l[e]\|\|u(e)\|\|"number"!=typeof t\|\|0===t?t:t+"px"};function h(e,t,r,n){if(null==r)return"";if(void 0!==r.__emotion_styles)return r;switch(typeof r){case"boolean":return"";case"object":if(1===r.anim)return g={name:r.name,styles:r.styles,next:g},r.name;if(void 0!==r.styles){var o=r.next;if(void 0!==o)for(;void 0!==o;)g={name:o.name,styles:o.styles,next:g},o=o.next;return r.styles+";"}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=h(e,t,r[o],!1);else for(var i in r){var a=r[i];if("object"!=typeof a)null!=t&&void 0!==t[a]?n+=i+"{"+t[a]+"}":p(a)&&(n+=f(i)+":"+m(i,a)+";");else if(!Array.isArray(a)\|\|"string"!=typeof a[0]\|\|null!=t&&void 0!==t[a[0]]){var s=h(e,t,a,!1);switch(i){case"animation":case"animationName":n+=f(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)p(a[l])&&(n+=f(i)+":"+m(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var i=g,a=r(e);return g=i,h(e,t,a,n)}}if(null==t)return r;var s=t[r];return void 0===s\|\|n?r:s}var g,y=/label:\s([^\s;\n{]+)\s;/g;function v(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}return function n(o,i){var a,l,c;void 0!==i&&(a=i.label,c=i.target,l=o.__emotion_forwardProp&&i.shouldForwardProp?function(e){return o.__emotion_forwardProp(e)&&i.shouldForwardProp(e)}:i.shouldForwardProp);var d=o.__emotion_real===o,u=d&&o.__emotion_base\|\|o;"function"!=typeof l&&d&&(l=o.__emotion_forwardProp);var p=l\|\|s(u),f=!p("as");return function(){var m=arguments,b=d&&void 0!==o.__emotion_styles?o.__emotion_styles.slice(0):[];if(void 0!==a&&b.push("label:"+a+";"),null==m[0]\|\|void 0===m[0].raw)b.push.apply(b,m);else{b.push(m[0][0]);for(var x=m.length,k=1;k<x;k++)b.push(m[k],m[0][k])}var w=t.withEmotionCache(function(r,n,o){var i,a,d,m,v=f&&r.as\|\|u,x="",k=[],w=r;if(null==r.theme){for(var C in w={},r)w[C]=r[C];w.theme=e.useContext(t.ThemeContext)}"string"==typeof r.className?(i=n.registered,a=k,d=r.className,m="",d.split(" ").forEach(function(e){void 0!==i[e]?a.push(i[e]):m+=e+" "}),x=m):null!=r.className&&(x=r.className+" ");var _=function(e,t,r){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var n=!0,o="";g=void 0;var i=e[0];null==i\|\|void 0===i.raw?(n=!1,o+=h(r,t,i,!1)):o+=i[0];for(var a=1;a<e.length;a++)o+=h(r,t,e[a],46===o.charCodeAt(o.length-1)),n&&(o+=i[a]);y.lastIndex=0;for(var s,l="";null!==(s=y.exec(o));)l+="-"+s[1];return{name:function(e){for(var t,r=e.length,n=r^r,o=0;r>=4;)t=1540483477(65535&(t=255&e.charCodeAt(o)\|(255&e.charCodeAt(++o))<<8\|(255&e.charCodeAt(++o))<<16\|(255&e.charCodeAt(++o))<<24))+((1540483477(t>>>16)&65535)<<16),n=1540483477(65535&n)+((1540483477(n>>>16)&65535)<<16)^(t=1540483477(65535&(t^=t>>>24))+((1540483477(t>>>16)&65535)<<16)),r-=4,++o;switch(r){case 3:n^=(255&e.charCodeAt(o+2))<<16;case 2:n^=(255&e.charCodeAt(o+1))<<8;case 1:n=1540483477(65535&(n^=255&e.charCodeAt(o)))+((1540483477(n>>>16)&65535)<<16)}return n=1540483477(65535&(n^=n>>>13))+((1540483477(n>>>16)&65535)<<16),((n^=n>>>15)>>>0).toString(36)}(o)+l,styles:o,next:g}}(b.concat(k),n.registered,w);!function(e,t,r){var n=e.key+"-"+t.name;if(!1===r&&void 0===e.registered[n]&&(e.registered[n]=t.styles),void 0===e.inserted[t.name]){var o=t;do{e.insert("."+n,o,e.sheet,!0),o=o.next}while(void 0!==o)}}(n,_,"string"==typeof v),x+=n.key+"-"+_.name,void 0!==c&&(x+=" "+c);var O=f&&void 0===l?s(v):p,S={};for(var A in r)f&&"as"===A\|\|O(A)&&(S[A]=r[A]);return S.className=x,S.ref=o,e.createElement(v,S)});return w.displayName=void 0!==a?a:"Styled("+("string"==typeof u?u:u.displayName\|\|u.name\|\|"Component")+")",w.defaultProps=o.defaultProps,w.__emotion_real=w,w.__emotion_base=u,w.__emotion_styles=b,w.__emotion_forwardProp=l,Object.defineProperty(w,"toString",{value:function(){return"."+c}}),w.withComponent=function(e,t){return n(e,void 0!==t?function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(n,!0).forEach(function(t){r(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}({},i\|\|{},{},t):i).apply(void 0,b)},w}}});
		//# sourceMappingURL=styled-base.umd.min.js.map

-1

dist/styled-base.umd.min.js.map

{"version":3,"file":"styled-base.umd.min.js","sources":["../../../node_modules/@babel/runtime/helpers/defineProperty.js","../../memoize/src/index.js","../../is-prop-valid/src/index.js","../src/utils.js","../../unitless/src/index.js","../../serialize/src/index.js","../src/index.js","../../utils/src/index.js","../../hash/src/index.js"],"sourcesContent":["function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nmodule.exports = _defineProperty;","// @flow\n\nexport default function memoize<V>(fn: string => V): string => V {\n const cache = {}\n\n return (arg: string) => {\n if (cache[arg] === undefined) cache[arg] = fn(arg)\n return cache[arg]\n }\n}\n","// @flow\nimport memoize from '@emotion/memoize'\n\ndeclare var codegen: { require: string => RegExp }\n\nconst reactPropsRegex = codegen.require('./props')\n\n// https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\nexport default memoize(\n prop =>\n reactPropsRegex.test(prop) ||\n (prop.charCodeAt(0) === 111 /* o */ &&\n prop.charCodeAt(1) === 110 /* n */ &&\n prop.charCodeAt(2) < 91) /* Z+1 */\n)\n","// @flow\nimport type { ElementType, StatelessFunctionalComponent } from 'react'\nimport isPropValid from '@emotion/is-prop-valid'\n\nexport type Interpolations = Array<any>\n\nexport type StyledOptions = {\n label?: string,\n shouldForwardProp?: string => boolean,\n target?: string\n}\n\nexport type StyledComponent<Props> = StatelessFunctionalComponent<Props> & {\n defaultProps: any,\n toString: () => string,\n withComponent: (\n nextTag: ElementType,\n nextOptions?: StyledOptions\n ) => StyledComponent<Props>\n}\n\nexport type PrivateStyledComponent<Props> = StyledComponent<Props> & {\n __emotion_real: StyledComponent<Props>,\n __emotion_base: any,\n __emotion_styles: any,\n __emotion_forwardProp: any\n}\n\nconst testOmitPropsOnStringTag = isPropValid\nconst testOmitPropsOnComponent = (key: string) => key !== 'theme'\n\nexport const getDefaultShouldForwardProp = (tag: ElementType) =>\n typeof tag === 'string' &&\n // 96 is one less than the char code\n // for \"a\" so this is checking that\n // it's a lowercase character\n tag.charCodeAt(0) > 96\n ? testOmitPropsOnStringTag\n : testOmitPropsOnComponent\n\nexport type CreateStyledComponent = <Props>(\n ...args: Interpolations\n) => StyledComponent<Props>\n\nexport type CreateStyled = {\n <Props>(\n tag: ElementType,\n options?: StyledOptions\n ): (...args: Interpolations) => StyledComponent<Props>,\n [key: string]: CreateStyledComponent,\n bind: () => CreateStyled\n}\n","// @flow\n\nlet unitlessKeys: { [key: string]: 1 } = {\n animationIterationCount: 1,\n borderImageOutset: 1,\n borderImageSlice: 1,\n borderImageWidth: 1,\n boxFlex: 1,\n boxFlexGroup: 1,\n boxOrdinalGroup: 1,\n columnCount: 1,\n columns: 1,\n flex: 1,\n flexGrow: 1,\n flexPositive: 1,\n flexShrink: 1,\n flexNegative: 1,\n flexOrder: 1,\n gridRow: 1,\n gridRowEnd: 1,\n gridRowSpan: 1,\n gridRowStart: 1,\n gridColumn: 1,\n gridColumnEnd: 1,\n gridColumnSpan: 1,\n gridColumnStart: 1,\n msGridRow: 1,\n msGridRowSpan: 1,\n msGridColumn: 1,\n msGridColumnSpan: 1,\n fontWeight: 1,\n lineHeight: 1,\n opacity: 1,\n order: 1,\n orphans: 1,\n tabSize: 1,\n widows: 1,\n zIndex: 1,\n zoom: 1,\n WebkitLineClamp: 1,\n\n // SVG-related properties\n fillOpacity: 1,\n floodOpacity: 1,\n stopOpacity: 1,\n strokeDasharray: 1,\n strokeDashoffset: 1,\n strokeMiterlimit: 1,\n strokeOpacity: 1,\n strokeWidth: 1\n}\n\nexport default unitlessKeys\n","// @flow\nimport type {\n Interpolation,\n SerializedStyles,\n RegisteredCache\n} from '@emotion/utils'\nimport hashString from '@emotion/hash'\nimport unitless from '@emotion/unitless'\nimport memoize from '@emotion/memoize'\n\nconst ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\\\00d7';\" should become \"content: '\\\\\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`\n\nconst UNDEFINED_AS_OBJECT_KEY_ERROR =\n \"You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).\"\n\nlet hyphenateRegex = /[A-Z]|^ms/g\nlet animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g\n\nconst isCustomProperty = (property: string) => property.charCodeAt(1) === 45\nconst isProcessableValue = value => value != null && typeof value !== 'boolean'\n\nconst processStyleName = memoize(\n (styleName: string) =>\n isCustomProperty(styleName)\n ? styleName\n : styleName.replace(hyphenateRegex, '-$&').toLowerCase()\n)\n\nlet processStyleValue = (\n key: string,\n value: string | number\n): string | number => {\n switch (key) {\n case 'animation':\n case 'animationName': {\n if (typeof value === 'string') {\n return value.replace(animationRegex, (match, p1, p2) => {\n cursor = {\n name: p1,\n styles: p2,\n next: cursor\n }\n return p1\n })\n }\n }\n }\n\n if (\n unitless[key] !== 1 &&\n !isCustomProperty(key) &&\n typeof value === 'number' &&\n value !== 0\n ) {\n return value + 'px'\n }\n return value\n}\n\nif (process.env.NODE_ENV !== 'production') {\n let contentValuePattern = /(attr|calc|counters?|url)\\(/\n let contentValues = [\n 'normal',\n 'none',\n 'counter',\n 'open-quote',\n 'close-quote',\n 'no-open-quote',\n 'no-close-quote',\n 'initial',\n 'inherit',\n 'unset'\n ]\n\n let oldProcessStyleValue = processStyleValue\n\n let msPattern = /^-ms-/\n let hyphenPattern = /-(.)/g\n\n let hyphenatedCache = {}\n\n processStyleValue = (key: string, value: string) => {\n if (key === 'content') {\n if (\n typeof value !== 'string' ||\n (contentValues.indexOf(value) === -1 &&\n !contentValuePattern.test(value) &&\n (value.charAt(0) !== value.charAt(value.length - 1) ||\n (value.charAt(0) !== '\"' && value.charAt(0) !== \"'\")))\n ) {\n console.error(\n `You seem to be using a value for 'content' without quotes, try replacing it with \\`content: '\"${value}\"'\\``\n )\n }\n }\n\n const processed = oldProcessStyleValue(key, value)\n\n if (\n processed !== '' &&\n !isCustomProperty(key) &&\n key.indexOf('-') !== -1 &&\n hyphenatedCache[key] === undefined\n ) {\n hyphenatedCache[key] = true\n console.error(\n `Using kebab-case for css properties in objects is not supported. Did you mean ${key\n .replace(msPattern, 'ms-')\n .replace(hyphenPattern, (str, char) => char.toUpperCase())}?`\n )\n }\n\n return processed\n }\n}\n\nlet shouldWarnAboutInterpolatingClassNameFromCss = true\n\nfunction handleInterpolation(\n mergedProps: void | Object,\n registered: RegisteredCache | void,\n interpolation: Interpolation,\n couldBeSelectorInterpolation: boolean\n): string | number {\n if (interpolation == null) {\n return ''\n }\n if (interpolation.__emotion_styles !== undefined) {\n if (\n process.env.NODE_ENV !== 'production' &&\n interpolation.toString() === 'NO_COMPONENT_SELECTOR'\n ) {\n throw new Error(\n 'Component selectors can only be used in conjunction with babel-plugin-emotion.'\n )\n }\n return interpolation\n }\n\n switch (typeof interpolation) {\n case 'boolean': {\n return ''\n }\n case 'object': {\n if (interpolation.anim === 1) {\n cursor = {\n name: interpolation.name,\n styles: interpolation.styles,\n next: cursor\n }\n\n return interpolation.name\n }\n if (interpolation.styles !== undefined) {\n let next = interpolation.next\n if (next !== undefined) {\n // not the most efficient thing ever but this is a pretty rare case\n // and there will be very few iterations of this generally\n while (next !== undefined) {\n cursor = {\n name: next.name,\n styles: next.styles,\n next: cursor\n }\n next = next.next\n }\n }\n let styles = `${interpolation.styles};`\n if (\n process.env.NODE_ENV !== 'production' &&\n interpolation.map !== undefined\n ) {\n styles += interpolation.map\n }\n\n return styles\n }\n\n return createStringFromObject(mergedProps, registered, interpolation)\n }\n case 'function': {\n if (mergedProps !== undefined) {\n let previousCursor = cursor\n let result = interpolation(mergedProps)\n cursor = previousCursor\n\n return handleInterpolation(\n mergedProps,\n registered,\n result,\n couldBeSelectorInterpolation\n )\n } else if (process.env.NODE_ENV !== 'production') {\n console.error(\n 'Functions that are interpolated in css calls will be stringified.\\n' +\n 'If you want to have a css call based on props, create a function that returns a css call like this\\n' +\n 'let dynamicStyle = (props) => css`color: ${props.color}`\\n' +\n 'It can be called directly with props or interpolated in a styled call like this\\n' +\n \"let SomeComponent = styled('div')`${dynamicStyle}`\"\n )\n }\n break\n }\n case 'string':\n if (process.env.NODE_ENV !== 'production') {\n const matched = []\n const replaced = interpolation.replace(\n animationRegex,\n (match, p1, p2) => {\n const fakeVarName = `animation${matched.length}`\n matched.push(\n `const ${fakeVarName} = keyframes\\`${p2.replace(\n /^@keyframes animation-\\w+/,\n ''\n )}\\``\n )\n return `\\${${fakeVarName}}`\n }\n )\n if (matched.length) {\n console.error(\n '`keyframes` output got interpolated into plain string, please wrap it with `css`.\\n\\n' +\n 'Instead of doing this:\\n\\n' +\n [...matched, `\\`${replaced}\\``].join('\\n') +\n '\\n\\nYou should wrap it with `css` like this:\\n\\n' +\n `css\\`${replaced}\\``\n )\n }\n }\n break\n }\n\n // finalize string values (regular strings and functions interpolated into css calls)\n if (registered == null) {\n return interpolation\n }\n const cached = registered[interpolation]\n if (\n process.env.NODE_ENV !== 'production' &&\n couldBeSelectorInterpolation &&\n shouldWarnAboutInterpolatingClassNameFromCss &&\n cached !== undefined\n ) {\n console.error(\n 'Interpolating a className from css`` is not recommended and will cause problems with composition.\\n' +\n 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion'\n )\n shouldWarnAboutInterpolatingClassNameFromCss = false\n }\n return cached !== undefined && !couldBeSelectorInterpolation\n ? cached\n : interpolation\n}\n\nfunction createStringFromObject(\n mergedProps: void | Object,\n registered: RegisteredCache | void,\n obj: { [key: string]: Interpolation }\n): string {\n let string = ''\n\n if (Array.isArray(obj)) {\n for (let i = 0; i < obj.length; i++) {\n string += handleInterpolation(mergedProps, registered, obj[i], false)\n }\n } else {\n for (let key in obj) {\n let value = obj[key]\n if (typeof value !== 'object') {\n if (registered != null && registered[value] !== undefined) {\n string += `${key}{${registered[value]}}`\n } else if (isProcessableValue(value)) {\n string += `${processStyleName(key)}:${processStyleValue(key, value)};`\n }\n } else {\n if (\n key === 'NO_COMPONENT_SELECTOR' &&\n process.env.NODE_ENV !== 'production'\n ) {\n throw new Error(\n 'Component selectors can only be used in conjunction with babel-plugin-emotion.'\n )\n }\n if (\n Array.isArray(value) &&\n typeof value[0] === 'string' &&\n (registered == null || registered[value[0]] === undefined)\n ) {\n for (let i = 0; i < value.length; i++) {\n if (isProcessableValue(value[i])) {\n string += `${processStyleName(key)}:${processStyleValue(\n key,\n value[i]\n )};`\n }\n }\n } else {\n const interpolated = handleInterpolation(\n mergedProps,\n registered,\n value,\n false\n )\n switch (key) {\n case 'animation':\n case 'animationName': {\n string += `${processStyleName(key)}:${interpolated};`\n break\n }\n default: {\n if (\n process.env.NODE_ENV !== 'production' &&\n key === 'undefined'\n ) {\n console.error(UNDEFINED_AS_OBJECT_KEY_ERROR)\n }\n string += `${key}{${interpolated}}`\n }\n }\n }\n }\n }\n }\n\n return string\n}\n\nlet labelPattern = /label:\\s*([^\\s;\\n{]+)\\s*;/g\n\nlet sourceMapPattern\nif (process.env.NODE_ENV !== 'production') {\n sourceMapPattern = /\\/\\*#\\ssourceMappingURL=data:application\\/json;\\S+\\s+\\*\\//\n}\n\n// this is the cursor for keyframes\n// keyframes are stored on the SerializedStyles object as a linked list\nlet cursor\n\nexport const serializeStyles = function(\n args: Array<Interpolation>,\n registered: RegisteredCache | void,\n mergedProps: void | Object\n): SerializedStyles {\n if (\n args.length === 1 &&\n typeof args[0] === 'object' &&\n args[0] !== null &&\n args[0].styles !== undefined\n ) {\n return args[0]\n }\n let stringMode = true\n let styles = ''\n\n cursor = undefined\n let strings = args[0]\n if (strings == null || strings.raw === undefined) {\n stringMode = false\n styles += handleInterpolation(mergedProps, registered, strings, false)\n } else {\n if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)\n }\n styles += strings[0]\n }\n // we start at 1 since we've already handled the first arg\n for (let i = 1; i < args.length; i++) {\n styles += handleInterpolation(\n mergedProps,\n registered,\n args[i],\n styles.charCodeAt(styles.length - 1) === 46\n )\n if (stringMode) {\n if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)\n }\n styles += strings[i]\n }\n }\n let sourceMap\n\n if (process.env.NODE_ENV !== 'production') {\n styles = styles.replace(sourceMapPattern, match => {\n sourceMap = match\n return ''\n })\n }\n\n // using a global regex with .exec is stateful so lastIndex has to be reset each time\n labelPattern.lastIndex = 0\n let identifierName = ''\n\n let match\n // https://esbench.com/bench/5b809c2cf2949800a0f61fb5\n while ((match = labelPattern.exec(styles)) !== null) {\n identifierName +=\n '-' +\n // $FlowFixMe we know it's not null\n match[1]\n }\n\n let name = hashString(styles) + identifierName\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)\n return {\n name,\n styles,\n map: sourceMap,\n next: cursor,\n toString() {\n return \"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).\"\n }\n }\n }\n return {\n name,\n styles,\n next: cursor\n }\n}\n","// @flow\nimport * as React from 'react'\nimport type { ElementType } from 'react'\nimport {\n getDefaultShouldForwardProp,\n type StyledOptions,\n type CreateStyled,\n type PrivateStyledComponent\n} from './utils'\nimport { withEmotionCache, ThemeContext } from '@emotion/core'\nimport { getRegisteredStyles, insertStyles } from '@emotion/utils'\nimport { serializeStyles } from '@emotion/serialize'\n\nconst ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\\\00d7';\" should become \"content: '\\\\\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`\n\nlet isBrowser = typeof document !== 'undefined'\n\nlet createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {\n if (process.env.NODE_ENV !== 'production') {\n if (tag === undefined) {\n throw new Error(\n 'You are trying to create a styled element with an undefined component.\\nYou may have forgotten to import it.'\n )\n }\n }\n let identifierName\n let shouldForwardProp\n let targetClassName\n if (options !== undefined) {\n identifierName = options.label\n targetClassName = options.target\n shouldForwardProp =\n tag.__emotion_forwardProp && options.shouldForwardProp\n ? propName =>\n tag.__emotion_forwardProp(propName) &&\n // $FlowFixMe\n options.shouldForwardProp(propName)\n : options.shouldForwardProp\n }\n const isReal = tag.__emotion_real === tag\n const baseTag = (isReal && tag.__emotion_base) || tag\n\n if (typeof shouldForwardProp !== 'function' && isReal) {\n shouldForwardProp = tag.__emotion_forwardProp\n }\n let defaultShouldForwardProp =\n shouldForwardProp || getDefaultShouldForwardProp(baseTag)\n const shouldUseAs = !defaultShouldForwardProp('as')\n\n return function<Props>(): PrivateStyledComponent<Props> {\n let args = arguments\n let styles =\n isReal && tag.__emotion_styles !== undefined\n ? tag.__emotion_styles.slice(0)\n : []\n\n if (identifierName !== undefined) {\n styles.push(`label:${identifierName};`)\n }\n if (args[0] == null || args[0].raw === undefined) {\n styles.push.apply(styles, args)\n } else {\n if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)\n }\n styles.push(args[0][0])\n let len = args.length\n let i = 1\n for (; i < len; i++) {\n if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)\n }\n styles.push(args[i], args[0][i])\n }\n }\n\n // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class\n const Styled: PrivateStyledComponent<Props> = withEmotionCache(\n (props, cache, ref) => {\n const finalTag = (shouldUseAs && props.as) || baseTag\n\n let className = ''\n let classInterpolations = []\n let mergedProps = props\n if (props.theme == null) {\n mergedProps = {}\n for (let key in props) {\n mergedProps[key] = props[key]\n }\n mergedProps.theme = React.useContext(ThemeContext)\n }\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(\n cache.registered,\n classInterpolations,\n props.className\n )\n } else if (props.className != null) {\n className = `${props.className} `\n }\n\n const serialized = serializeStyles(\n styles.concat(classInterpolations),\n cache.registered,\n mergedProps\n )\n const rules = insertStyles(\n cache,\n serialized,\n typeof finalTag === 'string'\n )\n className += `${cache.key}-${serialized.name}`\n if (targetClassName !== undefined) {\n className += ` ${targetClassName}`\n }\n\n const finalShouldForwardProp =\n shouldUseAs && shouldForwardProp === undefined\n ? getDefaultShouldForwardProp(finalTag)\n : defaultShouldForwardProp\n\n let newProps = {}\n\n for (let key in props) {\n if (shouldUseAs && key === 'as') continue\n\n if (\n // $FlowFixMe\n finalShouldForwardProp(key)\n ) {\n newProps[key] = props[key]\n }\n }\n\n newProps.className = className\n newProps.ref = ref\n\n const ele = React.createElement(finalTag, newProps)\n if (!isBrowser && rules !== undefined) {\n let serializedNames = serialized.name\n let next = serialized.next\n while (next !== undefined) {\n serializedNames += ' ' + next.name\n next = next.next\n }\n return (\n <React.Fragment>\n <style\n {...{\n [`data-emotion-${cache.key}`]: serializedNames,\n dangerouslySetInnerHTML: { __html: rules },\n nonce: cache.sheet.nonce\n }}\n />\n {ele}\n </React.Fragment>\n )\n }\n return ele\n }\n )\n\n Styled.displayName =\n identifierName !== undefined\n ? identifierName\n : `Styled(${\n typeof baseTag === 'string'\n ? baseTag\n : baseTag.displayName || baseTag.name || 'Component'\n })`\n\n Styled.defaultProps = tag.defaultProps\n Styled.__emotion_real = Styled\n Styled.__emotion_base = baseTag\n Styled.__emotion_styles = styles\n Styled.__emotion_forwardProp = shouldForwardProp\n\n Object.defineProperty(Styled, 'toString', {\n value() {\n if (\n targetClassName === undefined &&\n process.env.NODE_ENV !== 'production'\n ) {\n return 'NO_COMPONENT_SELECTOR'\n }\n // $FlowFixMe: coerce undefined to string\n return `.${targetClassName}`\n }\n })\n\n Styled.withComponent = (\n nextTag: ElementType,\n nextOptions?: StyledOptions\n ) => {\n return createStyled(\n nextTag,\n nextOptions !== undefined\n ? { ...(options || {}), ...nextOptions }\n : options\n )(...styles)\n }\n\n return Styled\n }\n}\n\nexport default createStyled\n","// @flow\nimport type { RegisteredCache, EmotionCache, SerializedStyles } from './types'\n\nlet isBrowser = typeof document !== 'undefined'\n\nexport function getRegisteredStyles(\n registered: RegisteredCache,\n registeredStyles: string[],\n classNames: string\n) {\n let rawClassName = ''\n\n classNames.split(' ').forEach(className => {\n if (registered[className] !== undefined) {\n registeredStyles.push(registered[className])\n } else {\n rawClassName += `${className} `\n }\n })\n return rawClassName\n}\n\nexport const insertStyles = (\n cache: EmotionCache,\n serialized: SerializedStyles,\n isStringTag: boolean\n) => {\n let className = `${cache.key}-${serialized.name}`\n if (\n // we only need to add the styles to the registered cache if the\n // class name could be used further down\n // the tree but if it's a string tag, we know it won't\n // so we don't have to add it to registered cache.\n // this improves memory usage since we can avoid storing the whole style string\n (isStringTag === false ||\n // we need to always store it if we're in compat mode and\n // in node since emotion-server relies on whether a style is in\n // the registered cache to know whether a style is global or not\n // also, note that this check will be dead code eliminated in the browser\n (isBrowser === false && cache.compat !== undefined)) &&\n cache.registered[className] === undefined\n ) {\n cache.registered[className] = serialized.styles\n }\n if (cache.inserted[serialized.name] === undefined) {\n let stylesForSSR = ''\n let current = serialized\n do {\n let maybeStyles = cache.insert(\n `.${className}`,\n current,\n cache.sheet,\n true\n )\n if (!isBrowser && maybeStyles !== undefined) {\n stylesForSSR += maybeStyles\n }\n current = current.next\n } while (current !== undefined)\n if (!isBrowser && stylesForSSR.length !== 0) {\n return stylesForSSR\n }\n }\n}\n\nexport * from './types'\n","// @flow\n/* eslint-disable */\n// murmurhash2 via https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js\n\nexport default function murmurhash2_32_gc(str: string) {\n var l = str.length,\n h = l ^ l,\n i = 0,\n k\n\n while (l >= 4) {\n k =\n (str.charCodeAt(i) & 0xff) |\n ((str.charCodeAt(++i) & 0xff) << 8) |\n ((str.charCodeAt(++i) & 0xff) << 16) |\n ((str.charCodeAt(++i) & 0xff) << 24)\n\n k = (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16)\n k ^= k >>> 24\n k = (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16)\n\n h =\n ((h & 0xffff) * 0x5bd1e995 +\n ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^\n k\n\n l -= 4\n ++i\n }\n\n switch (l) {\n case 3:\n h ^= (str.charCodeAt(i + 2) & 0xff) << 16\n case 2:\n h ^= (str.charCodeAt(i + 1) & 0xff) << 8\n case 1:\n h ^= str.charCodeAt(i) & 0xff\n h =\n (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)\n }\n\n h ^= h >>> 13\n h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)\n h ^= h >>> 15\n\n return (h >>> 0).toString(36)\n}\n"],"names":["module","obj","key","value","Object","defineProperty","enumerable","configurable","writable","memoize","fn","cache","arg","undefined","reactPropsRegex","testOmitPropsOnStringTag","prop","test","charCodeAt","testOmitPropsOnComponent","getDefaultShouldForwardProp","tag","unitlessKeys","animationIterationCount","borderImageOutset","borderImageSlice","borderImageWidth","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","columns","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridRow","gridRowEnd","gridRowSpan","gridRowStart","gridColumn","gridColumnEnd","gridColumnSpan","gridColumnStart","msGridRow","msGridRowSpan","msGridColumn","msGridColumnSpan","fontWeight","lineHeight","opacity","order","orphans","tabSize","widows","zIndex","zoom","WebkitLineClamp","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth","hyphenateRegex","animationRegex","isCustomProperty","property","isProcessableValue","processStyleName","styleName","replace","toLowerCase","processStyleValue","match","p1","p2","cursor","name","styles","next","unitless","handleInterpolation","mergedProps","registered","interpolation","couldBeSelectorInterpolation","__emotion_styles","anim","string","Array","isArray","i","length","interpolated","createStringFromObject","previousCursor","result","cached","labelPattern","createStyled","options","identifierName","shouldForwardProp","targetClassName","label","target","__emotion_forwardProp","propName","isReal","__emotion_real","baseTag","__emotion_base","defaultShouldForwardProp","shouldUseAs","args","arguments","slice","push","raw","apply","len","Styled","withEmotionCache","props","ref","registeredStyles","classNames","rawClassName","finalTag","as","className","classInterpolations","theme","React","ThemeContext","split","forEach","serialized","stringMode","strings","lastIndex","exec","str","k","l","h","toString","hashString","serializeStyles","concat","isStringTag","inserted","current","insert","sheet","insertStyles","finalShouldForwardProp","newProps","displayName","defaultProps","withComponent","nextTag","nextOptions"],"mappings":"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"}

-211

src/index.js

		// @flow
		import * as React from 'react'
		import type { ElementType } from 'react'
		import {
		getDefaultShouldForwardProp,
		type StyledOptions,
		type CreateStyled,
		type PrivateStyledComponent
		} from './utils'
		import { withEmotionCache, ThemeContext } from '@emotion/core'
		import { getRegisteredStyles, insertStyles } from '@emotion/utils'
		import { serializeStyles } from '@emotion/serialize'

		const ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
		Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
		You can read more about this here:
		https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`

		let isBrowser = typeof document !== 'undefined'

		let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
		if (process.env.NODE_ENV !== 'production') {
		if (tag === undefined) {
		throw new Error(
		'You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.'
		)
		}
		}
		let identifierName
		let shouldForwardProp
		let targetClassName
		if (options !== undefined) {
		identifierName = options.label
		targetClassName = options.target
		shouldForwardProp =
		tag.__emotion_forwardProp && options.shouldForwardProp
		? propName =>
		tag.__emotion_forwardProp(propName) &&
		// $FlowFixMe
		options.shouldForwardProp(propName)
		: options.shouldForwardProp
		}
		const isReal = tag.__emotion_real === tag
		const baseTag = (isReal && tag.__emotion_base) \|\| tag

		if (typeof shouldForwardProp !== 'function' && isReal) {
		shouldForwardProp = tag.__emotion_forwardProp
		}
		let defaultShouldForwardProp =
		shouldForwardProp \|\| getDefaultShouldForwardProp(baseTag)
		const shouldUseAs = !defaultShouldForwardProp('as')

		return function<Props>(): PrivateStyledComponent<Props> {
		let args = arguments
		let styles =
		isReal && tag.__emotion_styles !== undefined
		? tag.__emotion_styles.slice(0)
		: []

		if (identifierName !== undefined) {
		styles.push(`label:${identifierName};`)
		}
		if (args[0] == null \|\| args[0].raw === undefined) {
		styles.push.apply(styles, args)
		} else {
		if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
		}
		styles.push(args[0][0])
		let len = args.length
		let i = 1
		for (; i < len; i++) {
		if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {
		console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
		}
		styles.push(args[i], args[0][i])
		}
		}

		// $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
		const Styled: PrivateStyledComponent<Props> = withEmotionCache(
		(props, cache, ref) => {
		const finalTag = (shouldUseAs && props.as) \|\| baseTag

		let className = ''
		let classInterpolations = []
		let mergedProps = props
		if (props.theme == null) {
		mergedProps = {}
		for (let key in props) {
		mergedProps[key] = props[key]
		}
		mergedProps.theme = React.useContext(ThemeContext)
		}

		if (typeof props.className === 'string') {
		className = getRegisteredStyles(
		cache.registered,
		classInterpolations,
		props.className
		)
		} else if (props.className != null) {
		className = `${props.className} `
		}

		const serialized = serializeStyles(
		styles.concat(classInterpolations),
		cache.registered,
		mergedProps
		)
		const rules = insertStyles(
		cache,
		serialized,
		typeof finalTag === 'string'
		)
		className += `${cache.key}-${serialized.name}`
		if (targetClassName !== undefined) {
		className += ` ${targetClassName}`
		}

		const finalShouldForwardProp =
		shouldUseAs && shouldForwardProp === undefined
		? getDefaultShouldForwardProp(finalTag)
		: defaultShouldForwardProp

		let newProps = {}

		for (let key in props) {
		if (shouldUseAs && key === 'as') continue

		if (
		// $FlowFixMe
		finalShouldForwardProp(key)
		) {
		newProps[key] = props[key]
		}
		}

		newProps.className = className
		newProps.ref = ref

		const ele = React.createElement(finalTag, newProps)
		if (!isBrowser && rules !== undefined) {
		let serializedNames = serialized.name
		let next = serialized.next
		while (next !== undefined) {
		serializedNames += ' ' + next.name
		next = next.next
		}
		return (
		<React.Fragment>
		<style
		{...{
		[`data-emotion-${cache.key}`]: serializedNames,
		dangerouslySetInnerHTML: { __html: rules },
		nonce: cache.sheet.nonce
		}}
		/>
		{ele}
		</React.Fragment>
		)
		}
		return ele
		}
		)

		Styled.displayName =
		identifierName !== undefined
		? identifierName
		: `Styled(${
		typeof baseTag === 'string'
		? baseTag
		: baseTag.displayName \|\| baseTag.name \|\| 'Component'
		})`

		Styled.defaultProps = tag.defaultProps
		Styled.__emotion_real = Styled
		Styled.__emotion_base = baseTag
		Styled.__emotion_styles = styles
		Styled.__emotion_forwardProp = shouldForwardProp

		Object.defineProperty(Styled, 'toString', {
		value() {
		if (
		targetClassName === undefined &&
		process.env.NODE_ENV !== 'production'
		) {
		return 'NO_COMPONENT_SELECTOR'
		}
		// $FlowFixMe: coerce undefined to string
		return `.${targetClassName}`
		}
		})

		Styled.withComponent = (
		nextTag: ElementType,
		nextOptions?: StyledOptions
		) => {
		return createStyled(
		nextTag,
		nextOptions !== undefined
		? { ...(options \|\| {}), ...nextOptions }
		: options
		)(...styles)
		}

		return Styled
		}
		}

		export default createStyled

-52

src/utils.js

		// @flow
		import type { ElementType, StatelessFunctionalComponent } from 'react'
		import isPropValid from '@emotion/is-prop-valid'

		export type Interpolations = Array<any>

		export type StyledOptions = {
		label?: string,
		shouldForwardProp?: string => boolean,
		target?: string
		}

		export type StyledComponent<Props> = StatelessFunctionalComponent<Props> & {
		defaultProps: any,
		toString: () => string,
		withComponent: (
		nextTag: ElementType,
		nextOptions?: StyledOptions
		) => StyledComponent<Props>
		}

		export type PrivateStyledComponent<Props> = StyledComponent<Props> & {
		__emotion_real: StyledComponent<Props>,
		__emotion_base: any,
		__emotion_styles: any,
		__emotion_forwardProp: any
		}

		const testOmitPropsOnStringTag = isPropValid
		const testOmitPropsOnComponent = (key: string) => key !== 'theme'

		export const getDefaultShouldForwardProp = (tag: ElementType) =>
		typeof tag === 'string' &&
		// 96 is one less than the char code
		// for "a" so this is checking that
		// it's a lowercase character
		tag.charCodeAt(0) > 96
		? testOmitPropsOnStringTag
		: testOmitPropsOnComponent

		export type CreateStyledComponent = <Props>(
		...args: Interpolations
		) => StyledComponent<Props>

		export type CreateStyled = {
		<Props>(
		tag: ElementType,
		options?: StyledOptions
		): (...args: Interpolations) => StyledComponent<Props>,
		[key: string]: CreateStyledComponent,
		bind: () => CreateStyled
		}

-13

types/helper.d.ts

		import * as React from 'react'

		/**
		* @desc Utility type for getting props type of React component.
		*/
		export type PropsOf<
		C extends keyof JSX.IntrinsicElements \| React.JSXElementConstructor<any>
		> = JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>

		// We need to use this version of Omit as it's distributive (Will preserve unions)
		export type DistributiveOmit<T, U> = T extends any
		? Pick<T, Exclude<keyof T, U>>
		: never

-107

types/index.d.ts

		// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
		// TypeScript Version: 3.2

		/**
		* @desc
		* In following types,
		* `InnerProps` is type parameter that represents props type of
		* internal component (target of styling)
		* `ExtraProps` is type parameter that represents extra props type of
		* styled component.
		* `StyleProps` is type parameter that represents props used in
		* a style of that component.
		*/

		import * as React from 'react'
		import { ComponentSelector, Interpolation } from '@emotion/serialize'
		import { PropsOf, DistributiveOmit } from './helper'

		export {
		ArrayInterpolation,
		CSSObject,
		FunctionInterpolation,
		ObjectInterpolation
		} from '@emotion/serialize'

		export { ComponentSelector, Interpolation, PropsOf, DistributiveOmit }

		export interface StyledOptions {
		label?: string
		shouldForwardProp?(propName: string): boolean
		target?: string
		}

		/**
		* @typeparam ComponentProps Props which will be included when withComponent is called
		* @typeparam SpecificComponentProps Props which will not be included when withComponent is called
		*/
		export interface StyledComponent<
		ComponentProps extends {},
		SpecificComponentProps extends {} = {}
		> extends React.FC<ComponentProps & SpecificComponentProps>, ComponentSelector {
		withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
		component: C
		): StyledComponent<ComponentProps & PropsOf<C>>
		withComponent<Tag extends keyof JSX.IntrinsicElements>(
		tag: Tag
		): StyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>
		}

		/**
		* @typeparam ComponentProps Props which will be included when withComponent is called
		* @typeparam SpecificComponentProps Props which will not be included when withComponent is called
		* @typeparam StyleProps Params passed to styles but not exposed as React props. These are normally library provided props
		*/
		export interface CreateStyledComponent<
		ComponentProps extends {},
		SpecificComponentProps extends {} = {},
		StyleProps extends {} = {}
		> {
		/**
		* @typeparam AdditionalProps Additional props to add to your styled component
		*/
		<AdditionalProps extends {} = {}>(
		...styles: Array<
		Interpolation<
		ComponentProps & SpecificComponentProps & StyleProps & AdditionalProps
		>
		>
		): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
		/**
		* @typeparam AdditionalProps Additional props to add to your styled component
		*/
		<AdditionalProps extends {} = {}>(
		template: TemplateStringsArray,
		...styles: Array<
		Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps>
		>
		): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
		}

		/**
		* @desc
		* This function accepts a React component or tag ('div', 'a' etc).
		*
		* @example styled(MyComponent)({ width: 100 })
		* @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width })
		* @example styled('div')({ width: 100 })
		* @example styled('div')<Props>(props => ({ width: props.width })
		*/
		export interface CreateStyled<Theme extends {} = any> {
		<C extends React.ComponentType<React.ComponentProps<C>>>(
		component: C,
		options?: StyledOptions
		): CreateStyledComponent<PropsOf<C> & { theme?: Theme }, {}, { theme: Theme }>

		<Tag extends keyof JSX.IntrinsicElements>(
		tag: Tag,
		options?: StyledOptions
		): CreateStyledComponent<
		{ theme?: Theme },
		JSX.IntrinsicElements[Tag],
		{ theme: Theme }
		>
		}

		declare const styled: CreateStyled
		export default styled

-399

types/tests.tsx

		import * as React from 'react'
		import styled from '@emotion/styled-base'

		// tslint:disable-next-line: interface-over-type-literal
		type ReactClassProps0 = {
		readonly column: boolean
		}
		class ReactClassComponent0 extends React.Component<ReactClassProps0> {}

		interface ReactClassProps1 {
		readonly value: string
		}
		declare class ReactClassComponent1 extends React.Component<ReactClassProps1> {}

		interface ReactClassProps2 {
		readonly column: number
		}
		declare class ReactClassComponent2 extends React.Component<ReactClassProps2> {}

		// tslint:disable-next-line: interface-over-type-literal
		type ReactFCProps0 = {
		readonly column: boolean
		}
		declare const ReactFC0: React.FC<ReactFCProps0>

		interface ReactFCProps1 {
		readonly value: string
		}
		declare const ReactFC1: React.FC<ReactFCProps1>

		interface ReactFCProps2 {
		readonly value: number
		}
		declare const ReactFC2: React.FC<ReactFCProps2>

		const Button0 = styled('button')`
		color: blue;
		`
		const Button1 = styled('button')({
		color: 'blue'
		})
		;<div>
		<Button0 />
		<Button0 type="button" />
		</div>
		;<div>
		<Button1 />
		<Button1 type="button" />
		</div>

		const Input0 = styled('input', {
		label: 'mystyle'
		})`
		padding: 4px;
		`
		const Input1 = styled('input', {
		label: 'mystyle'
		})({
		padding: '4px'
		})
		;<Input0 />
		;<Input1 />
		const Input2 = Button0.withComponent('input')

		const View = styled('div')({
		display: 'flex',
		position: 'relative',
		boxSizing: 'border-box',
		flexDirection: 'column'
		})

		const Input3 = styled(View.withComponent('input'))({
		color: 'red'
		})
		;<Input3
		onChange={e => {
		// $ExpectType ChangeEvent<HTMLInputElement>
		e
		}}
		/>

		const Canvas0 = styled('canvas', {
		shouldForwardProp(propName) {
		return propName === 'width' \|\| propName === 'height'
		}
		})`
		width: 200px;
		`
		const Canvas1 = styled('canvas', {
		shouldForwardProp(propName) {
		return propName === 'width' \|\| propName === 'height'
		}
		})({
		width: '200px'
		})
		;<Canvas0 />
		;<Canvas1 />

		interface PrimaryProps {
		readonly primary: string
		}

		const Button2 = styled('button')<PrimaryProps>`
		font-size: ${5}px;
		color: ${props => props.primary};
		`
		const Button3 = styled('button')<PrimaryProps>(props => ({
		color: props.primary,
		// Verify we get access to intrinsic props
		display: props.hidden ? 'none' : undefined
		}))
		;<div>
		<Button2 primary="blue" />
		<Button2 primary="blue" type="button" />
		</div>
		;<div>
		<Button3 primary="blue" />
		<Button3 primary="blue" type="button" />
		</div>
		// $ExpectError
		;<Button2 />
		// $ExpectError
		;<Button2 type="button" />
		// $ExpectError
		;<Button3 />
		// $ExpectError
		;<Button3 type="button" />

		const Button4 = styled(ReactClassComponent0)<PrimaryProps>`
		background-color: ${props => props.theme.backColor};

		font-size: ${5}px;
		color: ${props => props.primary};
		`
		const Button5 = styled(ReactFC0)<PrimaryProps>(props => ({
		color: props.primary
		}))
		;<div>
		<Button4 column={true} primary="blue" />
		<Button4 column={false} primary="blue" />
		</div>
		;<div>
		<Button5 column={true} primary="blue" />
		<Button5 column={false} primary="blue" />
		</div>
		// $ExpectError
		;<Button4 />
		// $ExpectError
		;<Button4 colume={true} />
		// $ExpectError
		;<Button5 />
		// $ExpectError
		;<Button5 colume={true} />

		const Container0 = styled(ReactClassComponent0)`
		display: flex;
		flex-direction: ${props => props.column && 'column'};
		`
		;<Container0 column={false} />
		// $ExpectError
		;<Container0 />

		// When we change component, the original props still need to be available
		// as the original styles may be using those props
		const Container1 = Container0.withComponent('span')
		;<Container1 column={true} />
		;<Container1 column={true} onClick={undefined as any} />

		// $ExpectError
		;<Container1 onClick={undefined as any} />
		// $ExpectError
		;<Container1 contentEditable />

		const Container2 = Container0.withComponent(ReactFC0)
		;<Container2 column={true} />
		// $ExpectError
		;<Container2 />

		const Container3 = Container0.withComponent(ReactClassComponent1)
		;<Container3 column={false} value="123" />
		// $ExpectError
		;<Container3 colume={true} />
		// $ExpectError
		;<Container3 value="5" />

		interface ContainerProps {
		extraWidth: string
		}
		const Container4 = styled(ReactFC2)<ContainerProps>(props => ({
		borderColor: 'black',
		borderWidth: props.extraWidth,
		borderStyle: 'solid'
		}))
		;<Container4 extraWidth="20px" value={123} />
		// $ExpectError
		;<Container4 />
		// $ExpectError
		;<Container4 value="5" />

		const Container5 = Container3.withComponent(ReactFC2)
		// $ExpectError
		;<Container5 column={true} value={123} />
		// $ExpectError
		;<Container5 />
		// $ExpectError
		;<Container5 column={true} />
		// $ExpectError
		;<Container5 value={242} />

		/**
		* @todo
		* I wish we could raise errors for following two `withComponent`s.
		* The prduces a component type which is invalid (intersection of number & string is never), but you need to consume the component
		* to see the error.
		*/
		const C02 = Container0.withComponent(ReactClassComponent2)
		// $ExpectError
		;<C02 column="" />
		const C03 = Container3.withComponent(ReactClassComponent2)
		// $ExpectError
		;<C03 column="" />

		const ForwardRefCheckStyled = styled(
		React.forwardRef(
		(props: ReactClassProps0, ref: React.Ref<HTMLDivElement>) => {
		return <div ref={ref} />
		}
		)
		)({})

		// Expose ref only when inner component is forwarding refs
		;<ForwardRefCheckStyled column={true} ref={React.createRef<HTMLDivElement>()} />

		const StyledClass0 = styled(ReactClassComponent0)({})
		declare const ref0_0: (element: ReactClassComponent0 \| null) => void
		declare const ref0_1: (element: ReactClassComponent1 \| null) => void
		declare const ref0_2: (element: HTMLDivElement \| null) => void
		// $ExpectError
		;<StyledClass0 column={true} ref={ref0_0} />
		// $ExpectError
		;<StyledClass0 column={true} ref={ref0_1} />
		// $ExpectError
		;<StyledClass0 column={true} ref={ref0_2} />

		const StyledClass1 = StyledClass0.withComponent(ReactClassComponent1)
		declare const ref1_0: (element: ReactClassComponent1 \| null) => void
		declare const ref1_1: (element: ReactClassComponent0 \| null) => void
		declare const ref1_2: (element: HTMLDivElement \| null) => void
		// $ExpectError
		;<StyledClass1 column={true} value="" ref={ref1_0} />
		// $ExpectError
		;<StyledClass1 column={true} value="" ref={ref1_1} />
		// $ExpectError
		;<StyledClass1 column={true} value="" ref={ref1_2} />

		const StyledClass2 = StyledClass0.withComponent('div')
		declare const ref2_0: (element: HTMLDivElement \| null) => void
		declare const ref2_1: (element: ReactClassComponent0 \| null) => void
		declare const ref2_2: (element: ReactClassComponent1 \| null) => void
		;<StyledClass2 column={true} ref={ref2_0} />
		// $ExpectError
		;<StyledClass2 column={true} ref={ref2_1} />
		// $ExpectError
		;<StyledClass2 column={true} ref={ref2_2} />

		const StyledClass3 = StyledClass1.withComponent('label')
		declare const ref3_0: (element: HTMLLabelElement \| null) => void
		declare const ref3_1: (element: ReactClassComponent0 \| null) => void
		declare const ref3_2: (element: HTMLDivElement \| null) => void
		// $ExpectError
		;<StyledClass3 column={true} ref={ref3_0} />
		// $ExpectError
		;<StyledClass3 column={true} ref={ref3_1} />
		// $ExpectError
		;<StyledClass3 column={true} ref={ref3_2} />

		{
		interface Book {
		kind: 'book'
		author: string
		}

		interface Magazine {
		kind: 'magazine'
		issue: number
		}

		type SomethingToRead = Book \| Magazine

		const Readable: React.FC<SomethingToRead> = props => {
		if (props.kind === 'magazine') {
		return <div>magazine #{props.issue}</div>
		}

		return <div>magazine #{props.author}</div>
		}

		const StyledReadable = styled(Readable)`
		font-size: ${props => (props.kind === 'book' ? 16 : 14)};
		`
		;<Readable kind="book" author="Hejlsberg" />
		;<StyledReadable kind="book" author="Hejlsberg" />
		;<Readable kind="magazine" author="Hejlsberg" /> // $ExpectError
		;<StyledReadable kind="magazine" author="Hejlsberg" /> // $ExpectError
		}

		interface Props {
		prop: boolean
		}
		class ClassWithDefaultProps extends React.Component<Props> {
		static defaultProps = { prop: false }
		render() {
		return this.props.prop ? <Button0 /> : <Button1 />
		}
		}
		const StyledClassWithDefaultProps = styled(ClassWithDefaultProps)`
		background-color: red;
		`
		const classInstance = <StyledClassWithDefaultProps />

		const FCWithDefaultProps = ({ prop }: Props) =>
		prop ? <Button0 /> : <Button1 />
		FCWithDefaultProps.defaultProps = {
		prop: false
		}
		const StyledFCWithDefaultProps = styled(FCWithDefaultProps)`
		background-color: red;
		`
		const fcInstance = <StyledFCWithDefaultProps />

		interface PropsA {
		title: string
		}
		interface PropsB {
		content: string
		}

		type PropsAB = PropsA \| PropsB
		class A extends React.Component<PropsAB> {
		static getDerivedStateFromProps(props: PropsAB) {
		return null
		}

		render() {
		return null
		}
		}

		const B = styled(A)`
		color: red;
		`
		;<B title="test" />
		;<B content="test" />
		// Because these are not tagged unions, they are not mutually exclusive, we can do both
		;<B title="test" content="test" />

		interface TaggedPropsA {
		tag: 'a'
		title: string
		}
		interface TaggedPropsB {
		tag: 'b'
		content: string
		}
		type TaggedPropsAB = TaggedPropsA \| TaggedPropsB
		class C extends React.Component<TaggedPropsAB> {
		render() {
		return null
		}
		}

		const D = styled(C)`
		color: red;
		`
		;<D tag="a" title="test" />
		;<D tag="b" content="test" />
		// $ExpectError
		;<D tag="a" title="test" content="test" />

		// Ensure refs are available on intrinsic components and they are correct types
		const StyledDiv = styled('div')({})
		declare const ref4_0: (element: ReactClassComponent1 \| null) => void
		declare const ref4_1: (element: ReactClassComponent0 \| null) => void
		declare const ref4_2: (element: HTMLDivElement \| null) => void
		// $ExpectError
		;<StyledDiv ref={ref4_0} />
		// $ExpectError
		;<StyledDiv ref={ref4_1} />
		;<StyledDiv ref={ref4_2} />
		;<StyledDiv ref={React.createRef()} />

		// test it should drop intrinsic props from first component when withComponent is called
		const StyledButton = StyledDiv.withComponent('button')
		;<StyledButton
		onClick={e => {
		// $ExpectType MouseEvent<HTMLButtonElement, MouseEvent>
		e
		}}
		/>

-27

types/tsconfig.json

		{
		"compilerOptions": {
		"baseUrl": "../",
		"forceConsistentCasingInFileNames": true,
		"jsx": "react",
		"lib": [
		"es6",
		"dom"
		],
		"module": "commonjs",
		"noEmit": true,
		"noImplicitAny": true,
		"noImplicitThis": true,
		"strict": true,
		"strictNullChecks": true,
		"strictFunctionTypes": true,
		"target": "es5",
		"typeRoots": [
		"../"
		],
		"types": []
		},
		"include": [
		"./*.ts",
		"./*.tsx"
		]
		}

-24

types/tslint.json

		{
		"extends": "dtslint/dtslint.json",
		"rules": {
		"array-type": [
		true,
		"generic"
		],
		"semicolon": false,
		"whitespace": [
		true,
		"check-branch",
		"check-decl",
		"check-operator",
		"check-module",
		"check-rest-spread",
		"check-type",
		"check-typecast",
		"check-type-operator",
		"check-preblock"
		],
		"no-null-undefined-union": false,
		"no-unnecessary-generics": false
		}
		}

@emotion/styled-base - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes