@thecb/components 4.0.5 → 4.0.9

package/dist/index.cjs.js

@@ -275,47 +275,21 @@ function __spreadArrays() {
     return r;
 }
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-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) {
-        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);
-};
-
 var clamp = function (min, max) { return function (v) {
     return Math.max(Math.min(v, max), min);
 }; };
 var sanitize = function (v) { return (v % 1 ? Number(v.toFixed(5)) : v); };
 var floatRegex = /(-)?(\d[\d\.]*)/g;
-var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
-var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i;
+var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
+var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
 
 var number = {
     test: function (v) { return typeof v === 'number'; },
     parse: parseFloat,
     transform: function (v) { return v; }
 };
-var alpha = __assign$1(__assign$1({}, number), { transform: clamp(0, 1) });
-var scale = __assign$1(__assign$1({}, number), { default: 1 });
+var alpha = __assign(__assign({}, number), { transform: clamp(0, 1) });
+var scale = __assign(__assign({}, number), { default: 1 });
 
 var createUnitType = function (unit) { return ({
     test: function (v) {
@@ -329,7 +303,7 @@ var percent = createUnitType('%');
 var px = createUnitType('px');
 var vh = createUnitType('vh');
 var vw = createUnitType('vw');
-var progressPercentage = __assign$1(__assign$1({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
+var progressPercentage = __assign(__assign({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
 
 var getValueFromFunctionString = function (value) {
     return value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
@@ -337,12 +311,17 @@ var getValueFromFunctionString = function (value) {
 var clampRgbUnit = clamp(0, 255);
 var isRgba = function (v) { return v.red !== undefined; };
 var isHsla = function (v) { return v.hue !== undefined; };
+function getValuesAsArray(value) {
+    return getValueFromFunctionString(value)
+        .replace(/(,|\/)/g, ' ')
+        .split(/ \s*/);
+}
 var splitColorValues = function (terms) {
     return function (v) {
         if (typeof v !== 'string')
             return v;
         var values = {};
-        var valuesArray = getValueFromFunctionString(v).split(/,\s*/);
+        var valuesArray = getValuesAsArray(v);
         for (var i = 0; i < 4; i++) {
             values[terms[i]] =
                 valuesArray[i] !== undefined ? parseFloat(valuesArray[i]) : 1;
@@ -351,14 +330,14 @@ var splitColorValues = function (terms) {
     };
 };
 var rgbaTemplate = function (_a) {
-    var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
-    return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha$$1 + ")";
+    var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha = _b === void 0 ? 1 : _b;
+    return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
 };
 var hslaTemplate = function (_a) {
-    var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
-    return "hsla(" + hue + ", " + saturation + ", " + lightness + ", " + alpha$$1 + ")";
+    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$1(__assign$1({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
+var rgbUnit = __assign(__assign({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
 function isColorString(color, colorType) {
     return color.startsWith(colorType) && singleColorRegex.test(color);
 }
@@ -366,12 +345,12 @@ var rgba = {
     test: function (v) { return (typeof v === 'string' ? isColorString(v, 'rgb') : isRgba(v)); },
     parse: splitColorValues(['red', 'green', 'blue', 'alpha']),
     transform: function (_a) {
-        var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
+        var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
         return rgbaTemplate({
             red: rgbUnit.transform(red),
             green: rgbUnit.transform(green),
             blue: rgbUnit.transform(blue),
-            alpha: sanitize(alpha.transform(alpha$$1))
+            alpha: sanitize(alpha.transform(alpha$1))
         });
     }
 };
@@ -379,16 +358,16 @@ var hsla = {
     test: function (v) { return (typeof v === 'string' ? isColorString(v, 'hsl') : isHsla(v)); },
     parse: splitColorValues(['hue', 'saturation', 'lightness', 'alpha']),
     transform: function (_a) {
-        var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
+        var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
         return hslaTemplate({
             hue: Math.round(hue),
             saturation: percent.transform(sanitize(saturation)),
             lightness: percent.transform(sanitize(lightness)),
-            alpha: sanitize(alpha.transform(alpha$$1))
+            alpha: sanitize(alpha.transform(alpha$1))
         });
     }
 };
-var hex = __assign$1(__assign$1({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
+var hex = __assign(__assign({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
         var r = '';
         var g = '';
         var b = '';
@@ -522,140 +501,134 @@ if (process.env.NODE_ENV !== 'production') {
     };
 }
 
-var prevTime = 0;
-var onNextFrame = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined
-    ? function (callback) { return window.requestAnimationFrame(callback); }
-    : function (callback) {
-        var timestamp = Date.now();
-        var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));
-        prevTime = timestamp + timeToCall;
-        setTimeout(function () { return callback(prevTime); }, timeToCall);
+var prevTime = 0;
+var onNextFrame = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined ? function (callback) {
+    return window.requestAnimationFrame(callback);
+} : function (callback) {
+    var timestamp = Date.now();
+    var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));
+    prevTime = timestamp + timeToCall;
+    setTimeout(function () {
+        return callback(prevTime);
+    }, timeToCall);
+};
+
+var createStep = function (setRunNextFrame) {
+    var processToRun = [];
+    var processToRunNextFrame = [];
+    var numThisFrame = 0;
+    var isProcessing = false;
+    var i = 0;
+    var cancelled = new WeakSet();
+    var toKeepAlive = new WeakSet();
+    var renderStep = {
+        cancel: function (process) {
+            var indexOfCallback = processToRunNextFrame.indexOf(process);
+            cancelled.add(process);
+            if (indexOfCallback !== -1) {
+                processToRunNextFrame.splice(indexOfCallback, 1);
+            }
+        },
+        process: function (frame) {
+            var _a;
+            isProcessing = true;
+            _a = [processToRunNextFrame, processToRun], processToRun = _a[0], processToRunNextFrame = _a[1];
+            processToRunNextFrame.length = 0;
+            numThisFrame = processToRun.length;
+            if (numThisFrame) {
+                var process_1;
+                for (i = 0; i < numThisFrame; i++) {
+                    process_1 = processToRun[i];
+                    process_1(frame);
+                    if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {
+                        renderStep.schedule(process_1);
+                        setRunNextFrame(true);
+                    }
+                }
+            }
+            isProcessing = false;
+        },
+        schedule: function (process, keepAlive, immediate) {
+            if (keepAlive === void 0) {
+                keepAlive = false;
+            }
+            if (immediate === void 0) {
+                immediate = false;
+            }
+            invariant(typeof process === "function", "Argument must be a function");
+            var addToCurrentBuffer = immediate && isProcessing;
+            var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;
+            cancelled.delete(process);
+            if (keepAlive) toKeepAlive.add(process);
+            if (buffer.indexOf(process) === -1) {
+                buffer.push(process);
+                if (addToCurrentBuffer) numThisFrame = processToRun.length;
+            }
+        }
     };
+    return renderStep;
+};
 
-var createStep = (function (setRunNextFrame) {
-    var processToRun = [];
-    var processToRunNextFrame = [];
-    var numThisFrame = 0;
-    var isProcessing = false;
-    var i = 0;
-    var cancelled = new WeakSet();
-    var toKeepAlive = new WeakSet();
-    var renderStep = {
-        cancel: function (process) {
-            var indexOfCallback = processToRunNextFrame.indexOf(process);
-            cancelled.add(process);
-            if (indexOfCallback !== -1) {
-                processToRunNextFrame.splice(indexOfCallback, 1);
-            }
-        },
-        process: function (frame) {
-            var _a;
-            isProcessing = true;
-            _a = [
-                processToRunNextFrame,
-                processToRun
-            ], processToRun = _a[0], processToRunNextFrame = _a[1];
-            processToRunNextFrame.length = 0;
-            numThisFrame = processToRun.length;
-            if (numThisFrame) {
-                var process_1;
-                for (i = 0; i < numThisFrame; i++) {
-                    process_1 = processToRun[i];
-                    process_1(frame);
-                    if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {
-                        renderStep.schedule(process_1);
-                        setRunNextFrame(true);
-                    }
-                }
-            }
-            isProcessing = false;
-        },
-        schedule: function (process, keepAlive, immediate) {
-            if (keepAlive === void 0) { keepAlive = false; }
-            if (immediate === void 0) { immediate = false; }
-            invariant(typeof process === 'function', 'Argument must be a function');
-            var addToCurrentBuffer = immediate && isProcessing;
-            var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;
-            cancelled.delete(process);
-            if (keepAlive)
-                toKeepAlive.add(process);
-            if (buffer.indexOf(process) === -1) {
-                buffer.push(process);
-                if (addToCurrentBuffer)
-                    numThisFrame = processToRun.length;
-            }
-        }
-    };
-    return renderStep;
-});
-
-var StepId;
-(function (StepId) {
-    StepId["Read"] = "read";
-    StepId["Update"] = "update";
-    StepId["Render"] = "render";
-    StepId["PostRender"] = "postRender";
-    StepId["FixedUpdate"] = "fixedUpdate";
-})(StepId || (StepId = {}));
-
-var maxElapsed = 40;
-var defaultElapsed = (1 / 60) * 1000;
-var useDefaultElapsed = true;
-var willRunNextFrame = false;
-var isProcessing = false;
-var frame = {
-    delta: 0,
-    timestamp: 0
-};
-var stepsOrder = [
-    StepId.Read,
-    StepId.Update,
-    StepId.Render,
-    StepId.PostRender
-];
-var setWillRunNextFrame = function (willRun) { return (willRunNextFrame = willRun); };
-var _a = stepsOrder.reduce(function (acc, key) {
-    var step = createStep(setWillRunNextFrame);
-    acc.sync[key] = function (process, keepAlive, immediate) {
-        if (keepAlive === void 0) { keepAlive = false; }
-        if (immediate === void 0) { immediate = false; }
-        if (!willRunNextFrame)
-            startLoop();
-        step.schedule(process, keepAlive, immediate);
-        return process;
-    };
-    acc.cancelSync[key] = function (process) { return step.cancel(process); };
-    acc.steps[key] = step;
-    return acc;
-}, {
-    steps: {},
-    sync: {},
-    cancelSync: {}
-}), steps = _a.steps, sync = _a.sync, cancelSync = _a.cancelSync;
-var processStep = function (stepId) { return steps[stepId].process(frame); };
-var processFrame = function (timestamp) {
-    willRunNextFrame = false;
-    frame.delta = useDefaultElapsed
-        ? defaultElapsed
-        : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
-    if (!useDefaultElapsed)
-        defaultElapsed = frame.delta;
-    frame.timestamp = timestamp;
-    isProcessing = true;
-    stepsOrder.forEach(processStep);
-    isProcessing = false;
-    if (willRunNextFrame) {
-        useDefaultElapsed = false;
-        onNextFrame(processFrame);
-    }
-};
-var startLoop = function () {
-    willRunNextFrame = true;
-    useDefaultElapsed = true;
-    if (!isProcessing)
-        onNextFrame(processFrame);
-};
-var getFrameData = function () { return frame; };
+var maxElapsed = 40;
+var defaultElapsed = 1 / 60 * 1000;
+var useDefaultElapsed = true;
+var willRunNextFrame = false;
+var isProcessing = false;
+var frame = {
+    delta: 0,
+    timestamp: 0
+};
+var stepsOrder = ["read", "update", "preRender", "render", "postRender"];
+var setWillRunNextFrame = function (willRun) {
+    return willRunNextFrame = willRun;
+};
+var steps = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
+    acc[key] = createStep(setWillRunNextFrame);
+    return acc;
+}, {});
+var sync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
+    var step = steps[key];
+    acc[key] = function (process, keepAlive, immediate) {
+        if (keepAlive === void 0) {
+            keepAlive = false;
+        }
+        if (immediate === void 0) {
+            immediate = false;
+        }
+        if (!willRunNextFrame) startLoop();
+        step.schedule(process, keepAlive, immediate);
+        return process;
+    };
+    return acc;
+}, {});
+var cancelSync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
+    acc[key] = steps[key].cancel;
+    return acc;
+}, {});
+var processStep = function (stepId) {
+    return steps[stepId].process(frame);
+};
+var processFrame = function (timestamp) {
+    willRunNextFrame = false;
+    frame.delta = useDefaultElapsed ? defaultElapsed : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
+    if (!useDefaultElapsed) defaultElapsed = frame.delta;
+    frame.timestamp = timestamp;
+    isProcessing = true;
+    stepsOrder.forEach(processStep);
+    isProcessing = false;
+    if (willRunNextFrame) {
+        useDefaultElapsed = false;
+        onNextFrame(processFrame);
+    }
+};
+var startLoop = function () {
+    willRunNextFrame = true;
+    useDefaultElapsed = true;
+    if (!isProcessing) onNextFrame(processFrame);
+};
+var getFrameData = function () {
+    return frame;
+};
 
 var DEFAULT_OVERSHOOT_STRENGTH = 1.525;
 var reversed = function (easing) {
@@ -930,15 +903,15 @@ 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$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$2.apply(this, arguments);
+    return __assign$1.apply(this, arguments);
 };
 
 var mixLinearColor = function (from, to, v) {
@@ -961,7 +934,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$2({}, fromColor);
+    var blended = __assign$1({}, fromColor);
     var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
     return function (v) {
         for (var key in blended) {
@@ -1006,7 +979,7 @@ var mixArray = function (from, to) {
     };
 };
 var mixObject = function (origin, target) {
-    var output = __assign$2({}, origin, target);
+    var output = __assign$1({}, origin, target);
     var blendValue = {};
     for (var key in output) {
         if (origin[key] !== undefined && target[key] !== undefined) {
@@ -3396,15 +3369,15 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-var __assign$3 = function () {
-    __assign$3 = Object.assign || function __assign(t) {
+var __assign$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$3.apply(this, arguments);
+    return __assign$2.apply(this, arguments);
 };
 
 function __rest$1(s, e) {
@@ -3524,12 +3497,12 @@ var intelligentTransition = {
     opacity: linearTween,
     default: tween
 };
-var dragAction = /*#__PURE__*/__assign$3( /*#__PURE__*/__assign$3({}, intelligentTransition), { x: /*#__PURE__*/createPointer(pointerX, 'left', 'right', BoundingBoxDimension.width), y: /*#__PURE__*/createPointer(pointerY, 'top', 'bottom', BoundingBoxDimension.height) });
+var dragAction = /*#__PURE__*/__assign$2( /*#__PURE__*/__assign$2({}, intelligentTransition), { x: /*#__PURE__*/createPointer(pointerX, 'left', 'right', BoundingBoxDimension.width), y: /*#__PURE__*/createPointer(pointerY, 'top', 'bottom', BoundingBoxDimension.height) });
 var justAxis = function (_a) {
     var from = _a.from;
     return just(from);
 };
-var intelligentDragEnd = /*#__PURE__*/__assign$3( /*#__PURE__*/__assign$3({}, intelligentTransition), { x: justAxis, y: justAxis });
+var intelligentDragEnd = /*#__PURE__*/__assign$2( /*#__PURE__*/__assign$2({}, intelligentTransition), { x: justAxis, y: justAxis });
 var defaultTransitions = /*#__PURE__*/new Map([['default', intelligentTransition], ['drag', dragAction], ['dragEnd', intelligentDragEnd]]);
 
 var animationLookup = {
@@ -3624,7 +3597,7 @@ var getAction = function (v, _a, _b) {
         velocity: velocity,
         ease: ease
     } : { ease: ease };
-    return animationLookup[type](__assign$3(__assign$3({}, baseProps), def));
+    return animationLookup[type](__assign$2(__assign$2({}, baseProps), def));
 };
 var isAction = function (action$$1) {
     return typeof action$$1.start !== 'undefined';
@@ -4003,7 +3976,7 @@ var convertPositionalUnits = function (state, nextPose) {
             changedPositionalKeys.push(key);
             if (!applyAtEndHasBeenCopied) {
                 applyAtEndHasBeenCopied = true;
-                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$3({}, nextPose.applyAtEnd) : {};
+                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$2({}, nextPose.applyAtEnd) : {};
             }
             nextPose.applyAtEnd[key] = nextPose.applyAtEnd[key] || nextPose[key];
             setValue(state, key, to);
@@ -4060,7 +4033,7 @@ var createPoseConfig = function (element, _a) {
         pressable = _a.pressable,
         dragBounds = _a.dragBounds,
         config = __rest$1(_a, ["onDragStart", "onDragEnd", "onPressStart", "onPressEnd", "draggable", "hoverable", "focusable", "pressable", "dragBounds"]);
-    var poseConfig = __assign$3(__assign$3({ flip: {} }, config), { props: __assign$3(__assign$3({}, config.props), { onDragStart: onDragStart,
+    var poseConfig = __assign$2(__assign$2({ flip: {} }, config), { props: __assign$2(__assign$2({}, config.props), { onDragStart: onDragStart,
             onDragEnd: onDragEnd,
             onPressStart: onPressStart,
             onPressEnd: onPressEnd,
@@ -4074,8 +4047,8 @@ var createPoseConfig = function (element, _a) {
         var _b = dragPoses(draggable),
             drag = _b.drag,
             dragEnd = _b.dragEnd;
-        poseConfig.drag = __assign$3(__assign$3({}, drag), poseConfig.drag);
-        poseConfig.dragEnd = __assign$3(__assign$3({}, dragEnd), poseConfig.dragEnd);
+        poseConfig.drag = __assign$2(__assign$2({}, drag), poseConfig.drag);
+        poseConfig.dragEnd = __assign$2(__assign$2({}, dragEnd), poseConfig.dragEnd);
     }
     return poseConfig;
 };
@@ -4121,7 +4094,7 @@ var domPose = /*#__PURE__*/pose({
         var props = _a.props,
             activeActions = _a.activeActions;
         var measure = props.dimensions.measure;
-        var poserApi = __assign$3(__assign$3({}, api), { addChild: function (element, childConfig) {
+        var poserApi = __assign$2(__assign$2({}, api), { addChild: function (element, childConfig) {
                 return api._addChild(createPoseConfig(element, childConfig), domPose);
             }, measure: measure, flip: function (op) {
                 if (op) {
@@ -4191,7 +4164,7 @@ var pickAssign = function (shouldPick, sources) {
     }, {});
 };
 
-var _a$1 = React.createContext({}), PoseParentConsumer = _a$1.Consumer, PoseParentProvider = _a$1.Provider;
+var _a = React.createContext({}), PoseParentConsumer = _a.Consumer, PoseParentProvider = _a.Provider;
 var calcPopFromFlowStyle = function (el) {
     var offsetTop = el.offsetTop, offsetLeft = el.offsetLeft, offsetWidth = el.offsetWidth, offsetHeight = el.offsetHeight;
     return {
@@ -10061,9 +10034,11 @@ function usePanGesture(_a, ref) {
             onPanEnd && onPanEnd(event, info);
         },
     };
-    if (panSession.current !== null) {
-        panSession.current.updateHandlers(handlers);
-    }
+    React.useEffect(function () {
+        if (panSession.current !== null) {
+            panSession.current.updateHandlers(handlers);
+        }
+    });
     function onPointerDown(event) {
         panSession.current = new PanSession(event, handlers, {
             transformPagePoint: transformPagePoint,
@@ -11104,7 +11079,7 @@ function useForceUpdate() {
 
 var SyncLayoutContext = React.createContext(null);
 
-var _a$2;
+var _a$1;
 var StepName;
 (function (StepName) {
     StepName["Prepare"] = "prepare";
@@ -11142,12 +11117,12 @@ var createUseSyncEffect = function (stepName) { return function (callback) {
     jobsNeedProcessing = true;
     jobs[stepName].push(callback);
 }; };
-var layoutSync = (_a$2 = {},
-    _a$2[StepName.Prepare] = createUseSyncEffect(StepName.Prepare),
-    _a$2[StepName.Read] = createUseSyncEffect(StepName.Read),
-    _a$2[StepName.Render] = createUseSyncEffect(StepName.Render),
-    _a$2.flush = flushAllJobs,
-    _a$2);
+var layoutSync = (_a$1 = {},
+    _a$1[StepName.Prepare] = createUseSyncEffect(StepName.Prepare),
+    _a$1[StepName.Read] = createUseSyncEffect(StepName.Read),
+    _a$1[StepName.Render] = createUseSyncEffect(StepName.Render),
+    _a$1.flush = flushAllJobs,
+    _a$1);
 
 function isHTMLElement$1(element) {
     return element instanceof HTMLElement;
@@ -13150,10 +13125,7 @@ var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
   return /*#__PURE__*/React__default.createElement("svg", {
     width: 100,
     height: 100,
-    viewBox: "0 0 100 100",
-    style: {
-      paddingLeft: "16px"
-    }
+    viewBox: "0 0 84 100"
   }, /*#__PURE__*/React__default.createElement("title", null, "8330C897-662E-49C5-B716-3661563AA1FB@1.00x"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
     id: "prefix__a",
     d: "M0 0h100v100H0z"
@@ -14364,12 +14336,15 @@ var Heading = function Heading(_ref) {
       className = _ref.className,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "h1" : _ref$variant,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "h1" : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
 
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
-    as: variant,
+    variant: variant,
+    as: as,
     weight: weight,
     color: color,
     margin: margin,
@@ -16289,7 +16264,198 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
   })));
 };
 
-var backgroundColor$1 = {
+var backgroundColor$1 = WHITE;
+var iconBackgroundColor = GRECIAN_GREY;
+var fallbackValues$9 = {
+  backgroundColor: backgroundColor$1,
+  iconBackgroundColor: iconBackgroundColor
+};
+
+var MOBILE_WIDTH = 768;
+
+var throttle = function throttle(delay, fn) {
+  var lastCall = 0;
+  return function () {
+    var now = new Date().getTime();
+
+    if (now - lastCall < delay) {
+      return;
+    }
+
+    lastCall = now;
+    return fn.apply(void 0, arguments);
+  };
+};
+
+var withWindowSize = function withWindowSize(Child) {
+  return function (_ref) {
+    var props = _extends({}, _ref);
+
+    var _useState = React.useState({
+      isMobile: window.innerWidth < MOBILE_WIDTH,
+      mobileWidth: MOBILE_WIDTH,
+      supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
+    }),
+        _useState2 = _slicedToArray(_useState, 2),
+        state = _useState2[0],
+        setState = _useState2[1];
+
+    var isMobileRef = React.useRef(state.isMobile);
+    var onResize = throttle(25, function () {
+      var width = window.innerWidth;
+      var newMobileState = width <= MOBILE_WIDTH;
+
+      if (newMobileState !== isMobileRef.current) {
+        isMobileRef.current = newMobileState;
+        setState({
+          isMobile: width <= MOBILE_WIDTH,
+          mobileWidth: MOBILE_WIDTH,
+          supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
+        });
+      }
+    });
+    React.useLayoutEffect(function () {
+      window.addEventListener("resize", onResize);
+      return function () {
+        window.removeEventListener("resize", onResize);
+      };
+    }, []);
+    return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+      theme: state
+    }, /*#__PURE__*/React__default.createElement(Child, props));
+  };
+};
+
+var CardVariantSwitcher = function CardVariantSwitcher(_ref) {
+  var variant = _ref.variant,
+      children = _ref.children;
+  return variant === "vertical" ? /*#__PURE__*/React__default.createElement(React.Fragment, null, children) : /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "width: 100%"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0",
+    maxWidth: "100%",
+    fullHeight: true
+  }, children));
+};
+
+var Card = function Card(_ref2) {
+  var themeValues = _ref2.themeValues,
+      icon = _ref2.icon,
+      heading = _ref2.heading,
+      text = _ref2.text,
+      _ref2$cardAction = _ref2.cardAction,
+      cardAction = _ref2$cardAction === void 0 ? "/profile" : _ref2$cardAction,
+      buttonText = _ref2.buttonText,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? "vertical" : _ref2$variant;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
+  var navigate = reactRouterDom.useNavigate();
+
+  var renderIcon = function renderIcon(icon) {
+    switch (icon) {
+      case "accounts":
+        return /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
+
+      case "properties":
+        return /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
+
+      case "payment":
+        return /*#__PURE__*/React__default.createElement(PaymentMethodIcon$1, null);
+
+      default:
+        return /*#__PURE__*/React__default.createElement(PaymentMethodIcon$1, null);
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    background: themeValues.backgroundColor,
+    borderRadius: "4px",
+    boxShadow: " 0px 1px 10px 0px rgb(246, 246, 249), 0px 2px 5px 0px rgb(202, 206, 216)",
+    padding: "0",
+    maxWidth: "100%",
+    minHeight: "100%",
+    minWidth: variant !== "vertical" && "300px"
+  }, /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true,
+    fillCenter: true
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: variant === "vertical" ? "column" : "row",
+    justify: variant === "vertical" && "center",
+    fullHeight: true,
+    childGap: "0"
+  }, icon && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    background: themeValues.iconBackgroundColor
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: variant === "vertical" ? "row" : "column",
+    justify: "center",
+    fullHeight: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: variant === "vertical" ? "0.5rem 0" : isMobile ? "1rem 1.5rem" : "2rem 2.5rem"
+  }, renderIcon(icon)))), /*#__PURE__*/React__default.createElement(CardVariantSwitcher, {
+    variant: variant
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.5rem 1rem",
+    width: "100%",
+    extraStyles: "flex-grow: 1; width: 100%;"
+  }, /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true,
+    fillCenter: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h6"
+  }, heading), /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pS"
+  }, text)))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.5rem 1rem 1rem"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "smallPrimary",
+    text: buttonText,
+    action: function action() {
+      return navigate(cardAction);
+    },
+    extraStyles: "width: 100%;"
+  }))))));
+};
+
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$9);
+
+var cardRegistry = {
+  accounts: function accounts(props) {
+    return /*#__PURE__*/React__default.createElement(Card$1, _extends({
+      icon: "accounts",
+      heading: "Add an Account",
+      buttonText: "Add Account",
+      text: "Add your accounts to this profile to make your payments simple.",
+      cardAction: "/profile/accounts"
+    }, props));
+  },
+  properties: function properties(props) {
+    return /*#__PURE__*/React__default.createElement(Card$1, _extends({
+      icon: "properties",
+      heading: "Add a Property",
+      buttonText: "Add Property",
+      text: "Add a home, car, or other types of personal or business property.",
+      cardAction: "/profile/properties"
+    }, props));
+  },
+  payment: function payment(props) {
+    return /*#__PURE__*/React__default.createElement(Card$1, _extends({
+      icon: "payment",
+      heading: "Add a Payment Method",
+      buttonText: "Add Payment Method",
+      text: "Save cards and/or bank accounts to your profile for fast future payments.",
+      cardAction: "/profile/settings"
+    }, props));
+  }
+};
+
+var backgroundColor$2 = {
   "default": "".concat(TRANSPARENT)
 };
 var textFontSize = {
@@ -16325,8 +16491,8 @@ var checkedStyles = {
 var defaultStyles = {
   "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(GHOST_GREY, ";\n")
 };
-var fallbackValues$9 = {
-  backgroundColor: backgroundColor$1,
+var fallbackValues$a = {
+  backgroundColor: backgroundColor$2,
   textFontSize: textFontSize,
   textFontWeight: textFontWeight,
   textLineHeight: textLineHeight,
@@ -16530,7 +16696,7 @@ var Checkbox = function Checkbox(_ref4) {
   }, title)));
 };
 
-var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$9, "default");
+var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$a, "default");
 
 var listBackgroundColor = {
   "default": "".concat(ATHENS_GREY),
@@ -16556,7 +16722,7 @@ var radioButtonInactive = {
   "default": "".concat(GHOST_GREY),
   disabled: "".concat(GHOST_GREY)
 };
-var fallbackValues$a = {
+var fallbackValues$b = {
   listBackgroundColor: listBackgroundColor,
   listItemColor: listItemColor,
   listItemBackgroundColor: listItemBackgroundColor,
@@ -16760,7 +16926,7 @@ var CheckboxList = function CheckboxList(_ref2) {
   })));
 };
 
-var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$a, "default");
+var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$b, "default");
 
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -16790,7 +16956,7 @@ var DropdownIcon = function DropdownIcon() {
 
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
-var fallbackValues$b = {
+var fallbackValues$c = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3
 };
@@ -17067,7 +17233,7 @@ var Dropdown = function Dropdown(_ref7) {
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null));
 };
 
-var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$b);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$c);
 
 function _templateObject4$3() {
   var data = _taggedTemplateLiteral([""]);
@@ -17943,10 +18109,10 @@ var CountryDropdown = function CountryDropdown(_ref) {
   });
 };
 
-var backgroundColor$2 = WHITE;
+var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$c = {
-  backgroundColor: backgroundColor$2,
+var fallbackValues$d = {
+  backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
 
@@ -17966,7 +18132,7 @@ var DisplayBox = function DisplayBox(_ref) {
   }, children));
 };
 
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$c);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$d);
 
 var fontFamily$3 = {
   p: "Public Sans",
@@ -17984,7 +18150,7 @@ var fontSize$4 = {
   pXXS: "0.65rem",
   pXL: "1.5rem"
 };
-var fallbackValues$d = {
+var fallbackValues$e = {
   fontFamily: fontFamily$3,
   fontSize: fontSize$4
 };
@@ -18043,7 +18209,7 @@ var Paragraph = function Paragraph(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
-var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$d, "p");
+var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$e, "p");
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -18409,8 +18575,8 @@ var color$5 = {
   disabled: "".concat(DUSTY_GREY)
 };
 var labelColor = {
-  "default": "".concat(STORM_GREY),
-  disabled: "".concat(STORM_GREY)
+  "default": "".concat(FIREFLY_GREY),
+  disabled: "".concat(FIREFLY_GREY)
 };
 var borderColor = {
   "default": "".concat(GREY_CHATEAU),
@@ -18436,7 +18602,7 @@ var hoverFocusStyles = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6E727E;"
 };
-var fallbackValues$e = {
+var fallbackValues$f = {
   linkColor: linkColor,
   formBackgroundColor: formBackgroundColor,
   inputBackgroundColor: inputBackgroundColor,
@@ -18663,7 +18829,7 @@ var FormInput = function FormInput(_ref13) {
   }, decorator)));
 };
 
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$e, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$f, "default");
 
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -18698,61 +18864,6 @@ var FormInputColumn = function FormInputColumn(_ref) {
   }, rest), children);
 };
 
-var MOBILE_WIDTH = 768;
-
-var throttle = function throttle(delay, fn) {
-  var lastCall = 0;
-  return function () {
-    var now = new Date().getTime();
-
-    if (now - lastCall < delay) {
-      return;
-    }
-
-    lastCall = now;
-    return fn.apply(void 0, arguments);
-  };
-};
-
-var withWindowSize = function withWindowSize(Child) {
-  return function (_ref) {
-    var props = _extends({}, _ref);
-
-    var _useState = React.useState({
-      isMobile: window.innerWidth < MOBILE_WIDTH,
-      mobileWidth: MOBILE_WIDTH,
-      supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
-    }),
-        _useState2 = _slicedToArray(_useState, 2),
-        state = _useState2[0],
-        setState = _useState2[1];
-
-    var isMobileRef = React.useRef(state.isMobile);
-    var onResize = throttle(25, function () {
-      var width = window.innerWidth;
-      var newMobileState = width <= MOBILE_WIDTH;
-
-      if (newMobileState !== isMobileRef.current) {
-        isMobileRef.current = newMobileState;
-        setState({
-          isMobile: width <= MOBILE_WIDTH,
-          mobileWidth: MOBILE_WIDTH,
-          supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
-        });
-      }
-    });
-    React.useLayoutEffect(function () {
-      window.addEventListener("resize", onResize);
-      return function () {
-        window.removeEventListener("resize", onResize);
-      };
-    }, []);
-    return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-      theme: state
-    }, /*#__PURE__*/React__default.createElement(Child, props));
-  };
-};
-
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
       children = _ref.children,
@@ -18768,7 +18879,7 @@ var FormContainer = function FormContainer(_ref) {
   }, rest), children);
 };
 
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$e, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$f, "default");
 
 var fontSize$6 = {
   "default": "1rem",
@@ -18782,7 +18893,7 @@ var color$6 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$f = {
+var fallbackValues$g = {
   fontSize: fontSize$6,
   padding: padding$1,
   color: color$6
@@ -18825,11 +18936,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
 
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$f, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$g, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$g = {
+var fallbackValues$h = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -18882,7 +18993,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$g, "default");
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$h, "default");
 
 function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
@@ -19005,7 +19116,7 @@ var fontWeight$3 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$h = {
+var fallbackValues$i = {
   fontWeight: fontWeight$3
 };
 
@@ -19014,22 +19125,25 @@ var LabeledAmount = function LabeledAmount(_ref) {
       variant = _ref$variant === void 0 ? "pL" : _ref$variant,
       label = _ref.label,
       amount = _ref.amount,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      as = _ref.as;
   var LabeledAmountText = variant === "h6" ? Heading$1 : Paragraph$1;
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row"
   }, /*#__PURE__*/React__default.createElement(LabeledAmountText, {
     variant: variant,
+    as: as,
     weight: themeValues.fontWeight,
     extraStyles: "text-align: start; flex: 3;"
   }, label, ":"), /*#__PURE__*/React__default.createElement(LabeledAmountText, {
     variant: variant,
+    as: as,
     weight: themeValues.fontWeight,
     extraStyles: "text-align: end; flex: 1;"
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$h, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$i, "default");
 
 var weightTitle = {
   "default": "600",
@@ -19039,7 +19153,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "p"
 };
-var fallbackValues$i = {
+var fallbackValues$j = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -19068,10 +19182,10 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$i, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$j, "default");
 
 var color$7 = "#15749D";
-var fallbackValues$j = {
+var fallbackValues$k = {
   color: color$7
 };
 
@@ -19123,7 +19237,7 @@ var Spinner$1 = function Spinner(_ref4) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$j);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$k);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -19537,6 +19651,818 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
   }))));
 };
 
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeFunction(fn) {
+  return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _construct(Parent, args, Class) {
+  if (_isNativeReflectConstruct()) {
+    _construct = Reflect.construct;
+  } else {
+    _construct = function _construct(Parent, args, Class) {
+      var a = [null];
+      a.push.apply(a, args);
+      var Constructor = Function.bind.apply(Parent, a);
+      var instance = new Constructor();
+      if (Class) _setPrototypeOf(instance, Class.prototype);
+      return instance;
+    };
+  }
+
+  return _construct.apply(null, arguments);
+}
+
+function _wrapNativeSuper(Class) {
+  var _cache = typeof Map === "function" ? new Map() : undefined;
+
+  _wrapNativeSuper = function _wrapNativeSuper(Class) {
+    if (Class === null || !_isNativeFunction(Class)) return Class;
+
+    if (typeof Class !== "function") {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    if (typeof _cache !== "undefined") {
+      if (_cache.has(Class)) return _cache.get(Class);
+
+      _cache.set(Class, Wrapper);
+    }
+
+    function Wrapper() {
+      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+    }
+
+    Wrapper.prototype = Object.create(Class.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    return _setPrototypeOf(Wrapper, Class);
+  };
+
+  return _wrapNativeSuper(Class);
+}
+
+// based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
+
+/**
+ * Parse errors.md and turn it into a simple hash of code: message
+ * @private
+ */
+var ERRORS = {
+  "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
+  "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
+  "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
+  "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
+  "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
+  "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
+  "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
+  "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
+  "9": "Please provide a number of steps to the modularScale helper.\n\n",
+  "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+  "11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
+  "12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
+  "13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
+  "14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
+  "15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
+  "16": "You must provide a template to this method.\n\n",
+  "17": "You passed an unsupported selector state to this method.\n\n",
+  "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+  "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+  "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+  "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+  "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+  "23": "fontFace expects a name of a font-family.\n\n",
+  "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+  "25": "fontFace expects localFonts to be an array.\n\n",
+  "26": "fontFace expects fileFormats to be an array.\n\n",
+  "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+  "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
+  "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+  "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+  "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
+  "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
+  "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
+  "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+  "35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
+  "36": "Property must be a string value.\n\n",
+  "37": "Syntax Error at %s.\n\n",
+  "38": "Formula contains a function that needs parentheses at %s.\n\n",
+  "39": "Formula is missing closing parenthesis at %s.\n\n",
+  "40": "Formula has too many closing parentheses at %s.\n\n",
+  "41": "All values in a formula must have the same unit or be unitless.\n\n",
+  "42": "Please provide a number of steps to the modularScale helper.\n\n",
+  "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+  "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
+  "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
+  "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
+  "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+  "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+  "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+  "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
+  "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
+  "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+  "53": "fontFace expects localFonts to be an array.\n\n",
+  "54": "fontFace expects fileFormats to be an array.\n\n",
+  "55": "fontFace expects a name of a font-family.\n\n",
+  "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
+  "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+  "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
+  "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+  "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+  "61": "Property must be a string value.\n\n",
+  "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+  "63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
+  "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
+  "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
+  "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
+  "67": "You must provide a template to this method.\n\n",
+  "68": "You passed an unsupported selector state to this method.\n\n",
+  "69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
+  "70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
+  "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
+  "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
+  "73": "Please provide a valid CSS variable.\n\n",
+  "74": "CSS variable not found and no default was provided.\n\n",
+  "75": "important requires a valid style object, got a %s instead.\n\n",
+  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+};
+/**
+ * super basic version of sprintf
+ * @private
+ */
+
+function format() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  var a = args[0];
+  var b = [];
+  var c;
+
+  for (c = 1; c < args.length; c += 1) {
+    b.push(args[c]);
+  }
+
+  b.forEach(function (d) {
+    a = a.replace(/%[a-z]/, d);
+  });
+  return a;
+}
+/**
+ * Create an error file out of errors.md for development and a simple web link to the full errors
+ * in production mode.
+ * @private
+ */
+
+
+var PolishedError = /*#__PURE__*/function (_Error) {
+  _inheritsLoose(PolishedError, _Error);
+
+  function PolishedError(code) {
+    var _this;
+
+    if (process.env.NODE_ENV === 'production') {
+      _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
+    } else {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
+    }
+
+    return _assertThisInitialized(_this);
+  }
+
+  return PolishedError;
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+
+function colorToInt(color) {
+  return Math.round(color * 255);
+}
+
+function convertToInt(red, green, blue) {
+  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
+}
+
+function hslToRgb(hue, saturation, lightness, convert) {
+  if (convert === void 0) {
+    convert = convertToInt;
+  }
+
+  if (saturation === 0) {
+    // achromatic
+    return convert(lightness, lightness, lightness);
+  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
+
+
+  var huePrime = (hue % 360 + 360) % 360 / 60;
+  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+  var red = 0;
+  var green = 0;
+  var blue = 0;
+
+  if (huePrime >= 0 && huePrime < 1) {
+    red = chroma;
+    green = secondComponent;
+  } else if (huePrime >= 1 && huePrime < 2) {
+    red = secondComponent;
+    green = chroma;
+  } else if (huePrime >= 2 && huePrime < 3) {
+    green = chroma;
+    blue = secondComponent;
+  } else if (huePrime >= 3 && huePrime < 4) {
+    green = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 4 && huePrime < 5) {
+    red = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 5 && huePrime < 6) {
+    red = chroma;
+    blue = secondComponent;
+  }
+
+  var lightnessModification = lightness - chroma / 2;
+  var finalRed = red + lightnessModification;
+  var finalGreen = green + lightnessModification;
+  var finalBlue = blue + lightnessModification;
+  return convert(finalRed, finalGreen, finalBlue);
+}
+
+var namedColorMap = {
+  aliceblue: 'f0f8ff',
+  antiquewhite: 'faebd7',
+  aqua: '00ffff',
+  aquamarine: '7fffd4',
+  azure: 'f0ffff',
+  beige: 'f5f5dc',
+  bisque: 'ffe4c4',
+  black: '000',
+  blanchedalmond: 'ffebcd',
+  blue: '0000ff',
+  blueviolet: '8a2be2',
+  brown: 'a52a2a',
+  burlywood: 'deb887',
+  cadetblue: '5f9ea0',
+  chartreuse: '7fff00',
+  chocolate: 'd2691e',
+  coral: 'ff7f50',
+  cornflowerblue: '6495ed',
+  cornsilk: 'fff8dc',
+  crimson: 'dc143c',
+  cyan: '00ffff',
+  darkblue: '00008b',
+  darkcyan: '008b8b',
+  darkgoldenrod: 'b8860b',
+  darkgray: 'a9a9a9',
+  darkgreen: '006400',
+  darkgrey: 'a9a9a9',
+  darkkhaki: 'bdb76b',
+  darkmagenta: '8b008b',
+  darkolivegreen: '556b2f',
+  darkorange: 'ff8c00',
+  darkorchid: '9932cc',
+  darkred: '8b0000',
+  darksalmon: 'e9967a',
+  darkseagreen: '8fbc8f',
+  darkslateblue: '483d8b',
+  darkslategray: '2f4f4f',
+  darkslategrey: '2f4f4f',
+  darkturquoise: '00ced1',
+  darkviolet: '9400d3',
+  deeppink: 'ff1493',
+  deepskyblue: '00bfff',
+  dimgray: '696969',
+  dimgrey: '696969',
+  dodgerblue: '1e90ff',
+  firebrick: 'b22222',
+  floralwhite: 'fffaf0',
+  forestgreen: '228b22',
+  fuchsia: 'ff00ff',
+  gainsboro: 'dcdcdc',
+  ghostwhite: 'f8f8ff',
+  gold: 'ffd700',
+  goldenrod: 'daa520',
+  gray: '808080',
+  green: '008000',
+  greenyellow: 'adff2f',
+  grey: '808080',
+  honeydew: 'f0fff0',
+  hotpink: 'ff69b4',
+  indianred: 'cd5c5c',
+  indigo: '4b0082',
+  ivory: 'fffff0',
+  khaki: 'f0e68c',
+  lavender: 'e6e6fa',
+  lavenderblush: 'fff0f5',
+  lawngreen: '7cfc00',
+  lemonchiffon: 'fffacd',
+  lightblue: 'add8e6',
+  lightcoral: 'f08080',
+  lightcyan: 'e0ffff',
+  lightgoldenrodyellow: 'fafad2',
+  lightgray: 'd3d3d3',
+  lightgreen: '90ee90',
+  lightgrey: 'd3d3d3',
+  lightpink: 'ffb6c1',
+  lightsalmon: 'ffa07a',
+  lightseagreen: '20b2aa',
+  lightskyblue: '87cefa',
+  lightslategray: '789',
+  lightslategrey: '789',
+  lightsteelblue: 'b0c4de',
+  lightyellow: 'ffffe0',
+  lime: '0f0',
+  limegreen: '32cd32',
+  linen: 'faf0e6',
+  magenta: 'f0f',
+  maroon: '800000',
+  mediumaquamarine: '66cdaa',
+  mediumblue: '0000cd',
+  mediumorchid: 'ba55d3',
+  mediumpurple: '9370db',
+  mediumseagreen: '3cb371',
+  mediumslateblue: '7b68ee',
+  mediumspringgreen: '00fa9a',
+  mediumturquoise: '48d1cc',
+  mediumvioletred: 'c71585',
+  midnightblue: '191970',
+  mintcream: 'f5fffa',
+  mistyrose: 'ffe4e1',
+  moccasin: 'ffe4b5',
+  navajowhite: 'ffdead',
+  navy: '000080',
+  oldlace: 'fdf5e6',
+  olive: '808000',
+  olivedrab: '6b8e23',
+  orange: 'ffa500',
+  orangered: 'ff4500',
+  orchid: 'da70d6',
+  palegoldenrod: 'eee8aa',
+  palegreen: '98fb98',
+  paleturquoise: 'afeeee',
+  palevioletred: 'db7093',
+  papayawhip: 'ffefd5',
+  peachpuff: 'ffdab9',
+  peru: 'cd853f',
+  pink: 'ffc0cb',
+  plum: 'dda0dd',
+  powderblue: 'b0e0e6',
+  purple: '800080',
+  rebeccapurple: '639',
+  red: 'f00',
+  rosybrown: 'bc8f8f',
+  royalblue: '4169e1',
+  saddlebrown: '8b4513',
+  salmon: 'fa8072',
+  sandybrown: 'f4a460',
+  seagreen: '2e8b57',
+  seashell: 'fff5ee',
+  sienna: 'a0522d',
+  silver: 'c0c0c0',
+  skyblue: '87ceeb',
+  slateblue: '6a5acd',
+  slategray: '708090',
+  slategrey: '708090',
+  snow: 'fffafa',
+  springgreen: '00ff7f',
+  steelblue: '4682b4',
+  tan: 'd2b48c',
+  teal: '008080',
+  thistle: 'd8bfd8',
+  tomato: 'ff6347',
+  turquoise: '40e0d0',
+  violet: 'ee82ee',
+  wheat: 'f5deb3',
+  white: 'fff',
+  whitesmoke: 'f5f5f5',
+  yellow: 'ff0',
+  yellowgreen: '9acd32'
+};
+/**
+ * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
+ * @private
+ */
+
+function nameToHex(color) {
+  if (typeof color !== 'string') return color;
+  var normalizedColorName = color.toLowerCase();
+  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
+}
+
+var hexRegex = /^#[a-fA-F0-9]{6}$/;
+var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
+var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
+var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
+var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+/**
+ * Returns an RgbColor or RgbaColor object. This utility function is only useful
+ * if want to extract a color component. With the color util `toColorString` you
+ * can convert a RgbColor or RgbaColor object back to a string.
+ *
+ * @example
+ * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
+ * const color1 = parseToRgb('rgb(255, 0, 0)');
+ * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
+ * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
+ */
+
+function parseToRgb(color) {
+  if (typeof color !== 'string') {
+    throw new PolishedError(3);
+  }
+
+  var normalizedColor = nameToHex(color);
+
+  if (normalizedColor.match(hexRegex)) {
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
+    };
+  }
+
+  if (normalizedColor.match(hexRgbaRegex)) {
+    var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
+      alpha: alpha
+    };
+  }
+
+  if (normalizedColor.match(reducedHexRegex)) {
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
+    };
+  }
+
+  if (normalizedColor.match(reducedRgbaHexRegex)) {
+    var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
+      alpha: _alpha
+    };
+  }
+
+  var rgbMatched = rgbRegex.exec(normalizedColor);
+
+  if (rgbMatched) {
+    return {
+      red: parseInt("" + rgbMatched[1], 10),
+      green: parseInt("" + rgbMatched[2], 10),
+      blue: parseInt("" + rgbMatched[3], 10)
+    };
+  }
+
+  var rgbaMatched = rgbaRegex.exec(normalizedColor);
+
+  if (rgbaMatched) {
+    return {
+      red: parseInt("" + rgbaMatched[1], 10),
+      green: parseInt("" + rgbaMatched[2], 10),
+      blue: parseInt("" + rgbaMatched[3], 10),
+      alpha: parseFloat("" + rgbaMatched[4])
+    };
+  }
+
+  var hslMatched = hslRegex.exec(normalizedColor);
+
+  if (hslMatched) {
+    var hue = parseInt("" + hslMatched[1], 10);
+    var saturation = parseInt("" + hslMatched[2], 10) / 100;
+    var lightness = parseInt("" + hslMatched[3], 10) / 100;
+    var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
+    var hslRgbMatched = rgbRegex.exec(rgbColorString);
+
+    if (!hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, rgbColorString);
+    }
+
+    return {
+      red: parseInt("" + hslRgbMatched[1], 10),
+      green: parseInt("" + hslRgbMatched[2], 10),
+      blue: parseInt("" + hslRgbMatched[3], 10)
+    };
+  }
+
+  var hslaMatched = hslaRegex.exec(normalizedColor);
+
+  if (hslaMatched) {
+    var _hue = parseInt("" + hslaMatched[1], 10);
+
+    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+
+    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+
+    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+
+    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+
+    if (!_hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, _rgbColorString);
+    }
+
+    return {
+      red: parseInt("" + _hslRgbMatched[1], 10),
+      green: parseInt("" + _hslRgbMatched[2], 10),
+      blue: parseInt("" + _hslRgbMatched[3], 10),
+      alpha: parseFloat("" + hslaMatched[4])
+    };
+  }
+
+  throw new PolishedError(5);
+}
+
+/**
+ * Reduces hex values if possible e.g. #ff8866 to #f86
+ * @private
+ */
+var reduceHexValue = function reduceHexValue(value) {
+  if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
+    return "#" + value[1] + value[3] + value[5];
+  }
+
+  return value;
+};
+
+function numberToHex(value) {
+  var hex = value.toString(16);
+  return hex.length === 1 ? "0" + hex : hex;
+}
+
+/**
+ * Returns a string value for the color. The returned result is the smallest possible hex notation.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: rgb(255, 205, 100),
+ *   background: rgb({ red: 255, green: 205, blue: 100 }),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${rgb(255, 205, 100)};
+ *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#ffcd64";
+ *   background: "#ffcd64";
+ * }
+ */
+function rgb(value, green, blue) {
+  if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
+    return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
+  } else if (typeof value === 'object' && green === undefined && blue === undefined) {
+    return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
+  }
+
+  throw new PolishedError(6);
+}
+
+/**
+ * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
+ *
+ * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: rgba(255, 205, 100, 0.7),
+ *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
+ *   background: rgba(255, 205, 100, 1),
+ *   background: rgba('#ffffff', 0.4),
+ *   background: rgba('black', 0.7),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${rgba(255, 205, 100, 0.7)};
+ *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
+ *   background: ${rgba(255, 205, 100, 1)};
+ *   background: ${rgba('#ffffff', 0.4)};
+ *   background: ${rgba('black', 0.7)};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "rgba(255,205,100,0.7)";
+ *   background: "rgba(255,205,100,0.7)";
+ *   background: "#ffcd64";
+ *   background: "rgba(255,255,255,0.4)";
+ *   background: "rgba(0,0,0,0.7)";
+ * }
+ */
+function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
+  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
+    var rgbValue = parseToRgb(firstValue);
+    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
+  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
+    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+  } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
+    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
+  }
+
+  throw new PolishedError(7);
+}
+
+// Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
+// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-redeclare
+function curried(f, length, acc) {
+  return function fn() {
+    // eslint-disable-next-line prefer-rest-params
+    var combined = acc.concat(Array.prototype.slice.call(arguments));
+    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
+  };
+} // eslint-disable-next-line no-redeclare
+
+
+function curry(f) {
+  // eslint-disable-line no-redeclare
+  return curried(f, f.length, []);
+}
+
+/**
+ * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: mix(0.5, '#f00', '#00f')
+ *   background: mix(0.25, '#f00', '#00f')
+ *   background: mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${mix(0.5, '#f00', '#00f')};
+ *   background: ${mix(0.25, '#f00', '#00f')};
+ *   background: ${mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#7f007f";
+ *   background: "#3f00bf";
+ *   background: "rgba(63, 0, 191, 0.75)";
+ * }
+ */
+
+function mix$1(weight, color, otherColor) {
+  if (color === 'transparent') return otherColor;
+  if (otherColor === 'transparent') return color;
+  if (weight === 0) return otherColor;
+  var parsedColor1 = parseToRgb(color);
+
+  var color1 = _extends$1({}, parsedColor1, {
+    alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
+  });
+
+  var parsedColor2 = parseToRgb(otherColor);
+
+  var color2 = _extends$1({}, parsedColor2, {
+    alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
+  }); // The formula is copied from the original Sass implementation:
+  // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
+
+
+  var alphaDelta = color1.alpha - color2.alpha;
+  var x = parseFloat(weight) * 2 - 1;
+  var y = x * alphaDelta === -1 ? x : x + alphaDelta;
+  var z = 1 + x * alphaDelta;
+  var weight1 = (y / z + 1) / 2.0;
+  var weight2 = 1 - weight1;
+  var mixedColor = {
+    red: Math.floor(color1.red * weight1 + color2.red * weight2),
+    green: Math.floor(color1.green * weight1 + color2.green * weight2),
+    blue: Math.floor(color1.blue * weight1 + color2.blue * weight2),
+    alpha: color1.alpha * (parseFloat(weight) / 1.0) + color2.alpha * (1 - parseFloat(weight) / 1.0)
+  };
+  return rgba$1(mixedColor);
+} // prettier-ignore
+
+
+var curriedMix = /*#__PURE__*/curry
+/* ::<number | string, string, string, string> */
+(mix$1);
+
+/**
+ * Tints a color by mixing it with white. `tint` can produce
+ * hue shifts, where as `lighten` manipulates the luminance channel and therefore
+ * doesn't produce hue shifts.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: tint(0.25, '#00f')
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${tint(0.25, '#00f')};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#bfbfff";
+ * }
+ */
+
+function tint(percentage, color) {
+  if (color === 'transparent') return color;
+  return curriedMix(parseFloat(percentage), 'rgb(255, 255, 255)', color);
+} // prettier-ignore
+
+
+var curriedTint = /*#__PURE__*/curry
+/* ::<number | string, string, string> */
+(tint);
+
 var color$8 = {
   "default": "".concat(CHARADE_GREY),
   large: "".concat(BRIGHT_GREY)
@@ -19545,7 +20471,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$k = {
+var fallbackValues$l = {
   color: color$8,
   height: height$1
 };
@@ -19595,8 +20521,8 @@ var Placeholder = function Placeholder(_ref2) {
     border: "none",
     minHeight: themeValues.height,
     hiddenStyles: !visible,
-    extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(STORM_GREY, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(STORM_GREY, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(STORM_GREY, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(STORM_GREY, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
-    hoverStyles: "background-color: ".concat(GRECIAN_GREY, ";")
+    extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
+    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint(0.9, themeValues.color), ";")
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19610,7 +20536,7 @@ var Placeholder = function Placeholder(_ref2) {
     childGap: "0"
   }, variant === "large" && /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: ".fill { \n                    fill: ".concat(CHARADE_GREY, "; \n                  } .stroke { \n                    stroke: ").concat(CHARADE_GREY, "; \n                  }")
+    extraStyles: ".fill { \n                    fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  }")
   }, variant === "large" ? /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, largeIcon === "accounts" ? /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null) : /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null), /*#__PURE__*/React__default.createElement(Text$1, {
@@ -19634,13 +20560,13 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$k, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$l, "default");
 
-var backgroundColor$3 = {
+var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$l = {
-  backgroundColor: backgroundColor$3
+var fallbackValues$m = {
+  backgroundColor: backgroundColor$4
 };
 
 var ProcessingFee = function ProcessingFee(_ref) {
@@ -19667,11 +20593,11 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$l, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$m, "default");
 
 var activeColor$4 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
-var fallbackValues$m = {
+var fallbackValues$n = {
   activeColor: activeColor$4,
   inactiveColor: inactiveColor
 };
@@ -19767,7 +20693,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$m);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$n);
 
 var borderColor$1 = {
   "default": "".concat(GREY_CHATEAU)
@@ -19775,7 +20701,7 @@ var borderColor$1 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   borderColor: borderColor$1,
   borderSize: borderSize
 };
@@ -19792,7 +20718,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$n, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$o, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -30374,7 +31300,7 @@ var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-var fallbackValues$o = {
+var fallbackValues$p = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -30576,7 +31502,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$o);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$p);
 
 const validatorToPredicate = (validatorFn, emptyCase) => (
   value,
@@ -32402,7 +33328,7 @@ var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
 var focusStyles = "outline: none;";
-var fallbackValues$p = {
+var fallbackValues$q = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor,
@@ -32506,7 +33432,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$p);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$q);
 
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
@@ -32995,10 +33921,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$2 = "#ffffff";
-var backgroundColor$4 = "#182848";
-var fallbackValues$q = {
+var backgroundColor$5 = "#182848";
+var fallbackValues$r = {
   textColor: textColor$2,
-  backgroundColor: backgroundColor$4
+  backgroundColor: backgroundColor$5
 };
 
 var HighlightTabRow = function HighlightTabRow(_ref) {
@@ -33028,7 +33954,8 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       key: t,
       borderSize: "3px",
       borderColor: highlightIndex == i ? themeValues.textColor : "transparent",
-      borderWidthOverride: "0 0 3px 0"
+      borderWidthOverride: "0 0 3px 0",
+      extraStyles: "text-align: center;"
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       textAlign: "center",
@@ -33039,7 +33966,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter)));
 };
 
-var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$q));
+var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$r));
 
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
@@ -33953,15 +34880,15 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$1(self); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -33989,27 +34916,27 @@ function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(Modal)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf$1(Modal)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-    _defineProperty$1(_assertThisInitialized(_this), "getApplicationNode", function () {
+    _defineProperty$1(_assertThisInitialized$1(_this), "getApplicationNode", function () {
       if (_this.props.getApplicationNode) return _this.props.getApplicationNode();
       return _this.props.applicationNode;
     });
 
-    _defineProperty$1(_assertThisInitialized(_this), "checkUnderlayClick", function (event) {
+    _defineProperty$1(_assertThisInitialized$1(_this), "checkUnderlayClick", function (event) {
       if (_this.dialogNode && _this.dialogNode.contains(event.target) || // If the click is on the scrollbar we don't want to close the modal.
       event.pageX > event.target.ownerDocument.documentElement.offsetWidth || event.pageY > event.target.ownerDocument.documentElement.offsetHeight) return;
 
       _this.exit(event);
     });
 
-    _defineProperty$1(_assertThisInitialized(_this), "checkDocumentKeyDown", function (event) {
+    _defineProperty$1(_assertThisInitialized$1(_this), "checkDocumentKeyDown", function (event) {
       if (_this.props.escapeExits && (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27)) {
         _this.exit(event);
       }
     });
 
-    _defineProperty$1(_assertThisInitialized(_this), "exit", function (event) {
+    _defineProperty$1(_assertThisInitialized$1(_this), "exit", function (event) {
       if (_this.props.onExit) {
         _this.props.onExit(event);
       }
@@ -34392,7 +35319,7 @@ var textAlign = {
 };
 var titleType = {
   "default": "h5",
-  largeTitle: "h3"
+  largeTitle: "h1"
 };
 var titleSpacing = {
   "default": "0.5rem",
@@ -34406,11 +35333,11 @@ var borderRadius = {
   "default": "0.25rem",
   largeTitle: "0.25rem"
 };
-var backgroundColor$5 = {
+var backgroundColor$6 = {
   "default": WHITE,
   largeTitle: WHITE
 };
-var fallbackValues$r = {
+var fallbackValues$s = {
   fontSize: fontSize$7,
   fontWeight: fontWeight$4,
   fontColor: fontColor,
@@ -34420,7 +35347,7 @@ var fallbackValues$r = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$5
+  backgroundColor: backgroundColor$6
 };
 
 var Module = function Module(_ref) {
@@ -34436,12 +35363,11 @@ var Module = function Module(_ref) {
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
       children = _ref.children;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: variant === "default" ? "h5" : "h3",
+    variant: variant === "default" ? "h5" : "h2",
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
-    textAlign: themeValues.textAlign,
-    "aria-level": variant === "default" ? "3" : "1"
+    textAlign: themeValues.textAlign
   }, heading), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -34452,9 +35378,9 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$r, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$s, "default"));
 
-var backgroundColor$6 = {
+var backgroundColor$7 = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -34462,8 +35388,8 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$s = {
-  backgroundColor: backgroundColor$6,
+var fallbackValues$t = {
+  backgroundColor: backgroundColor$7,
   shadowColor: shadowColor
 };
 
@@ -34503,7 +35429,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$s, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$t, "profile");
 
 function _templateObject$y() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
@@ -34565,7 +35491,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$s, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$t, "profile");
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -36068,7 +36994,7 @@ var TitleModule = function TitleModule(_ref) {
 var color$9 = "#15749D";
 var hoverColor$4 = "#116285";
 var activeColor$5 = "#0E506D";
-var fallbackValues$t = {
+var fallbackValues$u = {
   color: color$9,
   hoverColor: hoverColor$4,
   activeColor: activeColor$5
@@ -36139,7 +37065,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps));
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$t);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$u);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -36675,7 +37601,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, backButton, forwardButton)));
 };
 
-var backgroundColor$7 = {
+var backgroundColor$8 = {
   "default": "transparent",
   small: "transparent"
 };
@@ -36691,8 +37617,8 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "pL"
 };
-var fallbackValues$u = {
-  backgroundColor: backgroundColor$7,
+var fallbackValues$v = {
+  backgroundColor: backgroundColor$8,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -36711,6 +37637,7 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
     label: "Subtotal",
     amount: displayCurrency(subtotal)
   }), feeElems), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
+    as: "h2",
     variant: themeValues.labeledAmountTotal,
     label: "Total",
     amount: displayCurrency(total)
@@ -36832,9 +37759,11 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     justify: "space-between",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h6",
-    weight: "700"
+    variant: "h5",
+    weight: "700",
+    as: "h1"
   }, titleText), displayCurrency(total))) : /*#__PURE__*/React__default.createElement(Heading$1, {
+    as: "h1",
     variant: "h3",
     weight: "700",
     margin: "1rem 0 0 0"
@@ -36852,7 +37781,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$u, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$v, "default");
 
 var linkColor$1 = {
   "default": "#357fb8",
@@ -36874,7 +37803,7 @@ var modalLinkHoverFocus = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$v = {
+var fallbackValues$w = {
   linkColor: linkColor$1,
   fontSize: fontSize$8,
   lineHeight: lineHeight$4,
@@ -36937,7 +37866,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   });
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$v, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$w, "default");
 
 function _templateObject$z() {
   var data = _taggedTemplateLiteral([""]);
@@ -37323,7 +38252,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$2 = "".concat(GREY_CHATEAU);
 var focusStyles$1 = "outline: none;";
-var fallbackValues$w = {
+var fallbackValues$x = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -37496,7 +38425,8 @@ var RadioSection = function RadioSection(_ref) {
         src: icon.img,
         key: icon.img,
         fade: !icon.enabled,
-        isMobile: isMobile
+        isMobile: isMobile,
+        alt: icon.altText
       });
     })))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
       initial: false
