@thecb/components 3.5.12-beta.1 → 3.5.12-beta.2

package/dist/index.cjs.js

@@ -215,63 +215,6 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _createForOfIteratorHelper(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-
-      var F = function () {};
-
-      return {
-        s: F,
-        n: function () {
-          if (i >= o.length) return {
-            done: true
-          };
-          return {
-            done: false,
-            value: o[i++]
-          };
-        },
-        e: function (e) {
-          throw e;
-        },
-        f: F
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  var normalCompletion = true,
-      didErr = false,
-      err;
-  return {
-    s: function () {
-      it = o[Symbol.iterator]();
-    },
-    n: function () {
-      var step = it.next();
-      normalCompletion = step.done;
-      return step;
-    },
-    e: function (e) {
-      didErr = true;
-      err = e;
-    },
-    f: function () {
-      try {
-        if (!normalCompletion && it.return != null) it.return();
-      } finally {
-        if (didErr) throw err;
-      }
-    }
-  };
-}
-
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -332,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) {
@@ -386,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(')'));
@@ -394,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;
@@ -408,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);
 }
@@ -423,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))
         });
     }
 };
@@ -436,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 = '';
@@ -579,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) {
@@ -987,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) {
@@ -1018,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) {
@@ -1063,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) {
@@ -3453,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) {
@@ -3581,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 = {
@@ -3681,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';
@@ -4060,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);
@@ -4117,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,
@@ -4131,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;
 };
@@ -4178,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) {
@@ -4248,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 {
@@ -6144,12 +6060,19 @@ var displayCurrency = function displayCurrency(cents) {
 var convertCentsToMoneyInt = function convertCentsToMoneyInt(n) {
   return (n / 100).toFixed(0);
 };
+
+var createUniqueId = function createUniqueId() {
+  return "_" + Math.random().toString(36).substr(2, 9);
+};
+
 var safeChildren = function safeChildren(children) {
   var replacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 
   if (children && children instanceof Array) {
     return children.map(function (child) {
-      return !child ? replacement : child;
+      return !child ? /*#__PURE__*/React__default.createElement(React.Fragment, {
+        key: createUniqueId()
+      }, replacement) : child;
     });
   }
 
@@ -6308,7 +6231,8 @@ var BoxWrapper = styled__default(function (_ref) {
       minWidth = _ref.minWidth,
       maxWidth = _ref.maxWidth,
       padding = _ref.padding,
-      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding"]);
+      hiddenStyles = _ref.hiddenStyles,
+      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles"]);
 
   return /*#__PURE__*/React__default.createElement("div", props);
 })(_templateObject$1(), function (_ref2) {
@@ -6519,30 +6443,37 @@ function _templateObject$3() {
 
   return data;
 }
-var ClusterWrapper = styled__default.div(_templateObject$3(), function (_ref) {
-  var overflow = _ref.overflow;
+/* eslint-disable no-unused-vars */
+
+var ClusterWrapper = styled__default(function (_ref) {
+  var overflow = _ref.overflow,
+      props = _objectWithoutProperties(_ref, ["overflow"]);
+
+  return /*#__PURE__*/React__default.createElement("div", props);
+})(_templateObject$3(), function (_ref2) {
+  var overflow = _ref2.overflow;
   return overflow ? "visible" : "hidden";
 });
-var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref2) {
-  var nowrap = _ref2.nowrap;
+var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref3) {
+  var nowrap = _ref3.nowrap;
   return nowrap ? "nowrap" : "wrap";
-}, function (_ref3) {
-  var justify = _ref3.justify;
-  return justify;
 }, function (_ref4) {
-  var align = _ref4.align;
-  return align;
+  var justify = _ref4.justify;
+  return justify;
 }, function (_ref5) {
-  var childGap = _ref5.childGap;
-  return childGap;
+  var align = _ref5.align;
+  return align;
 }, function (_ref6) {
-  var minHeight = _ref6.minHeight;
-  return minHeight;
+  var childGap = _ref6.childGap;
+  return childGap;
 }, function (_ref7) {
-  var minWidth = _ref7.minWidth;
-  return minWidth;
+  var minHeight = _ref7.minHeight;
+  return minHeight;
 }, function (_ref8) {
-  var childGap = _ref8.childGap;
+  var minWidth = _ref8.minWidth;
+  return minWidth;
+}, function (_ref9) {
+  var childGap = _ref9.childGap;
   return childGap;
 });
 
@@ -6665,25 +6596,35 @@ var SidebarWrapper = styled__default.div(_templateObject$5(), function (_ref) {
   var fullHeight = _ref.fullHeight;
   return fullHeight ? "height: 100%;" : "";
 });
-var SidebarInnerWrapper = styled__default.div(_templateObject2$3(), function (_ref2) {
-  var childGap = _ref2.childGap;
-  return childGap;
-}, function (_ref3) {
+var SidebarInnerWrapper = styled__default( // eslint-disable-next-line no-unused-vars
+function (_ref2) {
+  var onRight = _ref2.onRight,
+      childGap = _ref2.childGap,
+      contentMinWidth = _ref2.contentMinWidth,
+      minHeight = _ref2.minHeight,
+      fullHeight = _ref2.fullHeight,
+      props = _objectWithoutProperties(_ref2, ["onRight", "childGap", "contentMinWidth", "minHeight", "fullHeight"]);
+
+  return /*#__PURE__*/React__default.createElement("div", props);
+})(_templateObject2$3(), function (_ref3) {
   var childGap = _ref3.childGap;
   return childGap;
 }, function (_ref4) {
-  var width = _ref4.width;
-  return width ? "flex-basis: ".concat(width) : "";
+  var childGap = _ref4.childGap;
+  return childGap;
 }, function (_ref5) {
-  var minHeight = _ref5.minHeight;
-  return minHeight ? "margin-top: 0; margin-bottom: 0;" : "";
+  var width = _ref5.width;
+  return width ? "flex-basis: ".concat(width) : "";
 }, function (_ref6) {
-  var onRight = _ref6.onRight,
-      contentMinWidth = _ref6.contentMinWidth,
-      childGap = _ref6.childGap;
-  return onRight ? "> :first-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }\n    ") : "> :last-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }");
+  var minHeight = _ref6.minHeight;
+  return minHeight ? "margin-top: 0; margin-bottom: 0;" : "";
 }, function (_ref7) {
-  var fullHeight = _ref7.fullHeight;
+  var onRight = _ref7.onRight,
+      contentMinWidth = _ref7.contentMinWidth,
+      childGap = _ref7.childGap;
+  return onRight ? "> :first-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }\n    ") : "> :last-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }");
+}, function (_ref8) {
+  var fullHeight = _ref8.fullHeight;
   return fullHeight ? "min-height: 100%;" : "";
 });
 
@@ -10095,9 +10036,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,
@@ -11138,7 +11081,7 @@ function useForceUpdate() {
 
 var SyncLayoutContext = React.createContext(null);
 
-var _a$2;
+var _a$1;
 var StepName;
 (function (StepName) {
     StepName["Prepare"] = "prepare";
@@ -11176,12 +11119,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;
@@ -12987,29 +12930,17 @@ var AccountsIconSmall = function AccountsIconSmall(_ref) {
     width: "29",
     height: "27"
   })), /*#__PURE__*/React__default.createElement("g", {
-    id: "Random-Icon-Work",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Header/Desktop/Menu"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Header/Desktop/Menu/Accounts-Tab"
-  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", {
-    id: "Payments"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "folder-open"
-  }, /*#__PURE__*/React__default.createElement("mask", {
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("mask", {
     id: "mask-2-accountssmall",
     fill: "white"
   }, /*#__PURE__*/React__default.createElement("use", {
     xlinkHref: "#path-1-accountssmall"
-  })), /*#__PURE__*/React__default.createElement("g", {
-    id: "Mask"
-  }), /*#__PURE__*/React__default.createElement("path", {
+  })), /*#__PURE__*/React__default.createElement("g", null), /*#__PURE__*/React__default.createElement("path", {
     d: "M1.875,17.9609424 L4.30077547,13.8125148 C4.60546242,13.2968908 5.01561733,12.8867359 5.53124128,12.5820489 C6.04686523,12.277362 6.60936389,12.1250188 7.21873726,12.1250188 L7.21873726,12.1250188 L18.7499598,12.1250188 L18.7499598,10.4375228 C18.7499598,9.9687741 18.5858975,9.57033719 18.2577734,9.24221315 C17.9296494,8.91408911 17.5312125,8.75002682 17.0624638,8.75002682 L17.0624638,8.75002682 L11.4374772,8.75002682 L9.18748257,6.50003219 L3.56249598,6.50003219 C3.09374727,6.50003219 2.69531037,6.66409447 2.36718633,6.99221851 C2.03906229,7.32034255 1.875,7.71877946 1.875,8.18752816 L1.875,8.18752816 L1.875,17.9609424 Z M17.519494,20 C17.9179303,20 18.2929296,19.900391 18.6444913,19.7011726 C18.9960529,19.5019541 19.2655837,19.2265643 19.4530831,18.8750027 L19.4530831,18.8750027 L22.0194832,14.5156381 C22.1835455,14.2343887 22.1835455,13.9531394 22.0194832,13.6718901 C21.8554209,13.3906408 21.6093278,13.2500161 21.2812037,13.2500161 L21.2812037,13.2500161 L7.21873726,13.2500161 C6.82030089,13.2500161 6.4453016,13.3496251 6.09373994,13.5488435 C5.74217828,13.748062 5.47264749,14.0234517 5.28514812,14.3750134 L5.28514812,14.3750134 L2.71874799,18.734378 C2.5546857,19.0156273 2.5546857,19.2968767 2.71874799,19.578126 C2.88281028,19.8593753 3.12890344,20 3.45702748,20 L3.45702748,20 L17.519494,20 Z",
-    id: "f",
     fill: themeValues.singleIconColor,
     fillRule: "nonzero",
     mask: "url(#mask-2-accountssmall)"
@@ -13930,18 +13861,13 @@ var IconNeutral = function IconNeutral(_ref) {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     style: {
       margin: margin
-    }
+    },
+    "aria-label": "Neutral"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-neutral-group",
     fill: fill,
     fillRule: "nonzero",
     stroke: fill
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-neutral-Group-2"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-neutral-PasswordVerification-Empty"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    id: "icon-neutral-Oval",
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("circle", {
     cx: "9",
     cy: "9",
     r: "8.5"
@@ -13968,27 +13894,22 @@ var IconValid = function IconValid(_ref) {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     style: {
       margin: margin
-    }
+    },
+    "aria-label": "Valid"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-Authentication",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-00.1.0.1---HSS---Register---Already-Exists-Error",
     transform: "translate(-538.000000, -996.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-Password-Requirements",
     transform: "translate(457.000000, 938.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-Group-2",
     transform: "translate(81.000000, 20.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-PasswordVerification-Sucess",
     transform: "translate(0.000000, 38.000000)"
   }, /*#__PURE__*/React__default.createElement("circle", {
-    id: "icon-valid-Oval",
     stroke: bgFill,
     fill: bgFill,
     fillRule: "nonzero",
@@ -13996,13 +13917,10 @@ var IconValid = function IconValid(_ref) {
     cy: "9",
     r: "8.5"
   }), /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-baseline-check-24px",
     transform: "translate(2.000000, 2.000000)"
   }, /*#__PURE__*/React__default.createElement("polygon", {
-    id: "icon-valid-Path",
     points: "0 0 14 0 14 14 0 14"
   }), /*#__PURE__*/React__default.createElement("polygon", {
-    id: "icon-valid-Path-2",
     fill: iconFill,
     points: "5.25 9.4325 2.8175 7 1.98916667 7.8225 5.25 11.0833333 12.25 4.08333333 11.4275 3.26083333"
   }))))))));
@@ -14028,40 +13946,33 @@ var IconInvalid = function IconInvalid(_ref) {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     style: {
       margin: margin
-    }
+    },
+    "aria-label": "Invalid"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-Authentication",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-00.1.0.1---HSS---Register---Already-Exists-Error",
     transform: "translate(-538.000000, -1064.000000)",
     fillRule: "nonzero"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-Password-Requirements",
     transform: "translate(457.000000, 938.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-Group-2",
     transform: "translate(81.000000, 20.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-PasswordVerification-Error",
     transform: "translate(0.000000, 106.000000)"
   }, /*#__PURE__*/React__default.createElement("circle", {
-    id: "icon-invalid-Oval",
     stroke: bgFill,
     fill: bgFill,
     cx: "9",
     cy: "9",
     r: "8.5"
   }), /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-Icon/Close",
     transform: "translate(2.000000, 2.000000)",
     fill: iconFill
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M7.58333333,7.58333333 L7.58333333,11.6666667 L6.41666667,11.6666667 L6.41666667,7.58333333 L2.33333333,7.58333333 L2.33333333,6.41666667 L6.41666667,6.41666667 L6.41666667,2.33333333 L7.58333333,2.33333333 L7.58333333,6.41666667 L11.6666667,6.41666667 L11.6666667,7.58333333 L7.58333333,7.58333333 Z",
-    id: "icon-invalid-x",
     transform: "translate(7.000000, 7.000000) rotate(45.000000) translate(-7.000000, -7.000000) "
   }))))))));
 };
