@thecb/components 10.12.5-beta.0 → 10.12.6-beta.0

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) {
@@ -7093,6 +7255,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;
@@ -7155,18 +7415,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 = [];
@@ -7219,18 +7479,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);
@@ -7443,7 +7703,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 });
@@ -7675,7 +7935,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) {
@@ -7685,7 +7945,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);
     });
 };
@@ -7887,7 +8147,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);
@@ -8329,7 +8589,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 = {}; }
@@ -8383,7 +8643,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));
@@ -8436,7 +8696,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));
 };
 
 /**
@@ -8532,9 +8792,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;
         }
@@ -8548,7 +8808,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) {
@@ -8558,7 +8818,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 ||
@@ -8575,12 +8835,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);
     }
 };
@@ -8597,12 +8857,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) {
@@ -8620,10 +8880,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;
         }
@@ -8769,7 +9029,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;
@@ -8859,7 +9119,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 };
     };
     /**
@@ -8950,7 +9210,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) {
@@ -9021,7 +9281,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
@@ -9032,7 +9292,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);
     };
@@ -9476,7 +9736,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);
         };
@@ -9961,7 +10221,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);
@@ -9978,7 +10238,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));
@@ -10306,7 +10566,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);
     }),
 };
@@ -10546,8 +10806,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,
@@ -10603,7 +10863,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
@@ -10684,7 +10944,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,
         } });
@@ -10795,7 +11055,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); }, []);
 }
@@ -10804,7 +11064,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);
     }),
 };
@@ -10856,14 +11116,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) {
@@ -11020,8 +11280,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);
@@ -11249,7 +11509,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 = {
@@ -11293,7 +11553,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;
     }
@@ -11360,11 +11620,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;
                 }
@@ -11505,9 +11765,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;
 }
 /**
@@ -11559,9 +11819,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]);
 }
@@ -11735,7 +11995,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;
@@ -11806,7 +12066,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];
@@ -11825,7 +12085,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
@@ -11856,7 +12116,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;
@@ -11908,7 +12168,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.
      *
@@ -11960,7 +12220,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) {
@@ -12076,7 +12336,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);
@@ -12355,7 +12615,7 @@ var general$1 = /*#__PURE__*/Object.freeze({
   CASH_METHOD: CASH_METHOD
 });
 
-var URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;
+var URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))((\d{1,3}\.){3}\d{1,3}|([a-zA-Z0-9\-]+\.)+[a-z]{2,13})[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;
 
 var regex_constants = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -18597,6 +18857,52 @@ var AgencyIcon = function AgencyIcon(_ref) {
   })));
 };
 
+var _excluded$m = ["width", "height", "color"];
+var PersonIcon = function PersonIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "20" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "21" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$m);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.25 4.8125H4.75C4.50838 4.8125 4.3125 5.00838 4.3125 5.25V15.75C4.3125 15.9916 4.50838 16.1875 4.75 16.1875H5.625V14.7778C5.625 12.8985 7.02411 11.375 8.75 11.375H11.25C12.9759 11.375 14.375 12.8985 14.375 14.7778V16.1875H15.25C15.4916 16.1875 15.6875 15.9916 15.6875 15.75V5.25C15.6875 5.00838 15.4916 4.8125 15.25 4.8125ZM4.75 17.5H5.625H14.375H15.25C16.2165 17.5 17 16.7165 17 15.75V5.25C17 4.2835 16.2165 3.5 15.25 3.5H4.75C3.7835 3.5 3 4.2835 3 5.25V15.75C3 16.7165 3.7835 17.5 4.75 17.5ZM10 10.5C11.2081 10.5 12.1875 9.52062 12.1875 8.3125C12.1875 7.10438 11.2081 6.125 10 6.125C8.79188 6.125 7.8125 7.10438 7.8125 8.3125C7.8125 9.52062 8.79188 10.5 10 10.5Z",
+    fill: color
+  }));
+};
+
+var _excluded$n = ["width", "height", "color"];
+var PaymentStatusIcon = function PaymentStatusIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "20" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "21" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$n);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.875 4.375C10.875 3.89175 11.2668 3.5 11.75 3.5H16.125C16.6082 3.5 17 3.89175 17 4.375V8.75C17 9.23325 16.6082 9.625 16.125 9.625H15.25V15.75C15.25 16.7165 14.4665 17.5 13.5 17.5H4.75C3.7835 17.5 3 16.7165 3 15.75V7C3 6.0335 3.7835 5.25 4.75 5.25H10.875V4.375ZM10.875 8.75V6.5625H4.75C4.50838 6.5625 4.3125 6.75838 4.3125 7V15.75C4.3125 15.9916 4.50838 16.1875 4.75 16.1875H13.5C13.7416 16.1875 13.9375 15.9916 13.9375 15.75V9.625H11.75C11.2668 9.625 10.875 9.23325 10.875 8.75ZM13.9375 7.875C14.6624 7.875 15.25 7.28737 15.25 6.5625C15.25 5.83763 14.6624 5.25 13.9375 5.25C13.2126 5.25 12.625 5.83763 12.625 6.5625C12.625 7.28737 13.2126 7.875 13.9375 7.875Z",
+    fill: color
+  }));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -19250,7 +19556,7 @@ var mobileFallbackValues = {
 };
 var MOBILE_BREAKPOINT = 768;
 
