@thecb/components 11.0.1 → 11.0.2-beta.1

package/dist/index.esm.js

@@ -228,58 +228,6 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
-
-/*! *****************************************************************************
-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 */
-
-var extendStatics$1 = function(d, b) {
-    extendStatics$1 = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return extendStatics$1(d, b);
-};
-
-function __extends$1(d, b) {
-    extendStatics$1(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign$1 = function() {
-    __assign$1 = 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);
-};
-
-function __rest$1(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
 }
 
 function __spreadArrays() {
@@ -290,32 +238,6 @@ function __spreadArrays() {
     return r;
 }
 
-/*! *****************************************************************************
-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.
-***************************************************************************** */
-
-var __assign$2 = function() {
-    __assign$2 = 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$2.apply(this, arguments);
-};
-
 var clamp = function (min, max) { return function (v) {
     return Math.max(Math.min(v, max), min);
 }; };
@@ -329,8 +251,8 @@ var number = {
     parse: parseFloat,
     transform: function (v) { return v; }
 };
-var alpha = __assign$2(__assign$2({}, number), { transform: clamp(0, 1) });
-var scale = __assign$2(__assign$2({}, number), { default: 1 });
+var alpha = __assign(__assign({}, number), { transform: clamp(0, 1) });
+var scale = __assign(__assign({}, number), { default: 1 });
 
 var createUnitType = function (unit) { return ({
     test: function (v) {
@@ -344,7 +266,7 @@ var percent = createUnitType('%');
 var px = createUnitType('px');
 var vh = createUnitType('vh');
 var vw = createUnitType('vw');
-var progressPercentage = __assign$2(__assign$2({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
+var progressPercentage = __assign(__assign({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
 
 var getValueFromFunctionString = function (value) {
     return value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
@@ -378,7 +300,7 @@ var hslaTemplate = function (_a) {
     var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha = _b === void 0 ? 1 : _b;
     return "hsla(" + hue + ", " + saturation + ", " + lightness + ", " + alpha + ")";
 };
-var rgbUnit = __assign$2(__assign$2({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
+var rgbUnit = __assign(__assign({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
 function isColorString(color, colorType) {
     return color.startsWith(colorType) && singleColorRegex.test(color);
 }
@@ -408,7 +330,7 @@ var hsla = {
         });
     }
 };
-var hex = __assign$2(__assign$2({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
+var hex = __assign(__assign({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
         var r = '';
         var g = '';
         var b = '';
@@ -944,15 +866,15 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-var __assign$3 = function() {
-    __assign$3 = Object.assign || function __assign(t) {
+var __assign$1 = function() {
+    __assign$1 = 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$3.apply(this, arguments);
+    return __assign$1.apply(this, arguments);
 };
 
 var mixLinearColor = function (from, to, v) {
@@ -975,7 +897,7 @@ var mixColor = (function (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$3({}, fromColor);
+    var blended = __assign$1({}, fromColor);
     var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
     return function (v) {
         for (var key in blended) {
@@ -1020,7 +942,7 @@ var mixArray = function (from, to) {
     };
 };
 var mixObject = function (origin, target) {
-    var output = __assign$3({}, origin, target);
+    var output = __assign$1({}, origin, target);
     var blendValue = {};
     for (var key in output) {
         if (origin[key] !== undefined && target[key] !== undefined) {
@@ -1232,44 +1154,6 @@ var wrap$1 = curryRange(wrap);
 
 var clampProgress = clamp$1$1(0, 1);
 
-/*! *****************************************************************************
-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.
-***************************************************************************** */
-
-var __assign$4 = function() {
-    __assign$4 = 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$4.apply(this, arguments);
-};
-
-function __rest$2(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 createStyler = function (_a) {
     var onRead = _a.onRead,
         onRender = _a.onRender,
@@ -1281,7 +1165,7 @@ var createStyler = function (_a) {
         if (_a === void 0) {
             _a = {};
         }
-        var props = __rest$2(_a, []);
+        var props = __rest(_a, []);
         var state = {};
         var changedValues = [];
         var hasChanged = false;
@@ -1401,7 +1285,7 @@ function isTransformOriginProp(key) {
     return transformOriginProps.has(key);
 }
 
-var int = /*#__PURE__*/__assign$4( /*#__PURE__*/__assign$4({}, number), { transform: Math.round });
+var int = /*#__PURE__*/__assign( /*#__PURE__*/__assign({}, number), { transform: Math.round });
 var valueTypes = {
     color: color,
     backgroundColor: color,
@@ -1633,8 +1517,8 @@ function createCssStyler(element, _a) {
     }
     var enableHardwareAcceleration = _a.enableHardwareAcceleration,
         allowTransformNone = _a.allowTransformNone,
-        props = __rest$2(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
-    return cssStyler(__assign$4({ element: element, buildStyles: createStyleBuilder({
+        props = __rest(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
+    return cssStyler(__assign({ element: element, buildStyles: createStyleBuilder({
             enableHardwareAcceleration: enableHardwareAcceleration,
             allowTransformNone: allowTransformNone
         }), preparseOutput: true }, props));
@@ -1684,7 +1568,7 @@ function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs, isDas
         pathSpacing = _b === void 0 ? 1 : _b,
         _c = _a.pathOffset,
         pathOffset = _c === void 0 ? 0 : _c,
-        state = __rest$2(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+        state = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
     var style = cssBuilder(state);
     for (var key in style) {
         if (key === 'transform') {
@@ -1813,7 +1697,7 @@ var Chainable = /*#__PURE__*/function () {
         this.props = props;
     }
     Chainable.prototype.applyMiddleware = function (middleware) {
-        return this.create(__assign$1(__assign$1({}, this.props), { middleware: this.props.middleware ? __spreadArrays([middleware], this.props.middleware) : [middleware] }));
+        return this.create(__assign(__assign({}, this.props), { middleware: this.props.middleware ? __spreadArrays([middleware], this.props.middleware) : [middleware] }));
     };
     Chainable.prototype.pipe = function () {
         var funcs = [];
@@ -1885,7 +1769,7 @@ var createObserver = function (observerCandidate, _a, onComplete) {
 };
 
 var Action = /*#__PURE__*/function (_super) {
-    __extends$1(Action, _super);
+    __extends(Action, _super);
     function Action() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1904,13 +1788,13 @@ var Action = /*#__PURE__*/function (_super) {
         };
         var _a = this.props,
             init = _a.init,
-            observerProps = __rest$1(_a, ["init"]);
+            observerProps = __rest(_a, ["init"]);
         var observer = createObserver(observerCandidate, observerProps, function () {
             isComplete = true;
             subscription.stop();
         });
         var api = init(observer);
-        subscription = api ? __assign$1(__assign$1({}, subscription), api) : subscription;
+        subscription = api ? __assign(__assign({}, subscription), api) : subscription;
         if (observerCandidate.registerParent) {
             observerCandidate.registerParent(subscription);
         }
@@ -1924,7 +1808,7 @@ var action = function (init) {
 };
 
 var BaseMulticast = /*#__PURE__*/function (_super) {
-    __extends$1(BaseMulticast, _super);
+    __extends(BaseMulticast, _super);
     function BaseMulticast() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.subscribers = [];
@@ -1984,7 +1868,7 @@ var isSingleValue = function (v) {
     return typeOfV === 'string' || typeOfV === 'number';
 };
 var ValueReaction = /*#__PURE__*/function (_super) {
-    __extends$1(ValueReaction, _super);
+    __extends(ValueReaction, _super);
     function ValueReaction(props) {
         var _this = _super.call(this, props) || this;
         _this.scheduleVelocityCheck = function () {
@@ -2234,7 +2118,7 @@ var reduceArrayValue = function (i) {
 var createArrayAction = function (action, props, vectorKeys) {
     var firstVectorKey = vectorKeys[0];
     var actionList = props[firstVectorKey].map(function (v, i) {
-        var childActionProps = vectorKeys.reduce(reduceArrayValue(i), __assign$1({}, props));
+        var childActionProps = vectorKeys.reduce(reduceArrayValue(i), __assign({}, props));
         return getActionCreator(v)(action, childActionProps);
     });
     return parallel$1.apply(void 0, actionList);
@@ -2248,7 +2132,7 @@ var reduceObjectValue = function (key) {
 var createObjectAction = function (action, props, vectorKeys) {
     var firstVectorKey = vectorKeys[0];
     var actionMap = Object.keys(props[firstVectorKey]).reduce(function (map, key) {
-        var childActionProps = vectorKeys.reduce(reduceObjectValue(key), __assign$1({}, props));
+        var childActionProps = vectorKeys.reduce(reduceObjectValue(key), __assign({}, props));
         map[key] = getActionCreator(props[firstVectorKey][key])(action, childActionProps);
         return map;
     }, {});
@@ -2257,18 +2141,18 @@ var createObjectAction = function (action, props, vectorKeys) {
 var createUnitAction = function (action, _a) {
     var from = _a.from,
         to = _a.to,
-        props = __rest$1(_a, ["from", "to"]);
+        props = __rest(_a, ["from", "to"]);
     var unitType = findUnitType(from) || findUnitType(to);
     var transform = unitType.transform,
         parse = unitType.parse;
-    return action(__assign$1(__assign$1({}, props), { from: typeof from === 'string' ? parse(from) : from, to: typeof to === 'string' ? parse(to) : to })).pipe(transform);
+    return action(__assign(__assign({}, props), { from: typeof from === 'string' ? parse(from) : from, to: typeof to === 'string' ? parse(to) : to })).pipe(transform);
 };
 var createMixerAction = function (mixer) {
     return function (action, _a) {
         var from = _a.from,
             to = _a.to,
-            props = __rest$1(_a, ["from", "to"]);
-        return action(__assign$1(__assign$1({}, props), { from: 0, to: 1 })).pipe(mixer(from, to));
+            props = __rest(_a, ["from", "to"]);
+        return action(__assign(__assign({}, props), { from: 0, to: 1 })).pipe(mixer(from, to));
     };
 };
 var createColorAction = /*#__PURE__*/createMixerAction(mixColor);
@@ -2614,7 +2498,7 @@ var keyframes = function (_a) {
         ease = _b === void 0 ? linear : _b,
         times = _a.times,
         values = _a.values,
-        tweenProps = __rest$1(_a, ["easings", "ease", "times", "values"]);
+        tweenProps = __rest(_a, ["easings", "ease", "times", "values"]);
     easings = Array.isArray(easings) ? easings : defaultEasings(values, easings);
     times = times || defaultTimings(values);
     var scrubbers = easings.map(function (easing, i) {
@@ -2624,7 +2508,7 @@ var keyframes = function (_a) {
             ease: easing
         });
     });
-    return tween(__assign$1(__assign$1({}, tweenProps), { ease: ease })).applyMiddleware(function (update) {
+    return tween(__assign(__assign({}, tweenProps), { ease: ease })).applyMiddleware(function (update) {
         return interpolateScrubbers(times, scrubbers, update);
     });
 };
@@ -2868,7 +2752,7 @@ var index$1 = function (_a) {
     }
     var x = _a.x,
         y = _a.y,
-        props = __rest$1(_a, ["x", "y"]);
+        props = __rest(_a, ["x", "y"]);
     if (x !== undefined || y !== undefined) {
         var applyXOffset_1 = applyOffset(x || 0);
         var applyYOffset_1 = applyOffset(y || 0);
@@ -2942,7 +2826,7 @@ var steps$1 = function (st, min, max) {
 };
 var transformMap = function (childTransformers) {
     return function (v) {
-        var output = __assign$1({}, v);
+        var output = __assign({}, v);
         for (var key in childTransformers) {
             if (childTransformers.hasOwnProperty(key)) {
                 var childTransformer = childTransformers[key];
@@ -2973,52 +2857,6 @@ var transformers = /*#__PURE__*/Object.freeze({
     transformMap: transformMap
 });
 
-/*! *****************************************************************************
-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.
-***************************************************************************** */
-
-var __assign$5 = function() {
-    __assign$5 = 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$5.apply(this, arguments);
-};
-
-function __rest$3(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __spreadArrays$1() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-}
-
 var getPoseValues = function (_a) {
     var transition = _a.transition,
         flip = _a.flip,
@@ -3031,7 +2869,7 @@ var getPoseValues = function (_a) {
         preTransition = _a.preTransition,
         applyAtStart = _a.applyAtStart,
         applyAtEnd = _a.applyAtEnd,
-        props = __rest$3(_a, ["transition", "flip", "delay", "delayChildren", "staggerChildren", "staggerDirection", "afterChildren", "beforeChildren", "preTransition", "applyAtStart", "applyAtEnd"]);
+        props = __rest(_a, ["transition", "flip", "delay", "delayChildren", "staggerChildren", "staggerDirection", "afterChildren", "beforeChildren", "preTransition", "applyAtStart", "applyAtEnd"]);
     return props;
 };
 var selectPoses = function (_a) {
@@ -3043,7 +2881,7 @@ var selectPoses = function (_a) {
         onChange = _a.onChange,
         passive = _a.passive,
         initialPose = _a.initialPose,
-        poses = __rest$3(_a, ["label", "props", "values", "parentValues", "ancestorValues", "onChange", "passive", "initialPose"]);
+        poses = __rest(_a, ["label", "props", "values", "parentValues", "ancestorValues", "onChange", "passive", "initialPose"]);
     return poses;
 };
 var selectAllValues = function (values, selectValue) {
@@ -3143,7 +2981,7 @@ var createPoseSetter = function (setterProps) {
         var _a = nextProps.delay,
             delay = _a === void 0 ? 0 : _a;
         var hasChildren = children.size;
-        var baseTransitionProps = __assign$5(__assign$5({}, props), nextProps);
+        var baseTransitionProps = __assign(__assign({}, props), nextProps);
         var nextPose = poses[next];
         var getChildAnimations = function () {
             return hasChildren && propagate ? startChildAnimations(children, next, nextPose, baseTransitionProps) : [];
@@ -3169,11 +3007,11 @@ var createPoseSetter = function (setterProps) {
                 valuePoses.splice(insertionIndex, 0, next);
                 return insertionIndex === 0 ? new Promise(function (complete) {
                     var value = values.get(key);
-                    var transitionProps = __assign$5(__assign$5({}, baseTransitionProps), { key: key,
+                    var transitionProps = __assign(__assign({}, baseTransitionProps), { key: key,
                         value: value });
                     var target = resolveTarget(value, resolveProp(nextPose[key], transitionProps));
                     if (activeActions.has(key)) stopAction(activeActions.get(key));
-                    var resolveTransitionProps = __assign$5(__assign$5({ to: target }, transitionProps), getTransitionProps(value, target, transitionProps));
+                    var resolveTransitionProps = __assign(__assign({ to: target }, transitionProps), getTransitionProps(value, target, transitionProps));
                     var transition = resolveTransition(getTransition, key, value, resolveTransitionProps, convertTransitionDefinition, getInstantTransition);
                     var poseDelay = delay || resolveProp(nextPose.delay, transitionProps);
                     if (poseDelay) {
@@ -3197,7 +3035,7 @@ var createPoseSetter = function (setterProps) {
                 });
             }
         }
-        return Promise.all(__spreadArrays$1(getParentAnimations(), getChildAnimations()));
+        return Promise.all(__spreadArrays(getParentAnimations(), getChildAnimations()));
     };
 };
 
@@ -3323,7 +3161,7 @@ var createValueMap = function (props) {
 };
 
 var applyDefaultTransition = function (pose, key, defaultTransitions) {
-    return __assign$5(__assign$5({}, pose), { transition: defaultTransitions.has(key) ? defaultTransitions.get(key) : defaultTransitions.get('default') });
+    return __assign(__assign({}, pose), { transition: defaultTransitions.has(key) ? defaultTransitions.get(key) : defaultTransitions.get('default') });
 };
 var generateTransitions = function (poses, defaultTransitions) {
     Object.keys(poses).forEach(function (key) {
@@ -3377,7 +3215,7 @@ var poseFactory = function (_a) {
         var poses = generateTransitions(selectPoses(config), defaultTransitions);
         var _b = config.props,
             props = _b === void 0 ? {} : _b;
-        if (getDefaultProps) props = __assign$5(__assign$5({}, getDefaultProps(config)), props);
+        if (getDefaultProps) props = __assign(__assign({}, getDefaultProps(config)), props);
         var passive = config.passive,
             userSetValues = config.values,
             _c = config.initialPose,
@@ -3452,10 +3290,10 @@ var poseFactory = function (_a) {
             },
             has: has,
             setProps: function (newProps) {
-                return state.props = __assign$5(__assign$5({}, state.props), newProps);
+                return state.props = __assign(__assign({}, state.props), newProps);
             },
             _addChild: function (childConfig, factory) {
-                var child = factory(__assign$5(__assign$5({ initialPose: initialPose }, childConfig), { ancestorValues: __spreadArrays$1([{ label: config.label, values: values }], ancestorValues) }));
+                var child = factory(__assign(__assign({ initialPose: initialPose }, childConfig), { ancestorValues: __spreadArrays([{ label: config.label, values: values }], ancestorValues) }));
                 children.add(child);
                 return child;
             },
@@ -3494,18 +3332,18 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-var __assign$6 = function () {
-    __assign$6 = Object.assign || function __assign(t) {
+var __assign$2 = function () {
+    __assign$2 = 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$6.apply(this, arguments);
+    return __assign$2.apply(this, arguments);
 };
 
-function __rest$4(s, e) {
+function __rest$1(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++) {
@@ -3622,12 +3460,12 @@ var intelligentTransition = {
     opacity: linearTween,
     default: tween
 };
-var dragAction = /*#__PURE__*/__assign$6( /*#__PURE__*/__assign$6({}, intelligentTransition), { x: /*#__PURE__*/createPointer(pointerX, 'left', 'right', BoundingBoxDimension.width), y: /*#__PURE__*/createPointer(pointerY, 'top', 'bottom', BoundingBoxDimension.height) });
+var dragAction = /*#__PURE__*/__assign$2( /*#__PURE__*/__assign$2({}, intelligentTransition), { x: /*#__PURE__*/createPointer(pointerX, 'left', 'right', BoundingBoxDimension.width), y: /*#__PURE__*/createPointer(pointerY, 'top', 'bottom', BoundingBoxDimension.height) });
 var justAxis = function (_a) {
     var from = _a.from;
     return just(from);
 };
-var intelligentDragEnd = /*#__PURE__*/__assign$6( /*#__PURE__*/__assign$6({}, intelligentTransition), { x: justAxis, y: justAxis });
+var intelligentDragEnd = /*#__PURE__*/__assign$2( /*#__PURE__*/__assign$2({}, intelligentTransition), { x: justAxis, y: justAxis });
 var defaultTransitions = /*#__PURE__*/new Map([['default', intelligentTransition], ['drag', dragAction], ['dragEnd', intelligentDragEnd]]);
 
 var animationLookup = {
@@ -3697,7 +3535,7 @@ var getAction = function (v, _a, _b) {
     var _c = _a.type,
         type = _c === void 0 ? 'tween' : _c,
         definedEase = _a.ease,
-        def = __rest$4(_a, ["type", "ease"]);
+        def = __rest$1(_a, ["type", "ease"]);
     invariant(animationLookup[type] !== undefined, "Invalid transition type '" + type + "'. Valid transition types are: tween, spring, decay, physics and keyframes.");
     var ease;
     if (type === 'tween') {
@@ -3722,7 +3560,7 @@ var getAction = function (v, _a, _b) {
         velocity: velocity,
         ease: ease
     } : { ease: ease };
-    return animationLookup[type](__assign$6(__assign$6({}, baseProps), def));
+    return animationLookup[type](__assign$2(__assign$2({}, baseProps), def));
 };
 var isAction = function (action$$1) {
     return typeof action$$1.start !== 'undefined';
@@ -3807,7 +3645,7 @@ var pose = function (_a) {
                 min = def.min,
                 max = def.max,
                 round = def.round,
-                remainingDef = __rest$4(def, ["delay", "min", "max", "round"]);
+                remainingDef = __rest$1(def, ["delay", "min", "max", "round"]);
             var action$$1 = getAction(val, remainingDef, props);
             var outputPipe = [];
             if (delay$$1) action$$1 = addActionDelay(delay$$1, action$$1);
@@ -3989,7 +3827,7 @@ var explicitlyFlipPose = function (state, nextPose) {
         bottom = nextPose.bottom,
         right = nextPose.right,
         position = nextPose.position,
-        remainingPose = __rest$4(nextPose, ["width", "height", "top", "left", "bottom", "right", "position"]);
+        remainingPose = __rest$1(nextPose, ["width", "height", "top", "left", "bottom", "right", "position"]);
     var propsToSet = positionalProps.concat('position').reduce(function (acc, key) {
         if (nextPose[key] !== undefined) {
             acc[key] = resolveProp$1(nextPose[key], state.props);
@@ -4101,7 +3939,7 @@ var convertPositionalUnits = function (state, nextPose) {
             changedPositionalKeys.push(key);
             if (!applyAtEndHasBeenCopied) {
                 applyAtEndHasBeenCopied = true;
-                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$6({}, nextPose.applyAtEnd) : {};
+                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$2({}, nextPose.applyAtEnd) : {};
             }
             nextPose.applyAtEnd[key] = nextPose.applyAtEnd[key] || nextPose[key];
             setValue(state, key, to);
@@ -4157,8 +3995,8 @@ var createPoseConfig = function (element, _a) {
         focusable = _a.focusable,
         pressable = _a.pressable,
         dragBounds = _a.dragBounds,
-        config = __rest$4(_a, ["onDragStart", "onDragEnd", "onPressStart", "onPressEnd", "draggable", "hoverable", "focusable", "pressable", "dragBounds"]);
-    var poseConfig = __assign$6(__assign$6({ flip: {} }, config), { props: __assign$6(__assign$6({}, config.props), { onDragStart: onDragStart,
+        config = __rest$1(_a, ["onDragStart", "onDragEnd", "onPressStart", "onPressEnd", "draggable", "hoverable", "focusable", "pressable", "dragBounds"]);
+    var poseConfig = __assign$2(__assign$2({ flip: {} }, config), { props: __assign$2(__assign$2({}, config.props), { onDragStart: onDragStart,
             onDragEnd: onDragEnd,
             onPressStart: onPressStart,
             onPressEnd: onPressEnd,
@@ -4172,8 +4010,8 @@ var createPoseConfig = function (element, _a) {
         var _b = dragPoses(draggable),
             drag = _b.drag,
             dragEnd = _b.dragEnd;
-        poseConfig.drag = __assign$6(__assign$6({}, drag), poseConfig.drag);
-        poseConfig.dragEnd = __assign$6(__assign$6({}, dragEnd), poseConfig.dragEnd);
+        poseConfig.drag = __assign$2(__assign$2({}, drag), poseConfig.drag);
+        poseConfig.dragEnd = __assign$2(__assign$2({}, dragEnd), poseConfig.dragEnd);
     }
     return poseConfig;
 };
@@ -4181,7 +4019,7 @@ var domPose = /*#__PURE__*/pose({
     posePriority: ['drag', 'press', 'focus', 'hover'],
     transformPose: function (_a, name, state) {
         var flip = _a.flip,
-            pose$$1 = __rest$4(_a, ["flip"]);
+            pose$$1 = __rest$1(_a, ["flip"]);
         if (isFlipPose(flip, name, state)) {
             return flipPose(state, pose$$1);
         } else if (isPositional(pose$$1)) {
@@ -4219,7 +4057,7 @@ var domPose = /*#__PURE__*/pose({
         var props = _a.props,
             activeActions = _a.activeActions;
         var measure = props.dimensions.measure;
-        var poserApi = __assign$6(__assign$6({}, api), { addChild: function (element, childConfig) {
+        var poserApi = __assign$2(__assign$2({}, api), { addChild: function (element, childConfig) {
                 return api._addChild(createPoseConfig(element, childConfig), domPose);
             }, measure: measure, flip: function (op) {
                 if (op) {
@@ -7247,104 +7085,6 @@ var Imposter = function Imposter(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null)));
 };
 
-/*! *****************************************************************************
-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 */
-
-var extendStatics$2 = function(d, b) {
-    extendStatics$2 = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return extendStatics$2(d, b);
-};
-
-function __extends$2(d, b) {
-    extendStatics$2(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign$7 = function() {
-    __assign$7 = 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$7.apply(this, arguments);
-};
-
-function __rest$5(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __spreadArrays$2() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-}
-
-/*! *****************************************************************************
-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.
-***************************************************************************** */
-
-var __assign$8 = function() {
-    __assign$8 = 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$8.apply(this, arguments);
-};
-
-function __rest$6(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 Observer$1 = /*#__PURE__*/function () {
     function Observer(_a, observer) {
         var _this = this;
@@ -7407,18 +7147,18 @@ var Action$1 = /*#__PURE__*/function () {
         };
         var _a = this.props,
             init = _a.init,
-            observerProps = __rest$6(_a, ["init"]);
+            observerProps = __rest(_a, ["init"]);
         var observer = createObserver$1(observerCandidate, observerProps, function () {
             isComplete = true;
             subscription.stop();
         });
         var api = init(observer);
-        subscription = api ? __assign$8({}, subscription, api) : subscription;
+        subscription = api ? __assign({}, subscription, api) : subscription;
         if (isComplete) subscription.stop();
         return subscription;
     };
     Action.prototype.applyMiddleware = function (middleware) {
-        return this.create(__assign$8({}, this.props, { middleware: this.props.middleware ? [middleware].concat(this.props.middleware) : [middleware] }));
+        return this.create(__assign({}, this.props, { middleware: this.props.middleware ? [middleware].concat(this.props.middleware) : [middleware] }));
     };
     Action.prototype.pipe = function () {
         var funcs = [];
@@ -7471,18 +7211,18 @@ var createAction$1 = function (action, props) {
 var createUnitAction$1 = function (action, _a) {
     var from = _a.from,
         to = _a.to,
-        props = __rest$6(_a, ["from", "to"]);
+        props = __rest(_a, ["from", "to"]);
     var unitType = findUnitType$1(from) || findUnitType$1(to);
     var transform = unitType.transform,
         parse = unitType.parse;
-    return action(__assign$8({}, props, { from: typeof from === 'string' ? parse(from) : from, to: typeof to === 'string' ? parse(to) : to })).pipe(transform);
+    return action(__assign({}, props, { from: typeof from === 'string' ? parse(from) : from, to: typeof to === 'string' ? parse(to) : to })).pipe(transform);
 };
 var createMixerAction$1 = function (mixer) {
     return function (action, _a) {
         var from = _a.from,
             to = _a.to,
-            props = __rest$6(_a, ["from", "to"]);
-        return action(__assign$8({}, props, { from: 0, to: 1 })).pipe(mixer(from, to));
+            props = __rest(_a, ["from", "to"]);
+        return action(__assign({}, props, { from: 0, to: 1 })).pipe(mixer(from, to));
     };
 };
 var createColorAction$1 = /*#__PURE__*/createMixerAction$1(mixColor);
@@ -7695,7 +7435,7 @@ var inertia = function (_a) {
         };
         var startSpring = function (props) {
             isSpring = true;
-            startAnimation(vectorSpring$1(__assign$8({}, props, { to: isLessThanMin(props.from) ? min : max, stiffness: bounceStiffness, damping: bounceDamping, restDelta: restDelta })));
+            startAnimation(vectorSpring$1(__assign({}, props, { to: isLessThanMin(props.from) ? min : max, stiffness: bounceStiffness, damping: bounceDamping, restDelta: restDelta })));
         };
         if (isOutOfBounds(from)) {
             startSpring({ from: from, velocity: velocity });
@@ -7927,7 +7667,7 @@ var keyframes$1 = function (_a) {
         ease = _b === void 0 ? linear : _b,
         times = _a.times,
         values = _a.values,
-        tweenProps = __rest$6(_a, ["easings", "ease", "times", "values"]);
+        tweenProps = __rest(_a, ["easings", "ease", "times", "values"]);
     easings = Array.isArray(easings) ? easings : defaultEasings$1(values, easings);
     times = times || defaultTimings$1(values);
     var scrubbers = easings.map(function (easing, i) {
@@ -7937,7 +7677,7 @@ var keyframes$1 = function (_a) {
             ease: easing
         });
     });
-    return tween$1(__assign$8({}, tweenProps, { ease: ease })).applyMiddleware(function (update) {
+    return tween$1(__assign({}, tweenProps, { ease: ease })).applyMiddleware(function (update) {
         return interpolateScrubbers$1(times, scrubbers, update);
     });
 };
@@ -8139,7 +7879,7 @@ var MotionValue = /** @class */ (function () {
      */
     MotionValue.prototype.addChild = function (config) {
         if (config === void 0) { config = {}; }
-        var child = new MotionValue(this.current, __assign$7({ parent: this }, config));
+        var child = new MotionValue(this.current, __assign({ parent: this }, config));
         if (!this.children)
             this.children = new Set();
         this.children.add(child);
@@ -8581,7 +8321,7 @@ var buildStyleAttr = function (values, styleProp, isStatic) {
             ? transformTemplate({}, styleProp.transform)
             : transformTemplate;
     }
-    return buildStyleProperty(__assign$7(__assign$7({}, styleProp), motionValueStyles), !isStatic);
+    return buildStyleProperty(__assign(__assign({}, styleProp), motionValueStyles), !isStatic);
 };
 var useMotionStyles = function (values, styleProp, isStatic, transformValues) {
     if (styleProp === void 0) { styleProp = {}; }
@@ -8635,7 +8375,7 @@ var auto$1 = {
     parse: function (v) { return v; },
 };
 var dimensionTypes = [number, px, percent, degrees, vw, vh, auto$1];
-var valueTypes$1 = __spreadArrays$2(dimensionTypes, [color, complex]);
+var valueTypes$1 = __spreadArrays(dimensionTypes, [color, complex]);
 var testValueType$1 = function (v) { return function (type) { return type.test(v); }; };
 var getDimensionValueType = function (v) {
     return dimensionTypes.find(testValueType$1(v));
@@ -8688,7 +8428,7 @@ var getDefaultTransition = function (valueKey, to) {
         transitionFactory =
             defaultTransitions$1[valueKey] || defaultTransitions$1.default;
     }
-    return __assign$7({ to: to }, transitionFactory(to));
+    return __assign({ to: to }, transitionFactory(to));
 };
 
 /**
@@ -8784,9 +8524,9 @@ var transitionOptionParser = {
         return opts;
     },
     keyframes: function (_a) {
-        var from = _a.from, to = _a.to, velocity = _a.velocity, opts = __rest$5(_a, ["from", "to", "velocity"]);
+        var from = _a.from, to = _a.to, velocity = _a.velocity, opts = __rest(_a, ["from", "to", "velocity"]);
         if (opts.values && opts.values[0] === null) {
-            var values = __spreadArrays$2(opts.values);
+            var values = __spreadArrays(opts.values);
             values[0] = from;
             opts.values = values;
         }
@@ -8800,7 +8540,7 @@ var transitionOptionParser = {
     },
 };
 var isTransitionDefined = function (_a) {
-    var when = _a.when, delay = _a.delay, delayChildren = _a.delayChildren, staggerChildren = _a.staggerChildren, staggerDirection = _a.staggerDirection, transition = __rest$5(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection"]);
+    var when = _a.when, delay = _a.delay, delayChildren = _a.delayChildren, staggerChildren = _a.staggerChildren, staggerDirection = _a.staggerDirection, transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection"]);
     return Object.keys(transition).length;
 };
 var getTransitionDefinition = function (key, to, transitionDefinition) {
@@ -8810,7 +8550,7 @@ var getTransitionDefinition = function (key, to, transitionDefinition) {
     // and see if there's any props remaining
     if (transitionDefinition === undefined ||
         !isTransitionDefined(transitionDefinition)) {
-        return __assign$7({ delay: delay }, getDefaultTransition(key, to));
+        return __assign({ delay: delay }, getDefaultTransition(key, to));
     }
     var valueTransitionDefinition = transitionDefinition[key] ||
         transitionDefinition.default ||
@@ -8827,12 +8567,12 @@ var getTransitionDefinition = function (key, to, transitionDefinition) {
         };
     }
     else if (isKeyframesTarget(to)) {
-        return __assign$7(__assign$7({ values: to, duration: 0.8, delay: delay, ease: "linear" }, valueTransitionDefinition), { 
+        return __assign(__assign({ values: to, duration: 0.8, delay: delay, ease: "linear" }, valueTransitionDefinition), { 
             // This animation must be keyframes if we're animating through an array
             type: "keyframes" });
     }
     else {
-        return __assign$7({ type: "tween", to: to,
+        return __assign({ type: "tween", to: to,
             delay: delay }, valueTransitionDefinition);
     }
 };
@@ -8849,12 +8589,12 @@ var getAnimation = function (key, value, target, transition) {
     // for instance 100 to #fff. This might live better in Popmotion.
     warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to " + target + ". \"" + origin + "\" is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
     // Parse the `transition` prop and return options for the Popmotion animation
-    var _a = getTransitionDefinition(key, target, transition), _b = _a.type, type = _b === void 0 ? "tween" : _b, transitionDefinition = __rest$5(_a, ["type"]);
+    var _a = getTransitionDefinition(key, target, transition), _b = _a.type, type = _b === void 0 ? "tween" : _b, transitionDefinition = __rest(_a, ["type"]);
     // If this is an animatable pair of values, return an animation, otherwise use `just`
     var actionFactory = isOriginAnimatable && isTargetAnimatable
         ? transitions[type]
         : just$1;
-    var opts = preprocessOptions(type, __assign$7({ from: origin, velocity: value.getVelocity() }, transitionDefinition));
+    var opts = preprocessOptions(type, __assign({ from: origin, velocity: value.getVelocity() }, transitionDefinition));
     // Convert duration from Framer Motion's seconds into Popmotion's milliseconds
     if (isDurationAnimation(opts)) {
         if (opts.duration) {
@@ -8872,10 +8612,10 @@ var getAnimation = function (key, value, target, transition) {
  * @internal
  */
 function startAnimation(key, value, target, _a) {
-    var _b = _a.delay, delay$1$1 = _b === void 0 ? 0 : _b, transition = __rest$5(_a, ["delay"]);
+    var _b = _a.delay, delay$1$1 = _b === void 0 ? 0 : _b, transition = __rest(_a, ["delay"]);
     return value.start(function (complete) {
         var activeAnimation;
-        var _a = getAnimation(key, value, target, transition), animationFactory = _a[0], _b = _a[1], valueDelay = _b.delay, options = __rest$5(_b, ["delay"]);
+        var _a = getAnimation(key, value, target, transition), animationFactory = _a[0], _b = _a[1], valueDelay = _b.delay, options = __rest(_b, ["delay"]);
         if (valueDelay !== undefined) {
             delay$1$1 = valueDelay;
         }
@@ -9021,7 +8761,7 @@ var ValueAnimationControls = /** @class */ (function () {
         var _this = this;
         var _b = _a === void 0 ? {} : _a, _c = _b.isActive, isActive = _c === void 0 ? new Set() : _c, priority = _b.priority;
         var _d = this.resolveVariant(definition), target = _d.target, transitionEnd = _d.transitionEnd;
-        target = this.transformValues(__assign$7(__assign$7({}, target), transitionEnd));
+        target = this.transformValues(__assign(__assign({}, target), transitionEnd));
         return Object.keys(target).forEach(function (key) {
             if (isActive.has(key))
                 return;
@@ -9111,7 +8851,7 @@ var ValueAnimationControls = /** @class */ (function () {
             // resolve current and velocity
             variant = variant(this.props.custom, getCurrent$1(this.values), getVelocity(this.values));
         }
-        var _a = variant.transition, transition = _a === void 0 ? this.defaultTransition : _a, transitionEnd = variant.transitionEnd, target = __rest$5(variant, ["transition", "transitionEnd"]);
+        var _a = variant.transition, transition = _a === void 0 ? this.defaultTransition : _a, transitionEnd = variant.transitionEnd, target = __rest(variant, ["transition", "transitionEnd"]);
         return { transition: transition, transitionEnd: transitionEnd, target: target };
     };
     /**
@@ -9202,7 +8942,7 @@ var ValueAnimationControls = /** @class */ (function () {
     ValueAnimationControls.prototype.applyVariantLabels = function (variantLabelList) {
         var _this = this;
         var isActive = new Set();
-        var reversedList = __spreadArrays$2(variantLabelList).reverse();
+        var reversedList = __spreadArrays(variantLabelList).reverse();
         reversedList.forEach(function (key) {
             var _a = _this.resolveVariant(_this.variants[key]), target = _a.target, transitionEnd = _a.transitionEnd;
             if (transitionEnd) {
@@ -9273,7 +9013,7 @@ var ValueAnimationControls = /** @class */ (function () {
             if (this.isAnimating.has(key))
                 continue;
             this.isAnimating.add(key);
-            animations.push(startAnimation(key, value, valueTarget, __assign$7({ delay: delay }, transition)));
+            animations.push(startAnimation(key, value, valueTarget, __assign({ delay: delay }, transition)));
         }
         var allAnimations = Promise.all(animations);
         return transitionEnd
@@ -9284,7 +9024,7 @@ var ValueAnimationControls = /** @class */ (function () {
     };
     ValueAnimationControls.prototype.animateVariantLabels = function (variantLabels, opts) {
         var _this = this;
-        var animations = __spreadArrays$2(variantLabels).reverse()
+        var animations = __spreadArrays(variantLabels).reverse()
             .map(function (label) { return _this.animateVariant(label, opts); });
         return Promise.all(animations);
     };
@@ -9728,7 +9468,7 @@ function useValueAnimationControls(config, props, subscribeToParentControls) {
             // Remove reference to onAnimationComplete from controls. All the MotionValues
             // are unsubscribed from this component separately. We let animations run out
             // as they might be animating other components.
-            var onAnimationComplete = props.onAnimationComplete, unmountProps = __rest$5(props, ["onAnimationComplete"]);
+            var onAnimationComplete = props.onAnimationComplete, unmountProps = __rest(props, ["onAnimationComplete"]);
             controls.setProps(unmountProps);
             parentControls && parentControls.removeChild(controls);
         };
@@ -10213,7 +9953,7 @@ var PanSession = /** @class */ (function () {
                 return;
             var point = info.point;
             var timestamp = getFrameData().timestamp;
-            _this.history.push(__assign$7(__assign$7({}, point), { timestamp: timestamp }));
+            _this.history.push(__assign(__assign({}, point), { timestamp: timestamp }));
             var _a = _this.handlers, onStart = _a.onStart, onMove = _a.onMove;
             if (!isPanStarted) {
                 onStart && onStart(_this.lastMoveEvent, info);
@@ -10230,7 +9970,7 @@ var PanSession = /** @class */ (function () {
         var initialInfo = transformPoint(info, this.transformPagePoint);
         var point = initialInfo.point;
         var timestamp = getFrameData().timestamp;
-        this.history = [__assign$7(__assign$7({}, point), { timestamp: timestamp })];
+        this.history = [__assign(__assign({}, point), { timestamp: timestamp })];
         var onSessionStart = handlers.onSessionStart;
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
@@ -10558,7 +10298,7 @@ var Gestures = {
         return gestureProps.some(function (key) { return props.hasOwnProperty(key); });
     },
     Component: makeRenderlessComponent(function (_a) {
-        var innerRef = _a.innerRef, props = __rest$5(_a, ["innerRef"]);
+        var innerRef = _a.innerRef, props = __rest(_a, ["innerRef"]);
         useGestures(props, innerRef);
     }),
 };
@@ -10798,8 +10538,8 @@ var ComponentDragControls = /** @class */ (function () {
     };
     ComponentDragControls.prototype.updateProps = function (_a) {
         var _this = this;
-        var _b = _a.drag, drag = _b === void 0 ? false : _b, _c = _a.dragDirectionLock, dragDirectionLock = _c === void 0 ? false : _c, _d = _a.dragPropagation, dragPropagation = _d === void 0 ? false : _d, _e = _a.dragConstraints, dragConstraints = _e === void 0 ? false : _e, _f = _a.dragElastic, dragElastic = _f === void 0 ? true : _f, _g = _a.dragMomentum, dragMomentum = _g === void 0 ? true : _g, remainingProps = __rest$5(_a, ["drag", "dragDirectionLock", "dragPropagation", "dragConstraints", "dragElastic", "dragMomentum"]);
-        this.props = __assign$7({ drag: drag,
+        var _b = _a.drag, drag = _b === void 0 ? false : _b, _c = _a.dragDirectionLock, dragDirectionLock = _c === void 0 ? false : _c, _d = _a.dragPropagation, dragPropagation = _d === void 0 ? false : _d, _e = _a.dragConstraints, dragConstraints = _e === void 0 ? false : _e, _f = _a.dragElastic, dragElastic = _f === void 0 ? true : _f, _g = _a.dragMomentum, dragMomentum = _g === void 0 ? true : _g, remainingProps = __rest(_a, ["drag", "dragDirectionLock", "dragPropagation", "dragConstraints", "dragElastic", "dragMomentum"]);
+        this.props = __assign({ drag: drag,
             dragDirectionLock: dragDirectionLock,
             dragPropagation: dragPropagation,
             dragConstraints: dragConstraints,
@@ -10855,7 +10595,7 @@ var ComponentDragControls = /** @class */ (function () {
             var bounceStiffness = dragElastic ? 200 : 1000000;
             var bounceDamping = dragElastic ? 40 : 10000000;
             var animationControls = _dragTransitionControls || _this.controls;
-            var inertia = __assign$7(__assign$7({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness: bounceStiffness,
+            var inertia = __assign(__assign({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness: bounceStiffness,
                 bounceDamping: bounceDamping, timeConstant: 750, restDelta: 1 }, dragTransition), transition);
             var externalAxisMotionValue = axis === "x" ? _dragValueX : _dragValueY;
             // If we're not animating on an externally-provided `MotionValue` we can use the
@@ -10936,7 +10676,7 @@ function bothAxis(handler) {
     return [handler("x"), handler("y")];
 }
 function convertPanToDrag(info, point) {
-    return __assign$7(__assign$7({}, info), { point: {
+    return __assign(__assign({}, info), { point: {
             x: point.x ? point.x.get() : 0,
             y: point.y ? point.y.get() : 0,
         } });
@@ -11047,7 +10787,7 @@ function useDrag(props, ref, values, controls) {
     var groupDragControls = props.dragControls;
     var transformPagePoint = useContext(MotionPluginContext).transformPagePoint;
     var dragControls = useConstant(function () { return new ComponentDragControls({ ref: ref, values: values, controls: controls }); });
-    dragControls.updateProps(__assign$7(__assign$7({}, props), { transformPagePoint: transformPagePoint }));
+    dragControls.updateProps(__assign(__assign({}, props), { transformPagePoint: transformPagePoint }));
     useEffect$1(function () { return groupDragControls && groupDragControls.subscribe(dragControls); }, [dragControls]);
     useEffect$1(function () { return dragControls.mount(ref.current); }, []);
 }
@@ -11056,7 +10796,7 @@ var Drag = {
     key: "drag",
     shouldRender: function (props) { return !!props.drag; },
     Component: makeRenderlessComponent(function (_a) {
-        var innerRef = _a.innerRef, values = _a.values, controls = _a.controls, props = __rest$5(_a, ["innerRef", "values", "controls"]);
+        var innerRef = _a.innerRef, values = _a.values, controls = _a.controls, props = __rest(_a, ["innerRef", "values", "controls"]);
         return useDrag(props, innerRef, values, controls);
     }),
 };
@@ -11108,14 +10848,14 @@ function getVariableValue(current, element, depth) {
  * @internal
  */
 function resolveCSSVariables(values, ref, _a, transitionEnd) {
-    var target = __rest$5(_a, []);
+    var target = __rest(_a, []);
     var element = ref.current;
     if (!(element instanceof HTMLElement))
         return { target: target, transitionEnd: 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$7({}, transitionEnd);
+        transitionEnd = __assign({}, transitionEnd);
     }
     // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
     values.forEach(function (value) {
@@ -11272,8 +11012,8 @@ var convertChangedValueTypes = function (target, values, element, elementStyler,
 };
 var checkAndConvertChangedValueTypes = function (values, ref, target, transitionEnd) {
     if (transitionEnd === void 0) { transitionEnd = {}; }
-    target = __assign$7({}, target);
-    transitionEnd = __assign$7({}, transitionEnd);
+    target = __assign({}, target);
+    transitionEnd = __assign({}, transitionEnd);
     var element = ref.current;
     var elementStyler = index(element);
     var targetPositionalKeys = Object.keys(target).filter(isPositionalKey$1);
@@ -11501,7 +11241,7 @@ function calcAxisDelta(prev, next, names) {
     return delta;
 }
 function calcDelta(prev, next) {
-    var delta = __assign$7(__assign$7({}, calcAxisDelta(prev, next, axisLabels.x)), calcAxisDelta(prev, next, axisLabels.y));
+    var delta = __assign(__assign({}, calcAxisDelta(prev, next, axisLabels.x)), calcAxisDelta(prev, next, axisLabels.y));
     return delta;
 }
 var offset = {
@@ -11545,7 +11285,7 @@ function getTransition(_a) {
     return layoutTransition || positionTransition;
 }
 var LayoutAnimation = /** @class */ (function (_super) {
-    __extends$2(LayoutAnimation, _super);
+    __extends(LayoutAnimation, _super);
     function LayoutAnimation() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -11612,11 +11352,11 @@ var LayoutAnimation = /** @class */ (function (_super) {
                 if (!delta[deltaKey])
                     return;
                 var baseTransition = typeof transitionDefinition === "boolean"
-                    ? __assign$7({}, getDefaultLayoutTransition(isPositionOnly)) : transitionDefinition;
+                    ? __assign({}, getDefaultLayoutTransition(isPositionOnly)) : transitionDefinition;
                 var value = values.get(transformKey, targetValue);
                 var velocity = value.getVelocity();
                 transition[transformKey] = baseTransition[transformKey]
-                    ? __assign$7({}, baseTransition[transformKey]) : __assign$7({}, baseTransition);
+                    ? __assign({}, baseTransition[transformKey]) : __assign({}, baseTransition);
                 if (transition[transformKey].velocity === undefined) {
                     transition[transformKey].velocity = velocity || 0;
                 }
@@ -11757,9 +11497,9 @@ var hasUpdated = function (prev, next) {
 };
 function targetWithoutTransition(_a, mergeTransitionEnd) {
     if (mergeTransitionEnd === void 0) { mergeTransitionEnd = false; }
-    var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest$5(_a, ["transition", "transitionEnd"]);
+    var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
     return mergeTransitionEnd
-        ? __assign$7(__assign$7({}, target), transitionEnd)
+        ? __assign(__assign({}, target), transitionEnd)
         : target;
 }
 /**
@@ -11811,9 +11551,9 @@ function useAnimateProp(targetAndTransition, controls, values, defaultTransition
             }
         }
         isInitialRender.current = false;
-        prevValues.current = __assign$7(__assign$7({}, prevValues.current), finalTarget);
+        prevValues.current = __assign(__assign({}, prevValues.current), finalTarget);
         if (Object.keys(targetToAnimate).length) {
-            controls.start(__assign$7(__assign$7({}, targetToAnimate), { transition: targetAndTransition.transition || defaultTransition, transitionEnd: targetAndTransition.transitionEnd }));
+            controls.start(__assign(__assign({}, targetToAnimate), { transition: targetAndTransition.transition || defaultTransition, transitionEnd: targetAndTransition.transitionEnd }));
         }
     }, [targetAndTransition]);
 }
@@ -11987,7 +11727,7 @@ var Exit = {
         useEffect$1(function () {
             if (!isPresent) {
                 if (!isPlayingExitAnimation.current && exit) {
-                    controls.setProps(__assign$7(__assign$7({}, props), { custom: custom }));
+                    controls.setProps(__assign(__assign({}, props), { custom: custom }));
                     controls.start(exit).then(onExitComplete);
                 }
                 isPlayingExitAnimation.current = true;
@@ -12058,7 +11798,7 @@ var buildHTMLProps = function (values, style, isStatic, isDrag) {
 var buildSVGProps = function (values, style) {
     var motionValueStyles = resolveCurrent(values);
     var props = buildSVGAttrs(motionValueStyles, undefined, undefined, undefined, undefined, false);
-    props.style = __assign$7(__assign$7({}, style), props.style);
+    props.style = __assign(__assign({}, style), props.style);
     return props;
 };
 var functionalityComponents = [Layout, Drag, Gestures, Exit];
@@ -12077,7 +11817,7 @@ function createDomMotionConfig(Component) {
             var staticVisualStyles = isSVG
                 ? buildSVGProps(values, style)
                 : buildHTMLProps(values, style, isStatic, !!props.drag);
-            return createElement(Component, __assign$7(__assign$7(__assign$7({}, forwardedProps), { ref: ref }), staticVisualStyles));
+            return createElement(Component, __assign(__assign(__assign({}, forwardedProps), { ref: ref }), staticVisualStyles));
         },
         /**
          * loadFunctionalityComponents gets used by the `motion` component
@@ -12108,7 +11848,7 @@ function createDomMotionConfig(Component) {
             for (var i = 0; i < numFunctionalityComponents; i++) {
                 var _a = functionalityComponents[i], shouldRender = _a.shouldRender, key = _a.key, Component_1 = _a.Component;
                 if (shouldRender(props, context)) {
-                    activeComponents.push(createElement(Component_1, __assign$7({ key: key }, props, { parentContext: context, values: values, controls: controls, innerRef: ref })));
+                    activeComponents.push(createElement(Component_1, __assign({ key: key }, props, { parentContext: context, values: values, controls: controls, innerRef: ref })));
                 }
             }
             return activeComponents;
@@ -12160,7 +11900,7 @@ var svgMotionComponents = svgElements.reduce(function (acc, Component) {
  *
  * @public
  */
-var motion = __assign$7(__assign$7({ 
+var motion = __assign(__assign({ 
     /**
      * Convert a custom React component into a `motion` component.
      *
@@ -12212,7 +11952,7 @@ var PresenceChild = function (_a) {
             return function () { return numPresenceChildren.current--; };
         };
     }, [isPresent]);
-    return (createElement(PresenceContext.Provider, { value: __assign$7(__assign$7({}, context), { register: register }) }, children));
+    return (createElement(PresenceContext.Provider, { value: __assign(__assign({}, context), { register: register }) }, children));
 };
 
 function getChildKey(child) {
@@ -12328,7 +12068,7 @@ var AnimatePresence = function (_a) {
         return (createElement(Fragment$1, null, filteredChildren.map(function (child) { return (createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false }, child)); })));
     }
     // If this is a subsequent render, deal with entering and exiting children
-    var childrenToRender = __spreadArrays$2(filteredChildren);
+    var childrenToRender = __spreadArrays(filteredChildren);
     // Diff the keys of the currently-present and target children to update our
     // exiting list.
     var presentKeys = presentChildren.current.map(getChildKey);
@@ -21335,6 +21075,7 @@ function _wrapNativeSuper(Class) {
 }
 
 // based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
+
 /**
  * Parse errors.md and turn it into a simple hash of code: message
  * @private
@@ -21419,71 +21160,84 @@ var ERRORS = {
   "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
   "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
 };
-
 /**
  * super basic version of sprintf
  * @private
  */
+
 function format() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
+
   var a = args[0];
   var b = [];
   var c;
+
   for (c = 1; c < args.length; c += 1) {
     b.push(args[c]);
   }
+
   b.forEach(function (d) {
     a = a.replace(/%[a-z]/, d);
   });
   return a;
 }
-
 /**
  * Create an error file out of errors.md for development and a simple web link to the full errors
  * in production mode.
  * @private
  */
+
+
 var PolishedError = /*#__PURE__*/function (_Error) {
   _inheritsLoose(PolishedError, _Error);
+
   function PolishedError(code) {
     var _this;
+
     if (process.env.NODE_ENV === 'production') {
       _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
     } else {
       for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
         args[_key2 - 1] = arguments[_key2];
       }
+
       _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
     }
+
     return _assertThisInitialized(_this);
   }
+
   return PolishedError;
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
 function colorToInt(color) {
   return Math.round(color * 255);
 }
+
 function convertToInt(red, green, blue) {
   return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
 }
+
 function hslToRgb(hue, saturation, lightness, convert) {
   if (convert === void 0) {
     convert = convertToInt;
   }
+
   if (saturation === 0) {
     // achromatic
     return convert(lightness, lightness, lightness);
-  }
+  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
+
 
-  // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
   var huePrime = (hue % 360 + 360) % 360 / 60;
   var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
   var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
   var red = 0;
   var green = 0;
   var blue = 0;
+
   if (huePrime >= 0 && huePrime < 1) {
     red = chroma;
     green = secondComponent;
@@ -21503,6 +21257,7 @@ function hslToRgb(hue, saturation, lightness, convert) {
     red = chroma;
     blue = secondComponent;
   }
+
   var lightnessModification = lightness - chroma / 2;
   var finalRed = red + lightnessModification;
   var finalGreen = green + lightnessModification;
@@ -21660,11 +21415,11 @@ var namedColorMap = {
   yellow: 'ff0',
   yellowgreen: '9acd32'
 };
-
 /**
  * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
  * @private
  */
+
 function nameToHex(color) {
   if (typeof color !== 'string') return color;
   var normalizedColorName = color.toLowerCase();
@@ -21679,7 +21434,6 @@ var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\
 var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
 var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
 var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
-
 /**
  * Returns an RgbColor or RgbaColor object. This utility function is only useful
  * if want to extract a color component. With the color util `toColorString` you
@@ -21691,11 +21445,14 @@ var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[
  * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
  * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
  */
+
 function parseToRgb(color) {
   if (typeof color !== 'string') {
     throw new PolishedError(3);
   }
+
   var normalizedColor = nameToHex(color);
+
   if (normalizedColor.match(hexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
@@ -21703,6 +21460,7 @@ function parseToRgb(color) {
       blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
     };
   }
+
   if (normalizedColor.match(hexRgbaRegex)) {
     var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
     return {
@@ -21712,6 +21470,7 @@ function parseToRgb(color) {
       alpha: alpha
     };
   }
+
   if (normalizedColor.match(reducedHexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -21719,8 +21478,10 @@ function parseToRgb(color) {
       blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
     };
   }
+
   if (normalizedColor.match(reducedRgbaHexRegex)) {
     var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
       green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
@@ -21728,7 +21489,9 @@ function parseToRgb(color) {
       alpha: _alpha
     };
   }
+
   var rgbMatched = rgbRegex.exec(normalizedColor);
+
   if (rgbMatched) {
     return {
       red: parseInt("" + rgbMatched[1], 10),
@@ -21736,7 +21499,9 @@ function parseToRgb(color) {
       blue: parseInt("" + rgbMatched[3], 10)
     };
   }
+
   var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
+
   if (rgbaMatched) {
     return {
       red: parseInt("" + rgbaMatched[1], 10),
@@ -21745,32 +21510,44 @@ function parseToRgb(color) {
       alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
     };
   }
+
   var hslMatched = hslRegex.exec(normalizedColor);
+
   if (hslMatched) {
     var hue = parseInt("" + hslMatched[1], 10);
     var saturation = parseInt("" + hslMatched[2], 10) / 100;
     var lightness = parseInt("" + hslMatched[3], 10) / 100;
     var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
     var hslRgbMatched = rgbRegex.exec(rgbColorString);
+
     if (!hslRgbMatched) {
       throw new PolishedError(4, normalizedColor, rgbColorString);
     }
+
     return {
       red: parseInt("" + hslRgbMatched[1], 10),
       green: parseInt("" + hslRgbMatched[2], 10),
       blue: parseInt("" + hslRgbMatched[3], 10)
     };
   }
+
   var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
+
   if (hslaMatched) {
     var _hue = parseInt("" + hslaMatched[1], 10);
+
     var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+
     var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+
     var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+
     var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+
     if (!_hslRgbMatched) {
       throw new PolishedError(4, normalizedColor, _rgbColorString);
     }
+
     return {
       red: parseInt("" + _hslRgbMatched[1], 10),
       green: parseInt("" + _hslRgbMatched[2], 10),
@@ -21778,80 +21555,8 @@ function parseToRgb(color) {
       alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
     };
   }
-  throw new PolishedError(5);
-}
-
-function rgbToHsl(color) {
-  // make sure rgb are contained in a set of [0, 255]
-  var red = color.red / 255;
-  var green = color.green / 255;
-  var blue = color.blue / 255;
-  var max = Math.max(red, green, blue);
-  var min = Math.min(red, green, blue);
-  var lightness = (max + min) / 2;
-  if (max === min) {
-    // achromatic
-    if (color.alpha !== undefined) {
-      return {
-        hue: 0,
-        saturation: 0,
-        lightness: lightness,
-        alpha: color.alpha
-      };
-    } else {
-      return {
-        hue: 0,
-        saturation: 0,
-        lightness: lightness
-      };
-    }
-  }
-  var hue;
-  var delta = max - min;
-  var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
-  switch (max) {
-    case red:
-      hue = (green - blue) / delta + (green < blue ? 6 : 0);
-      break;
-    case green:
-      hue = (blue - red) / delta + 2;
-      break;
-    default:
-      // blue case
-      hue = (red - green) / delta + 4;
-      break;
-  }
-  hue *= 60;
-  if (color.alpha !== undefined) {
-    return {
-      hue: hue,
-      saturation: saturation,
-      lightness: lightness,
-      alpha: color.alpha
-    };
-  }
-  return {
-    hue: hue,
-    saturation: saturation,
-    lightness: lightness
-  };
-}
 
-/**
- * Returns an HslColor or HslaColor object. This utility function is only useful
- * if want to extract a color component. With the color util `toColorString` you
- * can convert a HslColor or HslaColor object back to a string.
- *
- * @example
- * // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1
- * const color1 = parseToHsl('rgb(255, 0, 0)');
- * // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2
- * const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)');
- */
-function parseToHsl(color) {
-  // Note: At a later stage we can optimize this function as right now a hsl
-  // color would be parsed converted to rgb values and converted back to hsl.
-  return rgbToHsl(parseToRgb(color));
+  throw new PolishedError(5);
 }
 
 /**
@@ -21862,8 +21567,10 @@ var reduceHexValue = function reduceHexValue(value) {
   if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
     return "#" + value[1] + value[3] + value[5];
   }
+
   return value;
 };
+
 var reduceHexValue$1 = reduceHexValue;
 
 function numberToHex(value) {
@@ -21871,83 +21578,6 @@ function numberToHex(value) {
   return hex.length === 1 ? "0" + hex : hex;
 }
 
-function colorToHex(color) {
-  return numberToHex(Math.round(color * 255));
-}
-function convertToHex(red, green, blue) {
-  return reduceHexValue$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
-}
-function hslToHex(hue, saturation, lightness) {
-  return hslToRgb(hue, saturation, lightness, convertToHex);
-}
-
-/**
- * Returns a string value for the color. The returned result is the smallest possible hex notation.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: hsl(359, 0.75, 0.4),
- *   background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${hsl(359, 0.75, 0.4)};
- *   background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#b3191c";
- *   background: "#b3191c";
- * }
- */
-function hsl(value, saturation, lightness) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {
-    return hslToHex(value, saturation, lightness);
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
-    return hslToHex(value.hue, value.saturation, value.lightness);
-  }
-  throw new PolishedError(1);
-}
-
-/**
- * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: hsla(359, 0.75, 0.4, 0.7),
- *   background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }),
- *   background: hsla(359, 0.75, 0.4, 1),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${hsla(359, 0.75, 0.4, 0.7)};
- *   background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })};
- *   background: ${hsla(359, 0.75, 0.4, 1)};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "rgba(179,25,28,0.7)";
- *   background: "rgba(179,25,28,0.7)";
- *   background: "#b3191c";
- * }
- */
-function hsla$1(value, saturation, lightness, alpha) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {
-    return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
-    return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
-  }
-  throw new PolishedError(2);
-}
-
 /**
  * Returns a string value for the color. The returned result is the smallest possible hex notation.
  *
@@ -21977,6 +21607,7 @@ function rgb(value, green, blue) {
   } else if (typeof value === 'object' && green === undefined && blue === undefined) {
     return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
   }
+
   throw new PolishedError(6);
 }
 
@@ -22023,60 +21654,8 @@ function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
   } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
     return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
   }
-  throw new PolishedError(7);
-}
-
-var isRgb = function isRgb(color) {
-  return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
-};
-var isRgba$1 = function isRgba(color) {
-  return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number';
-};
-var isHsl = function isHsl(color) {
-  return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
-};
-var isHsla$1 = function isHsla(color) {
-  return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number';
-};
 
-/**
- * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
- * This util is useful in case you only know on runtime which color object is
- * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: toColorString({ red: 255, green: 205, blue: 100 }),
- *   background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
- *   background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
- *   background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${toColorString({ red: 255, green: 205, blue: 100 })};
- *   background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
- *   background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
- *   background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#ffcd64";
- *   background: "rgba(255,205,100,0.72)";
- *   background: "#00f";
- *   background: "rgba(179,25,25,0.72)";
- * }
- */
-
-function toColorString(color) {
-  if (typeof color !== 'object') throw new PolishedError(8);
-  if (isRgba$1(color)) return rgba$1(color);
-  if (isRgb(color)) return rgb(color);
-  if (isHsla$1(color)) return hsla$1(color);
-  if (isHsl(color)) return hsl(color);
-  throw new PolishedError(8);
+  throw new PolishedError(7);
 }
 
 // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
@@ -22089,156 +21668,14 @@ function curried(f, length, acc) {
     var combined = acc.concat(Array.prototype.slice.call(arguments));
     return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
   };
-}
+} // eslint-disable-next-line no-redeclare
+
 
-// eslint-disable-next-line no-redeclare
 function curry(f) {
   // eslint-disable-line no-redeclare
   return curried(f, f.length, []);
 }
 
-/**
- * Changes the hue of the color. Hue is a number between 0 to 360. The first
- * argument for adjustHue is the amount of degrees the color is rotated around
- * the color wheel, always producing a positive hue value.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: adjustHue(180, '#448'),
- *   background: adjustHue('180', 'rgba(101,100,205,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${adjustHue(180, '#448')};
- *   background: ${adjustHue('180', 'rgba(101,100,205,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#888844";
- *   background: "rgba(136,136,68,0.7)";
- * }
- */
-function adjustHue(degree, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    hue: hslColor.hue + parseFloat(degree)
-  }));
-}
-
-// prettier-ignore
-var curriedAdjustHue = curry /* ::<number | string, string, string> */(adjustHue);
-
-function guard(lowerBoundary, upperBoundary, value) {
-  return Math.max(lowerBoundary, Math.min(upperBoundary, value));
-}
-
-/**
- * Returns a string value for the darkened color.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: darken(0.2, '#FFCD64'),
- *   background: darken('0.2', 'rgba(255,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${darken(0.2, '#FFCD64')};
- *   background: ${darken('0.2', 'rgba(255,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#ffbd31";
- *   background: "rgba(255,189,49,0.7)";
- * }
- */
-function darken(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedDarken = curry /* ::<number | string, string, string> */(darken);
-
-/**
- * Decreases the intensity of a color. Its range is between 0 to 1. The first
- * argument of the desaturate function is the amount by how much the color
- * intensity should be decreased.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: desaturate(0.2, '#CCCD64'),
- *   background: desaturate('0.2', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${desaturate(0.2, '#CCCD64')};
- *   background: ${desaturate('0.2', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#b8b979";
- *   background: "rgba(184,185,121,0.7)";
- * }
- */
-function desaturate(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    saturation: guard(0, 1, hslColor.saturation - parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedDesaturate = curry /* ::<number | string, string, string> */(desaturate);
-
-/**
- * Returns a string value for the lightened color.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: lighten(0.2, '#CCCD64'),
- *   background: lighten('0.2', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${lighten(0.2, '#FFCD64')};
- *   background: ${lighten('0.2', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#e5e6b1";
- *   background: "rgba(229,230,177,0.7)";
- * }
- */
-function lighten(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    lightness: guard(0, 1, hslColor.lightness + parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedLighten = curry /* ::<number | string, string, string> */(lighten);
-
 /**
  * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
  *
@@ -22265,21 +21702,25 @@ var curriedLighten = curry /* ::<number | string, string, string> */(lighten);
  *   background: "rgba(63, 0, 191, 0.75)";
  * }
  */
+
 function mix$1(weight, color, otherColor) {
   if (color === 'transparent') return otherColor;
   if (otherColor === 'transparent') return color;
   if (weight === 0) return otherColor;
   var parsedColor1 = parseToRgb(color);
+
   var color1 = _extends$1({}, parsedColor1, {
     alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
   });
+
   var parsedColor2 = parseToRgb(otherColor);
+
   var color2 = _extends$1({}, parsedColor2, {
     alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
-  });
-
-  // The formula is copied from the original Sass implementation:
+  }); // The formula is copied from the original Sass implementation:
   // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
+
+
   var alphaDelta = color1.alpha - color2.alpha;
   var x = parseFloat(weight) * 2 - 1;
   var y = x * alphaDelta === -1 ? x : x + alphaDelta;
@@ -22293,217 +21734,13 @@ function mix$1(weight, color, otherColor) {
     alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
   };
   return rgba$1(mixedColor);
-}
-
-// prettier-ignore
-var curriedMix = curry /* ::<number | string, string, string, string> */(mix$1);
-var mix$1$1 = curriedMix;
-
-/**
- * Increases the opacity of a color. Its range for the amount is between 0 to 1.
- *
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
- *   background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
- *   background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
- *   background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
- *   background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#fff";
- *   background: "rgba(255,255,255,0.7)";
- *   background: "rgba(255,0,0,0.7)";
- * }
- */
-function opacify(amount, color) {
-  if (color === 'transparent') return color;
-  var parsedColor = parseToRgb(color);
-  var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
-  var colorWithAlpha = _extends$1({}, parsedColor, {
-    alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)
-  });
-  return rgba$1(colorWithAlpha);
-}
-
-// prettier-ignore
-var curriedOpacify = curry /* ::<number | string, string, string> */(opacify);
-
-/**
- * Increases the intensity of a color. Its range is between 0 to 1. The first
- * argument of the saturate function is the amount by how much the color
- * intensity should be increased.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: saturate(0.2, '#CCCD64'),
- *   background: saturate('0.2', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${saturate(0.2, '#FFCD64')};
- *   background: ${saturate('0.2', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#e0e250";
- *   background: "rgba(224,226,80,0.7)";
- * }
- */
-function saturate(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    saturation: guard(0, 1, hslColor.saturation + parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedSaturate = curry /* ::<number | string, string, string> */(saturate);
-
-/**
- * Sets the hue of a color to the provided value. The hue range can be
- * from 0 and 359.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: setHue(42, '#CCCD64'),
- *   background: setHue('244', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${setHue(42, '#CCCD64')};
- *   background: ${setHue('244', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#cdae64";
- *   background: "rgba(107,100,205,0.7)";
- * }
- */
-function setHue(hue, color) {
-  if (color === 'transparent') return color;
-  return toColorString(_extends$1({}, parseToHsl(color), {
-    hue: parseFloat(hue)
-  }));
-}
-
-// prettier-ignore
-var curriedSetHue = curry /* ::<number | string, string, string> */(setHue);
-
-/**
- * Sets the lightness of a color to the provided value. The lightness range can be
- * from 0 and 1.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: setLightness(0.2, '#CCCD64'),
- *   background: setLightness('0.75', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${setLightness(0.2, '#CCCD64')};
- *   background: ${setLightness('0.75', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#4d4d19";
- *   background: "rgba(223,224,159,0.7)";
- * }
- */
-function setLightness(lightness, color) {
-  if (color === 'transparent') return color;
-  return toColorString(_extends$1({}, parseToHsl(color), {
-    lightness: parseFloat(lightness)
-  }));
-}
-
-// prettier-ignore
-var curriedSetLightness = curry /* ::<number | string, string, string> */(setLightness);
-
-/**
- * Sets the saturation of a color to the provided value. The saturation range can be
- * from 0 and 1.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: setSaturation(0.2, '#CCCD64'),
- *   background: setSaturation('0.75', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${setSaturation(0.2, '#CCCD64')};
- *   background: ${setSaturation('0.75', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#adad84";
- *   background: "rgba(228,229,76,0.7)";
- * }
- */
-function setSaturation(saturation, color) {
-  if (color === 'transparent') return color;
-  return toColorString(_extends$1({}, parseToHsl(color), {
-    saturation: parseFloat(saturation)
-  }));
-}
+} // prettier-ignore
 
-// prettier-ignore
-var curriedSetSaturation = curry /* ::<number | string, string, string> */(setSaturation);
 
-/**
- * Shades a color by mixing it with black. `shade` can produce
- * hue shifts, where as `darken` manipulates the luminance channel and therefore
- * doesn't produce hue shifts.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: shade(0.25, '#00f')
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${shade(0.25, '#00f')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#00003f";
- * }
- */
-
-function shade(percentage, color) {
-  if (color === 'transparent') return color;
-  return mix$1$1(parseFloat(percentage), 'rgb(0, 0, 0)', color);
-}
-
-// prettier-ignore
-var curriedShade = curry /* ::<number | string, string, string> */(shade);
+var curriedMix = /*#__PURE__*/curry
+/* ::<number | string, string, string, string> */
+(mix$1);
+var mix$1$1 = curriedMix;
 
 /**
  * Tints a color by mixing it with white. `tint` can produce
@@ -22531,51 +21768,13 @@ var curriedShade = curry /* ::<number | string, string, string> */(shade);
 function tint(percentage, color) {
   if (color === 'transparent') return color;
   return mix$1$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);
-}
+} // prettier-ignore
 
-// prettier-ignore
-var curriedTint = curry /* ::<number | string, string, string> */(tint);
-var curriedTint$1 = curriedTint;
 
-/**
- * Decreases the opacity of a color. Its range for the amount is between 0 to 1.
- *
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: transparentize(0.1, '#fff'),
- *   background: transparentize(0.2, 'hsl(0, 0%, 100%)'),
- *   background: transparentize('0.5', 'rgba(255, 0, 0, 0.8)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${transparentize(0.1, '#fff')};
- *   background: ${transparentize(0.2, 'hsl(0, 0%, 100%)')};
- *   background: ${transparentize('0.5', 'rgba(255, 0, 0, 0.8)')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "rgba(255,255,255,0.9)";
- *   background: "rgba(255,255,255,0.8)";
- *   background: "rgba(255,0,0,0.3)";
- * }
- */
-function transparentize(amount, color) {
-  if (color === 'transparent') return color;
-  var parsedColor = parseToRgb(color);
-  var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
-  var colorWithAlpha = _extends$1({}, parsedColor, {
-    alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
-  });
-  return rgba$1(colorWithAlpha);
-}
-
-// prettier-ignore
-var curriedTransparentize = curry /* ::<number | string, string, string> */(transparentize);
+var curriedTint = /*#__PURE__*/curry
+/* ::<number | string, string, string> */
+(tint);
+var curriedTint$1 = curriedTint;
 
 var linkColor = MATISSE_BLUE;
 var fallbackValues$8 = {
@@ -22710,6 +21909,8 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "primary" : _ref$variant,
+    _ref$containerTabInde = _ref.containerTabIndex,
+    containerTabIndex = _ref$containerTabInde === void 0 ? "-1" : _ref$containerTabInde,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? "0" : _ref$tabIndex,
     dataQa = _ref.dataQa,
@@ -22717,7 +21918,21 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children = _ref.children;
   var themeContext = useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
-  return /*#__PURE__*/React.createElement(StyledExternalLink, {
+  var handleKeyDown = function handleKeyDown(event) {
+    // This is to address an issue on Safari where the link's tab order and Enter key were not being recognized
+    if (event.key === "Enter" || event.keyCode === 13) {
+      if (newTab) {
+        window.open(href, "_blank");
+      } else {
+        window.location.href = href;
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    tabIndex: containerTabIndex,
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement(StyledExternalLink, {
     href: href,
     target: newTab ? "_blank" : "",
     color: themeValues.externalLinkColor,
@@ -22733,7 +21948,7 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-qa": dataQa,
     "aria-label": ariaLabel,
     ref: ref
-  }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
+  }, safeChildren(children, /*#__PURE__*/React.createElement("span", null))));
 });
 
 var _excluded$s = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
@@ -23879,19 +23094,32 @@ var toIndexedObject = function (it) {
   return indexedObject(requireObjectCoercible(it));
 };
 
-// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
 var documentAll = typeof document == 'object' && document.all;
 
+// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
+// eslint-disable-next-line unicorn/no-typeof-undefined -- required for testing
+var IS_HTMLDDA = typeof documentAll == 'undefined' && documentAll !== undefined;
+
+var documentAll_1 = {
+  all: documentAll,
+  IS_HTMLDDA: IS_HTMLDDA
+};
+
+var documentAll$1 = documentAll_1.all;
+
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-// eslint-disable-next-line unicorn/no-typeof-undefined -- required for testing
-var isCallable = typeof documentAll == 'undefined' && documentAll !== undefined ? function (argument) {
-  return typeof argument == 'function' || argument === documentAll;
+var isCallable = documentAll_1.IS_HTMLDDA ? function (argument) {
+  return typeof argument == 'function' || argument === documentAll$1;
 } : function (argument) {
   return typeof argument == 'function';
 };
 
-var isObject = function (it) {
+var documentAll$2 = documentAll_1.all;
+
+var isObject = documentAll_1.IS_HTMLDDA ? function (it) {
+  return typeof it == 'object' ? it !== null : isCallable(it) || it === documentAll$2;
+} : function (it) {
   return typeof it == 'object' ? it !== null : isCallable(it);
 };
 
@@ -24027,10 +23255,10 @@ var shared = createCommonjsModule(function (module) {
 (module.exports = function (key, value) {
   return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.35.1',
+  version: '3.33.3',
   mode:  'global',
-  copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.35.1/LICENSE',
+  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 });
@@ -24327,7 +23555,7 @@ var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn = module.exports = function (value, name, options) {
   if (stringSlice($String(name), 0, 7) === 'Symbol(') {
-    name = '[' + replace($String(name), /^Symbol\(([^)]*)\).*$/, '$1') + ']';
+    name = '[' + replace($String(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -24415,8 +23643,7 @@ var min$1 = Math.min;
 // `ToLength` abstract operation
 // https://tc39.es/ecma262/#sec-tolength
 var toLength = function (argument) {
-  var len = toIntegerOrInfinity(argument);
-  return len > 0 ? min$1(len, 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
+  return argument > 0 ? min$1(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
 };
 
 // `LengthOfArrayLike` abstract operation
@@ -24576,7 +23803,7 @@ var _export = function (options, source) {
   } else if (STATIC) {
     target = global_1[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = global_1[TARGET] && global_1[TARGET].prototype;
+    target = (global_1[TARGET] || {}).prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -24839,15 +24066,11 @@ var functionUncurryThisAccessor = function (object, key, method) {
   } catch (error) { /* empty */ }
 };
 
-var isPossiblePrototype = function (argument) {
-  return isObject(argument) || argument === null;
-};
-
 var $String$4 = String;
 var $TypeError$6 = TypeError;
 
 var aPossiblePrototype = function (argument) {
-  if (isPossiblePrototype(argument)) return argument;
+  if (typeof argument == 'object' || isCallable(argument)) return argument;
   throw new $TypeError$6("Can't set " + $String$4(argument) + ' as a prototype');
 };
 
@@ -45739,6 +44962,7 @@ var Modal$1 = function Modal(_ref) {
   }))) : /*#__PURE__*/React.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
+    tabIndex: "0",
     action: hideModal,
     variant: "primary",
     text: closeButtonText,