@thecb/components 10.6.10-beta.1 → 10.7.0-beta.0

package/dist/index.cjs.js

@@ -236,58 +236,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() {
@@ -298,32 +246,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);
 }; };
@@ -337,8 +259,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) {
@@ -352,7 +274,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(')'));
@@ -386,7 +308,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);
 }
@@ -416,7 +338,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 = '';
@@ -952,15 +874,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) {
@@ -983,7 +905,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) {
@@ -1028,7 +950,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) {
@@ -1240,44 +1162,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,
@@ -1289,7 +1173,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;
@@ -1409,7 +1293,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,
@@ -1641,8 +1525,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));
@@ -1692,7 +1576,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') {
@@ -1821,7 +1705,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 = [];
@@ -1893,7 +1777,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;
     }
@@ -1912,13 +1796,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);
         }
@@ -1932,7 +1816,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 = [];
@@ -1992,7 +1876,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 () {
@@ -2242,7 +2126,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);
@@ -2256,7 +2140,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;
     }, {});
@@ -2265,18 +2149,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);
@@ -2622,7 +2506,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) {
@@ -2632,7 +2516,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);
     });
 };
@@ -2876,7 +2760,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);
@@ -2950,7 +2834,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];
@@ -2981,52 +2865,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,
@@ -3039,7 +2877,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) {
@@ -3051,7 +2889,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) {
@@ -3151,7 +2989,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) : [];
@@ -3177,11 +3015,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) {
@@ -3205,7 +3043,7 @@ var createPoseSetter = function (setterProps) {
                 });
             }
         }
-        return Promise.all(__spreadArrays$1(getParentAnimations(), getChildAnimations()));
+        return Promise.all(__spreadArrays(getParentAnimations(), getChildAnimations()));
     };
 };
 
@@ -3331,7 +3169,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) {
@@ -3385,7 +3223,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,
@@ -3460,10 +3298,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;
             },
@@ -3502,18 +3340,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++) {
@@ -3630,12 +3468,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 = {
@@ -3705,7 +3543,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') {
@@ -3730,7 +3568,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';
@@ -3815,7 +3653,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);
@@ -3997,7 +3835,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);
@@ -4109,7 +3947,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);
@@ -4165,8 +4003,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,
@@ -4180,8 +4018,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;
 };
@@ -4189,7 +4027,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)) {
@@ -4227,7 +4065,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) {
@@ -7240,104 +7078,6 @@ var Imposter = function Imposter(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, 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;
@@ -7400,18 +7140,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 = [];
@@ -7464,18 +7204,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);
@@ -7688,7 +7428,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 });
@@ -7920,7 +7660,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) {
@@ -7930,7 +7670,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);
     });
 };