-var _excluded$m = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$o = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Title elements
@@ -19297,7 +19603,7 @@ var Title = function Title(_ref) {
     as = _ref$as === void 0 ? "h1" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$m);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React__default.createElement(TitleText, _extends({
     variant: variant,
     as: as,
@@ -20725,12 +21031,12 @@ var fallbackValues$8 = {
   linkColor: linkColor
 };
 
-var _excluded$n = ["variant", "themeValues", "children"];
+var _excluded$p = ["variant", "themeValues", "children"];
 var BoxWithShadow = function BoxWithShadow(_ref) {
   var variant = _ref.variant,
     themeValues = _ref.themeValues,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var shadowRegistry = {
     baseStandard: "0px 3px 7px 2px ".concat(rgba$1(BLACK, 0.1), ", 0px 1px 2px 1px ").concat(rgba$1(BLACK, 0.1), ";"),
     baseHover: "0px 1px 7px 0px ".concat(rgba$1(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba$1(BLACK, 0.2), ", 0px 7px 12px 0px ").concat(rgba$1(BLACK, 0.2), ";"),
@@ -20790,7 +21096,7 @@ var fallbackValues$a = {
   externalLinkColor: externalLinkColor
 };
 
-var _excluded$o = ["hoverColor", "activeColor", "extrastyles"];
+var _excluded$q = ["hoverColor", "activeColor", "extrastyles"];
 var ROYAL_BLUE$1 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$3 = LINK_TEXT_DECORATION;
 
@@ -20804,7 +21110,7 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
   var hoverColor = _ref.hoverColor,
     activeColor = _ref.activeColor,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement("a", _extends({}, props, {
     ref: ref
   }));
@@ -20879,7 +21185,7 @@ var ExternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 });
 
-var _excluded$p = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
+var _excluded$r = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
 var ROYAL_BLUE$2 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$4 = LINK_TEXT_DECORATION;
 
@@ -20895,7 +21201,7 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
     active = _ref.active,
     color = _ref.color,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, _extends({}, props, {
     ref: ref
   }));
@@ -22578,7 +22884,7 @@ _curry2(function test(pattern, str) {
   return _cloneRegExp(pattern).test(str);
 });
 
-var _excluded$q = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
+var _excluded$s = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
     url = _ref$url === void 0 ? "/" : _ref$url,
@@ -22593,7 +22899,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     _ref$newTab = _ref.newTab,
     newTab = _ref$newTab === void 0 ? false : _ref$newTab,
     dataQa = _ref.dataQa,
-    otherProps = _objectWithoutProperties(_ref, _excluded$q);
+    otherProps = _objectWithoutProperties(_ref, _excluded$s);
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
       url = _ref2.url,
@@ -22681,7 +22987,7 @@ var ParagraphText = styled__default.p.withConfig({
   return extraStyles;
 });
 
-var _excluded$r = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
+var _excluded$t = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
 var Paragraph = function Paragraph(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -22695,7 +23001,7 @@ var Paragraph = function Paragraph(_ref) {
     dataQa = _ref.dataQa,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
     weight: weight,
     color: color,
@@ -22899,7 +23205,7 @@ var errorStyles = {
   "default": "border: 1px solid ".concat(RED, ";")
 };
 var focusedStyles = {
-  "default": "box-shadow: 0 0 5px 0 ".concat(MATISSE_BLUE, ";")
+  "default": "\n    outline: 3px solid ".concat(ROYAL_BLUE, "; \n    outline-offset: 3px;\n  ")
 };
 var disabledCheckedStyles = {
   "default": "\n  background: #6d717e;\n  border: 1px solid #6d717e;\n"
@@ -22937,7 +23243,7 @@ var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
 
-var _excluded$s = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles"];
+var _excluded$u = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
 var CheckboxContainer = styled__default.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22945,7 +23251,7 @@ var CheckboxContainer = styled__default.span.withConfig({
 var CheckboxLabelContainer = styled__default.label.withConfig({
   displayName: "Checkbox__CheckboxLabelContainer",
   componentId: "sc-36kqbv-1"
-})(["display:flex;align-items:center;column-gap:1rem;"]);
+})(["display:flex;align-items:center;column-gap:1rem;cursor:pointer;"]);
 var CheckboxIcon = styled__default.svg.withConfig({
   displayName: "Checkbox__CheckboxIcon",
   componentId: "sc-36kqbv-2"
@@ -23004,7 +23310,10 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     _ref5$dataQa = _ref5.dataQa,
     dataQa = _ref5$dataQa === void 0 ? null : _ref5$dataQa,
     checkboxExtraStyles = _ref5.checkboxExtraStyles,
-    rest = _objectWithoutProperties(_ref5, _excluded$s);
+    _ref5$hasIconOverride = _ref5.hasIconOverride,
+    hasIconOverride = _ref5$hasIconOverride === void 0 ? false : _ref5$hasIconOverride,
+    Icon = _ref5.icon,
+    rest = _objectWithoutProperties(_ref5, _excluded$u);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -23032,7 +23341,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     },
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
-    extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
+    extraStyles: "\n          :focus {\n            outline: 0;\n          }\n          ".concat(extraStyles, "; \n          margin: ").concat(checkboxMargin, ";\n        ")
   }, rest), /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
     "data-qa": dataQa
   }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
@@ -23062,7 +23371,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
     focusedStyles: themeValues.focusedStyles,
     checkboxExtraStyles: checkboxExtraStyles
-  }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
+  }, hasIconOverride ? /*#__PURE__*/React__default.createElement(Icon, null) : /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
     disabledCheckColor: themeValues.disabledCheckColor,
@@ -23360,7 +23669,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$t = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$v = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
     extraStyles = _ref.extraStyles,
@@ -23369,7 +23678,7 @@ var TableRow = function TableRow(_ref) {
     hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
     onClick = _ref.onClick,
     themeValues = _ref.themeValues,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
     hoverEffect: hoverEffect,
@@ -26203,7 +26512,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$u = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$w = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Detail elements
@@ -26253,7 +26562,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -26991,7 +27300,7 @@ var fallbackValues$n = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$v = ["showErrors", "themeValues"],
+var _excluded$x = ["showErrors", "themeValues"],
   _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
@@ -27026,7 +27335,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$v);
+    props = _objectWithoutProperties(_ref8, _excluded$x);
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -27231,7 +27540,7 @@ var FormInput = function FormInput(_ref15) {
 };
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$n, "default");
 
-var _excluded$w = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$y = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -27240,7 +27549,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React__default.createElement(Switcher, {
@@ -27251,24 +27560,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$x = ["childGap", "bottomItem", "children"];
+var _excluded$z = ["childGap", "bottomItem", "children"];
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
     bottomItem = _ref.bottomItem,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$y = ["themeValues", "children"];
+var _excluded$A = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -27578,7 +27887,7 @@ var fallbackValues$r = {
   fontSize: fontSize$8
 };
 
-var _excluded$z = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$B = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -27597,7 +27906,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -27798,11 +28107,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
 };
 
-var _excluded$A = ["version"];
+var _excluded$C = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
@@ -27947,7 +28256,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$B = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$D = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -27962,7 +28271,7 @@ var NavFooter = function NavFooter(_ref) {
     footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
     isMobile = _ref.isMobile,
     footerWidth = _ref.footerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -27993,7 +28302,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$C = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$E = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -28002,7 +28311,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -39631,8 +39940,10 @@ var CardText = function CardText(_ref) {
     themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: padding
-  }, /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    overflow: true
   }, titleText && /*#__PURE__*/React__default.createElement(Title$1, {
     as: titleAs,
     variant: titleVariant,
@@ -39647,7 +39958,7 @@ var CardText = function CardText(_ref) {
     role: "button",
     tabIndex: 0,
     "aria-label": "Close Card: ".concat(titleText),
-    extraStyles: "position: absolute; top: 0.5rem; right: 0.5rem; cursor: pointer;"
+    extraStyles: "cursor: pointer;"
   }, /*#__PURE__*/React__default.createElement(IconQuitLarge, null))), /*#__PURE__*/React__default.createElement(Paragraph$1, {
     as: textAs,
     color: themeValues.textColor
@@ -46420,11 +46731,11 @@ var Modal$2 = function Modal(_ref) {
 };
 var ModalControlV2 = withWindowSize(Modal$2);
 
-var _excluded$D = ["version"];
+var _excluded$F = ["version"];
 var Modal$3 = function Modal(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
   return /*#__PURE__*/React__default.createElement(ModalControl, rest);
 };
@@ -47726,7 +48037,7 @@ var fallbackValues$P = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$E = ["amount"],
+var _excluded$G = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -47969,7 +48280,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$E);
+      rest = _objectWithoutProperties(_ref5, _excluded$G);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -48406,11 +48717,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$F = ["version"];
+var _excluded$H = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -49218,7 +49529,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$G = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
+var _excluded$I = ["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' 
@@ -49267,7 +49578,7 @@ var RadioSection = function RadioSection(_ref) {
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
     borderOverride = _ref.borderOverride,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -49814,7 +50125,7 @@ var Timeout = function Timeout(_ref) {
 };
 var Timeout$1 = withWindowSize(Timeout);
 
-var _excluded$H = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
+var _excluded$J = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
@@ -49843,7 +50154,7 @@ var ToastNotification = function ToastNotification(_ref) {
     screenReaderMessage = _ref.screenReaderMessage,
     _ref$showScreenReader = _ref.showScreenReaderMessage,
     showScreenReaderMessage = _ref$showScreenReader === void 0 ? true : _ref$showScreenReader,
-    rest = _objectWithoutProperties(_ref, _excluded$H);
+    rest = _objectWithoutProperties(_ref, _excluded$J);
   var screenReaderMessageRef = React.useRef();
   var LIVEREGION_TRANSITION_DELAY = 1000;
   React.useEffect(function () {
@@ -50026,7 +50337,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$I = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$K = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -50042,7 +50353,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$I);
+    rest = _objectWithoutProperties(_ref, _excluded$K);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -50215,20 +50526,21 @@ var PopupMenu = function PopupMenu(_ref) {
 };
 var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Z);
 
-var primaryColor$1 = INFO_BLUE;
+var primaryColor$1 = WHITE;
+var primaryHoverColor = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
+var secondaryHoverColor = "#115D7E";
 var fallbackValues$_ = {
   primaryColor: primaryColor$1,
-  secondaryColor: secondaryColor
+  primaryHoverColor: primaryHoverColor,
+  secondaryColor: secondaryColor,
+  secondaryHoverColor: secondaryHoverColor
 };
 
 var StyledFilterContainer = styled__default(Box).withConfig({
   displayName: "MultipleSelectFilterstyled__StyledFilterContainer",
   componentId: "sc-126xgc2-0"
-})(["position:relative;box-sizing:border-box;padding:0;", ""], function (_ref) {
-  var extraStyles = _ref.extraStyles;
-  return extraStyles;
-});
+})(["position:relative;overflow:visible;box-sizing:border-box;padding:0;"]);
 var FilterContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement(StyledFilterContainer, _extends({
     ref: ref
@@ -50237,7 +50549,7 @@ var FilterContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var StyledFilterDropdown = styled__default(Box).withConfig({
   displayName: "MultipleSelectFilterstyled__StyledFilterDropdown",
   componentId: "sc-126xgc2-1"
-})(["position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background-color:white;z-index:1000;border-radius:0.25rem;box-shadow:0px 1px 0px 0px rgba(41,42,51,0.1),0px 2px 4px 0px rgba(41,42,51,0.2),0px 1px 2px 0px rgba(41,42,51,0.1);padding:0;max-width:18.625rem;"]);
+})(["position:absolute;top:calc(100% + 0.5rem);left:0;width:18.4rem;background-color:white;z-index:1000;border-radius:0.25rem;box-shadow:0px 1px 0px 0px rgba(41,42,51,0.1),0px 2px 4px 0px rgba(41,42,51,0.2),0px 1px 2px 0px rgba(41,42,51,0.1);padding:0;max-width:18.625rem;"]);
 var FilterDropdownContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement(StyledFilterDropdown, _extends({
     ref: ref
@@ -50246,12 +50558,16 @@ var FilterDropdownContainer = /*#__PURE__*/React.forwardRef(function (props, ref
 var FilterButton = styled__default(ButtonWithAction).withConfig({
   displayName: "MultipleSelectFilterstyled__FilterButton",
   componentId: "sc-126xgc2-2"
-})(["min-width:auto;min-height:2.3125rem;margin:0;padding:0.5rem;border-radius:0.25rem;box-shadow:0px 1px 2px 0px rgba(41,42,51,0.1);", " ", ""], function (_ref2) {
-  var textColor = _ref2.textColor;
-  return "\n    color: ".concat(textColor, ";\n  ");
-}, function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    :hover,\n    :active,\n    :focus {\n      background-color: ").concat(backgroundColor, ";\n    }\n  ");
+})(["min-width:auto;min-height:2.3125rem;margin:0;padding:0.5rem;border-radius:0.25rem;box-shadow:0px 1px 2px 0px rgba(41,42,51,0.1);", " ", ""], function (_ref) {
+  var opened = _ref.opened,
+    textColor = _ref.textColor,
+    textHoverColor = _ref.textHoverColor;
+  return "\n    color: ".concat(opened ? textHoverColor : textColor, ";\n    :hover,\n    :active,\n    :focus {\n      color: ").concat(textHoverColor, ";\n      > * {\n        color: ").concat(textHoverColor, ";\n      }\n    }\n  ");
+}, function (_ref2) {
+  var opened = _ref2.opened,
+    backgroundColor = _ref2.backgroundColor,
+    backgroundHoverColor = _ref2.backgroundHoverColor;
+  return "\n    background-color: ".concat(opened ? backgroundHoverColor : backgroundColor, ";  \n    :hover,\n    :active,\n    :focus {\n      background-color: ").concat(backgroundHoverColor, ";\n    }\n  ");
 });
 var StyledFilterButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement(FilterButton, _extends({
@@ -50262,7 +50578,8 @@ var StyledFilterButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var ActionLinkButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     text = _ref.text,
-    dataQa = _ref.dataQa;
+    dataQa = _ref.dataQa,
+    ariaLabel = _ref.ariaLabel;
   return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     ref: ref,
     action: action,
@@ -50270,11 +50587,12 @@ var ActionLinkButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     extraStyles: "\n        padding: 0.2rem; \n        margin: 0.5rem; \n        min-height: auto; \n        min-width: auto;\n      ",
     textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, ";"),
     text: text,
-    dataQa: dataQa
+    dataQa: dataQa,
+    "aria-label": ariaLabel
   });
 });
 
-var _excluded$J = ["width", "height", "color"];
+var _excluded$L = ["width", "height", "color"];
 var DropdownIconV2 = function DropdownIconV2(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -50282,7 +50600,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
     height = _ref$height === void 0 ? "19" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     width: width,
     height: height,
@@ -50328,7 +50646,9 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     action = _ref$action === void 0 ? noop$1 : _ref$action,
     opened = _ref.opened,
     backgroundColor = _ref.backgroundColor,
-    contentColor = _ref.contentColor,
+    backgroundHoverColor = _ref.backgroundHoverColor,
+    textColor = _ref.textColor,
+    textHoverColor = _ref.textHoverColor,
     name = _ref.name,
     filterDropdownID = _ref.filterDropdownID,
     _ref$hasIcon = _ref.hasIcon,
@@ -50336,7 +50656,10 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     Icon = _ref.icon,
     truncateBtnTextWidth = _ref.truncateBtnTextWidth,
     filterLabel = _ref.filterLabel,
-    selectedOptions = _ref.selectedOptions;
+    selectedOptions = _ref.selectedOptions,
+    extraStyles = _ref.extraStyles;
+  var btnTextFilterDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? "".concat(filterLabel ? "".concat(filterLabel, ": ") : "").concat(selectedOptions[0].name) : "".concat(filterLabel ? filterLabel : "");
+  var btnTextItemsDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? ", +".concat((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - 1, " More") : "";
   return /*#__PURE__*/React__default.createElement(StyledFilterButton, {
     ref: ref,
     variant: "tertiary",
@@ -50345,7 +50668,13 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-expanded": opened,
     "aria-controls": filterDropdownID,
     backgroundColor: backgroundColor,
+    backgroundHoverColor: backgroundHoverColor,
+    textColor: textColor,
+    textHoverColor: textHoverColor,
+    opened: opened,
     dataQa: "".concat(name, "-filter-button"),
+    extraStyles: extraStyles,
+    "aria-label": "".concat(filterLabel, " Filter: ").concat(btnTextFilterDescription, " ").concat(btnTextItemsDescription),
     contentOverride: true
   }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React__default.createElement(Center, {
     as: "span",
@@ -50355,7 +50684,7 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     },
     intrinsic: true
   }, hasIcon && /*#__PURE__*/React__default.createElement(Icon, {
-    color: contentColor
+    color: opened ? textHoverColor : textColor
   }), /*#__PURE__*/React__default.createElement(Center, {
     as: "span",
     style: {
@@ -50366,20 +50695,22 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: contentColor,
+    color: opened ? textHoverColor : textColor,
     extraStyles: "\n                  white-space: nowrap;\n                  overflow: hidden;\n                  text-overflow: ellipsis;\n                  ".concat(truncateBtnTextWidth && "max-width:" + truncateBtnTextWidth, "\n                ")
-  }, selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? "".concat(filterLabel ? filterLabel + ": " : "").concat(selectedOptions[0].name) : "".concat(filterLabel ? filterLabel : "")), /*#__PURE__*/React__default.createElement(Text$1, {
-    color: contentColor,
+  }, btnTextFilterDescription), /*#__PURE__*/React__default.createElement(Text$1, {
+    color: opened ? textHoverColor : textColor,
     variant: "pS"
-  }, selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? ", +".concat((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - 1, " More") : "")), /*#__PURE__*/React__default.createElement(DropdownIconV2, {
-    color: contentColor
+  }, btnTextItemsDescription)), /*#__PURE__*/React__default.createElement(DropdownIconV2, {
+    color: opened ? textHoverColor : textColor
   })));
 });
 
 var FilterDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     ariaOwns = _ref.ariaOwns,
+    ariaControls = _ref.ariaControls,
     opened = _ref.opened,
+    extraStyles = _ref.extraStyles,
     children = _ref.children;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, opened && /*#__PURE__*/React__default.createElement(FilterDropdownContainer, {
     ref: ref,
@@ -50387,7 +50718,9 @@ var FilterDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     role: "combobox",
     "aria-expanded": opened,
     "aria-haspopup": "listbox",
-    "aria-owns": ariaOwns
+    "aria-owns": ariaOwns,
+    "aria-controls": ariaControls,
+    extraStyles: extraStyles
   }, children));
 });
 
@@ -50408,10 +50741,54 @@ var SearchBox = function SearchBox(_ref) {
     fieldActions: actions.fields.searchTerm,
     placeholder: placeholder,
     disabled: disabled,
-    extraStyles: "\n              height: 2.875rem;\n              border: 0; \n              border-radius: 0;\n              padding: 0.45rem;\n              font-size: 0.875rem;\n              border-bottom: 1px solid ".concat(GHOST_GREY, ";\n           ")
+    extraStyles: "\n            height: 2.875rem;\n            border: 0; \n            border-radius: 0;\n            padding: 0.45rem;\n            font-size: 0.875rem;\n            border-bottom: 1px solid ".concat(GHOST_GREY, ";\n            :focus {\n              outline-offset: -3px;\n            }\n          ")
   }));
 };
 