@@ -37514,7 +38444,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$w);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$x);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -37801,7 +38731,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$x = {
+var fallbackValues$y = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -37857,9 +38787,9 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$x);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$y);
 
-var backgroundColor$8 = {
+var backgroundColor$9 = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -37887,8 +38817,8 @@ var modalLinkHoverFocus$1 = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$y = {
-  backgroundColor: backgroundColor$8,
+var fallbackValues$z = {
+  backgroundColor: backgroundColor$9,
   linkColor: linkColor$2,
   border: border$2,
   fontSize: fontSize$9,
@@ -37951,7 +38881,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   });
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$y, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$z, "default");
 
 function _templateObject2$l() {
   var data = _taggedTemplateLiteral([""]);
@@ -38075,6 +39005,65 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
+var fontWeight$7 = "600";
+var fontColor$1 = WHITE;
+var textAlign$1 = "left";
+var headerBackgroundColor = BRIGHT_GREY;
+var imageBackgroundColor = MATISSE_BLUE;
+var fallbackValues$A = {
+  fontWeight: fontWeight$7,
+  fontColor: fontColor$1,
+  textAlign: textAlign$1,
+  headerBackgroundColor: headerBackgroundColor,
+  imageBackgroundColor: imageBackgroundColor
+};
+
+function _templateObject$C() {
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n"]);
+
+  _templateObject$C = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var WelcomeImage = styled__default.img(_templateObject$C());
+
+var WelcomeModule = function WelcomeModule(_ref) {
+  var heading = _ref.heading,
+      isMobile = _ref.isMobile,
+      themeValues = _ref.themeValues;
+  var welcomeImage = "https://cb-public-assets.s3-us-west-2.amazonaws.com/profile-assets/profile-welcome-image.png";
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, isMobile && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    background: themeValues.imageBackgroundColor
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center"
+  }, /*#__PURE__*/React__default.createElement(WelcomeImage, {
+    src: welcomeImage
+  }))), /*#__PURE__*/React__default.createElement(Box, {
+    background: themeValues.headerBackgroundColor
+  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h5",
+    weight: themeValues.fontWeight,
+    color: themeValues.fontColor,
+    textAlign: themeValues.textAlign,
+    "aria-level": "3"
+  }, heading)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    background: themeValues.imageBackgroundColor
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    align: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(WelcomeImage, {
+    src: welcomeImage
+  })))));
+};
+
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$A));
+
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
       workflowName = _ref$workflowName === void 0 ? "Test Workflow" : _ref$workflowName,
@@ -38121,7 +39110,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$z = {
+var fallbackValues$B = {
   pageBackground: pageBackground
 };
 
@@ -38168,7 +39157,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$z));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$B));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -38210,7 +39199,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$z));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$B));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -38250,7 +39239,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$z));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$B));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -38304,7 +39293,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$z));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$B));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -38375,7 +39364,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$z));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$B));
 
 
 
@@ -38504,7 +39493,9 @@ exports.Timeout = Timeout$1;
 exports.TimeoutImage = TimeoutImage;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
+exports.WelcomeModule = WelcomeModule$1;
 exports.WorkflowTile = WorkflowTile;
+exports.cardRegistry = cardRegistry;
 exports.constants = index$4;
 exports.createPartialAmountFormState = createPartialAmountFormState;
 exports.util = index$5;