@cleartrip/ct-design-horizontal-scroll 4.0.0-TEST.3 → 5.0.0

package/dist/ct-design-horizontal-scroll.umd.js

@@ -1,1962 +1,1710 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('styled-components'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-common-utils'), require('react-dom'), require('@cleartrip/ct-design-use-merge-refs')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', 'styled-components', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-common-utils', 'react-dom', '@cleartrip/ct-design-use-merge-refs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHorizontalScroll = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.styled, global.ctDesignIcons, global.ctDesignTheme, global.ctDesignCommonUtils, global.ReactDOM, global.useMergeRefs));
-})(this, (function (exports, jsxRuntime, React, ctDesignContainer, styled, ctDesignIcons, ctDesignTheme, ctDesignCommonUtils, ReactDOM, useMergeRefs) { 'use strict';
-
-    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n.default = e;
-        return Object.freeze(n);
-    }
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-use-merge-refs'), require('@cleartrip/ct-design-style-manager')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', '@cleartrip/ct-design-use-merge-refs', '@cleartrip/ct-design-style-manager'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHorizontalScroll = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.useMergeRefs, global.ctDesignStyleManager));
+})(this, (function (exports, jsxRuntime, react, ctDesignContainer, useMergeRefs, ctDesignStyleManager) { 'use strict';
 
-    var React__namespace = /*#__PURE__*/_interopNamespace(React);
-    var styled__default = /*#__PURE__*/_interopDefault(styled);
-    var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
-    var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-    var __assign = function () {
-      __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-      };
-      return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-      var t = {};
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-      }
-      return t;
-    }
-    function __makeTemplateObject(cooked, raw) {
-      if (Object.defineProperty) {
-        Object.defineProperty(cooked, "raw", {
-          value: raw
-        });
-      } else {
-        cooked.raw = raw;
-      }
-      return cooked;
-    }
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-      var e = new Error(message);
-      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
+  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-    var StyledRightShadow = styled__default.default.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: 100%;\n\twidth: ", ";\n\tz-index: 10;\n\tbackground: ", ";\n\t\t", "\n"], ["\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: 100%;\n\twidth: ", ";\n\tz-index: 10;\n\tbackground: ", ";\n\t\t", "\n"])), function (_a) {
-        var width = _a.width;
-        return width || '64px';
-    }, function (_a) {
-        var shadowGradientStyle = _a.shadowGradientStyle;
-        return (shadowGradientStyle === null || shadowGradientStyle === void 0 ? void 0 : shadowGradientStyle.right) || "linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%)";
-    }, function (_a) {
-        var css = _a.css;
-        return css && styled.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css);
-    });
-    var templateObject_1$2, templateObject_2$2;
-
-    var StyledLeftShadow = styled__default.default.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    position: absolute;\n    left: 0;\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    height: 100%;\n    width: ", ";\n    z-index: 10;\n    background: ", ";\n        ", "\n"], ["\n    position: absolute;\n    left: 0;\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    height: 100%;\n    width: ", ";\n    z-index: 10;\n    background: ", ";\n        ", "\n"])), function (_a) {
-        var width = _a.width;
-        return width || '64px';
-    }, function (_a) {
-        var shadowGradientStyle = _a.shadowGradientStyle;
-        return (shadowGradientStyle === null || shadowGradientStyle === void 0 ? void 0 : shadowGradientStyle.left) || "linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)";
-    }, function (_a) {
-        var css = _a.css;
-        return css && styled.css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css);
-    });
-    var templateObject_1$1, templateObject_2$1;
+  var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
 
-    var StyledHorizontalScroll = styled__default.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\twhite-space: no-wrap;\n\toverflow-x: auto;\n    scroll-behavior: smooth;\n\t-webkit-tap-highlight-color: transparent;\n\tscrollbar-width: none; /* Firefox */\n\t-ms-overflow-style: none; /* Internet Explorer 10+ */\n\n\t&::-webkit-scrollbar {\n\t\t/* WebKit */\n\t\tdisplay: none;\n\t}\n\t", "\n"], ["\n\tdisplay: flex;\n\twhite-space: no-wrap;\n\toverflow-x: auto;\n    scroll-behavior: smooth;\n\t-webkit-tap-highlight-color: transparent;\n\tscrollbar-width: none; /* Firefox */\n\t-ms-overflow-style: none; /* Internet Explorer 10+ */\n\n\t&::-webkit-scrollbar {\n\t\t/* WebKit */\n\t\tdisplay: none;\n\t}\n\t", "\n"])), function (_a) {
-        var css = _a.css;
-        return css && styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css);
-    });
-    var templateObject_1, templateObject_2;
-
-    exports.ARROW_SIZE = void 0;
-    (function (ARROW_SIZE) {
-        ARROW_SIZE["SM"] = "sm";
-        ARROW_SIZE["MD"] = "md";
-        ARROW_SIZE["LG"] = "lg";
-    })(exports.ARROW_SIZE || (exports.ARROW_SIZE = {}));
-    exports.ARROW_DIRECTION = void 0;
-    (function (ARROW_DIRECTION) {
-        ARROW_DIRECTION["LEFT"] = "LEFT";
-        ARROW_DIRECTION["RIGHT"] = "RIGHT";
-    })(exports.ARROW_DIRECTION || (exports.ARROW_DIRECTION = {}));
-
-    function _extends() {
-      return _extends = Object.assign ? Object.assign.bind() : function (n) {
-        for (var e = 1; e < arguments.length; e++) {
-          var t = arguments[e];
-          for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-        }
-        return n;
-      }, _extends.apply(null, arguments);
-    }
+  var isDevelopment$1 = false;
 
-    function _objectWithoutPropertiesLoose(r, e) {
-      if (null == r) return {};
-      var t = {};
-      for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-        if (-1 !== e.indexOf(n)) continue;
-        t[n] = r[n];
-      }
-      return t;
-    }
+  /*
 
-    function _setPrototypeOf(t, e) {
-      return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-        return t.__proto__ = e, t;
-      }, _setPrototypeOf(t, e);
-    }
+  Based off glamor's StyleSheet, thanks Sunil ❤️
 
-    function _inheritsLoose(t, o) {
-      t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
-    }
+  high performance StyleSheet for css-in-js systems
 
-    /**
-     * Copyright (c) 2013-present, Facebook, Inc.
-     *
-     * This source code is licensed under the MIT license found in the
-     * LICENSE file in the root directory of this source tree.
-     */
-    var ReactPropTypesSecret_1;
-    var hasRequiredReactPropTypesSecret;
-    function requireReactPropTypesSecret() {
-      if (hasRequiredReactPropTypesSecret) return ReactPropTypesSecret_1;
-      hasRequiredReactPropTypesSecret = 1;
-      var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-      ReactPropTypesSecret_1 = ReactPropTypesSecret;
-      return ReactPropTypesSecret_1;
-    }
+  - uses multiple style tags behind the scenes for millions of rules
+  - uses `insertRule` for appending in production for *much* faster performance
 
-    /**
-     * Copyright (c) 2013-present, Facebook, Inc.
-     *
-     * This source code is licensed under the MIT license found in the
-     * LICENSE file in the root directory of this source tree.
-     */
-    var factoryWithThrowingShims;
-    var hasRequiredFactoryWithThrowingShims;
-    function requireFactoryWithThrowingShims() {
-      if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
-      hasRequiredFactoryWithThrowingShims = 1;
-      var ReactPropTypesSecret = requireReactPropTypesSecret();
-      function emptyFunction() {}
-      function emptyFunctionWithReset() {}
-      emptyFunctionWithReset.resetWarningCache = emptyFunction;
-      factoryWithThrowingShims = function () {
-        function shim(props, propName, componentName, location, propFullName, secret) {
-          if (secret === ReactPropTypesSecret) {
-            // It is still safe when called from React.
-            return;
-          }
-          var err = new Error('Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
-          err.name = 'Invariant Violation';
-          throw err;
-        }
-        shim.isRequired = shim;
-        function getShim() {
-          return shim;
-        }
-        // Important!
-        // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-        var ReactPropTypes = {
-          array: shim,
-          bigint: shim,
-          bool: shim,
-          func: shim,
-          number: shim,
-          object: shim,
-          string: shim,
-          symbol: shim,
-          any: shim,
-          arrayOf: getShim,
-          element: shim,
-          elementType: shim,
-          instanceOf: getShim,
-          node: shim,
-          objectOf: getShim,
-          oneOf: getShim,
-          oneOfType: getShim,
-          shape: getShim,
-          exact: getShim,
-          checkPropTypes: emptyFunctionWithReset,
-          resetWarningCache: emptyFunction
-        };
-        ReactPropTypes.PropTypes = ReactPropTypes;
-        return ReactPropTypes;
-      };
-      return factoryWithThrowingShims;
-    }
+  // usage
 
-    /**
-     * Copyright (c) 2013-present, Facebook, Inc.
-     *
-     * This source code is licensed under the MIT license found in the
-     * LICENSE file in the root directory of this source tree.
-     */
-    {
-      // By explicitly using `prop-types` you are opting into new production behavior.
-      // http://fb.me/prop-types-in-prod
-      requireFactoryWithThrowingShims()();
-    }
+  import { StyleSheet } from '@emotion/sheet'
 
-    /**
-     * Checks if a given element has a CSS class.
-     * 
-     * @param element the element
-     * @param className the CSS class name
-     */
-    function hasClass(element, className) {
-      if (element.classList) return !!className && element.classList.contains(className);
-      return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
-    }
+  let styleSheet = new StyleSheet({ key: '', container: document.head })
 
-    /**
-     * Adds a CSS class to a given element.
-     * 
-     * @param element the element
-     * @param className the CSS class name
-     */
+  styleSheet.insert('#box { border: 1px solid red; }')
+  - appends a css rule into the stylesheet
 
-    function addClass(element, className) {
-      if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + " " + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + " " + className);
-    }
+  styleSheet.flush()
+  - empties the stylesheet of all its contents
 