+var _excluded$M = ["width", "height", "color"];
+var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "18" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "18" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#FEFEFE" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$M);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.7503 5.35354C13.555 5.15828 13.2385 5.15828 13.0432 5.35354L7.52373 10.873L5.52808 8.87735C5.33282 8.68209 5.01624 8.68209 4.82097 8.87735L4.35348 9.34484C4.15822 9.54011 4.15822 9.85669 4.35348 10.052L6.70268 12.4012L7.17018 12.8687C7.36544 13.0639 7.68203 13.0639 7.87729 12.8687L8.34478 12.4012L14.2178 6.52814C14.4131 6.33288 14.4131 6.0163 14.2178 5.82104L13.7503 5.35354Z",
+    fill: "#FEFEFE"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_3361_1486",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "4",
+    y: "5",
+    width: "11",
+    height: "9"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.7503 5.35354C13.555 5.15828 13.2385 5.15828 13.0432 5.35354L7.52373 10.873L5.52808 8.87735C5.33282 8.68209 5.01624 8.68209 4.82097 8.87735L4.35348 9.34484C4.15822 9.54011 4.15822 9.85669 4.35348 10.052L6.70268 12.4012L7.17018 12.8687C7.36544 13.0639 7.68203 13.0639 7.87729 12.8687L8.34478 12.4012L14.2178 6.52814C14.4131 6.33288 14.4131 6.0163 14.2178 5.82104L13.7503 5.35354Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_3361_1486)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: width,
+    height: height,
+    fill: color
+  })));
+};
+
 var FilterableListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var index = _ref.index,
     option = _ref.option,