@@ -14294,19 +14205,24 @@ var fallbackValues$4 = {
 var Alert = function Alert(_ref) {
   var heading = _ref.heading,
       text = _ref.text,
-      textOverride = _ref.textOverride,
       variant = _ref.variant,
       children = _ref.children,
       height = _ref.height,
       onLinkClick = _ref.onLinkClick,
-      _ref$padding = _ref.padding,
-      padding = _ref$padding === void 0 ? "0.5rem" : _ref$padding,
       _ref$showQuitLink = _ref.showQuitLink,
       showQuitLink = _ref$showQuitLink === void 0 ? true : _ref$showQuitLink,
-      maxContentWidth = _ref.maxContentWidth,
       themeValues = _ref.themeValues;
   var Icon = AlertIcons[variant];
-  var content = /*#__PURE__*/React__default.createElement(Sidebar, {
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.5rem",
+    width: "100%",
+    minHeight: "100px",
+    height: height ? height : "auto",
+    background: themeValues.background,
+    borderRadius: "4px",
+    borderColor: themeValues.border,
+    borderSize: "1px"
+  }, /*#__PURE__*/React__default.createElement(Sidebar, {
     width: "24px",
     childGap: "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -14326,11 +14242,11 @@ var Alert = function Alert(_ref) {
     width: "24px",
     childGap: "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "".concat(padding, " 1rem")
+    padding: "1rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
-  }, textOverride ? textOverride : /*#__PURE__*/React__default.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
     fullHeight: true,
     childGap: "0.25rem"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -14347,19 +14263,7 @@ var Alert = function Alert(_ref) {
     padding: "0",
     minHeight: "100%",
     onClick: onLinkClick
-  }, /*#__PURE__*/React__default.createElement(IconQuit, null))))));
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: padding,
-    width: "100%",
-    minHeight: height && parseInt(height) < 100 ? height : "100px",
-    height: height ? height : "auto",
-    background: themeValues.background,
-    borderRadius: "4px",
-    borderColor: themeValues.border,
-    borderSize: "1px"
-  }, maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
-    maxWidth: maxContentWidth
-  }, content) : content);
+  }, /*#__PURE__*/React__default.createElement(IconQuit, null)))))));
 };
 
 var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$4, "info");
