text: 'use strict';
  
  Object.defineProperty(exports, '__esModule', { value: true });
  
  var React = require('react');
  require('@emotion/cache');
  var emotionElement = require('./emotion-element-075f6e74.browser.cjs.js');
  require('@babel/runtime/helpers/extends');
  require('@emotion/weak-memoize');
  require('hoist-non-react-statics');
  require('../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.cjs.js');
  var utils = require('@emotion/utils');
  var serialize = require('@emotion/serialize');
  var sheet = require('@emotion/sheet');
  
  var pkg = {
  	name: "@emotion/react",
  	version: "11.7.0",
  	main: "dist/emotion-react.cjs.js",
  	module: "dist/emotion-react.esm.js",
  	browser: {
  		"./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js",
  		"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
  	},
  	types: "types/index.d.ts",
  	files: [
  		"src",
  		"dist",
  		"jsx-runtime",
  		"jsx-dev-runtime",
  		"_isolated-hnrs",
  		"types/*.d.ts",
  		"macro.js",
  		"macro.d.ts",
  		"macro.js.flow"
  	],
  	sideEffects: false,
  	author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
  	license: "MIT",
  	scripts: {
  		"test:typescript": "dtslint types"
  	},
  	dependencies: {
  		"@babel/runtime": "^7.13.10",
  		"@emotion/cache": "^11.6.0",
  		"@emotion/serialize": "^1.0.2",
  		"@emotion/sheet": "^1.1.0",
  		"@emotion/utils": "^1.0.0",
  		"@emotion/weak-memoize": "^0.2.5",
  		"hoist-non-react-statics": "^3.3.1"
  	},
  	peerDependencies: {
  		"@babel/core": "^7.0.0",
  		react: ">=16.8.0"
  	},
  	peerDependenciesMeta: {
  		"@babel/core": {
  			optional: true
  		},
  		"@types/react": {
  			optional: true
  		}
  	},
  	devDependencies: {
  		"@babel/core": "^7.13.10",
  		"@emotion/css": "11.5.0",
  		"@emotion/css-prettifier": "1.0.0",
  		"@emotion/server": "11.4.0",
  		"@emotion/styled": "11.6.0",
  		"@types/react": "^16.9.11",
  		dtslint: "^0.3.0",
  		"html-tag-names": "^1.1.2",
  		react: "16.14.0",
  		"svg-tag-names": "^1.1.1"
  	},
  	repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
  	publishConfig: {
  		access: "public"
  	},
  	"umd:main": "dist/emotion-react.umd.min.js",
  	preconstruct: {
  		entrypoints: [
  			"./index.js",
  			"./jsx-runtime.js",
  			"./jsx-dev-runtime.js",
  			"./_isolated-hnrs.js"
  		],
  		umdName: "emotionReact"
  	}
  };
  
  var jsx = function jsx(type, props) {
    var args = arguments;
  
    if (props == null || !emotionElement.hasOwnProperty.call(props, 'css')) {
      // $FlowFixMe
      return React.createElement.apply(undefined, args);
    }
  
    var argsLength = args.length;
    var createElementArgArray = new Array(argsLength);
    createElementArgArray[0] = emotionElement.Emotion;
    createElementArgArray[1] = emotionElement.createEmotionProps(type, props);
  
    for (var i = 2; i < argsLength; i++) {
      createElementArgArray[i] = args[i];
    } // $FlowFixMe
  
  
    return React.createElement.apply(null, createElementArgArray);
  };
  
  var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
  // initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
  // initial client-side render from SSR, use place of hydrating tag
  
  var Global = /* #__PURE__ */emotionElement.withEmotionCache(function (props, cache) {
    if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is
    // probably using the custom createElement which
    // means it will be turned into a className prop
    // $FlowFixMe I don't really want to add it to the type since it shouldn't be used
    props.className || props.css)) {
      console.error("It looks like you're using the css prop on Global, did you mean to use the styles prop instead?");
      warnedAboutCssPropForGlobal = true;
    }
  
    var styles = props.styles;
    var serialized = serialize.serializeStyles([styles], undefined, React.useContext(emotionElement.ThemeContext));
    // but it is based on a constant that will never change at runtime
    // it's effectively like having two implementations and switching them out
    // so it's not actually breaking anything
  
  
    var sheetRef = React.useRef();
    React.useLayoutEffect(function () {
      var key = cache.key + "-global";
      var sheet$1 = new sheet.StyleSheet({
        key: key,
        nonce: cache.sheet.nonce,
        container: cache.sheet.container,
        speedy: cache.sheet.isSpeedy
      });
      var rehydrating = false; // $FlowFixMe
  
      var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
  
      if (cache.sheet.tags.length) {
        sheet$1.before = cache.sheet.tags[0];
      }
  
      if (node !== null) {
        rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
  
        node.setAttribute('data-emotion', key);
        sheet$1.hydrate([node]);
      }
  
      sheetRef.current = [sheet$1, rehydrating];
      return function () {
        sheet$1.flush();
      };
    }, [cache]);
    React.useLayoutEffect(function () {
      var sheetRefCurrent = sheetRef.current;
      var sheet = sheetRefCurrent[0],
          rehydrating = sheetRefCurrent[1];
  
      if (rehydrating) {
        sheetRefCurrent[1] = false;
        return;
      }
  
      if (serialized.next !== undefined) {
        // insert keyframes
        utils.insertStyles(cache, serialized.next, true);
      }
  
      if (sheet.tags.length) {
        // if this doesn't exist then it will be null so the style element will be appended
        var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
        sheet.before = element;
        sheet.flush();
      }
  
      cache.insert("", serialized, sheet, false);
    }, [cache, serialized.name]);
    return null;
  });
  
  if (process.env.NODE_ENV !== 'production') {
    Global.displayName = 'EmotionGlobal';
  }
  
  function css() {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
  
    return serialize.serializeStyles(args);
  }
  
  var keyframes = function keyframes() {
    var insertable = css.apply(void 0, arguments);
    var name = "animation-" + insertable.name; // $FlowFixMe
  
    return {
      name: name,
      styles: "@keyframes " + name + "{" + insertable.styles + "}",
      anim: 1,
      toString: function toString() {
        return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
      }
    };
  };
  
  var classnames = function classnames(args) {
    var len = args.length;
    var i = 0;
    var cls = '';
  
    for (; i < len; i++) {
      var arg = args[i];
      if (arg == null) continue;
      var toAdd = void 0;
  
      switch (typeof arg) {
        case 'boolean':
          break;
  
        case 'object':
          {
            if (Array.isArray(arg)) {
              toAdd = classnames(arg);
            } else {
              if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {
                console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.');
              }
  
              toAdd = '';
  
              for (var k in arg) {
                if (arg[k] && k) {
                  toAdd && (toAdd += ' ');
                  toAdd += k;
                }
              }
            }
  
            break;
          }
  
        default:
          {
            toAdd = arg;
          }
      }
  
      if (toAdd) {
        cls && (cls += ' ');
        cls += toAdd;
      }
    }
  
    return cls;
  };
  
  function merge(registered, css, className) {
    var registeredStyles = [];
    var rawClassName = utils.getRegisteredStyles(registered, registeredStyles, className);
  
    if (registeredStyles.length < 2) {
      return className;
    }
  
    return rawClassName + css(registeredStyles);
  }
  
  var Noop = function Noop() {
    return null;
  };
  
  var ClassNames = /* #__PURE__ */emotionElement.withEmotionCache(function (props, cache) {
    var hasRendered = false;
  
    var css = function css() {
      if (hasRendered && process.env.NODE_ENV !== 'production') {
        throw new Error('css can only be used during render');
      }
  
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
  
      var serialized = serialize.serializeStyles(args, cache.registered);
  
      {
        utils.insertStyles(cache, serialized, false);
      }
  
      return cache.key + "-" + serialized.name;
    };
  
    var cx = function cx() {
      if (hasRendered && process.env.NODE_ENV !== 'production') {
        throw new Error('cx can only be used during render');
      }
  
      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        args[_key2] = arguments[_key2];
      }
  
      return merge(cache.registered, css, classnames(args));
    };
  
    var content = {
      css: css,
      cx: cx,
      theme: React.useContext(emotionElement.ThemeContext)
    };
    var ele = props.children(content);
    hasRendered = true;
    var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop, null);
  
  
    return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
  });
  
  if (process.env.NODE_ENV !== 'production') {
    ClassNames.displayName = 'EmotionClassNames';
  }
  
  if (process.env.NODE_ENV !== 'production') {
    var isBrowser = "object" !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
  
    var isJest = typeof jest !== 'undefined';
  
    if (isBrowser && !isJest) {
      // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later
      var globalContext = // $FlowIgnore
      typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef
      : isBrowser ? window : global;
      var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
  
      if (globalContext[globalKey]) {
        console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');
      }
  
      globalContext[globalKey] = true;
    }
  }
  
  exports.CacheProvider = emotionElement.CacheProvider;
  exports.ThemeContext = emotionElement.ThemeContext;
  exports.ThemeProvider = emotionElement.ThemeProvider;
  exports.__unsafe_useEmotionCache = emotionElement.__unsafe_useEmotionCache;
  exports.useTheme = emotionElement.useTheme;
  exports.withEmotionCache = emotionElement.withEmotionCache;
  exports.withTheme = emotionElement.withTheme;
  exports.ClassNames = ClassNames;
  exports.Global = Global;
  exports.createElement = jsx;
  exports.css = css;
  exports.jsx = jsx;
  exports.keyframes = keyframes;
  