@@ -50420,28 +50797,31 @@ var FilterableListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref.disabled,
     tabIndex = _ref.tabIndex,
     name = _ref.name,
+    showDivider = _ref.showDivider,
+    extraStyles = _ref.extraStyles,
     themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
+  var dividerStyles = "\n    ::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      display: block;\n      height: 1px;\n      background-color: ".concat(GHOST_GREY, ";\n      bottom: -0.5rem;\n      left: 0;\n    }");
+  return /*#__PURE__*/React__default.createElement(Checkbox$1, {
     key: index,
-    extraStyles: "\n        :hover,\n        :active,\n        :focus {\n        background-color: ".concat(themeValues.primaryColor, ";\n        }\n    ")
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     ref: ref,
     title: option.name,
     name: option.name,
+    role: "option",
+    "aria-selected": checked,
+    tabIndex: tabIndex,
+    dataQa: "".concat(name, "-option-").concat(index),
     checked: checked,
     onChange: function onChange() {
       return selectOption(option);
     },
     textExtraStyles: "font-size: 0.875rem; margin: 0;",
     disabled: disabled,
-    extraStyles: "\n            padding: 0.075rem 0.325rem; \n            margin: 0;\n            :hover,\n            :active,\n            :focus {\n                background-color: ".concat(themeValues.primaryColor, ";\n            }\n        "),
-    checkboxMargin: "0.3rem",
-    role: "option",
-    checkboxExtraStyles: "\n            width: 1.375rem; \n            height: 1.375rem;\n            ".concat(checked && !disabled ? "background: " + themeValues.secondaryColor + ";" : "", "\n         "),
-    tabIndex: tabIndex,
-    dataQa: "".concat(name, "-option-").concat(index)
-  }));
+    extraStyles: "\n          padding: 0.375rem 0.625rem; \n          margin: 0;\n          :hover,\n          :active,\n          :focus {\n            background-color: ".concat(themeValues.primaryHoverColor, ";\n          }\n          ").concat(showDivider && dividerStyles, "\n          ").concat(extraStyles, "\n        "),
+    checkboxMargin: showDivider ? "0 0 1rem" : "0",
+    hasIconOverride: true,
+    icon: CheckboxCheckmarkIcon,
+    checkboxExtraStyles: "\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          height: 20px;\n          width: 20px;\n          ".concat(checked && !disabled ? "background: " + themeValues.secondaryColor + ";" : "", "\n       ")
+  });
 });
 
 var filterItemsList = function filterItemsList(list, searchTerm) {
@@ -50606,14 +50986,12 @@ var FilterableList = function FilterableList(_ref) {
     handleKeyDown = _useKeyboardNavigatio.handleKeyDown;
   return /*#__PURE__*/React__default.createElement(Box, {
     id: id,
-    role: "listbox",
-    padding: "0",
-    extraStyles: "\n        overflow-y: auto;\n        max-height: 250px;\n        display: flex;\n        flex-flow: column;\n      ",
-    onKeyDown: handleKeyDown
-  }, (sortedAppliedOptions === null || sortedAppliedOptions === void 0 ? void 0 : sortedAppliedOptions.length) > 0 && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: sortedOptions.length > 0 && "border-bottom: 1px solid ".concat(GHOST_GREY)
-  }, sortedAppliedOptions.map(function (option, index) {
+    role: "listbox",
+    "aria-label": "Filter options container",
+    onKeyDown: handleKeyDown,
+    extraStyles: "\n        overflow-y: auto;\n        max-height: 250px;\n        display: flex;\n        flex-flow: column;\n        padding-bottom: 0.5rem;\n    "
+  }, (sortedAppliedOptions === null || sortedAppliedOptions === void 0 ? void 0 : sortedAppliedOptions.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, sortedAppliedOptions.map(function (option, index) {
     var checked = isChecked(option, selectedOptions);
     var tabIndex = index === focusedIndex || index === 0 && focusedIndex === -1 ? "0" : "-1";
     return /*#__PURE__*/React__default.createElement(FilterableListItem, {
@@ -50627,9 +51005,10 @@ var FilterableList = function FilterableList(_ref) {
       selectOption: handleSelectOption,
       tabIndex: tabIndex,
       name: name,
-      themeValues: themeValues
+      themeValues: themeValues,
+      showDivider: sortedOptions.length > 0 && index === sortedAppliedOptions.length - 1
     });
-  })), sortedOptions.map(function (option, index) {
+  })), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, sortedOptions.map(function (option, index) {
     var checked = isChecked(option, selectedOptions);
     var isDisabled = isMaxSelectionReached(maxSelections, selectedOptions) && !checked;
     var indexOffset = sortedAppliedOptions !== null && sortedAppliedOptions !== void 0 && sortedAppliedOptions.length ? sortedAppliedOptions === null || sortedAppliedOptions === void 0 ? void 0 : sortedAppliedOptions.length : 0;
@@ -50649,7 +51028,7 @@ var FilterableList = function FilterableList(_ref) {
       name: name,
       themeValues: themeValues
     });
-  }));
+  })));
 };
 var FilterableList$1 = /*#__PURE__*/React__default.memo(FilterableList);
 