@@ -14705,8 +14609,8 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   var themeValues = createThemeValues(themeContext, fallbackValues$7, "Breadcrumb");
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    role: "region",
-    "aria-level": "Breadcrumb navigation"
+    as: "nav",
+    "aria-label": "Breadcrumb navigation"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
@@ -14717,6 +14621,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     return /*#__PURE__*/React__default.createElement(React.Fragment, {
       key: "breadcrumb-".concat(linkText)
     }, /*#__PURE__*/React__default.createElement(InternalLink, {
+      "aria-current": index === breadcrumbsList.length - 1 && "location",
       to: linkDestination,
       active: isActive.toString(),
       color: themeValues.color,
@@ -15407,7 +15312,7 @@ _curry2(function nth(offset, list) {
  *
  * @func
  * @memberOf R
- * @since v0.27.0
+ * @since v0.27.1
  * @category Object
  * @typedefn Idx = [String | Int]
  * @sig [Idx] -> {a} -> [a | Undefined]
@@ -16563,6 +16468,7 @@ var Checkbox = function Checkbox(_ref4) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
+    "aria-label": name,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1"
@@ -16677,7 +16583,8 @@ var RadioButton = function RadioButton(_ref3) {
       name = _ref3.name;
   return /*#__PURE__*/React__default.createElement(RadioButtonBorder, {
     isSelected: isSelected,
-    name: name
+    name: name,
+    "aria-checked": isSelected
   }, isSelected && /*#__PURE__*/React__default.createElement(RadioButtonCenter, null));
 };
 
@@ -16723,6 +16630,8 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
       name = _ref.name,
       imageUrl = _ref.imageUrl,
       image = _ref.image,
+      _ref$imageAlt = _ref.imageAlt,
+      imageAlt = _ref$imageAlt === void 0 ? "checkbox icon" : _ref$imageAlt,
       disabled = _ref.disabled,
       borderColor = _ref.borderColor,
       color = _ref.color,
@@ -16746,6 +16655,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     id: "checkbox-".concat(name, "-").concat(index)
   }), /*#__PURE__*/React__default.createElement(CheckboxLabel, {
     name: name,
+    "aria-label": name,
     htmlFor: "checkbox-".concat(name, "-").concat(index),
     onClick: disabled ? noop : onSelect,
     onKeyDown: disabled ? noop : onSelect,
@@ -16765,7 +16675,8 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     justify: "flex-start",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(CheckboxItemIcon, {
-    src: imageUrl
+    src: imageUrl,
+    alt: imageAlt
   }))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0rem 0.5rem 0rem 0rem",
     hiddenStyles: !image
@@ -17067,7 +16978,7 @@ var Dropdown = function Dropdown(_ref7) {
     tabIndex: 0,
     padding: "0",
     width: "100%",
-    focusStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
+    hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     "aria-expanded": isOpen
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "button",
@@ -17075,7 +16986,6 @@ var Dropdown = function Dropdown(_ref7) {
     width: "100%",
     padding: "12px",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
-    focusStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
     borderRadius: "2px",
@@ -17085,6 +16995,7 @@ var Dropdown = function Dropdown(_ref7) {
     direction: "row",
     bottomItem: 2
   }, isOpen ? /*#__PURE__*/React__default.createElement(SearchInput, {
+    "aria-label": inputValue || "Dropdown awaiting search value",
     value: inputValue,
     onChange: noop,
     themeValues: themeValues
@@ -17097,7 +17008,7 @@ var Dropdown = function Dropdown(_ref7) {
   }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
     open: isOpen,
     ref: dropdownRef,
-    tabIndex: -1
+    tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, filteredOptions.map(function (choice, i) {
@@ -18139,13 +18050,13 @@ var DisplayCard = function DisplayCard(_ref) {
     variant: "smallGhost",
     dataQa: buttonText,
     extraStyles: "min-width: 0;"
-  }) : buttonAction ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+  }) : /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: buttonText,
     action: buttonAction,
     variant: "smallGhost",
     dataQa: buttonText,
     extraStyles: "min-width: 0;"
-  }) : /*#__PURE__*/React__default.createElement(React.Fragment, null))))));
+  }))))));
 };
 
 var src = createCommonjsModule(function (module, exports) {
@@ -18544,7 +18455,8 @@ var InputField = styled__default.input(_templateObject$p(), function (_ref) {
 
 var FormattedInputField = styled__default(function (_ref5) {
   var showErrors = _ref5.showErrors,
-      props = _objectWithoutProperties(_ref5, ["showErrors"]);
+      themeValues = _ref5.themeValues,
+      props = _objectWithoutProperties(_ref5, ["showErrors", "themeValues"]);
 
   return /*#__PURE__*/React__default.createElement(src_1, props);
 })(_templateObject2$d(), function (_ref6) {
@@ -18595,10 +18507,12 @@ var FormInput = function FormInput(_ref9) {
     justify: "space-between",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
     color: themeValues.labelColor,
     variant: "pS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }"
+    extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
+    id: labelTextWhenNoError.replace(/\s+/g, "-")
   }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Text$1, {
     color: themeValues.linkColor,
     variant: "pS",
@@ -18610,11 +18524,12 @@ var FormInput = function FormInput(_ref9) {
     justify: "space-between",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
     color: themeValues.labelColor,
     variant: "pS",
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
-    id: labelTextWhenNoError
+    id: labelTextWhenNoError.replace(/\s+/g, "-")
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -18635,7 +18550,7 @@ var FormInput = function FormInput(_ref9) {
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
-    "aria-labelledby": labelTextWhenNoError,
+    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     onChange: function onChange(e) {
       return fieldActions.set(e);
     },
@@ -18649,7 +18564,7 @@ var FormInput = function FormInput(_ref9) {
     "data-qa": labelTextWhenNoError,
     themeValues: themeValues
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
-    "aria-labelledby": labelTextWhenNoError,
+    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     onChange: function onChange(e) {
       return fieldActions.set(e.target.value);
     },
@@ -18938,13 +18853,14 @@ var HamburgerButton = function HamburgerButton(_ref4) {
       inactiveColor = _ref4.inactiveColor,
       isActive = _ref4.isActive,
       _ref4$onClick = _ref4.onClick,
-      onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick;
+      onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick,
+      controls = _ref4.controls;
   return /*#__PURE__*/React__default.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
     onClick: onClick,
     type: "button",
-    ariaLabel: "Menu",
-    ariaControls: "navigation"
+    "aria-label": "Menu",
+    "aria-controls": controls
   }, /*#__PURE__*/React__default.createElement(HamburgerBox, null, /*#__PURE__*/React__default.createElement(HamburgerInner, {
     className: isActive === true ? "active" : "",
     inactiveColor: inactiveColor,
@@ -19751,6 +19667,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     animate: radioOn ? radioFocused ? "onFocused" : "on" : radioFocused ? "offFocused" : "off"
   }, /*#__PURE__*/React__default.createElement(HiddenRadioButton, {
     id: "#radio-".concat(name),
+    "aria-label": name,
     disabled: disabled,
     onClick: toggleRadio,
     tabIndex: "-1"
@@ -30556,6 +30473,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     extraStyles: "display: flex; align-items: center;",
     dataQa: dataQa
   }, /*#__PURE__*/React__default.createElement(HiddenToggleSwitchBox, {
+    "aria-label": name,
     checked: isOn,
     onChange: disabled ? noop : onToggle,
     disabled: disabled,
@@ -30580,401 +30498,378 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
 
 var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$o);
 
-var validatorToPredicate = function validatorToPredicate(validatorFn, emptyCase) {
-  return function (value) {
-    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      rest[_key - 1] = arguments[_key];
-    }
+const validatorToPredicate = (validatorFn, emptyCase) => (
+  value,
+  ...rest
+) => (value === "" ? emptyCase : validatorFn(value, ...rest));
 
-    return value === "" ? emptyCase : validatorFn.apply(void 0, [value].concat(rest));
-  };
-};
 /* eslint-disable no-unused-vars */
 
-
-var createValidator = function createValidator(type, error) {
-  var validator = function validator() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    return {
-      type: type,
-      args: args,
-      error: error
-    };
-  };
-
+const createValidator = (type, error) => {
+  let validator = (...args) => ({ type, args, error });
   validator.error = error;
   return validator;
 };
 
-var validatorFns = {};
-var REQUIRED = "validator/REQUIRED";
-var REQUIRED_ERROR = "error/REQUIRED";
-var required = createValidator(REQUIRED, REQUIRED_ERROR);
-
-validatorFns[REQUIRED] = function (value, args, form) {
-  return value !== "";
-};
-
-var ONLY_INTEGERS = "validator/ONLY_INTEGERS";
-var ONLY_INTEGERS_ERROR = "error/ONLY_INTEGERS";
-var onlyIntegers = createValidator(ONLY_INTEGERS, ONLY_INTEGERS_ERROR);
-
-validatorFns[ONLY_INTEGERS] = function (value, args, form) {
-  return /^(-?\d+)?$/.test(value);
-};
+let validatorFns = {};
 
-var ONLY_NATURALS = "validator/ONLY_NATURALS";
-var ONLY_NATURALS_ERROR = "error/ONLY_NATURALS";
-var onlyNaturals = createValidator(ONLY_NATURALS, ONLY_NATURALS_ERROR);
+const REQUIRED = "validator/REQUIRED";
+const REQUIRED_ERROR = "error/REQUIRED";
+const required = createValidator(REQUIRED, REQUIRED_ERROR);
+validatorFns[REQUIRED] = (value, args, form) => value !== "";
 
-validatorFns[ONLY_NATURALS] = function (value, args, form) {
-  return /^(\d+)?$/.test(value);
-};
+const ONLY_INTEGERS = "validator/ONLY_INTEGERS";
+const ONLY_INTEGERS_ERROR = "error/ONLY_INTEGERS";
+const onlyIntegers = createValidator(ONLY_INTEGERS, ONLY_INTEGERS_ERROR);
+validatorFns[ONLY_INTEGERS] = (value, args, form) => /^(-?\d+)?$/.test(value);
 
-var NUMBER_LESS_THAN = "validator/NUMBER_LESS_THAN";
-var NUMBER_LESS_THAN_ERROR = "error/NUMBER_LESS_THAN";
-var numberLessThan = createValidator(NUMBER_LESS_THAN, NUMBER_LESS_THAN_ERROR);
+const ONLY_NATURALS = "validator/ONLY_NATURALS";
+const ONLY_NATURALS_ERROR = "error/ONLY_NATURALS";
+const onlyNaturals = createValidator(ONLY_NATURALS, ONLY_NATURALS_ERROR);
+validatorFns[ONLY_NATURALS] = (value, args, form) => /^(\d+)?$/.test(value);
 
-validatorFns[NUMBER_LESS_THAN] = function (value, args, form) {
+const NUMBER_LESS_THAN = "validator/NUMBER_LESS_THAN";
+const NUMBER_LESS_THAN_ERROR = "error/NUMBER_LESS_THAN";
+const numberLessThan = createValidator(
+  NUMBER_LESS_THAN,
+  NUMBER_LESS_THAN_ERROR
+);
+validatorFns[NUMBER_LESS_THAN] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return Number(value) < args[0];
 };
 
-var NUMBER_LESS_THAN_OR_EQUAL_TO = "validator/NUMBER_LESS_THAN_OR_EQUAL_TO";
-var NUMBER_LESS_THAN_OR_EQUAL_TO_ERROR = "error/NUMBER_LESS_THAN_OR_EQUAL_TO";
-var numberLessThanOrEqualTo = createValidator(NUMBER_LESS_THAN_OR_EQUAL_TO, NUMBER_LESS_THAN_OR_EQUAL_TO_ERROR);
-
-validatorFns[NUMBER_LESS_THAN_OR_EQUAL_TO] = function (value, args, form) {
+const NUMBER_LESS_THAN_OR_EQUAL_TO =
+  "validator/NUMBER_LESS_THAN_OR_EQUAL_TO";
+const NUMBER_LESS_THAN_OR_EQUAL_TO_ERROR =
+  "error/NUMBER_LESS_THAN_OR_EQUAL_TO";
+const numberLessThanOrEqualTo = createValidator(
+  NUMBER_LESS_THAN_OR_EQUAL_TO,
+  NUMBER_LESS_THAN_OR_EQUAL_TO_ERROR
+);
+validatorFns[NUMBER_LESS_THAN_OR_EQUAL_TO] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return Number(value) <= args[0];
 };
 
-var NUMBER_GREATER_THAN = "validator/NUMBER_GREATER_THAN";
-var NUMBER_GREATER_THAN_ERROR = "error/NUMBER_GREATER_THAN";
-var numberGreaterThan = createValidator(NUMBER_GREATER_THAN, NUMBER_GREATER_THAN_ERROR);
-
-validatorFns[NUMBER_GREATER_THAN] = function (value, args, form) {
+const NUMBER_GREATER_THAN = "validator/NUMBER_GREATER_THAN";
+const NUMBER_GREATER_THAN_ERROR = "error/NUMBER_GREATER_THAN";
+const numberGreaterThan = createValidator(
+  NUMBER_GREATER_THAN,
+  NUMBER_GREATER_THAN_ERROR
+);
+validatorFns[NUMBER_GREATER_THAN] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return Number(value) > args[0];
 };
 
-var NUMBER_GREATER_THAN_OR_EQUAL_TO = "validator/NUMBER_GREATER_THAN_OR_EQUAL_TO";
-var NUMBER_GREATER_THAN_OR_EQUAL_TO_ERROR = "error/NUMBER_GREATER_THAN_OR_EQUAL_TO";
-var numberGreaterThanOrEqualTo = createValidator(NUMBER_GREATER_THAN_OR_EQUAL_TO, NUMBER_GREATER_THAN_OR_EQUAL_TO_ERROR);
-
-validatorFns[NUMBER_GREATER_THAN_OR_EQUAL_TO] = function (value, args, form) {
+const NUMBER_GREATER_THAN_OR_EQUAL_TO =
+  "validator/NUMBER_GREATER_THAN_OR_EQUAL_TO";
+const NUMBER_GREATER_THAN_OR_EQUAL_TO_ERROR =
+  "error/NUMBER_GREATER_THAN_OR_EQUAL_TO";
+const numberGreaterThanOrEqualTo = createValidator(
+  NUMBER_GREATER_THAN_OR_EQUAL_TO,
+  NUMBER_GREATER_THAN_OR_EQUAL_TO_ERROR
+);
+validatorFns[NUMBER_GREATER_THAN_OR_EQUAL_TO] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return Number(value) >= args[0];
 };
 
-var MATCHES_FIELD = "validator/MATCHES_FIELD";
-var MATCHES_FIELD_ERROR$1 = "error/MATCHES_FIELD";
-var matchesField = createValidator(MATCHES_FIELD, MATCHES_FIELD_ERROR$1);
-
-validatorFns[MATCHES_FIELD] = function (value, args, form) {
+const MATCHES_FIELD = "validator/MATCHES_FIELD";
+const MATCHES_FIELD_ERROR$1 = "error/MATCHES_FIELD";
+const matchesField = createValidator(MATCHES_FIELD, MATCHES_FIELD_ERROR$1);
+validatorFns[MATCHES_FIELD] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   if (form[args[0]] === undefined) {
-    throw new Error("".concat(args[0], " was passed to matchesField, but that field does not exist in the form"));
+    throw new Error(
+      `${args[0]} was passed to matchesField, but that field does not exist in the form`
+    );
   }
-
   return value === form[args[0]].rawValue;
 };
 
-var validateWhenErrorMessage = function validateWhenErrorMessage(type) {
-  return "".concat(type, " was passed to validateWhen, but that validator type does not exist.\n  Please check that you are only calling validator creator functions exported from\n  redux-freeform in your form config and that you didn't forget to\n  invoke the validator creator (you cannot pass the functions themselves to\n  createFormState). Also make sure you aren't passing validateWhen() to validateWhen\n  as the primary validator.");
-};
-
-var VALIDATE_WHEN = "validator/VALIDATE_WHEN";
-var VALIDATE_WHEN_ERROR = "error/VALIDATE_WHEN";
-
-var validateWhen = function validateWhen(dependentValidator, primaryValidator, optionalFieldName) {
-  return {
-    type: VALIDATE_WHEN,
-    args: [dependentValidator, primaryValidator, optionalFieldName],
-    error: dependentValidator.error
-  };
-};
-
+const validateWhenErrorMessage = type =>
+  `${type} was passed to validateWhen, but that validator type does not exist.
+  Please check that you are only calling validator creator functions exported from
+  redux-freeform in your form config and that you didn't forget to
+  invoke the validator creator (you cannot pass the functions themselves to
+  createFormState). Also make sure you aren't passing validateWhen() to validateWhen
+  as the primary validator.`;
+
+const VALIDATE_WHEN = "validator/VALIDATE_WHEN";
+const VALIDATE_WHEN_ERROR = "error/VALIDATE_WHEN";
+const validateWhen = (
+  dependentValidator,
+  primaryValidator,
+  optionalFieldName
+) => ({
+  type: VALIDATE_WHEN,
+  args: [dependentValidator, primaryValidator, optionalFieldName],
+  error: dependentValidator.error
+});
 validateWhen.error = VALIDATE_WHEN_ERROR;
+validatorFns[VALIDATE_WHEN] = (value, args, form) => {
+  const [dependentValidator, primaryValidator, optionalFieldName] = args;
+  const dependsOnOtherField = typeof optionalFieldName === "string";
 
-validatorFns[VALIDATE_WHEN] = function (value, args, form) {
-  var _args = _slicedToArray(args, 3),
-      dependentValidator = _args[0],
-      primaryValidator = _args[1],
-      optionalFieldName = _args[2];
-
-  var dependsOnOtherField = typeof optionalFieldName === "string";
-
-  if (primaryValidator.type === undefined || typeof validatorFns[primaryValidator.type] !== "function") {
+  if (
+    primaryValidator.type === undefined ||
+    typeof validatorFns[primaryValidator.type] !== "function"
+  ) {
     throw new Error(validateWhenErrorMessage(primaryValidator.type));
   }
-
   if (dependsOnOtherField && form[optionalFieldName] === undefined) {
-    throw new Error("".concat(args[2], " was passed to matchesField, but that field does not exist in the form"));
+    throw new Error(
+      `${args[2]} was passed to matchesField, but that field does not exist in the form`
+    );
   }
 
-  var primaryPredicate = validatorToPredicate(validatorFns[primaryValidator.type], false);
-  var primaryValue = dependsOnOtherField ? form[optionalFieldName].rawValue : value;
-  var primaryPredicatePassed = primaryPredicate(primaryValue, primaryValidator.args, form);
-  return primaryPredicatePassed ? validatorFns[dependentValidator.type](value, dependentValidator.args, form) : true;
-};
-
-var validateSumErrorMessage = function validateSumErrorMessage(type) {
-  return "".concat(type, " was passed to validateSum, but that validator type does not exist.\n  Please check that you are only calling validator creator functions exported from\n  redux-freeform in your form config and that you didn't forget to\n  invoke the validator creator (you cannot pass the functions themselves to\n  createFormState).");
-};
-
-var VALIDATE_SUM = "validator/VALIDATE_SUM";
-var VALIDATE_SUM_ERROR = "error/VALIDATE_SUM";
-
-var validateSum = function validateSum(validator, fieldNamesArray) {
-  return {
-    type: VALIDATE_SUM,
-    args: [validator, fieldNamesArray],
-    error: validator.error
-  };
-};
+  const primaryPredicate = validatorToPredicate(
+    validatorFns[primaryValidator.type],
+    false
+  );
+  const primaryValue = dependsOnOtherField
+    ? form[optionalFieldName].rawValue
+    : value;
+  const primaryPredicatePassed = primaryPredicate(
+    primaryValue,
+    primaryValidator.args,
+    form
+  );
 
+  return primaryPredicatePassed
+    ? validatorFns[dependentValidator.type](
+        value,
+        dependentValidator.args,
+        form
+      )
+    : true;
+};
+
+const validateSumErrorMessage = type =>
+  `${type} was passed to validateSum, but that validator type does not exist.
+  Please check that you are only calling validator creator functions exported from
+  redux-freeform in your form config and that you didn't forget to
+  invoke the validator creator (you cannot pass the functions themselves to
+  createFormState).`;
+const VALIDATE_SUM = "validator/VALIDATE_SUM";
+const VALIDATE_SUM_ERROR = "error/VALIDATE_SUM";
+const validateSum = (validator, fieldNamesArray) => ({
+  type: VALIDATE_SUM,
+  args: [validator, fieldNamesArray],
+  error: validator.error
+});
 validateSum.error = VALIDATE_SUM_ERROR;
+validatorFns[VALIDATE_SUM] = (value, args, form) => {
+  const [validator, fieldNamesArray] = args;
 
-validatorFns[VALIDATE_SUM] = function (value, args, form) {
-  var _args2 = _slicedToArray(args, 2),
-      validator = _args2[0],
-      fieldNamesArray = _args2[1];
-
-  if (validator.type === undefined || typeof validatorFns[validator.type] !== "function") {
+  if (
+    validator.type === undefined ||
+    typeof validatorFns[validator.type] !== "function"
+  ) {
     throw new Error(validateSumErrorMessage(validator.type));
   }
 
-  var _iterator = _createForOfIteratorHelper(fieldNamesArray),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var fieldName = _step.value;
-
-      if (form[fieldName] === undefined) {
-        throw new Error("".concat(fieldName, " was passed to matchesField, but that field does not exist in the form"));
-      }
+  for (const fieldName of fieldNamesArray) {
+    if (form[fieldName] === undefined) {
+      throw new Error(
+        `${fieldName} was passed to matchesField, but that field does not exist in the form`
+      );
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
   }
 
-  var sum = fieldNamesArray.reduce(function (acc, curr) {
-    return acc + Number(form[curr].rawValue);
-  }, Number(value));
+  const sum = fieldNamesArray.reduce(
+    (acc, curr) => acc + Number(form[curr].rawValue),
+    Number(value)
+  );
+
   return validatorFns[validator.type](sum, validator.args, form);
 };
 
-var HAS_LENGTH = "validator/HAS_LENGTH";
-var HAS_LENGTH_ERROR = "error/HAS_LENGTH";
-var hasLength = createValidator(HAS_LENGTH, HAS_LENGTH_ERROR);
-
-validatorFns[HAS_LENGTH] = function (value, args, form) {
+const HAS_LENGTH = "validator/HAS_LENGTH";
+const HAS_LENGTH_ERROR = "error/HAS_LENGTH";
+const hasLength = createValidator(HAS_LENGTH, HAS_LENGTH_ERROR);
+validatorFns[HAS_LENGTH] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
-  var min = args[0];
-  var max = args[1];
-
+  const min = args[0];
+  const max = args[1];
   if (max == undefined || min == undefined) {
-    throw new Error("Max and min need to be defined for hasLength, both or one of them is undefined");
+    throw new Error(
+      "Max and min need to be defined for hasLength, both or one of them is undefined"
+    );
   }
-
   if (max < min) {
-    throw new Error("hasLength validator was passed a min greater than the max");
+    throw new Error(
+      "hasLength validator was passed a min greater than the max"
+    );
   }
-
-  var valueLength = value.length;
+  const valueLength = value.length;
   return max >= valueLength && valueLength >= min;
 };
 
-var MATCHES_REGEX = "validator/MATCHES_REGEX";
-var MATCHES_REGEX_ERROR = "error/MATCHES_REGEX";
-var matchesRegex = createValidator(MATCHES_REGEX, MATCHES_REGEX_ERROR);
-
-validatorFns[MATCHES_REGEX] = function (value, args, form) {
+const MATCHES_REGEX = "validator/MATCHES_REGEX";
+const MATCHES_REGEX_ERROR = "error/MATCHES_REGEX";
+const matchesRegex = createValidator(MATCHES_REGEX, MATCHES_REGEX_ERROR);
+validatorFns[MATCHES_REGEX] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return new RegExp(args[0]).test(value); // new RexExp never throws an error, no matter the input
-}; // based on http://www.brainjar.com/js/validation/
-
-
-var IS_ROUTING_NUMBER = "validator/IS_ROUTING_NUMBER";
-var IS_ROUTING_NUMBER_ERROR = "error/IS_ROUTING_NUMBER";
-var isRoutingNumber = createValidator(IS_ROUTING_NUMBER, IS_ROUTING_NUMBER_ERROR);
+};
 
-validatorFns[IS_ROUTING_NUMBER] = function (value, args, form) {
+// based on http://www.brainjar.com/js/validation/
+const IS_ROUTING_NUMBER = "validator/IS_ROUTING_NUMBER";
+const IS_ROUTING_NUMBER_ERROR = "error/IS_ROUTING_NUMBER";
+const isRoutingNumber = createValidator(
+  IS_ROUTING_NUMBER,
+  IS_ROUTING_NUMBER_ERROR
+);
+validatorFns[IS_ROUTING_NUMBER] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   if (value.length != 9) {
     return false;
   }
-
-  var sum = value.split("").map(function (ch) {
-    return parseInt(ch);
-  }).reduce(function (acc, cur, idx) {
-    switch (idx % 3) {
-      case 0:
-        return acc + 3 * cur;
-
-      case 1:
-        return acc + 7 * cur;
-
-      case 2:
-        return acc + 1 * cur;
-    }
-  }, 0);
+  const sum = value
+    .split("")
+    .map(ch => parseInt(ch))
+    .reduce((acc, cur, idx) => {
+      switch (idx % 3) {
+        case 0:
+          return acc + 3 * cur;
+        case 1:
+          return acc + 7 * cur;
+        case 2:
+          return acc + 1 * cur;
+      }
+    }, 0);
   return sum != 0 && sum % 10 == 0;
 };
 
-var HAS_NUMBER = "validator/HAS_NUMBER";
-var HAS_NUMBER_ERROR$1 = "error/HAS_NUMBER";
-var hasNumber = createValidator(HAS_NUMBER, HAS_NUMBER_ERROR$1);
-
-validatorFns[HAS_NUMBER] = function (value, args, form) {
+const HAS_NUMBER = "validator/HAS_NUMBER";
+const HAS_NUMBER_ERROR$1 = "error/HAS_NUMBER";
+const hasNumber = createValidator(HAS_NUMBER, HAS_NUMBER_ERROR$1);
+validatorFns[HAS_NUMBER] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return new RegExp(/[0-9]/).test(value);
 };
 
-var HAS_LOWERCASE_LETTER = "validator/HAS_LOWERCASE_LETTER";
-var HAS_LOWERCASE_LETTER_ERROR$1 = "error/HAS_LOWERCASE_LETTER";
-var hasLowercaseLetter = createValidator(HAS_LOWERCASE_LETTER, HAS_LOWERCASE_LETTER_ERROR$1);
-
-validatorFns[HAS_LOWERCASE_LETTER] = function (value, args, form) {
+const HAS_LOWERCASE_LETTER = "validator/HAS_LOWERCASE_LETTER";
+const HAS_LOWERCASE_LETTER_ERROR$1 = "error/HAS_LOWERCASE_LETTER";
+const hasLowercaseLetter = createValidator(
+  HAS_LOWERCASE_LETTER,
+  HAS_LOWERCASE_LETTER_ERROR$1
+);
+validatorFns[HAS_LOWERCASE_LETTER] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return new RegExp(/[a-z]/).test(value);
 };
 
-var HAS_UPPERCASE_LETTER = "validator/HAS_UPPERCASE_LETTER";
-var HAS_UPPERCASE_LETTER_ERROR$1 = "error/HAS_UPPERCASE_LETTER";
-var hasUppercaseLetter = createValidator(HAS_UPPERCASE_LETTER, HAS_UPPERCASE_LETTER_ERROR$1);
-
-validatorFns[HAS_UPPERCASE_LETTER] = function (value, args, form) {
+const HAS_UPPERCASE_LETTER = "validator/HAS_UPPERCASE_LETTER";
+const HAS_UPPERCASE_LETTER_ERROR$1 = "error/HAS_UPPERCASE_LETTER";
+const hasUppercaseLetter = createValidator(
+  HAS_UPPERCASE_LETTER,
+  HAS_UPPERCASE_LETTER_ERROR$1
+);
+validatorFns[HAS_UPPERCASE_LETTER] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return new RegExp(/[A-Z]/).test(value);
 };
 
-var HAS_SPECIAL_CHARACTER = "validator/HAS_SPECIAL_CHARACTER";
-var HAS_SPECIAL_CHARACTER_ERROR$1 = "error/HAS_SPECIAL_CHARACTER";
-var hasSpecialCharacter = createValidator(HAS_SPECIAL_CHARACTER, HAS_SPECIAL_CHARACTER_ERROR$1);
-
-validatorFns[HAS_SPECIAL_CHARACTER] = function (value, args, form) {
+const HAS_SPECIAL_CHARACTER = "validator/HAS_SPECIAL_CHARACTER";
+const HAS_SPECIAL_CHARACTER_ERROR$1 = "error/HAS_SPECIAL_CHARACTER";
+const hasSpecialCharacter = createValidator(
+  HAS_SPECIAL_CHARACTER,
+  HAS_SPECIAL_CHARACTER_ERROR$1
+);
+validatorFns[HAS_SPECIAL_CHARACTER] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return new RegExp(/[!@#$%^&*.?]/).test(value);
 };
 
-var IS_PROBABLY_EMAIL = "validator/IS_PROBABLY_EMAIL";
-var IS_PROBABLY_EMAIL_ERROR = "error/IS_PROBABLY_EMAIL";
-var isProbablyEmail = createValidator(IS_PROBABLY_EMAIL, IS_PROBABLY_EMAIL_ERROR);
-
-validatorFns[IS_PROBABLY_EMAIL] = function (value, args, form) {
+const IS_PROBABLY_EMAIL = "validator/IS_PROBABLY_EMAIL";
+const IS_PROBABLY_EMAIL_ERROR = "error/IS_PROBABLY_EMAIL";
+const isProbablyEmail = createValidator(
+  IS_PROBABLY_EMAIL,
+  IS_PROBABLY_EMAIL_ERROR
+);
+validatorFns[IS_PROBABLY_EMAIL] = (value, args, form) => {
   if (value === "") {
     return true;
   }
-
   return new RegExp(/^\S+@\S+\.\S+$/).test(value);
 };
 
-var runValidatorErrorMessage = function runValidatorErrorMessage(type) {
-  return "".concat(type, " was passed to runValidator, but that validator type does not exist. \n  Please check that you are only calling validator creator functions exported from \n  redux-freeform in your form config and that you didn't forget to \n  invoke the validator creator (you cannot pass the functions themselves to \n  createFormState)");
-};
-
-var runValidator = function runValidator(validator, value, form) {
-  var validatorFn = validatorFns[validator.type];
+const runValidatorErrorMessage = type =>
+  `${type} was passed to runValidator, but that validator type does not exist. 
+  Please check that you are only calling validator creator functions exported from 
+  redux-freeform in your form config and that you didn't forget to 
+  invoke the validator creator (you cannot pass the functions themselves to 
+  createFormState)`;
 
+const runValidator = (validator, value, form) => {
+  const validatorFn = validatorFns[validator.type];
   if (validatorFn === undefined) {
     throw new Error(runValidatorErrorMessage(validator.type));
   }
-
   return validatorFn(value, validator.args, form) ? null : validator.error;
 };
 
-var _computeErrors = function _computeErrors(fieldName, form, validators) {
-  return validators.map(function (v) {
-    return runValidator(v, form[fieldName].rawValue, form);
-  }).filter(function (x) {
-    return x !== null;
-  });
+const _computeErrors = (fieldName, form, validators) => {
+  return validators
+    .map(v => runValidator(v, form[fieldName].rawValue, form))
+    .filter(x => x !== null);
 };
 
-var computeConstraints = function computeConstraints(fieldName, form) {
-  var constraints = form[fieldName].constraints;
+const computeConstraints = (fieldName, form) => {
+  const constraints = form[fieldName].constraints;
   return _computeErrors(fieldName, form, constraints);
 };
 
-var computeErrors = function computeErrors(fieldName, form) {
-  var validators = form[fieldName].validators;
+const computeErrors = (fieldName, form) => {
+  const validators = form[fieldName].validators;
   return _computeErrors(fieldName, form, validators);
 };
 
 var obj;
-var NOTHING = typeof Symbol !== "undefined" ? Symbol("immer-nothing") : (obj = {}, obj["immer-nothing"] = true, obj);
-var DRAFTABLE = typeof Symbol !== "undefined" && Symbol["for"] ? Symbol["for"]("immer-draftable") : "__$immer_draftable";
-var DRAFT_STATE = typeof Symbol !== "undefined" && Symbol["for"] ? Symbol["for"]("immer-state") : "__$immer_state";
-
+var NOTHING = typeof Symbol !== "undefined" ? Symbol("immer-nothing") : ( obj = {}, obj["immer-nothing"] = true, obj );
+var DRAFTABLE = typeof Symbol !== "undefined" && Symbol.for ? Symbol.for("immer-draftable") : "__$immer_draftable";
+var DRAFT_STATE = typeof Symbol !== "undefined" && Symbol.for ? Symbol.for("immer-state") : "__$immer_state";
 function isDraft(value) {
   return !!value && !!value[DRAFT_STATE];
 }
-
 function isDraftable(value) {
-  if (!value) {
-    return false;
-  }
-
+  if (!value) { return false; }
   return isPlainObject(value) || !!value[DRAFTABLE] || !!value.constructor[DRAFTABLE];
 }
-
 function isPlainObject(value) {
-  if (!value || _typeof(value) !== "object") {
-    return false;
-  }
-
-  if (Array.isArray(value)) {
-    return true;
-  }
-
+  if (!value || typeof value !== "object") { return false; }
+  if (Array.isArray(value)) { return true; }
   var proto = Object.getPrototypeOf(value);
   return !proto || proto === Object.prototype;
 }
-
 var assign = Object.assign || function assign(target, value) {
   for (var key in value) {
     if (has(value, key)) {
@@ -30984,18 +30879,11 @@ var assign = Object.assign || function assign(target, value) {
 
   return target;
 };
-
-var ownKeys$1 = typeof Reflect !== "undefined" && Reflect.ownKeys ? Reflect.ownKeys : typeof Object.getOwnPropertySymbols !== "undefined" ? function (obj) {
-  return Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj));
-} : Object.getOwnPropertyNames;
-
+var ownKeys$1 = typeof Reflect !== "undefined" && Reflect.ownKeys ? Reflect.ownKeys : typeof Object.getOwnPropertySymbols !== "undefined" ? function (obj) { return Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)); } : Object.getOwnPropertyNames;
 function shallowCopy(base, invokeGetters) {
-  if (invokeGetters === void 0) invokeGetters = false;
-
-  if (Array.isArray(base)) {
-    return base.slice();
-  }
+  if ( invokeGetters === void 0 ) invokeGetters = false;
 
+  if (Array.isArray(base)) { return base.slice(); }
   var clone = Object.create(Object.getPrototypeOf(base));
   ownKeys$1(base).forEach(function (key) {
     if (key === DRAFT_STATE) {
@@ -31025,28 +30913,20 @@ function shallowCopy(base, invokeGetters) {
   });
   return clone;
 }
-
 function each(value, cb) {
   if (Array.isArray(value)) {
-    for (var i = 0; i < value.length; i++) {
-      cb(i, value[i], value);
-    }
+    for (var i = 0; i < value.length; i++) { cb(i, value[i], value); }
   } else {
-    ownKeys$1(value).forEach(function (key) {
-      return cb(key, value[key], value);
-    });
+    ownKeys$1(value).forEach(function (key) { return cb(key, value[key], value); });
   }
 }
-
 function isEnumerable(base, prop) {
   var desc = Object.getOwnPropertyDescriptor(base, prop);
   return !!desc && desc.enumerable;
 }
-
 function has(thing, prop) {
   return Object.prototype.hasOwnProperty.call(thing, prop);
 }
-
 function is(x, y) {
   // From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
   if (x === y) {
@@ -31055,26 +30935,17 @@ function is(x, y) {
     return x !== x && y !== y;
   }
 }
-
 function clone(obj) {
-  if (!isDraftable(obj)) {
-    return obj;
-  }
-
-  if (Array.isArray(obj)) {
-    return obj.map(clone);
-  }
-
+  if (!isDraftable(obj)) { return obj; }
+  if (Array.isArray(obj)) { return obj.map(clone); }
   var cloned = Object.create(Object.getPrototypeOf(obj));
 
-  for (var key in obj) {
-    cloned[key] = clone(obj[key]);
-  }
+  for (var key in obj) { cloned[key] = clone(obj[key]); }
 
   return cloned;
 }
-/** Each scope represents a `produce` call. */
 
+/** Each scope represents a `produce` call. */
 
 var ImmerScope = function ImmerScope(parent) {
   this.drafts = [];
@@ -31086,7 +30957,7 @@ var ImmerScope = function ImmerScope(parent) {
   this.patches = null;
 };
 
-ImmerScope.prototype.usePatches = function usePatches(patchListener) {
+ImmerScope.prototype.usePatches = function usePatches (patchListener) {
   if (patchListener) {
     this.patches = [];
     this.inversePatches = [];
@@ -31094,18 +30965,17 @@ ImmerScope.prototype.usePatches = function usePatches(patchListener) {
   }
 };
 
-ImmerScope.prototype.revoke = function revoke$1() {
+ImmerScope.prototype.revoke = function revoke$1 () {
   this.leave();
   this.drafts.forEach(revoke);
   this.drafts = null; // Make draft-related methods throw.
 };
 
-ImmerScope.prototype.leave = function leave() {
+ImmerScope.prototype.leave = function leave () {
   if (this === ImmerScope.current) {
     ImmerScope.current = this.parent;
   }
 };
-
 ImmerScope.current = null;
 
 ImmerScope.enter = function () {
@@ -31114,11 +30984,11 @@ ImmerScope.enter = function () {
 
 function revoke(draft) {
   draft[DRAFT_STATE].revoke();
-} // but share them all instead
+}
 
+// but share them all instead
 
 var descriptors = {};
-
 function willFinalize(scope, result, isReplaced) {
   scope.drafts.forEach(function (draft) {
     draft[DRAFT_STATE].finalizing = true;
@@ -31136,7 +31006,6 @@ function willFinalize(scope, result, isReplaced) {
       markChangesSweep(scope.drafts);
     }
 }
-
 function createProxy(base, parent) {
   var isArray = Array.isArray(base);
   var draft = clonePotentialDraft(base);
@@ -31190,11 +31059,7 @@ function peek(draft, prop) {
 function get(state, prop) {
   assertUnrevoked(state);
   var value = peek(source(state), prop);
-
-  if (state.finalizing) {
-    return value;
-  } // Create a draft if the value is unmodified.
-
+  if (state.finalizing) { return value; } // Create a draft if the value is unmodified.
 
   if (value === peek(state.base, prop) && isDraftable(value)) {
     prepareCopy(state);
@@ -31209,10 +31074,7 @@ function set(state, prop, value) {
   state.assigned[prop] = true;
 
   if (!state.modified) {
-    if (is(value, peek(source(state), prop))) {
-      return;
-    }
-
+    if (is(value, peek(source(state), prop))) { return; }
     markChanged(state);
     prepareCopy(state);
   }
@@ -31223,17 +31085,12 @@ function set(state, prop, value) {
 function markChanged(state) {
   if (!state.modified) {
     state.modified = true;
-
-    if (state.parent) {
-      markChanged(state.parent);
-    }
+    if (state.parent) { markChanged(state.parent); }
   }
 }
 
 function prepareCopy(state) {
-  if (!state.copy) {
-    state.copy = clonePotentialDraft(state.base);
-  }
+  if (!state.copy) { state.copy = clonePotentialDraft(state.base); }
 }
 
 function clonePotentialDraft(base) {
@@ -31258,12 +31115,15 @@ function proxyProperty(draft, prop, enumerable) {
     descriptors[prop] = desc = {
       configurable: true,
       enumerable: enumerable,
+
       get: function get$1() {
         return get(this[DRAFT_STATE], prop);
       },
+
       set: function set$1(value) {
         set(this[DRAFT_STATE], prop, value);
       }
+
     };
   }
 
@@ -31271,9 +31131,7 @@ function proxyProperty(draft, prop, enumerable) {
 }
 
 function assertUnrevoked(state) {
-  if (state.revoked === true) {
-    throw new Error("Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? " + JSON.stringify(source(state)));
-  }
+  if (state.revoked === true) { throw new Error("Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? " + JSON.stringify(source(state))); }
 } // This looks expensive, but only proxies are visited, and only objects without known changes are scanned.
 
 
@@ -31287,27 +31145,16 @@ function markChangesSweep(drafts) {
 
     if (!state.modified) {
       if (Array.isArray(state.base)) {
-        if (hasArrayChanges(state)) {
-          markChanged(state);
-        }
-      } else if (hasObjectChanges(state)) {
-        markChanged(state);
-      }
+        if (hasArrayChanges(state)) { markChanged(state); }
+      } else if (hasObjectChanges(state)) { markChanged(state); }
     }
   }
 }
 
 function markChangesRecursively(object) {
-  if (!object || _typeof(object) !== "object") {
-    return;
-  }
-
+  if (!object || typeof object !== "object") { return; }
   var state = object[DRAFT_STATE];
-
-  if (!state) {
-    return;
-  }
-
+  if (!state) { return; }
   var base = state.base;
   var draft = state.draft;
   var assigned = state.assigned;
@@ -31337,20 +31184,14 @@ function markChangesRecursively(object) {
     assigned.length = true;
 
     if (draft.length < base.length) {
-      for (var i = draft.length; i < base.length; i++) {
-        assigned[i] = false;
-      }
+      for (var i = draft.length; i < base.length; i++) { assigned[i] = false; }
     } else {
-      for (var i$1 = base.length; i$1 < draft.length; i$1++) {
-        assigned[i$1] = true;
-      }
+      for (var i$1 = base.length; i$1 < draft.length; i$1++) { assigned[i$1] = true; }
     }
 
     for (var i$2 = 0; i$2 < draft.length; i$2++) {
       // Only untouched indices trigger recursion.
-      if (assigned[i$2] === undefined) {
-        markChangesRecursively(draft[i$2]);
-      }
+      if (assigned[i$2] === undefined) { markChangesRecursively(draft[i$2]); }
     }
   }
 }
@@ -31387,10 +31228,7 @@ function hasObjectChanges(state) {
 
 function hasArrayChanges(state) {
   var draft = state.draft;
-
-  if (draft.length !== state.base.length) {
-    return true;
-  } // See #116
+  if (draft.length !== state.base.length) { return true; } // See #116
   // If we first shorten the length, our array interceptors will be removed.
   // If after that new items are added, result in the same original length,
   // those last items will have no intercepting property.
@@ -31398,13 +31236,9 @@ function hasArrayChanges(state) {
   // N.B.: splice, unshift, etc only shift values around, but not prop descriptors, so we only have to check
   // the last one
 
-
   var descriptor = Object.getOwnPropertyDescriptor(draft, draft.length - 1); // descriptor can be null, but only for newly created sparse arrays, eg. new Array(10)
 
-  if (descriptor && !descriptor.get) {
-    return true;
-  } // For all other cases, we don't have to compare, as they would have been picked up by the index setters
-
+  if (descriptor && !descriptor.get) { return true; } // For all other cases, we don't have to compare, as they would have been picked up by the index setters
 
   return false;
 }
@@ -31418,12 +31252,11 @@ function createHiddenProperty(target, prop, value) {
 }
 
 var legacyProxy = /*#__PURE__*/Object.freeze({
-  willFinalize: willFinalize,
-  createProxy: createProxy
+	willFinalize: willFinalize,
+	createProxy: createProxy
 });
 
 function willFinalize$1() {}
-
 function createProxy$1(base, parent) {
   var scope = parent ? parent.scope : ImmerScope.current;
   var state = {
@@ -31458,27 +31291,33 @@ function createProxy$1(base, parent) {
   scope.drafts.push(proxy);
   return proxy;
 }
-
 var objectTraps = {
   get: get$1,
+
   has: function has(target, prop) {
     return prop in source$1(target);
   },
+
   ownKeys: function ownKeys(target) {
     return Reflect.ownKeys(source$1(target));
   },
+
   set: set$1,
   deleteProperty: deleteProperty,
   getOwnPropertyDescriptor: getOwnPropertyDescriptor,
+
   defineProperty: function defineProperty() {
     throw new Error("Object.defineProperty() cannot be used on an Immer draft"); // prettier-ignore
   },
+
   getPrototypeOf: function getPrototypeOf(target) {
     return Object.getPrototypeOf(target.base);
   },
+
   setPrototypeOf: function setPrototypeOf() {
     throw new Error("Object.setPrototypeOf() cannot be used on an Immer draft"); // prettier-ignore
   }
+
 };
 var arrayTraps = {};
 each(objectTraps, function (key, fn) {
@@ -31517,10 +31356,7 @@ function peek$1(draft, prop) {
 }
 
 function get$1(state, prop) {
-  if (prop === DRAFT_STATE) {
-    return state;
-  }
-
+  if (prop === DRAFT_STATE) { return state; }
   var drafts = state.drafts; // Check for existing draft in unmodified state.
 
   if (!state.modified && has(drafts, prop)) {
@@ -31536,10 +31372,7 @@ function get$1(state, prop) {
 
   if (state.modified) {
     // Assigned values are never drafted. This catches any drafts we created, too.
-    if (value !== peek$1(state.base, prop)) {
-      return value;
-    } // Store drafts on the copy (when one exists).
-
+    if (value !== peek$1(state.base, prop)) { return value; } // Store drafts on the copy (when one exists).
 
     drafts = state.copy;
   }
@@ -31554,11 +31387,7 @@ function set$1(state, prop, value) {
     // values may be drafts, but falsy values are never drafts.
 
     var isUnchanged = value ? is(baseValue, value) || value === state.drafts[prop] : is(baseValue, value) && prop in state.base;
-
-    if (isUnchanged) {
-      return true;
-    }
-
+    if (isUnchanged) { return true; }
     markChanged$1(state);
   }
 
@@ -31577,10 +31406,7 @@ function deleteProperty(state, prop) {
     delete state.assigned[prop];
   }
 
-  if (state.copy) {
-    delete state.copy[prop];
-  }
-
+  if (state.copy) { delete state.copy[prop]; }
   return true;
 } // Note: We never coerce `desc.value` into an Immer draft, because we can't make
 // the same guarantee in ES5 mode.
@@ -31603,16 +31429,13 @@ function markChanged$1(state) {
     state.modified = true;
     state.copy = assign(shallowCopy(state.base), state.drafts);
     state.drafts = null;
-
-    if (state.parent) {
-      markChanged$1(state.parent);
-    }
+    if (state.parent) { markChanged$1(state.parent); }
   }
 }
 
 var modernProxy = /*#__PURE__*/Object.freeze({
-  willFinalize: willFinalize$1,
-  createProxy: createProxy$1
+	willFinalize: willFinalize$1,
+	createProxy: createProxy$1
 });
 
 function generatePatches(state, basePath, patches, inversePatches) {
@@ -31621,13 +31444,14 @@ function generatePatches(state, basePath, patches, inversePatches) {
 
 function generateArrayPatches(state, basePath, patches, inversePatches) {
   var assign, assign$1;
+
   var base = state.base;
   var copy = state.copy;
   var assigned = state.assigned; // Reduce complexity by ensuring `base` is never longer.
 
   if (copy.length < base.length) {
-    assign = [copy, base], base = assign[0], copy = assign[1];
-    assign$1 = [inversePatches, patches], patches = assign$1[0], inversePatches = assign$1[1];
+    (assign = [copy, base], base = assign[0], copy = assign[1]);
+    (assign$1 = [inversePatches, patches], patches = assign$1[0], inversePatches = assign$1[1]);
   }
 
   var delta = copy.length - base.length; // Find the first replaced index.
@@ -31685,11 +31509,7 @@ function generateObjectPatches(state, basePath, patches, inversePatches) {
     var origValue = base[key];
     var value = copy[key];
     var op = !assignedValue ? "remove" : key in base ? "replace" : "add";
-
-    if (origValue === value && op === "replace") {
-      return;
-    }
-
+    if (origValue === value && op === "replace") { return; }
     var path = basePath.concat(key);
     patches.push(op === "remove" ? {
       op: op,
@@ -31714,26 +31534,20 @@ function generateObjectPatches(state, basePath, patches, inversePatches) {
   });
 }
 
-var applyPatches = function applyPatches(draft, patches) {
+var applyPatches = function (draft, patches) {
   for (var i$1 = 0, list = patches; i$1 < list.length; i$1 += 1) {
     var patch = list[i$1];
+
     var path = patch.path;
     var op = patch.op;
     var value = clone(patch.value); // used to clone patch to ensure original patch is not modified, see #411
 
-    if (!path.length) {
-      throw new Error("Illegal state");
-    }
-
+    if (!path.length) { throw new Error("Illegal state"); }
     var base = draft;
 
     for (var i = 0; i < path.length - 1; i++) {
       base = base[path[i]];
-
-      if (!base || _typeof(base) !== "object") {
-        throw new Error("Cannot apply patch, path doesn't resolve: " + path.join("/"));
-      } // prettier-ignore
-
+      if (!base || typeof base !== "object") { throw new Error("Cannot apply patch, path doesn't resolve: " + path.join("/")); } // prettier-ignore
     }
 
     var key = path[path.length - 1];
@@ -31782,33 +31596,27 @@ var configDefaults = {
   onDelete: null,
   onCopy: null
 };
-
 var Immer = function Immer(config) {
   assign(this, configDefaults, config);
   this.setUseProxies(this.useProxies);
   this.produce = this.produce.bind(this);
 };
 
-Immer.prototype.produce = function produce(base, recipe, patchListener) {
-  var this$1 = this; // curried invocation
+Immer.prototype.produce = function produce (base, recipe, patchListener) {
+    var this$1 = this;
 
+  // curried invocation
   if (typeof base === "function" && typeof recipe !== "function") {
     var defaultBase = recipe;
     recipe = base;
     var self = this;
     return function curriedProduce(base) {
-      var this$1 = this;
-      if (base === void 0) base = defaultBase;
-      var args = [],
-          len = arguments.length - 1;
-
-      while (len-- > 0) {
-        args[len] = arguments[len + 1];
-      }
+        var this$1 = this;
+        if ( base === void 0 ) base = defaultBase;
+        var args = [], len = arguments.length - 1;
+        while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
 
-      return self.produce(base, function (draft) {
-        return recipe.call.apply(recipe, [this$1, draft].concat(args));
-      }); // prettier-ignore
+      return self.produce(base, function (draft) { return recipe.call.apply(recipe, [ this$1, draft ].concat( args )); }); // prettier-ignore
     };
   } // prettier-ignore
 
@@ -31834,11 +31642,7 @@ Immer.prototype.produce = function produce(base, recipe, patchListener) {
       hasError = false;
     } finally {
       // finally instead of catch + rethrow better preserves original stack
-      if (hasError) {
-        scope.revoke();
-      } else {
-        scope.leave();
-      }
+      if (hasError) { scope.revoke(); }else { scope.leave(); }
     }
 
     if (result instanceof Promise) {
@@ -31855,38 +31659,25 @@ Immer.prototype.produce = function produce(base, recipe, patchListener) {
     return this.processResult(result, scope);
   } else {
     result = recipe(base);
-
-    if (result === undefined) {
-      return base;
-    }
-
+    if (result === undefined) { return base; }
     return result !== NOTHING ? result : undefined;
   }
 };
 
-Immer.prototype.produceWithPatches = function produceWithPatches(arg1, arg2, arg3) {
-  var this$1 = this;
+Immer.prototype.produceWithPatches = function produceWithPatches (arg1, arg2, arg3) {
+    var this$1 = this;
 
   if (typeof arg1 === "function") {
     return function (state) {
-      var args = [],
-          len = arguments.length - 1;
-
-      while (len-- > 0) {
-        args[len] = arguments[len + 1];
-      }
+        var args = [], len = arguments.length - 1;
+        while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
 
-      return this$1.produceWithPatches(state, function (draft) {
-        return arg1.apply(void 0, [draft].concat(args));
-      });
-    };
+        return this$1.produceWithPatches(state, function (draft) { return arg1.apply(void 0, [ draft ].concat( args )); });
+      };
   } // non-curried form
 
 
-  if (arg3) {
-    throw new Error("A patch listener cannot be passed to produceWithPatches");
-  }
-
+  if (arg3) { throw new Error("A patch listener cannot be passed to produceWithPatches"); }
   var patches, inversePatches;
   var nextState = this.produce(arg1, arg2, function (p, ip) {
     patches = p;
@@ -31895,7 +31686,7 @@ Immer.prototype.produceWithPatches = function produceWithPatches(arg1, arg2, arg
   return [nextState, patches, inversePatches];
 };
 
-Immer.prototype.createDraft = function createDraft(base) {
+Immer.prototype.createDraft = function createDraft (base) {
   if (!isDraftable(base)) {
     throw new Error("First argument to `createDraft` must be a plain object, an array, or an immerable object"); // prettier-ignore
   }
@@ -31907,7 +31698,7 @@ Immer.prototype.createDraft = function createDraft(base) {
   return proxy;
 };
 
-Immer.prototype.finishDraft = function finishDraft(draft, patchListener) {
+Immer.prototype.finishDraft = function finishDraft (draft, patchListener) {
   var state = draft && draft[DRAFT_STATE];
 
   if (!state || !state.isManual) {
@@ -31923,16 +31714,16 @@ Immer.prototype.finishDraft = function finishDraft(draft, patchListener) {
   return this.processResult(undefined, scope);
 };
 
-Immer.prototype.setAutoFreeze = function setAutoFreeze(value) {
+Immer.prototype.setAutoFreeze = function setAutoFreeze (value) {
   this.autoFreeze = value;
 };
 
-Immer.prototype.setUseProxies = function setUseProxies(value) {
+Immer.prototype.setUseProxies = function setUseProxies (value) {
   this.useProxies = value;
   assign(this, value ? modernProxy : legacyProxy);
 };
 
-Immer.prototype.applyPatches = function applyPatches$1(base, patches) {
+Immer.prototype.applyPatches = function applyPatches$1 (base, patches) {
   // If a patch replaces the entire state, take that replacement as base
   // before applying patches
   var i;
@@ -31952,14 +31743,12 @@ Immer.prototype.applyPatches = function applyPatches$1(base, patches) {
   } // Otherwise, produce a copy of the base state.
 
 
-  return this.produce(base, function (draft) {
-    return applyPatches(draft, patches.slice(i + 1));
-  });
+  return this.produce(base, function (draft) { return applyPatches(draft, patches.slice(i + 1)); });
 };
 /** @internal */
 
 
-Immer.prototype.processResult = function processResult(result, scope) {
+Immer.prototype.processResult = function processResult (result, scope) {
   var baseDraft = scope.drafts[0];
   var isReplaced = result !== undefined && result !== baseDraft;
   this.willFinalize(scope, result, isReplaced);
@@ -32007,15 +31796,13 @@ Immer.prototype.processResult = function processResult(result, scope) {
  */
 
 
-Immer.prototype.finalize = function finalize(draft, path, scope) {
-  var this$1 = this;
+Immer.prototype.finalize = function finalize (draft, path, scope) {
+    var this$1 = this;
+
   var state = draft[DRAFT_STATE];
 
   if (!state) {
-    if (Object.isFrozen(draft)) {
-      return draft;
-    }
-
+    if (Object.isFrozen(draft)) { return draft; }
     return this.finalizeTree(draft, null, scope);
   } // Never finalize drafts owned by another scope.
 
@@ -32038,17 +31825,13 @@ Immer.prototype.finalize = function finalize(draft, path, scope) {
         var assigned = state.assigned;
 
         for (var prop in assigned) {
-          if (!assigned[prop]) {
-            this.onDelete(state, prop);
-          }
+          if (!assigned[prop]) { this.onDelete(state, prop); }
         }
       } else {
         var base = state.base;
-        var copy = state.copy;
+          var copy = state.copy;
         each(base, function (prop) {
-          if (!has(copy, prop)) {
-            this$1.onDelete(state, prop);
-          }
+          if (!has(copy, prop)) { this$1.onDelete(state, prop); }
         });
       }
     }
@@ -32076,8 +31859,9 @@ Immer.prototype.finalize = function finalize(draft, path, scope) {
  */
 
 
-Immer.prototype.finalizeTree = function finalizeTree(root, rootPath, scope) {
-  var this$1 = this;
+Immer.prototype.finalizeTree = function finalizeTree (root, rootPath, scope) {
+    var this$1 = this;
+
   var state = root[DRAFT_STATE];
 
   if (state) {
@@ -32091,7 +31875,7 @@ Immer.prototype.finalizeTree = function finalizeTree(root, rootPath, scope) {
 
   var needPatches = !!rootPath && !!scope.patches;
 
-  var finalizeProperty = function finalizeProperty(prop, value, parent) {
+  var finalizeProperty = function (prop, value, parent) {
     if (value === parent) {
       throw Error("Immer forbids circular references");
     } // In the `finalizeTree` method, only the `root` object may be a draft.
@@ -32118,9 +31902,7 @@ Immer.prototype.finalizeTree = function finalizeTree(root, rootPath, scope) {
       } // Unchanged drafts are never passed to the `onAssign` hook.
 
 
-      if (isDraftProp && value === state.base[prop]) {
-        return;
-      }
+      if (isDraftProp && value === state.base[prop]) { return; }
     } // Unchanged draft properties are ignored.
     else if (isDraftProp && is(value, state.base[prop])) {
         return;
@@ -32205,149 +31987,103 @@ var createDraft = immer.createDraft.bind(immer);
 
 var finishDraft = immer.finishDraft.bind(immer);
 
-var createInitialState = function createInitialState(formConfig) {
-  var initialForm = {};
-  var formConfigKeys = Object.keys(formConfig);
-
-  for (var _i = 0, _formConfigKeys = formConfigKeys; _i < _formConfigKeys.length; _i++) {
-    var formKey = _formConfigKeys[_i];
+const createInitialState = formConfig => {
+  let initialForm = {};
+  const formConfigKeys = Object.keys(formConfig);
+  for (let formKey of formConfigKeys) {
     initialForm[formKey] = {
       dirty: false,
       rawValue: formConfig[formKey].defaultValue || "",
       validators: formConfig[formKey].validators || [],
       constraints: formConfig[formKey].constraints || []
     };
-  } // Because validators require the entire form we have to do a
+  }
+  // Because validators require the entire form we have to do a
   // second pass to add errors once the initial form has been
   // constructed
-
-
-  for (var _i2 = 0, _formConfigKeys2 = formConfigKeys; _i2 < _formConfigKeys2.length; _i2++) {
-    var _formKey = _formConfigKeys2[_i2];
-    var errors = computeErrors(_formKey, initialForm);
-    initialForm[_formKey].errors = errors;
-    initialForm[_formKey].hasErrors = errors.length > 0;
+  for (let formKey of formConfigKeys) {
+    let errors = computeErrors(formKey, initialForm);
+    initialForm[formKey].errors = errors;
+    initialForm[formKey].hasErrors = errors.length > 0;
   }
-
   return initialForm;
 };
 
-var SET = "field/SET";
-
-var set$2 = function set$2(fieldName) {
-  return function (value) {
-    return {
-      type: SET,
-      payload: {
-        fieldName: fieldName,
-        value: value
-      }
-    };
-  };
-};
-
-var CLEAR = "form/CLEAR";
-
-var _clear = function clear() {
-  return {
-    type: CLEAR
-  };
-};
-
-var createFormReducer = function createFormReducer(formConfig) {
-  return function () {
-    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : createInitialState(formConfig);
-    var action = arguments.length > 1 ? arguments[1] : undefined;
-
-    switch (action.type) {
-      case SET:
-        var changedFieldName = action.payload.fieldName;
-        var newRawValue = action.payload.value;
-        return produce(state, function (draftState) {
-          var originalValue = draftState[changedFieldName].rawValue;
-          draftState[changedFieldName].rawValue = newRawValue;
-
-          if (computeConstraints(changedFieldName, draftState).length > 0) {
-            // If the change violates constraints, revert the change
-            draftState[changedFieldName].rawValue = originalValue;
-            return draftState;
-          }
-
-          var fields = Object.entries(draftState);
-
-          for (var _i3 = 0, _fields = fields; _i3 < _fields.length; _i3++) {
-            var entry = _fields[_i3];
-            var fieldName = entry[0];
-            var field = entry[1];
-            var errors = computeErrors(fieldName, draftState);
-            var dirty = fieldName === changedFieldName ? true : field.dirty;
-            draftState[fieldName].errors = errors;
-            draftState[fieldName].dirty = dirty;
-            draftState[fieldName].hasErrors = errors.length > 0;
-          }
-        });
+const SET = "field/SET";
+const set$2 = fieldName => value => ({
+  type: SET,
+  payload: { fieldName, value }
+});
 
-      case CLEAR:
-        return createInitialState(formConfig);
+const CLEAR = "form/CLEAR";
+const clear = () => ({ type: CLEAR });
+
+const createFormReducer = formConfig => (
+  state = createInitialState(formConfig),
+  action
+) => {
+  switch (action.type) {
+    case SET:
+      const changedFieldName = action.payload.fieldName;
+      const newRawValue = action.payload.value;
+
+      return produce(state, draftState => {
+        let originalValue = draftState[changedFieldName].rawValue;
+        draftState[changedFieldName].rawValue = newRawValue;
+        if (computeConstraints(changedFieldName, draftState).length > 0) {
+          // If the change violates constraints, revert the change
+          draftState[changedFieldName].rawValue = originalValue;
+          return draftState;
+        }
 
-      default:
-        return state;
-    }
-  };
+        const fields = Object.entries(draftState);
+        for (let entry of fields) {
+          let fieldName = entry[0];
+          let field = entry[1];
+          let errors = computeErrors(fieldName, draftState);
+          let dirty = fieldName === changedFieldName ? true : field.dirty;
+          draftState[fieldName].errors = errors;
+          draftState[fieldName].dirty = dirty;
+          draftState[fieldName].hasErrors = errors.length > 0;
+        }
+      });
+    case CLEAR:
+      return createInitialState(formConfig);
+    default:
+      return state;
+  }
 };
 
-var createMapDispatchToProps = function createMapDispatchToProps(formConfig) {
+const createMapDispatchToProps = formConfig => {
   // Do memo-ization
-  var cachedDispatch;
-  var cacheValue;
-  return function (dispatch) {
+  let cachedDispatch;
+  let cacheValue;
+  return dispatch => {
     if (dispatch == cachedDispatch) {
       return cacheValue;
     }
-
-    var dispatchObj = {};
+    let dispatchObj = {};
     dispatchObj.fields = {};
-    var keys = Object.keys(formConfig);
-
-    var _loop = function _loop() {
-      var fieldName = _keys[_i4];
+    const keys = Object.keys(formConfig);
+    for (let fieldName of keys) {
       dispatchObj.fields[fieldName] = {
-        set: function set(value) {
-          return dispatch(set$2(fieldName)(value));
-        }
+        set: value => dispatch(set$2(fieldName)(value))
       };
-    };
-
-    for (var _i4 = 0, _keys = keys; _i4 < _keys.length; _i4++) {
-      _loop();
     }
-
-    dispatchObj.form = {
-      clear: function clear() {
-        return dispatch(_clear());
-      }
-    };
+    dispatchObj.form = { clear: () => dispatch(clear()) };
     cachedDispatch = dispatch;
-    cacheValue = {
-      actions: dispatchObj
-    };
+    cacheValue = { actions: dispatchObj };
     return cacheValue;
   };
 };
 
-var mapStateToProps = function mapStateToProps(state) {
-  return {
-    fields: state
-  };
-};
+const mapStateToProps = state => ({ fields: state });
 
-var createFormState = function createFormState(formConfig) {
-  return {
-    reducer: createFormReducer(formConfig),
-    mapDispatchToProps: createMapDispatchToProps(formConfig),
-    mapStateToProps: mapStateToProps
-  };
-};
+const createFormState = formConfig => ({
+  reducer: createFormReducer(formConfig),
+  mapDispatchToProps: createMapDispatchToProps(formConfig),
+  mapStateToProps: mapStateToProps
+});
 
 var formatDelimiter = "_";
 var phoneFormats = ["", "_", "__", "(___) ", "(___) _", "(___) __", "(___) ___-", "(___) ___-_", "(___) ___-__", "(___) ___-___", "(___) ___-____"];
@@ -32819,29 +32555,31 @@ var EditableList = function EditableList(_ref) {
     padding: "0",
     borderRadius: "4px",
     extraStyles: "box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),\n    0px 3px 8px 0px rgb(202, 206, 216);"
-  }, items.map(function (props) {
+  }, items.map(function (item) {
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
         modalOpen = _useState2[0],
         toggleModal = _useState2[1];
 
     return /*#__PURE__*/React__default.createElement(EditableListItem, {
-      listItemSize: !!props.id && props.id === autoPayMethod ? "big" : listItemSize,
-      key: props.id
+      listItemSize: !!item.id && item.id === autoPayMethod ? "big" : listItemSize,
+      key: item.id || item
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: CHARADE_GREY
-    }, renderItem(props)), /*#__PURE__*/React__default.createElement(EditableListItemControls, null, props.isPrimary && /*#__PURE__*/React__default.createElement(Text$1, {
+    }, renderItem(item)), /*#__PURE__*/React__default.createElement(EditableListItemControls, null, item.isPrimary && /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: STORM_GREY,
-      extraStyles: "font-style: italic;"
+      extraStyles: "font-style: italic;",
+      key: "Default ".concat(itemName)
     }, "Default ", itemName), canRemove && /*#__PURE__*/React__default.createElement(Box, {
       padding: "0 0.5rem",
       border: "2px solid transparent",
       extraStyles: ":not(:first-child) { border-left: 2px solid ".concat(BOSTON_BLUE, ";}"),
-      dataQa: qaPrefix + " Remove"
+      dataQa: qaPrefix + " Remove",
+      key: "Remove ".concat(item.id)
     }, useModal ? /*#__PURE__*/React__default.createElement(Modal, _extends({
-      item: _objectSpread2({}, props)
+      item: _objectSpread2({}, item)
     }, modalProps, {
       modalOpen: modalOpen,
       toggleModal: toggleModal
@@ -32849,19 +32587,20 @@ var EditableList = function EditableList(_ref) {
       variant: "smallGhost",
       text: "Remove",
       action: function action() {
-        return removeItem(props.id);
+        return removeItem(item.id);
       },
       extraStyles: "min-width: 0;"
     })), canEdit && /*#__PURE__*/React__default.createElement(Box, {
       padding: "0 0.5rem",
       border: "2px solid transparent",
       extraStyles: ":not(:first-child) { border-left: 2px solid ".concat(BOSTON_BLUE, ";}"),
-      dataQa: qaPrefix + " Edit"
+      dataQa: qaPrefix + " Edit",
+      key: "Edit ".concat(item.id)
     }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
       variant: "smallGhost",
       text: "Edit",
       action: function action() {
-        return editItem(props.id);
+        return editItem(item.id);
       },
       extraStyles: "min-width: 0;"
     }))));
@@ -34649,7 +34388,8 @@ var fallbackValues$s = {
 };
 
 var NavMenuDesktop = function NavMenuDesktop(_ref) {
-  var _ref$top = _ref.top,
+  var id = _ref.id,
+      _ref$top = _ref.top,
       top = _ref$top === void 0 ? "125%" : _ref$top,
       _ref$left = _ref.left,
       left = _ref$left === void 0 ? "-100%" : _ref$left,
@@ -34664,6 +34404,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
       themeValues = _ref.themeValues;
   var menuCarat = "&:after { bottom: 100%; right: 10px; border: solid transparent; content: \" \"; height: 0; width: 0; position: absolute; pointer-events: none; border-color: ".concat(themeValues.backgroundColor, "00; border-bottom-color: ").concat(themeValues.backgroundColor, "; border-width: 10px; margin-left: -10px; }");
   return /*#__PURE__*/React__default.createElement(Imposter, {
+    id: id,
     breakout: true,
     top: top,
     left: left,
@@ -34726,12 +34467,14 @@ var menu = posed.div({
 var ImposterMenu = styled__default(menu)(_templateObject$y());
 
 var NavMenuMobile = function NavMenuMobile(_ref) {
-  var _ref$menuContent = _ref.menuContent,
+  var id = _ref.id,
+      _ref$menuContent = _ref.menuContent,
       menuContent = _ref$menuContent === void 0 ? [] : _ref$menuContent,
       _ref$visible = _ref.visible,
       visible = _ref$visible === void 0 ? false : _ref$visible,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(ImposterMenu, {
+    id: id,
     initialPose: "invisible",
     pose: visible ? "visible" : "invisible"
   }, /*#__PURE__*/React__default.createElement(Box, {