@thecb/components 5.9.0-beta.6 → 5.9.3

package/dist/index.cjs.js

@@ -6,8 +6,6 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var styled = require('styled-components');
-var styled__default = _interopDefault(styled);
 var theme = _interopDefault(require('styled-theming'));
 var reactRouterDom = require('react-router-dom');
 var reactDom = _interopDefault(require('react-dom'));
@@ -222,6 +220,2717 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element$1=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
+var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
+var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
+var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
+
+var reactIs_production_min = {
+	AsyncMode: AsyncMode,
+	ConcurrentMode: ConcurrentMode,
+	ContextConsumer: ContextConsumer,
+	ContextProvider: ContextProvider,
+	Element: Element$1,
+	ForwardRef: ForwardRef,
+	Fragment: Fragment,
+	Lazy: Lazy,
+	Memo: Memo,
+	Portal: Portal,
+	Profiler: Profiler,
+	StrictMode: StrictMode,
+	Suspense: Suspense,
+	isAsyncMode: isAsyncMode,
+	isConcurrentMode: isConcurrentMode,
+	isContextConsumer: isContextConsumer,
+	isContextProvider: isContextProvider,
+	isElement: isElement,
+	isForwardRef: isForwardRef,
+	isFragment: isFragment,
+	isLazy: isLazy,
+	isMemo: isMemo,
+	isPortal: isPortal,
+	isProfiler: isProfiler,
+	isStrictMode: isStrictMode,
+	isSuspense: isSuspense,
+	isValidElementType: isValidElementType,
+	typeOf: typeOf
+};
+
+var reactIs_development = createCommonjsModule(function (module, exports) {
+
+
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+function isValidElementType(type) {
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+}
+
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    var $$typeof = object.$$typeof;
+
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        var type = object.type;
+
+        switch (type) {
+          case REACT_ASYNC_MODE_TYPE:
+          case REACT_CONCURRENT_MODE_TYPE:
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+            return type;
+
+          default:
+            var $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
+              case REACT_PROVIDER_TYPE:
+                return $$typeofType;
+
+              default:
+                return $$typeof;
+            }
+
+        }
+
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+} // AsyncMode is deprecated along with isAsyncMode
+
+var AsyncMode = REACT_ASYNC_MODE_TYPE;
+var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+var ContextConsumer = REACT_CONTEXT_TYPE;
+var ContextProvider = REACT_PROVIDER_TYPE;
+var Element = REACT_ELEMENT_TYPE;
+var ForwardRef = REACT_FORWARD_REF_TYPE;
+var Fragment = REACT_FRAGMENT_TYPE;
+var Lazy = REACT_LAZY_TYPE;
+var Memo = REACT_MEMO_TYPE;
+var Portal = REACT_PORTAL_TYPE;
+var Profiler = REACT_PROFILER_TYPE;
+var StrictMode = REACT_STRICT_MODE_TYPE;
+var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+function isAsyncMode(object) {
+  {
+    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+    }
+  }
+
+  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+}
+function isConcurrentMode(object) {
+  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+}
+function isContextConsumer(object) {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+function isContextProvider(object) {
+  return typeOf(object) === REACT_PROVIDER_TYPE;
+}
+function isElement(object) {
+  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isForwardRef(object) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+function isFragment(object) {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+function isLazy(object) {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+function isMemo(object) {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+function isPortal(object) {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+function isProfiler(object) {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+function isStrictMode(object) {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+function isSuspense(object) {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+
+exports.AsyncMode = AsyncMode;
+exports.ConcurrentMode = ConcurrentMode;
+exports.ContextConsumer = ContextConsumer;
+exports.ContextProvider = ContextProvider;
+exports.Element = Element;
+exports.ForwardRef = ForwardRef;
+exports.Fragment = Fragment;
+exports.Lazy = Lazy;
+exports.Memo = Memo;
+exports.Portal = Portal;
+exports.Profiler = Profiler;
+exports.StrictMode = StrictMode;
+exports.Suspense = Suspense;
+exports.isAsyncMode = isAsyncMode;
+exports.isConcurrentMode = isConcurrentMode;
+exports.isContextConsumer = isContextConsumer;
+exports.isContextProvider = isContextProvider;
+exports.isElement = isElement;
+exports.isForwardRef = isForwardRef;
+exports.isFragment = isFragment;
+exports.isLazy = isLazy;
+exports.isMemo = isMemo;
+exports.isPortal = isPortal;
+exports.isProfiler = isProfiler;
+exports.isStrictMode = isStrictMode;
+exports.isSuspense = isSuspense;
+exports.isValidElementType = isValidElementType;
+exports.typeOf = typeOf;
+  })();
+}
+});
+var reactIs_development_1 = reactIs_development.AsyncMode;
+var reactIs_development_2 = reactIs_development.ConcurrentMode;
+var reactIs_development_3 = reactIs_development.ContextConsumer;
+var reactIs_development_4 = reactIs_development.ContextProvider;
+var reactIs_development_5 = reactIs_development.Element;
+var reactIs_development_6 = reactIs_development.ForwardRef;
+var reactIs_development_7 = reactIs_development.Fragment;
+var reactIs_development_8 = reactIs_development.Lazy;
+var reactIs_development_9 = reactIs_development.Memo;
+var reactIs_development_10 = reactIs_development.Portal;
+var reactIs_development_11 = reactIs_development.Profiler;
+var reactIs_development_12 = reactIs_development.StrictMode;
+var reactIs_development_13 = reactIs_development.Suspense;
+var reactIs_development_14 = reactIs_development.isAsyncMode;
+var reactIs_development_15 = reactIs_development.isConcurrentMode;
+var reactIs_development_16 = reactIs_development.isContextConsumer;
+var reactIs_development_17 = reactIs_development.isContextProvider;
+var reactIs_development_18 = reactIs_development.isElement;
+var reactIs_development_19 = reactIs_development.isForwardRef;
+var reactIs_development_20 = reactIs_development.isFragment;
+var reactIs_development_21 = reactIs_development.isLazy;
+var reactIs_development_22 = reactIs_development.isMemo;
+var reactIs_development_23 = reactIs_development.isPortal;
+var reactIs_development_24 = reactIs_development.isProfiler;
+var reactIs_development_25 = reactIs_development.isStrictMode;
+var reactIs_development_26 = reactIs_development.isSuspense;
+var reactIs_development_27 = reactIs_development.isValidElementType;
+var reactIs_development_28 = reactIs_development.typeOf;
+
+var reactIs = createCommonjsModule(function (module) {
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = reactIs_production_min;
+} else {
+  module.exports = reactIs_development;
+}
+});
+var reactIs_1 = reactIs.AsyncMode;
+var reactIs_2 = reactIs.ConcurrentMode;
+var reactIs_3 = reactIs.ContextConsumer;
+var reactIs_4 = reactIs.ContextProvider;
+var reactIs_5 = reactIs.Element;
+var reactIs_6 = reactIs.ForwardRef;
+var reactIs_7 = reactIs.Fragment;
+var reactIs_8 = reactIs.Lazy;
+var reactIs_9 = reactIs.Memo;
+var reactIs_10 = reactIs.Portal;
+var reactIs_11 = reactIs.Profiler;
+var reactIs_12 = reactIs.StrictMode;
+var reactIs_13 = reactIs.Suspense;
+var reactIs_14 = reactIs.isAsyncMode;
+var reactIs_15 = reactIs.isConcurrentMode;
+var reactIs_16 = reactIs.isContextConsumer;
+var reactIs_17 = reactIs.isContextProvider;
+var reactIs_18 = reactIs.isElement;
+var reactIs_19 = reactIs.isForwardRef;
+var reactIs_20 = reactIs.isFragment;
+var reactIs_21 = reactIs.isLazy;
+var reactIs_22 = reactIs.isMemo;
+var reactIs_23 = reactIs.isPortal;
+var reactIs_24 = reactIs.isProfiler;
+var reactIs_25 = reactIs.isStrictMode;
+var reactIs_26 = reactIs.isSuspense;
+var reactIs_27 = reactIs.isValidElementType;
+var reactIs_28 = reactIs.typeOf;
+
+function stylis_min (W) {
+  function M(d, c, e, h, a) {
+    for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
+      g = e.charCodeAt(l);
+      l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);
+
+      if (0 === b + n + v + m) {
+        if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
+          switch (g) {
+            case 32:
+            case 9:
+            case 59:
+            case 13:
+            case 10:
+              break;
+
+            default:
+              f += e.charAt(l);
+          }
+
+          g = 59;
+        }
+
+        switch (g) {
+          case 123:
+            f = f.trim();
+            q = f.charCodeAt(0);
+            k = 1;
+
+            for (t = ++l; l < B;) {
+              switch (g = e.charCodeAt(l)) {
+                case 123:
+                  k++;
+                  break;
+
+                case 125:
+                  k--;
+                  break;
+
+                case 47:
+                  switch (g = e.charCodeAt(l + 1)) {
+                    case 42:
+                    case 47:
+                      a: {
+                        for (u = l + 1; u < J; ++u) {
+                          switch (e.charCodeAt(u)) {
+                            case 47:
+                              if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {
+                                l = u + 1;
+                                break a;
+                              }
+
+                              break;
+
+                            case 10:
+                              if (47 === g) {
+                                l = u + 1;
+                                break a;
+                              }
+
+                          }
+                        }
+
+                        l = u;
+                      }
+
+                  }
+
+                  break;
+
+                case 91:
+                  g++;
+
+                case 40:
+                  g++;
+
+                case 34:
+                case 39:
+                  for (; l++ < J && e.charCodeAt(l) !== g;) {
+                  }
+
+              }
+
+              if (0 === k) break;
+              l++;
+            }
+
+            k = e.substring(t, l);
+            0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));
+
+            switch (q) {
+              case 64:
+                0 < r && (f = f.replace(N, ''));
+                g = f.charCodeAt(1);
+
+                switch (g) {
+                  case 100:
+                  case 109:
+                  case 115:
+                  case 45:
+                    r = c;
+                    break;
+
+                  default:
+                    r = O;
+                }
+
+                k = M(c, r, k, g, a + 1);
+                t = k.length;
+                0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));
+                if (0 < t) switch (g) {
+                  case 115:
+                    f = f.replace(da, ea);
+
+                  case 100:
+                  case 109:
+                  case 45:
+                    k = f + '{' + k + '}';
+                    break;
+
+                  case 107:
+                    f = f.replace(fa, '$1 $2');
+                    k = f + '{' + k + '}';
+                    k = 1 === w || 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;
+                    break;
+
+                  default:
+                    k = f + k, 112 === h && (k = (p += k, ''));
+                } else k = '';
+                break;
+
+              default:
+                k = M(c, X(c, f, I), k, h, a + 1);
+            }
+
+            F += k;
+            k = I = r = u = q = 0;
+            f = '';
+            g = e.charCodeAt(++l);
+            break;
+
+          case 125:
+          case 59:
+            f = (0 < r ? f.replace(N, '') : f).trim();
+            if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q || 96 < q && 123 > q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\x00\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {
+              case 0:
+                break;
+
+              case 64:
+                if (105 === g || 99 === g) {
+                  G += f + e.charAt(l);
+                  break;
+                }
+
+              default:
+                58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));
+            }
+            I = r = u = q = 0;
+            f = '';
+            g = e.charCodeAt(++l);
+        }
+      }
+
+      switch (g) {
+        case 13:
+        case 10:
+          47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00');
+          0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);
+          z = 1;
+          D++;
+          break;
+
+        case 59:
+        case 125:
+          if (0 === b + n + v + m) {
+            z++;
+            break;
+          }
+
+        default:
+          z++;
+          y = e.charAt(l);
+
+          switch (g) {
+            case 9:
+            case 32:
+              if (0 === n + m + b) switch (x) {
+                case 44:
+                case 58:
+                case 9:
+                case 32:
+                  y = '';
+                  break;
+
+                default:
+                  32 !== g && (y = ' ');
+              }
+              break;
+
+            case 0:
+              y = '\\0';
+              break;
+
+            case 12:
+              y = '\\f';
+              break;
+
+            case 11:
+              y = '\\v';
+              break;
+
+            case 38:
+              0 === n + b + m && (r = I = 1, y = '\f' + y);
+              break;
+
+            case 108:
+              if (0 === n + b + m + E && 0 < u) switch (l - u) {
+                case 2:
+                  112 === x && 58 === e.charCodeAt(l - 3) && (E = x);
+
+                case 8:
+                  111 === K && (E = K);
+              }
+              break;
+
+            case 58:
+              0 === n + b + m && (u = l);
+              break;
+
+            case 44:
+              0 === b + v + n + m && (r = 1, y += '\r');
+              break;
+
+            case 34:
+            case 39:
+              0 === b && (n = n === g ? 0 : 0 === n ? g : n);
+              break;
+
+            case 91:
+              0 === n + b + v && m++;
+              break;
+
+            case 93:
+              0 === n + b + v && m--;
+              break;
+
+            case 41:
+              0 === n + b + m && v--;
+              break;
+
+            case 40:
+              if (0 === n + b + m) {
+                if (0 === q) switch (2 * x + 3 * K) {
+                  case 533:
+                    break;
+
+                  default:
+                    q = 1;
+                }
+                v++;
+              }
+
+              break;
+
+            case 64:
+              0 === b + v + n + m + u + k && (k = 1);
+              break;
+
+            case 42:
+            case 47:
+              if (!(0 < n + m + v)) switch (b) {
+                case 0:
+                  switch (2 * g + 3 * e.charCodeAt(l + 1)) {
+                    case 235:
+                      b = 47;
+                      break;
+
+                    case 220:
+                      t = l, b = 42;
+                  }
+
+                  break;
+
+                case 42:
+                  47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);
+              }
+          }
+
+          0 === b && (f += y);
+      }
+
+      K = x;
+      x = g;
+      l++;
+    }
+
+    t = p.length;
+
+    if (0 < t) {
+      r = c;
+      if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;
+      p = r.join(',') + '{' + p + '}';
+
+      if (0 !== w * E) {
+        2 !== w || L(p, 2) || (E = 0);
+
+        switch (E) {
+          case 111:
+            p = p.replace(ha, ':-moz-$1') + p;
+            break;
+
+          case 112:
+            p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;
+        }
+
+        E = 0;
+      }
+    }
+
+    return G + p + F;
+  }
+
+  function X(d, c, e) {
+    var h = c.trim().split(ia);
+    c = h;
+    var a = h.length,
+        m = d.length;
+
+    switch (m) {
+      case 0:
+      case 1:
+        var b = 0;
+
+        for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
+          c[b] = Z(d, c[b], e).trim();
+        }
+
+        break;
+
+      default:
+        var v = b = 0;
+
+        for (c = []; b < a; ++b) {
+          for (var n = 0; n < m; ++n) {
+            c[v++] = Z(d[n] + ' ', h[b], e).trim();
+          }
+        }
+
+    }
+
+    return c;
+  }
+
+  function Z(d, c, e) {
+    var h = c.charCodeAt(0);
+    33 > h && (h = (c = c.trim()).charCodeAt(0));
+
+    switch (h) {
+      case 38:
+        return c.replace(F, '$1' + d.trim());
+
+      case 58:
+        return d.trim() + c.replace(F, '$1' + d.trim());
+
+      default:
+        if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());
+    }
+
+    return d + c;
+  }
+
+  function P(d, c, e, h) {
+    var a = d + ';',
+        m = 2 * c + 3 * e + 4 * h;
+
+    if (944 === m) {
+      d = a.indexOf(':', 9) + 1;
+      var b = a.substring(d, a.length - 1).trim();
+      b = a.substring(0, d).trim() + b + ';';
+      return 1 === w || 2 === w && L(b, 1) ? '-webkit-' + b + b : b;
+    }
+
+    if (0 === w || 2 === w && !L(a, 1)) return a;
+
+    switch (m) {
+      case 1015:
+        return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;
+
+      case 951:
+        return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;
+
+      case 963:
+        return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;
+
+      case 1009:
+        if (100 !== a.charCodeAt(4)) break;
+
+      case 969:
+      case 942:
+        return '-webkit-' + a + a;
+
+      case 978:
+        return '-webkit-' + a + '-moz-' + a + a;
+
+      case 1019:
+      case 983:
+        return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;
+
+      case 883:
+        if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;
+        if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;
+        break;
+
+      case 932:
+        if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {
+          case 103:
+            return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;
+
+          case 115:
+            return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;
+
+          case 98:
+            return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;
+        }
+        return '-webkit-' + a + '-ms-' + a + a;
+
+      case 964:
+        return '-webkit-' + a + '-ms-flex-' + a + a;
+
+      case 1023:
+        if (99 !== a.charCodeAt(8)) break;
+        b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');
+        return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;
+
+      case 1005:
+        return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;
+
+      case 1e3:
+        b = a.substring(13).trim();
+        c = b.indexOf('-') + 1;
+
+        switch (b.charCodeAt(0) + b.charCodeAt(c)) {
+          case 226:
+            b = a.replace(G, 'tb');
+            break;
+
+          case 232:
+            b = a.replace(G, 'tb-rl');
+            break;
+
+          case 220:
+            b = a.replace(G, 'lr');
+            break;
+
+          default:
+            return a;
+        }
+
+        return '-webkit-' + a + '-ms-' + b + a;
+
+      case 1017:
+        if (-1 === a.indexOf('sticky', 9)) break;
+
+      case 975:
+        c = (a = d).length - 10;
+        b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();
+
+        switch (m = b.charCodeAt(0) + (b.charCodeAt(7) | 0)) {
+          case 203:
+            if (111 > b.charCodeAt(8)) break;
+
+          case 115:
+            a = a.replace(b, '-webkit-' + b) + ';' + a;
+            break;
+
+          case 207:
+          case 102:
+            a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;
+        }
+
+        return a + ';';
+
+      case 938:
+        if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {
+          case 105:
+            return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;
+
+          case 115:
+            return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;
+
+          default:
+            return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;
+        }
+        break;
+
+      case 973:
+      case 989:
+        if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break;
+
+      case 931:
+      case 953:
+        if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;
+        break;
+
+      case 962:
+        if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;
+    }
+
+    return a;
+  }
+
+  function L(d, c) {
+    var e = d.indexOf(1 === c ? ':' : '{'),
+        h = d.substring(0, 3 !== c ? e : 10);
+    e = d.substring(e + 1, d.length - 1);
+    return R(2 !== c ? h : h.replace(na, '$1'), e, c);
+  }
+
+  function ea(d, c) {
+    var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));
+    return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';
+  }
+
+  function H(d, c, e, h, a, m, b, v, n, q) {
+    for (var g = 0, x = c, w; g < A; ++g) {
+      switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {
+        case void 0:
+        case !1:
+        case !0:
+        case null:
+          break;
+
+        default:
+          x = w;
+      }
+    }
+
+    if (x !== c) return x;
+  }
+
+  function T(d) {
+    switch (d) {
+      case void 0:
+      case null:
+        A = S.length = 0;
+        break;
+
+      default:
+        if ('function' === typeof d) S[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) {
+          T(d[c]);
+        } else Y = !!d | 0;
+    }
+
+    return T;
+  }
+
+  function U(d) {
+    d = d.prefix;
+    void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);
+    return U;
+  }
+
+  function B(d, c) {
+    var e = d;
+    33 > e.charCodeAt(0) && (e = e.trim());
+    V = e;
+    e = [V];
+
+    if (0 < A) {
+      var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);
+      void 0 !== h && 'string' === typeof h && (c = h);
+    }
+
+    var a = M(O, e, c, 0, 0);
+    0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));
+    V = '';
+    E = 0;
+    z = D = 1;
+    return a;
+  }
+
+  var ca = /^\0+/g,
+      N = /[\0\r\f]/g,
+      aa = /: */g,
+      ka = /zoo|gra/,
+      ma = /([,: ])(transform)/g,
+      ia = /,\r+?/g,
+      F = /([\t\r\n ])*\f?&/g,
+      fa = /@(k\w+)\s*(\S*)\s*/,
+      Q = /::(place)/g,
+      ha = /:(read-only)/g,
+      G = /[svh]\w+-[tblr]{2}/,
+      da = /\(\s*(.*)\s*\)/g,
+      oa = /([\s\S]*?);/g,
+      ba = /-self|flex-/g,
+      na = /[^]*?(:[rp][el]a[\w-]+)[^]*/,
+      la = /stretch|:\s*\w+\-(?:conte|avail)/,
+      ja = /([^-])(image-set\()/,
+      z = 1,
+      D = 1,
+      E = 0,
+      w = 1,
+      O = [],
+      S = [],
+      A = 0,
+      R = null,
+      Y = 0,
+      V = '';
+  B.use = T;
+  B.set = U;
+  void 0 !== W && U(W);
+  return B;
+}
+
+var unitlessKeys = {
+  animationIterationCount: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+function memoize(fn) {
+  var cache = {};
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+
+var index = memoize(function (prop) {
+  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
+  /* o */
+  && prop.charCodeAt(1) === 110
+  /* n */
+  && prop.charCodeAt(2) < 91;
+}
+/* Z+1 */
+);
+
+/**
+ * Copyright 2015, Yahoo! Inc.
+ * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
+ */
+var REACT_STATICS = {
+  childContextTypes: true,
+  contextType: true,
+  contextTypes: true,
+  defaultProps: true,
+  displayName: true,
+  getDefaultProps: true,
+  getDerivedStateFromError: true,
+  getDerivedStateFromProps: true,
+  mixins: true,
+  propTypes: true,
+  type: true
+};
+var KNOWN_STATICS = {
+  name: true,
+  length: true,
+  prototype: true,
+  caller: true,
+  callee: true,
+  arguments: true,
+  arity: true
+};
+var FORWARD_REF_STATICS = {
+  '$$typeof': true,
+  render: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true
+};
+var MEMO_STATICS = {
+  '$$typeof': true,
+  compare: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true,
+  type: true
+};
+var TYPE_STATICS = {};
+TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
+
+function getStatics(component) {
+  // React v16.11 and below
+  if (reactIs.isMemo(component)) {
+    return MEMO_STATICS;
+  } // React v16.12 and above
+
+
+  return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
+}
+
+var defineProperty = Object.defineProperty;
+var getOwnPropertyNames = Object.getOwnPropertyNames;
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+var getPrototypeOf = Object.getPrototypeOf;
+var objectPrototype = Object.prototype;
+function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
+  if (typeof sourceComponent !== 'string') {
+    // don't hoist over string (html) components
+    if (objectPrototype) {
+      var inheritedComponent = getPrototypeOf(sourceComponent);
+
+      if (inheritedComponent && inheritedComponent !== objectPrototype) {
+        hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
+      }
+    }
+
+    var keys = getOwnPropertyNames(sourceComponent);
+
+    if (getOwnPropertySymbols) {
+      keys = keys.concat(getOwnPropertySymbols(sourceComponent));
+    }
+
+    var targetStatics = getStatics(targetComponent);
+    var sourceStatics = getStatics(sourceComponent);
+
+    for (var i = 0; i < keys.length; ++i) {
+      var key = keys[i];
+
+      if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
+        var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+
+        try {
+          // Avoid failures from read-only properties
+          defineProperty(targetComponent, key, descriptor);
+        } catch (e) {}
+      }
+    }
+  }
+
+  return targetComponent;
+}
+
+var hoistNonReactStatics_cjs = hoistNonReactStatics;
+
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose$1(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+// 
+var interleave = (function (strings, interpolations) {
+  var result = [strings[0]];
+
+  for (var i = 0, len = interpolations.length; i < len; i += 1) {
+    result.push(interpolations[i], strings[i + 1]);
+  }
+
+  return result;
+});
+
+// 
+var isPlainObject = (function (x) {
+  return x !== null && typeof x === 'object' && (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' && !reactIs_28(x);
+});
+
+// 
+var EMPTY_ARRAY = Object.freeze([]);
+var EMPTY_OBJECT = Object.freeze({});
+
+// 
+function isFunction(test) {
+  return typeof test === 'function';
+}
+
+// 
+function getComponentName(target) {
+  return (process.env.NODE_ENV !== 'production' ? typeof target === 'string' && target : false) || // $FlowFixMe
+  target.displayName || // $FlowFixMe
+  target.name || 'Component';
+}
+
+// 
+function isStatelessFunction(test) {
+  return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);
+}
+
+// 
+function isStyledComponent(target) {
+  return target && typeof target.styledComponentId === 'string';
+}
+
+// 
+var SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
+var SC_ATTR_ACTIVE = 'active';
+var SC_ATTR_VERSION = 'data-styled-version';
+var SC_VERSION = "5.1.1";
+var SPLITTER = '/*!sc*/\n';
+var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
+var DISABLE_SPEEDY = typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY || typeof process !== 'undefined' && (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY) || process.env.NODE_ENV !== 'production'; // Shared empty execution context when generating static styles
+
+// 
+
+/* eslint-disable camelcase, no-undef */
+var getNonce = function getNonce() {
+  return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
+};
+
+var errorMap = {
+  "1": "Cannot create styled-component for component: %s.\n\n",
+  "2": "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",
+  "3": "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",
+  "4": "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",
+  "5": "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",
+  "6": "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",
+  "7": "ThemeProvider: Please return an object from your \"theme\" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n",
+  "8": "ThemeProvider: Please make your \"theme\" prop an object.\n\n",
+  "9": "Missing document `<head>`\n\n",
+  "10": "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
+  "11": "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
+  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
+  "13": "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",
+  "14": "ThemeProvider: \"theme\" prop is required.\n\n",
+  "15": "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",
+  "16": "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",
+  "17": "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"
+};
+
+// 
+var ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};
+/**
+ * super basic version of sprintf
+ */
+
+function format() {
+  var a = arguments.length <= 0 ? undefined : arguments[0];
+  var b = [];
+
+  for (var c = 1, len = arguments.length; c < len; c += 1) {
+    b.push(c < 0 || arguments.length <= c ? undefined : arguments[c]);
+  }
+
+  b.forEach(function (d) {
+    a = a.replace(/%[a-z]/, d);
+  });
+  return a;
+}
+/**
+ * Create an error file out of errors.md for development and a simple web link to the full errors
+ * in production mode.
+ */
+
+
+function throwStyledComponentsError(code) {
+  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    interpolations[_key - 1] = arguments[_key];
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    throw new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/utils/errors.md#" + code + " for more information." + (interpolations.length > 0 ? " Additional arguments: " + interpolations.join(', ') : ''));
+  } else {
+    throw new Error(format.apply(void 0, [ERRORS[code]].concat(interpolations)).trim());
+  }
+}
+
+// 
+var ELEMENT_TYPE = 1;
+/* Node.ELEMENT_TYPE */
+
+/** Find last style element if any inside target */
+
+var findLastStyleTag = function findLastStyleTag(target) {
+  var childNodes = target.childNodes;
+
+  for (var i = childNodes.length; i >= 0; i--) {
+    var child = childNodes[i];
+
+    if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {
+      return child;
+    }
+  }
+
+  return undefined;
+};
+/** Create a style element inside `target` or <head> after the last */
+
+
+var makeStyleTag = function makeStyleTag(target) {
+  var head = document.head;
+  var parent = target || head;
+  var style = document.createElement('style');
+  var prevStyle = findLastStyleTag(parent);
+  var nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;
+  style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);
+  style.setAttribute(SC_ATTR_VERSION, SC_VERSION);
+  var nonce = getNonce();
+  if (nonce) style.setAttribute('nonce', nonce);
+  parent.insertBefore(style, nextSibling);
+  return style;
+};
+/** Get the CSSStyleSheet instance for a given style element */
+
+var getSheet = function getSheet(tag) {
+  if (tag.sheet) {
+    return tag.sheet;
+  } // Avoid Firefox quirk where the style element might not have a sheet property
+
+
+  var _document = document,
+      styleSheets = _document.styleSheets;
+
+  for (var i = 0, l = styleSheets.length; i < l; i++) {
+    var sheet = styleSheets[i];
+
+    if (sheet.ownerNode === tag) {
+      return sheet;
+    }
+  }
+
+  throwStyledComponentsError(17);
+  return undefined;
+};
+
+// 
+/** Create a CSSStyleSheet-like tag depending on the environment */
+
+var makeTag = function makeTag(_ref) {
+  var isServer = _ref.isServer,
+      useCSSOMInjection = _ref.useCSSOMInjection,
+      target = _ref.target;
+
+  if (isServer) {
+    return new VirtualTag(target);
+  } else if (useCSSOMInjection) {
+    return new CSSOMTag(target);
+  } else {
+    return new TextTag(target);
+  }
+};
+var CSSOMTag = /*#__PURE__*/function () {
+  function CSSOMTag(target) {
+    var element = this.element = makeStyleTag(target); // Avoid Edge bug where empty style elements don't create sheets
+
+    element.appendChild(document.createTextNode(''));
+    this.sheet = getSheet(element);
+    this.length = 0;
+  }
+
+  var _proto = CSSOMTag.prototype;
+
+  _proto.insertRule = function insertRule(index, rule) {
+    try {
+      this.sheet.insertRule(rule, index);
+      this.length++;
+      return true;
+    } catch (_error) {
+      return false;
+    }
+  };
+
+  _proto.deleteRule = function deleteRule(index) {
+    this.sheet.deleteRule(index);
+    this.length--;
+  };
+
+  _proto.getRule = function getRule(index) {
+    var rule = this.sheet.cssRules[index]; // Avoid IE11 quirk where cssText is inaccessible on some invalid rules
+
+    if (rule !== undefined && typeof rule.cssText === 'string') {
+      return rule.cssText;
+    } else {
+      return '';
+    }
+  };
+
+  return CSSOMTag;
+}();
+/** A Tag that emulates the CSSStyleSheet API but uses text nodes */
+
+var TextTag = /*#__PURE__*/function () {
+  function TextTag(target) {
+    var element = this.element = makeStyleTag(target);
+    this.nodes = element.childNodes;
+    this.length = 0;
+  }
+
+  var _proto2 = TextTag.prototype;
+
+  _proto2.insertRule = function insertRule(index, rule) {
+    if (index <= this.length && index >= 0) {
+      var node = document.createTextNode(rule);
+      var refNode = this.nodes[index];
+      this.element.insertBefore(node, refNode || null);
+      this.length++;
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  _proto2.deleteRule = function deleteRule(index) {
+    this.element.removeChild(this.nodes[index]);
+    this.length--;
+  };
+
+  _proto2.getRule = function getRule(index) {
+    if (index < this.length) {
+      return this.nodes[index].textContent;
+    } else {
+      return '';
+    }
+  };
+
+  return TextTag;
+}();
+/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */
+
+var VirtualTag = /*#__PURE__*/function () {
+  function VirtualTag(_target) {
+    this.rules = [];
+    this.length = 0;
+  }
+
+  var _proto3 = VirtualTag.prototype;
+
+  _proto3.insertRule = function insertRule(index, rule) {
+    if (index <= this.length) {
+      this.rules.splice(index, 0, rule);
+      this.length++;
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  _proto3.deleteRule = function deleteRule(index) {
+    this.rules.splice(index, 1);
+    this.length--;
+  };
+
+  _proto3.getRule = function getRule(index) {
+    if (index < this.length) {
+      return this.rules[index];
+    } else {
+      return '';
+    }
+  };
+
+  return VirtualTag;
+}();
+
+// 
+/** Create a GroupedTag with an underlying Tag implementation */
+
+var makeGroupedTag = function makeGroupedTag(tag) {
+  return new DefaultGroupedTag(tag);
+};
+var BASE_SIZE = 1 << 9;
+
+var DefaultGroupedTag = /*#__PURE__*/function () {
+  function DefaultGroupedTag(tag) {
+    this.groupSizes = new Uint32Array(BASE_SIZE);
+    this.length = BASE_SIZE;
+    this.tag = tag;
+  }
+
+  var _proto = DefaultGroupedTag.prototype;
+
+  _proto.indexOfGroup = function indexOfGroup(group) {
+    var index = 0;
+
+    for (var i = 0; i < group; i++) {
+      index += this.groupSizes[i];
+    }
+
+    return index;
+  };
+
+  _proto.insertRules = function insertRules(group, rules) {
+    if (group >= this.groupSizes.length) {
+      var oldBuffer = this.groupSizes;
+      var oldSize = oldBuffer.length;
+      var newSize = oldSize;
+
+      while (group >= newSize) {
+        newSize <<= 1;
+
+        if (newSize < 0) {
+          throwStyledComponentsError(16, "" + group);
+        }
+      }
+
+      this.groupSizes = new Uint32Array(newSize);
+      this.groupSizes.set(oldBuffer);
+      this.length = newSize;
+
+      for (var i = oldSize; i < newSize; i++) {
+        this.groupSizes[i] = 0;
+      }
+    }
+
+    var ruleIndex = this.indexOfGroup(group + 1);
+
+    for (var _i = 0, l = rules.length; _i < l; _i++) {
+      if (this.tag.insertRule(ruleIndex, rules[_i])) {
+        this.groupSizes[group]++;
+        ruleIndex++;
+      }
+    }
+  };
+
+  _proto.clearGroup = function clearGroup(group) {
+    if (group < this.length) {
+      var length = this.groupSizes[group];
+      var startIndex = this.indexOfGroup(group);
+      var endIndex = startIndex + length;
+      this.groupSizes[group] = 0;
+
+      for (var i = startIndex; i < endIndex; i++) {
+        this.tag.deleteRule(startIndex);
+      }
+    }
+  };
+
+  _proto.getGroup = function getGroup(group) {
+    var css = '';
+
+    if (group >= this.length || this.groupSizes[group] === 0) {
+      return css;
+    }
+
+    var length = this.groupSizes[group];
+    var startIndex = this.indexOfGroup(group);
+    var endIndex = startIndex + length;
+
+    for (var i = startIndex; i < endIndex; i++) {
+      css += "" + this.tag.getRule(i) + SPLITTER;
+    }
+
+    return css;
+  };
+
+  return DefaultGroupedTag;
+}();
+
+// 
+var MAX_SMI = 1 << 31 - 1;
+var groupIDRegister = new Map();
+var reverseRegister = new Map();
+var nextFreeGroup = 1;
+var getGroupForId = function getGroupForId(id) {
+  if (groupIDRegister.has(id)) {
+    return groupIDRegister.get(id);
+  }
+
+  var group = nextFreeGroup++;
+
+  if (process.env.NODE_ENV !== 'production' && ((group | 0) < 0 || group > MAX_SMI)) {
+    throwStyledComponentsError(16, "" + group);
+  }
+
+  groupIDRegister.set(id, group);
+  reverseRegister.set(group, id);
+  return group;
+};
+var getIdForGroup = function getIdForGroup(group) {
+  return reverseRegister.get(group);
+};
+var setGroupForId = function setGroupForId(id, group) {
+  if (group >= nextFreeGroup) {
+    nextFreeGroup = group + 1;
+  }
+
+  groupIDRegister.set(id, group);
+  reverseRegister.set(group, id);
+};
+
+// 
+var SELECTOR = "style[" + SC_ATTR + "][" + SC_ATTR_VERSION + "=\"" + SC_VERSION + "\"]";
+var MARKER_RE = new RegExp("^" + SC_ATTR + "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)");
+var outputSheet = function outputSheet(sheet) {
+  var tag = sheet.getTag();
+  var length = tag.length;
+  var css = '';
+
+  for (var group = 0; group < length; group++) {
+    var id = getIdForGroup(group);
+    if (id === undefined) continue;
+    var names = sheet.names.get(id);
+    var rules = tag.getGroup(group);
+    if (names === undefined || rules.length === 0) continue;
+    var selector = SC_ATTR + ".g" + group + "[id=\"" + id + "\"]";
+    var content = '';
+
+    if (names !== undefined) {
+      names.forEach(function (name) {
+        if (name.length > 0) {
+          content += name + ",";
+        }
+      });
+    } // NOTE: It's easier to collect rules and have the marker
+    // after the actual rules to simplify the rehydration
+
+
+    css += "" + rules + selector + "{content:\"" + content + "\"}" + SPLITTER;
+  }
+
+  return css;
+};
+
+var rehydrateNamesFromContent = function rehydrateNamesFromContent(sheet, id, content) {
+  var names = content.split(',');
+  var name;
+
+  for (var i = 0, l = names.length; i < l; i++) {
+    // eslint-disable-next-line
+    if (name = names[i]) {
+      sheet.registerName(id, name);
+    }
+  }
+};
+
+var rehydrateSheetFromTag = function rehydrateSheetFromTag(sheet, style) {
+  var parts = style.innerHTML.split(SPLITTER);
+  var rules = [];
+
+  for (var i = 0, l = parts.length; i < l; i++) {
+    var part = parts[i].trim();
+    if (!part) continue;
+    var marker = part.match(MARKER_RE);
+
+    if (marker) {
+      var group = parseInt(marker[1], 10) | 0;
+      var id = marker[2];
+
+      if (group !== 0) {
+        // Rehydrate componentId to group index mapping
+        setGroupForId(id, group); // Rehydrate names and rules
+        // looks like: data-styled.g11[id="idA"]{content:"nameA,"}
+
+        rehydrateNamesFromContent(sheet, id, marker[3]);
+        sheet.getTag().insertRules(group, rules);
+      }
+
+      rules.length = 0;
+    } else {
+      rules.push(part);
+    }
+  }
+};
+
+var rehydrateSheet = function rehydrateSheet(sheet) {
+  var nodes = document.querySelectorAll(SELECTOR);
+
+  for (var i = 0, l = nodes.length; i < l; i++) {
+    var node = nodes[i];
+
+    if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {
+      rehydrateSheetFromTag(sheet, node);
+
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+  }
+};
+
+var SHOULD_REHYDRATE = IS_BROWSER;
+var defaultOptions = {
+  isServer: !IS_BROWSER,
+  useCSSOMInjection: !DISABLE_SPEEDY
+};
+/** Contains the main stylesheet logic for stringification and caching */
+
+var StyleSheet = /*#__PURE__*/function () {
+  /** Register a group ID to give it an index */
+  StyleSheet.registerId = function registerId(id) {
+    return getGroupForId(id);
+  };
+
+  function StyleSheet(options, globalStyles, names) {
+    if (options === void 0) {
+      options = defaultOptions;
+    }
+
+    if (globalStyles === void 0) {
+      globalStyles = {};
+    }
+
+    this.options = _extends$1({}, defaultOptions, {}, options);
+    this.gs = globalStyles;
+    this.names = new Map(names); // We rehydrate only once and use the sheet that is created first
+
+    if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {
+      SHOULD_REHYDRATE = false;
+      rehydrateSheet(this);
+    }
+  }
+
+  var _proto = StyleSheet.prototype;
+
+  _proto.reconstructWithOptions = function reconstructWithOptions(options) {
+    return new StyleSheet(_extends$1({}, this.options, {}, options), this.gs, this.names);
+  };
+
+  _proto.allocateGSInstance = function allocateGSInstance(id) {
+    return this.gs[id] = (this.gs[id] || 0) + 1;
+  }
+  /** Lazily initialises a GroupedTag for when it's actually needed */
+  ;
+
+  _proto.getTag = function getTag() {
+    return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));
+  }
+  /** Check whether a name is known for caching */
+  ;
+
+  _proto.hasNameForId = function hasNameForId(id, name) {
+    return this.names.has(id) && this.names.get(id).has(name);
+  }
+  /** Mark a group's name as known for caching */
+  ;
+
+  _proto.registerName = function registerName(id, name) {
+    getGroupForId(id);
+
+    if (!this.names.has(id)) {
+      var groupNames = new Set();
+      groupNames.add(name);
+      this.names.set(id, groupNames);
+    } else {
+      this.names.get(id).add(name);
+    }
+  }
+  /** Insert new rules which also marks the name as known */
+  ;
+
+  _proto.insertRules = function insertRules(id, name, rules) {
+    this.registerName(id, name);
+    this.getTag().insertRules(getGroupForId(id), rules);
+  }
+  /** Clears all cached names for a given group ID */
+  ;
+
+  _proto.clearNames = function clearNames(id) {
+    if (this.names.has(id)) {
+      this.names.get(id).clear();
+    }
+  }
+  /** Clears all rules for a given group ID */
+  ;
+
+  _proto.clearRules = function clearRules(id) {
+    this.getTag().clearGroup(getGroupForId(id));
+    this.clearNames(id);
+  }
+  /** Clears the entire tag which deletes all rules but not its names */
+  ;
+
+  _proto.clearTag = function clearTag() {
+    // NOTE: This does not clear the names, since it's only used during SSR
+    // so that we can continuously output only new rules
+    this.tag = undefined;
+  }
+  /** Outputs the current sheet as a CSS string with markers for SSR */
+  ;
+
+  _proto.toString = function toString() {
+    return outputSheet(this);
+  };
+
+  return StyleSheet;
+}();
+
+// 
+
+/* eslint-disable */
+var SEED = 5381; // When we have separate strings it's useful to run a progressive
+// version of djb2 where we pretend that we're still looping over
+// the same string
+
+var phash = function phash(h, x) {
+  var i = x.length;
+
+  while (i) {
+    h = h * 33 ^ x.charCodeAt(--i);
+  }
+
+  return h;
+}; // This is a djb2 hashing function
+
+var hash = function hash(x) {
+  return phash(SEED, x);
+};
+
+/**
+ * MIT License
+ *
+ * Copyright (c) 2016 Sultan Tarimo
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
+ * IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* eslint-disable */
+function insertRulePlugin (insertRule) {
+  var delimiter = '/*|*/';
+  var needle = delimiter + "}";
+
+  function toSheet(block) {
+    if (block) {
+      try {
+        insertRule(block + "}");
+      } catch (e) {}
+    }
+  }
+
+  return function ruleSheet(context, content, selectors, parents, line, column, length, ns, depth, at) {
+    switch (context) {
+      // property
+      case 1:
+        // @import
+        if (depth === 0 && content.charCodeAt(0) === 64) return insertRule(content + ";"), '';
+        break;
+      // selector
+
+      case 2:
+        if (ns === 0) return content + delimiter;
+        break;
+      // at-rule
+
+      case 3:
+        switch (ns) {
+          // @font-face, @page
+          case 102:
+          case 112:
+            return insertRule(selectors[0] + content), '';
+
+          default:
+            return content + (at === 0 ? delimiter : '');
+        }
+
+      case -2:
+        content.split(needle).forEach(toSheet);
+    }
+  };
+}
+
+var COMMENT_REGEX = /^\s*\/\/.*$/gm;
+function createStylisInstance(_temp) {
+  var _ref = _temp === void 0 ? EMPTY_OBJECT : _temp,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? EMPTY_OBJECT : _ref$options,
+      _ref$plugins = _ref.plugins,
+      plugins = _ref$plugins === void 0 ? EMPTY_ARRAY : _ref$plugins;
+
+  var stylis = new stylis_min(options); // Wrap `insertRulePlugin to build a list of rules,
+  // and then make our own plugin to return the rules. This
+  // makes it easier to hook into the existing SSR architecture
+
+  var parsingRules = []; // eslint-disable-next-line consistent-return
+
+  var returnRulesPlugin = function returnRulesPlugin(context) {
+    if (context === -2) {
+      var parsedRules = parsingRules;
+      parsingRules = [];
+      return parsedRules;
+    }
+  };
+
+  var parseRulesPlugin = insertRulePlugin(function (rule) {
+    parsingRules.push(rule);
+  });
+
+  var _componentId;
+
+  var _selector;
+
+  var _selectorRegexp;
+
+  var selfReferenceReplacer = function selfReferenceReplacer(match, offset, string) {
+    if ( // the first self-ref is always untouched
+    offset > 0 && // there should be at least two self-refs to do a replacement (.b > .b)
+    string.slice(0, offset).indexOf(_selector) !== -1 && // no consecutive self refs (.b.b); that is a precedence boost and treated differently
+    string.slice(offset - _selector.length, offset) !== _selector) {
+      return "." + _componentId;
+    }
+
+    return match;
+  };
+  /**
+   * When writing a style like
+   *
+   * & + & {
+   *   color: red;
+   * }
+   *
+   * The second ampersand should be a reference to the static component class. stylis
+   * has no knowledge of static class so we have to intelligently replace the base selector.
+   *
+   * https://github.com/thysultan/stylis.js#plugins <- more info about the context phase values
+   * "2" means this plugin is taking effect at the very end after all other processing is complete
+   */
+
+
+  var selfReferenceReplacementPlugin = function selfReferenceReplacementPlugin(context, _, selectors) {
+    if (context === 2 && selectors.length && selectors[0].lastIndexOf(_selector) > 0) {
+      // eslint-disable-next-line no-param-reassign
+      selectors[0] = selectors[0].replace(_selectorRegexp, selfReferenceReplacer);
+    }
+  };
+
+  stylis.use([].concat(plugins, [selfReferenceReplacementPlugin, parseRulesPlugin, returnRulesPlugin]));
+
+  function stringifyRules(css, selector, prefix, componentId) {
+    if (componentId === void 0) {
+      componentId = '&';
+    }
+
+    var flatCSS = css.replace(COMMENT_REGEX, '');
+    var cssStr = selector && prefix ? prefix + " " + selector + " { " + flatCSS + " }" : flatCSS; // stylis has no concept of state to be passed to plugins
+    // but since JS is single=threaded, we can rely on that to ensure
+    // these properties stay in sync with the current stylis run
+
+    _componentId = componentId;
+    _selector = selector;
+    _selectorRegexp = new RegExp("\\" + _selector + "\\b", 'g');
+    return stylis(prefix || !selector ? '' : selector, cssStr);
+  }
+
+  stringifyRules.hash = plugins.length ? plugins.reduce(function (acc, plugin) {
+    if (!plugin.name) {
+      throwStyledComponentsError(15);
+    }
+
+    return phash(acc, plugin.name);
+  }, SEED).toString() : '';
+  return stringifyRules;
+}
+
+// 
+var StyleSheetContext = React__default.createContext();
+var StyleSheetConsumer = StyleSheetContext.Consumer;
+var StylisContext = React__default.createContext();
+var StylisConsumer = StylisContext.Consumer;
+var masterSheet = new StyleSheet();
+var masterStylis = createStylisInstance();
+function useStyleSheet() {
+  return React.useContext(StyleSheetContext) || masterSheet;
+}
+function useStylis() {
+  return React.useContext(StylisContext) || masterStylis;
+}
+
+// 
+
+var Keyframes = /*#__PURE__*/function () {
+  function Keyframes(name, stringifyArgs) {
+    var _this = this;
+
+    this.inject = function (styleSheet) {
+      if (!styleSheet.hasNameForId(_this.id, _this.name)) {
+        styleSheet.insertRules(_this.id, _this.name, masterStylis.apply(void 0, _this.stringifyArgs));
+      }
+    };
+
+    this.toString = function () {
+      return throwStyledComponentsError(12, String(_this.name));
+    };
+
+    this.name = name;
+    this.id = "sc-keyframes-" + name;
+    this.stringifyArgs = stringifyArgs;
+  }
+
+  var _proto = Keyframes.prototype;
+
+  _proto.getName = function getName() {
+    return this.name;
+  };
+
+  return Keyframes;
+}();
+
+// 
+
+/**
+ * inlined version of
+ * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
+ */
+var uppercasePattern = /([A-Z])/g;
+var msPattern = /^ms-/;
+/**
+ * Hyphenates a camelcased CSS property name, for example:
+ *
+ *   > hyphenateStyleName('backgroundColor')
+ *   < "background-color"
+ *   > hyphenateStyleName('MozTransition')
+ *   < "-moz-transition"
+ *   > hyphenateStyleName('msTransition')
+ *   < "-ms-transition"
+ *
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+ * is converted to `-ms-`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+
+function hyphenateStyleName(string) {
+  return string.replace(uppercasePattern, '-$1').toLowerCase().replace(msPattern, '-ms-');
+}
+
+// 
+
+function addUnitIfNeeded(name, value) {
+  // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133
+  // $FlowFixMe
+  if (value == null || typeof value === 'boolean' || value === '') {
+    return '';
+  }
+
+  if (typeof value === 'number' && value !== 0 && !(name in unitlessKeys)) {
+    return value + "px"; // Presumes implicit 'px' suffix for unitless numbers
+  }
+
+  return String(value).trim();
+}
+
+// 
+/**
+ * It's falsish not falsy because 0 is allowed.
+ */
+
+var isFalsish = function isFalsish(chunk) {
+  return chunk === undefined || chunk === null || chunk === false || chunk === '';
+};
+
+var objToCssArray = function objToCssArray(obj, prevKey) {
+  var rules = [];
+  var keys = Object.keys(obj);
+  keys.forEach(function (key) {
+    if (!isFalsish(obj[key])) {
+      if (isPlainObject(obj[key])) {
+        rules.push.apply(rules, objToCssArray(obj[key], key));
+        return rules;
+      } else if (isFunction(obj[key])) {
+        rules.push(hyphenateStyleName(key) + ":", obj[key], ';');
+        return rules;
+      }
+
+      rules.push(hyphenateStyleName(key) + ": " + addUnitIfNeeded(key, obj[key]) + ";");
+    }
+
+    return rules;
+  });
+  return prevKey ? [prevKey + " {"].concat(rules, ['}']) : rules;
+};
+function flatten(chunk, executionContext, styleSheet) {
+  if (Array.isArray(chunk)) {
+    var ruleSet = [];
+
+    for (var i = 0, len = chunk.length, result; i < len; i += 1) {
+      result = flatten(chunk[i], executionContext, styleSheet);
+      if (result === '') continue;else if (Array.isArray(result)) ruleSet.push.apply(ruleSet, result);else ruleSet.push(result);
+    }
+
+    return ruleSet;
+  }
+
+  if (isFalsish(chunk)) {
+    return '';
+  }
+  /* Handle other components */
+
+
+  if (isStyledComponent(chunk)) {
+    return "." + chunk.styledComponentId;
+  }
+  /* Either execute or defer the function */
+
+
+  if (isFunction(chunk)) {
+    if (isStatelessFunction(chunk) && executionContext) {
+      var _result = chunk(executionContext);
+
+      if (process.env.NODE_ENV !== 'production' && reactIs_18(_result)) {
+        // eslint-disable-next-line no-console
+        console.warn(getComponentName(chunk) + " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.");
+      }
+
+      return flatten(_result, executionContext, styleSheet);
+    } else return chunk;
+  }
+
+  if (chunk instanceof Keyframes) {
+    if (styleSheet) {
+      chunk.inject(styleSheet);
+      return chunk.getName();
+    } else return chunk;
+  }
+  /* Handle objects */
+
+
+  return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
+}
+
+// 
+function css(styles) {
+  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    interpolations[_key - 1] = arguments[_key];
+  }
+
+  if (isFunction(styles) || isPlainObject(styles)) {
+    // $FlowFixMe
+    return flatten(interleave(EMPTY_ARRAY, [styles].concat(interpolations)));
+  }
+
+  if (interpolations.length === 0 && styles.length === 1 && typeof styles[0] === "string") {
+    // $FlowFixMe
+    return styles;
+  } // $FlowFixMe
+
+
+  return flatten(interleave(styles, interpolations));
+}
+
+function constructWithOptions(componentConstructor, tag, options) {
+  if (options === void 0) {
+    options = EMPTY_OBJECT;
+  }
+
+  if (!reactIs_27(tag)) {
+    return throwStyledComponentsError(1, String(tag));
+  }
+  /* This is callable directly as a template function */
+  // $FlowFixMe: Not typed to avoid destructuring arguments
+
+
+  var templateFunction = function templateFunction() {
+    return componentConstructor(tag, options, css.apply(void 0, arguments));
+  };
+  /* If config methods are called, wrap up a new template function and merge options */
+
+
+  templateFunction.withConfig = function (config) {
+    return constructWithOptions(componentConstructor, tag, _extends$1({}, options, {}, config));
+  };
+  /* Modify/inject new props at runtime */
+
+
+  templateFunction.attrs = function (attrs) {
+    return constructWithOptions(componentConstructor, tag, _extends$1({}, options, {
+      attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean)
+    }));
+  };
+
+  return templateFunction;
+}
+
+/* eslint-disable */
+
+/**
+  mixin-deep; https://github.com/jonschlinkert/mixin-deep
+  Inlined such that it will be consistently transpiled to an IE-compatible syntax.
+
+  The MIT License (MIT)
+
+  Copyright (c) 2014-present, Jon Schlinkert.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+var isObject = function isObject(val) {
+  return typeof val === 'function' || typeof val === 'object' && val !== null && !Array.isArray(val);
+};
+
+var isValidKey = function isValidKey(key) {
+  return key !== '__proto__' && key !== 'constructor' && key !== 'prototype';
+};
+
+function mixin(target, val, key) {
+  var obj = target[key];
+
+  if (isObject(val) && isObject(obj)) {
+    mixinDeep(obj, val);
+  } else {
+    target[key] = val;
+  }
+}
+
+function mixinDeep(target) {
+  for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    rest[_key - 1] = arguments[_key];
+  }
+
+  for (var _i = 0, _rest = rest; _i < _rest.length; _i++) {
+    var obj = _rest[_i];
+
+    if (isObject(obj)) {
+      for (var key in obj) {
+        if (isValidKey(key)) {
+          mixin(target, obj[key], key);
+        }
+      }
+    }
+  }
+
+  return target;
+}
+
+// 
+
+/* eslint-disable no-bitwise */
+var AD_REPLACER_R = /(a)(d)/gi;
+/* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
+ * counterparts */
+
+var charsLength = 52;
+/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
+
+var getAlphabeticChar = function getAlphabeticChar(code) {
+  return String.fromCharCode(code + (code > 25 ? 39 : 97));
+};
+/* input a number, usually a hash and convert it to base-52 */
+
+
+function generateAlphabeticName(code) {
+  var name = '';
+  var x;
+  /* get a char and divide by alphabet-length */
+
+  for (x = Math.abs(code); x > charsLength; x = x / charsLength | 0) {
+    name = getAlphabeticChar(x % charsLength) + name;
+  }
+
+  return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2');
+}
+
+// 
+function isStaticRules(rules) {
+  for (var i = 0; i < rules.length; i += 1) {
+    var rule = rules[i];
+
+    if (isFunction(rule) && !isStyledComponent(rule)) {
+      // functions are allowed to be static if they're just being
+      // used to get the classname of a nested styled component
+      return false;
+    }
+  }
+
+  return true;
+}
+
+// 
+/*
+ ComponentStyle is all the CSS-specific stuff, not
+ the React-specific stuff.
+ */
+
+var ComponentStyle = /*#__PURE__*/function () {
+  function ComponentStyle(rules, componentId) {
+    this.rules = rules;
+    this.staticRulesId = '';
+    this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules);
+    this.componentId = componentId;
+    this.baseHash = hash(componentId); // NOTE: This registers the componentId, which ensures a consistent order
+    // for this component's styles compared to others
+
+    StyleSheet.registerId(componentId);
+  }
+  /*
+   * Flattens a rule set into valid CSS
+   * Hashes it, wraps the whole chunk in a .hash1234 {}
+   * Returns the hash to be injected on render()
+   * */
+
+
+  var _proto = ComponentStyle.prototype;
+
+  _proto.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet, stylis) {
+    var componentId = this.componentId; // force dynamic classnames if user-supplied stylis plugins are in use
+
+    if (this.isStatic && !stylis.hash) {
+      if (this.staticRulesId && styleSheet.hasNameForId(componentId, this.staticRulesId)) {
+        return this.staticRulesId;
+      }
+
+      var cssStatic = flatten(this.rules, executionContext, styleSheet).join('');
+      var name = generateAlphabeticName(phash(this.baseHash, cssStatic.length) >>> 0);
+
+      if (!styleSheet.hasNameForId(componentId, name)) {
+        var cssStaticFormatted = stylis(cssStatic, "." + name, undefined, componentId);
+        styleSheet.insertRules(componentId, name, cssStaticFormatted);
+      }
+
+      this.staticRulesId = name;
+      return name;
+    } else {
+      var length = this.rules.length;
+      var dynamicHash = phash(this.baseHash, stylis.hash);
+      var css = '';
+
+      for (var i = 0; i < length; i++) {
+        var partRule = this.rules[i];
+
+        if (typeof partRule === 'string') {
+          css += partRule;
+          if (process.env.NODE_ENV !== 'production') dynamicHash = phash(dynamicHash, partRule + i);
+        } else {
+          var partChunk = flatten(partRule, executionContext, styleSheet);
+          var partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;
+          dynamicHash = phash(dynamicHash, partString + i);
+          css += partString;
+        }
+      }
+
+      var _name = generateAlphabeticName(dynamicHash >>> 0);
+
+      if (!styleSheet.hasNameForId(componentId, _name)) {
+        var cssFormatted = stylis(css, "." + _name, undefined, componentId);
+        styleSheet.insertRules(componentId, _name, cssFormatted);
+      }
+
+      return _name;
+    }
+  };
+
+  return ComponentStyle;
+}();
+
+// 
+var LIMIT = 200;
+var createWarnTooManyClasses = (function (displayName, componentId) {
+  var generatedClasses = {};
+  var warningSeen = false;
+  return function (className) {
+    if (!warningSeen) {
+      generatedClasses[className] = true;
+
+      if (Object.keys(generatedClasses).length >= LIMIT) {
+        // Unable to find latestRule in test environment.
+
+        /* eslint-disable no-console, prefer-template */
+        var parsedIdString = componentId ? " with the id of \"" + componentId + "\"" : '';
+        console.warn("Over " + LIMIT + " classes were generated for component " + displayName + parsedIdString + ".\n" + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + '  const Component = styled.div.attrs(props => ({\n' + '    style: {\n' + '      background: props.background,\n' + '    },\n' + '  }))`width: 100%;`\n\n' + '  <Component />');
+        warningSeen = true;
+        generatedClasses = {};
+      }
+    }
+  };
+});
+
+// 
+var invalidHookCallRe = /invalid hook call/i;
+var seen = new Set();
+var checkDynamicCreation = function checkDynamicCreation(displayName, componentId) {
+  if (process.env.NODE_ENV !== 'production') {
+    var parsedIdString = componentId ? " with the id of \"" + componentId + "\"" : '';
+    var message = "The component " + displayName + parsedIdString + " has been created dynamically.\n" + 'You may see this warning because you\'ve called styled inside another component.\n' + 'To resolve this only create new StyledComponents outside of any render method and function component.';
+
+    try {
+      // We purposefully call `useRef` outside of a component and expect it to throw
+      // If it doesn't, then we're inside another component.
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React.useRef();
+
+      if (!seen.has(message)) {
+        // eslint-disable-next-line no-console
+        console.warn(message);
+        seen.add(message);
+      }
+    } catch (error) {
+      // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to
+      // be called outside of a React component.
+      if (invalidHookCallRe.test(error.message)) {
+        // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
+        seen["delete"](message);
+      }
+    }
+  }
+};
+
+// 
+var determineTheme = (function (props, providedTheme, defaultProps) {
+  if (defaultProps === void 0) {
+    defaultProps = EMPTY_OBJECT;
+  }
+
+  return props.theme !== defaultProps.theme && props.theme || providedTheme || defaultProps.theme;
+});
+
+// 
+// Source: https://www.w3.org/TR/cssom-1/#serialize-an-identifier
+// Control characters and non-letter first symbols are not supported
+var escapeRegex = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
+var dashesAtEnds = /(^-|-$)/g;
+/**
+ * TODO: Explore using CSS.escape when it becomes more available
+ * in evergreen browsers.
+ */
+
+function escape(str) {
+  return str // Replace all possible CSS selectors
+  .replace(escapeRegex, '-') // Remove extraneous hyphens at the start and end
+  .replace(dashesAtEnds, '');
+}
+
+// 
+function isTag(target) {
+  return typeof target === 'string' && (process.env.NODE_ENV !== 'production' ? target.charAt(0) === target.charAt(0).toLowerCase() : true);
+}
+
+// 
+function generateDisplayName(target) {
+  // $FlowFixMe
+  return isTag(target) ? "styled." + target : "Styled(" + getComponentName(target) + ")";
+}
+
+// 
+var generateComponentId = (function (str) {
+  return generateAlphabeticName(hash(str) >>> 0);
+});
+
+/**
+ * Convenience function for joining strings to form className chains
+ */
+function joinStrings(a, b) {
+  return a && b ? a + " " + b : a || b;
+}
+
+var ThemeContext = React__default.createContext();
+var ThemeConsumer = ThemeContext.Consumer;
+
+function mergeTheme(theme, outerTheme) {
+  if (!theme) {
+    return throwStyledComponentsError(14);
+  }
+
+  if (isFunction(theme)) {
+    var mergedTheme = theme(outerTheme);
+
+    if (process.env.NODE_ENV !== 'production' && (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')) {
+      return throwStyledComponentsError(7);
+    }
+
+    return mergedTheme;
+  }
+
+  if (Array.isArray(theme) || typeof theme !== 'object') {
+    return throwStyledComponentsError(8);
+  }
+
+  return outerTheme ? _extends$1({}, outerTheme, {}, theme) : theme;
+}
+/**
+ * Provide a theme to an entire react component tree via context
+ */
+
+
+function ThemeProvider(props) {
+  var outerTheme = React.useContext(ThemeContext);
+  var themeContext = React.useMemo(function () {
+    return mergeTheme(props.theme, outerTheme);
+  }, [props.theme, outerTheme]);
+
+  if (!props.children) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
+    value: themeContext
+  }, props.children);
+}
+
+/* global $Call */
+
+var identifiers = {};
+/* We depend on components having unique IDs */
+
+function generateId(displayName, parentComponentId) {
+  var name = typeof displayName !== 'string' ? 'sc' : escape(displayName); // Ensure that no displayName can lead to duplicate componentIds
+
+  identifiers[name] = (identifiers[name] || 0) + 1;
+  var componentId = name + "-" + generateComponentId(name + identifiers[name]);
+  return parentComponentId ? parentComponentId + "-" + componentId : componentId;
+}
+
+function useResolvedAttrs(theme, props, attrs) {
+  if (theme === void 0) {
+    theme = EMPTY_OBJECT;
+  }
+
+  // NOTE: can't memoize this
+  // returns [context, resolvedAttrs]
+  // where resolvedAttrs is only the things injected by the attrs themselves
+  var context = _extends$1({}, props, {
+    theme: theme
+  });
+
+  var resolvedAttrs = {};
+  attrs.forEach(function (attrDef) {
+    var resolvedAttrDef = attrDef;
+    var key;
+
+    if (isFunction(resolvedAttrDef)) {
+      resolvedAttrDef = resolvedAttrDef(context);
+    }
+    /* eslint-disable guard-for-in */
+
+
+    for (key in resolvedAttrDef) {
+      context[key] = resolvedAttrs[key] = key === 'className' ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key]) : resolvedAttrDef[key];
+    }
+    /* eslint-enable guard-for-in */
+
+  });
+  return [context, resolvedAttrs];
+}
+
+function useInjectedStyle(componentStyle, hasAttrs, resolvedAttrs, warnTooManyClasses) {
+  var styleSheet = useStyleSheet();
+  var stylis = useStylis(); // statically styled-components don't need to build an execution context object,
+  // and shouldn't be increasing the number of class names
+
+  var isStatic = componentStyle.isStatic && !hasAttrs;
+  var className = isStatic ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis) : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);
+  React.useDebugValue(className);
+
+  if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {
+    warnTooManyClasses(className);
+  }
+
+  return className;
+}
+
+function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
+  var componentAttrs = forwardedComponent.attrs,
+      componentStyle = forwardedComponent.componentStyle,
+      defaultProps = forwardedComponent.defaultProps,
+      foldedComponentIds = forwardedComponent.foldedComponentIds,
+      shouldForwardProp = forwardedComponent.shouldForwardProp,
+      styledComponentId = forwardedComponent.styledComponentId,
+      target = forwardedComponent.target;
+  React.useDebugValue(styledComponentId); // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
+  // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
+  // should be an immutable value, but behave for now.
+
+  var theme = determineTheme(props, React.useContext(ThemeContext), defaultProps);
+
+  var _useResolvedAttrs = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs),
+      context = _useResolvedAttrs[0],
+      attrs = _useResolvedAttrs[1];
+
+  var generatedClassName = useInjectedStyle(componentStyle, componentAttrs.length > 0, context, process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined);
+  var refToForward = forwardedRef;
+  var elementToBeCreated = attrs.$as || props.$as || attrs.as || props.as || target;
+  var isTargetTag = isTag(elementToBeCreated);
+  var computedProps = attrs !== props ? _extends$1({}, props, {}, attrs) : props;
+  var propFilterFn = shouldForwardProp || isTargetTag && index;
+  var propsForElement = {}; // eslint-disable-next-line guard-for-in
+
+  for (var key in computedProps) {
+    if (key[0] === '$' || key === 'as') continue;else if (key === 'forwardedAs') {
+      propsForElement.as = computedProps[key];
+    } else if (!propFilterFn || propFilterFn(key, index)) {
+      // Don't pass through non HTML tags through to HTML elements
+      propsForElement[key] = computedProps[key];
+    }
+  }
+
+  if (props.style && attrs.style !== props.style) {
+    propsForElement.style = _extends$1({}, props.style, {}, attrs.style);
+  }
+
+  propsForElement.className = Array.prototype.concat(foldedComponentIds, styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : null, props.className, attrs.className).filter(Boolean).join(' ');
+  propsForElement.ref = refToForward;
+  return React.createElement(elementToBeCreated, propsForElement);
+}
+
+function createStyledComponent(target, options, rules) {
+  var isTargetStyledComp = isStyledComponent(target);
+  var isCompositeComponent = !isTag(target);
+  var _options$displayName = options.displayName,
+      displayName = _options$displayName === void 0 ? generateDisplayName(target) : _options$displayName,
+      _options$componentId = options.componentId,
+      componentId = _options$componentId === void 0 ? generateId(options.displayName, options.parentComponentId) : _options$componentId,
+      _options$attrs = options.attrs,
+      attrs = _options$attrs === void 0 ? EMPTY_ARRAY : _options$attrs;
+  var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + "-" + options.componentId : options.componentId || componentId; // fold the underlying StyledComponent attrs up (implicit extend)
+
+  var finalAttrs = // $FlowFixMe
+  isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs; // eslint-disable-next-line prefer-destructuring
+
+  var shouldForwardProp = options.shouldForwardProp; // $FlowFixMe
+
+  if (isTargetStyledComp && target.shouldForwardProp) {
+    if (shouldForwardProp) {
+      // compose nested shouldForwardProp calls
+      shouldForwardProp = function shouldForwardProp(prop, filterFn) {
+        return (// $FlowFixMe
+          target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn)
+        );
+      };
+    } else {
+      // eslint-disable-next-line prefer-destructuring
+      shouldForwardProp = target.shouldForwardProp;
+    }
+  }
+
+  var componentStyle = new ComponentStyle(isTargetStyledComp ? // fold the underlying StyledComponent rules up (implicit extend)
+  // $FlowFixMe
+  target.componentStyle.rules.concat(rules) : rules, styledComponentId);
+  /**
+   * forwardRef creates a new interim component, which we'll take advantage of
+   * instead of extending ParentComponent to create _another_ interim class
+   */
+
+  var WrappedStyledComponent; // eslint-disable-next-line react-hooks/rules-of-hooks
+
+  var forwardRef = function forwardRef(props, ref) {
+    return useStyledComponentImpl(WrappedStyledComponent, props, ref);
+  };
+
+  forwardRef.displayName = displayName; // $FlowFixMe this is a forced cast to merge it StyledComponentWrapperProperties
+
+  WrappedStyledComponent = React__default.forwardRef(forwardRef);
+  WrappedStyledComponent.attrs = finalAttrs;
+  WrappedStyledComponent.componentStyle = componentStyle;
+  WrappedStyledComponent.displayName = displayName;
+  WrappedStyledComponent.shouldForwardProp = shouldForwardProp; // this static is used to preserve the cascade of static classes for component selector
+  // purposes; this is especially important with usage of the css prop
+
+  WrappedStyledComponent.foldedComponentIds = isTargetStyledComp ? // $FlowFixMe
+  Array.prototype.concat(target.foldedComponentIds, target.styledComponentId) : EMPTY_ARRAY;
+  WrappedStyledComponent.styledComponentId = styledComponentId; // fold the underlying StyledComponent target up since we folded the styles
+
+  WrappedStyledComponent.target = isTargetStyledComp ? // $FlowFixMe
+  target.target : target; // $FlowFixMe
+
+  WrappedStyledComponent.withComponent = function withComponent(tag) {
+    var previousComponentId = options.componentId,
+        optionsToCopy = _objectWithoutPropertiesLoose$1(options, ["componentId"]);
+
+    var newComponentId = previousComponentId && previousComponentId + "-" + (isTag(tag) ? tag : escape(getComponentName(tag)));
+
+    var newOptions = _extends$1({}, optionsToCopy, {
+      attrs: finalAttrs,
+      componentId: newComponentId
+    });
+
+    return createStyledComponent(tag, newOptions, rules);
+  }; // $FlowFixMe
+
+
+  Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
+    get: function get() {
+      return this._foldedDefaultProps;
+    },
+    set: function set(obj) {
+      // $FlowFixMe
+      this._foldedDefaultProps = isTargetStyledComp ? mixinDeep({}, target.defaultProps, obj) : obj;
+    }
+  });
+
+  if (process.env.NODE_ENV !== 'production') {
+    checkDynamicCreation(displayName, styledComponentId);
+    WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName, styledComponentId);
+  } // $FlowFixMe
+
+
+  WrappedStyledComponent.toString = function () {
+    return "." + WrappedStyledComponent.styledComponentId;
+  };
+
+  if (isCompositeComponent) {
+    hoistNonReactStatics_cjs(WrappedStyledComponent, target, {
+      // all SC-specific things should not be hoisted
+      attrs: true,
+      componentStyle: true,
+      displayName: true,
+      foldedComponentIds: true,
+      shouldForwardProp: true,
+      self: true,
+      styledComponentId: true,
+      target: true,
+      withComponent: true
+    });
+  }
+
+  return WrappedStyledComponent;
+}
+
+// 
+// Thanks to ReactDOMFactories for this handy list!
+var domElements = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
+'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
+
+// 
+
+var styled = function styled(tag) {
+  return constructWithOptions(createStyledComponent, tag);
+}; // Shorthands for all valid HTML Elements
+
+
+domElements.forEach(function (domElement) {
+  styled[domElement] = styled(domElement);
+});
+/* Warning if you've imported this file on React Native */
+
+if (process.env.NODE_ENV !== 'production' && typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+  // eslint-disable-next-line no-console
+  console.warn("It looks like you've imported 'styled-components' on React Native.\n" + "Perhaps you're looking to import 'styled-components/native'?\n" + 'Read more about this at https://www.styled-components.com/docs/basics#react-native');
+}
+/* Warning if there are several instances of styled-components */
+
+
+if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' && typeof window !== 'undefined') {
+  window['__styled-components-init__'] = window['__styled-components-init__'] || 0;
+
+  if (window['__styled-components-init__'] === 1) {
+    // eslint-disable-next-line no-console
+    console.warn("It looks like there are several instances of 'styled-components' initialized in this application. " + 'This may cause dynamic styles not rendering properly, errors happening during rehydration process, ' + 'missing theme prop, and makes your application bigger without a good reason.\n\n' + 'See https://s-c.sh/2BAXzed for more info.');
+  }
+
+  window['__styled-components-init__'] += 1;
+}
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -707,17 +3416,17 @@ var FLOAT_32_SUPPORTED = typeof Float32Array !== 'undefined';
 var a = function (a1, a2) {
     return 1.0 - 3.0 * a2 + 3.0 * a1;
 };