@@ -50657,7 +51036,9 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
   var actions = _ref.actions,
     autocompleteValue = _ref.autocompleteValue,
     btnContentOverride = _ref.btnContentOverride,
+    btnExtraStyles = _ref.btnExtraStyles,
     disabled = _ref.disabled,
+    dropdownExtraStyles = _ref.dropdownExtraStyles,
     extraStyles = _ref.extraStyles,
     fields = _ref.fields,
     filterLabel = _ref.filterLabel,
@@ -50676,8 +51057,6 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
     _ref$searchable = _ref.searchable,
     searchable = _ref$searchable === void 0 ? true : _ref$searchable,
-    selectedOptions = _ref.selectedOptions,
-    setSelectedOptions = _ref.setSelectedOptions,
     themeValues = _ref.themeValues,
     _ref$truncateBtnTextW = _ref.truncateBtnTextWidth,
     truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW;
@@ -50687,22 +51066,29 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     setOpened = _useState2[1];
   var _useState3 = React.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    appliedOptions = _useState4[0],
-    setAppliedOptions = _useState4[1];
-  var handleClickOutsideContainer = function handleClickOutsideContainer() {
-    setOpened(false);
-    actions.fields.searchTerm.set("");
-    onApply(selectedOptions);
+    selectedOptions = _useState4[0],
+    setSelectedOptions = _useState4[1];
+  var _useState5 = React.useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    appliedOptions = _useState6[0],
+    setAppliedOptions = _useState6[1];
+  var openedRef = React.useRef(opened);
+  var handleOnClose = function handleOnClose() {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
   };
   var containerRef = useOutsideClickHook(function () {
-    return handleClickOutsideContainer();
+    return handleOnClose();
   });
   var dropdownRef = React.useRef(null);
   var filterButtonRef = React.useRef(null);
   var applyFilterButtonRef = React.useRef(null);
   var filterDropdownID = "".concat(name, "-filter-dropdown");
-  var checkboxListID = "".concat(name, "-checkbox-list");
+  var listGroupID = "".concat(name, "-list-group");
   React.useEffect(function () {
+    openedRef.current = opened;
     if (!opened) {
       onApply(selectedOptions);
       setAppliedOptions(selectedOptions);
@@ -50719,9 +51105,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
         or tabbing backward past the filter button.
       */
       if (event.key === "Escape" || event.key === "Tab" && !event.shiftKey && applyFilterButtonRef.current && applyFilterButtonRef.current.contains(event.target) || event.key === "Tab" && event.shiftKey && filterButtonRef.current && filterButtonRef.current.contains(event.target)) {
-        setOpened(false);
-        actions.fields.searchTerm.set("");
-        onApply(selectedOptions);
+        handleOnClose();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
@@ -50740,20 +51124,25 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
       setOpened(!opened);
     },
     opened: opened,
-    backgroundColor: opened ? themeValues.primaryColor : selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? themeValues.secondaryColor : WHITE,
-    contentColor: !opened && selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? WHITE : CHARADE_GREY,
+    backgroundHoverColor: appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length ? themeValues.secondaryHoverColor : themeValues.primaryHoverColor,
+    backgroundColor: appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length ? themeValues.secondaryColor : themeValues.primaryColor,
+    textColor: appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length ? WHITE : CHARADE_GREY,
+    textHoverColor: opened && !(appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length) ? CHARADE_GREY : WHITE,
     name: name,
     filterDropdownID: filterDropdownID,
     hasIcon: hasIcon,
     icon: Icon,
     truncateBtnTextWidth: truncateBtnTextWidth,
     filterLabel: filterLabel,
-    selectedOptions: selectedOptions
+    selectedOptions: selectedOptions,
+    extraStyles: btnExtraStyles
   }), /*#__PURE__*/React__default.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,
-    ariaOwns: checkboxListID,
-    opened: opened
+    ariaOwns: listGroupID,
+    ariaControls: listGroupID,
+    opened: opened,
+    extraStyles: dropdownExtraStyles
   }, /*#__PURE__*/React__default.createElement(SearchBox, {
     showSearchBox: searchable && (options === null || options === void 0 ? void 0 : options.length) > 8,
     autocompleteValue: autocompleteValue,
@@ -50762,7 +51151,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     placeholder: placeholder,
     disabled: disabled
   }), /*#__PURE__*/React__default.createElement(FilterableList$1, {
-    id: checkboxListID,
+    id: listGroupID,
     options: options,
     appliedOptions: appliedOptions,
     themeValues: themeValues,
@@ -50776,22 +51165,21 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     extraStyles: "\n            max-height: 100px; \n            display: flex; \n            flex-flow: row; \n            justify-content: space-between;\n            border-top: 1px solid ".concat(GHOST_GREY, ";\n          ")
   }, /*#__PURE__*/React__default.createElement(ActionLinkButton, {
     action: function action() {
-      setOpened(false);
       setSelectedOptions([]);
-      actions.fields.searchTerm.set("");
+      handleOnClose();
       onClear();
     },
     text: "Clear",
-    dataQa: "".concat(name, "-clear-filters")
+    dataQa: "".concat(name, "-clear-filters"),
+    ariaLabel: "Clear all filters"
   }), /*#__PURE__*/React__default.createElement(ActionLinkButton, {
     ref: applyFilterButtonRef,
     action: function action() {
-      setOpened(false);
-      actions.fields.searchTerm.set("");
-      onApply(selectedOptions);
+      return handleOnClose();
     },
     text: "Apply",
-    dataQa: "".concat(name, "-apply-filters")
+    dataQa: "".concat(name, "-apply-filters"),
+    ariaLabel: "Apply all filters"
   }))));
 };
 var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$_);
@@ -51228,11 +51616,13 @@ exports.PaymentFormCard = PaymentFormCard$1;
 exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;
 exports.PaymentSearchIcon = PaymentSearchIcon;
+exports.PaymentStatusIcon = PaymentStatusIcon;
 exports.PaymentsIconSmall = PaymentsIconSmall$1;
 exports.PencilIcon = PencilIcon$1;
 exports.PendingIcon = PendingIcon;
 exports.PeriscopeDashboardIframe = PeriscopeDashboardIframe;
 exports.PeriscopeFailedIcon = PeriscopeFailedIcon;
+exports.PersonIcon = PersonIcon;
 exports.PhoneForm = PhoneForm;
 exports.Placeholder = Placeholder$1;
 exports.PlusCircleIcon = PlusCircleIcon;