@@ -8132,7 +7872,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);
@@ -8574,7 +8314,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 = {}; }
@@ -8628,7 +8368,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));
@@ -8681,7 +8421,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));
 };
 
 /**
@@ -8777,9 +8517,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;
         }
@@ -8793,7 +8533,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) {
@@ -8803,7 +8543,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 ||
@@ -8820,12 +8560,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);
     }
 };
@@ -8842,12 +8582,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) {
@@ -8865,10 +8605,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;
         }
@@ -9014,7 +8754,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;
@@ -9104,7 +8844,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 };
     };
     /**
@@ -9195,7 +8935,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) {
@@ -9266,7 +9006,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
@@ -9277,7 +9017,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);
     };
@@ -9721,7 +9461,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);
         };
@@ -10206,7 +9946,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);
@@ -10223,7 +9963,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));
@@ -10551,7 +10291,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);
     }),
 };
@@ -10791,8 +10531,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,
@@ -10848,7 +10588,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
@@ -10929,7 +10669,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,
         } });
@@ -11040,7 +10780,7 @@ function useDrag(props, ref, values, controls) {
     var groupDragControls = props.dragControls;
     var transformPagePoint = React.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 }));
     React.useEffect(function () { return groupDragControls && groupDragControls.subscribe(dragControls); }, [dragControls]);
     React.useEffect(function () { return dragControls.mount(ref.current); }, []);
 }
@@ -11049,7 +10789,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);
     }),
 };
@@ -11101,14 +10841,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) {
@@ -11265,8 +11005,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);
@@ -11494,7 +11234,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 = {
@@ -11538,7 +11278,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;
     }
@@ -11605,11 +11345,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;
                 }
@@ -11750,9 +11490,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;
 }
 /**
@@ -11804,9 +11544,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]);
 }
@@ -11980,7 +11720,7 @@ var Exit = {
         React.useEffect(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;
@@ -12051,7 +11791,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];
@@ -12070,7 +11810,7 @@ function createDomMotionConfig(Component) {
             var staticVisualStyles = isSVG
                 ? buildSVGProps(values, style)
                 : buildHTMLProps(values, style, isStatic, !!props.drag);
-            return React.createElement(Component, __assign$7(__assign$7(__assign$7({}, forwardedProps), { ref: ref }), staticVisualStyles));
+            return React.createElement(Component, __assign(__assign(__assign({}, forwardedProps), { ref: ref }), staticVisualStyles));
         },
         /**
          * loadFunctionalityComponents gets used by the `motion` component
@@ -12101,7 +11841,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(React.createElement(Component_1, __assign$7({ key: key }, props, { parentContext: context, values: values, controls: controls, innerRef: ref })));
+                    activeComponents.push(React.createElement(Component_1, __assign({ key: key }, props, { parentContext: context, values: values, controls: controls, innerRef: ref })));
                 }
             }
             return activeComponents;
@@ -12153,7 +11893,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.
      *
@@ -12205,7 +11945,7 @@ var PresenceChild = function (_a) {
             return function () { return numPresenceChildren.current--; };
         };
     }, [isPresent]);
-    return (React.createElement(PresenceContext.Provider, { value: __assign$7(__assign$7({}, context), { register: register }) }, children));
+    return (React.createElement(PresenceContext.Provider, { value: __assign(__assign({}, context), { register: register }) }, children));
 };
 
 function getChildKey(child) {
@@ -12321,7 +12061,7 @@ var AnimatePresence = function (_a) {
         return (React.createElement(React.Fragment, null, filteredChildren.map(function (child) { return (React.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);
@@ -19629,7 +19369,6 @@ 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
@@ -19714,84 +19453,71 @@ 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;
@@ -19811,7 +19537,6 @@ function hslToRgb(hue, saturation, lightness, convert) {
     red = chroma;
     blue = secondComponent;
   }
-
   var lightnessModification = lightness - chroma / 2;
   var finalRed = red + lightnessModification;
   var finalGreen = green + lightnessModification;
@@ -19969,11 +19694,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();
@@ -19988,6 +19713,7 @@ 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
@@ -19999,14 +19725,11 @@ 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),
@@ -20014,7 +19737,6 @@ 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 {
@@ -20024,7 +19746,6 @@ function parseToRgb(color) {
       alpha: alpha
     };
   }
-
   if (normalizedColor.match(reducedHexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -20032,10 +19753,8 @@ 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),
@@ -20043,9 +19762,7 @@ function parseToRgb(color) {
       alpha: _alpha
     };
   }
-
   var rgbMatched = rgbRegex.exec(normalizedColor);
-
   if (rgbMatched) {
     return {
       red: parseInt("" + rgbMatched[1], 10),
@@ -20053,9 +19770,7 @@ function parseToRgb(color) {
       blue: parseInt("" + rgbMatched[3], 10)
     };
   }
-
   var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
-
   if (rgbaMatched) {
     return {
       red: parseInt("" + rgbaMatched[1], 10),
@@ -20064,44 +19779,32 @@ 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),
@@ -20109,10 +19812,82 @@ 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));
+}
+
 /**
  * Reduces hex values if possible e.g. #ff8866 to #f86
  * @private
@@ -20121,10 +19896,8 @@ 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) {
@@ -20132,6 +19905,83 @@ 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.
  *
@@ -20161,7 +20011,6 @@ 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);
 }
 
@@ -20208,10 +20057,62 @@ 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);
+}
+
 // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
 // eslint-disable-next-line no-unused-vars
 // eslint-disable-next-line no-unused-vars
@@ -20222,14 +20123,156 @@ 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.
  *
@@ -20256,25 +20299,21 @@ function curry(f) {
  *   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:
-  // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
-
+  });
 
+  // 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;
@@ -20288,14 +20327,218 @@ function mix$1(weight, color, otherColor) {
     alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
   };
   return rgba$1(mixedColor);
-} // prettier-ignore
-
+}
 
-var curriedMix = /*#__PURE__*/curry
-/* ::<number | string, string, string, string> */
-(mix$1);
+// 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
+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);
+
 /**
  * Tints a color by mixing it with white. `tint` can produce
  * hue shifts, where as `lighten` manipulates the luminance channel and therefore
@@ -20322,14 +20565,52 @@ var mix$1$1 = curriedMix;
 function tint(percentage, color) {
   if (color === 'transparent') return color;
   return mix$1$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);
-} // prettier-ignore
-
+}
 
-var curriedTint = /*#__PURE__*/curry
-/* ::<number | string, string, string> */
-(tint);
+// 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 linkColor = MATISSE_BLUE;
 var fallbackValues$8 = {
   linkColor: linkColor
@@ -23019,32 +23300,19 @@ var toIndexedObject = function (it) {
   return indexedObject(requireObjectCoercible(it));
 };
 
-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;
+var documentAll = typeof document == 'object' && document.all;
 
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-var isCallable = documentAll_1.IS_HTMLDDA ? function (argument) {
-  return typeof argument == 'function' || argument === documentAll$1;
+// 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;
 } : function (argument) {
   return typeof argument == 'function';
 };
 
-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) {
+var isObject = function (it) {
   return typeof it == 'object' ? it !== null : isCallable(it);
 };
 
@@ -23180,10 +23448,10 @@ var shared = createCommonjsModule(function (module) {
 (module.exports = function (key, value) {
   return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.33.3',
+  version: '3.35.1',
   mode:  'global',
-  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
+  copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.35.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 });
@@ -23480,7 +23748,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;
@@ -23568,7 +23836,8 @@ var min$1 = Math.min;
 // `ToLength` abstract operation
 // https://tc39.es/ecma262/#sec-tolength
 var toLength = function (argument) {
-  return argument > 0 ? min$1(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
+  var len = toIntegerOrInfinity(argument);
+  return len > 0 ? min$1(len, 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
 };
 
 // `LengthOfArrayLike` abstract operation
@@ -23728,7 +23997,7 @@ var _export = function (options, source) {
   } else if (STATIC) {
     target = global_1[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = (global_1[TARGET] || {}).prototype;
+    target = global_1[TARGET] && global_1[TARGET].prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -23991,11 +24260,15 @@ 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 (typeof argument == 'object' || isCallable(argument)) return argument;
+  if (isPossiblePrototype(argument)) return argument;
   throw new $TypeError$6("Can't set " + $String$4(argument) + ' as a prototype');
 };
 
@@ -45841,15 +46114,13 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
 };
 var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$K, "profile");
 
-// Uses the theme values (singleIconColor) for the other icons, located in /atoms/icons
-
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
     iconDefault = _ref.iconDefault,
     configIconMap = _ref.configIconMap,
     iconValue = _ref.iconValue,
     customAttributes = _ref.customAttributes,
-    themeValues = _ref.themeValues;
+    iconColor = _ref.iconColor;
   var Icon;
   if (_typeof(icon) === "object") {
     var _configIconMap$iconID;
@@ -45865,10 +46136,9 @@ var IconsModule = function IconsModule(_ref) {
     justify: "center",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    color: themeValues.singleIconColor
+    color: iconColor
   })));
 };
-var IconModule = themeComponent(IconsModule, "Icon", fallbackValues$2, "primary");
 
 var TitleModule = function TitleModule(_ref) {
   var title = _ref.title,
@@ -45893,22 +46163,7 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
-var color$c = "#15749D";
-var hoverColor$5 = "#116285";
-var activeColor$8 = "#0E506D";
-var linkColor$4 = "#3176AA";
-var fontWeight$6 = FONT_WEIGHT_REGULAR;
-var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
-var fallbackValues$L = {
-  color: color$c,
-  hoverColor: hoverColor$5,
-  activeColor: activeColor$8,
-  linkColor: linkColor$4,
-  fontWeight: fontWeight$6,
-  modalLinkHoverFocus: modalLinkHoverFocus
-};
-
-var AutopayModal = function AutopayModal(_ref) {
+var AutopayModalModule = function AutopayModalModule(_ref) {
   var autoPayActive = _ref.autoPayActive,
     autoPaySchedule = _ref.autoPaySchedule,
     paymentPlanSchedule = _ref.paymentPlanSchedule,
@@ -45919,7 +46174,6 @@ var AutopayModal = function AutopayModal(_ref) {
     _ref$controlType = _ref.controlType,
     controlType = _ref$controlType === void 0 ? "tertiary" : _ref$controlType,
     isMobile = _ref.isMobile,
-    themeValues = _ref.themeValues,
     isPaymentPlan = _ref.isPaymentPlan,
     nextAutopayDate = _ref.nextAutopayDate,
     dueDate = _ref.dueDate,
@@ -45953,6 +46207,7 @@ var AutopayModal = function AutopayModal(_ref) {
       toggleModal(false);
     } : navigateToSettings
   };
+  var modalLinkHoverFocus = "\n    outline: none;\n    cursor: pointer;\n    text-decoration: underline;\n    text-decoration-color: #317D4F;\n  ";
   var hoverStyles = "text-decoration: underline;";
   var activeStyles = "text-decoration: underline;";
   var renderAutoPayControl = function renderAutoPayControl() {
@@ -46007,8 +46262,8 @@ var AutopayModal = function AutopayModal(_ref) {
             tabIndex: "0",
             dataQa: "".concat(shortPlan, " On"),
             color: SEA_GREEN,
-            weight: themeValues.fontWeight,
-            hoverStyles: themeValues.modalLinkHoverFocus,
+            weight: FONT_WEIGHT_REGULAR,
+            hoverStyles: modalLinkHoverFocus,
             extraStyles: "padding-left: 0.25rem;",
             disabled: disableActions
           }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
@@ -46025,7 +46280,6 @@ var AutopayModal = function AutopayModal(_ref) {
     modalOpen: modalOpen
   }, modalExtraProps), renderAutoPayControl());
 };
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$L);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -46221,10 +46475,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
-    action: function action() {
-      return disableActions ? noop : function () {
-        return handleClick(obligations);
-      };
+    action: disableActions ? noop : function () {
+      return handleClick(obligations);
     },
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
@@ -46386,6 +46638,11 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
   }, "This may mean that the balance has been paid, or there was an error loading it.".concat(autoPayEnabled ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button." : ""))));
 };
 
+var iconColor = ROYAL_BLUE_VIVID;
+var fallbackValues$L = {
+  iconColor: iconColor
+};
+
 var Obligation = function Obligation(_ref) {
   var _obligations$, _firstObligation$cust;
   var config = _ref.config,
@@ -46413,7 +46670,8 @@ var Obligation = function Obligation(_ref) {
     _ref$inactiveLookupVa = _ref.inactiveLookupValue,
     inactiveLookupValue = _ref$inactiveLookupVa === void 0 ? "" : _ref$inactiveLookupVa,
     _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana,
+    themeValues = _ref.themeValues;
   /*
     The value of obligations is always an array. It can contain:
       - A single obligation
@@ -46458,7 +46716,7 @@ var Obligation = function Obligation(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
-  }, !isMobile && /*#__PURE__*/React__default.createElement(IconModule, {
+  }, !isMobile && /*#__PURE__*/React__default.createElement(IconsModule, {
     icon: config.icon,
     iconDefault: config.iconDefault,
     configIconMap: config.iconMap,
@@ -46550,12 +46808,13 @@ var Obligation = function Obligation(_ref) {
     justify: "flex-start",
     align: "center",
     nowrap: true
-  }, /*#__PURE__*/React__default.createElement(IconModule, {
+  }, /*#__PURE__*/React__default.createElement(IconsModule, {
     icon: config.icon,
     iconDefault: config.iconDefault,
     configIconMap: config.iconMap,
     iconValue: config.iconValue,
-    customAttributes: customAttributes
+    customAttributes: customAttributes,
+    iconColor: themeValues.iconColor
   }), /*#__PURE__*/React__default.createElement(InactiveTitleModule, {
     title: inactiveLookupTitle,
     subtitle: "".concat(inactiveLookupInput, ": ").concat(inactiveLookupValue),
@@ -46601,6 +46860,7 @@ var Obligation = function Obligation(_ref) {
   }))));
   return inactive ? inactiveObligation : activeObligation;
 };
+var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$L);
 
 var PartialAmountField = function PartialAmountField(_ref) {
   var lineItem = _ref.lineItem,
@@ -46737,9 +46997,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
-var activeColor$9 = MATISSE_BLUE;
+var activeColor$8 = MATISSE_BLUE;
 var fallbackValues$M = {
-  activeColor: activeColor$9,
+  activeColor: activeColor$8,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47402,7 +47662,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
 };
 var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$N, "default");
 
-var linkColor$5 = {
+var linkColor$4 = {
   "default": "#3176AA"
 };
 var fontSize$a = {
@@ -47411,21 +47671,21 @@ var fontSize$a = {
 var lineHeight$4 = {
   "default": "1.5rem"
 };
-var fontWeight$7 = {
+var fontWeight$6 = {
   "default": FONT_WEIGHT_REGULAR
 };
-var modalLinkHoverFocus$1 = {
+var modalLinkHoverFocus = {
   "default": "outline: none; text-decoration: underline;"
 };
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
 var fallbackValues$O = {
-  linkColor: linkColor$5,
+  linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
-  fontWeight: fontWeight$7,
-  modalLinkHoverFocus: modalLinkHoverFocus$1,
+  fontWeight: fontWeight$6,
+  modalLinkHoverFocus: modalLinkHoverFocus,
   linkTextDecoration: linkTextDecoration
 };
 
@@ -47490,7 +47750,7 @@ var backgroundColor$d = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
-var linkColor$6 = {
+var linkColor$5 = {
   "default": "#3176AA",
   footer: "#ffffff"
 };
@@ -47506,12 +47766,12 @@ var lineHeight$5 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$8 = {
+var fontWeight$7 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
 var standardInteractionStyles = "\n    &:hover {\n      outline: none; \n      text-decoration: underline;\n    }\n    &:focus {\n      outline: 3px solid #3181E3;\n      outline-offset: 2px;\n    }\n";
-var modalLinkHoverFocus$2 = {
+var modalLinkHoverFocus$1 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
@@ -47521,12 +47781,12 @@ var modalLinkTextDecoration = {
 };
 var fallbackValues$P = {
   backgroundColor: backgroundColor$d,
-  linkColor: linkColor$6,
+  linkColor: linkColor$5,
   border: border$3,
   fontSize: fontSize$b,
   lineHeight: lineHeight$5,
-  fontWeight: fontWeight$8,
-  modalLinkHoverFocus: modalLinkHoverFocus$2,
+  fontWeight: fontWeight$7,
+  modalLinkHoverFocus: modalLinkHoverFocus$1,
   modalLinkTextDecoration: modalLinkTextDecoration
 };
 
@@ -48774,16 +49034,9 @@ RegistrationForm.reducer = reducer$9;
 RegistrationForm.mapStateToProps = mapStateToProps$a;
 RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
-var GRECIAN_GREY$1 = GRECIAN_GREY;
-var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$R = {
-  bannerBackgroundColor: bannerBackgroundColor
-};
-
 var ResetConfirmationForm = function ResetConfirmationForm() {
-  var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$R, "ResetConfirmationForm");
-  var isMobile = themeContext.isMobile;
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     width: isMobile ? "auto" : "576px",
@@ -48791,7 +49044,7 @@ var ResetConfirmationForm = function ResetConfirmationForm() {
     background: WHITE,
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    background: themeValues.bannerBackgroundColor,
+    background: GRECIAN_GREY,
     minWidth: "100%",
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -48895,16 +49148,9 @@ ResetPasswordForm.reducer = reducer$a;
 ResetPasswordForm.mapStateToProps = mapStateToProps$b;
 ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
-var GRECIAN_GREY$2 = GRECIAN_GREY;
-var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$S = {
-  bannerBackgroundColor: bannerBackgroundColor$1
-};
-
-var ResetPasswordSuccess = function ResetPasswordSuccess() {
-  var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$S, "ResetPasswordSuccess");
-  var isMobile = themeContext.isMobile;
+var ResetConfirmationForm$2 = function ResetConfirmationForm() {
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     width: isMobile ? "auto" : "576px",
@@ -48912,7 +49158,7 @@ var ResetPasswordSuccess = function ResetPasswordSuccess() {
     background: WHITE,
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    background: themeValues.bannerBackgroundColor,
+    background: GRECIAN_GREY,
     minWidth: "100%",
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -48947,12 +49193,12 @@ var ResetPasswordSuccess = function ResetPasswordSuccess() {
     linkExtraStyles: "width: 100%;"
   }))))));
 };
-var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
+var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$T = {
+var fallbackValues$R = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49020,12 +49266,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$T);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$R);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$U = {
+var fallbackValues$S = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49080,7 +49326,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$U);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$S);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49175,13 +49421,13 @@ var ToastNotification = function ToastNotification(_ref) {
   }, message))), /*#__PURE__*/React__default.createElement(IconQuitLarge, null)));
 };
 