-    function replaceClassName(origClass, classToRemove) {
-      return origClass.replace(new RegExp("(^|\\s)" + classToRemove + "(?:\\s|$)", 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
-    }
-    /**
-     * Removes a CSS class from a given element.
-     * 
-     * @param element the element
-     * @param className the CSS class name
-     */
-
-    function removeClass$1(element, className) {
-      if (element.classList) {
-        element.classList.remove(className);
-      } else if (typeof element.className === 'string') {
-        element.className = replaceClassName(element.className, className);
-      } else {
-        element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
-      }
-    }
+  */
 
-    var config = {
-      disabled: false
-    };
+  function sheetForTag(tag) {
+    if (tag.sheet) {
+      return tag.sheet;
+    } // this weirdness brought to you by firefox
 
-    var TransitionGroupContext = React__namespace.default.createContext(null);
+    /* istanbul ignore next */
 
-    var forceReflow = function forceReflow(node) {
-      return node.scrollTop;
-    };
+    for (var i = 0; i < document.styleSheets.length; i++) {
+      if (document.styleSheets[i].ownerNode === tag) {
+        return document.styleSheets[i];
+      }
+    } // this function should always return with a value
+    // TS can't understand it though so we make it stop complaining here
 
-    var UNMOUNTED = 'unmounted';
-    var EXITED = 'exited';
-    var ENTERING = 'entering';
-    var ENTERED = 'entered';
-    var EXITING = 'exiting';
-    /**
-     * The Transition component lets you describe a transition from one component
-     * state to another _over time_ with a simple declarative API. Most commonly
-     * it's used to animate the mounting and unmounting of a component, but can also
-     * be used to describe in-place transition states as well.
-     *
-     * ---
-     *
-     * **Note**: `Transition` is a platform-agnostic base component. If you're using
-     * transitions in CSS, you'll probably want to use
-     * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
-     * instead. It inherits all the features of `Transition`, but contains
-     * additional features necessary to play nice with CSS transitions (hence the
-     * name of the component).
-     *
-     * ---
-     *
-     * By default the `Transition` component does not alter the behavior of the
-     * component it renders, it only tracks "enter" and "exit" states for the
-     * components. It's up to you to give meaning and effect to those states. For
-     * example we can add styles to a component when it enters or exits:
-     *
-     * ```jsx
-     * import { Transition } from 'react-transition-group';
-     *
-     * const duration = 300;
-     *
-     * const defaultStyle = {
-     *   transition: `opacity ${duration}ms ease-in-out`,
-     *   opacity: 0,
-     * }
-     *
-     * const transitionStyles = {
-     *   entering: { opacity: 1 },
-     *   entered:  { opacity: 1 },
-     *   exiting:  { opacity: 0 },
-     *   exited:  { opacity: 0 },
-     * };
-     *
-     * const Fade = ({ in: inProp }) => (
-     *   <Transition in={inProp} timeout={duration}>
-     *     {state => (
-     *       <div style={{
-     *         ...defaultStyle,
-     *         ...transitionStyles[state]
-     *       }}>
-     *         I'm a fade Transition!
-     *       </div>
-     *     )}
-     *   </Transition>
-     * );
-     * ```
-     *
-     * There are 4 main states a Transition can be in:
-     *  - `'entering'`
-     *  - `'entered'`
-     *  - `'exiting'`
-     *  - `'exited'`
-     *
-     * Transition state is toggled via the `in` prop. When `true` the component
-     * begins the "Enter" stage. During this stage, the component will shift from
-     * its current transition state, to `'entering'` for the duration of the
-     * transition and then to the `'entered'` stage once it's complete. Let's take
-     * the following example (we'll use the
-     * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
-     *
-     * ```jsx
-     * function App() {
-     *   const [inProp, setInProp] = useState(false);
-     *   return (
-     *     <div>
-     *       <Transition in={inProp} timeout={500}>
-     *         {state => (
-     *           // ...
-     *         )}
-     *       </Transition>
-     *       <button onClick={() => setInProp(true)}>
-     *         Click to Enter
-     *       </button>
-     *     </div>
-     *   );
-     * }
-     * ```
-     *
-     * When the button is clicked the component will shift to the `'entering'` state
-     * and stay there for 500ms (the value of `timeout`) before it finally switches
-     * to `'entered'`.
-     *
-     * When `in` is `false` the same thing happens except the state moves from
-     * `'exiting'` to `'exited'`.
-     */
-
-    var Transition = /*#__PURE__*/function (_React$Component) {
-      _inheritsLoose(Transition, _React$Component);
-      function Transition(props, context) {
-        var _this;
-        _this = _React$Component.call(this, props, context) || this;
-        var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
-
-        var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
-        var initialStatus;
-        _this.appearStatus = null;
-        if (props.in) {
-          if (appear) {
-            initialStatus = EXITED;
-            _this.appearStatus = ENTERING;
+    return undefined;
+  }
+  function createStyleElement(options) {
+    var tag = document.createElement('style');
+    tag.setAttribute('data-emotion', options.key);
+    if (options.nonce !== undefined) {
+      tag.setAttribute('nonce', options.nonce);
+    }
+    tag.appendChild(document.createTextNode(''));
+    tag.setAttribute('data-s', '');
+    return tag;
+  }
+  var StyleSheet = /*#__PURE__*/function () {
+    // Using Node instead of HTMLElement since container may be a ShadowRoot
+    function StyleSheet(options) {
+      var _this = this;
+      this._insertTag = function (tag) {
+        var before;
+        if (_this.tags.length === 0) {
+          if (_this.insertionPoint) {
+            before = _this.insertionPoint.nextSibling;
+          } else if (_this.prepend) {
+            before = _this.container.firstChild;
           } else {
-            initialStatus = ENTERED;
+            before = _this.before;
           }
         } else {
-          if (props.unmountOnExit || props.mountOnEnter) {
-            initialStatus = UNMOUNTED;
-          } else {
-            initialStatus = EXITED;
-          }
+          before = _this.tags[_this.tags.length - 1].nextSibling;
         }
-        _this.state = {
-          status: initialStatus
+        _this.container.insertBefore(tag, before);
+        _this.tags.push(tag);
+      };
+      this.isSpeedy = options.speedy === undefined ? !isDevelopment$1 : options.speedy;
+      this.tags = [];
+      this.ctr = 0;
+      this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
+
+      this.key = options.key;
+      this.container = options.container;
+      this.prepend = options.prepend;
+      this.insertionPoint = options.insertionPoint;
+      this.before = null;
+    }
+    var _proto = StyleSheet.prototype;
+    _proto.hydrate = function hydrate(nodes) {
+      nodes.forEach(this._insertTag);
+    };
+    _proto.insert = function insert(rule) {
+      // the max length is how many rules we have per style tag, it's 65000 in speedy mode
+      // it's 1 in dev because we insert source maps that map a single rule to a location
+      // and you can only have one source map per style tag
+      if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
+        this._insertTag(createStyleElement(this));
+      }
+      var tag = this.tags[this.tags.length - 1];
+      if (this.isSpeedy) {
+        var sheet = sheetForTag(tag);
+        try {
+          // this is the ultrafast version, works across browsers
+          // the big drawback is that the css won't be editable in devtools
+          sheet.insertRule(rule, sheet.cssRules.length);
+        } catch (e) {}
+      } else {
+        tag.appendChild(document.createTextNode(rule));
+      }
+      this.ctr++;
+    };
+    _proto.flush = function flush() {
+      this.tags.forEach(function (tag) {
+        var _tag$parentNode;
+        return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
+      });
+      this.tags = [];
+      this.ctr = 0;
+    };
+    return StyleSheet;
+  }();
+
+  var stylisExports = {};
+  var stylis = {
+    get exports(){ return stylisExports; },
+    set exports(v){ stylisExports = v; },
+  };
+
+  (function (module, exports) {
+    (function (e, r) {
+      r(exports) ;
+    })(this, function (e) {
+
+      var r = "-ms-";
+      var a = "-moz-";
+      var c = "-webkit-";
+      var n = "comm";
+      var t = "rule";
+      var s = "decl";
+      var i = "@page";
+      var u = "@media";
+      var o = "@import";
+      var f = "@charset";
+      var l = "@viewport";
+      var p = "@supports";
+      var h = "@document";
+      var v = "@namespace";
+      var d = "@keyframes";
+      var b = "@font-face";
+      var w = "@counter-style";
+      var m = "@font-feature-values";
+      var g = "@layer";
+      var k = Math.abs;
+      var $ = String.fromCharCode;
+      var x = Object.assign;
+      function E(e, r) {
+        return M(e, 0) ^ 45 ? (((r << 2 ^ M(e, 0)) << 2 ^ M(e, 1)) << 2 ^ M(e, 2)) << 2 ^ M(e, 3) : 0;
+      }
+      function y(e) {
+        return e.trim();
+      }
+      function T(e, r) {
+        return (e = r.exec(e)) ? e[0] : e;
+      }
+      function A(e, r, a) {
+        return e.replace(r, a);
+      }
+      function O(e, r) {
+        return e.indexOf(r);
+      }
+      function M(e, r) {
+        return e.charCodeAt(r) | 0;
+      }
+      function C(e, r, a) {
+        return e.slice(r, a);
+      }
+      function R(e) {
+        return e.length;
+      }
+      function S(e) {
+        return e.length;
+      }
+      function z(e, r) {
+        return r.push(e), e;
+      }
+      function N(e, r) {
+        return e.map(r).join("");
+      }
+      e.line = 1;
+      e.column = 1;
+      e.length = 0;
+      e.position = 0;
+      e.character = 0;
+      e.characters = "";
+      function P(r, a, c, n, t, s, i) {
+        return {
+          value: r,
+          root: a,
+          parent: c,
+          type: n,
+          props: t,
+          children: s,
+          line: e.line,
+          column: e.column,
+          length: i,
+          return: ""
         };
-        _this.nextCallback = null;
-        return _this;
       }
-      Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
-        var nextIn = _ref.in;
-        if (nextIn && prevState.status === UNMOUNTED) {
-          return {
-            status: EXITED
-          };
+      function j(e, r) {
+        return x(P("", null, null, "", null, null, 0), e, {
+          length: -e.length
+        }, r);
+      }
+      function U() {
+        return e.character;
+      }
+      function _() {
+        e.character = e.position > 0 ? M(e.characters, --e.position) : 0;
+        if (e.column--, e.character === 10) e.column = 1, e.line--;
+        return e.character;
+      }
+      function F() {
+        e.character = e.position < e.length ? M(e.characters, e.position++) : 0;
+        if (e.column++, e.character === 10) e.column = 1, e.line++;
+        return e.character;
+      }
+      function I() {
+        return M(e.characters, e.position);
+      }
+      function L() {
+        return e.position;
+      }
+      function D(r, a) {
+        return C(e.characters, r, a);
+      }
+      function Y(e) {
+        switch (e) {
+          case 0:
+          case 9:
+          case 10:
+          case 13:
+          case 32:
+            return 5;
+          case 33:
+          case 43:
+          case 44:
+          case 47:
+          case 62:
+          case 64:
+          case 126:
+          case 59:
+          case 123:
+          case 125:
+            return 4;
+          case 58:
+            return 3;
+          case 34:
+          case 39:
+          case 40:
+          case 91:
+            return 2;
+          case 41:
+          case 93:
+            return 1;
+        }
+        return 0;
+      }
+      function K(r) {
+        return e.line = e.column = 1, e.length = R(e.characters = r), e.position = 0, [];
+      }
+      function V(r) {
+        return e.characters = "", r;
+      }
+      function W(r) {
+        return y(D(e.position - 1, q(r === 91 ? r + 2 : r === 40 ? r + 1 : r)));
+      }
+      function B(e) {
+        return V(H(K(e)));
+      }
+      function G(r) {
+        while (e.character = I()) if (e.character < 33) F();else break;
+        return Y(r) > 2 || Y(e.character) > 3 ? "" : " ";
+      }
+      function H(r) {
+        while (F()) switch (Y(e.character)) {
+          case 0:
+            z(Q(e.position - 1), r);
+            break;
+          case 2:
+            z(W(e.character), r);
+            break;
+          default:
+            z($(e.character), r);
         }
-        return null;
-      } // getSnapshotBeforeUpdate(prevProps) {
-      //   let nextStatus = null
-      //   if (prevProps !== this.props) {
-      //     const { status } = this.state
-      //     if (this.props.in) {
-      //       if (status !== ENTERING && status !== ENTERED) {
-      //         nextStatus = ENTERING
-      //       }
-      //     } else {
-      //       if (status === ENTERING || status === ENTERED) {
-      //         nextStatus = EXITING
-      //       }
-      //     }
-      //   }
-      //   return { nextStatus }
-      // }
-      ;
-      var _proto = Transition.prototype;
-      _proto.componentDidMount = function componentDidMount() {
-        this.updateStatus(true, this.appearStatus);
-      };
-      _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-        var nextStatus = null;
-        if (prevProps !== this.props) {
-          var status = this.state.status;
-          if (this.props.in) {
-            if (status !== ENTERING && status !== ENTERED) {
-              nextStatus = ENTERING;
+        return r;
+      }
+      function Z(r, a) {
+        while (--a && F()) if (e.character < 48 || e.character > 102 || e.character > 57 && e.character < 65 || e.character > 70 && e.character < 97) break;
+        return D(r, L() + (a < 6 && I() == 32 && F() == 32));
+      }
+      function q(r) {
+        while (F()) switch (e.character) {
+          case r:
+            return e.position;
+          case 34:
+          case 39:
+            if (r !== 34 && r !== 39) q(e.character);
+            break;
+          case 40:
+            if (r === 41) q(r);
+            break;
+          case 92:
+            F();
+            break;
+        }
+        return e.position;
+      }
+      function J(r, a) {
+        while (F()) if (r + e.character === 47 + 10) break;else if (r + e.character === 42 + 42 && I() === 47) break;
+        return "/*" + D(a, e.position - 1) + "*" + $(r === 47 ? r : F());
+      }
+      function Q(r) {
+        while (!Y(I())) F();
+        return D(r, e.position);
+      }
+      function X(e) {
+        return V(ee("", null, null, null, [""], e = K(e), 0, [0], e));
+      }
+      function ee(e, r, a, c, n, t, s, i, u) {
+        var o = 0;
+        var f = 0;
+        var l = s;
+        var p = 0;
+        var h = 0;
+        var v = 0;
+        var d = 1;
+        var b = 1;
+        var w = 1;
+        var m = 0;
+        var g = "";
+        var k = n;
+        var x = t;
+        var E = c;
+        var y = g;
+        while (b) switch (v = m, m = F()) {
+          case 40:
+            if (v != 108 && M(y, l - 1) == 58) {
+              if (O(y += A(W(m), "&", "&\f"), "&\f") != -1) w = -1;
+              break;
             }
-          } else {
-            if (status === ENTERING || status === ENTERED) {
-              nextStatus = EXITING;
+          case 34:
+          case 39:
+          case 91:
+            y += W(m);
+            break;
+          case 9:
+          case 10:
+          case 13:
+          case 32:
+            y += G(v);
+            break;
+          case 92:
+            y += Z(L() - 1, 7);
+            continue;
+          case 47:
+            switch (I()) {
+              case 42:
+              case 47:
+                z(ae(J(F(), L()), r, a), u);
+                break;
+              default:
+                y += "/";
             }
-          }
-        }
-        this.updateStatus(false, nextStatus);
-      };
-      _proto.componentWillUnmount = function componentWillUnmount() {
-        this.cancelNextCallback();
-      };
-      _proto.getTimeouts = function getTimeouts() {
-        var timeout = this.props.timeout;
-        var exit, enter, appear;
-        exit = enter = appear = timeout;
-        if (timeout != null && typeof timeout !== 'number') {
-          exit = timeout.exit;
-          enter = timeout.enter; // TODO: remove fallback for next major
-
-          appear = timeout.appear !== undefined ? timeout.appear : enter;
-        }
-        return {
-          exit: exit,
-          enter: enter,
-          appear: appear
-        };
-      };
-      _proto.updateStatus = function updateStatus(mounting, nextStatus) {
-        if (mounting === void 0) {
-          mounting = false;
-        }
-        if (nextStatus !== null) {
-          // nextStatus will always be ENTERING or EXITING.
-          this.cancelNextCallback();
-          if (nextStatus === ENTERING) {
-            if (this.props.unmountOnExit || this.props.mountOnEnter) {
-              var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default.default.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
-              // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
-              // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
-
-              if (node) forceReflow(node);
+            break;
+          case 123 * d:
+            i[o++] = R(y) * w;
+          case 125 * d:
+          case 59:
+          case 0:
+            switch (m) {
+              case 0:
+              case 125:
+                b = 0;
+              case 59 + f:
+                if (w == -1) y = A(y, /\f/g, "");
+                if (h > 0 && R(y) - l) z(h > 32 ? ce(y + ";", c, a, l - 1) : ce(A(y, " ", "") + ";", c, a, l - 2), u);
+                break;
+              case 59:
+                y += ";";
+              default:
+                z(E = re(y, r, a, o, f, n, i, g, k = [], x = [], l), t);
+                if (m === 123) if (f === 0) ee(y, r, E, E, k, t, l, i, x);else switch (p === 99 && M(y, 3) === 110 ? 100 : p) {
+                  case 100:
+                  case 108:
+                  case 109:
+                  case 115:
+                    ee(e, E, E, c && z(re(e, E, E, 0, 0, n, i, g, n, k = [], l), x), n, x, l, i, c ? k : x);
+                    break;
+                  default:
+                    ee(y, E, E, E, [""], x, 0, i, x);
+                }
+            }
+            o = f = h = 0, d = w = 1, g = y = "", l = s;
+            break;
+          case 58:
+            l = 1 + R(y), h = v;
+          default:
+            if (d < 1) if (m == 123) --d;else if (m == 125 && d++ == 0 && _() == 125) continue;
+            switch (y += $(m), m * d) {
+              case 38:
+                w = f > 0 ? 1 : (y += "\f", -1);
+                break;
+              case 44:
+                i[o++] = (R(y) - 1) * w, w = 1;
+                break;
+              case 64:
+                if (I() === 45) y += W(F());
+                p = I(), f = l = R(g = y += Q(L())), m++;
+                break;
+              case 45:
+                if (v === 45 && R(y) == 2) d = 0;
             }
-            this.performEnter(mounting);
-          } else {
-            this.performExit();
-          }
-        } else if (this.props.unmountOnExit && this.state.status === EXITED) {
-          this.setState({
-            status: UNMOUNTED
-          });
-        }
-      };
-      _proto.performEnter = function performEnter(mounting) {
-        var _this2 = this;
-        var enter = this.props.enter;
-        var appearing = this.context ? this.context.isMounting : mounting;
-        var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM__default.default.findDOMNode(this), appearing],
-          maybeNode = _ref2[0],
-          maybeAppearing = _ref2[1];
-        var timeouts = this.getTimeouts();
-        var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
-        // if we are mounting and running this it means appear _must_ be set
-
-        if (!mounting && !enter || config.disabled) {
-          this.safeSetState({
-            status: ENTERED
-          }, function () {
-            _this2.props.onEntered(maybeNode);
-          });
-          return;
-        }
-        this.props.onEnter(maybeNode, maybeAppearing);
-        this.safeSetState({
-          status: ENTERING
-        }, function () {
-          _this2.props.onEntering(maybeNode, maybeAppearing);
-          _this2.onTransitionEnd(enterTimeout, function () {
-            _this2.safeSetState({
-              status: ENTERED
-            }, function () {
-              _this2.props.onEntered(maybeNode, maybeAppearing);
-            });
-          });
-        });
-      };
-      _proto.performExit = function performExit() {
-        var _this3 = this;
-        var exit = this.props.exit;
-        var timeouts = this.getTimeouts();
-        var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default.default.findDOMNode(this); // no exit animation skip right to EXITED
-
-        if (!exit || config.disabled) {
-          this.safeSetState({
-            status: EXITED
-          }, function () {
-            _this3.props.onExited(maybeNode);
-          });
-          return;
         }
-        this.props.onExit(maybeNode);
-        this.safeSetState({
-          status: EXITING
-        }, function () {
-          _this3.props.onExiting(maybeNode);
-          _this3.onTransitionEnd(timeouts.exit, function () {
-            _this3.safeSetState({
-              status: EXITED
-            }, function () {
-              _this3.props.onExited(maybeNode);
+        return t;
+      }
+      function re(e, r, a, c, n, s, i, u, o, f, l) {
+        var p = n - 1;
+        var h = n === 0 ? s : [""];
+        var v = S(h);
+        for (var d = 0, b = 0, w = 0; d < c; ++d) for (var m = 0, g = C(e, p + 1, p = k(b = i[d])), $ = e; m < v; ++m) if ($ = y(b > 0 ? h[m] + " " + g : A(g, /&\f/g, h[m]))) o[w++] = $;
+        return P(e, r, a, n === 0 ? t : u, o, f, l);
+      }
+      function ae(e, r, a) {
+        return P(e, r, a, n, $(U()), C(e, 2, -2), 0);
+      }
+      function ce(e, r, a, c) {
+        return P(e, r, a, s, C(e, 0, c), C(e, c + 1, -1), c);
+      }
+      function ne(e, n, t) {
+        switch (E(e, n)) {
+          case 5103:
+            return c + "print-" + e + e;
+          case 5737:
+          case 4201:
+          case 3177:
+          case 3433:
+          case 1641:
+          case 4457:
+          case 2921:
+          case 5572:
+          case 6356:
+          case 5844:
+          case 3191:
+          case 6645:
+          case 3005:
+          case 6391:
+          case 5879:
+          case 5623:
+          case 6135:
+          case 4599:
+          case 4855:
+          case 4215:
+          case 6389:
+          case 5109:
+          case 5365:
+          case 5621:
+          case 3829:
+            return c + e + e;
+          case 4789:
+            return a + e + e;
+          case 5349:
+          case 4246:
+          case 4810:
+          case 6968:
+          case 2756:
+            return c + e + a + e + r + e + e;
+          case 5936:
+            switch (M(e, n + 11)) {
+              case 114:
+                return c + e + r + A(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
+              case 108:
+                return c + e + r + A(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
+              case 45:
+                return c + e + r + A(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
+            }
+          case 6828:
+          case 4268:
+          case 2903:
+            return c + e + r + e + e;
+          case 6165:
+            return c + e + r + "flex-" + e + e;
+          case 5187:
+            return c + e + A(e, /(\w+).+(:[^]+)/, c + "box-$1$2" + r + "flex-$1$2") + e;
+          case 5443:
+            return c + e + r + "flex-item-" + A(e, /flex-|-self/g, "") + (!T(e, /flex-|baseline/) ? r + "grid-row-" + A(e, /flex-|-self/g, "") : "") + e;
+          case 4675:
+            return c + e + r + "flex-line-pack" + A(e, /align-content|flex-|-self/g, "") + e;
+          case 5548:
+            return c + e + r + A(e, "shrink", "negative") + e;
+          case 5292:
+            return c + e + r + A(e, "basis", "preferred-size") + e;
+          case 6060:
+            return c + "box-" + A(e, "-grow", "") + c + e + r + A(e, "grow", "positive") + e;
+          case 4554:
+            return c + A(e, /([^-])(transform)/g, "$1" + c + "$2") + e;
+          case 6187:
+            return A(A(A(e, /(zoom-|grab)/, c + "$1"), /(image-set)/, c + "$1"), e, "") + e;
+          case 5495:
+          case 3959:
+            return A(e, /(image-set\([^]*)/, c + "$1" + "$`$1");
+          case 4968:
+            return A(A(e, /(.+:)(flex-)?(.*)/, c + "box-pack:$3" + r + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + c + e + e;
+          case 4200:
+            if (!T(e, /flex-|baseline/)) return r + "grid-column-align" + C(e, n) + e;
+            break;
+          case 2592:
+          case 3360:
+            return r + A(e, "template-", "") + e;
+          case 4384:
+          case 3616:
+            if (t && t.some(function (e, r) {
+              return n = r, T(e.props, /grid-\w+-end/);
+            })) {
+              return ~O(e + (t = t[n].value), "span") ? e : r + A(e, "-start", "") + e + r + "grid-row-span:" + (~O(t, "span") ? T(t, /\d+/) : +T(t, /\d+/) - +T(e, /\d+/)) + ";";
+            }
+            return r + A(e, "-start", "") + e;
+          case 4896:
+          case 4128:
+            return t && t.some(function (e) {
+              return T(e.props, /grid-\w+-start/);
+            }) ? e : r + A(A(e, "-end", "-span"), "span ", "") + e;
+          case 4095:
+          case 3583:
+          case 4068:
+          case 2532:
+            return A(e, /(.+)-inline(.+)/, c + "$1$2") + e;
+          case 8116:
+          case 7059:
+          case 5753:
+          case 5535:
+          case 5445:
+          case 5701:
+          case 4933:
+          case 4677:
+          case 5533:
+          case 5789:
+          case 5021:
+          case 4765:
+            if (R(e) - 1 - n > 6) switch (M(e, n + 1)) {
+              case 109:
+                if (M(e, n + 4) !== 45) break;
+              case 102:
+                return A(e, /(.+:)(.+)-([^]+)/, "$1" + c + "$2-$3" + "$1" + a + (M(e, n + 3) == 108 ? "$3" : "$2-$3")) + e;
+              case 115:
+                return ~O(e, "stretch") ? ne(A(e, "stretch", "fill-available"), n, t) + e : e;
+            }
+            break;
+          case 5152:
+          case 5920:
+            return A(e, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function (a, c, n, t, s, i, u) {
+              return r + c + ":" + n + u + (t ? r + c + "-span:" + (s ? i : +i - +n) + u : "") + e;
             });
-          });
-        });
-      };
-      _proto.cancelNextCallback = function cancelNextCallback() {
-        if (this.nextCallback !== null) {
-          this.nextCallback.cancel();
-          this.nextCallback = null;
-        }
-      };
-      _proto.safeSetState = function safeSetState(nextState, callback) {
-        // This shouldn't be necessary, but there are weird race conditions with
-        // setState callbacks and unmounting in testing, so always make sure that
-        // we can cancel any pending setState callbacks after we unmount.
-        callback = this.setNextCallback(callback);
-        this.setState(nextState, callback);
-      };
-      _proto.setNextCallback = function setNextCallback(callback) {
-        var _this4 = this;
-        var active = true;
-        this.nextCallback = function (event) {
-          if (active) {
-            active = false;
-            _this4.nextCallback = null;
-            callback(event);
-          }
+          case 4949:
+            if (M(e, n + 6) === 121) return A(e, ":", ":" + c) + e;
+            break;
+          case 6444:
+            switch (M(e, M(e, 14) === 45 ? 18 : 11)) {
+              case 120:
+                return A(e, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + c + (M(e, 14) === 45 ? "inline-" : "") + "box$3" + "$1" + c + "$2$3" + "$1" + r + "$2box$3") + e;
+              case 100:
+                return A(e, ":", ":" + r) + e;
+            }
+            break;
+          case 5719:
+          case 2647:
+          case 2135:
+          case 3927:
+          case 2391:
+            return A(e, "scroll-", "scroll-snap-") + e;
+        }
+        return e;
+      }
+      function te(e, r) {
+        var a = "";
+        var c = S(e);
+        for (var n = 0; n < c; n++) a += r(e[n], n, e, r) || "";
+        return a;
+      }
+      function se(e, r, a, c) {
+        switch (e.type) {
+          case g:
+            if (e.children.length) break;
+          case o:
+          case s:
+            return e.return = e.return || e.value;
+          case n:
+            return "";
+          case d:
+            return e.return = e.value + "{" + te(e.children, c) + "}";
+          case t:
+            e.value = e.props.join(",");
+        }
+        return R(a = te(e.children, c)) ? e.return = e.value + "{" + a + "}" : "";
+      }
+      function ie(e) {
+        var r = S(e);
+        return function (a, c, n, t) {
+          var s = "";
+          for (var i = 0; i < r; i++) s += e[i](a, c, n, t) || "";
+          return s;
         };
-        this.nextCallback.cancel = function () {
-          active = false;
+      }
+      function ue(e) {
+        return function (r) {
+          if (!r.root) if (r = r.return) e(r);
         };
-        return this.nextCallback;
-      };
-      _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
-        this.setNextCallback(handler);
-        var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default.default.findDOMNode(this);
-        var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
-        if (!node || doesNotHaveTimeoutOrListener) {
-          setTimeout(this.nextCallback, 0);
-          return;
-        }
-        if (this.props.addEndListener) {
-          var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
-            maybeNode = _ref3[0],
-            maybeNextCallback = _ref3[1];
-          this.props.addEndListener(maybeNode, maybeNextCallback);
-        }
-        if (timeout != null) {
-          setTimeout(this.nextCallback, timeout);
+      }
+      function oe(e, n, i, u) {
+        if (e.length > -1) if (!e.return) switch (e.type) {
+          case s:
+            e.return = ne(e.value, e.length, i);
+            return;
+          case d:
+            return te([j(e, {
+              value: A(e.value, "@", "@" + c)
+            })], u);
+          case t:
+            if (e.length) return N(e.props, function (n) {
+              switch (T(n, /(::plac\w+|:read-\w+)/)) {
+                case ":read-only":
+                case ":read-write":
+                  return te([j(e, {
+                    props: [A(n, /:(read-\w+)/, ":" + a + "$1")]
+                  })], u);
+                case "::placeholder":
+                  return te([j(e, {
+                    props: [A(n, /:(plac\w+)/, ":" + c + "input-$1")]
+                  }), j(e, {
+                    props: [A(n, /:(plac\w+)/, ":" + a + "$1")]
+                  }), j(e, {
+                    props: [A(n, /:(plac\w+)/, r + "input-$1")]
+                  })], u);
+              }
+              return "";
+            });
         }
-      };
-      _proto.render = function render() {
-        var status = this.state.status;
-        if (status === UNMOUNTED) {
-          return null;
+      }
+      function fe(e) {
+        switch (e.type) {
+          case t:
+            e.props = e.props.map(function (r) {
+              return N(B(r), function (r, a, c) {
+                switch (M(r, 0)) {
+                  case 12:
+                    return C(r, 1, R(r));
+                  case 0:
+                  case 40:
+                  case 43:
+                  case 62:
+                  case 126:
+                    return r;
+                  case 58:
+                    if (c[++a] === "global") c[a] = "", c[++a] = "\f" + C(c[a], a = 1, -1);
+                  case 32:
+                    return a === 1 ? "" : r;
+                  default:
+                    switch (a) {
+                      case 0:
+                        e = r;
+                        return S(c) > 1 ? "" : r;
+                      case a = S(c) - 1:
+                      case 2:
+                        return a === 2 ? r + e + e : r + e;
+                      default:
+                        return r;
+                    }
+                }
+              });
+            });
         }
-        var _this$props = this.props,
-          children = _this$props.children;
-          _this$props.in;
-          _this$props.mountOnEnter;
-          _this$props.unmountOnExit;
-          _this$props.appear;
-          _this$props.enter;
-          _this$props.exit;
-          _this$props.timeout;
-          _this$props.addEndListener;
-          _this$props.onEnter;
-          _this$props.onEntering;
-          _this$props.onEntered;
-          _this$props.onExit;
-          _this$props.onExiting;
-          _this$props.onExited;
-          _this$props.nodeRef;
-          var childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
-        return (/*#__PURE__*/
-          // allows for nested Transitions
-          React__namespace.default.createElement(TransitionGroupContext.Provider, {
-            value: null
-          }, typeof children === 'function' ? children(status, childProps) : React__namespace.default.cloneElement(React__namespace.default.Children.only(children), childProps))
-        );
-      };
-      return Transition;
-    }(React__namespace.default.Component);
-    Transition.contextType = TransitionGroupContext;
-    Transition.propTypes = {}; // Name the function so it is clearer in the documentation
-
-    function noop() {}
-    Transition.defaultProps = {
-      in: false,
-      mountOnEnter: false,
-      unmountOnExit: false,
-      appear: false,
-      enter: true,
-      exit: true,
-      onEnter: noop,
-      onEntering: noop,
-      onEntered: noop,
-      onExit: noop,
-      onExiting: noop,
-      onExited: noop
-    };
-    Transition.UNMOUNTED = UNMOUNTED;
-    Transition.EXITED = EXITED;
-    Transition.ENTERING = ENTERING;
-    Transition.ENTERED = ENTERED;
-    Transition.EXITING = EXITING;
-
-    var _addClass = function addClass$1(node, classes) {
-      return node && classes && classes.split(' ').forEach(function (c) {
-        return addClass(node, c);
+      }
+      e.CHARSET = f;
+      e.COMMENT = n;
+      e.COUNTER_STYLE = w;
+      e.DECLARATION = s;
+      e.DOCUMENT = h;
+      e.FONT_FACE = b;
+      e.FONT_FEATURE_VALUES = m;
+      e.IMPORT = o;
+      e.KEYFRAMES = d;
+      e.LAYER = g;
+      e.MEDIA = u;
+      e.MOZ = a;
+      e.MS = r;
+      e.NAMESPACE = v;
+      e.PAGE = i;
+      e.RULESET = t;
+      e.SUPPORTS = p;
+      e.VIEWPORT = l;
+      e.WEBKIT = c;
+      e.abs = k;
+      e.alloc = K;
+      e.append = z;
+      e.assign = x;
+      e.caret = L;
+      e.char = U;
+      e.charat = M;
+      e.combine = N;
+      e.comment = ae;
+      e.commenter = J;
+      e.compile = X;
+      e.copy = j;
+      e.dealloc = V;
+      e.declaration = ce;
+      e.delimit = W;
+      e.delimiter = q;
+      e.escaping = Z;
+      e.from = $;
+      e.hash = E;
+      e.identifier = Q;
+      e.indexof = O;
+      e.match = T;
+      e.middleware = ie;
+      e.namespace = fe;
+      e.next = F;
+      e.node = P;
+      e.parse = ee;
+      e.peek = I;
+      e.prefix = ne;
+      e.prefixer = oe;
+      e.prev = _;
+      e.replace = A;
+      e.ruleset = re;
+      e.rulesheet = ue;
+      e.serialize = te;
+      e.sizeof = S;
+      e.slice = D;
+      e.stringify = se;
+      e.strlen = R;
+      e.substr = C;
+      e.token = Y;
+      e.tokenize = B;
+      e.tokenizer = H;
+      e.trim = y;
+      e.whitespace = G;
+      Object.defineProperty(e, "__esModule", {
+        value: true
       });
+    });
+  })(stylis, stylisExports);
+
+  var weakMemoize = function weakMemoize(func) {
+    var cache = new WeakMap();
+    return function (arg) {
+      if (cache.has(arg)) {
+        // Use non-null assertion because we just checked that the cache `has` it
+        // This allows us to remove `undefined` from the return value
+        return cache.get(arg);
+      }
+      var ret = func(arg);
+      cache.set(arg, ret);
+      return ret;
     };
-    var removeClass = function removeClass(node, classes) {
-      return node && classes && classes.split(' ').forEach(function (c) {
-        return removeClass$1(node, c);
-      });
+  };
+
+  function memoize(fn) {
+    var cache = Object.create(null);
+    return function (arg) {
+      if (cache[arg] === undefined) cache[arg] = fn(arg);
+      return cache[arg];
     };
-    /**
-     * A transition component inspired by the excellent
-     * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
-     * use it if you're using CSS transitions or animations. It's built upon the
-     * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
-     * component, so it inherits all of its props.
-     *
-     * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
-     * and `exit` states of the transition. The first class is applied and then a
-     * second `*-active` class in order to activate the CSS transition. After the
-     * transition, matching `*-done` class names are applied to persist the
-     * transition state.
-     *
-     * ```jsx
-     * function App() {
-     *   const [inProp, setInProp] = useState(false);
-     *   return (
-     *     <div>
-     *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
-     *         <div>
-     *           {"I'll receive my-node-* classes"}
-     *         </div>
-     *       </CSSTransition>
-     *       <button type="button" onClick={() => setInProp(true)}>
-     *         Click to Enter
-     *       </button>
-     *     </div>
-     *   );
-     * }
-     * ```
-     *
-     * When the `in` prop is set to `true`, the child component will first receive
-     * the class `example-enter`, then the `example-enter-active` will be added in
-     * the next tick. `CSSTransition` [forces a
-     * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
-     * between before adding the `example-enter-active`. This is an important trick
-     * because it allows us to transition between `example-enter` and
-     * `example-enter-active` even though they were added immediately one after
-     * another. Most notably, this is what makes it possible for us to animate
-     * _appearance_.
-     *
-     * ```css
-     * .my-node-enter {
-     *   opacity: 0;
-     * }
-     * .my-node-enter-active {
-     *   opacity: 1;
-     *   transition: opacity 200ms;
-     * }
-     * .my-node-exit {
-     *   opacity: 1;
-     * }
-     * .my-node-exit-active {
-     *   opacity: 0;
-     *   transition: opacity 200ms;
-     * }
-     * ```
-     *
-     * `*-active` classes represent which styles you want to animate **to**, so it's
-     * important to add `transition` declaration only to them, otherwise transitions
-     * might not behave as intended! This might not be obvious when the transitions
-     * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
-     * the example above (minus `transition`), but it becomes apparent in more
-     * complex transitions.
-     *
-     * **Note**: If you're using the
-     * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
-     * prop, make sure to define styles for `.appear-*` classes as well.
-     */
-
-    var CSSTransition = /*#__PURE__*/function (_React$Component) {
-      _inheritsLoose(CSSTransition, _React$Component);
-      function CSSTransition() {
-        var _this;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-        _this.appliedClasses = {
-          appear: {},
-          enter: {},
-          exit: {}
-        };
-        _this.onEnter = function (maybeNode, maybeAppearing) {
-          var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
-            node = _this$resolveArgument[0],
-            appearing = _this$resolveArgument[1];
-          _this.removeClasses(node, 'exit');
-          _this.addClass(node, appearing ? 'appear' : 'enter', 'base');
-          if (_this.props.onEnter) {
-            _this.props.onEnter(maybeNode, maybeAppearing);
-          }
-        };
-        _this.onEntering = function (maybeNode, maybeAppearing) {
-          var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
-            node = _this$resolveArgument2[0],
-            appearing = _this$resolveArgument2[1];
-          var type = appearing ? 'appear' : 'enter';
-          _this.addClass(node, type, 'active');
-          if (_this.props.onEntering) {
-            _this.props.onEntering(maybeNode, maybeAppearing);
-          }
-        };
-        _this.onEntered = function (maybeNode, maybeAppearing) {
-          var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
-            node = _this$resolveArgument3[0],
-            appearing = _this$resolveArgument3[1];
-          var type = appearing ? 'appear' : 'enter';
-          _this.removeClasses(node, type);
-          _this.addClass(node, type, 'done');
-          if (_this.props.onEntered) {
-            _this.props.onEntered(maybeNode, maybeAppearing);
-          }
-        };
-        _this.onExit = function (maybeNode) {
-          var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
-            node = _this$resolveArgument4[0];
-          _this.removeClasses(node, 'appear');
-          _this.removeClasses(node, 'enter');
-          _this.addClass(node, 'exit', 'base');
-          if (_this.props.onExit) {
-            _this.props.onExit(maybeNode);
-          }
-        };
-        _this.onExiting = function (maybeNode) {
-          var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
-            node = _this$resolveArgument5[0];
-          _this.addClass(node, 'exit', 'active');
-          if (_this.props.onExiting) {
-            _this.props.onExiting(maybeNode);
+  }
+
+  var isBrowser$1 = typeof document !== 'undefined';
+  var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
+    var previous = 0;
+    var character = 0;
+    while (true) {
+      previous = character;
+      character = stylisExports.peek(); // &\f
+
+      if (previous === 38 && character === 12) {
+        points[index] = 1;
+      }
+      if (stylisExports.token(character)) {
+        break;
+      }
+      stylisExports.next();
+    }
+    return stylisExports.slice(begin, stylisExports.position);
+  };
+  var toRules = function toRules(parsed, points) {
+    // pretend we've started with a comma
+    var index = -1;
+    var character = 44;
+    do {
+      switch (stylisExports.token(character)) {
+        case 0:
+          // &\f
+          if (character === 38 && stylisExports.peek() === 12) {
+            // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
+            // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
+            // and when it should just concatenate the outer and inner selectors
+            // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
+            points[index] = 1;
           }
-        };
-        _this.onExited = function (maybeNode) {
-          var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
-            node = _this$resolveArgument6[0];
-          _this.removeClasses(node, 'exit');
-          _this.addClass(node, 'exit', 'done');
-          if (_this.props.onExited) {
-            _this.props.onExited(maybeNode);
+          parsed[index] += identifierWithPointTracking(stylisExports.position - 1, points, index);
+          break;
+        case 2:
+          parsed[index] += stylisExports.delimit(character);
+          break;
+        case 4:
+          // comma
+          if (character === 44) {
+            // colon
+            parsed[++index] = stylisExports.peek() === 58 ? '&\f' : '';
+            points[index] = parsed[index].length;
+            break;
           }
-        };
-        _this.resolveArguments = function (maybeNode, maybeAppearing) {
-          return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
-          : [maybeNode, maybeAppearing];
-        };
-        _this.getClassNames = function (type) {
-          var classNames = _this.props.classNames;
-          var isStringClassNames = typeof classNames === 'string';
-          var prefix = isStringClassNames && classNames ? classNames + "-" : '';
-          var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
-          var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
-          var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
-          return {
-            baseClassName: baseClassName,
-            activeClassName: activeClassName,
-            doneClassName: doneClassName
-          };
-        };
-        return _this;
+
+        // fallthrough
+
+        default:
+          parsed[index] += stylisExports.from(character);
       }
-      var _proto = CSSTransition.prototype;
-      _proto.addClass = function addClass(node, type, phase) {
-        var className = this.getClassNames(type)[phase + "ClassName"];
-        var _this$getClassNames = this.getClassNames('enter'),
-          doneClassName = _this$getClassNames.doneClassName;
-        if (type === 'appear' && phase === 'done' && doneClassName) {
-          className += " " + doneClassName;
-        } // This is to force a repaint,
-        // which is necessary in order to transition styles when adding a class name.
-
-        if (phase === 'active') {
-          if (node) forceReflow(node);
-        }
-        if (className) {
-          this.appliedClasses[type][phase] = className;
-          _addClass(node, className);
-        }
-      };
-      _proto.removeClasses = function removeClasses(node, type) {
-        var _this$appliedClasses$ = this.appliedClasses[type],
-          baseClassName = _this$appliedClasses$.base,
-          activeClassName = _this$appliedClasses$.active,
-          doneClassName = _this$appliedClasses$.done;
-        this.appliedClasses[type] = {};
-        if (baseClassName) {
-          removeClass(node, baseClassName);
-        }
-        if (activeClassName) {
-          removeClass(node, activeClassName);
-        }
-        if (doneClassName) {
-          removeClass(node, doneClassName);
-        }
-      };
-      _proto.render = function render() {
-        var _this$props = this.props;
-          _this$props.classNames;
-          var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
-        return /*#__PURE__*/React__namespace.default.createElement(Transition, _extends({}, props, {
-          onEnter: this.onEnter,
-          onEntered: this.onEntered,
-          onEntering: this.onEntering,
-          onExit: this.onExit,
-          onExiting: this.onExiting,
-          onExited: this.onExited
-        }));
-      };
-      return CSSTransition;
-    }(React__namespace.default.Component);
-    CSSTransition.defaultProps = {
-      classNames: ''
-    };
-    CSSTransition.propTypes = {};
+    } while (character = stylisExports.next());
+    return parsed;
+  };
+  var getRules = function getRules(value, points) {
+    return stylisExports.dealloc(toRules(stylisExports.alloc(value), points));
+  }; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
 
-    function _assertThisInitialized(e) {
-      if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-      return e;
+  var fixedElements = /* #__PURE__ */new WeakMap();
+  var compat = function compat(element) {
+    if (element.type !== 'rule' || !element.parent ||
+    // positive .length indicates that this rule contains pseudo
+    // negative .length indicates that this rule has been already prefixed
+    element.length < 1) {
+      return;
     }
+    var value = element.value;
+    var parent = element.parent;
+    var isImplicitRule = element.column === parent.column && element.line === parent.line;
+    while (parent.type !== 'rule') {
+      parent = parent.parent;
+      if (!parent) return;
+    } // short-circuit for the simplest case
 
-    /**
-     * Given `this.props.children`, return an object mapping key to child.
-     *
-     * @param {*} children `this.props.children`
-     * @return {object} Mapping of key to child
-     */
+    if (element.props.length === 1 && value.charCodeAt(0) !== 58
+    /* colon */ && !fixedElements.get(parent)) {
+      return;
+    } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
+    // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
 
-    function getChildMapping(children, mapFn) {
-      var mapper = function mapper(child) {
-        return mapFn && React.isValidElement(child) ? mapFn(child) : child;
-      };
-      var result = Object.create(null);
-      if (children) React.Children.map(children, function (c) {
-        return c;
-      }).forEach(function (child) {
-        // run the map function here instead so that the key is the computed one
-        result[child.key] = mapper(child);
-      });
-      return result;
+    if (isImplicitRule) {
+      return;
     }
-    /**
-     * When you're adding or removing children some may be added or removed in the
-     * same render pass. We want to show *both* since we want to simultaneously
-     * animate elements in and out. This function takes a previous set of keys
-     * and a new set of keys and merges them with its best guess of the correct
-     * ordering. In the future we may expose some of the utilities in
-     * ReactMultiChild to make this easy, but for now React itself does not
-     * directly have this concept of the union of prevChildren and nextChildren
-     * so we implement it here.
-     *
-     * @param {object} prev prev children as returned from
-     * `ReactTransitionChildMapping.getChildMapping()`.
-     * @param {object} next next children as returned from
-     * `ReactTransitionChildMapping.getChildMapping()`.
-     * @return {object} a key set that contains all keys in `prev` and all keys
-     * in `next` in a reasonable order.
-     */
-
-    function mergeChildMappings(prev, next) {
-      prev = prev || {};
-      next = next || {};
-      function getValueForKey(key) {
-        return key in next ? next[key] : prev[key];
-      } // For each key of `next`, the list of keys to insert before that key in
-      // the combined list
-
-      var nextKeysPending = Object.create(null);
-      var pendingKeys = [];
-      for (var prevKey in prev) {
-        if (prevKey in next) {
-          if (pendingKeys.length) {
-            nextKeysPending[prevKey] = pendingKeys;
-            pendingKeys = [];
-          }
-        } else {
-          pendingKeys.push(prevKey);
-        }
+    fixedElements.set(element, true);
+    var points = [];
+    var rules = getRules(value, points);
+    var parentRules = parent.props;
+    for (var i = 0, k = 0; i < rules.length; i++) {
+      for (var j = 0; j < parentRules.length; j++, k++) {
+        element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
       }
-      var i;
-      var childMapping = {};
-      for (var nextKey in next) {
-        if (nextKeysPending[nextKey]) {
-          for (i = 0; i < nextKeysPending[nextKey].length; i++) {
-            var pendingNextKey = nextKeysPending[nextKey][i];
-            childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
-          }
-        }
-        childMapping[nextKey] = getValueForKey(nextKey);
-      } // Finally, add the keys which didn't appear before any key in `next`
-
-      for (i = 0; i < pendingKeys.length; i++) {
-        childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
+    }
+  };
+  var removeLabel = function removeLabel(element) {
+    if (element.type === 'decl') {
+      var value = element.value;
+      if (
+      // charcode for l
+      value.charCodeAt(0) === 108 &&
+      // charcode for b
+      value.charCodeAt(2) === 98) {
+        // this ignores label
+        element["return"] = '';
+        element.value = '';
       }
-      return childMapping;
     }
-    function getProp(child, prop, props) {
-      return props[prop] != null ? props[prop] : child.props[prop];
+  };
+
+  /* eslint-disable no-fallthrough */
+
+  function prefix(value, length) {
+    switch (stylisExports.hash(value, length)) {
+      // color-adjust
+      case 5103:
+        return stylisExports.WEBKIT + 'print-' + value + value;
+      // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+
+      case 5737:
+      case 4201:
+      case 3177:
+      case 3433:
+      case 1641:
+      case 4457:
+      case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+
+      case 5572:
+      case 6356:
+      case 5844:
+      case 3191:
+      case 6645:
+      case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+
+      case 6391:
+      case 5879:
+      case 5623:
+      case 6135:
+      case 4599:
+      case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+
+      case 4215:
+      case 6389:
+      case 5109:
+      case 5365:
+      case 5621:
+      case 3829:
+        return stylisExports.WEBKIT + value + value;
+      // appearance, user-select, transform, hyphens, text-size-adjust
+
+      case 5349:
+      case 4246:
+      case 4810:
+      case 6968:
+      case 2756:
+        return stylisExports.WEBKIT + value + stylisExports.MOZ + value + stylisExports.MS + value + value;
+      // flex, flex-direction
+
+      case 6828:
+      case 4268:
+        return stylisExports.WEBKIT + value + stylisExports.MS + value + value;
+      // order
+
+      case 6165:
+        return stylisExports.WEBKIT + value + stylisExports.MS + 'flex-' + value + value;
+      // align-items
+
+      case 5187:
+        return stylisExports.WEBKIT + value + stylisExports.replace(value, /(\w+).+(:[^]+)/, stylisExports.WEBKIT + 'box-$1$2' + stylisExports.MS + 'flex-$1$2') + value;
+      // align-self
+
+      case 5443:
+        return stylisExports.WEBKIT + value + stylisExports.MS + 'flex-item-' + stylisExports.replace(value, /flex-|-self/, '') + value;
+      // align-content
+
+      case 4675:
+        return stylisExports.WEBKIT + value + stylisExports.MS + 'flex-line-pack' + stylisExports.replace(value, /align-content|flex-|-self/, '') + value;
+      // flex-shrink
+
+      case 5548:
+        return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, 'shrink', 'negative') + value;
+      // flex-basis
+
+      case 5292:
+        return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, 'basis', 'preferred-size') + value;
+      // flex-grow
+
+      case 6060:
+        return stylisExports.WEBKIT + 'box-' + stylisExports.replace(value, '-grow', '') + stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, 'grow', 'positive') + value;
+      // transition
+
+      case 4554:
+        return stylisExports.WEBKIT + stylisExports.replace(value, /([^-])(transform)/g, '$1' + stylisExports.WEBKIT + '$2') + value;
+      // cursor
+
+      case 6187:
+        return stylisExports.replace(stylisExports.replace(stylisExports.replace(value, /(zoom-|grab)/, stylisExports.WEBKIT + '$1'), /(image-set)/, stylisExports.WEBKIT + '$1'), value, '') + value;
+      // background, background-image
+
+      case 5495:
+      case 3959:
+        return stylisExports.replace(value, /(image-set\([^]*)/, stylisExports.WEBKIT + '$1' + '$`$1');
+      // justify-content
+
+      case 4968:
+        return stylisExports.replace(stylisExports.replace(value, /(.+:)(flex-)?(.*)/, stylisExports.WEBKIT + 'box-pack:$3' + stylisExports.MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + stylisExports.WEBKIT + value + value;
+      // (margin|padding)-inline-(start|end)
+
+      case 4095:
+      case 3583:
+      case 4068:
+      case 2532:
+        return stylisExports.replace(value, /(.+)-inline(.+)/, stylisExports.WEBKIT + '$1$2') + value;
+      // (min|max)?(width|height|inline-size|block-size)
+
+      case 8116:
+      case 7059:
+      case 5753:
+      case 5535:
+      case 5445:
+      case 5701:
+      case 4933:
+      case 4677:
+      case 5533:
+      case 5789:
+      case 5021:
+      case 4765:
+        // stretch, max-content, min-content, fill-available
+        if (stylisExports.strlen(value) - 1 - length > 6) switch (stylisExports.charat(value, length + 1)) {
+          // (m)ax-content, (m)in-content
+          case 109:
+            // -
+            if (stylisExports.charat(value, length + 4) !== 45) break;
+          // (f)ill-available, (f)it-content
+
+          case 102:
+            return stylisExports.replace(value, /(.+:)(.+)-([^]+)/, '$1' + stylisExports.WEBKIT + '$2-$3' + '$1' + stylisExports.MOZ + (stylisExports.charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
+          // (s)tretch
+
+          case 115:
+            return ~stylisExports.indexof(value, 'stretch') ? prefix(stylisExports.replace(value, 'stretch', 'fill-available'), length) + value : value;
+        }
+        break;
+      // position: sticky
+
+      case 4949:
+        // (s)ticky?
+        if (stylisExports.charat(value, length + 1) !== 115) break;
+      // display: (flex|inline-flex)
+
+      case 6444:
+        switch (stylisExports.charat(value, stylisExports.strlen(value) - 3 - (~stylisExports.indexof(value, '!important') && 10))) {
+          // stic(k)y
+          case 107:
+            return stylisExports.replace(value, ':', ':' + stylisExports.WEBKIT) + value;
+          // (inline-)?fl(e)x
+
+          case 101:
+            return stylisExports.replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + stylisExports.WEBKIT + (stylisExports.charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + stylisExports.WEBKIT + '$2$3' + '$1' + stylisExports.MS + '$2box$3') + value;
+        }
+        break;
+      // writing-mode
+
+      case 5936:
+        switch (stylisExports.charat(value, length + 11)) {
+          // vertical-l(r)
+          case 114:
+            return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
+          // vertical-r(l)
+
+          case 108:
+            return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
+          // horizontal(-)tb
+
+          case 45:
+            return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
+        }
+        return stylisExports.WEBKIT + value + stylisExports.MS + value + value;
     }
-    function getInitialChildMapping(props, onExited) {
-      return getChildMapping(props.children, function (child) {
-        return React.cloneElement(child, {
-          onExited: onExited.bind(null, child),
-          in: true,
-          appear: getProp(child, 'appear', props),
-          enter: getProp(child, 'enter', props),
-          exit: getProp(child, 'exit', props)
+    return value;
+  }
+  var prefixer = function prefixer(element, index, children, callback) {
+    if (element.length > -1) if (!element["return"]) switch (element.type) {
+      case stylisExports.DECLARATION:
+        element["return"] = prefix(element.value, element.length);
+        break;
+      case stylisExports.KEYFRAMES:
+        return stylisExports.serialize([stylisExports.copy(element, {
+          value: stylisExports.replace(element.value, '@', '@' + stylisExports.WEBKIT)
+        })], callback);
+      case stylisExports.RULESET:
+        if (element.length) return stylisExports.combine(element.props, function (value) {
+          switch (stylisExports.match(value, /(::plac\w+|:read-\w+)/)) {
+            // :read-(only|write)
+            case ':read-only':
+            case ':read-write':
+              return stylisExports.serialize([stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(read-\w+)/, ':' + stylisExports.MOZ + '$1')]
+              })], callback);
+            // :placeholder
+
+            case '::placeholder':
+              return stylisExports.serialize([stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(plac\w+)/, ':' + stylisExports.WEBKIT + 'input-$1')]
+              }), stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(plac\w+)/, ':' + stylisExports.MOZ + '$1')]
+              }), stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(plac\w+)/, stylisExports.MS + 'input-$1')]
+              })], callback);
+          }
+          return '';
         });
-      });
     }
-    function getNextChildMapping(nextProps, prevChildMapping, onExited) {
-      var nextChildMapping = getChildMapping(nextProps.children);
-      var children = mergeChildMappings(prevChildMapping, nextChildMapping);
-      Object.keys(children).forEach(function (key) {
-        var child = children[key];
-        if (!React.isValidElement(child)) return;
-        var hasPrev = key in prevChildMapping;
-        var hasNext = key in nextChildMapping;
-        var prevChild = prevChildMapping[key];
-        var isLeaving = React.isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)
-
-        if (hasNext && (!hasPrev || isLeaving)) {
-          // console.log('entering', key)
-          children[key] = React.cloneElement(child, {
-            onExited: onExited.bind(null, child),
-            in: true,
-            exit: getProp(child, 'exit', nextProps),
-            enter: getProp(child, 'enter', nextProps)
-          });
-        } else if (!hasNext && hasPrev && !isLeaving) {
-          // item is old (exiting)
-          // console.log('leaving', key)
-          children[key] = React.cloneElement(child, {
-            in: false
-          });
-        } else if (hasNext && hasPrev && React.isValidElement(prevChild)) {
-          // item hasn't changed transition states
-          // copy over the last transition props;
-          // console.log('unchanged', key)
-          children[key] = React.cloneElement(child, {
-            onExited: onExited.bind(null, child),
-            in: prevChild.props.in,
-            exit: getProp(child, 'exit', nextProps),
-            enter: getProp(child, 'enter', nextProps)
-          });
+  };
+  var getServerStylisCache = isBrowser$1 ? undefined : weakMemoize(function () {
+    return memoize(function () {
+      return {};
+    });
+  });
+  var defaultStylisPlugins = [prefixer];
+  var createCache = function createCache(options) {
+    var key = options.key;
+    if (isBrowser$1 && key === 'css') {
+      var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
+      // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
+      // note this very very intentionally targets all style elements regardless of the key to ensure
+      // that creating a cache works inside of render of a React component
+
+      Array.prototype.forEach.call(ssrStyles, function (node) {
+        // we want to only move elements which have a space in the data-emotion attribute value
+        // because that indicates that it is an Emotion 11 server-side rendered style elements
+        // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
+        // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
+        // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
+        // will not result in the Emotion 10 styles being destroyed
+        var dataEmotionAttribute = node.getAttribute('data-emotion');
+        if (dataEmotionAttribute.indexOf(' ') === -1) {
+          return;
         }
+        document.head.appendChild(node);
+        node.setAttribute('data-s', '');
       });
-      return children;
     }
-
-    var values = Object.values || function (obj) {
-      return Object.keys(obj).map(function (k) {
-        return obj[k];
+    var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
+    var inserted = {};
+    var container;
+    var nodesToHydrate = [];
+    if (isBrowser$1) {
+      container = options.container || document.head;
+      Array.prototype.forEach.call(
+      // this means we will ignore elements which don't have a space in them which
+      // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
+      document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
+        var attrib = node.getAttribute("data-emotion").split(' ');
+        for (var i = 1; i < attrib.length; i++) {
+          inserted[attrib[i]] = true;
+        }
+        nodesToHydrate.push(node);
       });
-    };
-    var defaultProps = {
-      component: 'div',
-      childFactory: function childFactory(child) {
-        return child;
-      }
-    };
-    /**
-     * The `<TransitionGroup>` component manages a set of transition components
-     * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
-     * components, `<TransitionGroup>` is a state machine for managing the mounting
-     * and unmounting of components over time.
-     *
-     * Consider the example below. As items are removed or added to the TodoList the
-     * `in` prop is toggled automatically by the `<TransitionGroup>`.
-     *
-     * Note that `<TransitionGroup>`  does not define any animation behavior!
-     * Exactly _how_ a list item animates is up to the individual transition
-     * component. This means you can mix and match animations across different list
-     * items.
-     */
-
-    var TransitionGroup = /*#__PURE__*/function (_React$Component) {
-      _inheritsLoose(TransitionGroup, _React$Component);
-      function TransitionGroup(props, context) {
-        var _this;
-        _this = _React$Component.call(this, props, context) || this;
-        var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear
-
-        _this.state = {
-          contextValue: {
-            isMounting: true
-          },
-          handleExited: handleExited,
-          firstRender: true
-        };
-        return _this;
-      }
-      var _proto = TransitionGroup.prototype;
-      _proto.componentDidMount = function componentDidMount() {
-        this.mounted = true;
-        this.setState({
-          contextValue: {
-            isMounting: false
-          }
-        });
-      };
-      _proto.componentWillUnmount = function componentWillUnmount() {
-        this.mounted = false;
+    }
+    var _insert;
+    var omnipresentPlugins = [compat, removeLabel];
+    if (!getServerStylisCache) {
+      var currentSheet;
+      var finalizingPlugins = [stylisExports.stringify, stylisExports.rulesheet(function (rule) {
+        currentSheet.insert(rule);
+      })];
+      var serializer = stylisExports.middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
+      var stylis = function stylis(styles) {
+        return stylisExports.serialize(stylisExports.compile(styles), serializer);
       };
-      TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
-        var prevChildMapping = _ref.children,
-          handleExited = _ref.handleExited,
-          firstRender = _ref.firstRender;
-        return {
-          children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
-          firstRender: false
-        };
-      } // node is `undefined` when user provided `nodeRef` prop
-      ;
-      _proto.handleExited = function handleExited(child, node) {
-        var currentChildMapping = getChildMapping(this.props.children);
-        if (child.key in currentChildMapping) return;
-        if (child.props.onExited) {
-          child.props.onExited(node);
-        }
-        if (this.mounted) {
-          this.setState(function (state) {
-            var children = _extends({}, state.children);
-            delete children[child.key];
-            return {
-              children: children
-            };
-          });
+      _insert = function insert(selector, serialized, sheet, shouldCache) {
+        currentSheet = sheet;
+        stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+        if (shouldCache) {
+          cache.inserted[serialized.name] = true;
         }
       };
-      _proto.render = function render() {
-        var _this$props = this.props,
-          Component = _this$props.component,
-          childFactory = _this$props.childFactory,
-          props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
-        var contextValue = this.state.contextValue;
-        var children = values(this.state.children).map(childFactory);
-        delete props.appear;
-        delete props.enter;
-        delete props.exit;
-        if (Component === null) {
-          return /*#__PURE__*/React__namespace.default.createElement(TransitionGroupContext.Provider, {
-            value: contextValue
-          }, children);
-        }
-        return /*#__PURE__*/React__namespace.default.createElement(TransitionGroupContext.Provider, {
-          value: contextValue
-        }, /*#__PURE__*/React__namespace.default.createElement(Component, props, children));
+    } else {
+      var _finalizingPlugins = [stylisExports.stringify];
+      var _serializer = stylisExports.middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
+      var _stylis = function _stylis(styles) {
+        return stylisExports.serialize(stylisExports.compile(styles), _serializer);
       };
-      return TransitionGroup;
-    }(React__namespace.default.Component);
-    TransitionGroup.propTypes = {};
-    TransitionGroup.defaultProps = defaultProps;
-
-    /**
-     * The `<ReplaceTransition>` component is a specialized `Transition` component
-     * that animates between two children.
-     *
-     * ```jsx
-     * <ReplaceTransition in>
-     *   <Fade><div>I appear first</div></Fade>
-     *   <Fade><div>I replace the above</div></Fade>
-     * </ReplaceTransition>
-     * ```
-     */
-
-    var ReplaceTransition = /*#__PURE__*/function (_React$Component) {
-      _inheritsLoose(ReplaceTransition, _React$Component);
-      function ReplaceTransition() {
-        var _this;
-        for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
-          _args[_key] = arguments[_key];
+      var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
+      var getRules = function getRules(selector, serialized) {
+        var name = serialized.name;
+        if (serverStylisCache[name] === undefined) {
+          serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
         }
-        _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
-        _this.handleEnter = function () {
-          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-            args[_key2] = arguments[_key2];
-          }
-          return _this.handleLifecycle('onEnter', 0, args);
-        };
-        _this.handleEntering = function () {
-          for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-            args[_key3] = arguments[_key3];
-          }
-          return _this.handleLifecycle('onEntering', 0, args);
-        };
-        _this.handleEntered = function () {
-          for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-            args[_key4] = arguments[_key4];
-          }
-          return _this.handleLifecycle('onEntered', 0, args);
-        };
-        _this.handleExit = function () {
-          for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-            args[_key5] = arguments[_key5];
-          }
-          return _this.handleLifecycle('onExit', 1, args);
-        };
-        _this.handleExiting = function () {
-          for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-            args[_key6] = arguments[_key6];
+        return serverStylisCache[name];
+      };
+      _insert = function _insert(selector, serialized, sheet, shouldCache) {
+        var name = serialized.name;
+        var rules = getRules(selector, serialized);
+        if (cache.compat === undefined) {
+          // in regular mode, we don't set the styles on the inserted cache
+          // since we don't need to and that would be wasting memory
+          // we return them so that they are rendered in a style tag
+          if (shouldCache) {
+            cache.inserted[name] = true;
           }
-          return _this.handleLifecycle('onExiting', 1, args);
-        };
-        _this.handleExited = function () {
-          for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-            args[_key7] = arguments[_key7];
+          return rules;
+        } else {
+          // in compat mode, we put the styles on the inserted cache so
+          // that emotion-server can pull out the styles
+          // except when we don't want to cache it which was in Global but now
+          // is nowhere but we don't want to do a major right now
+          // and just in case we're going to leave the case here
+          // it's also not affecting client side bundle size
+          // so it's really not a big deal
+          if (shouldCache) {
+            cache.inserted[name] = rules;
+          } else {
+            return rules;
           }
-          return _this.handleLifecycle('onExited', 1, args);
-        };
-        return _this;
-      }
-      var _proto = ReplaceTransition.prototype;
-      _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
-        var _child$props;
-        var children = this.props.children;
-        var child = React__namespace.default.Children.toArray(children)[idx];
-        if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
-        if (this.props[handler]) {
-          var maybeNode = child.props.nodeRef ? undefined : ReactDOM__default.default.findDOMNode(this);
-          this.props[handler](maybeNode);
         }
       };
-      _proto.render = function render() {
-        var _this$props = this.props,
-          children = _this$props.children,
-          inProp = _this$props.in,
-          props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);
-        var _React$Children$toArr = React__namespace.default.Children.toArray(children),
-          first = _React$Children$toArr[0],
-          second = _React$Children$toArr[1];
-        delete props.onEnter;
-        delete props.onEntering;
-        delete props.onEntered;
-        delete props.onExit;
-        delete props.onExiting;
-        delete props.onExited;
-        return /*#__PURE__*/React__namespace.default.createElement(TransitionGroup, props, inProp ? React__namespace.default.cloneElement(first, {
-          key: 'first',
-          onEnter: this.handleEnter,
-          onEntering: this.handleEntering,
-          onEntered: this.handleEntered
-        }) : React__namespace.default.cloneElement(second, {
-          key: 'second',
-          onEnter: this.handleExit,
-          onEntering: this.handleExiting,
-          onEntered: this.handleExited
-        }));
-      };
-      return ReplaceTransition;
-    }(React__namespace.default.Component);
-    ReplaceTransition.propTypes = {};
-
-    var _leaveRenders, _enterRenders;
-    function areChildrenDifferent(oldChildren, newChildren) {
-      if (oldChildren === newChildren) return false;
-      if (React__namespace.default.isValidElement(oldChildren) && React__namespace.default.isValidElement(newChildren) && oldChildren.key != null && oldChildren.key === newChildren.key) {
-        return false;
-      }
-      return true;
     }
-    /**
-     * Enum of modes for SwitchTransition component
-     * @enum { string }
-     */
-
-    var modes = {
-      out: 'out-in',
-      in: 'in-out'
-    };
-    var callHook = function callHook(element, name, cb) {
-      return function () {
-        var _element$props;
-        element.props[name] && (_element$props = element.props)[name].apply(_element$props, arguments);
-        cb();
-      };
+    var cache = {
+      key: key,
+      sheet: new StyleSheet({
+        key: key,
+        container: container,
+        nonce: options.nonce,
+        speedy: options.speedy,
+        prepend: options.prepend,
+        insertionPoint: options.insertionPoint
+      }),
+      nonce: options.nonce,
+      inserted: inserted,
+      registered: {},
+      insert: _insert
     };
-    var leaveRenders = (_leaveRenders = {}, _leaveRenders[modes.out] = function (_ref) {
-      var current = _ref.current,
-        changeState = _ref.changeState;
-      return React__namespace.default.cloneElement(current, {
-        in: false,
-        onExited: callHook(current, 'onExited', function () {
-          changeState(ENTERING, null);
-        })
-      });
-    }, _leaveRenders[modes.in] = function (_ref2) {
-      var current = _ref2.current,
-        changeState = _ref2.changeState,
-        children = _ref2.children;
-      return [current, React__namespace.default.cloneElement(children, {
-        in: true,
-        onEntered: callHook(children, 'onEntered', function () {
-          changeState(ENTERING);
-        })
-      })];
-    }, _leaveRenders);
-    var enterRenders = (_enterRenders = {}, _enterRenders[modes.out] = function (_ref3) {
-      var children = _ref3.children,
-        changeState = _ref3.changeState;
-      return React__namespace.default.cloneElement(children, {
-        in: true,
-        onEntered: callHook(children, 'onEntered', function () {
-          changeState(ENTERED, React__namespace.default.cloneElement(children, {
-            in: true
-          }));
-        })
-      });
-    }, _enterRenders[modes.in] = function (_ref4) {
-      var current = _ref4.current,
-        children = _ref4.children,
-        changeState = _ref4.changeState;
-      return [React__namespace.default.cloneElement(current, {
-        in: false,
-        onExited: callHook(current, 'onExited', function () {
-          changeState(ENTERED, React__namespace.default.cloneElement(children, {
-            in: true
-          }));
-        })
-      }), React__namespace.default.cloneElement(children, {
-        in: true
-      })];
-    }, _enterRenders);
-    /**
-     * A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes).
-     * You can use it when you want to control the render between state transitions.
-     * Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them.
-     *
-     * If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child.
-     * If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child.
-     *
-     * **Note**: If you want the animation to happen simultaneously
-     * (that is, to have the old child removed and a new child inserted **at the same time**),
-     * you should use
-     * [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group)
-     * instead.
-     *
-     * ```jsx
-     * function App() {
-     *  const [state, setState] = useState(false);
-     *  return (
-     *    <SwitchTransition>
-     *      <CSSTransition
-     *        key={state ? "Goodbye, world!" : "Hello, world!"}
-     *        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
-     *        classNames='fade'
-     *      >
-     *        <button onClick={() => setState(state => !state)}>
-     *          {state ? "Goodbye, world!" : "Hello, world!"}
-     *        </button>
-     *      </CSSTransition>
-     *    </SwitchTransition>
-     *  );
-     * }
-     * ```
-     *
-     * ```css
-     * .fade-enter{
-     *    opacity: 0;
-     * }
-     * .fade-exit{
-     *    opacity: 1;
-     * }
-     * .fade-enter-active{
-     *    opacity: 1;
-     * }
-     * .fade-exit-active{
-     *    opacity: 0;
-     * }
-     * .fade-enter-active,
-     * .fade-exit-active{
-     *    transition: opacity 500ms;
-     * }
-     * ```
-     */
-
-    var SwitchTransition = /*#__PURE__*/function (_React$Component) {
-      _inheritsLoose(SwitchTransition, _React$Component);
-      function SwitchTransition() {
-        var _this;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-        _this.state = {
-          status: ENTERED,
-          current: null
-        };
-        _this.appeared = false;
-        _this.changeState = function (status, current) {
-          if (current === void 0) {
-            current = _this.state.current;
+    cache.sheet.hydrate(nodesToHydrate);
+    return cache;
+  };
+
+  /* eslint-disable */
+  // Inspired by https://github.com/garycourt/murmurhash-js
+  // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
+  function murmur2(str) {
+    // 'm' and 'r' are mixing constants generated offline.
+    // They're not really 'magic', they just happen to work well.
+    // const m = 0x5bd1e995;
+    // const r = 24;
+    // Initialize the hash
+    var h = 0; // Mix 4 bytes at a time into the hash
+
+    var k,
+      i = 0,
+      len = str.length;
+    for (; len >= 4; ++i, len -= 4) {
+      k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
+      k = /* Math.imul(k, m): */
+      (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
+      k ^= /* k >>> r: */
+      k >>> 24;
+      h = /* Math.imul(k, m): */
+      (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^ /* Math.imul(h, m): */
+      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+    } // Handle the last few bytes of the input array
+
+    switch (len) {
+      case 3:
+        h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+      case 2:
+        h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+      case 1:
+        h ^= str.charCodeAt(i) & 0xff;
+        h = /* Math.imul(h, m): */
+        (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+    } // Do a few final mixes of the hash to ensure the last few
+    // bytes are well-incorporated.
+
+    h ^= h >>> 13;
+    h = /* Math.imul(h, m): */
+    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+    return ((h ^ h >>> 15) >>> 0).toString(36);
+  }
+
+  var unitlessKeys = {
+    animationIterationCount: 1,
+    aspectRatio: 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,
+    scale: 1,
+    tabSize: 1,
+    widows: 1,
+    zIndex: 1,
+    zoom: 1,
+    WebkitLineClamp: 1,
+    // SVG-related properties
+    fillOpacity: 1,
+    floodOpacity: 1,
+    stopOpacity: 1,
+    strokeDasharray: 1,
+    strokeDashoffset: 1,
+    strokeMiterlimit: 1,
+    strokeOpacity: 1,
+    strokeWidth: 1
+  };
+
+  var isDevelopment = false;
+  var hyphenateRegex = /[A-Z]|^ms/g;
+  var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+  var isCustomProperty = function isCustomProperty(property) {
+    return property.charCodeAt(1) === 45;
+  };
+  var isProcessableValue = function isProcessableValue(value) {
+    return value != null && typeof value !== 'boolean';
+  };
+  var processStyleName = /* #__PURE__ */memoize(function (styleName) {
+    return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
+  });
+  var processStyleValue = function processStyleValue(key, value) {
+    switch (key) {
+      case 'animation':
+      case 'animationName':
+        {
+          if (typeof value === 'string') {
+            return value.replace(animationRegex, function (match, p1, p2) {
+              cursor = {
+                name: p1,
+                styles: p2,
+                next: cursor
+              };
+              return p1;
+            });
           }
-          _this.setState({
-            status: status,
-            current: current
-          });
-        };
-        return _this;
-      }
-      var _proto = SwitchTransition.prototype;
-      _proto.componentDidMount = function componentDidMount() {
-        this.appeared = true;
-      };
-      SwitchTransition.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-        if (props.children == null) {
-          return {
-            current: null
-          };
         }
-        if (state.status === ENTERING && props.mode === modes.in) {
-          return {
-            status: ENTERING
-          };
-        }
-        if (state.current && areChildrenDifferent(state.current, props.children)) {
-          return {
-            status: EXITING
-          };
-        }
-        return {
-          current: React__namespace.default.cloneElement(props.children, {
-            in: true
-          })
-        };
-      };
-      _proto.render = function render() {
-        var _this$props = this.props,
-          children = _this$props.children,
-          mode = _this$props.mode,
-          _this$state = this.state,
-          status = _this$state.status,
-          current = _this$state.current;
-        var data = {
-          children: children,
-          current: current,
-          changeState: this.changeState,
-          status: status
-        };
-        var component;
-        switch (status) {
-          case ENTERING:
-            component = enterRenders[mode](data);
-            break;
-          case EXITING:
-            component = leaveRenders[mode](data);
-            break;
-          case ENTERED:
-            component = current;
-        }
-        return /*#__PURE__*/React__namespace.default.createElement(TransitionGroupContext.Provider, {
-          value: {
-            isMounting: !this.appeared
+    }
+    if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+      return value + 'px';
+    }
+    return value;
+  };
+  var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
+  function handleInterpolation(mergedProps, registered, interpolation) {
+    if (interpolation == null) {
+      return '';
+    }
+    var componentSelector = interpolation;
+    if (componentSelector.__emotion_styles !== undefined) {
+      return componentSelector;
+    }
+    switch (typeof interpolation) {
+      case 'boolean':
+        {
+          return '';
+        }
+      case 'object':
+        {
+          var keyframes = interpolation;
+          if (keyframes.anim === 1) {
+            cursor = {
+              name: keyframes.name,
+              styles: keyframes.styles,
+              next: cursor
+            };
+            return keyframes.name;
           }
-        }, component);
-      };
-      return SwitchTransition;
-    }(React__namespace.default.Component);
-    SwitchTransition.propTypes = {};
-    SwitchTransition.defaultProps = {
-      mode: modes.out
-    };
-
-    var styles = {
-      zoom: {
-        entering: {
-          transform: 'none'
-        },
-        entered: {
-          transform: 'none'
-        }
-      },
-      fade: {
-        entering: {
-          opacity: 1
-        },
-        entered: {
-          opacity: 1
-        }
-      },
-      grow: {
-        entering: {
-          opacity: 1,
-          transform: 'scale(1, 1)'
-        },
-        entered: {
-          opacity: 1,
-          transform: 'none'
-        }
-      },
-      slide_fade: {
-        entering: {
-          opacity: 0,
-          transform: 'translateY(4px)'
-        },
-        entered: {
-          opacity: 1,
-          transform: ''
-        },
-        exited: {
-          opacity: 0,
-          transform: 'translateY(4px)'
+          var serializedStyles = interpolation;
+          if (serializedStyles.styles !== undefined) {
+            var next = serializedStyles.next;
+            if (next !== undefined) {
+              // not the most efficient thing ever but this is a pretty rare case
+              // and there will be very few iterations of this generally
+              while (next !== undefined) {
+                cursor = {
+                  name: next.name,
+                  styles: next.styles,
+                  next: cursor
+                };
+                next = next.next;
+              }
+            }
+            var styles = serializedStyles.styles + ";";
+            return styles;
+          }
+          return createStringFromObject(mergedProps, registered, interpolation);
+        }
+      case 'function':
+        {
+          if (mergedProps !== undefined) {
+            var previousCursor = cursor;
+            var result = interpolation(mergedProps);
+            cursor = previousCursor;
+            return handleInterpolation(mergedProps, registered, result);
+          }
+          break;
         }
-      },
-      grow_from_container: {},
-      collapse: {},
-      slide: {}
-    };
-    var defaultTransform = {
-      grow: 'scale(0.75, 0.5625)',
-      zoom: 'scale(0)'
-    };
-    var reflow = function (node) {
-      return node.scrollTop;
-    };
-    function getTransitionProps(props, options) {
-      var _a, _b;
-      var timeout = props.timeout,
-        easing = props.easing,
-        _c = props.style,
-        style = _c === void 0 ? {} : _c;
-      return {
-        duration: (_a = style.transitionDuration) !== null && _a !== void 0 ? _a : typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,
-        easing: (_b = style.transitionTimingFunction) !== null && _b !== void 0 ? _b : typeof easing === 'object' ? easing[options.mode] : easing,
-        delay: style.transitionDelay
-      };
+    } // finalize string values (regular strings and functions interpolated into css calls)
+
+    var asString = interpolation;
+    if (registered == null) {
+      return asString;
     }
-    function getTranslateValue(direction, node, containerRef) {
-      var rect = node.getBoundingClientRect();
-      var containerRect = containerRef && containerRef.getBoundingClientRect();
-      var computedStyle = window.getComputedStyle(node);
-      var transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
-      var offsetX = 0;
-      var offsetY = 0;
-      if (transform && transform !== 'none' && typeof transform === 'string') {
-        var transformValues = transform.split('(')[1].split(')')[0].split(',');
-        offsetX = parseInt(transformValues[4], 10);
-        offsetY = parseInt(transformValues[5], 10);
-      }
-      if (direction === 'left') {
-        if (containerRect) {
-          return "translateX(".concat(containerRect.right + offsetX - rect.left, "px)");
-        }
-        return "translateX(".concat(window.innerWidth + offsetX - rect.left, "px)");
+    var cached = registered[asString];
+    return cached !== undefined ? cached : asString;
+  }
+  function createStringFromObject(mergedProps, registered, obj) {
+    var string = '';
+    if (Array.isArray(obj)) {
+      for (var i = 0; i < obj.length; i++) {
+        string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
       }
-      if (direction === 'right') {
-        if (containerRect) {
-          return "translateX(-".concat(rect.right - containerRect.left - offsetX, "px)");
+    } else {
+      for (var key in obj) {
+        var value = obj[key];
+        if (typeof value !== 'object') {
+          var asString = value;
+          if (registered != null && registered[asString] !== undefined) {
+            string += key + "{" + registered[asString] + "}";
+          } else if (isProcessableValue(asString)) {
+            string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+          }
+        } else {
+          if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {
+            throw new Error(noComponentSelectorMessage);
+          }
+          if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
+            for (var _i = 0; _i < value.length; _i++) {
+              if (isProcessableValue(value[_i])) {
+                string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
+              }
+            }
+          } else {
+            var interpolated = handleInterpolation(mergedProps, registered, value);
+            switch (key) {
+              case 'animation':
+              case 'animationName':
+                {
+                  string += processStyleName(key) + ":" + interpolated + ";";
+                  break;
+                }
+              default:
+                {
+                  string += key + "{" + interpolated + "}";
+                }
+            }
+          }
         }
-        return "translateX(-".concat(rect.left + rect.width - offsetX, "px)");
       }
-      if (direction === 'up') {
-        if (containerRect) {
-          return "translateY(".concat(containerRect.bottom + offsetY - rect.top, "px)");
-        }
-        return "translateY(".concat(window.innerHeight + offsetY - rect.top, "px)");
+    }
+    return string;
+  }
+  var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes
+  // keyframes are stored on the SerializedStyles object as a linked list
+
+  var cursor;
+  function serializeStyles(args, registered, mergedProps) {
+    if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
+      return args[0];
+    }
+    var stringMode = true;
+    var styles = '';
+    cursor = undefined;
+    var strings = args[0];
+    if (strings == null || strings.raw === undefined) {
+      stringMode = false;
+      styles += handleInterpolation(mergedProps, registered, strings);
+    } else {
+      var asTemplateStringsArr = strings;
+      styles += asTemplateStringsArr[0];
+    } // we start at 1 since we've already handled the first arg
+
+    for (var i = 1; i < args.length; i++) {
+      styles += handleInterpolation(mergedProps, registered, args[i]);
+      if (stringMode) {
+        var templateStringsArr = strings;
+        styles += templateStringsArr[i];
       }
-      if (containerRect) {
-        return "translateY(-".concat(rect.top - containerRect.top + rect.height - offsetY, "px)");
+    } // using a global regex with .exec is stateful so lastIndex has to be reset each time
+
+    labelPattern.lastIndex = 0;
+    var identifierName = '';
+    var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+    while ((match = labelPattern.exec(styles)) !== null) {
+      identifierName += '-' + match[1];
+    }
+    var name = murmur2(styles) + identifierName;
+    return {
+      name: name,
+      styles: styles,
+      next: cursor
+    };
+  }
+
+  var isBrowser = typeof document !== 'undefined';
+  function getRegisteredStyles(registered, registeredStyles, classNames) {
+    var rawClassName = '';
+    classNames.split(' ').forEach(function (className) {
+      if (registered[className] !== undefined) {
+        registeredStyles.push(registered[className] + ";");
+      } else if (className) {
+        rawClassName += className + " ";
       }
-      return "translateY(-".concat(rect.top + rect.height - offsetY, "px)");
+    });
+    return rawClassName;
+  }
+  var registerStyles = function registerStyles(cache, serialized, isStringTag) {
+    var className = cache.key + "-" + serialized.name;
+    if (
+    // we only need to add the styles to the registered cache if the
+    // class name could be used further down
+    // the tree but if it's a string tag, we know it won't
+    // so we don't have to add it to registered cache.
+    // this improves memory usage since we can avoid storing the whole style string
+    (isStringTag === false ||
+    // we need to always store it if we're in compat mode and
+    // in node since emotion-server relies on whether a style is in
+    // the registered cache to know whether a style is global or not
+    // also, note that this check will be dead code eliminated in the browser
+    isBrowser === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+      cache.registered[className] = serialized.styles;
     }
-    function setTranslateValue(direction, node, containerRef) {
-      var transform = getTranslateValue(direction, node, containerRef);
-      if (transform) {
-        node.style.webkitTransform = transform;
-        node.style.transform = transform;
+  };
+  var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+    registerStyles(cache, serialized, isStringTag);
+    var className = cache.key + "-" + serialized.name;
+    if (cache.inserted[serialized.name] === undefined) {
+      var stylesForSSR = '';
+      var current = serialized;
+      do {
+        var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
+        if (!isBrowser && maybeStyles !== undefined) {
+          stylesForSSR += maybeStyles;
+        }
+        current = current.next;
+      } while (current !== undefined);
+      if (!isBrowser && stylesForSSR.length !== 0) {
+        return stylesForSSR;
       }
     }
-    function getGrowFromContainerStyles(_a) {
-      var containerRef = _a.containerRef,
-        node = _a.node,
-        transitionProps = _a.transitionProps;
-      var _b = transitionProps !== null && transitionProps !== void 0 ? transitionProps : {},
-        _c = _b.delay,
-        delay = _c === void 0 ? 0 : _c,
-        _d = _b.duration,
-        duration = _d === void 0 ? 300 : _d,
-        _e = _b.easing,
-        easing = _e === void 0 ? '' : _e;
-      requestAnimationFrame(function () {
-        var _a;
-        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) return;
-        var _b = (_a = containerRef.current.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {},
-          width = _b.width,
-          height = _b.height,
-          top = _b.top,
-          left = _b.left;
-        node.style.transition = '';
-        node.style.opacity = '0';
-        var _c = node.getBoundingClientRect(),
-          realHeight = _c.height,
-          realWidth = _c.width;
-        requestAnimationFrame(function () {
-          node.style.transformOrigin = 'top left';
-          node.style.top = top + 'px';
-          node.style.left = left + 'px';
-          node.style.opacity = '0';
-          node.style.height = height + 'px';
-          node.style.width = width + 'px';
-          node.style.transform = 'translate(0, 0)';
-          requestAnimationFrame(function () {
-            node.style.transition = "opacity ".concat(duration / 3, "ms ").concat(delay, "ms ").concat(easing, ", width ").concat(duration, "ms ").concat(delay, "ms ").concat(easing, ", height ").concat(duration, "ms ").concat(delay, "ms ").concat(easing, ", transform ").concat(duration, "ms ").concat(delay, "ms ").concat(easing);
-            node.style.height = realHeight + 'px';
-            node.style.width = realWidth + 'px';
-            node.style.opacity = '1';
-            node.style.transform = "translate(".concat(-left, "px, ").concat(-top, "px)");
-          });
-        });
-      });
+  };
+
+  function insertWithoutScoping(cache, serialized) {
+    if (cache.inserted[serialized.name] === undefined) {
+      return cache.insert('', serialized, cache.sheet, true);
     }
-    function getExitGrowFromContainerStyles(_a) {
-      var containerRef = _a.containerRef,
-        node = _a.node,
-        transitionProps = _a.transitionProps;
-      var _b = transitionProps !== null && transitionProps !== void 0 ? transitionProps : {},
-        _c = _b.delay,
-        delay = _c === void 0 ? 0 : _c,
-        _d = _b.duration,
-        duration = _d === void 0 ? 300 : _d,
-        _e = _b.easing,
-        easing = _e === void 0 ? '' : _e;
-      var resizingTime = 6 * duration / 10;
-      var fadingDelay = 5 * duration / 10;
-      requestAnimationFrame(function () {
-        var _a;
-        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) return;
-        var _b = (_a = containerRef.current.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {},
-          width = _b.width,
-          height = _b.height,
-          top = _b.top,
-          left = _b.left;
-        node.style.transition = "opacity ".concat(duration, "ms ").concat(fadingDelay, "ms ").concat(easing, ", width ").concat(resizingTime, "ms ").concat(delay, "ms ").concat(easing, ", height ").concat(resizingTime, "ms ").concat(delay, "ms ").concat(easing, ", transform ").concat(resizingTime, "ms ").concat(delay, "ms ").concat(easing);
-        node.style.transformOrigin = 'top left';
-        node.style.top = top + 'px';
-        node.style.left = left + 'px';
-        node.style.opacity = '0';
-        node.style.height = height + 'px';
-        node.style.width = width + 'px';
-        node.style.transform = 'translate(0, 0)';
-      });
+  }
+  function merge(registered, css, className) {
+    var registeredStyles = [];
+    var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
+    if (registeredStyles.length < 2) {
+      return className;
     }
-    React__namespace.forwardRef(function (_a, forwardedRef) {
-      var _b = _a.appear,
-        appear = _b === void 0 ? true : _b,
-        inProp = _a.in;
-      _a.css;
-      var style = _a.style,
-        type = _a.type,
-        children = _a.children,
-        timeout = _a.timeout,
-        easing = _a.easing,
-        containerRef = _a.containerRef,
-        _c = _a.slideDirection,
-        slideDirection = _c === void 0 ? 'down' : _c,
-        onEnter = _a.onEnter,
-        onEntered = _a.onEntered,
-        onEntering = _a.onEntering,
-        onExit = _a.onExit,
-        onExited = _a.onExited,
-        onExiting = _a.onExiting,
-        addEndListener = _a.addEndListener,
-        other = __rest(_a, ["appear", "in", "css", "style", "type", "children", "timeout", "easing", "containerRef", "slideDirection", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "addEndListener"]);
-      var theme = ctDesignTheme.useTheme();
-      var defaultTimeout = {
-        enter: theme.transitions.duration.enteringScreen,
-        exit: theme.transitions.duration.leavingScreen
-      };
-      timeout = timeout || defaultTimeout;
-      var nodeRef = React__namespace.useRef(null);
-      var handleRef = useMergeRefs__default.default(nodeRef, children === null || children === void 0 ? void 0 : children.ref, forwardedRef);
-      var normalizedTransitionCallback = function (callback) {
-        return function (maybeIsAppearing) {
-          if (callback) {
-            var node = nodeRef.current;
-            if (maybeIsAppearing === undefined) {
-              callback(node);
+    return rawClassName + css(registeredStyles);
+  }
+  var createEmotion = function createEmotion(options) {
+    var cache = createCache(options);
+    cache.sheet.speedy = function (value) {
+      this.isSpeedy = value;
+    };
+    cache.compat = true;
+    var css = function css() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var serialized = serializeStyles(args, cache.registered, undefined);
+      insertStyles(cache, serialized, false);
+      return cache.key + "-" + serialized.name;
+    };
+    var keyframes = function keyframes() {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      var serialized = serializeStyles(args, cache.registered);
+      var animation = "animation-" + serialized.name;
+      insertWithoutScoping(cache, {
+        name: serialized.name,
+        styles: "@keyframes " + animation + "{" + serialized.styles + "}"
+      });
+      return animation;
+    };
+    var injectGlobal = function injectGlobal() {
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+      var serialized = serializeStyles(args, cache.registered);
+      insertWithoutScoping(cache, serialized);
+    };
+    var cx = function cx() {
+      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+        args[_key4] = arguments[_key4];
+      }
+      return merge(cache.registered, css, classnames(args));
+    };
+    return {
+      css: css,
+      cx: cx,
+      injectGlobal: injectGlobal,
+      keyframes: keyframes,
+      hydrate: function hydrate(ids) {
+        ids.forEach(function (key) {
+          cache.inserted[key] = true;
+        });
+      },
+      flush: function flush() {
+        cache.registered = {};
+        cache.inserted = {};
+        cache.sheet.flush();
+      },
+      sheet: cache.sheet,
+      cache: cache,
+      getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
+      merge: merge.bind(null, cache.registered, css)
+    };
+  };
+  var classnames = function classnames(args) {
+    var cls = '';
+    for (var i = 0; i < args.length; i++) {
+      var arg = args[i];
+      if (arg == null) continue;
+      var toAdd = void 0;
+      switch (typeof arg) {
+        case 'boolean':
+          break;
+        case 'object':
+          {
+            if (Array.isArray(arg)) {
+              toAdd = classnames(arg);
             } else {
-              callback(node, maybeIsAppearing);
+              toAdd = '';
+              for (var k in arg) {
+                if (arg[k] && k) {
+                  toAdd && (toAdd += ' ');
+                  toAdd += k;
+                }
+              }
             }
+            break;
           }
-        };
-      };
-      var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
-        if (type === 'slide') {
-          setTranslateValue(slideDirection, node, containerRef);
-        }
-        reflow(node);
-        var transitionProps = getTransitionProps({
-          style: style,
-          timeout: timeout,
-          easing: easing
-        }, {
-          mode: 'enter'
-        });
-        if (type === 'fade') {
-          node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
-          node.style.transition = theme.transitions.create('opacity', transitionProps);
-        }
-        if (type === 'slide_fade') {
-          node.style.webkitTransition = [theme.transitions.create('opacity', transitionProps), theme.transitions.create('transform', transitionProps)].join(',');
-          node.style.transition = [theme.transitions.create('opacity', transitionProps), theme.transitions.create('transform', transitionProps)].join(',');
-        }
-        if (type === 'grow_from_container') {
-          getGrowFromContainerStyles({
-            node: node,
-            containerRef: containerRef,
-            transitionProps: transitionProps
-          });
-        }
-        if (type === 'grow') {
-          var duration = void 0;
-          node.style.transition = [theme.transitions.create('opacity', {
-            duration: transitionProps.duration,
-            delay: transitionProps.delay
-          }), theme.transitions.create('transform', {
-            duration: duration,
-            delay: transitionProps.delay,
-            easing: transitionProps.easing
-          })].join(',');
-        }
-        if (type === 'zoom') {
-          node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
-          node.style.transition = theme.transitions.create('transform', transitionProps);
-        }
-        if (onEnter) {
-          onEnter(node, isAppearing);
-        }
-      });
-      var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {
-        if (type === 'slide') {
-          var easingValue = easing || {
-            enter: theme.transitions.easing.easeOut,
-            exit: theme.transitions.easing.sharp
-          };
-          var transitionProps = getTransitionProps({
-            timeout: timeout,
-            style: style,
-            easing: easingValue
-          }, {
-            mode: 'enter'
-          });
-          node.style.webkitTransition = theme.transitions.create('-webkit-transform', __assign({}, transitionProps));
-          node.style.transition = theme.transitions.create('transform', __assign({}, transitionProps));
-          node.style.webkitTransform = '';
-          node.style.transform = '';
-        }
-        if (onEntering) {
-          onEntering(node, isAppearing);
-        }
-      });
-      var handleEntered = normalizedTransitionCallback(onEntered);
-      var handleExiting = normalizedTransitionCallback(onExiting);
-      var handleExit = normalizedTransitionCallback(function (node) {
-        var transitionProps = getTransitionProps({
-          style: style,
-          timeout: timeout,
-          easing: easing
-        }, {
-          mode: 'exit'
-        });
-        if (type == 'fade') {
-          node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
-          node.style.transition = theme.transitions.create('opacity', transitionProps);
-        }
-        if (type === 'slide_fade') {
-          node.style.transition = '';
-          node.style.webkitTransition = '';
-        }
-        if (type === 'grow_from_container') {
-          getExitGrowFromContainerStyles({
-            node: node,
-            containerRef: containerRef,
-            transitionProps: transitionProps
+        default:
+          {
+            toAdd = arg;
+          }
+      }
+      if (toAdd) {
+        cls && (cls += ' ');
+        cls += toAdd;
+      }
+    }
+    return cls;
+  };
+
+  var _createEmotion = createEmotion({
+      key: 'css'
+    }),
+    css = _createEmotion.css;
+
+  const horizontalScrollStyles = css `
+  display: flex;
+  white-space: no-wrap;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  -webkit-tap-highlight-color: transparent;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+
+  &::-webkit-scrollbar {
+    /* WebKit */
+    display: none;
+  }
+`;
+  const HorizontalScroll = react.forwardRef(({ children, styleConfig = {}, onScroll }, forwardRef) => {
+      const { root, childContainer } = styleConfig;
+      const horizontalScrollRef = react.useRef(null);
+      const parentContainerRef = react.useRef(null);
+      const childContainerRef = react.useRef(null);
+      const combinedParentContainerRef = useMergeRefs__default.default(parentContainerRef, forwardRef);
+      const combinedParenAndChildContainerRef = useMergeRefs__default.default(parentContainerRef, childContainerRef);
+      const rootStyles = ctDesignStyleManager.useWebMergeStyles([...(root || []), horizontalScrollStyles], [root]);
+      const handleScroll = (event) => {
+          onScroll === null || onScroll === void 0 ? void 0 : onScroll({
+              nativeEvent: {
+                  contentOffset: { x: event.currentTarget.scrollLeft, y: event.currentTarget.scrollTop },
+                  layoutMeasurement: { height: event.currentTarget.clientHeight, width: event.currentTarget.clientWidth },
+                  contentSize: { height: event.currentTarget.scrollHeight, width: event.currentTarget.scrollWidth },
+              },
           });
-        }
-        if (type === 'grow') {
-          node.style.transition = [theme.transitions.create('opacity', {
-            duration: transitionProps.duration,
-            delay: transitionProps.delay
-          }), theme.transitions.create('transform', {
-            duration: transitionProps.duration,
-            delay: transitionProps.delay,
-            easing: transitionProps.easing
-          })].join(',');
-          node.style.opacity = 0;
-          node.style.transform = 'scale(0.75, 0.5625)';
-        }
-        if (type === 'zoom') {
-          node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
-          node.style.transition = theme.transitions.create('transform', transitionProps);
-        }
-        if (type === 'slide') {
-          node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
-          node.style.transition = theme.transitions.create('transform', transitionProps);
-          setTranslateValue(slideDirection, node, containerRef);
-        }
-        if (onExit) {
-          onExit(node);
-        }
-      });
-      var handleExited = normalizedTransitionCallback(function (node) {
-        if (type === 'slide') {
-          node.style.webkitTransition = '';
-          node.style.transition = '';
-        }
-        if (onExited) {
-          onExited(node);
-        }
-      });
-      var handleAddEndListener = function (next) {
-        if (addEndListener && nodeRef.current) {
-          addEndListener(nodeRef.current, next);
-        }
       };
-      var updatePosition = React__namespace.useCallback(function () {
-        if (nodeRef.current) {
-          setTranslateValue(slideDirection, nodeRef.current, containerRef);
-        }
-      }, [slideDirection, containerRef]);
-      React__namespace.useEffect(function () {
-        if (inProp || slideDirection === 'down' || slideDirection === 'right') {
-          return undefined;
-        }
-        var handleResize = ctDesignCommonUtils.debounce(function () {
-          if (nodeRef.current) {
-            setTranslateValue(slideDirection, nodeRef.current, containerRef);
-          }
-        });
-        window.addEventListener('resize', handleResize);
-        return function () {
-          window.removeEventListener('resize', handleResize);
-        };
-      }, [slideDirection, inProp, containerRef]);
-      React__namespace.useEffect(function () {
-        if (type === 'slide' && !inProp) {
-          updatePosition();
-        }
-      }, [inProp, updatePosition]);
-      return jsxRuntime.jsx(Transition, __assign({
-        appear: appear,
-        in: inProp,
-        nodeRef: nodeRef,
-        onEnter: handleEnter,
-        onEntered: handleEntered,
-        onEntering: handleEntering,
-        onExit: handleExit,
-        onExited: handleExited,
-        onExiting: handleExiting,
-        addEndListener: handleAddEndListener,
-        timeout: timeout
-      }, other, {
-        children: function (state) {
-          var childProp = {
-            style: __assign(__assign(__assign({
-              opacity: (type == 'fade' || type === 'grow') && 0,
-              transform: defaultTransform[type],
-              visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-            }, styles[type][state]), style), children.props.style),
-            ref: handleRef
-          };
-          if (type === 'slide') {
-            childProp = __assign(__assign({}, childProp), children.props);
-          }
-          return React__namespace.cloneElement(children, childProp);
-        }
-      }));
-    });
+      return (jsxRuntime.jsx("div", { ref: horizontalScrollRef, onScroll: handleScroll, children: jsxRuntime.jsx("div", { ref: combinedParentContainerRef, className: rootStyles, children: jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: childContainer }, ref: combinedParenAndChildContainerRef, children: children }) }) }));
+  });
+  HorizontalScroll.displayName = 'HorizontalScroll';
 
-    var HOVER_TYPE;
-    (function (HOVER_TYPE) {
-      HOVER_TYPE["ENTER"] = "ENTER";
-      HOVER_TYPE["LEAVE"] = "LEAVE";
-    })(HOVER_TYPE || (HOVER_TYPE = {}));
-    var ITooltipV2BorderSize;
-    (function (ITooltipV2BorderSize) {
-      ITooltipV2BorderSize["XS"] = "xs";
-      ITooltipV2BorderSize["SM"] = "sm";
-      ITooltipV2BorderSize["MD"] = "md";
-      ITooltipV2BorderSize["LG"] = "lg";
-      ITooltipV2BorderSize["XL"] = "xl";
-    })(ITooltipV2BorderSize || (ITooltipV2BorderSize = {}));
-    var ITooltipV2Position;
-    (function (ITooltipV2Position) {
-      ITooltipV2Position["AUTO"] = "auto";
-      ITooltipV2Position["LEFT"] = "left";
-      ITooltipV2Position["RIGHT"] = "right";
-      ITooltipV2Position["TOP"] = "top";
-      ITooltipV2Position["BOTTOM"] = "bottom";
-    })(ITooltipV2Position || (ITooltipV2Position = {}));
-
-    var FLEX_RIGHT_PRECISION = 5;
-    var HorizontalScroll = React.forwardRef(function (_a, forwardRef) {
-        var children = _a.children, showShadow = _a.showShadow, showArrow = _a.showArrow, className = _a.className, containerClassname = _a.containerClassname, childrenClassname = _a.childrenClassname, shadowWidth = _a.shadowWidth, _b = _a.arrowSize, arrowSize = _b === void 0 ? exports.ARROW_SIZE.MD : _b, shadowGradientStyle = _a.shadowGradientStyle, _c = _a.styleConfig, styleConfig = _c === void 0 ? {} : _c;
-        var _d = shadowWidth || {}, leftShadowWidth = _d.left, rightShadowWidth = _d.right;
-        var theme = ctDesignTheme.useTheme();
-        var childrenContainer = styleConfig.childrenContainer, leftChevron = styleConfig.leftChevron, leftShadowContainer = styleConfig.leftShadowContainer, leftShadowWrapper = styleConfig.leftShadowWrapper, rightChevron = styleConfig.rightChevron, rightShadowContainer = styleConfig.rightShadowContainer, rightShadowWrapper = styleConfig.rightShadowWrapper, root = styleConfig.root, scrollWrapper = styleConfig.scrollWrapper;
-        var _e = React.useState(false), isHovering = _e[0], setIsHovering = _e[1];
-        var _f = React.useState({
-            left: false,
-            right: false,
-        }), shadowDirection = _f[0], setShadowDirection = _f[1];
-        var horizontalScrollRef = React.useRef(null);
-        var parentContainerRef = React.useRef(null);
-        var childContainerRef = React.useRef(null);
-        var combinedParentContainerRef = useMergeRefs__default.default(parentContainerRef, forwardRef);
-        var combinedParenAndChildContainerRef = useMergeRefs__default.default(parentContainerRef, childContainerRef);
-        var updateArrowIcons = function () {
-            if (horizontalScrollRef.current && childContainerRef.current) {
-                var _a = horizontalScrollRef.current.getBoundingClientRect(), horizontalScrollRight = _a.right, horizontalScrollLeft = _a.left;
-                var _b = childContainerRef.current.getBoundingClientRect(), childContainerRight = _b.right, childContainerLeft = _b.left;
-                if (childContainerLeft - horizontalScrollLeft < -FLEX_RIGHT_PRECISION) {
-                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { left: true })); });
-                }
-                else {
-                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { left: false })); });
-                }
-                if (childContainerRight - horizontalScrollRight > FLEX_RIGHT_PRECISION) {
-                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { right: true })); });
-                }
-                else {
-                    setShadowDirection(function (prevState) { return (__assign(__assign({}, prevState), { right: false })); });
-                }
-            }
-        };
-        React.useEffect(function () {
-            var _a;
-            setTimeout(updateArrowIcons, 200);
-            var callback = ctDesignCommonUtils.debounce(updateArrowIcons, 200);
-            (_a = parentContainerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', callback);
-            return function () {
-                var _a;
-                (_a = parentContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', callback);
-            };
-        }, []);
-        var onHover = React.useCallback(function (type) { return function () {
-            if (type === HOVER_TYPE.ENTER) {
-                setIsHovering(true);
-            }
-            else {
-                setIsHovering(false);
-            }
-        }; }, []);
-        var onArrowClick = function (arrowDirection) { return function () {
-            if (parentContainerRef.current && horizontalScrollRef.current) {
-                var parentContainerElement = parentContainerRef.current;
-                var horizontalScrollWidth = horizontalScrollRef.current.getBoundingClientRect().width;
-                if (arrowDirection === exports.ARROW_DIRECTION.RIGHT) {
-                    parentContainerElement.scrollLeft = parentContainerElement.scrollLeft + horizontalScrollWidth / 2;
-                }
-                else {
-                    parentContainerElement.scrollLeft = parentContainerElement.scrollLeft - horizontalScrollWidth / 2;
-                }
-            }
-        }; };
-        var arrowDimension = React.useMemo(function () {
-            switch (arrowSize) {
-                case exports.ARROW_SIZE.SM: {
-                    return theme.size[6];
-                }
-                case exports.ARROW_SIZE.MD: {
-                    return theme.size[6];
-                }
-                case exports.ARROW_SIZE.LG: {
-                    return theme.size[10];
-                }
-                default: {
-                    return theme.size[6];
-                }
-            }
-        }, [arrowSize]);
-        return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ position: 'relative', onMouseEnter: onHover(HOVER_TYPE.ENTER), onMouseLeave: onHover(HOVER_TYPE.LEAVE), className: containerClassname, ref: horizontalScrollRef }, root, { children: [showShadow && shadowDirection.left && (jsxRuntime.jsx(StyledLeftShadow, __assign({ width: leftShadowWidth, shadowGradientStyle: shadowGradientStyle }, leftShadowWrapper, { children: showArrow && isHovering && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', paddingLeft: theme.spacing[4], onClick: onArrowClick(exports.ARROW_DIRECTION.LEFT) }, leftShadowContainer, { children: jsxRuntime.jsx(ctDesignIcons.LeftChevronWithBoundingBox, __assign({ height: arrowDimension, width: arrowDimension }, leftChevron)) }))) }))), jsxRuntime.jsx(StyledHorizontalScroll, __assign({ ref: combinedParentContainerRef, className: (scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.className) || className, css: scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.css }, { children: jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: (childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.className) || childrenClassname, ref: combinedParenAndChildContainerRef, css: childrenContainer === null || childrenContainer === void 0 ? void 0 : childrenContainer.css, display: 'flex' }, { children: children })) })), showShadow && shadowDirection.right && (jsxRuntime.jsx(StyledRightShadow, __assign({ width: rightShadowWidth, shadowGradientStyle: shadowGradientStyle }, rightShadowWrapper, { children: showArrow && isHovering && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', paddingRight: theme.spacing[4], onClick: onArrowClick(exports.ARROW_DIRECTION.RIGHT) }, rightShadowContainer, { children: jsxRuntime.jsx(ctDesignIcons.RightChevronWithBoundingBox, __assign({ height: arrowDimension, width: arrowDimension }, rightChevron)) }))) })))] })));
-    });
-    HorizontalScroll.defaultProps = {
-        children: null,
-        className: '',
-    };
+  exports.ARROW_DIRECTION = void 0;
+  (function (ARROW_DIRECTION) {
+      ARROW_DIRECTION["LEFT"] = "LEFT";
+      ARROW_DIRECTION["RIGHT"] = "RIGHT";
+  })(exports.ARROW_DIRECTION || (exports.ARROW_DIRECTION = {}));
+  exports.ARROW_SIZE = void 0;
+  (function (ARROW_SIZE) {
+      ARROW_SIZE["SM"] = "sm";
+      ARROW_SIZE["MD"] = "md";
+      ARROW_SIZE["LG"] = "lg";
+  })(exports.ARROW_SIZE || (exports.ARROW_SIZE = {}));
 
-    exports.HorizontalScroll = HorizontalScroll;
-    exports.StyledHorizontalScroll = StyledHorizontalScroll;
+  exports.HorizontalScroll = HorizontalScroll;
 
 }));
 //# sourceMappingURL=ct-design-horizontal-scroll.umd.js.map