@spothero/ui 22.3.9-beta.0 → 22.3.9-beta.2

package/dist/index.cjs.js

@@ -1475,31 +1475,6 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function a () {
-			if (this instanceof a) {
-        return Reflect.construct(f, arguments, this.constructor);
-			}
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 var reactIs = {exports: {}};
 
 var reactIs_production_min = {};
@@ -4795,12 +4770,12 @@ function isUndefined(value) {
   return typeof value === "undefined" || value === undefined;
 } // Object assertions
 
-function isObject$1(value) {
+function isObject(value) {
   var type = _typeof$1(value);
   return value != null && (type === "object" || type === "function") && !isArray$1(value);
 }
 function isEmptyObject(value) {
-  return isObject$1(value) && Object.keys(value).length === 0;
+  return isObject(value) && Object.keys(value).length === 0;
 }
 function isNull(value) {
   return value == null;
@@ -4818,7 +4793,7 @@ function isRefObject$1(val) {
   return "current" in val;
 }
 function isInputEvent(value) {
-  return value && isObject$1(value) && isObject$1(value.target);
+  return value && isObject(value) && isObject(value.target);
 }
 function omit(object, keys) {
   var result = {};
@@ -5016,7 +4991,7 @@ function analyzeBreakpoints(breakpoints) {
       return queryString(minW);
     }).slice(1)),
     toArrayValue: function toArrayValue(test) {
-      if (!isObject$1(test)) {
+      if (!isObject(test)) {
         throw new Error("toArrayValue: value must be an object");
       }
       var result = _keysArr.map(function (bp) {
@@ -5361,13 +5336,13 @@ function flatten(target, maxDepth) {
   if (maxDepth === void 0) {
     maxDepth = Infinity;
   }
-  if (!isObject$1(target) && !Array.isArray(target) || !maxDepth) {
+  if (!isObject(target) && !Array.isArray(target) || !maxDepth) {
     return target;
   }
   return Object.entries(target).reduce(function (result, _ref) {
     var key = _ref[0],
       value = _ref[1];
-    if (isObject$1(value) || isArray$1(value)) {
+    if (isObject(value) || isArray$1(value)) {
       Object.entries(flatten(value, maxDepth - 1)).forEach(function (_ref2) {
         var childKey = _ref2[0],
           childValue = _ref2[1];
@@ -5522,7 +5497,7 @@ function mapResponsive(prop, mapper) {
       return mapper(item);
     });
   }
-  if (isObject$1(prop)) {
+  if (isObject(prop)) {
     return objectKeys(prop).reduce(function (result, key) {
       result[key] = mapper(prop[key]);
       return result;
@@ -6713,7 +6688,7 @@ if (__DEV__) {
   Portal.displayName = "Portal";
 }
 
-var doc$1 = {
+var doc = {
   body: {
     classList: {
       add: function add() {},
@@ -6752,10 +6727,10 @@ var doc$1 = {
     };
   }
 };
-var ssrDocument$1 = doc$1;
+var ssrDocument = doc;
 var noop$2 = function noop() {};
-var win$1 = {
-  document: ssrDocument$1,
+var win = {
+  document: ssrDocument,
   navigator: {
     userAgent: ""
   },
@@ -6798,10 +6773,10 @@ var win$1 = {
   },
   clearInterval: noop$2
 };
-var ssrWindow$1 = win$1;
+var ssrWindow = win;
 var mockEnv = {
-  window: ssrWindow$1,
-  document: ssrDocument$1
+  window: ssrWindow,
+  document: ssrDocument
 };
 var defaultEnv = isBrowser$5 ? {
   window: window,
@@ -7101,7 +7076,7 @@ var tokenToCSSVar = function tokenToCSSVar(scale, value) {
   return function (theme) {
     var valueStr = String(value);
     var key = scale ? scale + "." + valueStr : valueStr;
-    return isObject$1(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value;
+    return isObject(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value;
   };
 };
 function createTransform(options) {
@@ -8459,7 +8434,7 @@ var expandResponsive = function expandResponsive(styles) {
       var value = runIfFn(styles[key], theme);
       if (value == null) continue; // converts the object responsive syntax to array syntax
 
-      value = isObject$1(value) && isResponsive(value) ? toArrayValue(value) : value;
+      value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value;
       if (!Array.isArray(value)) {
         computedStyles[key] = value;
         continue;
@@ -8550,7 +8525,7 @@ function getCss(options) {
           property: key
         };
       }
-      if (isObject$1(value)) {
+      if (isObject(value)) {
         var _computedStyles$key;
         computedStyles[key] = (_computedStyles$key = computedStyles[key]) != null ? _computedStyles$key : {};
         computedStyles[key] = mergeWith({}, computedStyles[key], css(value, true));
@@ -8587,14 +8562,14 @@ function getCss(options) {
         continue;
       }
       if (configProperty) {
-        if (configProperty === "&" && isObject$1(rawValue)) {
+        if (configProperty === "&" && isObject(rawValue)) {
           computedStyles = mergeWith({}, computedStyles, rawValue);
         } else {
           computedStyles[configProperty] = rawValue;
         }
         continue;
       }
-      if (isObject$1(rawValue)) {
+      if (isObject(rawValue)) {
         computedStyles = mergeWith({}, computedStyles, rawValue);
         continue;
       }
@@ -8620,7 +8595,7 @@ var css$3 = function css(styles) {
  */
 
 function resolveReference(operand) {
-  if (isObject$1(operand) && operand.reference) {
+  if (isObject(operand) && operand.reference) {
     return operand.reference;
   }
   return String(operand);
@@ -8797,7 +8772,7 @@ function createThemeVars(flatTokens, options) {
         reference = _tokenToCssVar2.reference;
       return reference;
     };
-    var normalizedValue = isObject$1(value) ? value : {
+    var normalizedValue = isObject(value) ? value : {
       "default": value
     };
     cssVars = mergeWith(cssVars, Object.entries(normalizedValue).reduce(function (acc, _ref) {
@@ -11294,7 +11269,7 @@ function anatomy$1(name) {
   return new Anatomy$1(name);
 }
 function toRef$1(operand) {
-  if (isObject$1(operand) && operand.reference) {
+  if (isObject(operand) && operand.reference) {
     return operand.reference;
   }
   return String(operand);
@@ -14495,7 +14470,7 @@ var styles$4 = {
 var styles$1$2 = styles$4;
 var requiredChakraThemeKeys = ["borders", "breakpoints", "colors", "components", "config", "direction", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "shadows", "sizes", "space", "styles", "transition", "zIndices"];
 function isChakraTheme(unit) {
-  if (!isObject$1(unit)) {
+  if (!isObject(unit)) {
     return false;
   }
   return requiredChakraThemeKeys.every(function (propertyName) {
@@ -14634,19 +14609,19 @@ function createIcon(options) {
   return Comp;
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
@@ -14668,17 +14643,17 @@ function __extends(d, b) {
   }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
-var _assign$1 = function __assign() {
-  _assign$1 = Object.assign || function __assign(t) {
+var _assign = function __assign() {
+  _assign = Object.assign || function __assign(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
       for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
     return t;
   };
-  return _assign$1.apply(this, arguments);
+  return _assign.apply(this, arguments);
 };
-function __rest$1(s, e) {
+function __rest(s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -14795,7 +14770,7 @@ function useFeatures(props, visualElement, preloadedFeatures) {
      * was producing a lot of duplication amongst bundles.
      */
     if (isEnabled(props) && Component) {
-      features.push( /*#__PURE__*/React__namespace.createElement(Component, _assign$1({
+      features.push( /*#__PURE__*/React__namespace.createElement(Component, _assign({
         key: name_1
       }, props, {
         visualElement: visualElement
@@ -14944,7 +14919,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     visualElementRef.current = createVisualElement(Component, {
       visualState: visualState,
       parent: parent,
-      props: _assign$1(_assign$1({}, props), {
+      props: _assign(_assign({}, props), {
         layoutId: layoutId
       }),
       presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,
@@ -14954,7 +14929,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
   var visualElement = visualElementRef.current;
   useIsomorphicLayoutEffect(function () {
     if (!visualElement) return;
-    visualElement.setProps(_assign$1(_assign$1(_assign$1({}, config), props), {
+    visualElement.setProps(_assign(_assign(_assign({}, config), props), {
       layoutId: layoutId
     }));
     visualElement.isPresent = isPresent(presenceContext);
@@ -15399,10 +15374,10 @@ var number = {
     return v;
   }
 };
-var alpha = _assign$1(_assign$1({}, number), {
+var alpha = _assign(_assign({}, number), {
   transform: clamp$1(0, 1)
 });
-var scale$1 = _assign$1(_assign$1({}, number), {
+var scale$1 = _assign(_assign({}, number), {
   "default": 1
 });
 
@@ -15422,7 +15397,7 @@ var percent = createUnitType('%');
 var px = createUnitType('px');
 var vh = createUnitType('vh');
 var vw = createUnitType('vw');
-var progressPercentage = _assign$1(_assign$1({}, percent), {
+var progressPercentage = _assign(_assign({}, percent), {
   parse: function parse(v) {
     return percent.parse(v) / 100;
   },
@@ -15463,7 +15438,7 @@ var hsla = {
 };
 
 var clampRgbUnit = clamp$1(0, 255);
-var rgbUnit = _assign$1(_assign$1({}, number), {
+var rgbUnit = _assign(_assign({}, number), {
   transform: function transform(v) {
     return Math.round(clampRgbUnit(v));
   }
@@ -15604,14 +15579,14 @@ function applyDefaultFilter(v) {
   return name + '(' + defaultValue + unit + ')';
 }
 var functionRegex = /([a-z-]*)\(.*?\)/g;
-var filter = _assign$1(_assign$1({}, complex), {
+var filter = _assign(_assign({}, complex), {
   getAnimatableNone: function getAnimatableNone(v) {
     var functions = v.match(functionRegex);
     return functions ? functions.map(applyDefaultFilter).join(' ') : v;
   }
 });
 
-var _int = _assign$1(_assign$1({}, number), {
+var _int = _assign(_assign({}, number), {
   transform: Math.round
 });
 
@@ -15796,7 +15771,7 @@ function useInitialMotionValues(_a, visualState, isStatic) {
     }, transformTemplate);
     var vars = state.vars,
       style = state.style;
-    return _assign$1(_assign$1({}, vars), style);
+    return _assign(_assign({}, vars), style);
   }, [visualState]);
 }
 function useStyle(props, visualState, isStatic) {
@@ -15946,7 +15921,7 @@ function buildSVGAttrs(state, _a, projection, layoutState, options, transformTem
     _c = _a.pathOffset,
     pathOffset = _c === void 0 ? 0 : _c,
     // This is object creation, which we try to avoid per-frame.
-    latest = __rest$1(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+    latest = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
   buildHTMLStyles(state, latest, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin);
   state.attrs = state.style;
   state.style = {};
@@ -15976,7 +15951,7 @@ function buildSVGAttrs(state, _a, projection, layoutState, options, transformTem
 }
 
 var createSvgRenderState = function createSvgRenderState() {
-  return _assign$1(_assign$1({}, createHtmlRenderState()), {
+  return _assign(_assign({}, createHtmlRenderState()), {
     attrs: {}
   });
 };
@@ -15987,14 +15962,14 @@ function useSVGProps(props, visualState) {
     buildSVGAttrs(state, visualState, undefined, undefined, {
       enableHardwareAcceleration: false
     }, props.transformTemplate);
-    return _assign$1(_assign$1({}, state.attrs), {
-      style: _assign$1({}, state.style)
+    return _assign(_assign({}, state.attrs), {
+      style: _assign({}, state.style)
     });
   }, [visualState]);
   if (props.style) {
     var rawStyles = {};
     copyRawValuesOnly(rawStyles, props.style, props);
-    visualProps.style = _assign$1(_assign$1({}, rawStyles), visualProps.style);
+    visualProps.style = _assign(_assign({}, rawStyles), visualProps.style);
   }
   return visualProps;
 }
@@ -16008,7 +15983,7 @@ function createUseRender(forwardMotionProps) {
     var useVisualProps = isSVGComponent(Component) ? useSVGProps : useHTMLProps;
     var visualProps = useVisualProps(props, latestValues, isStatic);
     var filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
-    var elementProps = _assign$1(_assign$1(_assign$1({}, filteredProps), visualProps), {
+    var elementProps = _assign(_assign(_assign({}, filteredProps), visualProps), {
       ref: ref
     });
     return /*#__PURE__*/React.createElement(Component, elementProps);
@@ -16146,7 +16121,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
       if (!resolved) return;
       var transitionEnd = resolved.transitionEnd;
       resolved.transition;
-      var target = __rest$1(resolved, ["transitionEnd", "transition"]);
+      var target = __rest(resolved, ["transitionEnd", "transition"]);
       for (var key in target) values[key] = target[key];
       for (var key in transitionEnd) values[key] = transitionEnd[key];
     });
@@ -16198,7 +16173,7 @@ function createDomMotionConfig(Component, _a, preloadedFeatures, createVisualEle
   var _b = _a.forwardMotionProps,
     forwardMotionProps = _b === void 0 ? false : _b;
   var baseConfig = isSVGComponent(Component) ? svgMotionConfig : htmlMotionConfig;
-  return _assign$1(_assign$1({}, baseConfig), {
+  return _assign(_assign({}, baseConfig), {
     preloadedFeatures: preloadedFeatures,
     useRender: createUseRender(forwardMotionProps),
     createVisualElement: createVisualElement,
@@ -16568,7 +16543,7 @@ function isSpringType(options, keys) {
   });
 }
 function getSpringOptions(options) {
-  var springOptions = _assign$1({
+  var springOptions = _assign({
     velocity: 0.0,
     stiffness: 100,
     damping: 10,
@@ -16577,7 +16552,7 @@ function getSpringOptions(options) {
   }, options);
   if (!isSpringType(options, physicsKeys) && isSpringType(options, durationKeys)) {
     var derived = findSpring(options);
-    springOptions = _assign$1(_assign$1(_assign$1({}, springOptions), derived), {
+    springOptions = _assign(_assign(_assign({}, springOptions), derived), {
       velocity: 0.0,
       mass: 1.0
     });
@@ -16593,7 +16568,7 @@ function spring(_a) {
     _d = _a.restSpeed,
     restSpeed = _d === void 0 ? 2 : _d,
     restDelta = _a.restDelta,
-    options = __rest$1(_a, ["from", "to", "restSpeed", "restDelta"]);
+    options = __rest(_a, ["from", "to", "restSpeed", "restDelta"]);
   var state = {
     done: false,
     value: from
@@ -16697,7 +16672,7 @@ var mixColor = function mixColor(from, to) {
   invariant(fromColorType.transform === toColorType.transform, "Both colors must be hex/RGBA, OR both must be HSLA.");
   var fromColor = fromColorType.parse(from);
   var toColor = toColorType.parse(to);
-  var blended = _assign$1({}, fromColor);
+  var blended = _assign({}, fromColor);
   var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
   return function (v) {
     for (var key in blended) {
@@ -16752,7 +16727,7 @@ var mixArray = function mixArray(from, to) {
   };
 };
 var mixObject = function mixObject(origin, target) {
-  var output = _assign$1(_assign$1({}, origin), target);
+  var output = _assign(_assign({}, origin), target);
   var blendValue = {};
   for (var key in output) {
     if (origin[key] !== undefined && target[key] !== undefined) {
@@ -17100,7 +17075,7 @@ function animate(_a) {
     onComplete = _a.onComplete,
     onRepeat = _a.onRepeat,
     onUpdate = _a.onUpdate,
-    options = __rest$1(_a, ["from", "autoplay", "driver", "elapsed", "repeat", "repeatType", "repeatDelay", "onPlay", "onStop", "onComplete", "onRepeat", "onUpdate"]);
+    options = __rest(_a, ["from", "autoplay", "driver", "elapsed", "repeat", "repeatType", "repeatDelay", "onPlay", "onStop", "onComplete", "onRepeat", "onUpdate"]);
   var to = options.to;
   var driverControls;
   var repeatCount = 0;
@@ -17117,7 +17092,7 @@ function animate(_a) {
     from = 0;
     to = 100;
   }
-  var animation = animator(_assign$1(_assign$1({}, options), {
+  var animation = animator(_assign(_assign({}, options), {
     from: from,
     to: to
   }));
@@ -17206,7 +17181,7 @@ function inertia(_a) {
   }
   function startAnimation(options) {
     currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
-    currentAnimation = animate(_assign$1(_assign$1({}, options), {
+    currentAnimation = animate(_assign(_assign({}, options), {
       driver: driver,
       onUpdate: function onUpdate(v) {
         var _a;
@@ -17217,7 +17192,7 @@ function inertia(_a) {
     }));
   }
   function startSpring(options) {
-    startAnimation(_assign$1({
+    startAnimation(_assign({
       type: "spring",
       stiffness: bounceStiffness,
       damping: bounceDamping,
@@ -17568,7 +17543,7 @@ var getDefaultTransition = function getDefaultTransition(valueKey, to) {
   } else {
     transitionFactory = defaultTransitions$1[valueKey] || defaultTransitions$1["default"];
   }
-  return _assign$1({
+  return _assign({
     to: to
   }, transitionFactory(to));
 };
@@ -17576,7 +17551,7 @@ var getDefaultTransition = function getDefaultTransition(valueKey, to) {
 /**
  * A map of default value types for common values
  */
-var defaultValueTypes = _assign$1(_assign$1({}, numberValueTypes), {
+var defaultValueTypes = _assign(_assign({}, numberValueTypes), {
   // Color props
   color: color,
   backgroundColor: color,
@@ -17622,7 +17597,7 @@ function isTransitionDefined(_a) {
   _a.repeatType;
   _a.repeatDelay;
   _a.from;
-  var transition = __rest$1(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
+  var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
   return !!Object.keys(transition).length;
 }
 var legacyRepeatWarning = false;
@@ -17635,8 +17610,8 @@ function convertTransitionToAnimationOptions(_a) {
     yoyo = _a.yoyo,
     flip = _a.flip,
     loop = _a.loop,
-    transition = __rest$1(_a, ["ease", "times", "yoyo", "flip", "loop"]);
-  var options = _assign$1({}, transition);
+    transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]);
+  var options = _assign({}, transition);
   if (times) options["offset"] = times;
   /**
    * Convert any existing durations from seconds to milliseconds
@@ -17701,9 +17676,9 @@ function getPopmotionAnimationOptions(transition, options, key) {
    * Get a default transition if none is determined to be defined.
    */
   if (!isTransitionDefined(transition)) {
-    transition = _assign$1(_assign$1({}, transition), getDefaultTransition(key, options.to));
+    transition = _assign(_assign({}, transition), getDefaultTransition(key, options.to));
   }
-  return _assign$1(_assign$1({}, options), convertTransitionToAnimationOptions(transition));
+  return _assign(_assign({}, options), convertTransitionToAnimationOptions(transition));
 }
 /**
  *
@@ -17736,7 +17711,7 @@ function getAnimation(key, value, target, transition, onComplete) {
         return value.set(v);
       }
     };
-    return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia(_assign$1(_assign$1({}, options), valueTransition)) : animate(_assign$1(_assign$1({}, getPopmotionAnimationOptions(valueTransition, options, key)), {
+    return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia(_assign(_assign({}, options), valueTransition)) : animate(_assign(_assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), {
       onUpdate: function onUpdate(v) {
         var _a;
         options.onUpdate(v);
@@ -18253,8 +18228,8 @@ function setTarget(visualElement, definition) {
     _b = _a.transitionEnd,
     transitionEnd = _b === void 0 ? {} : _b;
   _a.transition;
-  var target = __rest$1(_a, ["transitionEnd", "transition"]);
-  target = _assign$1(_assign$1({}, target), transitionEnd);
+  var target = __rest(_a, ["transitionEnd", "transition"]);
+  target = _assign(_assign({}, target), transitionEnd);
   for (var key in target) {
     var value = resolveFinalValueInKeyframes(target[key]);
     setMotionValue(visualElement, key, value);
@@ -18405,7 +18380,7 @@ function animateTarget(visualElement, definition, _a) {
     _f = _e.transition,
     transition = _f === void 0 ? visualElement.getDefaultTransition() : _f,
     transitionEnd = _e.transitionEnd,
-    target = __rest$1(_e, ["transition", "transitionEnd"]);
+    target = __rest(_e, ["transition", "transitionEnd"]);
   if (transitionOverride) transition = transitionOverride;
   var animations = [];
   var animationTypeState = type && ((_b = visualElement.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]);
@@ -18415,7 +18390,7 @@ function animateTarget(visualElement, definition, _a) {
     if (!value || valueTarget === undefined || animationTypeState && shouldBlockAnimation(animationTypeState, key)) {
       continue;
     }
-    var animation = startAnimation(key, value, valueTarget, _assign$1({
+    var animation = startAnimation(key, value, valueTarget, _assign({
       delay: delay
     }, transition));
     animations.push(animation);
@@ -18448,7 +18423,7 @@ function animateChildren(visualElement, variant, delayChildren, staggerChildren,
     return maxStaggerDuration - i * staggerChildren;
   };
   Array.from(visualElement.variantChildren).sort(sortByTreeOrder).forEach(function (child, i) {
-    animations.push(animateVariant(child, variant, _assign$1(_assign$1({}, options), {
+    animations.push(animateVariant(child, variant, _assign(_assign({}, options), {
       delay: delayChildren + generateStaggerDuration(i)
     })).then(function () {
       return child.notifyAnimationComplete(variant);
@@ -18499,8 +18474,8 @@ function createAnimationState(visualElement) {
     if (resolved) {
       resolved.transition;
       var transitionEnd = resolved.transitionEnd,
-        target = __rest$1(resolved, ["transition", "transitionEnd"]);
-      acc = _assign$1(_assign$1(_assign$1({}, acc), target), transitionEnd);
+        target = __rest(resolved, ["transition", "transitionEnd"]);
+      acc = _assign(_assign(_assign({}, acc), target), transitionEnd);
     }
     return acc;
   };
@@ -18577,7 +18552,7 @@ function createAnimationState(visualElement) {
        * Set all encountered keys so far as the protected keys for this type. This will
        * be any key that has been animated or otherwise handled by active, higher-priortiy types.
        */
-      typeState.protectedKeys = _assign$1({}, encounteredKeys);
+      typeState.protectedKeys = _assign({}, encounteredKeys);
       // Check if we can skip analysing this prop early
       if (
       // If it isn't active and hasn't *just* been set as inactive
@@ -18620,7 +18595,7 @@ function createAnimationState(visualElement) {
        */
       var _b = typeState.prevResolvedValues,
         prevResolvedValues = _b === void 0 ? {} : _b;
-      var allKeys = _assign$1(_assign$1({}, prevResolvedValues), resolvedValues);
+      var allKeys = _assign(_assign({}, prevResolvedValues), resolvedValues);
       var markToAnimate = function markToAnimate(key) {
         shouldAnimateType = true;
         removedKeys["delete"](key);
@@ -18680,7 +18655,7 @@ function createAnimationState(visualElement) {
        *
        */
       if (typeState.isActive) {
-        encounteredKeys = _assign$1(_assign$1({}, encounteredKeys), resolvedValues);
+        encounteredKeys = _assign(_assign({}, encounteredKeys), resolvedValues);
       }
       if (isInitialRender && visualElement.blockInitialAnimation) {
         shouldAnimateType = false;
@@ -18694,7 +18669,7 @@ function createAnimationState(visualElement) {
         animations.push.apply(animations, __spreadArray([], __read(definitionList.map(function (animation) {
           return {
             animation: animation,
-            options: _assign$1({
+            options: _assign({
               type: type
             }, options)
           };
@@ -18710,7 +18685,7 @@ function createAnimationState(visualElement) {
     for (var i = 0; i < numAnimationTypes; i++) {
       _loop_1(i);
     }
-    allAnimatedKeys = _assign$1({}, encounteredKeys);
+    allAnimatedKeys = _assign({}, encounteredKeys);
     /**
      * If there are some removed value that haven't been dealt with,
      * we need to create a new animation that falls back either to the value
@@ -18858,7 +18833,7 @@ var PanSession = /** @class */function () {
       if (!isPanStarted && !isDistancePastThreshold) return;
       var point = info.point;
       var timestamp = getFrameData().timestamp;
-      _this.history.push(_assign$1(_assign$1({}, point), {
+      _this.history.push(_assign(_assign({}, point), {
         timestamp: timestamp
       }));
       var _a = _this.handlers,
@@ -18900,7 +18875,7 @@ var PanSession = /** @class */function () {
     var initialInfo = transformPoint(info, this.transformPagePoint);
     var point = initialInfo.point;
     var timestamp = getFrameData().timestamp;
-    this.history = [_assign$1(_assign$1({}, point), {
+    this.history = [_assign(_assign({}, point), {
       timestamp: timestamp
     })];
     var onSessionStart = handlers.onSessionStart;
@@ -19065,8 +19040,8 @@ function axisBox() {
 }
 function copyAxisBox(box) {
   return {
-    x: _assign$1({}, box.x),
-    y: _assign$1({}, box.y)
+    x: _assign({}, box.x),
+    y: _assign({}, box.y)
   };
 }
 /**
@@ -19080,8 +19055,8 @@ var zeroDelta = {
 };
 function delta() {
   return {
-    x: _assign$1({}, zeroDelta),
-    y: _assign$1({}, zeroDelta)
+    x: _assign({}, zeroDelta),
+    y: _assign({}, zeroDelta)
   };
 }
 
@@ -19978,8 +19953,8 @@ var VisualElementDragControls = /** @class */function () {
       dragElastic = _f === void 0 ? defaultElastic : _f,
       _g = _a.dragMomentum,
       dragMomentum = _g === void 0 ? true : _g,
-      remainingProps = __rest$1(_a, ["drag", "dragDirectionLock", "dragPropagation", "dragConstraints", "dragElastic", "dragMomentum"]);
-    this.props = _assign$1({
+      remainingProps = __rest(_a, ["drag", "dragDirectionLock", "dragPropagation", "dragConstraints", "dragElastic", "dragMomentum"]);
+    this.props = _assign({
       drag: drag,
       dragDirectionLock: dragDirectionLock,
       dragPropagation: dragPropagation,
@@ -20062,7 +20037,7 @@ var VisualElementDragControls = /** @class */function () {
        */
       var bounceStiffness = dragElastic ? 200 : 1000000;
       var bounceDamping = dragElastic ? 40 : 10000000;
-      var inertia = _assign$1(_assign$1({
+      var inertia = _assign(_assign({
         type: "inertia",
         velocity: dragMomentum ? velocity[axis] : 0,
         bounceStiffness: bounceStiffness,
@@ -20246,7 +20221,7 @@ function useDrag(props) {
       visualElement: visualElement
     });
   });
-  dragControls.setProps(_assign$1(_assign$1({}, props), {
+  dragControls.setProps(_assign(_assign({}, props), {
     transformPagePoint: transformPagePoint
   }));
   // If we've been provided a DragControls for manual control over the drag gesture,
@@ -20379,7 +20354,7 @@ function getVariableValue(current, element, depth) {
  */
 function resolveCSSVariables(visualElement, _a, transitionEnd) {
   var _b;
-  var target = __rest$1(_a, []);
+  var target = __rest(_a, []);
   var element = visualElement.getInstance();
   if (!(element instanceof HTMLElement)) return {
     target: target,
@@ -20388,7 +20363,7 @@ function resolveCSSVariables(visualElement, _a, transitionEnd) {
   // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
   // only if they change but I think this reads clearer and this isn't a performance-critical path.
   if (transitionEnd) {
-    transitionEnd = _assign$1({}, transitionEnd);
+    transitionEnd = _assign({}, transitionEnd);
   }
   // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
   visualElement.forEachValue(function (value) {
@@ -20500,7 +20475,7 @@ var borderCorrectionDefinition = {
   process: correctBorderRadius
 };
 var defaultScaleCorrectors = {
-  borderRadius: _assign$1(_assign$1({}, borderCorrectionDefinition), {
+  borderRadius: _assign(_assign({}, borderCorrectionDefinition), {
     applyTo: ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"]
   }),
   borderTopLeftRadius: borderCorrectionDefinition,
@@ -20549,7 +20524,7 @@ var Animate = /** @class */function (_super) {
         shouldStackAnimate = _a.shouldStackAnimate,
         onComplete = _a.onComplete,
         prevParent = _a.prevParent,
-        config = __rest$1(_a, ["originBox", "targetBox", "visibilityAction", "shouldStackAnimate", "onComplete", "prevParent"]);
+        config = __rest(_a, ["originBox", "targetBox", "visibilityAction", "shouldStackAnimate", "onComplete", "prevParent"]);
       var _b = _this.props,
         visualElement = _b.visualElement,
         layout = _b.layout;
@@ -20629,7 +20604,7 @@ var Animate = /** @class */function (_super) {
         } else if (boxHasMoved) {
           // If the box has moved, animate between it's current visual state and its
           // final state
-          return _this.animateAxis(axis, target[axis], origin[axis], _assign$1(_assign$1({}, config), {
+          return _this.animateAxis(axis, target[axis], origin[axis], _assign(_assign({}, config), {
             isRelative: isRelative
           }));
         } else {
@@ -20740,7 +20715,7 @@ var Animate = /** @class */function (_super) {
 function AnimateLayoutContextProvider(props) {
   var _a = __read(usePresence(), 2),
     safeToRemove = _a[1];
-  return /*#__PURE__*/React__namespace.createElement(Animate, _assign$1({}, props, {
+  return /*#__PURE__*/React__namespace.createElement(Animate, _assign({}, props, {
     safeToRemove: safeToRemove
   }));
 }
@@ -20915,7 +20890,7 @@ var Measure = /** @class */function (_super) {
 function MeasureContextProvider(props) {
   var syncLayout = React.useContext(SharedLayoutContext);
   var framerSyncLayout = React.useContext(FramerTreeLayoutContext);
-  return /*#__PURE__*/React__namespace.default.createElement(Measure, _assign$1({}, props, {
+  return /*#__PURE__*/React__namespace.default.createElement(Measure, _assign({}, props, {
     syncLayout: syncLayout,
     framerSyncLayout: framerSyncLayout
   }));
@@ -21232,7 +21207,7 @@ var visualElement = function visualElement(_a) {
      * When values are removed from all animation props we need to search
      * for a fallback value to animate to. These values are tracked in baseTarget.
      */
-    var baseTarget = _assign$1({}, latestValues);
+    var baseTarget = _assign({}, latestValues);
     // Internal methods ========================
     /**
      * On mount, this will be hydrated with a callback to disconnect
@@ -21330,7 +21305,7 @@ var visualElement = function visualElement(_a) {
      */
     var isControllingVariants = checkIfControllingVariants(props);
     var isVariantNode = checkIfVariantNode(props);
-    var element = _assign$1(_assign$1({
+    var element = _assign(_assign({
       treeType: treeType,
       /**
        * This is a mirror of the internal instance prop, which keeps
@@ -22001,8 +21976,8 @@ var checkAndConvertChangedValueTypes = function checkAndConvertChangedValueTypes
   if (transitionEnd === void 0) {
     transitionEnd = {};
   }
-  target = _assign$1({}, target);
-  transitionEnd = _assign$1({}, transitionEnd);
+  target = _assign({}, target);
+  transitionEnd = _assign({}, transitionEnd);
   var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
   // We want to remove any transform values that could affect the element's bounding box before
   // it's measured. We'll reapply these later.
@@ -22179,7 +22154,7 @@ var htmlConfig = {
     }
     var transition = _a.transition,
       transitionEnd = _a.transitionEnd,
-      target = __rest$1(_a, ["transition", "transitionEnd"]);
+      target = __rest(_a, ["transition", "transitionEnd"]);
     var origin = getOrigin(target, transition || {}, element);
     /**
      * If Framer has provided a function to convert `Color` etc value types, convert them
@@ -22195,7 +22170,7 @@ var htmlConfig = {
       transitionEnd = parsed.transitionEnd;
       target = parsed.target;
     }
-    return _assign$1({
+    return _assign({
       transition: transition,
       transitionEnd: transitionEnd
     }, target);
@@ -22212,7 +22187,7 @@ var htmlConfig = {
 };
 var htmlVisualElement = visualElement(htmlConfig);
 
-var svgVisualElement = visualElement(_assign$1(_assign$1({}, htmlConfig), {
+var svgVisualElement = visualElement(_assign(_assign({}, htmlConfig), {
   getBaseTarget: function getBaseTarget(props, key) {
     return props[key];
   },
@@ -22240,7 +22215,7 @@ var createDomVisualElement = function createDomVisualElement(Component, options)
   });
 };
 
-var featureBundle = _assign$1(_assign$1(_assign$1(_assign$1({}, animations), gestureAnimations), drag), layoutAnimations);
+var featureBundle = _assign(_assign(_assign(_assign({}, animations), gestureAnimations), drag), layoutAnimations);
 /**
  * HTML & SVG components, optimised for use with gestures and animation. These can be used as
  * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
@@ -30944,7 +30919,7 @@ function createSidecarMedium(options) {
     options = {};
   }
   var medium = innerCreateMedium(null);
-  medium.options = _assign$1({
+  medium.options = _assign({
     async: true,
     ssr: false
   }, options);
@@ -30953,7 +30928,7 @@ function createSidecarMedium(options) {
 
 var SideCar$1 = function SideCar(_a) {
   var sideCar = _a.sideCar,
-    rest = __rest$1(_a, ["sideCar"]);
+    rest = __rest(_a, ["sideCar"]);
   if (!sideCar) {
     throw new Error('Sidecar: please provide `sideCar` property to import the right car');
   }
@@ -30961,7 +30936,7 @@ var SideCar$1 = function SideCar(_a) {
   if (!Target) {
     throw new Error('Sidecar medium not found');
   }
-  return /*#__PURE__*/React__namespace.createElement(Target, _assign$1({}, rest));
+  return /*#__PURE__*/React__namespace.createElement(Target, _assign({}, rest));
 };
 SideCar$1.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -31945,25 +31920,6 @@ if (__DEV__) {
   FocusLock.displayName = "FocusLock";
 }
 
-var _assign = function __assign() {
-  _assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return _assign.apply(this, arguments);
-};
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-
 var zeroRightClassName = 'right-scroll-bar-position';
 var fullWidthClassName = 'width-before-scroll-bar';
 var noScrollbarsClassName = 'with-scroll-bars-hidden';
@@ -36967,6 +36923,8 @@ var sizes$n = {
   // 14px
   4: '1rem',
   // 16px
+  4.5: '1.125rem',
+  // 18px
   5: '1.25rem',
   // 20px
   5.5: '1.375rem',
@@ -40445,7 +40403,7 @@ function anatomy(name) {
   return new Anatomy(name);
 }
 function toRef(operand) {
-  if (isObject$1(operand) && operand.reference) {
+  if (isObject(operand) && operand.reference) {
     return operand.reference;
   }
   return String(operand);
@@ -45247,72 +45205,72 @@ var Link_styles = merge$1(theme.components.Link, {
   defaultProps: defaultProps$6
 });
 
-var baseStyle$8 = {
-  icon: {
-    color: 'primary.default'
-  },
-  button: {
-    display: 'flex',
-    gridGap: 3.5,
-    alignItems: 'center',
-    fontSize: 'sm',
-    fontWeight: 'semibold',
-    _hover: {
-      backgroundColor: 'gray.50'
-    }
-  },
-  container: {
-    borderColor: 'gray.medium'
-  }
-};
-var variants$8 = {
-  lined: {
+const baseStyle$8 = {
+    icon: {
+        color: 'primary.default',
+    },
     button: {
-      px: 2,
-      py: 3
+        display: 'flex',
+        gridGap: 3.5,
+        alignItems: 'center',
+        fontSize: 'sm',
+        fontWeight: 'semibold',
+        _hover: {
+            backgroundColor: 'gray.50',
+        },
     },
     container: {
-      borderTopWidth: 1,
-      _last: {
-        borderBottomWidth: 1
-      }
+        borderColor: 'gray.medium',
     },
-    panel: {
-      px: 2,
-      py: 3
-    }
-  },
-  contained: {
-    button: {
-      px: 4,
-      py: 3
+};
+const variants$8 = {
+    lined: {
+        button: {
+            px: 2,
+            py: 3,
+        },
+        container: {
+            borderTopWidth: 1,
+            _last: {
+                borderBottomWidth: 1,
+            },
+        },
+        panel: {
+            px: 2,
+            py: 3,
+        },
     },
-    container: {
-      borderLeftWidth: 1,
-      borderRightWidth: 1,
-      _first: {
-        borderTopLeftRadius: 4,
-        borderTopRightRadius: 4
-      },
-      _last: {
-        borderBottomLeftRadius: 4,
-        borderBottomRightRadius: 4
-      }
+    contained: {
+        button: {
+            px: 4,
+            py: 3,
+        },
+        container: {
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            _first: {
+                borderTopLeftRadius: 4,
+                borderTopRightRadius: 4,
+            },
+            _last: {
+                borderBottomLeftRadius: 4,
+                borderBottomRightRadius: 4,
+            },
+        },
+        panel: {
+            p: 4,
+            borderColor: 'gray.medium',
+            borderTopWidth: 1,
+        },
     },
-    panel: {
-      p: 4,
-      borderColor: 'gray.medium',
-      borderTopWidth: 1
-    }
-  }
 };
-var defaultProps$5 = {
-  variant: 'lined'
+const defaultProps$5 = {
+    variant: 'lined',
 };
 var index$a = merge$1(theme.components.Accordion, {
-  variants: variants$8,
-  baseStyle: baseStyle$8,
-  defaultProps: defaultProps$5
+    variants: variants$8,
+    baseStyle: baseStyle$8,
+    defaultProps: defaultProps$5,
 });
 
 var colorScheme = {
@@ -47220,526 +47178,13 @@ function requireTemplate() {
 var templateExports = requireTemplate();
 var template = /*@__PURE__*/getDefaultExportFromCjs(templateExports);
 
-var environment$1 = {};
-
-/**
- * SSR Window 2.0.0
- * Better handling for window object in SSR environment
- * https://github.com/nolimits4web/ssr-window
- *
- * Copyright 2020, Vladimir Kharlampidi
- *
- * Licensed under MIT
- *
- * Released on: May 12, 2020
- */
-/* eslint-disable no-param-reassign */
-function isObject(obj) {
-  return obj !== null && _typeof$1(obj) === 'object' && 'constructor' in obj && obj.constructor === Object;
-}
-function extend(target, src) {
-  if (target === void 0) {
-    target = {};
-  }
-  if (src === void 0) {
-    src = {};
-  }
-  Object.keys(src).forEach(function (key) {
-    if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
-      extend(target[key], src[key]);
-    }
-  });
-}
-var doc = typeof document !== 'undefined' ? document : {};
-var ssrDocument = {
-  body: {},
-  addEventListener: function addEventListener() {},
-  removeEventListener: function removeEventListener() {},
-  activeElement: {
-    blur: function blur() {},
-    nodeName: ''
-  },
-  querySelector: function querySelector() {
-    return null;
-  },
-  querySelectorAll: function querySelectorAll() {
-    return [];
-  },
-  getElementById: function getElementById() {
-    return null;
-  },
-  createEvent: function createEvent() {
-    return {
-      initEvent: function initEvent() {}
-    };
-  },
-  createElement: function createElement() {
-    return {
-      children: [],
-      childNodes: [],
-      style: {},
-      setAttribute: function setAttribute() {},
-      getElementsByTagName: function getElementsByTagName() {
-        return [];
-      }
-    };
-  },
-  createElementNS: function createElementNS() {
-    return {};
-  },
-  importNode: function importNode() {
-    return null;
-  },
-  location: {
-    hash: '',
-    host: '',
-    hostname: '',
-    href: '',
-    origin: '',
-    pathname: '',
-    protocol: '',
-    search: ''
-  }
-};
-extend(doc, ssrDocument);
-var win = typeof window !== 'undefined' ? window : {};
-var ssrWindow = {
-  document: ssrDocument,
-  navigator: {
-    userAgent: ''
-  },
-  location: {
-    hash: '',
-    host: '',
-    hostname: '',
-    href: '',
-    origin: '',
-    pathname: '',
-    protocol: '',
-    search: ''
-  },
-  history: {
-    replaceState: function replaceState() {},
-    pushState: function pushState() {},
-    go: function go() {},
-    back: function back() {}
-  },
-  CustomEvent: function CustomEvent() {
-    return this;
-  },
-  addEventListener: function addEventListener() {},
-  removeEventListener: function removeEventListener() {},
-  getComputedStyle: function getComputedStyle() {
-    return {
-      getPropertyValue: function getPropertyValue() {
-        return '';
-      }
-    };
-  },
-  Image: function Image() {},
-  Date: function Date() {},
-  screen: {},
-  setTimeout: function setTimeout() {},
-  clearTimeout: function clearTimeout() {},
-  matchMedia: function matchMedia() {
-    return {};
+var _excluded$l = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
+function isHighDensityDisplay() {
+  if (typeof window === 'undefined') {
+    return false;
   }
-};
-extend(win, ssrWindow);
-
-var ssrWindow_esm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  document: doc,
-  extend: extend,
-  window: win
-});
-
-var require$$0 = /*@__PURE__*/getAugmentedNamespace(ssrWindow_esm);
-
-var hasRequiredEnvironment$1;
-function requireEnvironment$1() {
-  if (hasRequiredEnvironment$1) return environment$1;
-  hasRequiredEnvironment$1 = 1;
-  Object.defineProperty(environment$1, "__esModule", {
-    value: true
-  });
-  environment$1["default"] = void 0;
-  var _ssrWindow = require$$0;
-  // Most of the methods are pulled from https://is.js.org/. That library has many others that we'll never use so they are added here and made to work with SSR.
-
-  var appVersion = (_ssrWindow.window.navigator && _ssrWindow.window.navigator.appVersion || '').toLowerCase();
-  var userAgent = (_ssrWindow.window.navigator && _ssrWindow.window.navigator.userAgent || '').toLowerCase();
-  var vendor = (_ssrWindow.window.navigator && _ssrWindow.window.navigator.vendor || '').toLowerCase();
-  var comparator = {
-    '<': function _(a, b) {
-      return a < b;
-    },
-    '<=': function _(a, b) {
-      return a <= b;
-    },
-    '>': function _(a, b) {
-      return a > b;
-    },
-    '>=': function _(a, b) {
-      return a >= b;
-    }
-  };
-  var compareVersion = function compareVersion(version, range) {
-    var string = String(range);
-    var n = Number(string.match(/\d+/) || NaN);
-    var op = string.match(/^[<>]=?|/)[0];
-    return comparator[op] ? comparator[op](version, n) : version === n || n !== n; // eslint-disable-line no-self-compare
-  };
-
-  /**
-   * Utilities for working with the execution environment.
-   * @module EnvironmentUtils
-   */
-  var EnvironmentUtils = {
-    /**
-     * Determines whether the code is being executed in the browser.
-     * @static
-     * @function isBrowser
-     * @example
-     * EnvironmentUtils.isBrowser();
-     * @returns {Boolean} - Whether the environment is the browser.
-     */
-    isBrowser: function isBrowser() {
-      return typeof window !== 'undefined';
-    },
-    /**
-     * Determines whether the code is being executed in Google Chrome.
-     * @static
-     * @function isChrome
-     * @param {Number|String} [range] - The version range to test against.
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isChrome();
-     * @returns {Boolean} - Whether the environment is Google Chrome.
-     */
-    isChrome: function isChrome(range) {
-      var ua = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : userAgent;
-      var match = /google inc/.test(vendor) ? ua.match(/(?:chrome|crios)\/(\d+)/) : null;
-      return match !== null && !this.isOpera(range, ua) && compareVersion(match[1], range);
-    },
-    /**
-     * Determines whether the code is being executed in Mozilla Firefox.
-     * @static
-     * @function isFirefox
-     * @param {Number|String} [range] - The version range to test against.
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isFirefox();
-     * @returns {Boolean} - Whether the environment is Mozilla Firefox.
-     */
-    isFirefox: function isFirefox(range) {
-      var ua = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : userAgent;
-      var match = ua.match(/(?:firefox|fxios)\/(\d+)/);
-      return match !== null && compareVersion(match[1], range);
-    },
-    /**
-     * Determines whether the code is being executed in Apple Safari.
-     * @static
-     * @function isSafari
-     * @param {Number|String} [range] - The version range to test against.
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isSafari();
-     * @returns {Boolean} - Whether the environment is Apple Safari.
-     */
-    isSafari: function isSafari(range) {
-      var ua = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : userAgent;
-      var match = ua.match(/version\/(\d+).+?safari/);
-      return match !== null && compareVersion(match[1], range);
-    },
-    /**
-     * Determines whether the code is being executed in Microsoft Edge.
-     * @static
-     * @function isEdge
-     * @param {Number|String} [range] - The version range to test against.
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isEdge();
-     * @returns {Boolean} - Whether the environment is Microsoft Edge.
-     */
-    isEdge: function isEdge(range) {
-      var ua = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : userAgent;
-      var match = ua.match(/edge\/(\d+)/);
-      return match !== null && compareVersion(match[1], range);
-    },
-    /**
-     * Determines whether the code is being executed in Microsoft Internet Explorer.
-     * @static
-     * @function isIE
-     * @param {Number|String} [range] - The version range to test against.
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isIE();
-     * @returns {Boolean} - Whether the environment is Microsoft Internet Explorer.
-     */
-    isIE: function isIE(range) {
-      var ua = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : userAgent;
-      var match = ua.match(/(?:msie |trident.+?; rv:)(\d+)/);
-      return match !== null && compareVersion(match[1], range);
-    },
-    /**
-     * Determines whether the code is being executed in Opera.
-     * @static
-     * @function isOpera
-     * @param {Number|String} [range] - The version range to test against.
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isOpera();
-     * @returns {Boolean} - Whether the environment is Opera.
-     */
-    isOpera: function isOpera(range) {
-      var ua = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : userAgent;
-      var match = ua.match(/(?:^opera.+?version|opr)\/(\d+)/);
-      return match !== null && compareVersion(match[1], range);
-    },
-    /**
-     * Determines whether the code is being executed in iOS.
-     * @static
-     * @function isiOS
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isiOS();
-     * @returns {Boolean} - Whether the environment is iOS.
-     */
-    isiOS: function isiOS() {
-      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : userAgent;
-      return this.isiPhone(null, ua) || this.isiPad(null, ua) || this.isiPod(null, ua);
-    },
-    /**
-     * Determines whether the code is being executed on an iPhone.
-     * @static
-     * @function isiPhone
-     * @param {Number|String} [range] - The version range to test against.
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isiPhone();
-     * EnvironmentUtils.isiPhone(9);
-     * EnvironmentUtils.isiPhone('>=7');
-     * EnvironmentUtils.isiPhone('<8');
-     * @returns {Boolean} - Whether the environment is iPhone.
-     */
-    isiPhone: function isiPhone(range) {
-      var ua = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : userAgent;
-      // avoid false positive for Facebook in-app browser on ipad;
-      // original iphone doesn't have the OS portion of the UA
-      var match = this.isiPad(null, ua) ? null : ua.match(/iphone(?:.+?os (\d+))?/i);
-      return match !== null && compareVersion(match[1] || 1, range);
-    },
-    /**
-     * Determines whether the code is being executed on an iPad.
-     * @static
-     * @function isiPad
-     * @param {Number|String} [range] - The version range to test against.
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isiPad();
-     * EnvironmentUtils.isiPad(9);
-     * EnvironmentUtils.isiPad('>=7');
-     * EnvironmentUtils.isiPad('<8');
-     * @returns {Boolean} - Whether the environment is iPad.
-     */
-    isiPad: function isiPad(range) {
-      var ua = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : userAgent;
-      var match = ua.match(/ipad.+?os (\d+)/i);
-      return match !== null && compareVersion(match[1], range);
-    },
-    /**
-     * Determines whether the code is being executed on an iPod.
-     * @static
-     * @function isiPod
-     * @param {Number|String} [range] - The version range to test against.
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isiPod();
-     * EnvironmentUtils.isiPod(9);
-     * EnvironmentUtils.isiPod('>=7');
-     * EnvironmentUtils.isiPod('<8');
-     * @returns {Boolean} - Whether the environment is iPod.
-     */
-    isiPod: function isiPod(range) {
-      var ua = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : userAgent;
-      var match = ua.match(/ipod.+?os (\d+)/i);
-      return match !== null && compareVersion(match[1], range);
-    },
-    /**
-     * Determines whether the code is being executed in Android.
-     * @static
-     * @function isAndroid
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isAndroid();
-     * @returns {Boolean} - Whether the environment is Android.
-     */
-    isAndroid: function isAndroid() {
-      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : userAgent;
-      return /android/i.test(ua);
-    },
-    /**
-     * Determines whether the code is being executed on an Android phone.
-     * @static
-     * @function isAndroidPhone
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isAndroidPhone();
-     * @returns {Boolean} - Whether the environment is Android phone.
-     */
-    isAndroidPhone: function isAndroidPhone() {
-      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : userAgent;
-      return /android/i.test(ua) && /mobile/i.test(ua);
-    },
-    /**
-     * Determines whether the code is being executed on an Android tablet.
-     * @static
-     * @function isAndroidTablet
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isAndroidTablet();
-     * @returns {Boolean} - Whether the environment is Android tablet.
-     */
-    isAndroidTablet: function isAndroidTablet() {
-      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : userAgent;
-      return /android/i.test(ua) && !/mobile/i.test(ua);
-    },
-    /**
-     * Determines whether the code is being executed on a Blackberry.
-     * @static
-     * @function isBlackberry
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isBlackberry();
-     * @returns {Boolean} - Whether the environment is Blackberry.
-     */
-    isBlackberry: function isBlackberry() {
-      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : userAgent;
-      return /blackberry/i.test(ua) || /bb10/i.test(ua);
-    },
-    /**
-     * Determines whether the code is being executed on a Windows phone.
-     * @static
-     * @function isWindowsPhone
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isWindowsPhone();
-     * @returns {Boolean} - Whether the environment is Windows phone.
-     */
-    isWindowsPhone: function isWindowsPhone() {
-      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : userAgent;
-      return this.isWindows() && /phone/i.test(ua);
-    },
-    /**
-     * Determines whether the code is being executed on a Windows tablet.
-     * @static
-     * @function isWindowsTablet
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isWindowsTablet();
-     * @returns {Boolean} - Whether the environment is Windows tablet.
-     */
-    isWindowsTablet: function isWindowsTablet() {
-      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : userAgent;
-      return this.isWindows() && !this.isWindowsPhone(ua) && /touch/i.test(ua);
-    },
-    /**
-     * Determines whether the code is being executed on Windows.
-     * @static
-     * @function isWindows
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isWindows();
-     * @returns {Boolean} - Whether the environment is Windows.
-     */
-    isWindows: function isWindows() {
-      return /win/i.test(appVersion);
-    },
-    /**
-     * Determines whether the code is being executed on a tablet.
-     * @static
-     * @function isTablet
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isTablet();
-     * @returns {Boolean} - Whether the environment is a tablet.
-     */
-    isTablet: function isTablet() {
-      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : userAgent;
-      return this.isiPad(null, ua) || this.isAndroidTablet(ua) || this.isWindowsTablet(ua);
-    },
-    /**
-     * Determines whether the code is being executed on a mobile device.
-     * @static
-     * @function isMobileDevice
-     * @param {String} [ua=navigator.userAgent] - The user agent to test against.
-     * @example
-     * EnvironmentUtils.isMobileDevice();
-     * @returns {Boolean} - Whether the environment is a mobile device.
-     */
-    isMobileDevice: function isMobileDevice() {
-      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : userAgent;
-      return this.isiPhone(null, ua) || this.isiPod(null, ua) || this.isAndroidPhone(ua) || this.isBlackberry(ua) || this.isWindowsPhone(ua);
-    },
-    /**
-     * Determines whether the code is being executed on a touch device.
-     * @static
-     * @function isTouchDevice
-     * @example
-     * EnvironmentUtils.isTouchDevice();
-     * @returns {Boolean} - Whether the environment is a touch device.
-     */
-    isTouchDevice: function isTouchDevice() {
-      return Boolean(_ssrWindow.document) && ('ontouchstart' in _ssrWindow.document.documentElement || 'DocumentTouch' in _ssrWindow.document.documentElement && _ssrWindow.document instanceof window.DocumentTouch);
-    },
-    /**
-     * Determines whether the display has a high density.
-     * @static
-     * @function isHighDensityDisplay
-     * @example
-     * EnvironmentUtils.isHighDensityDisplay();
-     * @returns {Boolean} - Whether the display is high density.
-     */
-    isHighDensityDisplay: function isHighDensityDisplay() {
-      return _ssrWindow.window.matchMedia && (_ssrWindow.window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || _ssrWindow.window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches) || _ssrWindow.window.devicePixelRatio && _ssrWindow.window.devicePixelRatio > 1.3;
-    },
-    /**
-     * Returns a string based on browser util booleans, consumed by Segment and Optimizely
-     * @static
-     * @function getBrowserCategory
-     * @returns {String} - The browser string
-     */
-    getBrowserCategory: function getBrowserCategory() {
-      if (this.isChrome()) {
-        return 'Chrome';
-      } else if (this.isFirefox()) {
-        return 'Firefox';
-      } else if (this.isSafari()) {
-        return 'Safari';
-      } else if (this.isEdge() || this.isIE()) {
-        return 'IE/Edge';
-      }
-      return 'Other';
-    }
-  };
-  environment$1["default"] = EnvironmentUtils;
-  return environment$1;
-}
-
-var environment;
-var hasRequiredEnvironment;
-function requireEnvironment() {
-  if (hasRequiredEnvironment) return environment;
-  hasRequiredEnvironment = 1;
-  environment = requireEnvironment$1();
-  return environment;
+  return window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches) || window.devicePixelRatio && window.devicePixelRatio > 1.3;
 }
-
-var environmentExports = requireEnvironment();
-var EnvironmentUtils = /*@__PURE__*/getDefaultExportFromCjs(environmentExports);
-
-var _excluded$l = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
 var buildCloudinarySrc = function buildCloudinarySrc(_ref) {
   var cloudinaryImageId = _ref.cloudinaryImageId,
     cloudinaryTemplate = _ref.cloudinaryTemplate,
@@ -47747,7 +47192,7 @@ var buildCloudinarySrc = function buildCloudinarySrc(_ref) {
     htmlWidth = _ref.htmlWidth,
     htmlHeight = _ref.htmlHeight,
     quality = _ref.quality;
-  var defaultTemplate = "https://res.cloudinary.com/".concat(cloudinaryCloudName, "/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_").concat(EnvironmentUtils.isHighDensityDisplay() ? 2 : 1, ",h_$h,q_$q,w_$w/").concat(cloudinaryImageId);
+  var defaultTemplate = "https://res.cloudinary.com/".concat(cloudinaryCloudName, "/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_").concat(isHighDensityDisplay() ? 2 : 1, ",h_$h,q_$q,w_$w/").concat(cloudinaryImageId);
   var tmpl = cloudinaryTemplate ? cloudinaryTemplate : defaultTemplate;
   return template(tmpl, {
     interpolate: /{{([\s\S]+?)}}/g // matches template vars in the format '{{ var }}' or '{{var}}'