-var fontWeight$9 = "600";
+var fontWeight$8 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$V = {
-  fontWeight: fontWeight$9,
+var fallbackValues$T = {
+  fontWeight: fontWeight$8,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
   headerBackgroundColor: headerBackgroundColor$1,
@@ -49225,7 +49471,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$V));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$T));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49285,7 +49531,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$W = {
+var fallbackValues$U = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -49352,15 +49598,15 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$W);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$U);
 
-var hoverColor$6 = "#116285";
-var activeColor$a = "#0E506D";
+var hoverColor$5 = "#116285";
+var activeColor$9 = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$X = {
-  hoverColor: hoverColor$6,
-  activeColor: activeColor$a,
+var fallbackValues$V = {
+  hoverColor: hoverColor$5,
+  activeColor: activeColor$9,
   menuTriggerColor: menuTriggerColor,
   backgroundColor: backgroundColor$e
 };
@@ -49494,10 +49740,10 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$X);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$V);
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$Y = {
+var fallbackValues$W = {
   pageBackground: pageBackground
 };
 
@@ -49545,7 +49791,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$Y));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$W));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -49588,7 +49834,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$Y));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$W));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -49634,7 +49880,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$Y));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$W));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -49687,7 +49933,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$Y));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$W));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -49757,7 +50003,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$Y));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$W));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -49911,7 +50157,7 @@ exports.NavTabs = NavTabs;
 exports.NoCustomerResultsIcon = NoCustomerResultsIcon;
 exports.NoPaymentResultsIcon = NoPaymentResultsIcon;
 exports.NotFoundIcon = NotFoundIcon;
-exports.Obligation = Obligation;
+exports.Obligation = Obligation$1;
 exports.ObligationIcons = iconsMap;
 exports.Pagination = Pagination$1;
 exports.Paragraph = Paragraph$1;
@@ -49955,7 +50201,7 @@ exports.RejectedVelocityIcon = RejectedVelocityIcon;
 exports.ResetConfirmationForm = ResetConfirmationForm$1;
 exports.ResetPasswordForm = ResetPasswordForm;
 exports.ResetPasswordIcon = ResetPasswordIcon;
-exports.ResetPasswordSuccess = ResetPasswordSuccess$1;
+exports.ResetPasswordSuccess = ResetPasswordSuccess;
 exports.RevenueManagementImage = RevenueManagementImage;
 exports.RoutingNumberImage = RoutingNumberImage;
 exports.SearchIcon = SearchIcon;