@trafilea/afrodita-components 4.0.1-beta.0 → 4.0.1-beta.1

package/build/index.js

@@ -64,7 +64,7 @@ function __makeTemplateObject(cooked, raw) {
 
 var IconWrapper = function (_a) {
     var height = _a.height, width = _a.width, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children, testid = _a.testid, fill = _a.fill;
-    return (jsxRuntime.jsxs("svg", __assign({ width: width ? width + "rem" : '100%', height: height ? height + "rem" : '100%', viewBox: "0 0 " + viewBoxX + " " + viewBoxY, xmlns: "http://www.w3.org/2000/svg", "data-testid": testid ? testid : 'IconWrapper', fill: fill }, { children: [jsxRuntime.jsxs("title", { children: [title, " icon"] }, void 0), children] }), void 0));
+    return (jsxRuntime.jsxs("svg", __assign({ width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid": testid ? testid : 'IconWrapper', fill: fill }, { children: [jsxRuntime.jsxs("title", { children: [title, " icon"] }, void 0), children] }), void 0));
 };
 
 var SixtyDaysGuarantee = function (_a) {
@@ -209,12 +209,12 @@ var FlagUSA = function (_a) {
 
 var Minus = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
-    return (jsxRuntime.jsxs("svg", __assign({ width: width + "rem", height: height + "rem", viewBox: "0 0 36 5", fill: fill, xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("path", { d: "M35.25 0H0.75C0.335625 0 0 0.372917 0 0.833333V4.16667C0 4.62708 0.335625 5 0.75 5H35.25C35.6644 5 36 4.62708 36 4.16667V0.833333C36 0.372917 35.6644 0 35.25 0Z", fill: fill }, void 0)] }), void 0));
+    return (jsxRuntime.jsxs("svg", __assign({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 36 5", fill: fill, xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("path", { d: "M35.25 0H0.75C0.335625 0 0 0.372917 0 0.833333V4.16667C0 4.62708 0.335625 5 0.75 5H35.25C35.6644 5 36 4.62708 36 4.16667V0.833333C36 0.372917 35.6644 0 35.25 0Z", fill: fill }, void 0)] }), void 0));
 };
 
 var Plus = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
-    return (jsxRuntime.jsxs("svg", __assign({ width: width + "rem", height: height + "rem", viewBox: "0 0 32 32", fill: fill, xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("path", { d: "M31.3333 14H18V0.666667C18 0.298333 17.7017 0 17.3333 0H14.6667C14.2983 0 14 0.298333 14 0.666667V14H0.666667C0.298333 14 0 14.2983 0 14.6667V17.3333C0 17.7017 0.298333 18 0.666667 18H14V31.3333C14 31.7017 14.2983 32 14.6667 32H17.3333C17.7017 32 18 31.7017 18 31.3333V18H31.3333C31.7017 18 32 17.7017 32 17.3333V14.6667C32 14.2983 31.7017 14 31.3333 14Z", fill: fill }, void 0)] }), void 0));
+    return (jsxRuntime.jsxs("svg", __assign({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 32 32", fill: fill, xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("path", { d: "M31.3333 14H18V0.666667C18 0.298333 17.7017 0 17.3333 0H14.6667C14.2983 0 14 0.298333 14 0.666667V14H0.666667C0.298333 14 0 14.2983 0 14.6667V17.3333C0 17.7017 0.298333 18 0.666667 18H14V31.3333C14 31.7017 14.2983 32 14.6667 32H17.3333C17.7017 32 18 31.7017 18 31.3333V18H31.3333C31.7017 18 32 17.7017 32 17.3333V14.6667C32 14.2983 31.7017 14 31.3333 14Z", fill: fill }, void 0)] }), void 0));
 };
 
 var Rule = function (_a) {
@@ -462,14 +462,14 @@ function _extends$1() {
 }
 
 function memoize(fn) {
-  var cache = {};
+  var cache = Object.create(null);
   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|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|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 = /^((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|enterKeyHint|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|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|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 isPropValid = /* #__PURE__ */memoize(function (prop) {
   return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -542,7 +542,13 @@ var StyleSheet = /*#__PURE__*/function () {
       var before;
 
       if (_this.tags.length === 0) {
-        before = _this.prepend ? _this.container.firstChild : _this.before;
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
       } else {
         before = _this.tags[_this.tags.length - 1].nextSibling;
       }
@@ -560,6 +566,7 @@ var StyleSheet = /*#__PURE__*/function () {
     this.key = options.key;
     this.container = options.container;
     this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
     this.before = null;
   }
 
@@ -599,7 +606,7 @@ var StyleSheet = /*#__PURE__*/function () {
         // the big drawback is that the css won't be editable in devtools
         sheet.insertRule(rule, sheet.cssRules.length);
       } catch (e) {
-        if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-ms-input-placeholder|-moz-read-write|-moz-read-only){/.test(rule)) {
+        if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(rule)) {
           console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
         }
       }
@@ -613,7 +620,7 @@ var StyleSheet = /*#__PURE__*/function () {
   _proto.flush = function flush() {
     // $FlowFixMe
     this.tags.forEach(function (tag) {
-      return tag.parentNode.removeChild(tag);
+      return tag.parentNode && tag.parentNode.removeChild(tag);
     });
     this.tags = [];
     this.ctr = 0;
@@ -648,6 +655,12 @@ var abs = Math.abs;
  */
 var from = String.fromCharCode;
 
+/**
+ * @param {object}
+ * @return {object}
+ */
+var assign = Object.assign;
+
 /**
  * @param {string} value
  * @param {number} length
@@ -686,7 +699,7 @@ function replace (value, pattern, replacement) {
 
 /**
  * @param {string} value
- * @param {string} value
+ * @param {string} search
  * @return {number}
  */
 function indexof (value, search) {
@@ -755,11 +768,11 @@ var characters = '';
 
 /**
  * @param {string} value
- * @param {object} root
- * @param {object?} parent
+ * @param {object | null} root
+ * @param {object | null} parent
  * @param {string} type
- * @param {string[]} props
- * @param {object[]} children
+ * @param {string[] | string} props
+ * @param {object[] | string} children
  * @param {number} length
  */
 function node (value, root, parent, type, props, children, length) {
@@ -767,12 +780,12 @@ function node (value, root, parent, type, props, children, length) {
 }
 
 /**
- * @param {string} value
  * @param {object} root
- * @param {string} type
+ * @param {object} props
+ * @return {object}
  */
-function copy (value, root, type) {
-	return node(value, root.root, root.parent, type, root.props, root.children, 0)
+function copy (root, props) {
+	return assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
 }
 
 /**
@@ -921,7 +934,9 @@ function delimiter (type) {
 				return position
 			// " '
 			case 34: case 39:
-				return delimiter(type === 34 || type === 39 ? type : character)
+				if (type !== 34 && type !== 39)
+					delimiter(character);
+				break
 			// (
 			case 40:
 				if (type === 41)
@@ -1003,8 +1018,15 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 
 	while (scanning)
 		switch (previous = character, character = next()) {
-			// " ' [ (
-			case 34: case 39: case 91: case 40:
+			// (
+			case 40:
+				if (previous != 108 && characters.charCodeAt(length - 1) == 58) {
+					if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f') != -1)
+						ampersand = -1;
+					break
+				}
+			// " ' [
+			case 34: case 39: case 91:
 				characters += delimit(character);
 				break
 			// \t \n \r \s
@@ -1054,7 +1076,7 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 										parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
 										break
 									default:
-										parse(characters, reference, reference, reference, [''], children, length, points, children);
+										parse(characters, reference, reference, reference, [''], children, 0, points, children);
 								}
 				}
 
@@ -1085,7 +1107,7 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 						if (peek() === 45)
 							characters += delimit(next());
 
-						atrule = peek(), offset = strlen(type = characters += identifier(caret())), character++;
+						atrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++;
 						break
 					// -
 					case 45:
@@ -1288,6 +1310,7 @@ function stringify$1 (element, index, children, callback) {
 	switch (element.type) {
 		case IMPORT: case DECLARATION: return element.return = element.return || element.value
 		case COMMENT: return ''
+		case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'
 		case RULESET: element.value = element.props.join(',');
 	}
 
@@ -1330,31 +1353,32 @@ function rulesheet (callback) {
  * @param {function} callback
  */
 function prefixer (element, index, children, callback) {
-	if (!element.return)
-		switch (element.type) {
-			case DECLARATION: element.return = prefix(element.value, element.length);
-				break
-			case KEYFRAMES:
-				return serialize([copy(replace(element.value, '@', '@' + WEBKIT), element, '')], callback)
-			case RULESET:
-				if (element.length)
-					return combine(element.props, function (value) {
-						switch (match$1(value, /(::plac\w+|:read-\w+)/)) {
-							// :read-(only|write)
-							case ':read-only': case ':read-write':
-								return serialize([copy(replace(value, /:(read-\w+)/, ':' + MOZ + '$1'), element, '')], callback)
-							// :placeholder
-							case '::placeholder':
-								return serialize([
-									copy(replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1'), element, ''),
-									copy(replace(value, /:(plac\w+)/, ':' + MOZ + '$1'), element, ''),
-									copy(replace(value, /:(plac\w+)/, MS + 'input-$1'), element, '')
-								], callback)
-						}
-
-						return ''
-					})
-		}
+	if (element.length > -1)
+		if (!element.return)
+			switch (element.type) {
+				case DECLARATION: element.return = prefix(element.value, element.length);
+					break
+				case KEYFRAMES:
+					return serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback)
+				case RULESET:
+					if (element.length)
+						return combine(element.props, function (value) {
+							switch (match$1(value, /(::plac\w+|:read-\w+)/)) {
+								// :read-(only|write)
+								case ':read-only': case ':read-write':
+									return serialize([copy(element, {props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]})], callback)
+								// :placeholder
+								case '::placeholder':
+									return serialize([
+										copy(element, {props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]}),
+										copy(element, {props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]}),
+										copy(element, {props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]})
+									], callback)
+							}
+
+							return ''
+						})
+			}
 }
 
 var weakMemoize = function weakMemoize(func) {
@@ -1374,6 +1398,29 @@ var weakMemoize = function weakMemoize(func) {
 
 var last = function last(arr) {
   return arr.length ? arr[arr.length - 1] : null;
+}; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
+
+
+var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
+  var previous = 0;
+  var character = 0;
+
+  while (true) {
+    previous = character;
+    character = peek(); // &\f
+
+    if (previous === 38 && character === 12) {
+      points[index] = 1;
+    }
+
+    if (token(character)) {
+      break;
+    }
+
+    next();
+  }
+
+  return slice(begin, position);
 };
 
 var toRules = function toRules(parsed, points) {
@@ -1393,7 +1440,7 @@ var toRules = function toRules(parsed, points) {
           points[index] = 1;
         }
 
-        parsed[index] += identifier(position - 1);
+        parsed[index] += identifierWithPointTracking(position - 1, points, index);
         break;
 
       case 2:
@@ -1426,8 +1473,9 @@ var getRules = function getRules(value, points) {
 
 var fixedElements = /* #__PURE__ */new WeakMap();
 var compat = function compat(element) {
-  if (element.type !== 'rule' || !element.parent || // .length indicates if this rule contains pseudo or not
-  !element.length) {
+  if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
+  // negative .length indicates that this rule has been already prefixed
+  element.length < 1) {
     return;
   }
 
@@ -1541,8 +1589,8 @@ var incorrectImportAlarm = function incorrectImportAlarm(element, index, childre
   }
 };
 
-var isBrowser$6 = typeof document !== 'undefined';
-var getServerStylisCache = isBrowser$6 ? undefined : weakMemoize(function () {
+var isBrowser$5 = typeof document !== 'undefined';
+var getServerStylisCache = isBrowser$5 ? undefined : weakMemoize(function () {
   return memoize(function () {
     var cache = {};
     return function (name) {
@@ -1559,7 +1607,7 @@ var createCache = function createCache(options) {
     throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
   }
 
-  if (isBrowser$6 && key === 'css') {
+  if (isBrowser$5 && key === 'css') {
     var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
     // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
     // note this very very intentionally targets all style elements regardless of the key to ensure
@@ -1596,7 +1644,7 @@ var createCache = function createCache(options) {
   var container;
   var nodesToHydrate = [];
 
-  if (isBrowser$6) {
+  if (isBrowser$5) {
     container = options.container || document.head;
     Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
     // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
@@ -1624,7 +1672,7 @@ var createCache = function createCache(options) {
     }), incorrectImportAlarm);
   }
 
-  if (isBrowser$6) {
+  if (isBrowser$5) {
     var currentSheet;
     var finalizingPlugins = [stringify$1, process.env.NODE_ENV !== 'production' ? function (element) {
       if (!element.root) {
@@ -1727,7 +1775,8 @@ var createCache = function createCache(options) {
       container: container,
       nonce: options.nonce,
       speedy: options.speedy,
-      prepend: options.prepend
+      prepend: options.prepend,
+      insertionPoint: options.insertionPoint
     }),
     nonce: options.nonce,
     inserted: inserted,
@@ -1966,8 +2015,8 @@ var TYPE_STATICS = {};
 TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
 TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
 
-var isBrowser$5 = typeof document !== 'undefined';
-function getRegisteredStyles$1(registered, registeredStyles, classNames) {
+var isBrowser$4 = typeof document !== 'undefined';
+function getRegisteredStyles(registered, registeredStyles, classNames) {
   var rawClassName = '';
   classNames.split(' ').forEach(function (className) {
     if (registered[className] !== undefined) {
@@ -1978,7 +2027,7 @@ function getRegisteredStyles$1(registered, registeredStyles, classNames) {
   });
   return rawClassName;
 }
-var insertStyles$1 = function insertStyles(cache, serialized, isStringTag) {
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
   var className = cache.key + "-" + serialized.name;
 
   if ( // we only need to add the styles to the registered cache if the
@@ -1990,7 +2039,7 @@ var insertStyles$1 = function insertStyles(cache, serialized, isStringTag) {
   // in node since emotion-server relies on whether a style is in
   // the registered cache to know whether a style is global or not
   // also, note that this check will be dead code eliminated in the browser
-  isBrowser$5 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+  isBrowser$4 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
     cache.registered[className] = serialized.styles;
   }
 
@@ -2001,14 +2050,14 @@ var insertStyles$1 = function insertStyles(cache, serialized, isStringTag) {
     do {
       var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
 
-      if (!isBrowser$5 && maybeStyles !== undefined) {
+      if (!isBrowser$4 && maybeStyles !== undefined) {
         stylesForSSR += maybeStyles;
       }
 
       current = current.next;
     } while (current !== undefined);
 
-    if (!isBrowser$5 && stylesForSSR.length !== 0) {
+    if (!isBrowser$4 && stylesForSSR.length !== 0) {
       return stylesForSSR;
     }
   }
@@ -2117,34 +2166,34 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 
-var ILLEGAL_ESCAPE_SEQUENCE_ERROR$2 = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
-var UNDEFINED_AS_OBJECT_KEY_ERROR$1 = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
-var hyphenateRegex$1 = /[A-Z]|^ms/g;
-var animationRegex$1 = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+var ILLEGAL_ESCAPE_SEQUENCE_ERROR$1 = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
+var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
-var isCustomProperty$1 = function isCustomProperty(property) {
+var isCustomProperty = function isCustomProperty(property) {
   return property.charCodeAt(1) === 45;
 };
 
-var isProcessableValue$1 = function isProcessableValue(value) {
+var isProcessableValue = function isProcessableValue(value) {
   return value != null && typeof value !== 'boolean';
 };
 
-var processStyleName$1 = /* #__PURE__ */memoize(function (styleName) {
-  return isCustomProperty$1(styleName) ? styleName : styleName.replace(hyphenateRegex$1, '-$&').toLowerCase();
+var processStyleName = /* #__PURE__ */memoize(function (styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
 });
 
-var processStyleValue$1 = function processStyleValue(key, value) {
+var processStyleValue = function processStyleValue(key, value) {
   switch (key) {
     case 'animation':
     case 'animationName':
       {
         if (typeof value === 'string') {
-          return value.replace(animationRegex$1, function (match, p1, p2) {
-            cursor$1 = {
+          return value.replace(animationRegex, function (match, p1, p2) {
+            cursor = {
               name: p1,
               styles: p2,
-              next: cursor$1
+              next: cursor
             };
             return p1;
           });
@@ -2152,7 +2201,7 @@ var processStyleValue$1 = function processStyleValue(key, value) {
       }
   }
 
-  if (unitlessKeys[key] !== 1 && !isCustomProperty$1(key) && typeof value === 'number' && value !== 0) {
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
     return value + 'px';
   }
 
@@ -2160,25 +2209,25 @@ var processStyleValue$1 = function processStyleValue(key, value) {
 };
 
 if (process.env.NODE_ENV !== 'production') {
-  var contentValuePattern$1 = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-  var contentValues$1 = ['normal', 'none', 'initial', 'inherit', 'unset'];
-  var oldProcessStyleValue$1 = processStyleValue$1;
-  var msPattern$1 = /^-ms-/;
-  var hyphenPattern$1 = /-(.)/g;
-  var hyphenatedCache$1 = {};
-
-  processStyleValue$1 = function processStyleValue(key, value) {
+  var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+  var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
+  var oldProcessStyleValue = processStyleValue;
+  var msPattern = /^-ms-/;
+  var hyphenPattern = /-(.)/g;
+  var hyphenatedCache = {};
+
+  processStyleValue = function processStyleValue(key, value) {
     if (key === 'content') {
-      if (typeof value !== 'string' || contentValues$1.indexOf(value) === -1 && !contentValuePattern$1.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
+      if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
         throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
       }
     }
 
-    var processed = oldProcessStyleValue$1(key, value);
+    var processed = oldProcessStyleValue(key, value);
 
-    if (processed !== '' && !isCustomProperty$1(key) && key.indexOf('-') !== -1 && hyphenatedCache$1[key] === undefined) {
-      hyphenatedCache$1[key] = true;
-      console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern$1, 'ms-').replace(hyphenPattern$1, function (str, _char) {
+    if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
+      hyphenatedCache[key] = true;
+      console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
         return _char.toUpperCase();
       }) + "?");
     }
@@ -2187,7 +2236,7 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
-function handleInterpolation$1(mergedProps, registered, interpolation) {
+function handleInterpolation(mergedProps, registered, interpolation) {
   if (interpolation == null) {
     return '';
   }
@@ -2209,10 +2258,10 @@ function handleInterpolation$1(mergedProps, registered, interpolation) {
     case 'object':
       {
         if (interpolation.anim === 1) {
-          cursor$1 = {
+          cursor = {
             name: interpolation.name,
             styles: interpolation.styles,
-            next: cursor$1
+            next: cursor
           };
           return interpolation.name;
         }
@@ -2224,10 +2273,10 @@ function handleInterpolation$1(mergedProps, registered, interpolation) {
             // not the most efficient thing ever but this is a pretty rare case
             // and there will be very few iterations of this generally
             while (next !== undefined) {
-              cursor$1 = {
+              cursor = {
                 name: next.name,
                 styles: next.styles,
-                next: cursor$1
+                next: cursor
               };
               next = next.next;
             }
@@ -2242,16 +2291,16 @@ function handleInterpolation$1(mergedProps, registered, interpolation) {
           return styles;
         }
 
-        return createStringFromObject$1(mergedProps, registered, interpolation);
+        return createStringFromObject(mergedProps, registered, interpolation);
       }
 
     case 'function':
       {
         if (mergedProps !== undefined) {
-          var previousCursor = cursor$1;
+          var previousCursor = cursor;
           var result = interpolation(mergedProps);
-          cursor$1 = previousCursor;
-          return handleInterpolation$1(mergedProps, registered, result);
+          cursor = previousCursor;
+          return handleInterpolation(mergedProps, registered, result);
         } else if (process.env.NODE_ENV !== 'production') {
           console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
         }
@@ -2262,7 +2311,7 @@ function handleInterpolation$1(mergedProps, registered, interpolation) {
     case 'string':
       if (process.env.NODE_ENV !== 'production') {
         var matched = [];
-        var replaced = interpolation.replace(animationRegex$1, function (match, p1, p2) {
+        var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
           var fakeVarName = "animation" + matched.length;
           matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
           return "${" + fakeVarName + "}";
@@ -2285,12 +2334,12 @@ function handleInterpolation$1(mergedProps, registered, interpolation) {
   return cached !== undefined ? cached : interpolation;
 }
 
-function createStringFromObject$1(mergedProps, registered, obj) {
+function createStringFromObject(mergedProps, registered, obj) {
   var string = '';
 
   if (Array.isArray(obj)) {
     for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation$1(mergedProps, registered, obj[i]) + ";";
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
     }
   } else {
     for (var _key in obj) {
@@ -2299,8 +2348,8 @@ function createStringFromObject$1(mergedProps, registered, obj) {
       if (typeof value !== 'object') {
         if (registered != null && registered[value] !== undefined) {
           string += _key + "{" + registered[value] + "}";
-        } else if (isProcessableValue$1(value)) {
-          string += processStyleName$1(_key) + ":" + processStyleValue$1(_key, value) + ";";
+        } else if (isProcessableValue(value)) {
+          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
         }
       } else {
         if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
@@ -2309,25 +2358,25 @@ function createStringFromObject$1(mergedProps, registered, obj) {
 
         if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
           for (var _i = 0; _i < value.length; _i++) {
-            if (isProcessableValue$1(value[_i])) {
-              string += processStyleName$1(_key) + ":" + processStyleValue$1(_key, value[_i]) + ";";
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
             }
           }
         } else {
-          var interpolated = handleInterpolation$1(mergedProps, registered, value);
+          var interpolated = handleInterpolation(mergedProps, registered, value);
 
           switch (_key) {
             case 'animation':
             case 'animationName':
               {
-                string += processStyleName$1(_key) + ":" + interpolated + ";";
+                string += processStyleName(_key) + ":" + interpolated + ";";
                 break;
               }
 
             default:
               {
                 if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
-                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR$1);
+                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
                 }
 
                 string += _key + "{" + interpolated + "}";
@@ -2341,32 +2390,32 @@ function createStringFromObject$1(mergedProps, registered, obj) {
   return string;
 }
 
-var labelPattern$1 = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-var sourceMapPattern$1;
+var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
+var sourceMapPattern;
 
 if (process.env.NODE_ENV !== 'production') {
-  sourceMapPattern$1 = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
 } // this is the cursor for keyframes
 // keyframes are stored on the SerializedStyles object as a linked list
 
 
-var cursor$1;
-var serializeStyles$1 = function serializeStyles(args, registered, mergedProps) {
+var cursor;
+var serializeStyles = function serializeStyles(args, registered, mergedProps) {
   if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
     return args[0];
   }
 
   var stringMode = true;
   var styles = '';
-  cursor$1 = undefined;
+  cursor = undefined;
   var strings = args[0];
 
   if (strings == null || strings.raw === undefined) {
     stringMode = false;
-    styles += handleInterpolation$1(mergedProps, registered, strings);
+    styles += handleInterpolation(mergedProps, registered, strings);
   } else {
     if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
-      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$2);
+      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
     }
 
     styles += strings[0];
@@ -2374,11 +2423,11 @@ var serializeStyles$1 = function serializeStyles(args, registered, mergedProps)
 
 
   for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation$1(mergedProps, registered, args[i]);
+    styles += handleInterpolation(mergedProps, registered, args[i]);
 
     if (stringMode) {
       if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
-        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$2);
+        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
       }
 
       styles += strings[i];
@@ -2388,18 +2437,18 @@ var serializeStyles$1 = function serializeStyles(args, registered, mergedProps)
   var sourceMap;
 
   if (process.env.NODE_ENV !== 'production') {
-    styles = styles.replace(sourceMapPattern$1, function (match) {
+    styles = styles.replace(sourceMapPattern, function (match) {
       sourceMap = match;
       return '';
     });
   } // using a global regex with .exec is stateful so lastIndex has to be reset each time
 
 
-  labelPattern$1.lastIndex = 0;
+  labelPattern.lastIndex = 0;
   var identifierName = '';
   var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
 
-  while ((match = labelPattern$1.exec(styles)) !== null) {
+  while ((match = labelPattern.exec(styles)) !== null) {
     identifierName += '-' + // $FlowFixMe we know it's not null
     match[1];
   }
@@ -2412,7 +2461,7 @@ var serializeStyles$1 = function serializeStyles(args, registered, mergedProps)
       name: name,
       styles: styles,
       map: sourceMap,
-      next: cursor$1,
+      next: cursor,
       toString: function toString() {
         return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
       }
@@ -2422,12 +2471,12 @@ var serializeStyles$1 = function serializeStyles(args, registered, mergedProps)
   return {
     name: name,
     styles: styles,
-    next: cursor$1
+    next: cursor
   };
 };
 
-var isBrowser$4 = typeof document !== 'undefined';
-var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+var isBrowser$3 = typeof document !== 'undefined';
+var hasOwnProperty$1 = {}.hasOwnProperty;
 
 var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
@@ -2438,6 +2487,11 @@ var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing thi
 typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
   key: 'css'
 }) : null);
+
+if (process.env.NODE_ENV !== 'production') {
+  EmotionCacheContext.displayName = 'EmotionCacheContext';
+}
+
 EmotionCacheContext.Provider;
 
 var withEmotionCache = function withEmotionCache(func) {
@@ -2449,7 +2503,7 @@ var withEmotionCache = function withEmotionCache(func) {
   });
 };
 
-if (!isBrowser$4) {
+if (!isBrowser$3) {
   withEmotionCache = function withEmotionCache(func) {
     return function (props) {
       var cache = React.useContext(EmotionCacheContext);
@@ -2474,6 +2528,11 @@ if (!isBrowser$4) {
 }
 
 var ThemeContext = /* #__PURE__ */React.createContext({});
+
+if (process.env.NODE_ENV !== 'production') {
+  ThemeContext.displayName = 'EmotionThemeContext';
+}
+
 var useTheme$1 = function useTheme() {
   return React.useContext(ThemeContext);
 };
@@ -2513,12 +2572,48 @@ var ThemeProvider$1 = function ThemeProvider(props) {
   }, props.children);
 };
 
-// thus we only need to replace what is a valid character for JS, but not for CSS
+var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {
+  // V8
+  var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line);
+
+  if (match) {
+    // The match may be something like 'Object.createEmotionProps'
+    var parts = match[1].split('.');
+    return parts[parts.length - 1];
+  } // Safari / Firefox
+
+
+  match = /^([A-Za-z0-9$.]+)@/.exec(line);
+  if (match) return match[1];
+  return undefined;
+};
+
+var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS
+// identifiers, thus we only need to replace what is a valid character for JS,
+// but not for CSS.
 
 var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
   return identifier.replace(/\$/g, '-');
 };
 
+var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {
+  if (!stackTrace) return undefined;
+  var lines = stackTrace.split('\n');
+
+  for (var i = 0; i < lines.length; i++) {
+    var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error"
+
+    if (!functionName) continue; // If we reach one of these, we have gone too far and should quit
+
+    if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an
+    // uppercase letter
+
+    if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);
+  }
+
+  return undefined;
+};
+
 var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
 var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
 var createEmotionProps = function createEmotionProps(type, props) {
@@ -2535,28 +2630,21 @@ var createEmotionProps = function createEmotionProps(type, props) {
     }
   }
 
-  newProps[typePropName] = type;
-
-  if (process.env.NODE_ENV !== 'production') {
-    var error = new Error();
-
-    if (error.stack) {
-      // chrome
-      var match = error.stack.match(/at (?:Object\.|Module\.|)(?:jsx|createEmotionProps).*\n\s+at (?:Object\.|)([A-Z][A-Za-z0-9$]+) /);
+  newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when
+  // the label hasn't already been computed
 
-      if (!match) {
-        // safari and firefox
-        match = error.stack.match(/.*\n([A-Z][A-Za-z0-9$]+)@/);
-      }
-
-      if (match) {
-        newProps[labelPropName] = sanitizeIdentifier(match[1]);
-      }
-    }
+  if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {
+    var label = getLabelFromStackTrace(new Error().stack);
+    if (label) newProps[labelPropName] = label;
   }
 
   return newProps;
 };
+
+var Noop$2 = function Noop() {
+  return null;
+};
+
 var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
   var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
   // not passing the registered cache to serializeStyles because it would
@@ -2571,22 +2659,22 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
   var className = '';
 
   if (typeof props.className === 'string') {
-    className = getRegisteredStyles$1(cache.registered, registeredStyles, props.className);
+    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
   } else if (props.className != null) {
     className = props.className + " ";
   }
 
-  var serialized = serializeStyles$1(registeredStyles, undefined, typeof cssProp === 'function' || Array.isArray(cssProp) ? React.useContext(ThemeContext) : undefined);
+  var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));
 
   if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
     var labelFromStack = props[labelPropName];
 
     if (labelFromStack) {
-      serialized = serializeStyles$1([serialized, 'label:' + labelFromStack + ';']);
+      serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);
     }
   }
 
-  var rules = insertStyles$1(cache, serialized, typeof type === 'string');
+  var rules = insertStyles(cache, serialized, typeof type === 'string');
   className += cache.key + "-" + serialized.name;
   var newProps = {};
 
@@ -2599,8 +2687,9 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
   newProps.ref = ref;
   newProps.className = className;
   var ele = /*#__PURE__*/React.createElement(type, newProps);
+  var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop$2, null);
 
-  if (!isBrowser$4 && rules !== undefined) {
+  if (!isBrowser$3 && rules !== undefined) {
     var _ref;
 
     var serializedNames = serialized.name;
@@ -2611,12 +2700,13 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
       next = next.next;
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
+    possiblyStyleElement = /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
       __html: rules
-    }, _ref.nonce = cache.sheet.nonce, _ref)), ele);
-  }
+    }, _ref.nonce = cache.sheet.nonce, _ref));
+  } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
 
-  return ele;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -2625,7 +2715,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 var pkg = {
 	name: "@emotion/react",
-	version: "11.4.0",
+	version: "11.7.1",
 	main: "dist/emotion-react.cjs.js",
 	module: "dist/emotion-react.esm.js",
 	browser: {
@@ -2638,7 +2728,7 @@ var pkg = {
 		"dist",
 		"jsx-runtime",
 		"jsx-dev-runtime",
-		"isolated-hoist-non-react-statics-do-not-use-this-in-your-code",
+		"_isolated-hnrs",
 		"types/*.d.ts",
 		"macro.js",
 		"macro.d.ts",
@@ -2652,9 +2742,9 @@ var pkg = {
 	},
 	dependencies: {
 		"@babel/runtime": "^7.13.10",
-		"@emotion/cache": "^11.4.0",
+		"@emotion/cache": "^11.7.1",
 		"@emotion/serialize": "^1.0.2",
-		"@emotion/sheet": "^1.0.1",
+		"@emotion/sheet": "^1.1.0",
 		"@emotion/utils": "^1.0.0",
 		"@emotion/weak-memoize": "^0.2.5",
 		"hoist-non-react-statics": "^3.3.1"
@@ -2673,10 +2763,10 @@ var pkg = {
 	},
 	devDependencies: {
 		"@babel/core": "^7.13.10",
-		"@emotion/css": "11.1.3",
-		"@emotion/css-prettifier": "1.0.0",
+		"@emotion/css": "11.7.1",
+		"@emotion/css-prettifier": "1.0.1",
 		"@emotion/server": "11.4.0",
-		"@emotion/styled": "11.3.0",
+		"@emotion/styled": "11.6.0",
 		"@types/react": "^16.9.11",
 		dtslint: "^0.3.0",
 		"html-tag-names": "^1.1.2",
@@ -2693,7 +2783,7 @@ var pkg = {
 			"./index.js",
 			"./jsx-runtime.js",
 			"./jsx-dev-runtime.js",
-			"./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js"
+			"./_isolated-hnrs.js"
 		],
 		umdName: "emotionReact"
 	}
@@ -2714,9 +2804,9 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   }
 
   var styles = props.styles;
-  var serialized = serializeStyles$1([styles], undefined, typeof styles === 'function' || Array.isArray(styles) ? React.useContext(ThemeContext) : undefined);
+  var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));
 
-  if (!isBrowser$4) {
+  if (!isBrowser$3) {
     var _ref;
 
     var serializedNames = serialized.name;
@@ -2789,7 +2879,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
 
     if (serialized.next !== undefined) {
       // insert keyframes
-      insertStyles$1(cache, serialized.next, true);
+      insertStyles(cache, serialized.next, true);
     }
 
     if (sheet.tags.length) {
@@ -2802,523 +2892,175 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
     cache.insert("", serialized, sheet, false);
   }, [cache, serialized.name]);
   return null;
-});
-
-if (process.env.NODE_ENV !== 'production') {
-  Global.displayName = 'EmotionGlobal';
-}
-
-function css() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  return serializeStyles$1(args);
-}
-
-var classnames$2 = function classnames(args) {
-  var len = args.length;
-  var i = 0;
-  var cls = '';
-
-  for (; i < len; i++) {
-    var arg = args[i];
-    if (arg == null) continue;
-    var toAdd = void 0;
-
-    switch (typeof arg) {
-      case 'boolean':
-        break;
-
-      case 'object':
-        {
-          if (Array.isArray(arg)) {
-            toAdd = classnames(arg);
-          } else {
-            if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {
-              console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.');
-            }
-
-            toAdd = '';
-
-            for (var k in arg) {
-              if (arg[k] && k) {
-                toAdd && (toAdd += ' ');
-                toAdd += k;
-              }
-            }
-          }
-
-          break;
-        }
-
-      default:
-        {
-          toAdd = arg;
-        }
-    }
-
-    if (toAdd) {
-      cls && (cls += ' ');
-      cls += toAdd;
-    }
-  }
-
-  return cls;
-};
-
-function merge(registered, css, className) {
-  var registeredStyles = [];
-  var rawClassName = getRegisteredStyles$1(registered, registeredStyles, className);
-
-  if (registeredStyles.length < 2) {
-    return className;
-  }
-
-  return rawClassName + css(registeredStyles);
-}
-
-var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
-  var rules = '';
-  var serializedHashes = '';
-  var hasRendered = false;
-
-  var css = function css() {
-    if (hasRendered && process.env.NODE_ENV !== 'production') {
-      throw new Error('css can only be used during render');
-    }
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    var serialized = serializeStyles$1(args, cache.registered);
-
-    if (isBrowser$4) {
-      insertStyles$1(cache, serialized, false);
-    } else {
-      var res = insertStyles$1(cache, serialized, false);
-
-      if (res !== undefined) {
-        rules += res;
-      }
-    }
-
-    if (!isBrowser$4) {
-      serializedHashes += " " + serialized.name;
-    }
-
-    return cache.key + "-" + serialized.name;
-  };
-
-  var cx = function cx() {
-    if (hasRendered && process.env.NODE_ENV !== 'production') {
-      throw new Error('cx can only be used during render');
-    }
-
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    return merge(cache.registered, css, classnames$2(args));
-  };
-
-  var content = {
-    css: css,
-    cx: cx,
-    theme: React.useContext(ThemeContext)
-  };
-  var ele = props.children(content);
-  hasRendered = true;
-
-  if (!isBrowser$4 && rules.length !== 0) {
-    var _ref;
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedHashes.substring(1), _ref.dangerouslySetInnerHTML = {
-      __html: rules
-    }, _ref.nonce = cache.sheet.nonce, _ref)), ele);
-  }
-
-  return ele;
-});
-
-if (process.env.NODE_ENV !== 'production') {
-  ClassNames.displayName = 'EmotionClassNames';
-}
-
-if (process.env.NODE_ENV !== 'production') {
-  var isBrowser$3 = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
-
-  var isJest = typeof jest !== 'undefined';
-
-  if (isBrowser$3 && !isJest) {
-    var globalContext = isBrowser$3 ? window : global;
-    var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
-
-    if (globalContext[globalKey]) {
-      console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');
-    }
-
-    globalContext[globalKey] = true;
-  }
-}
-
-var isBrowser$2 = typeof document !== 'undefined';
-function getRegisteredStyles(registered, registeredStyles, classNames) {
-  var rawClassName = '';
-  classNames.split(' ').forEach(function (className) {
-    if (registered[className] !== undefined) {
-      registeredStyles.push(registered[className] + ";");
-    } else {
-      rawClassName += className + " ";
-    }
-  });
-  return rawClassName;
-}
-var insertStyles = function insertStyles(cache, serialized, isStringTag) {
-  var className = cache.key + "-" + serialized.name;
-
-  if ( // we only need to add the styles to the registered cache if the
-  // class name could be used further down
-  // the tree but if it's a string tag, we know it won't
-  // so we don't have to add it to registered cache.
-  // this improves memory usage since we can avoid storing the whole style string
-  (isStringTag === false || // we need to always store it if we're in compat mode and
-  // in node since emotion-server relies on whether a style is in
-  // the registered cache to know whether a style is global or not
-  // also, note that this check will be dead code eliminated in the browser
-  isBrowser$2 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
-    cache.registered[className] = serialized.styles;
-  }
-
-  if (cache.inserted[serialized.name] === undefined) {
-    var stylesForSSR = '';
-    var current = serialized;
-
-    do {
-      var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
-
-      if (!isBrowser$2 && maybeStyles !== undefined) {
-        stylesForSSR += maybeStyles;
-      }
-
-      current = current.next;
-    } while (current !== undefined);
-
-    if (!isBrowser$2 && stylesForSSR.length !== 0) {
-      return stylesForSSR;
-    }
-  }
-};
-
-var ILLEGAL_ESCAPE_SEQUENCE_ERROR$1 = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
-var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
-var hyphenateRegex = /[A-Z]|^ms/g;
-var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-
-var isCustomProperty = function isCustomProperty(property) {
-  return property.charCodeAt(1) === 45;
-};
-
-var isProcessableValue = function isProcessableValue(value) {
-  return value != null && typeof value !== 'boolean';
-};
-
-var processStyleName = /* #__PURE__ */memoize(function (styleName) {
-  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
-});
-
-var processStyleValue = function processStyleValue(key, value) {
-  switch (key) {
-    case 'animation':
-    case 'animationName':
-      {
-        if (typeof value === 'string') {
-          return value.replace(animationRegex, function (match, p1, p2) {
-            cursor = {
-              name: p1,
-              styles: p2,
-              next: cursor
-            };
-            return p1;
-          });
-        }
-      }
-  }
-
-  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
-    return value + 'px';
-  }
-
-  return value;
-};
-
-if (process.env.NODE_ENV !== 'production') {
-  var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-  var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
-  var oldProcessStyleValue = processStyleValue;
-  var msPattern = /^-ms-/;
-  var hyphenPattern = /-(.)/g;
-  var hyphenatedCache = {};
-
-  processStyleValue = function processStyleValue(key, value) {
-    if (key === 'content') {
-      if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
-        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
-      }
-    }
-
-    var processed = oldProcessStyleValue(key, value);
-
-    if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
-      hyphenatedCache[key] = true;
-      console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
-        return _char.toUpperCase();
-      }) + "?");
-    }
-
-    return processed;
-  };
-}
-
-function handleInterpolation(mergedProps, registered, interpolation) {
-  if (interpolation == null) {
-    return '';
-  }
-
-  if (interpolation.__emotion_styles !== undefined) {
-    if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-      throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
-    }
-
-    return interpolation;
-  }
-
-  switch (typeof interpolation) {
-    case 'boolean':
-      {
-        return '';
-      }
-
-    case 'object':
-      {
-        if (interpolation.anim === 1) {
-          cursor = {
-            name: interpolation.name,
-            styles: interpolation.styles,
-            next: cursor
-          };
-          return interpolation.name;
-        }
-
-        if (interpolation.styles !== undefined) {
-          var next = interpolation.next;
-
-          if (next !== undefined) {
-            // not the most efficient thing ever but this is a pretty rare case
-            // and there will be very few iterations of this generally
-            while (next !== undefined) {
-              cursor = {
-                name: next.name,
-                styles: next.styles,
-                next: cursor
-              };
-              next = next.next;
-            }
-          }
-
-          var styles = interpolation.styles + ";";
-
-          if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
-            styles += interpolation.map;
-          }
-
-          return styles;
-        }
-
-        return createStringFromObject(mergedProps, registered, interpolation);
-      }
-
-    case 'function':
-      {
-        if (mergedProps !== undefined) {
-          var previousCursor = cursor;
-          var result = interpolation(mergedProps);
-          cursor = previousCursor;
-          return handleInterpolation(mergedProps, registered, result);
-        } else if (process.env.NODE_ENV !== 'production') {
-          console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
-        }
-
-        break;
-      }
-
-    case 'string':
-      if (process.env.NODE_ENV !== 'production') {
-        var matched = [];
-        var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
-          var fakeVarName = "animation" + matched.length;
-          matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
-          return "${" + fakeVarName + "}";
-        });
-
-        if (matched.length) {
-          console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
-        }
-      }
-
-      break;
-  } // finalize string values (regular strings and functions interpolated into css calls)
+});
 
+if (process.env.NODE_ENV !== 'production') {
+  Global.displayName = 'EmotionGlobal';
+}
 
-  if (registered == null) {
-    return interpolation;
+function css() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
   }
 
-  var cached = registered[interpolation];
-  return cached !== undefined ? cached : interpolation;
+  return serializeStyles(args);
 }
 
-function createStringFromObject(mergedProps, registered, obj) {
-  var string = '';
+var classnames$2 = function classnames(args) {
+  var len = args.length;
+  var i = 0;
+  var cls = '';
 
-  if (Array.isArray(obj)) {
-    for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
-    }
-  } else {
-    for (var _key in obj) {
-      var value = obj[_key];
+  for (; i < len; i++) {
+    var arg = args[i];
+    if (arg == null) continue;
+    var toAdd = void 0;
 
-      if (typeof value !== 'object') {
-        if (registered != null && registered[value] !== undefined) {
-          string += _key + "{" + registered[value] + "}";
-        } else if (isProcessableValue(value)) {
-          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
-        }
-      } else {
-        if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
-          throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
-        }
+    switch (typeof arg) {
+      case 'boolean':
+        break;
 
-        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
-          for (var _i = 0; _i < value.length; _i++) {
-            if (isProcessableValue(value[_i])) {
-              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+      case 'object':
+        {
+          if (Array.isArray(arg)) {
+            toAdd = classnames(arg);
+          } else {
+            if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {
+              console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.');
             }
-          }
-        } else {
-          var interpolated = handleInterpolation(mergedProps, registered, value);
-
-          switch (_key) {
-            case 'animation':
-            case 'animationName':
-              {
-                string += processStyleName(_key) + ":" + interpolated + ";";
-                break;
-              }
 
-            default:
-              {
-                if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
-                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
-                }
+            toAdd = '';
 
-                string += _key + "{" + interpolated + "}";
+            for (var k in arg) {
+              if (arg[k] && k) {
+                toAdd && (toAdd += ' ');
+                toAdd += k;
               }
+            }
           }
+
+          break;
         }
-      }
+
+      default:
+        {
+          toAdd = arg;
+        }
+    }
+
+    if (toAdd) {
+      cls && (cls += ' ');
+      cls += toAdd;
     }
   }
 
-  return string;
-}
+  return cls;
+};
 
-var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-var sourceMapPattern;
+function merge(registered, css, className) {
+  var registeredStyles = [];
+  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
 
-if (process.env.NODE_ENV !== 'production') {
-  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
-} // this is the cursor for keyframes
-// keyframes are stored on the SerializedStyles object as a linked list
+  if (registeredStyles.length < 2) {
+    return className;
+  }
 
+  return rawClassName + css(registeredStyles);
+}
 
-var cursor;
-var serializeStyles = function serializeStyles(args, registered, mergedProps) {
-  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
-    return args[0];
-  }
+var Noop$1 = function Noop() {
+  return null;
+};
 
-  var stringMode = true;
-  var styles = '';
-  cursor = undefined;
-  var strings = args[0];
+var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
+  var rules = '';
+  var serializedHashes = '';
+  var hasRendered = false;
 
-  if (strings == null || strings.raw === undefined) {
-    stringMode = false;
-    styles += handleInterpolation(mergedProps, registered, strings);
-  } else {
-    if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
-      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
+  var css = function css() {
+    if (hasRendered && process.env.NODE_ENV !== 'production') {
+      throw new Error('css can only be used during render');
     }
 
-    styles += strings[0];
-  } // we start at 1 since we've already handled the first arg
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
+    var serialized = serializeStyles(args, cache.registered);
 
-  for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i]);
+    if (isBrowser$3) {
+      insertStyles(cache, serialized, false);
+    } else {
+      var res = insertStyles(cache, serialized, false);
 
-    if (stringMode) {
-      if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
-        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
+      if (res !== undefined) {
+        rules += res;
       }
+    }
 
-      styles += strings[i];
+    if (!isBrowser$3) {
+      serializedHashes += " " + serialized.name;
     }
-  }
 
-  var sourceMap;
+    return cache.key + "-" + serialized.name;
+  };
 
-  if (process.env.NODE_ENV !== 'production') {
-    styles = styles.replace(sourceMapPattern, function (match) {
-      sourceMap = match;
-      return '';
-    });
-  } // using a global regex with .exec is stateful so lastIndex has to be reset each time
+  var cx = function cx() {
+    if (hasRendered && process.env.NODE_ENV !== 'production') {
+      throw new Error('cx can only be used during render');
+    }
 
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
 
-  labelPattern.lastIndex = 0;
-  var identifierName = '';
-  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+    return merge(cache.registered, css, classnames$2(args));
+  };
 
-  while ((match = labelPattern.exec(styles)) !== null) {
-    identifierName += '-' + // $FlowFixMe we know it's not null
-    match[1];
-  }
+  var content = {
+    css: css,
+    cx: cx,
+    theme: React.useContext(ThemeContext)
+  };
+  var ele = props.children(content);
+  hasRendered = true;
+  var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop$1, null);
 
-  var name = murmur2(styles) + identifierName;
+  if (!isBrowser$3 && rules.length !== 0) {
+    var _ref;
 
-  if (process.env.NODE_ENV !== 'production') {
-    // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
-    return {
-      name: name,
-      styles: styles,
-      map: sourceMap,
-      next: cursor,
-      toString: function toString() {
-        return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-      }
-    };
-  }
+    possiblyStyleElement = /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedHashes.substring(1), _ref.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref.nonce = cache.sheet.nonce, _ref));
+  } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
 
-  return {
-    name: name,
-    styles: styles,
-    next: cursor
-  };
-};
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  ClassNames.displayName = 'EmotionClassNames';
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  var isBrowser$2 = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
+
+  var isJest = typeof jest !== 'undefined';
+
+  if (isBrowser$2 && !isJest) {
+    // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later
+    var globalContext = // $FlowIgnore
+    typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef
+    : isBrowser$2 ? window : global;
+    var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
+
+    if (globalContext[globalKey]) {
+      console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');
+    }
+
+    globalContext[globalKey] = true;
+  }
+}
 
 var testOmitPropsOnStringTag = isPropValid;
 
@@ -3352,6 +3094,10 @@ var composeShouldForwardProps = function composeShouldForwardProps(tag, options,
 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
 var isBrowser$1 = typeof document !== 'undefined';
 
+var Noop = function Noop() {
+  return null;
+};
+
 var createStyled = function createStyled(tag, options) {
   if (process.env.NODE_ENV !== 'production') {
     if (tag === undefined) {
@@ -3446,6 +3192,7 @@ var createStyled = function createStyled(tag, options) {
       newProps.className = className;
       newProps.ref = ref;
       var ele = /*#__PURE__*/React.createElement(finalTag, newProps);
+      var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop, null);
 
       if (!isBrowser$1 && rules !== undefined) {
         var _ref;
@@ -3458,12 +3205,13 @@ var createStyled = function createStyled(tag, options) {
           next = next.next;
         }
 
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
+        possiblyStyleElement = /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
           __html: rules
-        }, _ref.nonce = cache.sheet.nonce, _ref)), ele);
-      }
+        }, _ref.nonce = cache.sheet.nonce, _ref));
+      } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
 
-      return ele;
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
     });
     Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
     Styled.defaultProps = tag.defaultProps;
@@ -3568,7 +3316,7 @@ var variablesToObject = function (variables, theme) {
         for (var i = 0; i < path.length; i++) {
             var segment = path[i];
             var isLast = i === path.length - 1;
-            var isArray = new RegExp(segment + "-0$").test(key);
+            var isArray = new RegExp("".concat(segment, "-0$")).test(key);
             var segmentValue = isLast ? variables[key] : isArray ? [] : {};
             if (segment in target === false) {
                 // @ts-ignore
@@ -3584,7 +3332,7 @@ var variablesToObject = function (variables, theme) {
 var transformToVariables = function (prefix, variables, theme, pending) {
     for (var key in theme) {
         /* istanbul ignore next */
-        var fullKey = key === '$root' ? prefix : prefix + "-" + key;
+        var fullKey = key === '$root' ? prefix : "".concat(prefix, "-").concat(key);
         var value = theme[key];
         if (value == null) {
             continue;
@@ -3601,12 +3349,12 @@ var transformToVariables = function (prefix, variables, theme, pending) {
     }
 };
 var stringify = function (variables) {
-    return inline("\n    :root {\n      " + Object.entries(variables)
+    return inline("\n    :root {\n      ".concat(Object.entries(variables)
         .map(function (_a) {
         var key = _a[0], value = _a[1];
-        return key + ": " + value + ";";
+        return "".concat(key, ": ").concat(value, ";");
     })
-        .join('\n') + "\n    }\n  ");
+        .join('\n'), "\n    }\n  "));
 };
 var transformThemeIntoVariables = function (_a) {
     // eslint-disable-next-line
@@ -3620,7 +3368,7 @@ var transformThemeIntoVariables = function (_a) {
             delete variables[key];
             continue;
         }
-        variables[key] = "var(" + valueKey + ")";
+        variables[key] = "var(".concat(valueKey, ")");
     }
     return stringify(variables) + transformFonts(fonts);
 };
@@ -3631,22 +3379,22 @@ var transformFonts = function (fonts) {
     var css = fonts.config
         .map(function (font) {
         var css = [
-            "font-family: \"" + font.family + "\"",
-            "src: url(\"" + fonts.url + "/" + font.src + "\") format(\"opentype\")",
+            "font-family: \"".concat(font.family, "\""),
+            "src: url(\"".concat(fonts.url, "/").concat(font.src, "\") format(\"opentype\")"),
         ];
         if (font.weight) {
-            css.push("font-weight: " + font.weight);
+            css.push("font-weight: ".concat(font.weight));
         }
         if (font.stretch) {
-            css.push("font-stretch: " + font.stretch);
+            css.push("font-stretch: ".concat(font.stretch));
         }
         if (font.style) {
-            css.push("font-style: " + font.style);
+            css.push("font-style: ".concat(font.style));
         }
-        return inline("@font-face { " + css.join(';\n') + "; }");
+        return inline("@font-face { ".concat(css.join(';\n'), "; }"));
     })
         .join('\n');
-    return inline("\n    " + css + "\n    body {\n      font-family: \"" + fonts.config[0].family + "\";\n    }\n  ");
+    return inline("\n    ".concat(css, "\n    body {\n      font-family: \"").concat(fonts.config[0].family, "\";\n    }\n  "));
 };
 var inline = function (text) {
     return text.trim().replace(/\s+/g, ' ').replace(/\n/g, '');
@@ -3689,7 +3437,7 @@ var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
     var widthAuto = _a.widthAuto;
     return (widthAuto ? 'auto' : 'fit-content');
 }, function (props) { return props.backgroundColor; }, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
-    return props.border ? props.border.borderWidth + " solid " + props.border.borderColor : 'none';
+    return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
 });
 var Card = function (_a) {
     var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
@@ -3760,7 +3508,7 @@ var BaseCTA = function (_a) {
     var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d, type = _a.type, className = _a.className;
     var theme = useTheme();
     var stylesBySize = getStylesBySize$9(size, theme);
-    return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "" + theme.component.button.borderRadius, cursor: 'pointer', '&:disabled': {
+    return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
                 backgroundColor: theme.colors.background.disabled,
                 color: theme.colors.text.disabled,
                 cursor: 'not-allowed',
@@ -3808,7 +3556,7 @@ var ButtonSecondaryOutline = function (_a) {
     return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, className: className, css: {
             backgroundColor: theme.component.button.secondary.active.color,
             color: theme.component.button.secondary.active.backgroundColor,
-            border: "1px solid " + theme.component.button.secondary.active.backgroundColor,
+            border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
             '&:hover': {
                 backgroundColor: theme.component.button.secondary.active.backgroundColor,
                 color: theme.component.button.secondary.active.color,
@@ -4331,7 +4079,12 @@ function isFocusableElement(element, mode) {
   }, _match));
 }
 function focusIn(container, focus) {
-  var elements = Array.isArray(container) ? container : getFocusableElements(container);
+  var elements = Array.isArray(container) ? container.slice().sort(function (a, b) {
+    var position = a.compareDocumentPosition(b);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+    return 0;
+  }) : getFocusableElements(container);
   var active = document.activeElement;
 
   var direction = function () {
@@ -4431,7 +4184,7 @@ function useDescriptions() {
           props: props.props
         };
       }, [register, props.slot, props.name, props.props]);
-      return React__default['default'].createElement(DescriptionContext.Provider, {
+      return React__default["default"].createElement(DescriptionContext.Provider, {
         value: contextBag
       }, props.children);
     };
@@ -4474,11 +4227,41 @@ function useOpenClosed() {
 function OpenClosedProvider(_ref) {
   var value = _ref.value,
       children = _ref.children;
-  return React__default['default'].createElement(Context.Provider, {
+  return React__default["default"].createElement(Context.Provider, {
     value: value
   }, children);
 }
 
+function resolveType(props) {
+  var _props$as;
+
+  if (props.type) return props.type;
+  var tag = (_props$as = props.as) != null ? _props$as : 'button';
+  if (typeof tag === 'string' && tag.toLowerCase() === 'button') return 'button';
+  return undefined;
+}
+
+function useResolveButtonType(props, ref) {
+  var _useState = React.useState(function () {
+    return resolveType(props);
+  }),
+      type = _useState[0],
+      setType = _useState[1];
+
+  useIsoMorphicEffect(function () {
+    setType(resolveType(props));
+  }, [props.type, props.as]);
+  useIsoMorphicEffect(function () {
+    if (type) return;
+    if (!ref.current) return;
+
+    if (ref.current instanceof HTMLButtonElement && !ref.current.hasAttribute('type')) {
+      setType('button');
+    }
+  }, [type, ref]);
+  return type;
+}
+
 var _reducers$2;
 var DisclosureStates;
 
@@ -4627,11 +4410,11 @@ function Disclosure(props) {
       close: close
     };
   }, [disclosureState, close]);
-  return React__default['default'].createElement(DisclosureContext.Provider, {
+  return React__default["default"].createElement(DisclosureContext.Provider, {
     value: reducerBag
-  }, React__default['default'].createElement(DisclosureAPIContext.Provider, {
+  }, React__default["default"].createElement(DisclosureAPIContext.Provider, {
     value: api
-  }, React__default['default'].createElement(OpenClosedProvider, {
+  }, React__default["default"].createElement(OpenClosedProvider, {
     value: match(disclosureState, (_match2 = {}, _match2[DisclosureStates.Open] = State.Open, _match2[DisclosureStates.Closed] = State.Closed, _match2))
   }, render({
     props: passthroughProps,
@@ -4647,7 +4430,8 @@ var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
       state = _useDisclosureContext[0],
       dispatch = _useDisclosureContext[1];
 
-  var buttonRef = useSyncRefs(ref);
+  var internalButtonRef = React.useRef(null);
+  var buttonRef = useSyncRefs(internalButtonRef, ref);
   var panelContext = useDisclosurePanelContext();
   var isWithinPanel = panelContext === null ? false : panelContext === state.panelId;
   var handleKeyDown = React.useCallback(function (event) {
@@ -4712,15 +4496,17 @@ var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
       open: state.disclosureState === DisclosureStates.Open
     };
   }, [state]);
+  var type = useResolveButtonType(props, internalButtonRef);
   var passthroughProps = props;
   var propsWeControl = isWithinPanel ? {
-    type: 'button',
+    ref: buttonRef,
+    type: type,
     onKeyDown: handleKeyDown,
     onClick: handleClick
   } : {
     ref: buttonRef,
     id: state.buttonId,
-    type: 'button',
+    type: type,
     'aria-expanded': props.disabled ? undefined : state.disclosureState === DisclosureStates.Open,
     'aria-controls': state.linkedPanel ? state.panelId : undefined,
     onKeyDown: handleKeyDown,
@@ -4790,7 +4576,7 @@ var Panel = /*#__PURE__*/forwardRefWithAs(function Panel(props, ref) {
     id: state.panelId
   };
   var passthroughProps = props;
-  return React__default['default'].createElement(DisclosurePanelContext.Provider, {
+  return React__default["default"].createElement(DisclosurePanelContext.Provider, {
     value: state.panelId
   }, render({
     props: _extends({}, passthroughProps, propsWeControl),
@@ -5185,9 +4971,9 @@ function Listbox(props) {
       disabled: disabled
     };
   }, [listboxState, disabled]);
-  return React__default['default'].createElement(ListboxContext.Provider, {
+  return React__default["default"].createElement(ListboxContext.Provider, {
     value: reducerBag
-  }, React__default['default'].createElement(OpenClosedProvider, {
+  }, React__default["default"].createElement(OpenClosedProvider, {
     value: match(listboxState, (_match = {}, _match[ListboxStates.Open] = State.Open, _match[ListboxStates.Closed] = State.Closed, _match))
   }, render({
     props: passThroughProps,
@@ -5285,7 +5071,7 @@ var Button$5 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
   var propsWeControl = {
     ref: buttonRef,
     id: id,
-    type: 'button',
+    type: useResolveButtonType(props, state.buttonRef),
     'aria-haspopup': true,
     'aria-controls': (_state$optionsRef$cur = state.optionsRef.current) == null ? void 0 : _state$optionsRef$cur.id,
     'aria-expanded': state.disabled ? undefined : state.listboxState === ListboxStates.Open,
@@ -5771,7 +5557,7 @@ function useLabels() {
           props: props.props
         };
       }, [register, props.slot, props.name, props.props]);
-      return React__default['default'].createElement(LabelContext.Provider, {
+      return React__default["default"].createElement(LabelContext.Provider, {
         value: contextBag
       }, props.children);
     };
@@ -5999,11 +5785,11 @@ function RadioGroup(props) {
     'aria-describedby': describedby,
     onKeyDown: handleKeyDown
   };
-  return React__default['default'].createElement(DescriptionProvider, {
+  return React__default["default"].createElement(DescriptionProvider, {
     name: "RadioGroup.Description"
-  }, React__default['default'].createElement(LabelProvider, {
+  }, React__default["default"].createElement(LabelProvider, {
     name: "RadioGroup.Label"
-  }, React__default['default'].createElement(RadioGroupContext.Provider, {
+  }, React__default["default"].createElement(RadioGroupContext.Provider, {
     value: api
   }, render({
     props: _extends({}, passThroughProps, propsWeControl),
@@ -6110,9 +5896,9 @@ function Option$1(props) {
       active: hasFlag(OptionState.Active)
     };
   }, [checked, isDisabled, hasFlag]);
-  return React__default['default'].createElement(DescriptionProvider, {
+  return React__default["default"].createElement(DescriptionProvider, {
     name: "RadioGroup.Description"
-  }, React__default['default'].createElement(LabelProvider, {
+  }, React__default["default"].createElement(LabelProvider, {
     name: "RadioGroup.Label"
   }, render({
     props: _extends({}, passThroughProps, propsWeControl),
@@ -6157,7 +5943,7 @@ var templateObject_1$Y;
 var CustomButton = newStyled.button(function (_a) {
     var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
     return ({
-        border: "0.063rem solid " + (isSortOrFilter ? theme.colors.shades['100'].color : theme.colors.shades['200'].color),
+        border: "0.063rem solid ".concat(isSortOrFilter ? theme.colors.shades['100'].color : theme.colors.shades['200'].color),
         boxSizing: 'border-box',
         borderRadius: theme.component.dropdown.borderRadius,
         display: 'flex',
@@ -6213,7 +5999,7 @@ var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'flex-start',
-        border: "0.063rem solid " + theme.component.dropdown.options.borderColor,
+        border: "0.063rem solid ".concat(theme.component.dropdown.options.borderColor),
         boxSizing: 'border-box',
         borderRadius: theme.component.dropdown.borderRadius,
         background: theme.colors.shades.white.color,
@@ -6222,6 +6008,7 @@ var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
         position: 'absolute',
         width: '100%',
         color: theme.colors.shades['700'].color,
+        zIndex: 10,
     });
 });
 var BaseDropdownOptions = function (_a) {
@@ -6784,7 +6571,7 @@ var renderOptions$1 = function (options) {
     if (options.length)
         return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
                 var checked = _a.checked;
-                return option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: checked, dataTestId: option.label + "-selector" }), void 0)) : (option.pattern && jsxRuntime.jsx(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
+                return option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: checked, dataTestId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && jsxRuntime.jsx(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
             } }), option.label)); });
     else
         return jsxRuntime.jsx(OutOfStock, { title: "out of stock color" }, void 0);
@@ -6810,7 +6597,7 @@ var SingleColorPicker = function (_a) {
 
 var renderOptions = function (selectedColor, options) {
     if (options && options.length)
-        return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), dataTestId: option.label + "-selector" }), void 0)) : (option.pattern && (jsxRuntime.jsx(PatternSelector, { url: option.pattern.url, selected: selectedColor.has(option) }, void 0))) }), option.label)); });
+        return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), dataTestId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && (jsxRuntime.jsx(PatternSelector, { url: option.pattern.url, selected: selectedColor.has(option) }, void 0))) }), option.label)); });
     else
         return jsxRuntime.jsx(OutOfStock, { title: "out of stock color" }, void 0);
 };
@@ -6846,7 +6633,7 @@ var MultiColorPicker = function (_a) {
 
 var Image$3 = newStyled.img(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
     var selected = _a.selected, theme = _a.theme;
-    return selected ? "0.063rem solid " + theme.colors.shades['700'].color : 'inherit';
+    return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
 });
 var ImageSmallPreview = function (_a) {
     var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className;
@@ -6937,7 +6724,7 @@ var StarContainer = newStyled.div(function (_a) {
 });
 var StarList = function (_a) {
     var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
-    return (jsxRuntime.jsx(Container$t, { children: __spreadArray([], new Array(starsNumber)).map(function (_, index) {
+    return (jsxRuntime.jsx(Container$t, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
             return (jsxRuntime.jsx(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, { fill: fill }, void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, { fill: fill }, void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, { fill: fill }, void 0)) }), index));
         }) }, void 0));
 };
@@ -7060,7 +6847,7 @@ var Container$q = newStyled.div(function (_a) {
     });
 });
 var getBarWithBasedOnPercent = function (percent) {
-    return percent <= 100 && percent >= 0 ? percent + "%" : '0%';
+    return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
 };
 var ProgressBar = function (_a) {
     var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
@@ -7122,7 +6909,7 @@ var templateObject_1$H;
 
 var TooltipArrow = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
-    return (jsxRuntime.jsxs("svg", __assign({ width: width + "rem", height: height + "rem", viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
+    return (jsxRuntime.jsxs("svg", __assign({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
 };
 
 var getWrapperFlexDirection = function (position) {
@@ -7209,10 +6996,10 @@ var TooltipContainer = newStyled.div(function (_a) {
         display: 'flex',
         flexDirection: getContainerFlexDirection(position),
         alignItems: getTooltipAlignItems(position, align),
-        marginLeft: getTooltipMargin(position, exports.ComponentPosition.Right, childrenWidth + "px"),
-        marginRight: getTooltipMargin(position, exports.ComponentPosition.Left, childrenWidth + "px"),
-        marginTop: getTooltipMargin(position, exports.ComponentPosition.Top, "-" + tooltipHeight + "px"),
-        marginBottom: getTooltipMargin(position, exports.ComponentPosition.Bottom, "-" + tooltipHeight + "px"),
+        marginLeft: getTooltipMargin(position, exports.ComponentPosition.Right, "".concat(childrenWidth, "px")),
+        marginRight: getTooltipMargin(position, exports.ComponentPosition.Left, "".concat(childrenWidth, "px")),
+        marginTop: getTooltipMargin(position, exports.ComponentPosition.Top, "-".concat(tooltipHeight, "px")),
+        marginBottom: getTooltipMargin(position, exports.ComponentPosition.Bottom, "-".concat(tooltipHeight, "px")),
         transition: 'opacity 0.2s ease',
         userSelect: 'none',
         opacity: 0,
@@ -7263,7 +7050,7 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    return (jsxRuntime.jsxs(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: React__default['default'].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$3, __assign({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsxRuntime.jsx(TooltipText, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
+    return (jsxRuntime.jsxs(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$3, __assign({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsxRuntime.jsx(TooltipText, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
 };
 
 /* base styles & variants */
@@ -7414,7 +7201,7 @@ var RadioInput = function (_a) {
         var value = event.currentTarget.value;
         onChange({ value: value, label: label });
     };
-    return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$o, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: name + "-" + id, type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$2, __assign({ htmlFor: name + "-" + id, "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
+    return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$o, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
 };
 var templateObject_1$F, templateObject_2$s;
 
@@ -7426,7 +7213,7 @@ var RadioGroupInput = function (_a) {
         onChange(selected);
     };
     return (jsxRuntime.jsx("div", __assign({ "data-testid": "group-container" }, { children: options.map(function (option, index) {
-            return (jsxRuntime.jsx(RadioInput, { id: "" + index, name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input" }, index));
+            return (jsxRuntime.jsx(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input" }, index));
         }) }), void 0));
 };
 
@@ -7591,7 +7378,7 @@ var isEmpty = function (value) {
 };
 
 var sliceString = function (str, maxLength) {
-    return str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
+    return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
 };
 
 var ErrorText = newStyled.h3(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
@@ -7603,7 +7390,7 @@ var Error$1 = function (_a) {
 };
 var templateObject_1$A, templateObject_2$o;
 
-var Container$k = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"], ["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
+var Container$k = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  input {\n    border-color: ", ";\n  }\n"], ["\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
@@ -7929,8 +7716,8 @@ var index$2 = function (breakpoints) {
 var mediaQueries = function (_a) {
     var theme = _a.theme;
     return index$2([
-        "@media(min-width: " + theme.mediaQueries.mobile + "px)",
-        "@media(min-width: " + theme.mediaQueries.desktop + "px)",
+        "@media(min-width: ".concat(theme.mediaQueries.mobile, "px)"),
+        "@media(min-width: ".concat(theme.mediaQueries.desktop, "px)"),
     ], { literal: true });
 };
 
@@ -8056,7 +7843,7 @@ function formatDate(date) {
     var day = date.getDate();
     var month = date.getMonth() + 1;
     var year = date.getFullYear();
-    return month < 10 ? day + "/0" + month + "/" + year : day + "/" + month + "/" + year;
+    return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
 }
 
 var Container$b = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"])));
@@ -8113,7 +7900,7 @@ var Direction;
 })(Direction || (Direction = {}));
 var ArrowButton$1 = function (_a) {
     var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
-    return (jsxRuntime.jsx(Button$3, __assign({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-" + direction }, { children: direction === 'left' ? (jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { width: width, height: height, opacity: 0.5 }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronRight, { width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
+    return (jsxRuntime.jsx(Button$3, __assign({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { width: width, height: height, opacity: 0.5 }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronRight, { width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
 };
 
 function _defineProperty(obj, key, value) {
@@ -8136,14 +7923,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -8151,19 +7933,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -8188,6 +7963,9 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
@@ -8220,6 +7998,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -8246,22 +8027,18 @@ function _isNativeReflectConstruct() {
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function _possibleConstructorReturn(self, call) {
   if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -9047,7 +8824,7 @@ var extractObject = function extractObject(spec, keys) {
 
 var initializedState = function initializedState(spec) {
   // spec also contains listRef, trackRef
-  var slideCount = React__default['default'].Children.count(spec.children);
+  var slideCount = React__default["default"].Children.count(spec.children);
   var listNode = spec.listRef;
   var listWidth = Math.ceil(getWidth(listNode));
   var trackNode = spec.trackRef && spec.trackRef.node;
@@ -9854,10 +9631,10 @@ var renderSlides = function renderSlides(spec) {
   var slides = [];
   var preCloneSlides = [];
   var postCloneSlides = [];
-  var childrenCount = React__default['default'].Children.count(spec.children);
+  var childrenCount = React__default["default"].Children.count(spec.children);
   var startIndex = lazyStartIndex(spec);
   var endIndex = lazyEndIndex(spec);
-  React__default['default'].Children.forEach(spec.children, function (elem, index) {
+  React__default["default"].Children.forEach(spec.children, function (elem, index) {
     var child;
     var childOnClickOptions = {
       message: "children",
@@ -9869,7 +9646,7 @@ var renderSlides = function renderSlides(spec) {
     if (!spec.lazyLoad || spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0) {
       child = elem;
     } else {
-      child = /*#__PURE__*/React__default['default'].createElement("div", null);
+      child = /*#__PURE__*/React__default["default"].createElement("div", null);
     }
 
     var childStyle = getSlideStyle(_objectSpread2(_objectSpread2({}, spec), {}, {
@@ -9880,7 +9657,7 @@ var renderSlides = function renderSlides(spec) {
       index: index
     })); // push a cloned element of the desired slide
 
-    slides.push( /*#__PURE__*/React__default['default'].cloneElement(child, {
+    slides.push( /*#__PURE__*/React__default["default"].cloneElement(child, {
       key: "original" + getKey(child, index),
       "data-index": index,
       className: classnames(slideClasses, slideClass),
@@ -9911,7 +9688,7 @@ var renderSlides = function renderSlides(spec) {
         slideClasses = getSlideClasses(_objectSpread2(_objectSpread2({}, spec), {}, {
           index: key
         }));
-        preCloneSlides.push( /*#__PURE__*/React__default['default'].cloneElement(child, {
+        preCloneSlides.push( /*#__PURE__*/React__default["default"].cloneElement(child, {
           key: "precloned" + getKey(child, key),
           "data-index": key,
           tabIndex: "-1",
@@ -9938,7 +9715,7 @@ var renderSlides = function renderSlides(spec) {
         slideClasses = getSlideClasses(_objectSpread2(_objectSpread2({}, spec), {}, {
           index: key
         }));
-        postCloneSlides.push( /*#__PURE__*/React__default['default'].cloneElement(child, {
+        postCloneSlides.push( /*#__PURE__*/React__default["default"].cloneElement(child, {
           key: "postcloned" + getKey(child, key),
           "data-index": key,
           tabIndex: "-1",
@@ -10002,7 +9779,7 @@ var Track = /*#__PURE__*/function (_React$PureComponent) {
         onMouseOver: onMouseOver,
         onMouseLeave: onMouseLeave
       };
-      return /*#__PURE__*/React__default['default'].createElement("div", _extends$1({
+      return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
         ref: this.handleRef,
         className: "slick-track",
         style: this.props.trackStyle
@@ -10011,7 +9788,7 @@ var Track = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return Track;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 
 var getDotCount = function getDotCount(spec) {
   var dots;
@@ -10087,22 +9864,22 @@ var Dots = /*#__PURE__*/function (_React$PureComponent) {
           currentSlide: currentSlide
         };
         var onClick = this.clickHandler.bind(this, dotOptions);
-        dots = dots.concat( /*#__PURE__*/React__default['default'].createElement("li", {
+        dots = dots.concat( /*#__PURE__*/React__default["default"].createElement("li", {
           key: i,
           className: className
-        }, /*#__PURE__*/React__default['default'].cloneElement(this.props.customPaging(i), {
+        }, /*#__PURE__*/React__default["default"].cloneElement(this.props.customPaging(i), {
           onClick: onClick
         })));
       }
 
-      return /*#__PURE__*/React__default['default'].cloneElement(this.props.appendDots(dots), _objectSpread2({
+      return /*#__PURE__*/React__default["default"].cloneElement(this.props.appendDots(dots), _objectSpread2({
         className: this.props.dotsClass
       }, mouseEvents));
     }
   }]);
 
   return Dots;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 
 var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(PrevArrow, _React$PureComponent);
@@ -10156,9 +9933,9 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
       var prevArrow;
 
       if (this.props.prevArrow) {
-        prevArrow = /*#__PURE__*/React__default['default'].cloneElement(this.props.prevArrow, _objectSpread2(_objectSpread2({}, prevArrowProps), customProps));
+        prevArrow = /*#__PURE__*/React__default["default"].cloneElement(this.props.prevArrow, _objectSpread2(_objectSpread2({}, prevArrowProps), customProps));
       } else {
-        prevArrow = /*#__PURE__*/React__default['default'].createElement("button", _extends$1({
+        prevArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$1({
           key: "0",
           type: "button"
         }, prevArrowProps), " ", "Previous");
@@ -10169,7 +9946,7 @@ var PrevArrow = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return PrevArrow;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
   _inherits(NextArrow, _React$PureComponent2);
 
@@ -10222,9 +9999,9 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
       var nextArrow;
 
       if (this.props.nextArrow) {
-        nextArrow = /*#__PURE__*/React__default['default'].cloneElement(this.props.nextArrow, _objectSpread2(_objectSpread2({}, nextArrowProps), customProps));
+        nextArrow = /*#__PURE__*/React__default["default"].cloneElement(this.props.nextArrow, _objectSpread2(_objectSpread2({}, nextArrowProps), customProps));
       } else {
-        nextArrow = /*#__PURE__*/React__default['default'].createElement("button", _extends$1({
+        nextArrow = /*#__PURE__*/React__default["default"].createElement("button", _extends$1({
           key: "1",
           type: "button"
         }, nextArrowProps), " ", "Next");
@@ -10235,7 +10012,7 @@ var NextArrow = /*#__PURE__*/function (_React$PureComponent2) {
   }]);
 
   return NextArrow;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 
 /**
  * A collection of shims that provide minimal functionality of the ES6 collections.
@@ -11317,10 +11094,10 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       var setTrackStyle = _this.didPropsChange(prevProps);
 
       setTrackStyle && _this.updateState(spec, setTrackStyle, function () {
-        if (_this.state.currentSlide >= React__default['default'].Children.count(_this.props.children)) {
+        if (_this.state.currentSlide >= React__default["default"].Children.count(_this.props.children)) {
           _this.changeSlide({
             message: "index",
-            index: React__default['default'].Children.count(_this.props.children) - _this.props.slidesToShow,
+            index: React__default["default"].Children.count(_this.props.children) - _this.props.slidesToShow,
             currentSlide: _this.state.currentSlide
           });
         }
@@ -11381,7 +11158,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       });
       var trackStyle = getTrackCSS(spec);
 
-      if (setTrackStyle || React__default['default'].Children.count(_this.props.children) !== React__default['default'].Children.count(spec.children)) {
+      if (setTrackStyle || React__default["default"].Children.count(_this.props.children) !== React__default["default"].Children.count(spec.children)) {
         updatedState["trackStyle"] = trackStyle;
       }
 
@@ -11433,7 +11210,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         };
       }
 
-      var childrenCount = React__default['default'].Children.count(_this.props.children);
+      var childrenCount = React__default["default"].Children.count(_this.props.children);
 
       var spec = _objectSpread2(_objectSpread2(_objectSpread2({}, _this.props), _this.state), {}, {
         slideCount: childrenCount
@@ -11859,7 +11636,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
           onMouseOver: pauseOnDotsHover ? _this.onDotsOver : null,
           onMouseLeave: pauseOnDotsHover ? _this.onDotsLeave : null
         });
-        dots = /*#__PURE__*/React__default['default'].createElement(Dots, dotProps);
+        dots = /*#__PURE__*/React__default["default"].createElement(Dots, dotProps);
       }
 
       var prevArrow, nextArrow;
@@ -11867,8 +11644,8 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
       arrowProps.clickHandler = _this.changeSlide;
 
       if (_this.props.arrows) {
-        prevArrow = /*#__PURE__*/React__default['default'].createElement(PrevArrow, arrowProps);
-        nextArrow = /*#__PURE__*/React__default['default'].createElement(NextArrow, arrowProps);
+        prevArrow = /*#__PURE__*/React__default["default"].createElement(PrevArrow, arrowProps);
+        nextArrow = /*#__PURE__*/React__default["default"].createElement(NextArrow, arrowProps);
       }
 
       var verticalHeightStyle = null;
@@ -11927,9 +11704,9 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         };
       }
 
-      return /*#__PURE__*/React__default['default'].createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default['default'].createElement("div", _extends$1({
+      return /*#__PURE__*/React__default["default"].createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
         ref: _this.listRefHandler
-      }, listProps), /*#__PURE__*/React__default['default'].createElement(Track, _extends$1({
+      }, listProps), /*#__PURE__*/React__default["default"].createElement(Track, _extends$1({
         ref: _this.trackRefHandler
       }, trackProps), _this.props.children)), !_this.props.unslick ? nextArrow : "", !_this.props.unslick ? dots : "");
     });
@@ -11938,7 +11715,7 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
     _this.track = null;
     _this.state = _objectSpread2(_objectSpread2({}, initialState$1), {}, {
       currentSlide: _this.props.initialSlide,
-      slideCount: React__default['default'].Children.count(_this.props.children)
+      slideCount: React__default["default"].Children.count(_this.props.children)
     });
     _this.callbackTimers = [];
     _this.clickable = true;
@@ -11974,12 +11751,12 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      return setTrackStyle || React__default['default'].Children.count(this.props.children) !== React__default['default'].Children.count(prevProps.children);
+      return setTrackStyle || React__default["default"].Children.count(this.props.children) !== React__default["default"].Children.count(prevProps.children);
     }
   }]);
 
   return InnerSlider;
-}(React__default['default'].Component);
+}(React__default["default"].Component);
 
 var camel2hyphen$1 = function (str) {
   return str
@@ -12048,7 +11825,7 @@ var defaultProps = {
   adaptiveHeight: false,
   afterChange: null,
   appendDots: function appendDots(dots) {
-    return /*#__PURE__*/React__default['default'].createElement("ul", {
+    return /*#__PURE__*/React__default["default"].createElement("ul", {
       style: {
         display: "block"
       }
@@ -12063,7 +11840,7 @@ var defaultProps = {
   className: "",
   cssEase: "ease",
   customPaging: function customPaging(i) {
-    return /*#__PURE__*/React__default['default'].createElement("button", null, i + 1);
+    return /*#__PURE__*/React__default["default"].createElement("button", null, i + 1);
   },
   dots: false,
   dotsClass: "slick-dots",
@@ -12273,7 +12050,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
       } // makes sure that children is an array, even when there is only 1 child
 
 
-      var children = React__default['default'].Children.toArray(this.props.children); // Children may contain false or null, so we should filter them
+      var children = React__default["default"].Children.toArray(this.props.children); // Children may contain false or null, so we should filter them
       // children may also contain string filled with spaces (in certain cases where we use jsx strings)
 
       children = children.filter(function (child) {
@@ -12304,7 +12081,7 @@ var Slider = /*#__PURE__*/function (_React$Component) {
             }
 
             if (k >= children.length) break;
-            row.push( /*#__PURE__*/React__default['default'].cloneElement(children[k], {
+            row.push( /*#__PURE__*/React__default["default"].cloneElement(children[k], {
               key: 100 * i + 10 * j + k,
               tabIndex: -1,
               style: {
@@ -12314,20 +12091,20 @@ var Slider = /*#__PURE__*/function (_React$Component) {
             }));
           }
 
-          newSlide.push( /*#__PURE__*/React__default['default'].createElement("div", {
+          newSlide.push( /*#__PURE__*/React__default["default"].createElement("div", {
             key: 10 * i + j
           }, row));
         }
 
         if (settings.variableWidth) {
-          newChildren.push( /*#__PURE__*/React__default['default'].createElement("div", {
+          newChildren.push( /*#__PURE__*/React__default["default"].createElement("div", {
             key: i,
             style: {
               width: currentWidth
             }
           }, newSlide));
         } else {
-          newChildren.push( /*#__PURE__*/React__default['default'].createElement("div", {
+          newChildren.push( /*#__PURE__*/React__default["default"].createElement("div", {
             key: i
           }, newSlide));
         }
@@ -12335,14 +12112,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
 
       if (settings === "unslick") {
         var className = "regular slider " + (this.props.className || "");
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: className
         }, children);
       } else if (newChildren.length <= settings.slidesToShow) {
         settings.unslick = true;
       }
 
-      return /*#__PURE__*/React__default['default'].createElement(InnerSlider, _extends$1({
+      return /*#__PURE__*/React__default["default"].createElement(InnerSlider, _extends$1({
         style: this.props.style,
         ref: this.innerSliderRefHandler
       }, settings), newChildren);
@@ -12350,14 +12127,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return Slider;
-}(React__default['default'].Component);
+}(React__default["default"].Component);
 
-var StyledSlider = newStyled(Slider)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"], ["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"])), function (props) { return props.dotsSpacing + "rem"; }, function (props) { return props.dotListMarginTop + "rem"; }, function (_a) {
+var StyledSlider = newStyled(Slider)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"], ["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
     var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
-    return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
+    return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
 }, function (_a) {
     var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
-    return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
+    return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
 });
 var templateObject_1$i;
 
@@ -12413,7 +12190,7 @@ var SliderNavigation = function (_a) {
         afterChange: setActiveIndex,
     };
     return (jsx("div", __assign({ css: {
-            padding: arrows ? "0 " + (arrows.arrowWidth + arrows.arrowPadding) + "rem" : 0,
+            padding: arrows ? "0 ".concat(arrows.arrowWidth + arrows.arrowPadding, "rem") : 0,
             maxWidth: '100%',
         } }, { children: jsx(StyledSlider, __assign({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
 };
@@ -12514,7 +12291,7 @@ function withProductGrid(ProductItemComponent, data) {
     }
     /* istanbul ignore next */
     var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
-    WithProductGrid.displayName = "withGrid(" + wrappedComponentName + ")";
+    WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
     return WithProductGrid;
 }
 var templateObject_1$d;
@@ -12526,7 +12303,7 @@ var Collection = {
 
 var Backdrop = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"], ["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"])), function (_a) {
     var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
-    return isOpen ? "background-color: " + backgroundColor + ";" : 'transparent';
+    return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
 });
 var Sidebar = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 3;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"], ["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 3;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"])), function (_a) {
     var width = _a.width;
@@ -12541,7 +12318,7 @@ var Sidebar = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTe
     var isOpen = _a.isOpen, position = _a.position;
     return isOpen
         ? 'transform: translateX(0);'
-        : "transform: translateX(" + (position === 'left' ? '-100%' : '100%') + ");";
+        : "transform: translateX(".concat(position === 'left' ? '-100%' : '100%', ");");
 });
 var Drawer = function (_a) {
     var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, onOpen = _a.onOpen, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.backdropColor, backdropColor = _c === void 0 ? 'rgba(0, 0, 0, 0.5)' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.width, width = _e === void 0 ? '33%' : _e, onClickOutside = _a.onClickOutside;
@@ -12606,10 +12383,10 @@ function FilteringDropdown(_a) {
     var getFilterLabel = function () {
         return selectedValues.length === 0
             ? placeHolder
-            : "(" + selectedValues.length + ") " + selectedValues.map(function (_a) {
+            : "(".concat(selectedValues.length, ") ").concat(selectedValues.map(function (_a) {
                 var label = _a.label;
                 return label;
-            }).join(', ');
+            }).join(', '));
     };
     var onChangeHandler = function (value) {
         setSelectedValues(function (prevState) {
@@ -12618,7 +12395,7 @@ function FilteringDropdown(_a) {
                 newState = prevState.filter(function (item) { return item.key !== value.key; });
             }
             else {
-                newState = __spreadArray(__spreadArray([], prevState), [value]);
+                newState = __spreadArray(__spreadArray([], prevState, true), [value], false);
             }
             onChange(newState);
             return newState;
@@ -12647,7 +12424,7 @@ var PageNumber = newStyled.span(templateObject_4$2 || (templateObject_4$2 = __ma
     return color;
 }, function (_a) {
     var underline = _a.underline, borderColor = _a.borderColor;
-    return underline ? "0.063rem solid " + borderColor : 'none';
+    return underline ? "0.063rem solid ".concat(borderColor) : 'none';
 }, function (_a) {
     var theme = _a.theme;
     return mediaQueries({ theme: theme })({
@@ -12661,7 +12438,7 @@ var templateObject_1$9, templateObject_2$4, templateObject_3$4, templateObject_4
 var Pagination = function (_a) {
     var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
     var theme = useTheme();
-    var _f = React__default['default'].useState(currentPage), page = _f[0], setPage = _f[1];
+    var _f = React__default["default"].useState(currentPage), page = _f[0], setPage = _f[1];
     var handlePageChange = function (page) {
         if (disabled || page < from || page > to) {
             return;
@@ -12769,7 +12546,7 @@ var templateObject_1$8, templateObject_2$3, templateObject_3$3, templateObject_4
 
 var Container$6 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"])), function (props) {
     return mediaQueries(props)({
-        borderTop: ["0.063rem solid " + props.theme.colors.shades['100'].color, 'none'],
+        borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
     });
 });
 var Description = newStyled.div({
@@ -12819,7 +12596,7 @@ var Button$2 = newStyled.button({
 });
 var Container$4 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  ", ",\n"])), function (props) {
     return mediaQueries(props)({
-        border: ['none', "0.063rem solid " + props.theme.colors.pallete.secondary.color],
+        border: ['none', "0.063rem solid ".concat(props.theme.colors.pallete.secondary.color)],
         marginTop: ['1.25rem', '0.125rem'],
     });
 });
@@ -12856,7 +12633,7 @@ var Input = newStyled.input(function (props) { return ({
     },
     '&:disabled': {
         backgroundColor: props.theme.colors.background.disabled,
-        border: "0.063rem solid " + props.theme.colors.border.disabled,
+        border: "0.063rem solid ".concat(props.theme.colors.border.disabled),
         color: props.theme.colors.text.disabled,
         placeholder: {
             color: props.theme.colors.text.disabled,
@@ -12979,7 +12756,7 @@ var SearchBar = function (_a) {
         return function () { return clearTimeout(id); };
     }, [onChange, state.term]);
     var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
-    return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$3, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsxRuntime.jsx(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsxRuntime.jsx(ResultsPanel, { dataTestId: resultsPanelDataTestId, options: options, header: resultOptions.length === 0 ? 'Most popular products' : undefined, footer: resultOptions.length > 0 ? "View all results (" + resultOptions.length + ")" : undefined, onClick: function (value) {
+    return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$3, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsxRuntime.jsx(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsxRuntime.jsx(ResultsPanel, { dataTestId: resultsPanelDataTestId, options: options, header: resultOptions.length === 0 ? 'Most popular products' : undefined, footer: resultOptions.length > 0 ? "View all results (".concat(resultOptions.length, ")") : undefined, onClick: function (value) {
                     onSearch(value.title);
                     dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
                 }, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
@@ -13003,13 +12780,13 @@ var ArrowButton = function (_a) {
 var templateObject_1$3;
 
 var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 15px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  svg {\n    padding: 0.125rem;\n    margin-left: 0.25rem;\n  }\n"], ["\n  position: absolute;\n  bottom: 15px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  svg {\n    padding: 0.125rem;\n    margin-left: 0.25rem;\n  }\n"])));
-var range = function (limit) { return __spreadArray([], new Array(limit)).map(function (_, index) { return index; }); };
+var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
 var SlideDots = function (_a) {
     var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
     var theme = useTheme();
     return (jsxRuntime.jsx(Container$1, __assign({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
                 ? theme.colors.shades.white.color
-                : theme.colors.shades['700'].color, opacity: 0.6, dataTestId: "slide-dot-" + index }, index)); }) }), void 0));
+                : theme.colors.shades['700'].color, opacity: 0.6, dataTestId: "slide-dot-".concat(index) }, index)); }) }), void 0));
 };
 var templateObject_1$2;