@thecb/components 10.7.0-beta.2 → 10.7.1-beta.1

package/dist/index.cjs.js

@@ -236,6 +236,58 @@ 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() {
@@ -246,6 +298,32 @@ 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);
 }; };
@@ -259,8 +337,8 @@ var number = {
     parse: parseFloat,
     transform: function (v) { return v; }
 };
-var alpha = __assign(__assign({}, number), { transform: clamp(0, 1) });
-var scale = __assign(__assign({}, number), { default: 1 });
+var alpha = __assign$2(__assign$2({}, number), { transform: clamp(0, 1) });
+var scale = __assign$2(__assign$2({}, number), { default: 1 });
 
 var createUnitType = function (unit) { return ({
     test: function (v) {
@@ -274,7 +352,7 @@ var percent = createUnitType('%');
 var px = createUnitType('px');
 var vh = createUnitType('vh');
 var vw = createUnitType('vw');
-var progressPercentage = __assign(__assign({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
+var progressPercentage = __assign$2(__assign$2({}, 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(')'));
@@ -308,7 +386,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(__assign({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
+var rgbUnit = __assign$2(__assign$2({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
 function isColorString(color, colorType) {
     return color.startsWith(colorType) && singleColorRegex.test(color);
 }
@@ -338,7 +416,7 @@ var hsla = {
         });
     }
 };
-var hex = __assign(__assign({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
+var hex = __assign$2(__assign$2({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
         var r = '';
         var g = '';
         var b = '';
@@ -874,15 +952,15 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
+var __assign$3 = function() {
+    __assign$3 = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign$1.apply(this, arguments);
+    return __assign$3.apply(this, arguments);
 };
 
 var mixLinearColor = function (from, to, v) {
@@ -905,7 +983,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$1({}, fromColor);
+    var blended = __assign$3({}, fromColor);
     var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
     return function (v) {
         for (var key in blended) {
@@ -950,7 +1028,7 @@ var mixArray = function (from, to) {
     };
 };
 var mixObject = function (origin, target) {
-    var output = __assign$1({}, origin, target);
+    var output = __assign$3({}, origin, target);
     var blendValue = {};
     for (var key in output) {
         if (origin[key] !== undefined && target[key] !== undefined) {
@@ -1162,6 +1240,44 @@ 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,
@@ -1173,7 +1289,7 @@ var createStyler = function (_a) {
         if (_a === void 0) {
             _a = {};
         }
-        var props = __rest(_a, []);
+        var props = __rest$2(_a, []);
         var state = {};
         var changedValues = [];
         var hasChanged = false;
@@ -1293,7 +1409,7 @@ function isTransformOriginProp(key) {
     return transformOriginProps.has(key);
 }
 
-var int = /*#__PURE__*/__assign( /*#__PURE__*/__assign({}, number), { transform: Math.round });
+var int = /*#__PURE__*/__assign$4( /*#__PURE__*/__assign$4({}, number), { transform: Math.round });
 var valueTypes = {
     color: color,
     backgroundColor: color,
@@ -1525,8 +1641,8 @@ function createCssStyler(element, _a) {
     }
     var enableHardwareAcceleration = _a.enableHardwareAcceleration,
         allowTransformNone = _a.allowTransformNone,
-        props = __rest(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
-    return cssStyler(__assign({ element: element, buildStyles: createStyleBuilder({
+        props = __rest$2(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
+    return cssStyler(__assign$4({ element: element, buildStyles: createStyleBuilder({
             enableHardwareAcceleration: enableHardwareAcceleration,
             allowTransformNone: allowTransformNone
         }), preparseOutput: true }, props));
@@ -1576,7 +1692,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(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+        state = __rest$2(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
     var style = cssBuilder(state);
     for (var key in style) {
         if (key === 'transform') {
@@ -1705,7 +1821,7 @@ var Chainable = /*#__PURE__*/function () {
         this.props = props;
     }
     Chainable.prototype.applyMiddleware = function (middleware) {
-        return this.create(__assign(__assign({}, this.props), { middleware: this.props.middleware ? __spreadArrays([middleware], this.props.middleware) : [middleware] }));
+        return this.create(__assign$1(__assign$1({}, this.props), { middleware: this.props.middleware ? __spreadArrays([middleware], this.props.middleware) : [middleware] }));
     };
     Chainable.prototype.pipe = function () {
         var funcs = [];
@@ -1777,7 +1893,7 @@ var createObserver = function (observerCandidate, _a, onComplete) {
 };
 
 var Action = /*#__PURE__*/function (_super) {
-    __extends(Action, _super);
+    __extends$1(Action, _super);
     function Action() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1796,13 +1912,13 @@ var Action = /*#__PURE__*/function (_super) {
         };
         var _a = this.props,
             init = _a.init,
-            observerProps = __rest(_a, ["init"]);
+            observerProps = __rest$1(_a, ["init"]);
         var observer = createObserver(observerCandidate, observerProps, function () {
             isComplete = true;
             subscription.stop();
         });
         var api = init(observer);
-        subscription = api ? __assign(__assign({}, subscription), api) : subscription;
+        subscription = api ? __assign$1(__assign$1({}, subscription), api) : subscription;
         if (observerCandidate.registerParent) {
             observerCandidate.registerParent(subscription);
         }
@@ -1816,7 +1932,7 @@ var action = function (init) {
 };
 
 var BaseMulticast = /*#__PURE__*/function (_super) {
-    __extends(BaseMulticast, _super);
+    __extends$1(BaseMulticast, _super);
     function BaseMulticast() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.subscribers = [];
@@ -1876,7 +1992,7 @@ var isSingleValue = function (v) {
     return typeOfV === 'string' || typeOfV === 'number';
 };
 var ValueReaction = /*#__PURE__*/function (_super) {
-    __extends(ValueReaction, _super);
+    __extends$1(ValueReaction, _super);
     function ValueReaction(props) {
         var _this = _super.call(this, props) || this;
         _this.scheduleVelocityCheck = function () {
@@ -2126,7 +2242,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({}, props));
+        var childActionProps = vectorKeys.reduce(reduceArrayValue(i), __assign$1({}, props));
         return getActionCreator(v)(action, childActionProps);
     });
     return parallel$1.apply(void 0, actionList);
@@ -2140,7 +2256,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({}, props));
+        var childActionProps = vectorKeys.reduce(reduceObjectValue(key), __assign$1({}, props));
         map[key] = getActionCreator(props[firstVectorKey][key])(action, childActionProps);
         return map;
     }, {});
@@ -2149,18 +2265,18 @@ var createObjectAction = function (action, props, vectorKeys) {
 var createUnitAction = function (action, _a) {
     var from = _a.from,
         to = _a.to,
-        props = __rest(_a, ["from", "to"]);
+        props = __rest$1(_a, ["from", "to"]);
     var unitType = findUnitType(from) || findUnitType(to);
     var transform = unitType.transform,
         parse = unitType.parse;
-    return action(__assign(__assign({}, props), { from: typeof from === 'string' ? parse(from) : from, to: typeof to === 'string' ? parse(to) : to })).pipe(transform);
+    return action(__assign$1(__assign$1({}, 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(_a, ["from", "to"]);
-        return action(__assign(__assign({}, props), { from: 0, to: 1 })).pipe(mixer(from, to));
+            props = __rest$1(_a, ["from", "to"]);
+        return action(__assign$1(__assign$1({}, props), { from: 0, to: 1 })).pipe(mixer(from, to));
     };
 };
 var createColorAction = /*#__PURE__*/createMixerAction(mixColor);
@@ -2506,7 +2622,7 @@ var keyframes = function (_a) {
         ease = _b === void 0 ? linear : _b,
         times = _a.times,
         values = _a.values,
-        tweenProps = __rest(_a, ["easings", "ease", "times", "values"]);
+        tweenProps = __rest$1(_a, ["easings", "ease", "times", "values"]);
     easings = Array.isArray(easings) ? easings : defaultEasings(values, easings);
     times = times || defaultTimings(values);
     var scrubbers = easings.map(function (easing, i) {
@@ -2516,7 +2632,7 @@ var keyframes = function (_a) {
             ease: easing
         });
     });
-    return tween(__assign(__assign({}, tweenProps), { ease: ease })).applyMiddleware(function (update) {
+    return tween(__assign$1(__assign$1({}, tweenProps), { ease: ease })).applyMiddleware(function (update) {
         return interpolateScrubbers(times, scrubbers, update);
     });
 };
@@ -2760,7 +2876,7 @@ var index$1 = function (_a) {
     }
     var x = _a.x,
         y = _a.y,
-        props = __rest(_a, ["x", "y"]);
+        props = __rest$1(_a, ["x", "y"]);
     if (x !== undefined || y !== undefined) {
         var applyXOffset_1 = applyOffset(x || 0);
         var applyYOffset_1 = applyOffset(y || 0);
@@ -2834,7 +2950,7 @@ var steps$1 = function (st, min, max) {
 };
 var transformMap = function (childTransformers) {
     return function (v) {
-        var output = __assign({}, v);
+        var output = __assign$1({}, v);
         for (var key in childTransformers) {
             if (childTransformers.hasOwnProperty(key)) {
                 var childTransformer = childTransformers[key];
@@ -2865,6 +2981,52 @@ 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,
@@ -2877,7 +3039,7 @@ var getPoseValues = function (_a) {
         preTransition = _a.preTransition,
         applyAtStart = _a.applyAtStart,
         applyAtEnd = _a.applyAtEnd,
-        props = __rest(_a, ["transition", "flip", "delay", "delayChildren", "staggerChildren", "staggerDirection", "afterChildren", "beforeChildren", "preTransition", "applyAtStart", "applyAtEnd"]);
+        props = __rest$3(_a, ["transition", "flip", "delay", "delayChildren", "staggerChildren", "staggerDirection", "afterChildren", "beforeChildren", "preTransition", "applyAtStart", "applyAtEnd"]);
     return props;
 };
 var selectPoses = function (_a) {
@@ -2889,7 +3051,7 @@ var selectPoses = function (_a) {
         onChange = _a.onChange,
         passive = _a.passive,
         initialPose = _a.initialPose,
-        poses = __rest(_a, ["label", "props", "values", "parentValues", "ancestorValues", "onChange", "passive", "initialPose"]);
+        poses = __rest$3(_a, ["label", "props", "values", "parentValues", "ancestorValues", "onChange", "passive", "initialPose"]);
     return poses;
 };
 var selectAllValues = function (values, selectValue) {
@@ -2989,7 +3151,7 @@ var createPoseSetter = function (setterProps) {
         var _a = nextProps.delay,
             delay = _a === void 0 ? 0 : _a;
         var hasChildren = children.size;
-        var baseTransitionProps = __assign(__assign({}, props), nextProps);
+        var baseTransitionProps = __assign$5(__assign$5({}, props), nextProps);
         var nextPose = poses[next];
         var getChildAnimations = function () {
             return hasChildren && propagate ? startChildAnimations(children, next, nextPose, baseTransitionProps) : [];
@@ -3015,11 +3177,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(__assign({}, baseTransitionProps), { key: key,
+                    var transitionProps = __assign$5(__assign$5({}, baseTransitionProps), { key: key,
                         value: value });
                     var target = resolveTarget(value, resolveProp(nextPose[key], transitionProps));
                     if (activeActions.has(key)) stopAction(activeActions.get(key));
-                    var resolveTransitionProps = __assign(__assign({ to: target }, transitionProps), getTransitionProps(value, target, transitionProps));
+                    var resolveTransitionProps = __assign$5(__assign$5({ 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) {
@@ -3043,7 +3205,7 @@ var createPoseSetter = function (setterProps) {
                 });
             }
         }
-        return Promise.all(__spreadArrays(getParentAnimations(), getChildAnimations()));
+        return Promise.all(__spreadArrays$1(getParentAnimations(), getChildAnimations()));
     };
 };
 
@@ -3169,7 +3331,7 @@ var createValueMap = function (props) {
 };
 
 var applyDefaultTransition = function (pose, key, defaultTransitions) {
-    return __assign(__assign({}, pose), { transition: defaultTransitions.has(key) ? defaultTransitions.get(key) : defaultTransitions.get('default') });
+    return __assign$5(__assign$5({}, pose), { transition: defaultTransitions.has(key) ? defaultTransitions.get(key) : defaultTransitions.get('default') });
 };
 var generateTransitions = function (poses, defaultTransitions) {
     Object.keys(poses).forEach(function (key) {
@@ -3223,7 +3385,7 @@ var poseFactory = function (_a) {
         var poses = generateTransitions(selectPoses(config), defaultTransitions);
         var _b = config.props,
             props = _b === void 0 ? {} : _b;
-        if (getDefaultProps) props = __assign(__assign({}, getDefaultProps(config)), props);
+        if (getDefaultProps) props = __assign$5(__assign$5({}, getDefaultProps(config)), props);
         var passive = config.passive,
             userSetValues = config.values,
             _c = config.initialPose,
@@ -3298,10 +3460,10 @@ var poseFactory = function (_a) {
             },
             has: has,
             setProps: function (newProps) {
-                return state.props = __assign(__assign({}, state.props), newProps);
+                return state.props = __assign$5(__assign$5({}, state.props), newProps);
             },
             _addChild: function (childConfig, factory) {
-                var child = factory(__assign(__assign({ initialPose: initialPose }, childConfig), { ancestorValues: __spreadArrays([{ label: config.label, values: values }], ancestorValues) }));
+                var child = factory(__assign$5(__assign$5({ initialPose: initialPose }, childConfig), { ancestorValues: __spreadArrays$1([{ label: config.label, values: values }], ancestorValues) }));
                 children.add(child);
                 return child;
             },
@@ -3340,18 +3502,18 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-var __assign$2 = function () {
-    __assign$2 = Object.assign || function __assign(t) {
+var __assign$6 = function () {
+    __assign$6 = 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);
+    return __assign$6.apply(this, arguments);
 };
 
-function __rest$1(s, e) {
+function __rest$4(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++) {
@@ -3468,12 +3630,12 @@ var intelligentTransition = {
     opacity: linearTween,
     default: tween
 };
-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 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 justAxis = function (_a) {
     var from = _a.from;
     return just(from);
 };
-var intelligentDragEnd = /*#__PURE__*/__assign$2( /*#__PURE__*/__assign$2({}, intelligentTransition), { x: justAxis, y: justAxis });
+var intelligentDragEnd = /*#__PURE__*/__assign$6( /*#__PURE__*/__assign$6({}, intelligentTransition), { x: justAxis, y: justAxis });
 var defaultTransitions = /*#__PURE__*/new Map([['default', intelligentTransition], ['drag', dragAction], ['dragEnd', intelligentDragEnd]]);
 
 var animationLookup = {
@@ -3543,7 +3705,7 @@ var getAction = function (v, _a, _b) {
     var _c = _a.type,
         type = _c === void 0 ? 'tween' : _c,
         definedEase = _a.ease,
-        def = __rest$1(_a, ["type", "ease"]);
+        def = __rest$4(_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') {
@@ -3568,7 +3730,7 @@ var getAction = function (v, _a, _b) {
         velocity: velocity,
         ease: ease
     } : { ease: ease };
-    return animationLookup[type](__assign$2(__assign$2({}, baseProps), def));
+    return animationLookup[type](__assign$6(__assign$6({}, baseProps), def));
 };
 var isAction = function (action$$1) {
     return typeof action$$1.start !== 'undefined';
@@ -3653,7 +3815,7 @@ var pose = function (_a) {
                 min = def.min,
                 max = def.max,
                 round = def.round,
-                remainingDef = __rest$1(def, ["delay", "min", "max", "round"]);
+                remainingDef = __rest$4(def, ["delay", "min", "max", "round"]);
             var action$$1 = getAction(val, remainingDef, props);
             var outputPipe = [];
             if (delay$$1) action$$1 = addActionDelay(delay$$1, action$$1);
@@ -3835,7 +3997,7 @@ var explicitlyFlipPose = function (state, nextPose) {
         bottom = nextPose.bottom,
         right = nextPose.right,
         position = nextPose.position,
-        remainingPose = __rest$1(nextPose, ["width", "height", "top", "left", "bottom", "right", "position"]);
+        remainingPose = __rest$4(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);
@@ -3947,7 +4109,7 @@ var convertPositionalUnits = function (state, nextPose) {
             changedPositionalKeys.push(key);
             if (!applyAtEndHasBeenCopied) {
                 applyAtEndHasBeenCopied = true;
-                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$2({}, nextPose.applyAtEnd) : {};
+                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$6({}, nextPose.applyAtEnd) : {};
             }
             nextPose.applyAtEnd[key] = nextPose.applyAtEnd[key] || nextPose[key];
             setValue(state, key, to);
@@ -4003,8 +4165,8 @@ var createPoseConfig = function (element, _a) {
         focusable = _a.focusable,
         pressable = _a.pressable,
         dragBounds = _a.dragBounds,
-        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,
+        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,
             onDragEnd: onDragEnd,
             onPressStart: onPressStart,
             onPressEnd: onPressEnd,
@@ -4018,8 +4180,8 @@ var createPoseConfig = function (element, _a) {
         var _b = dragPoses(draggable),
             drag = _b.drag,
             dragEnd = _b.dragEnd;
-        poseConfig.drag = __assign$2(__assign$2({}, drag), poseConfig.drag);
-        poseConfig.dragEnd = __assign$2(__assign$2({}, dragEnd), poseConfig.dragEnd);
+        poseConfig.drag = __assign$6(__assign$6({}, drag), poseConfig.drag);
+        poseConfig.dragEnd = __assign$6(__assign$6({}, dragEnd), poseConfig.dragEnd);
     }
     return poseConfig;
 };
@@ -4027,7 +4189,7 @@ var domPose = /*#__PURE__*/pose({
     posePriority: ['drag', 'press', 'focus', 'hover'],
     transformPose: function (_a, name, state) {
         var flip = _a.flip,
-            pose$$1 = __rest$1(_a, ["flip"]);
+            pose$$1 = __rest$4(_a, ["flip"]);
         if (isFlipPose(flip, name, state)) {
             return flipPose(state, pose$$1);
         } else if (isPositional(pose$$1)) {
@@ -4065,7 +4227,7 @@ var domPose = /*#__PURE__*/pose({
         var props = _a.props,
             activeActions = _a.activeActions;
         var measure = props.dimensions.measure;
-        var poserApi = __assign$2(__assign$2({}, api), { addChild: function (element, childConfig) {
+        var poserApi = __assign$6(__assign$6({}, api), { addChild: function (element, childConfig) {
                 return api._addChild(createPoseConfig(element, childConfig), domPose);
             }, measure: measure, flip: function (op) {
                 if (op) {
@@ -7078,6 +7240,104 @@ 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;
@@ -7140,18 +7400,18 @@ var Action$1 = /*#__PURE__*/function () {
         };
         var _a = this.props,
             init = _a.init,
-            observerProps = __rest(_a, ["init"]);
+            observerProps = __rest$6(_a, ["init"]);
         var observer = createObserver$1(observerCandidate, observerProps, function () {
             isComplete = true;
             subscription.stop();
         });
         var api = init(observer);
-        subscription = api ? __assign({}, subscription, api) : subscription;
+        subscription = api ? __assign$8({}, subscription, api) : subscription;
         if (isComplete) subscription.stop();
         return subscription;
     };
     Action.prototype.applyMiddleware = function (middleware) {
-        return this.create(__assign({}, this.props, { middleware: this.props.middleware ? [middleware].concat(this.props.middleware) : [middleware] }));
+        return this.create(__assign$8({}, this.props, { middleware: this.props.middleware ? [middleware].concat(this.props.middleware) : [middleware] }));
     };
     Action.prototype.pipe = function () {
         var funcs = [];
@@ -7204,18 +7464,18 @@ var createAction$1 = function (action, props) {
 var createUnitAction$1 = function (action, _a) {
     var from = _a.from,
         to = _a.to,
-        props = __rest(_a, ["from", "to"]);
+        props = __rest$6(_a, ["from", "to"]);
     var unitType = findUnitType$1(from) || findUnitType$1(to);
     var transform = unitType.transform,
         parse = unitType.parse;
-    return action(__assign({}, props, { from: typeof from === 'string' ? parse(from) : from, to: typeof to === 'string' ? parse(to) : to })).pipe(transform);
+    return action(__assign$8({}, 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(_a, ["from", "to"]);
-        return action(__assign({}, props, { from: 0, to: 1 })).pipe(mixer(from, to));
+            props = __rest$6(_a, ["from", "to"]);
+        return action(__assign$8({}, props, { from: 0, to: 1 })).pipe(mixer(from, to));
     };
 };
 var createColorAction$1 = /*#__PURE__*/createMixerAction$1(mixColor);
@@ -7428,7 +7688,7 @@ var inertia = function (_a) {
         };
         var startSpring = function (props) {
             isSpring = true;
-            startAnimation(vectorSpring$1(__assign({}, props, { to: isLessThanMin(props.from) ? min : max, stiffness: bounceStiffness, damping: bounceDamping, restDelta: restDelta })));
+            startAnimation(vectorSpring$1(__assign$8({}, props, { to: isLessThanMin(props.from) ? min : max, stiffness: bounceStiffness, damping: bounceDamping, restDelta: restDelta })));
         };
         if (isOutOfBounds(from)) {
             startSpring({ from: from, velocity: velocity });
@@ -7660,7 +7920,7 @@ var keyframes$1 = function (_a) {
         ease = _b === void 0 ? linear : _b,
         times = _a.times,
         values = _a.values,
-        tweenProps = __rest(_a, ["easings", "ease", "times", "values"]);
+        tweenProps = __rest$6(_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) {
@@ -7670,7 +7930,7 @@ var keyframes$1 = function (_a) {
             ease: easing
         });
     });
-    return tween$1(__assign({}, tweenProps, { ease: ease })).applyMiddleware(function (update) {
+    return tween$1(__assign$8({}, tweenProps, { ease: ease })).applyMiddleware(function (update) {
         return interpolateScrubbers$1(times, scrubbers, update);
     });
 };
@@ -7872,7 +8132,7 @@ var MotionValue = /** @class */ (function () {
      */
     MotionValue.prototype.addChild = function (config) {
         if (config === void 0) { config = {}; }
-        var child = new MotionValue(this.current, __assign({ parent: this }, config));
+        var child = new MotionValue(this.current, __assign$7({ parent: this }, config));
         if (!this.children)
             this.children = new Set();
         this.children.add(child);
@@ -8314,7 +8574,7 @@ var buildStyleAttr = function (values, styleProp, isStatic) {
             ? transformTemplate({}, styleProp.transform)
             : transformTemplate;
     }
-    return buildStyleProperty(__assign(__assign({}, styleProp), motionValueStyles), !isStatic);
+    return buildStyleProperty(__assign$7(__assign$7({}, styleProp), motionValueStyles), !isStatic);
 };
 var useMotionStyles = function (values, styleProp, isStatic, transformValues) {
     if (styleProp === void 0) { styleProp = {}; }
@@ -8368,7 +8628,7 @@ var auto$1 = {
     parse: function (v) { return v; },
 };
 var dimensionTypes = [number, px, percent, degrees, vw, vh, auto$1];
-var valueTypes$1 = __spreadArrays(dimensionTypes, [color, complex]);
+var valueTypes$1 = __spreadArrays$2(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));
@@ -8421,7 +8681,7 @@ var getDefaultTransition = function (valueKey, to) {
         transitionFactory =
             defaultTransitions$1[valueKey] || defaultTransitions$1.default;
     }
-    return __assign({ to: to }, transitionFactory(to));
+    return __assign$7({ to: to }, transitionFactory(to));
 };
 
 /**
@@ -8517,9 +8777,9 @@ var transitionOptionParser = {
         return opts;
     },
     keyframes: function (_a) {
-        var from = _a.from, to = _a.to, velocity = _a.velocity, opts = __rest(_a, ["from", "to", "velocity"]);
+        var from = _a.from, to = _a.to, velocity = _a.velocity, opts = __rest$5(_a, ["from", "to", "velocity"]);
         if (opts.values && opts.values[0] === null) {
-            var values = __spreadArrays(opts.values);
+            var values = __spreadArrays$2(opts.values);
             values[0] = from;
             opts.values = values;
         }
@@ -8533,7 +8793,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(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection"]);
+    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"]);
     return Object.keys(transition).length;
 };
 var getTransitionDefinition = function (key, to, transitionDefinition) {
@@ -8543,7 +8803,7 @@ var getTransitionDefinition = function (key, to, transitionDefinition) {
     // and see if there's any props remaining
     if (transitionDefinition === undefined ||
         !isTransitionDefined(transitionDefinition)) {
-        return __assign({ delay: delay }, getDefaultTransition(key, to));
+        return __assign$7({ delay: delay }, getDefaultTransition(key, to));
     }
     var valueTransitionDefinition = transitionDefinition[key] ||
         transitionDefinition.default ||
@@ -8560,12 +8820,12 @@ var getTransitionDefinition = function (key, to, transitionDefinition) {
         };
     }
     else if (isKeyframesTarget(to)) {
-        return __assign(__assign({ values: to, duration: 0.8, delay: delay, ease: "linear" }, valueTransitionDefinition), { 
+        return __assign$7(__assign$7({ 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({ type: "tween", to: to,
+        return __assign$7({ type: "tween", to: to,
             delay: delay }, valueTransitionDefinition);
     }
 };
@@ -8582,12 +8842,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(_a, ["type"]);
+    var _a = getTransitionDefinition(key, target, transition), _b = _a.type, type = _b === void 0 ? "tween" : _b, transitionDefinition = __rest$5(_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({ from: origin, velocity: value.getVelocity() }, transitionDefinition));
+    var opts = preprocessOptions(type, __assign$7({ from: origin, velocity: value.getVelocity() }, transitionDefinition));
     // Convert duration from Framer Motion's seconds into Popmotion's milliseconds
     if (isDurationAnimation(opts)) {
         if (opts.duration) {
@@ -8605,10 +8865,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(_a, ["delay"]);
+    var _b = _a.delay, delay$1$1 = _b === void 0 ? 0 : _b, transition = __rest$5(_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(_b, ["delay"]);
+        var _a = getAnimation(key, value, target, transition), animationFactory = _a[0], _b = _a[1], valueDelay = _b.delay, options = __rest$5(_b, ["delay"]);
         if (valueDelay !== undefined) {
             delay$1$1 = valueDelay;
         }
@@ -8754,7 +9014,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(__assign({}, target), transitionEnd));
+        target = this.transformValues(__assign$7(__assign$7({}, target), transitionEnd));
         return Object.keys(target).forEach(function (key) {
             if (isActive.has(key))
                 return;
@@ -8844,7 +9104,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(variant, ["transition", "transitionEnd"]);
+        var _a = variant.transition, transition = _a === void 0 ? this.defaultTransition : _a, transitionEnd = variant.transitionEnd, target = __rest$5(variant, ["transition", "transitionEnd"]);
         return { transition: transition, transitionEnd: transitionEnd, target: target };
     };
     /**
@@ -8935,7 +9195,7 @@ var ValueAnimationControls = /** @class */ (function () {
     ValueAnimationControls.prototype.applyVariantLabels = function (variantLabelList) {
         var _this = this;
         var isActive = new Set();
-        var reversedList = __spreadArrays(variantLabelList).reverse();
+        var reversedList = __spreadArrays$2(variantLabelList).reverse();
         reversedList.forEach(function (key) {
             var _a = _this.resolveVariant(_this.variants[key]), target = _a.target, transitionEnd = _a.transitionEnd;
             if (transitionEnd) {
@@ -9006,7 +9266,7 @@ var ValueAnimationControls = /** @class */ (function () {
             if (this.isAnimating.has(key))
                 continue;
             this.isAnimating.add(key);
-            animations.push(startAnimation(key, value, valueTarget, __assign({ delay: delay }, transition)));
+            animations.push(startAnimation(key, value, valueTarget, __assign$7({ delay: delay }, transition)));
         }
         var allAnimations = Promise.all(animations);
         return transitionEnd
@@ -9017,7 +9277,7 @@ var ValueAnimationControls = /** @class */ (function () {
     };
     ValueAnimationControls.prototype.animateVariantLabels = function (variantLabels, opts) {
         var _this = this;
-        var animations = __spreadArrays(variantLabels).reverse()
+        var animations = __spreadArrays$2(variantLabels).reverse()
             .map(function (label) { return _this.animateVariant(label, opts); });
         return Promise.all(animations);
     };
@@ -9461,7 +9721,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(props, ["onAnimationComplete"]);
+            var onAnimationComplete = props.onAnimationComplete, unmountProps = __rest$5(props, ["onAnimationComplete"]);
             controls.setProps(unmountProps);
             parentControls && parentControls.removeChild(controls);
         };
@@ -9946,7 +10206,7 @@ var PanSession = /** @class */ (function () {
                 return;
             var point = info.point;
             var timestamp = getFrameData().timestamp;
-            _this.history.push(__assign(__assign({}, point), { timestamp: timestamp }));
+            _this.history.push(__assign$7(__assign$7({}, point), { timestamp: timestamp }));
             var _a = _this.handlers, onStart = _a.onStart, onMove = _a.onMove;
             if (!isPanStarted) {
                 onStart && onStart(_this.lastMoveEvent, info);
@@ -9963,7 +10223,7 @@ var PanSession = /** @class */ (function () {
         var initialInfo = transformPoint(info, this.transformPagePoint);
         var point = initialInfo.point;
         var timestamp = getFrameData().timestamp;
-        this.history = [__assign(__assign({}, point), { timestamp: timestamp })];
+        this.history = [__assign$7(__assign$7({}, point), { timestamp: timestamp })];
         var onSessionStart = handlers.onSessionStart;
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
@@ -10291,7 +10551,7 @@ var Gestures = {
         return gestureProps.some(function (key) { return props.hasOwnProperty(key); });
     },
     Component: makeRenderlessComponent(function (_a) {
-        var innerRef = _a.innerRef, props = __rest(_a, ["innerRef"]);
+        var innerRef = _a.innerRef, props = __rest$5(_a, ["innerRef"]);
         useGestures(props, innerRef);
     }),
 };
@@ -10531,8 +10791,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(_a, ["drag", "dragDirectionLock", "dragPropagation", "dragConstraints", "dragElastic", "dragMomentum"]);
-        this.props = __assign({ 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$5(_a, ["drag", "dragDirectionLock", "dragPropagation", "dragConstraints", "dragElastic", "dragMomentum"]);
+        this.props = __assign$7({ drag: drag,
             dragDirectionLock: dragDirectionLock,
             dragPropagation: dragPropagation,
             dragConstraints: dragConstraints,
@@ -10588,7 +10848,7 @@ var ComponentDragControls = /** @class */ (function () {
             var bounceStiffness = dragElastic ? 200 : 1000000;
             var bounceDamping = dragElastic ? 40 : 10000000;
             var animationControls = _dragTransitionControls || _this.controls;
-            var inertia = __assign(__assign({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness: bounceStiffness,
+            var inertia = __assign$7(__assign$7({ 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
@@ -10669,7 +10929,7 @@ function bothAxis(handler) {
     return [handler("x"), handler("y")];
 }
 function convertPanToDrag(info, point) {
-    return __assign(__assign({}, info), { point: {
+    return __assign$7(__assign$7({}, info), { point: {
             x: point.x ? point.x.get() : 0,
             y: point.y ? point.y.get() : 0,
         } });
@@ -10780,7 +11040,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(__assign({}, props), { transformPagePoint: transformPagePoint }));
+    dragControls.updateProps(__assign$7(__assign$7({}, props), { transformPagePoint: transformPagePoint }));
     React.useEffect(function () { return groupDragControls && groupDragControls.subscribe(dragControls); }, [dragControls]);
     React.useEffect(function () { return dragControls.mount(ref.current); }, []);
 }
@@ -10789,7 +11049,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(_a, ["innerRef", "values", "controls"]);
+        var innerRef = _a.innerRef, values = _a.values, controls = _a.controls, props = __rest$5(_a, ["innerRef", "values", "controls"]);
         return useDrag(props, innerRef, values, controls);
     }),
 };
@@ -10841,14 +11101,14 @@ function getVariableValue(current, element, depth) {
  * @internal
  */
 function resolveCSSVariables(values, ref, _a, transitionEnd) {
-    var target = __rest(_a, []);
+    var target = __rest$5(_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({}, transitionEnd);
+        transitionEnd = __assign$7({}, transitionEnd);
     }
     // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
     values.forEach(function (value) {
@@ -11005,8 +11265,8 @@ var convertChangedValueTypes = function (target, values, element, elementStyler,
 };
 var checkAndConvertChangedValueTypes = function (values, ref, target, transitionEnd) {
     if (transitionEnd === void 0) { transitionEnd = {}; }
-    target = __assign({}, target);
-    transitionEnd = __assign({}, transitionEnd);
+    target = __assign$7({}, target);
+    transitionEnd = __assign$7({}, transitionEnd);
     var element = ref.current;
     var elementStyler = index(element);
     var targetPositionalKeys = Object.keys(target).filter(isPositionalKey$1);
@@ -11234,7 +11494,7 @@ function calcAxisDelta(prev, next, names) {
     return delta;
 }
 function calcDelta(prev, next) {
-    var delta = __assign(__assign({}, calcAxisDelta(prev, next, axisLabels.x)), calcAxisDelta(prev, next, axisLabels.y));
+    var delta = __assign$7(__assign$7({}, calcAxisDelta(prev, next, axisLabels.x)), calcAxisDelta(prev, next, axisLabels.y));
     return delta;
 }
 var offset = {
@@ -11278,7 +11538,7 @@ function getTransition(_a) {
     return layoutTransition || positionTransition;
 }
 var LayoutAnimation = /** @class */ (function (_super) {
-    __extends(LayoutAnimation, _super);
+    __extends$2(LayoutAnimation, _super);
     function LayoutAnimation() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -11345,11 +11605,11 @@ var LayoutAnimation = /** @class */ (function (_super) {
                 if (!delta[deltaKey])
                     return;
                 var baseTransition = typeof transitionDefinition === "boolean"
-                    ? __assign({}, getDefaultLayoutTransition(isPositionOnly)) : transitionDefinition;
+                    ? __assign$7({}, getDefaultLayoutTransition(isPositionOnly)) : transitionDefinition;
                 var value = values.get(transformKey, targetValue);
                 var velocity = value.getVelocity();
                 transition[transformKey] = baseTransition[transformKey]
-                    ? __assign({}, baseTransition[transformKey]) : __assign({}, baseTransition);
+                    ? __assign$7({}, baseTransition[transformKey]) : __assign$7({}, baseTransition);
                 if (transition[transformKey].velocity === undefined) {
                     transition[transformKey].velocity = velocity || 0;
                 }
@@ -11490,9 +11750,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(_a, ["transition", "transitionEnd"]);
+    var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest$5(_a, ["transition", "transitionEnd"]);
     return mergeTransitionEnd
-        ? __assign(__assign({}, target), transitionEnd)
+        ? __assign$7(__assign$7({}, target), transitionEnd)
         : target;
 }
 /**
@@ -11544,9 +11804,9 @@ function useAnimateProp(targetAndTransition, controls, values, defaultTransition
             }
         }
         isInitialRender.current = false;
-        prevValues.current = __assign(__assign({}, prevValues.current), finalTarget);
+        prevValues.current = __assign$7(__assign$7({}, prevValues.current), finalTarget);
         if (Object.keys(targetToAnimate).length) {
-            controls.start(__assign(__assign({}, targetToAnimate), { transition: targetAndTransition.transition || defaultTransition, transitionEnd: targetAndTransition.transitionEnd }));
+            controls.start(__assign$7(__assign$7({}, targetToAnimate), { transition: targetAndTransition.transition || defaultTransition, transitionEnd: targetAndTransition.transitionEnd }));
         }
     }, [targetAndTransition]);
 }
@@ -11720,7 +11980,7 @@ var Exit = {
         React.useEffect(function () {
             if (!isPresent) {
                 if (!isPlayingExitAnimation.current && exit) {
-                    controls.setProps(__assign(__assign({}, props), { custom: custom }));
+                    controls.setProps(__assign$7(__assign$7({}, props), { custom: custom }));
                     controls.start(exit).then(onExitComplete);
                 }
                 isPlayingExitAnimation.current = true;
@@ -11791,7 +12051,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(__assign({}, style), props.style);
+    props.style = __assign$7(__assign$7({}, style), props.style);
     return props;
 };
 var functionalityComponents = [Layout, Drag, Gestures, Exit];
@@ -11810,7 +12070,7 @@ function createDomMotionConfig(Component) {
             var staticVisualStyles = isSVG
                 ? buildSVGProps(values, style)
                 : buildHTMLProps(values, style, isStatic, !!props.drag);
-            return React.createElement(Component, __assign(__assign(__assign({}, forwardedProps), { ref: ref }), staticVisualStyles));
+            return React.createElement(Component, __assign$7(__assign$7(__assign$7({}, forwardedProps), { ref: ref }), staticVisualStyles));
         },
         /**
          * loadFunctionalityComponents gets used by the `motion` component
@@ -11841,7 +12101,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({ key: key }, props, { parentContext: context, values: values, controls: controls, innerRef: ref })));
+                    activeComponents.push(React.createElement(Component_1, __assign$7({ key: key }, props, { parentContext: context, values: values, controls: controls, innerRef: ref })));
                 }
             }
             return activeComponents;
@@ -11893,7 +12153,7 @@ var svgMotionComponents = svgElements.reduce(function (acc, Component) {
  *
  * @public
  */
-var motion = __assign(__assign({ 
+var motion = __assign$7(__assign$7({ 
     /**
      * Convert a custom React component into a `motion` component.
      *
@@ -11945,7 +12205,7 @@ var PresenceChild = function (_a) {
             return function () { return numPresenceChildren.current--; };
         };
     }, [isPresent]);
-    return (React.createElement(PresenceContext.Provider, { value: __assign(__assign({}, context), { register: register }) }, children));
+    return (React.createElement(PresenceContext.Provider, { value: __assign$7(__assign$7({}, context), { register: register }) }, children));
 };
 
 function getChildKey(child) {
@@ -12061,7 +12321,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(filteredChildren);
+    var childrenToRender = __spreadArrays$2(filteredChildren);
     // Diff the keys of the currently-present and target children to update our
     // exiting list.
     var presentKeys = presentChildren.current.map(getChildKey);
@@ -12784,8 +13044,6 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   var isMobile = themeContext.isMobile;
-  console.log("button text / theme context is", text, themeContext);
-  console.log("button text / theme values are", text, themeValues);
   var hoverStyles = "\n      outline: none;\n      background-color: ".concat(themeValues.hoverBackgroundColor, ";\n      border-color: ").concat(themeValues.hoverBorderColor, ";\n      color: ").concat(themeValues.hoverColor, ";\n      text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n      cursor: pointer;\n    ");
   var activeStyles = "\n      outline: none;\n      background-color: ".concat(themeValues.activeBackgroundColor, ";\n      border-color: ").concat(themeValues.activeBorderColor, ";\n      color: ").concat(themeValues.activeColor, ";\n      text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n      background-color: ".concat(themeValues.disabledBackgroundColor, ";\n      border-color: ").concat(themeValues.disabledBorderColor, ";\n      color: ").concat(themeValues.disabledColor, ";\n      cursor: default;\n      &:focus {\n        outline: 3px solid ").concat(themeValues.disabledBorderColor, ";\n        outline-offset: 2px;\n      }\n      ").concat(extraDisabledStyles, "\n    ");
@@ -39456,7 +39714,11 @@ var WalletName = function WalletName(_ref) {
     _ref$linkButtonExtraS = _ref.linkButtonExtraStyles,
     linkButtonExtraStyles = _ref$linkButtonExtraS === void 0 ? "" : _ref$linkButtonExtraS,
     _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$dataQa = _ref.dataQa,
+    dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+    _ref$actionTextPositi = _ref.actionTextPositionMobile,
+    actionTextPositionMobile = _ref$actionTextPositi === void 0 ? "outside" : _ref$actionTextPositi;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Module$1, {
@@ -39479,17 +39741,18 @@ var WalletName = function WalletName(_ref) {
     radius: "10",
     cx: "12",
     cy: "12"
-  })) : mainText && /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
+  })) : mainText && /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), (actionTextPositionMobile === "inside" || !isMobile) && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, text && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pXS"
   }, text), (text || actionText) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     disabled: disableAction,
     text: actionText,
+    dataQa: dataQa,
     action: action,
     variant: "smallGhost",
     extraStyles: "\n                    margin: 0;\n                    min-width: 0;\n                    span {font-size: 0.75rem;}\n                    ".concat(linkButtonExtraStyles, "\n                ")
-  })))), isMobile && /*#__PURE__*/React__default.createElement(Cluster, {
+  })))), !!isMobile && actionTextPositionMobile === "outside" && /*#__PURE__*/React__default.createElement(Cluster, {
     align: "center",
     justify: text || actionText ? "flex-end" : "flex-start",
     extraStyles: "margin-top: 0.5rem;"
@@ -46116,13 +46379,15 @@ 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,
-    iconColor = _ref.iconColor;
+    themeValues = _ref.themeValues;
   var Icon;
   if (_typeof(icon) === "object") {
     var _configIconMap$iconID;
@@ -46138,9 +46403,10 @@ var IconsModule = function IconsModule(_ref) {
     justify: "center",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    color: iconColor
+    color: themeValues.singleIconColor
   })));
 };
+var IconModule = themeComponent(IconsModule, "Icon", fallbackValues$2, "primary");
 
 var TitleModule = function TitleModule(_ref) {
   var title = _ref.title,
@@ -46165,7 +46431,22 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
-var AutopayModalModule = function AutopayModalModule(_ref) {
+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 autoPayActive = _ref.autoPayActive,
     autoPaySchedule = _ref.autoPaySchedule,
     paymentPlanSchedule = _ref.paymentPlanSchedule,
@@ -46176,6 +46457,7 @@ var AutopayModalModule = function AutopayModalModule(_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,
@@ -46209,7 +46491,6 @@ var AutopayModalModule = function AutopayModalModule(_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() {
@@ -46264,8 +46545,8 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
             tabIndex: "0",
             dataQa: "".concat(shortPlan, " On"),
             color: SEA_GREEN,
-            weight: FONT_WEIGHT_REGULAR,
-            hoverStyles: modalLinkHoverFocus,
+            weight: themeValues.fontWeight,
+            hoverStyles: themeValues.modalLinkHoverFocus,
             extraStyles: "padding-left: 0.25rem;",
             disabled: disableActions
           }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
@@ -46282,6 +46563,7 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
     modalOpen: modalOpen
   }, modalExtraProps), renderAutoPayControl());
 };
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$L);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -46640,11 +46922,6 @@ 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,
@@ -46672,8 +46949,7 @@ 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,
-    themeValues = _ref.themeValues;
+    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
   /*
     The value of obligations is always an array. It can contain:
       - A single obligation
@@ -46718,13 +46994,12 @@ var Obligation = function Obligation(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
-  }, !isMobile && /*#__PURE__*/React__default.createElement(IconsModule, {
+  }, !isMobile && /*#__PURE__*/React__default.createElement(IconModule, {
     icon: config.icon,
     iconDefault: config.iconDefault,
     configIconMap: config.iconMap,
     iconValue: config.iconValue,
-    customAttributes: customAttributes,
-    iconColor: themeValues.iconColor
+    customAttributes: customAttributes
   }), /*#__PURE__*/React__default.createElement(TitleModule, {
     title: description,
     subtitle: subDescription,
@@ -46811,13 +47086,12 @@ var Obligation = function Obligation(_ref) {
     justify: "flex-start",
     align: "center",
     nowrap: true
-  }, /*#__PURE__*/React__default.createElement(IconsModule, {
+  }, /*#__PURE__*/React__default.createElement(IconModule, {
     icon: config.icon,
     iconDefault: config.iconDefault,
     configIconMap: config.iconMap,
     iconValue: config.iconValue,
-    customAttributes: customAttributes,
-    iconColor: themeValues.iconColor
+    customAttributes: customAttributes
   }), /*#__PURE__*/React__default.createElement(InactiveTitleModule, {
     title: inactiveLookupTitle,
     subtitle: "".concat(inactiveLookupInput, ": ").concat(inactiveLookupValue),
@@ -46863,7 +47137,6 @@ 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,
@@ -47000,9 +47273,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
-var activeColor$8 = MATISSE_BLUE;
+var activeColor$9 = MATISSE_BLUE;
 var fallbackValues$M = {
-  activeColor: activeColor$8,
+  activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47225,7 +47498,11 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     buttonGroupStyles = _ref.buttonGroupStyles,
     _ref$hideAdditionalBu = _ref.hideAdditionalButton,
     hideAdditionalButton = _ref$hideAdditionalBu === void 0 ? false : _ref$hideAdditionalBu,
-    additionalButton = _ref.additionalButton;
+    additionalButton = _ref.additionalButton,
+    _ref$nextButtonTestId = _ref.nextButtonTestId,
+    nextButtonTestId = _ref$nextButtonTestId === void 0 ? null : _ref$nextButtonTestId,
+    _ref$backButtonTestId = _ref.backButtonTestId,
+    backButtonTestId = _ref$backButtonTestId === void 0 ? null : _ref$backButtonTestId;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -47233,7 +47510,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     url: cancelURL,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: cancelText,
+    dataQa: backButtonTestId || cancelText,
     "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
     role: "link"
   }) : backButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -47250,7 +47527,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     text: redirectText,
     variant: forwardButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: redirectText,
+    dataQa: nextButtonTestId || redirectText,
     disabled: isForwardButtonDisabled,
     "aria-labelledby": "".concat(kebabCaseString(redirectText), "-button"),
     role: forwardButtonAriaRole
@@ -47260,7 +47537,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     action: forwardButtonAction,
     isLoading: forwardButtonLoading,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: forwardButtonText,
+    dataQa: nextButtonTestId || forwardButtonText,
     disabled: isForwardButtonDisabled,
     "aria-labelledby": "".concat(kebabCaseString(forwardButtonText), "-button"),
     role: forwardButtonAriaRole
@@ -47665,7 +47942,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
 };
 var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$N, "default");
 
-var linkColor$4 = {
+var linkColor$5 = {
   "default": "#3176AA"
 };
 var fontSize$a = {
@@ -47674,21 +47951,21 @@ var fontSize$a = {
 var lineHeight$4 = {
   "default": "1.5rem"
 };
-var fontWeight$6 = {
+var fontWeight$7 = {
   "default": FONT_WEIGHT_REGULAR
 };
-var modalLinkHoverFocus = {
+var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
 var fallbackValues$O = {
-  linkColor: linkColor$4,
+  linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
-  fontWeight: fontWeight$6,
-  modalLinkHoverFocus: modalLinkHoverFocus,
+  fontWeight: fontWeight$7,
+  modalLinkHoverFocus: modalLinkHoverFocus$1,
   linkTextDecoration: linkTextDecoration
 };
 
@@ -47753,7 +48030,7 @@ var backgroundColor$d = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
-var linkColor$5 = {
+var linkColor$6 = {
   "default": "#3176AA",
   footer: "#ffffff"
 };
@@ -47769,12 +48046,12 @@ var lineHeight$5 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$7 = {
+var fontWeight$8 = {
   "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$1 = {
+var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
@@ -47784,12 +48061,12 @@ var modalLinkTextDecoration = {
 };
 var fallbackValues$P = {
   backgroundColor: backgroundColor$d,
-  linkColor: linkColor$5,
+  linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
   lineHeight: lineHeight$5,
-  fontWeight: fontWeight$7,
-  modalLinkHoverFocus: modalLinkHoverFocus$1,
+  fontWeight: fontWeight$8,
+  modalLinkHoverFocus: modalLinkHoverFocus$2,
   modalLinkTextDecoration: modalLinkTextDecoration
 };
 
@@ -48784,7 +49061,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$E = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+var _excluded$E = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -48832,6 +49109,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$isSectionRequire = _ref.isSectionRequired,
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
+    borderOverride = _ref.borderOverride,
     rest = _objectWithoutProperties(_ref, _excluded$E);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -48864,7 +49142,7 @@ var RadioSection = function RadioSection(_ref) {
   };
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "1px",
-    border: "1px solid ".concat(themeValues.borderColor),
+    border: borderOverride || "1px solid ".concat(themeValues.borderColor),
     borderRadius: "4px",
     extraStyles: containerStyles,
     role: "radiogroup",
@@ -49037,9 +49315,16 @@ 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 _useContext = React.useContext(styled.ThemeContext),
-    isMobile = _useContext.isMobile;
+  var themeContext = React.useContext(styled.ThemeContext);
+  var themeValues = createThemeValues(themeContext, fallbackValues$R, "ResetConfirmationForm");
+  var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     width: isMobile ? "auto" : "576px",
@@ -49047,7 +49332,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: GRECIAN_GREY,
+    background: themeValues.bannerBackgroundColor,
     minWidth: "100%",
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -49151,9 +49436,16 @@ ResetPasswordForm.reducer = reducer$a;
 ResetPasswordForm.mapStateToProps = mapStateToProps$b;
 ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
-var ResetConfirmationForm$2 = function ResetConfirmationForm() {
-  var _useContext = React.useContext(styled.ThemeContext),
-    isMobile = _useContext.isMobile;
+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;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     width: isMobile ? "auto" : "576px",
@@ -49161,7 +49453,7 @@ var ResetConfirmationForm$2 = 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: GRECIAN_GREY,
+    background: themeValues.bannerBackgroundColor,
     minWidth: "100%",
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -49196,12 +49488,12 @@ var ResetConfirmationForm$2 = function ResetConfirmationForm() {
     linkExtraStyles: "width: 100%;"
   }))))));
 };
-var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
+var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$R = {
+var fallbackValues$T = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49269,12 +49561,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$R);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$T);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$S = {
+var fallbackValues$U = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49329,7 +49621,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$S);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$U);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49424,13 +49716,13 @@ var ToastNotification = function ToastNotification(_ref) {
   }, message))), /*#__PURE__*/React__default.createElement(IconQuitLarge, null)));
 };
 
-var fontWeight$8 = "600";
+var fontWeight$9 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$T = {
-  fontWeight: fontWeight$8,
+var fallbackValues$V = {
+  fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
   headerBackgroundColor: headerBackgroundColor$1,
@@ -49474,7 +49766,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$T));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$V));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49534,7 +49826,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$U = {
+var fallbackValues$W = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -49601,15 +49893,15 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$U);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$W);
 
-var hoverColor$5 = "#116285";
-var activeColor$9 = "#0E506D";
+var hoverColor$6 = "#116285";
+var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$V = {
-  hoverColor: hoverColor$5,
-  activeColor: activeColor$9,
+var fallbackValues$X = {
+  hoverColor: hoverColor$6,
+  activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
   backgroundColor: backgroundColor$e
 };
@@ -49743,10 +50035,10 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$V);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$X);
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$W = {
+var fallbackValues$Y = {
   pageBackground: pageBackground
 };
 
@@ -49794,7 +50086,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$W));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$Y));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -49837,7 +50129,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$W));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$Y));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -49883,7 +50175,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$W));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$Y));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -49936,7 +50228,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$W));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$Y));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50006,7 +50298,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$W));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$Y));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -50160,7 +50452,7 @@ exports.NavTabs = NavTabs;
 exports.NoCustomerResultsIcon = NoCustomerResultsIcon;
 exports.NoPaymentResultsIcon = NoPaymentResultsIcon;
 exports.NotFoundIcon = NotFoundIcon;
-exports.Obligation = Obligation$1;
+exports.Obligation = Obligation;
 exports.ObligationIcons = iconsMap;
 exports.Pagination = Pagination$1;
 exports.Paragraph = Paragraph$1;
@@ -50204,7 +50496,7 @@ exports.RejectedVelocityIcon = RejectedVelocityIcon;
 exports.ResetConfirmationForm = ResetConfirmationForm$1;
 exports.ResetPasswordForm = ResetPasswordForm;
 exports.ResetPasswordIcon = ResetPasswordIcon;
-exports.ResetPasswordSuccess = ResetPasswordSuccess;
+exports.ResetPasswordSuccess = ResetPasswordSuccess$1;
 exports.RevenueManagementImage = RevenueManagementImage;
 exports.RoutingNumberImage = RoutingNumberImage;
 exports.SearchIcon = SearchIcon;