-var b = function (a1, a2) {
+var b$1 = function (a1, a2) {
     return 3.0 * a2 - 6.0 * a1;
 };
-var c = function (a1) {
+var c$1 = function (a1) {
     return 3.0 * a1;
 };
 var getSlope = function (t, a1, a2) {
-    return 3.0 * a(a1, a2) * t * t + 2.0 * b(a1, a2) * t + c(a1);
+    return 3.0 * a(a1, a2) * t * t + 2.0 * b$1(a1, a2) * t + c$1(a1);
 };
 var calcBezier = function (t, a1, a2) {
-    return ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;
+    return ((a(a1, a2) * t + b$1(a1, a2)) * t + c$1(a1)) * t;
 };
 function cubicBezier(mX1, mY1, mX2, mY2) {
     var sampleValues = FLOAT_32_SUPPORTED ? new Float32Array(K_SPLINE_TABLE_SIZE) : new Array(K_SPLINE_TABLE_SIZE);
@@ -1728,7 +4437,7 @@ var createDOMStyler = function (node, props) {
 var getStyler = function (node, props) {
     return cache.has(node) ? cache.get(node) : createDOMStyler(node, props);
 };
-function index(nodeOrSelector, props) {
+function index$1(nodeOrSelector, props) {
     var node = typeof nodeOrSelector === 'string' ? document.querySelector(nodeOrSelector) : nodeOrSelector;
     return getStyler(node, props);
 }
@@ -2790,7 +5499,7 @@ var pointer = function (props) {
         return touches;
     }, getFirstTouch) : mouse(props);
 };
-var index$1 = function (_a) {
+var index$1$1 = function (_a) {
     if (_a === void 0) {
         _a = {};
     }
@@ -3421,7 +6130,7 @@ var interpolate$1 = transformers.interpolate;
 var singleAxisPointer = function (axis) {
     return function (from) {
         var _a;
-        return index$1((_a = {}, _a[axis] = typeof from === 'string' ? parseFloat(from) : from, _a)).pipe(function (v) {
+        return index$1$1((_a = {}, _a[axis] = typeof from === 'string' ? parseFloat(from) : from, _a)).pipe(function (v) {
             return v[axis];
         });
     };
@@ -4049,7 +6758,7 @@ var createPoseConfig = function (element, _a) {
             hoverable: hoverable,
             focusable: focusable,
             pressable: pressable,
-            element: element, elementStyler: index(element, { preparseOutput: false }), dimensions: createDimensions(element) }) });
+            element: element, elementStyler: index$1(element, { preparseOutput: false }), dimensions: createDimensions(element) }) });
     if (draggable) {
         var _b = dragPoses(draggable),
             drag = _b.drag,
@@ -4119,7 +6828,7 @@ var domPose$1 = function (element, config) {
     return domPose(createPoseConfig(element, config));
 };
 
-function memoize(fn) {
+function memoize$1(fn) {
   var cache = {};
   return function (arg) {
     if (cache[arg] === undefined) cache[arg] = fn(arg);
@@ -4127,10 +6836,10 @@ function memoize(fn) {
   };
 }
 
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+var reactPropsRegex$1 = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
-var index$2 = memoize(function (prop) {
-  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
+var index$2 = memoize$1(function (prop) {
+  return reactPropsRegex$1.test(prop) || prop.charCodeAt(0) === 111
   /* o */
   && prop.charCodeAt(1) === 110
   /* n */
@@ -4752,7 +7461,7 @@ var themeComponent = function themeComponent(component, componentThemeId, fallba
         variant = _ref7$variant === void 0 ? defaultVariant : _ref7$variant,
         props = _objectWithoutProperties(_ref7, _excluded);
 
-    var themeContext = React.useContext(styled.ThemeContext);
+    var themeContext = React.useContext(ThemeContext);
     var metadata = (_themeContext$metadat = themeContext === null || themeContext === void 0 ? void 0 : themeContext.metadata) !== null && _themeContext$metadat !== void 0 ? _themeContext$metadat : {};
     var themeValues = themeContext ? createThemeValues(themeContext, fallbackValues, componentThemeId, variant) : fallbackValues;
     return component(_objectSpread2(_objectSpread2({}, props), {}, {
@@ -5002,7 +7711,7 @@ var colors = /*#__PURE__*/Object.freeze({
   ERROR_COLOR: ERROR_COLOR
 });
 
-var TextSpan = styled__default.span.withConfig({
+var TextSpan = styled.span.withConfig({
   displayName: "Textstyled__TextSpan",
   componentId: "sc-1oy97we-0"
 })(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));font-weight:", ";font-family:", ";color:", ";white-space:", ";&:hover{", "}&:focus{outline:3px solid ", ";outline-offset:2px;}", " ", ""], function (_ref) {
@@ -5022,22 +7731,16 @@ var TextSpan = styled__default.span.withConfig({
   return $textWrap ? "initial" : "nowrap";
 }, function (_ref6) {
   var hoverStyles = _ref6.hoverStyles;
-  return styled.css(["", ""], hoverStyles);
+  return css(["", ""], hoverStyles);
 }, ROYAL_BLUE, function (_ref7) {
   var disabled = _ref7.disabled,
       disabledStyles = _ref7.disabledStyles;
-  return disabled && styled.css(["", ""], disabledStyles);
+  return disabled && css(["", ""], disabledStyles);
 }, function (_ref8) {
   var extraStyles = _ref8.extraStyles;
   return extraStyles;
 });
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
 var numeral = createCommonjsModule(function (module) {
 /*! @preserve
  * numeral.js
@@ -6208,7 +8911,7 @@ var _excluded$2 = ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles
 
 /* eslint-disable no-unused-vars */
 
-var BoxWrapper = styled__default(function (_ref) {
+var BoxWrapper = styled(function (_ref) {
   var activeStyles = _ref.activeStyles,
       hoverStyles = _ref.hoverStyles,
       disabledStyles = _ref.disabledStyles,
@@ -6276,27 +8979,27 @@ var BoxWrapper = styled__default(function (_ref) {
 }, function (_ref14) {
   var hoverStyles = _ref14.hoverStyles,
       as = _ref14.as;
-  return styled.css(["", " ", ""], hoverStyles, as === "button" ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return css(["", " ", ""], hoverStyles, as === "button" ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref15) {
   var as = _ref15.as;
-  return styled.css(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
+  return css(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
 }, function (_ref16) {
   var activeStyles = _ref16.activeStyles,
       as = _ref16.as;
-  return styled.css(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return css(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref17) {
   var disabledStyles = _ref17.disabledStyles,
       as = _ref17.as;
-  return styled.css(["", " ", ""], disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return css(["", " ", ""], disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref18) {
   var color = _ref18.color;
   return color;
 }, function (_ref19) {
   var hiddenStyles = _ref19.hiddenStyles;
-  return hiddenStyles && styled.css(["display:none;"]);
+  return hiddenStyles && css(["display:none;"]);
 }, function (_ref20) {
   var extraStyles = _ref20.extraStyles;
-  return styled.css(["", ""], extraStyles);
+  return css(["", ""], extraStyles);
 });
 /* eslint-enable no-unused-vars */
 
@@ -6383,7 +9086,7 @@ var Box = function Box(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
 
-var CenterWrapper = styled__default.div.withConfig({
+var CenterWrapper = styled.div.withConfig({
   displayName: "Centerstyled__CenterWrapper",
   componentId: "sc-vawqfc-0"
 })(["box-sizing:content-box;margin-left:auto;margin-right:auto;max-width:", ";padding-left:", ";padding-right:", ";", ";"], function (_ref) {
@@ -6425,7 +9128,7 @@ var Center = function Center(_ref) {
 var _excluded$5 = ["overflow"];
 /* eslint-disable no-unused-vars */
 
-var ClusterWrapper = styled__default(function (_ref) {
+var ClusterWrapper = styled(function (_ref) {
   var overflow = _ref.overflow,
       props = _objectWithoutProperties(_ref, _excluded$5);
 
@@ -6449,7 +9152,7 @@ var ClusterWrapper = styled__default(function (_ref) {
   var $extraStyles = _ref6.$extraStyles;
   return $extraStyles;
 });
-var ClusterInnerWrapper = styled__default.div.withConfig({
+var ClusterInnerWrapper = styled.div.withConfig({
   displayName: "Clusterstyled__ClusterInnerWrapper",
   componentId: "sc-1dkqsm7-1"
 })(["box-sizing:border-box;display:flex;flex-wrap:", ";justify-content:", ";align-items:", ";margin:calc(", " / 2 * -1);min-height:", ";min-width:", ";> *{margin:calc(", " / 2);}"], function (_ref7) {
@@ -6518,7 +9221,7 @@ var Cluster = function Cluster(_ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null))));
 };
 
-var GridWrapper = styled__default.div.withConfig({
+var GridWrapper = styled.div.withConfig({
   displayName: "Gridstyled__GridWrapper",
   componentId: "sc-8iakdj-0"
 })(["display:grid;grid-gap:", ";grid-template-columns:", ";@supports (width:min(", ",100%)){&{grid-template-columns:repeat( auto-fill,minmax( ", ",", " ) );}}"], function (_ref) {
@@ -6578,14 +9281,14 @@ var Grid = function Grid(_ref) {
 };
 
 var _excluded$8 = ["onRight", "childGap", "contentMinWidth", "minHeight", "fullHeight"];
-var SidebarWrapper = styled__default.div.withConfig({
+var SidebarWrapper = styled.div.withConfig({
   displayName: "Sidebarstyled__SidebarWrapper",
   componentId: "sc-1bbn2or-0"
 })(["overflow:visible;box-sizing:border-box;", ""], function (_ref) {
   var fullHeight = _ref.fullHeight;
   return fullHeight ? "height: 100%;" : "";
 });
-var SidebarInnerWrapper = styled__default( // eslint-disable-next-line no-unused-vars
+var SidebarInnerWrapper = styled( // eslint-disable-next-line no-unused-vars
 function (_ref2) {
   var onRight = _ref2.onRight,
       childGap = _ref2.childGap,
@@ -6661,7 +9364,7 @@ var Sidebar = function Sidebar(_ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null))));
 };
 
-var StackWrapper = styled__default.div.withConfig({
+var StackWrapper = styled.div.withConfig({
   displayName: "Stackstyled__StackWrapper",
   componentId: "sc-ejhezz-0"
 })(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";"], function (_ref) {
@@ -6715,7 +9418,7 @@ var Stack = function Stack(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
 
-var CoverOuterContainer = styled__default.div.withConfig({
+var CoverOuterContainer = styled.div.withConfig({
   displayName: "Coverstyled__CoverOuterContainer",
   componentId: "sc-1jhq379-0"
 })(["box-sizing:border-box;display:flex;flex-direction:column;min-height:", ";padding:", ";min-width:", ";> *{margin-top:", ";margin-bottom:", ";}>:first-child{margin-top:0;}", " ", " >:last-child{margin-bottom:0;}"], function (_ref) {
@@ -6782,7 +9485,7 @@ var Cover = function Cover(_ref) {
   }, rest), singleChild ? /*#__PURE__*/React__default.createElement("div", null) : /*#__PURE__*/React__default.createElement(React.Fragment, null), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)), singleChild ? /*#__PURE__*/React__default.createElement("div", null) : /*#__PURE__*/React__default.createElement(React.Fragment, null));
 };
 
-var FrameOuterContainer = styled__default.div.withConfig({
+var FrameOuterContainer = styled.div.withConfig({
   displayName: "Framestyled__FrameOuterContainer",
   componentId: "sc-1syfnuv-0"
 })(["box-sizing:border-box;padding-bottom:", ";position:relative;> *{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;}> img,> video{width:100%;height:100%;object-fit:cover;}"], function (_ref) {
@@ -6819,11 +9522,11 @@ var Frame = function Frame(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
 
-var SwitcherOuterContainer = styled__default.div.withConfig({
+var SwitcherOuterContainer = styled.div.withConfig({
   displayName: "Switcherstyled__SwitcherOuterContainer",
   componentId: "sc-1ym61kc-0"
 })(["box-sizing:border-box;display:block;"]);
-var SwitcherInnerContainer = styled__default.div.withConfig({
+var SwitcherInnerContainer = styled.div.withConfig({
   displayName: "Switcherstyled__SwitcherInnerContainer",
   componentId: "sc-1ym61kc-1"
 })(["box-sizing:border-box;display:flex;flex-wrap:wrap;overflow:hidden;padding:", ";margin:", ";", " > *{flex-grow:1;", ";", " ", "}", " ", " ", ""], function (_ref) {
@@ -6855,7 +9558,7 @@ var SwitcherInnerContainer = styled__default.div.withConfig({
   return maxChildren ? "> :nth-last-child(".concat(maxChildren + 1, "), > :nth-last-child(").concat(maxChildren + 1, ") ~ * {\n      flex-basis: 100%;\n    }") : "";
 }, function (_ref9) {
   var extraStyles = _ref9.extraStyles;
-  return styled.css(["", ""], extraStyles);
+  return css(["", ""], extraStyles);
 });
 
 var _excluded$d = ["breakpoint", "childGap", "largeChild", "largeChildSize", "maxChildren", "maxChildrenOnly", "padding", "children", "extraStyles", "constrainMobile"];
@@ -6922,7 +9625,7 @@ var Switcher = function Switcher(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null))));
 };
 
-var ImposterWrapper = styled__default.div.withConfig({
+var ImposterWrapper = styled.div.withConfig({
   displayName: "Imposterstyled__ImposterWrapper",
   componentId: "sc-1q0gj35-0"
 })(["position:", ";top:", ";left:", ";display:", ";", " ", " ", ";"], function (_ref) {
@@ -8204,7 +10907,7 @@ var MountComponent = function (_a) {
     var ref = _a.innerRef, values = _a.values, isStatic = _a.isStatic;
     React.useEffect(function () {
         invariant(ref.current instanceof Element, "No `ref` found. Ensure components created with `motion.custom` forward refs using `React.forwardRef`");
-        var domStyler = index(ref.current, {
+        var domStyler = index$1(ref.current, {
             preparseOutput: false,
             enableHardwareAcceleration: !isStatic,
         });
@@ -10933,7 +13636,7 @@ var checkAndConvertChangedValueTypes = function (values, ref, target, transition
     target = __assign({}, target);
     transitionEnd = __assign({}, transitionEnd);
     var element = ref.current;
-    var elementStyler = index(element);
+    var elementStyler = index$1(element);
     var targetPositionalKeys = Object.keys(target).filter(isPositionalKey$1);
     // We want to remove any transform values that could affect the element's bounding box before
     // it's measured. We'll reapply these later.
@@ -11254,7 +13957,7 @@ var LayoutAnimation = /** @class */ (function (_super) {
                 transform && (element.style.transform = transform);
                 return;
             }
-            index(element).set({
+            index$1(element).set({
                 originX: delta.originX,
                 originY: delta.originY,
             });
@@ -11775,7 +14478,7 @@ function createDomMotionConfig(Component) {
             return {
                 values: values,
                 readValueFromSource: function (key) {
-                    return index(ref.current).get(key);
+                    return index$1(ref.current).get(key);
                 },
                 // TODO: This is a good second source of plugins. This function contains the CSS variable
                 // and unit conversion support. These functions share a common signature. We could make another
@@ -12065,7 +14768,7 @@ if (typeof window !== "undefined") {
     }
 }
 
-var MotionWrapper = styled__default(motion.div).withConfig({
+var MotionWrapper = styled(motion.div).withConfig({
   displayName: "Motionstyled__MotionWrapper",
   componentId: "sc-1m6r1io-0"
 })(["position:", ";display:", ";box-sizing:border-box;padding:", ";border:", ";border-color:", ";border-size:", ";border-style:", ";border-width:", ";border-radius:", ";background-color:", ";box-shadow:", ";min-height:", ";min-width:", ";height:", ";width:", ";text-align:", ";margin:", ";&:hover,&:focus{", ";}&:active{", ";}&:disabled{", ";}", ";"], function (_ref) {
@@ -12183,7 +14886,7 @@ var Motion = function Motion(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
 
-var ReelStyled = styled__default.div.withConfig({
+var ReelStyled = styled.div.withConfig({
   displayName: "Reelstyled__ReelStyled",
   componentId: "sc-bhf05j-0"
 })(["display:flex;overflow-x:", ";padding:", ";height:", ";justify-content:", ";> * + *{margin-left:", ";}> *{flex:0 0 ", ";}", ""], function (_ref) {
@@ -12471,11 +15174,11 @@ var rotate = posed.div({
     }
   }
 });
-var SpinnerContainer = styled__default.div.withConfig({
+var SpinnerContainer = styled.div.withConfig({
   displayName: "Spinner__SpinnerContainer",
   componentId: "sc-jphte-0"
 })(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;"]);
-var SpinnerIconWrapper = styled__default(rotate).withConfig({
+var SpinnerIconWrapper = styled(rotate).withConfig({
   displayName: "Spinner__SpinnerIconWrapper",
   componentId: "sc-jphte-1"
 })(["width:", "px;height:", "px;"], function (_ref) {
@@ -12537,11 +15240,11 @@ var rotate$1 = posed.div({
     }
   }
 });
-var SpinnerContainer$1 = styled__default.div.withConfig({
+var SpinnerContainer$1 = styled.div.withConfig({
   displayName: "ButtonWithAction__SpinnerContainer",
   componentId: "sc-1ffs4ga-0"
 })(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;"]);
-var SpinnerIconWrapper$1 = styled__default(rotate$1).withConfig({
+var SpinnerIconWrapper$1 = styled(rotate$1).withConfig({
   displayName: "ButtonWithAction__SpinnerIconWrapper",
   componentId: "sc-1ffs4ga-1"
 })([""]);
@@ -12593,7 +15296,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
       children = _ref2.children,
       rest = _objectWithoutProperties(_ref2, _excluded$h);
 
-  var themeContext = React.useContext(styled.ThemeContext);
+  var themeContext = React.useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   var isMobile = themeContext.isMobile;
   var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n    cursor: pointer;\n  ");
@@ -13568,11 +16271,11 @@ var GenericCard = function GenericCard() {
   })))));
 };
 
-var BankItemWrapper = styled__default.div.withConfig({
+var BankItemWrapper = styled.div.withConfig({
   displayName: "PaymentIcon__BankItemWrapper",
   componentId: "sc-1k0jl35-0"
 })(["display:flex;justify-content:flex-start;align-items:center;"]);
-var BankAccountText = styled__default.h4.withConfig({
+var BankAccountText = styled.h4.withConfig({
   displayName: "PaymentIcon__BankAccountText",
   componentId: "sc-1k0jl35-1"
 })(["color:", ";font-size:1rem;font-weight:400;line-height:1.5rem;text-align:left;margin-right:0.5rem;display:inline-block;"], CHARADE_GREY);
@@ -15868,7 +18571,7 @@ var Alert = function Alert(_ref) {
 
 var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$4, "info");
 
-var TitleText = styled__default.h1.withConfig({
+var TitleText = styled.h1.withConfig({
   displayName: "Titlestyled__TitleText",
   componentId: "sc-11lhluq-0"
 })(["font-size:", ";line-height:1.5;color:", ";font-weight:", ";margin:", ";text-align:", ";font-family:", ";", ";"], function (_ref) {
@@ -16009,8 +18712,8 @@ var AmountCallout = function AmountCallout(_ref) {
 
 var AmountCallout$1 = themeComponent(AmountCallout, "AmountCallout", fallbackValues$6);
 
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
+function _extends$2() {
+  _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -16024,7 +18727,7 @@ function _extends$1() {
     return target;
   };
 
-  return _extends$1.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 
 function _assertThisInitialized(self) {
@@ -16131,7 +18834,7 @@ function _wrapNativeSuper(Class) {
  * Parse errors.md and turn it into a simple hash of code: message
  * @private
  */
-var ERRORS = {
+var ERRORS$1 = {
   "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
   "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
   "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
@@ -16216,7 +18919,7 @@ var ERRORS = {
  * @private
  */
 
-function format() {
+function format$1() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
@@ -16254,7 +18957,7 @@ var PolishedError = /*#__PURE__*/function (_Error) {
         args[_key2 - 1] = arguments[_key2];
       }
 
-      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
+      _this = _Error.call(this, format$1.apply(void 0, [ERRORS$1[code]].concat(args))) || this;
     }
 
     return _assertThisInitialized(_this);
@@ -16758,13 +19461,13 @@ function mix$1(weight, color, otherColor) {
   if (weight === 0) return otherColor;
   var parsedColor1 = parseToRgb(color);
 
-  var color1 = _extends$1({}, parsedColor1, {
+  var color1 = _extends$2({}, parsedColor1, {
     alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
   });
 
   var parsedColor2 = parseToRgb(otherColor);
 
-  var color2 = _extends$1({}, parsedColor2, {
+  var color2 = _extends$2({}, parsedColor2, {
     alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
   }); // The formula is copied from the original Sass implementation:
   // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
@@ -16900,7 +19603,7 @@ var _excluded$k = ["hoverColor", "activeColor", "extrastyles"];
 
 /* eslint-disable no-unused-vars */
 
-var StyledExternalLink = styled__default(function (_ref) {
+var StyledExternalLink = styled(function (_ref) {
   var hoverColor = _ref.hoverColor,
       activeColor = _ref.activeColor,
       extrastyles = _ref.extrastyles,
@@ -16954,8 +19657,9 @@ var ExternalLink = function ExternalLink(_ref) {
       variant = _ref$variant === void 0 ? "primary" : _ref$variant,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? "0" : _ref$tabIndex,
+      dataQa = _ref.dataQa,
       children = _ref.children;
-  var themeContext = React.useContext(styled.ThemeContext);
+  var themeContext = React.useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$9, "Link", variant);
   return /*#__PURE__*/React__default.createElement(StyledExternalLink, {
     href: href,
@@ -16969,7 +19673,8 @@ var ExternalLink = function ExternalLink(_ref) {
     fontFamily: themeValues.fontFamily,
     tabIndex: tabIndex,
     extrastyles: extraStyles,
-    rel: newTab ? "noopener" : ""
+    rel: newTab ? "noopener" : "",
+    "data-qa": dataQa
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
@@ -16981,7 +19686,7 @@ var _excluded$l = ["hoverColor", "activeColor", "active", "color", "extrastyles"
 
 /* eslint-disable no-unused-vars */
 
-var StyledInternalLink = styled__default(function (_ref) {
+var StyledInternalLink = styled(function (_ref) {
   var hoverColor = _ref.hoverColor,
       activeColor = _ref.activeColor,
       active = _ref.active,
@@ -17039,9 +19744,10 @@ var InternalLink = function InternalLink(_ref) {
       margin = _ref.margin,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? "0" : _ref$tabIndex,
+      dataQa = _ref.dataQa,
       _ref$extraStyles = _ref.extraStyles,
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
-  var themeContext = React.useContext(styled.ThemeContext);
+  var themeContext = React.useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$9, "Link", variant);
   return /*#__PURE__*/React__default.createElement(StyledInternalLink, {
     to: to,
@@ -17055,14 +19761,15 @@ var InternalLink = function InternalLink(_ref) {
     hoverColor: themeValues.hoverColor,
     activeColor: themeValues.activeColor,
     tabIndex: tabIndex,
-    extrastyles: extraStyles
+    extrastyles: extraStyles,
+    "data-qa": dataQa
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var _ref$breadcrumbsList = _ref.breadcrumbsList,
       breadcrumbsList = _ref$breadcrumbsList === void 0 ? [] : _ref$breadcrumbsList;
-  var themeContext = React.useContext(styled.ThemeContext);
+  var themeContext = React.useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$8, "Breadcrumb");
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -18668,7 +21375,7 @@ _curry2(function test(pattern, str) {
 
 var URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;
 
-var _excluded$m = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab"];
+var _excluded$m = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
@@ -18681,6 +21388,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       linkExtraStyles = _ref.linkExtraStyles,
       _ref$newTab = _ref.newTab,
       newTab = _ref$newTab === void 0 ? false : _ref$newTab,
+      dataQa = _ref.dataQa,
       otherProps = _objectWithoutProperties(_ref, _excluded$m);
 
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
@@ -18688,6 +21396,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
         url = _ref2.url,
         disabled = _ref2.disabled,
         newTab = _ref2.newTab,
+        dataQa = _ref2.dataQa,
         extraStyles = _ref2.extraStyles;
 
     if (disabled) {
@@ -18698,10 +21407,12 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       href: url,
       tabIndex: "-1",
       newTab: newTab,
-      extraStyles: extraStyles
+      extraStyles: extraStyles,
+      dataQa: dataQa
     }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null))) : /*#__PURE__*/React__default.createElement(InternalLink, {
       to: url,
       tabIndex: "-1",
+      dataQa: dataQa,
       extraStyles: extraStyles
     }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
   };
@@ -18710,7 +21421,8 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     url: url,
     disabled: disabled,
     newTab: newTab,
-    extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }")
+    extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }"),
+    dataQa: dataQa
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, _extends({}, otherProps, {
     extraStyles: extraStyles
   })));
@@ -18744,7 +21456,7 @@ var fallbackValues$a = {
   fontSize: fontSize$3
 };
 
-var ParagraphText = styled__default.p.withConfig({
+var ParagraphText = styled.p.withConfig({
   displayName: "Paragraphstyled__ParagraphText",
   componentId: "sc-17g98kx-0"
 })(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));font-weight:", ";font-family:", ";color:", ";margin:", ";", ""], function (_ref) {
@@ -18854,7 +21566,7 @@ var withWindowSize = function withWindowSize(Child) {
         window.removeEventListener("resize", onResize);
       };
     }, []);
-    return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+    return /*#__PURE__*/React__default.createElement(ThemeProvider, {
       theme: state
     }, /*#__PURE__*/React__default.createElement(Child, props));
   };
@@ -18884,7 +21596,7 @@ var Card = function Card(_ref2) {
       _ref2$variant = _ref2.variant,
       variant = _ref2$variant === void 0 ? "vertical" : _ref2$variant;
 
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   var navigate = reactRouterDom.useNavigate();
@@ -19046,30 +21758,30 @@ var fallbackValues$c = {
   disabledCheckedStyles: disabledCheckedStyles
 };
 
-var CheckboxContainer = styled__default.div.withConfig({
+var CheckboxContainer = styled.div.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
 })(["display:inline-block;vertical-align:middle;"]);
-var CheckboxLabelContainer = styled__default.label.withConfig({
+var CheckboxLabelContainer = styled.label.withConfig({
   displayName: "Checkbox__CheckboxLabelContainer",
   componentId: "sc-36kqbv-1"
 })(["display:flex;align-items:center;"]);
-var CheckboxIcon = styled__default.svg.withConfig({
+var CheckboxIcon = styled.svg.withConfig({
   displayName: "Checkbox__CheckboxIcon",
   componentId: "sc-36kqbv-2"
 })(["fill:none;stroke-width:2px;stroke:", ";"], function (_ref) {
   var disabled = _ref.disabled,
       disabledCheckColor = _ref.disabledCheckColor,
       checkColor = _ref.checkColor;
-  return disabled ? styled.css(["", ""], disabledCheckColor) : styled.css(["", ""], checkColor);
+  return disabled ? css(["", ""], disabledCheckColor) : css(["", ""], checkColor);
 });
-var HiddenCheckbox = styled__default.input.attrs({
+var HiddenCheckbox = styled.input.attrs({
   type: "checkbox"
 }).withConfig({
   displayName: "Checkbox__HiddenCheckbox",
   componentId: "sc-36kqbv-3"
 })(["border:0;clip:rect(0 0 0 0);clippath:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;"]);
-var StyledCheckbox = styled__default.div.withConfig({
+var StyledCheckbox = styled.div.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
 })(["display:inline-block;margin-right:16px;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";"], CheckboxIcon, function (_ref2) {
@@ -19086,7 +21798,7 @@ var StyledCheckbox = styled__default.div.withConfig({
       errorStyles = _ref3.errorStyles,
       disabledStyles = _ref3.disabledStyles,
       disabledCheckedStyles = _ref3.disabledCheckedStyles;
-  return error ? styled.css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? styled.css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? styled.css(["", " ", ""], checkedStyles, focused && focusedStyles) : styled.css(["", " ", ""], defaultStyles, focused && focusedStyles);
+  return error ? css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css(["", " ", ""], checkedStyles, focused && focusedStyles) : css(["", " ", ""], defaultStyles, focused && focusedStyles);
 });
 
 var Checkbox = function Checkbox(_ref4) {
@@ -19217,7 +21929,7 @@ var defaultTheme = {
     inactiveColor: PEWTER_GREY$1
   }
 };
-var RadioButtonBorder = styled__default.div.withConfig({
+var RadioButtonBorder = styled.div.withConfig({
   displayName: "radio-button__RadioButtonBorder",
   componentId: "sc-8odgi0-0"
 })(["height:24px;width:24px;border:1px solid ", ";border-radius:12px;display:flex;justify-content:center;align-items:center;margin:10px;min-width:24px;min-height:24px;"], function (_ref) {
@@ -19226,7 +21938,7 @@ var RadioButtonBorder = styled__default.div.withConfig({
   return isSelected ? theme.accentColor : theme.inactiveColor;
 });
 RadioButtonBorder.defaultProps = defaultTheme;
-var RadioButtonCenter = styled__default.div.withConfig({
+var RadioButtonCenter = styled.div.withConfig({
   displayName: "radio-button__RadioButtonCenter",
   componentId: "sc-8odgi0-1"
 })(["height:16px;width:16px;background-color:", ";border-radius:8px;"], function (_ref2) {
@@ -19245,15 +21957,15 @@ var RadioButton = function RadioButton(_ref3) {
   }, isSelected && /*#__PURE__*/React__default.createElement(RadioButtonCenter, null));
 };
 
-var CheckboxItemIcon = styled__default.img.withConfig({
+var CheckboxItemIcon = styled.img.withConfig({
   displayName: "CheckboxList__CheckboxItemIcon",
   componentId: "sc-1yakme1-0"
 })(["width:2rem;"]);
-var HiddenCheckboxInput = styled__default.input.withConfig({
+var HiddenCheckboxInput = styled.input.withConfig({
   displayName: "CheckboxList__HiddenCheckboxInput",
   componentId: "sc-1yakme1-1"
 })(["opacity:0;position:absolute;z-index:-2;cursor:pointer;"]);
-var CheckboxLabel = styled__default.label.withConfig({
+var CheckboxLabel = styled.label.withConfig({
   displayName: "CheckboxList__CheckboxLabel",
   componentId: "sc-1yakme1-2"
 })(["position:relative;z-index:5;&:focus{outline:none;}"]);
@@ -19297,7 +22009,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     onClick: disabled ? noop : onSelect,
     onKeyDown: disabled ? noop : onSelect,
     tabIndex: 0
-  }, /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: {
       accentColor: radioButtonActive,
       inactiveColor: radioButtonInactive
@@ -19396,14 +22108,14 @@ var fallbackValues$e = {
   hoverColor: hoverColor$3
 };
 
-var IconWrapper = styled__default.div.withConfig({
+var IconWrapper = styled.div.withConfig({
   displayName: "Dropdown__IconWrapper",
   componentId: "sc-pn6m0h-0"
 })(["display:flex;flex-direction:column;justify-content:center;transition:transform 0.3s ease;", ""], function (_ref) {
   var open = _ref.open;
   return open ? "transform: rotate(-180deg)" : "";
 });
-var DropdownContentWrapper = styled__default.div.withConfig({
+var DropdownContentWrapper = styled.div.withConfig({
   displayName: "Dropdown__DropdownContentWrapper",
   componentId: "sc-pn6m0h-1"
 })(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}"], GREY_CHATEAU, WHITE, function (_ref2) {
@@ -19413,7 +22125,7 @@ var DropdownContentWrapper = styled__default.div.withConfig({
   var maxHeight = _ref3.maxHeight;
   return maxHeight || "400px";
 });
-var DropdownItemWrapper = styled__default.div.withConfig({
+var DropdownItemWrapper = styled.div.withConfig({
   displayName: "Dropdown__DropdownItemWrapper",
   componentId: "sc-pn6m0h-2"
 })(["background-color:", ";text-align:start;border-width:0px;border-color:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;width:100%;cursor:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:none;}"], function (_ref4) {
@@ -19434,7 +22146,7 @@ var DropdownItemWrapper = styled__default.div.withConfig({
       themeValues = _ref7.themeValues;
   return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 });
-var SearchInput = styled__default.input.withConfig({
+var SearchInput = styled.input.withConfig({
   displayName: "Dropdown__SearchInput",
   componentId: "sc-pn6m0h-3"
 })(["border:none;background-color:", ";font-size:16px;height:24px;"], function (_ref8) {
@@ -19665,11 +22377,11 @@ var Dropdown = function Dropdown(_ref9) {
 
 var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
 
-var SelectContainer = styled__default.div.withConfig({
+var SelectContainer = styled.div.withConfig({
   displayName: "FormSelectstyled__SelectContainer",
   componentId: "sc-hkrqrv-0"
 })(["width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;> * + *{margin-top:0.25rem;}"]);
-var SelectField = styled__default.select.withConfig({
+var SelectField = styled.select.withConfig({
   displayName: "FormSelectstyled__SelectField",
   componentId: "sc-hkrqrv-1"
 })(["border:1px solid ", ";border-radius:2px;height:48px;width:100%;padding:0.75rem 1rem;min-width:100px;margin:0;box-sizing:border-box;position:relative;font-size:1.1rem;font-family:Public Sans;line-height:2rem;font-weight:", ";background-color:", ";color:", ";box-shadow:none;&:focus{border:1px solid ", ";}"], function (_ref) {
@@ -19683,7 +22395,7 @@ var SelectField = styled__default.select.withConfig({
   var themeValues = _ref3.themeValues;
   return themeValues.color && themeValues.color;
 }, MATISSE_BLUE);
-var SelectOption = styled__default.option.withConfig({
+var SelectOption = styled.option.withConfig({
   displayName: "FormSelectstyled__SelectOption",
   componentId: "sc-hkrqrv-2"
 })([""]);
@@ -20593,7 +23305,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
   });
 };
 
-var DetailText = styled__default.p.withConfig({
+var DetailText = styled.p.withConfig({
   displayName: "Detailstyled__DetailText",
   componentId: "sc-vn1h4n-0"
 })(["font-size:", ";line-height:1.5;color:", ";font-weight:", ";margin:", ";text-align:", ";font-family:", ";", ";"], function (_ref) {
@@ -20797,8 +23509,8 @@ var DisplayCard = function DisplayCard(_ref) {
   }) : /*#__PURE__*/React__default.createElement(React.Fragment, null))))));
 };
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+function _extends$3() {
+  _extends$3 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -20812,10 +23524,10 @@ function _extends$2() {
     return target;
   };
 
-  return _extends$2.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$1(source, excluded) {
+function _objectWithoutPropertiesLoose$2(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -20833,7 +23545,7 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
 function _objectWithoutProperties$1(source, excluded) {
   if (source == null) return {};
 
-  var target = _objectWithoutPropertiesLoose$1(source, excluded);
+  var target = _objectWithoutPropertiesLoose$2(source, excluded);
 
   var key, i;
 
@@ -20916,7 +23628,7 @@ function _nonIterableRest$1() {
 var getUniqueFormatDelimiters = function getUniqueFormatDelimiters(formats, formatChar) {
   return _toConsumableArray$1(new Set(formats.join("").split(formatChar).join("").split("")));
 };
-var format$1 = function format(formatter) {
+var format$2 = function format(formatter) {
   return function (value) {
     var usedFormat = formatter.formats[value.length];
 
@@ -21009,7 +23721,7 @@ var FormattedInput = function FormattedInput(_ref) {
     selectionEnd: 0,
     rawValue: value,
     "delete": false,
-    formattedValue: format$1(formatter)(value)
+    formattedValue: format$2(formatter)(value)
   }),
       _useState2 = _slicedToArray$1(_useState, 2),
       state = _useState2[0],
@@ -21021,9 +23733,9 @@ var FormattedInput = function FormattedInput(_ref) {
       inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
     }
   });
-  return React__default.createElement("input", _extends$2({}, props, {
+  return React__default.createElement("input", _extends$3({}, props, {
     ref: inputEl,
-    value: format$1(formatter)(value),
+    value: format$2(formatter)(value),
     onKeyDown: function onKeyDown(event) {
       // Keep track of the state of the input before onChange, including if user is hitting delete
       setState({
@@ -21141,7 +23853,7 @@ var fallbackValues$i = {
 
 var _excluded$p = ["showErrors", "themeValues"],
     _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"];
-var InputField = styled__default.input.withConfig({
+var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
 })(["border:1px solid ", ";border-radius:2px;height:", ";width:100%;padding:1rem;min-width:100px;margin:0;box-sizing:border-box;position:relative;font-size:1.1rem;font-family:Public Sans;line-height:2rem;font-weight:", ";background-color:", ";color:", ";box-shadow:none;", " transition:background 0.3s ease;&:focus{outline:3px solid ", ";outline-offset:2px;}", " ", ""], function (_ref) {
@@ -21164,13 +23876,13 @@ var InputField = styled__default.input.withConfig({
   return background && "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
 }, ROYAL_BLUE, function (_ref6) {
   var disabled = _ref6.disabled;
-  return disabled && styled.css(["color:#6e727e;background-color:#f7f7f7;"]);
+  return disabled && css(["color:#6e727e;background-color:#f7f7f7;"]);
 }, function (_ref7) {
   var $extraStyles = _ref7.$extraStyles;
-  return styled.css(["", ""], $extraStyles);
+  return css(["", ""], $extraStyles);
 }); // eslint-disable-next-line no-unused-vars
 
-var FormattedInputField = styled__default(function (_ref8) {
+var FormattedInputField = styled(function (_ref8) {
   var showErrors = _ref8.showErrors,
       themeValues = _ref8.themeValues,
       props = _objectWithoutProperties(_ref8, _excluded$p);
@@ -21195,10 +23907,10 @@ var FormattedInputField = styled__default(function (_ref8) {
   return themeValues.color && themeValues.color;
 }, ROYAL_BLUE, function (_ref13) {
   var disabled = _ref13.disabled;
-  return disabled && styled.css(["color:#6e727e;background-color:#f7f7f7;"]);
+  return disabled && css(["color:#6e727e;background-color:#f7f7f7;"]);
 }, function (_ref14) {
   var extraStyles = _ref14.extraStyles;
-  return styled.css(["", ""], extraStyles);
+  return css(["", ""], extraStyles);
 });
 
 var FormInput = function FormInput(_ref15) {
@@ -21230,7 +23942,7 @@ var FormInput = function FormInput(_ref15) {
       showPassword = _useState2[0],
       setShowPassword = _useState2[1];
 
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   return /*#__PURE__*/React__default.createElement(Stack, {
@@ -21375,7 +24087,7 @@ var FormContainer = function FormContainer(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$s);
 
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -21392,7 +24104,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
       link = _ref.link,
       linkText = _ref.linkText;
 
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -21478,11 +24190,11 @@ var fallbackValues$k = {
 var ACTIVE = "ACTIVE";
 var EXPIRING_SOON = "EXPIRING_SOON";
 var EXPIRED = "EXPIRED";
-var CreditCardWrapper = styled__default.div.withConfig({
+var CreditCardWrapper = styled.div.withConfig({
   displayName: "FormattedCreditCard__CreditCardWrapper",
   componentId: "sc-s0ta5l-0"
 })(["display:flex;justify-content:flex-start;align-items:center;"]);
-var CCIconWrapper = styled__default.div.withConfig({
+var CCIconWrapper = styled.div.withConfig({
   displayName: "FormattedCreditCard__CCIconWrapper",
   componentId: "sc-s0ta5l-1"
 })(["margin-right:16px;width:30px;height:auto;display:flex;"]);
@@ -21538,15 +24250,15 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
 
 var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$k);
 
-var Hamburger = styled__default.button.withConfig({
+var Hamburger = styled.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
   componentId: "sc-4wlnwv-0"
 })(["padding:8px;display:inline-block;cursor:pointer;transition-property:opacity;transition-duration:0.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible;&:focus{outline:none;}"]);
-var HamburgerBox = styled__default.span.withConfig({
+var HamburgerBox = styled.span.withConfig({
   displayName: "HamburgerButton__HamburgerBox",
   componentId: "sc-4wlnwv-1"
 })(["width:34px;height:34px;display:inline-block;position:relative;"]);
-var HamburgerInner = styled__default.span.withConfig({
+var HamburgerInner = styled.span.withConfig({
   displayName: "HamburgerButton__HamburgerInner",
   componentId: "sc-4wlnwv-2"
 })(["display:block;top:auto;bottom:6px;left:2px;transition-duration:0.13s;transition-delay:0.13s;transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);margin-top:12px;background-color:", ";&,&::before,&::after{background-color:", ";width:30px;height:3px;position:absolute;transition-property:transform;transition-duration:0.15s;transition-timing-function:ease;}&::before,&::after{content:\"\";display:block;}&::before{top:-10px;transition:top 0.12s 0.2s cubic-bezier(0.33333,0.66667,0.66667,1),transform 0.13s cubic-bezier(0.55,0.055,0.675,0.19);}&::after{bottom:-10px;top:-20px;transition:top 0.2s 0.2s cubic-bezier(0.33333,0.66667,0.66667,1),opacity 0.1s linear;}&.active,&.active::before,&.active::after{background-color:", ";}&.active{transform:translate3d(0,-10px,0) rotate(-45deg);transition-delay:0.22s;transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);}&.active::after{top:0;opacity:0;transition:top 0.2s cubic-bezier(0.33333,0,0.66667,0.33333),opacity:0.1s 0.22s linear;}&.active::before{top:0;transform:rotate(-90deg);transition:top 0.1s 0.16s cubic-bezier(0.33333,0,0.66667,0.33333),transform 0.13s 0.25s cubic-bezier(0.215,0.61,0.355,1);}"], function (_ref) {
@@ -21580,7 +24292,7 @@ var HamburgerButton = function HamburgerButton(_ref4) {
   })));
 };
 
-var HeadingText = styled__default.h1.withConfig({
+var HeadingText = styled.h1.withConfig({
   displayName: "Headingstyled__HeadingText",
   componentId: "sc-1a3jd28-0"
 })(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));color:", ";font-weight:", ";margin:", ";text-align:", ";font-family:", ";", ";"], function (_ref) {
@@ -21680,7 +24392,7 @@ var Jumbo = function Jumbo(_ref) {
       showCartStatus = _ref$showCartStatus === void 0 ? false : _ref$showCartStatus,
       openCartSlider = _ref.openCartSlider;
 
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -21808,7 +24520,7 @@ var fallbackValues$o = {
   color: color$8
 };
 
-var SpinnerSvgAnimation = styled__default.svg.withConfig({
+var SpinnerSvgAnimation = styled.svg.withConfig({
   displayName: "Spinner__SpinnerSvgAnimation",
   componentId: "sc-vhupl9-0"
 })(["animation:rotate 2s linear infinite;margin:-25px 0 0 -25px;width:", "px;height:", "px;& .path{stroke:", ";stroke-linecap:round;animation:dash 1.5s ease-in-out infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"], function (_ref) {
@@ -21821,7 +24533,7 @@ var SpinnerSvgAnimation = styled__default.svg.withConfig({
   var color = _ref3.color;
   return color;
 });
-var SpinnerContainer$2 = styled__default.div.withConfig({
+var SpinnerContainer$2 = styled.div.withConfig({
   displayName: "Spinner__SpinnerContainer",
   componentId: "sc-vhupl9-1"
 })(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;"]);
@@ -22244,7 +24956,7 @@ var fallbackValues$r = {
   inactiveColor: inactiveColor
 };
 
-var HiddenRadioButton = styled__default.input.withConfig({
+var HiddenRadioButton = styled.input.withConfig({
   displayName: "RadioButton__HiddenRadioButton",
   componentId: "sc-v6hie9-0"
 })(["opacity:0;position:absolute;cursor:", ";"], function (_ref) {
@@ -33025,7 +35737,7 @@ var fallbackValues$u = {
   leftLabelStyles: leftLabelStyles
 };
 
-var HiddenToggleSwitchBox = styled__default.input.withConfig({
+var HiddenToggleSwitchBox = styled.input.withConfig({
   displayName: "ToggleSwitch__HiddenToggleSwitchBox",
   componentId: "sc-1t51u6v-0"
 })(["opacity:0;position:absolute;cursor:", ";height:24px;width:50px;", ""], function (_ref) {
@@ -33035,7 +35747,7 @@ var HiddenToggleSwitchBox = styled__default.input.withConfig({
   var isMobile = _ref2.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var VisibleSwitchComponent = styled__default.label.withConfig({
+var VisibleSwitchComponent = styled.label.withConfig({
   displayName: "ToggleSwitch__VisibleSwitchComponent",
   componentId: "sc-1t51u6v-1"
 })(["width:48px;height:24px;border-radius:48px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
@@ -33048,11 +35760,11 @@ var VisibleSwitchComponent = styled__default.label.withConfig({
   var isMobile = _ref5.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var ToggleSwitchMiddleRingComponent = styled__default.div.withConfig({
+var ToggleSwitchMiddleRingComponent = styled.div.withConfig({
   displayName: "ToggleSwitch__ToggleSwitchMiddleRingComponent",
   componentId: "sc-1t51u6v-2"
 })(["position:absolute;width:20px;height:20px;border:none;border-radius:50%;box-sizing:border-box;"]);
-var ToggleSwitchInnerRingComponent = styled__default.div.withConfig({
+var ToggleSwitchInnerRingComponent = styled.div.withConfig({
   displayName: "ToggleSwitch__ToggleSwitchInnerRingComponent",
   componentId: "sc-1t51u6v-3"
 })(["position:absolute;width:14px;height:14px;top:3px;left:3px;right:3px;bottom:3px;border-radius:50%;box-sizing:border-box;"]);
@@ -33204,7 +35916,7 @@ var themeValues = {
   focusBorder: focusBorder
 };
 
-var TypeaheadInputWrapper = styled__default.div.withConfig({
+var TypeaheadInputWrapper = styled.div.withConfig({
   displayName: "TypeaheadInput__TypeaheadInputWrapper",
   componentId: "sc-cumjdb-0"
 })(["display:flex;align-content:center;align-items:center;background:", ";input{border:0;height:72px;width:100%;padding:1.5rem;padding-left:1rem;min-width:100px;margin:0;box-sizing:border-box;position:relative;font-size:1.1rem;line-height:2rem;font-weight:400;background-color:", ";color:", ";box-shadow:none;border:1px solid transparent;&:focus{border:1px solid ", ";}}"], themeValues.background, themeValues.background, themeValues.black, themeValues.focusBorder);
@@ -33726,9 +36438,9 @@ function isDraft(value) {
 }
 function isDraftable(value) {
   if (!value) { return false; }
-  return isPlainObject(value) || !!value[DRAFTABLE] || !!value.constructor[DRAFTABLE];
+  return isPlainObject$1(value) || !!value[DRAFTABLE] || !!value.constructor[DRAFTABLE];
 }
-function isPlainObject(value) {
+function isPlainObject$1(value) {
   if (!value || typeof value !== "object") { return false; }
   if (Array.isArray(value)) { return true; }
   var proto = Object.getPrototypeOf(value);
@@ -34168,7 +36880,7 @@ var objectTraps = {
 
   set: set$1$1,
   deleteProperty: deleteProperty,
-  getOwnPropertyDescriptor: getOwnPropertyDescriptor,
+  getOwnPropertyDescriptor: getOwnPropertyDescriptor$1,
 
   defineProperty: function defineProperty() {
     throw new Error("Object.defineProperty() cannot be used on an Immer draft"); // prettier-ignore
@@ -34276,7 +36988,7 @@ function deleteProperty(state, prop) {
 // the same guarantee in ES5 mode.
 
 
-function getOwnPropertyDescriptor(state, prop) {
+function getOwnPropertyDescriptor$1(state, prop) {
   var owner = source$1(state);
   var desc = Reflect.getOwnPropertyDescriptor(owner, prop);
 
@@ -35468,7 +38180,7 @@ EditNameForm.reducer = reducer$2;
 EditNameForm.mapStateToProps = mapStateToProps$3;
 EditNameForm.mapDispatchToProps = mapDispatchToProps$2;
 
-var EditableListItem = styled__default.div.withConfig({
+var EditableListItem = styled.div.withConfig({
   displayName: "EditableListstyled__EditableListItem",
   componentId: "sc-10ehkz7-0"
 })(["box-sizing:border-box;background:", ";border-color:", ";height:", ";display:flex;justify-content:space-between;align-items:center;padding:1.5rem;:not(:last-child),:not(:first-child){box-shadow:inset 0px -1px 0px 0px rgb(202,206,216);}:first-child{border-top-left-radius:3px;border-top-right-radius:3px;}:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-shadow:none;}"], function (_ref) {
@@ -35478,7 +38190,7 @@ var EditableListItem = styled__default.div.withConfig({
   var listItemSize = _ref2.listItemSize;
   return listItemSize === "big" ? "120px" : "72px";
 });
-var EditableListItemControls = styled__default.div.withConfig({
+var EditableListItemControls = styled.div.withConfig({
   displayName: "EditableListstyled__EditableListItemControls",
   componentId: "sc-10ehkz7-1"
 })(["display:flex;justify-content:space-evenly;align-items:center;"]);
@@ -35599,14 +38311,14 @@ var EditableList = function EditableList(_ref) {
   }))));
 };
 
-var EditableTableContainer = styled__default.div.withConfig({
+var EditableTableContainer = styled.div.withConfig({
   displayName: "EditableTablestyled__EditableTableContainer",
   componentId: "sc-fd3i2a-0"
 })(["display:", ";flex-direction:column;flex:1;"], function (_ref) {
   var hide = _ref.hide;
   return hide ? "none" : "flex";
 });
-var EditableTableListItem = styled__default.div.withConfig({
+var EditableTableListItem = styled.div.withConfig({
   displayName: "EditableTablestyled__EditableTableListItem",
   componentId: "sc-fd3i2a-1"
 })(["width:100%;display:flex;", ";align-items:", ";flex-direction:", ";flex:1;", ";"], function (_ref2) {
@@ -35622,29 +38334,29 @@ var EditableTableListItem = styled__default.div.withConfig({
   var isMobile = _ref5.isMobile;
   return isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem";
 });
-var EditableListItemControls$1 = styled__default.div.withConfig({
+var EditableListItemControls$1 = styled.div.withConfig({
   displayName: "EditableTablestyled__EditableListItemControls",
   componentId: "sc-fd3i2a-2"
 })(["display:flex;justify-content:space-evenly;align-items:center;"]);
-var EditableListAction = styled__default.div.withConfig({
+var EditableListAction = styled.div.withConfig({
   displayName: "EditableTablestyled__EditableListAction",
   componentId: "sc-fd3i2a-3"
 })(["color:", ";align-items:center;font-size:1rem;padding-right:1rem;cursor:pointer;display:", ";"], MATISSE_BLUE, function (_ref6) {
   var hide = _ref6.hide;
   return hide ? "none" : "flex";
 });
-var ItemWrapper = styled__default.div.withConfig({
+var ItemWrapper = styled.div.withConfig({
   displayName: "EditableTablestyled__ItemWrapper",
   componentId: "sc-fd3i2a-4"
 })(["display:flex;flex-direction:row;flex:1;width:100%;border-bottom:1px solid ", ";"], GHOST_GREY);
-var ActionWrapper = styled__default.div.withConfig({
+var ActionWrapper = styled.div.withConfig({
   displayName: "EditableTablestyled__ActionWrapper",
   componentId: "sc-fd3i2a-5"
 })(["display:flex;align-self:center;justify-content:flex-end;", ";flex:1;"], function (_ref7) {
   var isMobile = _ref7.isMobile;
   return isMobile && "display: none";
 });
-var TableItemKey = styled__default.div.withConfig({
+var TableItemKey = styled.div.withConfig({
   displayName: "EditableTablestyled__TableItemKey",
   componentId: "sc-fd3i2a-6"
 })(["display:flex;", ";", ";", ";font-size:", ";color:", ";"], function (_ref8) {
@@ -35660,7 +38372,7 @@ var TableItemKey = styled__default.div.withConfig({
   var isMobile = _ref11.isMobile;
   return isMobile ? "1rem" : "1.125rem";
 }, STORM_GREY);
-var TableItemValue = styled__default.div.withConfig({
+var TableItemValue = styled.div.withConfig({
   displayName: "EditableTablestyled__TableItemValue",
   componentId: "sc-fd3i2a-7"
 })(["display:flex;", ";", ";", ";font-size:", ";color:", ";"], function (_ref12) {
@@ -35676,7 +38388,7 @@ var TableItemValue = styled__default.div.withConfig({
   var isMobile = _ref15.isMobile;
   return isMobile ? "1.125rem" : "1.0625rem";
 }, BRIGHT_GREY);
-var TableWrapper = styled__default.div.withConfig({
+var TableWrapper = styled.div.withConfig({
   displayName: "EditableTablestyled__TableWrapper",
   componentId: "sc-fd3i2a-8"
 })(["display:flex;flex-direction:row;flex:1;width:100%;"]);
@@ -38880,7 +41592,7 @@ var Modal$1 = function Modal(_ref) {
       buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children;
 
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
@@ -39178,7 +41890,7 @@ var menu = posed.div({
     }
   }
 });
-var ImposterMenu = styled__default(menu).withConfig({
+var ImposterMenu = styled(menu).withConfig({
   displayName: "NavMenuMobile__ImposterMenu",
   componentId: "sc-1pf0qp7-0"
 })(["position:fixed;top:72px;"]);
@@ -40127,7 +42839,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
       _ref$hideForwardButto = _ref.hideForwardButton,
       hideForwardButton = _ref$hideForwardButto === void 0 ? false : _ref$hideForwardButto;
 
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -40655,7 +43367,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       walletCheckboxMarked = _ref.walletCheckboxMarked,
       deniedCards = _ref.deniedCards;
 
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   React.useEffect(function () {
@@ -40978,7 +43690,7 @@ var RadioSection = function RadioSection(_ref) {
     }
   };
   var borderStyles = "\n    border-width: 0 0 1px 0;\n    border-color: ".concat(themeValues.borderColor, ";\n    border-style: solid;\n    border-radius: 0px;\n    transform-origin: 100% 0;\n\n    &:last-child {\n      border-width: 0;\n    }\n  ");
-  var RightIcon = styled__default.img.withConfig({
+  var RightIcon = styled.img.withConfig({
     displayName: "RadioSection__RightIcon",
     componentId: "sc-uema02-0"
   })(["height:", ";width:", ";", " transition:opacity 0.3s ease;"], function (_ref2) {
@@ -41209,7 +43921,7 @@ RegistrationForm.mapStateToProps = mapStateToProps$b;
 RegistrationForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -41330,7 +44042,7 @@ ResetPasswordForm.mapStateToProps = mapStateToProps$c;
 ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$b;
 
 var ResetConfirmationForm$2 = function ResetConfirmationForm() {
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -41649,7 +44361,7 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
 
-  var _useContext = React.useContext(styled.ThemeContext),
+  var _useContext = React.useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
   return /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Center, {
@@ -41696,7 +44408,7 @@ var fallbackValues$G = {
   imageBackgroundColor: imageBackgroundColor
 };
 
-var WelcomeImage = styled__default.img.withConfig({
+var WelcomeImage = styled.img.withConfig({
   displayName: "WelcomeModule__WelcomeImage",
   componentId: "sc-1d9znh4-0"
 })(["width:auto;height:215px;"]);
@@ -41779,11 +44491,12 @@ var WorkflowTile = function WorkflowTile(_ref) {
     minWidth: "100%",
     url: "/service/".concat(slug),
     extraStyles: "width: 100%;",
-    linkExtraStyles: "justify-content: center;"
+    linkExtraStyles: "justify-content: center;",
+    dataQa: slug
   }))));
 };
 
-var DashboardIframe = styled__default.iframe.withConfig({
+var DashboardIframe = styled.iframe.withConfig({
   displayName: "PeriscopeDashboardIframestyled__DashboardIframe",
   componentId: "sc-j0cucj-0"
 })(["border:none;box-shadow:0 0 5px 0 ", ";display:none;"], ALTO_GREY);
@@ -41915,7 +44628,7 @@ var CenterSingle = function CenterSingle(_ref) {
       centeredMobileContent = _ref$centeredMobileCo === void 0 ? false : _ref$centeredMobileCo,
       content = _ref.content,
       themeValues = _ref.themeValues;
-  var themeContext = React.useContext(styled.ThemeContext);
+  var themeContext = React.useContext(ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -41960,7 +44673,7 @@ var CenterStack = function CenterStack(_ref) {
       fullWidthMobile = _ref$fullWidthMobile === void 0 ? true : _ref$fullWidthMobile,
       content = _ref.content,
       themeValues = _ref.themeValues;
-  var themeContext = React.useContext(styled.ThemeContext);
+  var themeContext = React.useContext(ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -42000,7 +44713,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
       maxWidth = _ref$maxWidth === void 0 ? "75rem" : _ref$maxWidth,
       _ref$gutters = _ref.gutters,
       gutters = _ref$gutters === void 0 ? "2rem" : _ref$gutters;
-  var themeContext = React.useContext(styled.ThemeContext);
+  var themeContext = React.useContext(ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -42051,7 +44764,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
       _ref$sidebarVerticalC = _ref.sidebarVerticalCenter,
       sidebarVerticalCenter = _ref$sidebarVerticalC === void 0 ? false : _ref$sidebarVerticalC,
       themeValues = _ref.themeValues;
-  var themeContext = React.useContext(styled.ThemeContext);
+  var themeContext = React.useContext(ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -42107,7 +44820,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
       _ref$sidebarVerticalC = _ref.sidebarVerticalCenter,
       sidebarVerticalCenter = _ref$sidebarVerticalC === void 0 ? false : _ref$sidebarVerticalC,
       themeValues = _ref.themeValues;
-  var themeContext = React.useContext(styled.ThemeContext);
+  var themeContext = React.useContext(ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",