@thecb/components 3.5.12-beta.2 → 3.5.13

package/dist/index.cjs.js

@@ -275,21 +275,47 @@ 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*\/*\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 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 number = {
     test: function (v) { return typeof v === 'number'; },
     parse: parseFloat,
     transform: function (v) { return v; }
 };
-var alpha = __assign(__assign({}, number), { transform: clamp(0, 1) });
-var scale = __assign(__assign({}, number), { default: 1 });
+var alpha = __assign$1(__assign$1({}, number), { transform: clamp(0, 1) });
+var scale = __assign$1(__assign$1({}, number), { default: 1 });
 
 var createUnitType = function (unit) { return ({
     test: function (v) {
@@ -303,7 +329,7 @@ var percent = createUnitType('%');
 var px = createUnitType('px');
 var vh = createUnitType('vh');
 var vw = createUnitType('vw');
-var progressPercentage = __assign(__assign({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
+var progressPercentage = __assign$1(__assign$1({}, 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(')'));
@@ -311,17 +337,12 @@ 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 = getValuesAsArray(v);
+        var valuesArray = getValueFromFunctionString(v).split(/,\s*/);
         for (var i = 0; i < 4; i++) {
             values[terms[i]] =
                 valuesArray[i] !== undefined ? parseFloat(valuesArray[i]) : 1;
@@ -330,14 +351,14 @@ var splitColorValues = function (terms) {
     };
 };
 var rgbaTemplate = function (_a) {
-    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 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 hslaTemplate = function (_a) {
-    var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha = _b === void 0 ? 1 : _b;
-    return "hsla(" + hue + ", " + saturation + ", " + lightness + ", " + alpha + ")";
+    var 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 rgbUnit = __assign(__assign({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
+var rgbUnit = __assign$1(__assign$1({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
 function isColorString(color, colorType) {
     return color.startsWith(colorType) && singleColorRegex.test(color);
 }
@@ -345,12 +366,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))
         });
     }
 };
@@ -358,16 +379,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(__assign({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
+var hex = __assign$1(__assign$1({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
         var r = '';
         var g = '';
         var b = '';
@@ -501,134 +522,140 @@ 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 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;
-            }
-        }
+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);
     };
-    return renderStep;
-};
 
-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 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 DEFAULT_OVERSHOOT_STRENGTH = 1.525;
 var reversed = function (easing) {
@@ -903,15 +930,15 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
+var __assign$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$1.apply(this, arguments);
+    return __assign$2.apply(this, arguments);
 };
 
 var mixLinearColor = function (from, to, v) {
@@ -934,7 +961,7 @@ var mixColor = (function (from, to) {
     invariant(fromColorType.transform === toColorType.transform, 'Both colors must be hex/RGBA, OR both must be HSLA.');
     var fromColor = fromColorType.parse(from);
     var toColor = toColorType.parse(to);
-    var blended = __assign$1({}, fromColor);
+    var blended = __assign$2({}, fromColor);
     var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
     return function (v) {
         for (var key in blended) {
@@ -979,7 +1006,7 @@ var mixArray = function (from, to) {
     };
 };
 var mixObject = function (origin, target) {
-    var output = __assign$1({}, origin, target);
+    var output = __assign$2({}, origin, target);
     var blendValue = {};
     for (var key in output) {
         if (origin[key] !== undefined && target[key] !== undefined) {
@@ -3369,15 +3396,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$3 = function () {
+    __assign$3 = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign$2.apply(this, arguments);
+    return __assign$3.apply(this, arguments);
 };
 
 function __rest$1(s, e) {
@@ -3497,12 +3524,12 @@ var intelligentTransition = {
     opacity: linearTween,
     default: tween
 };
-var dragAction = /*#__PURE__*/__assign$2( /*#__PURE__*/__assign$2({}, intelligentTransition), { x: /*#__PURE__*/createPointer(pointerX, 'left', 'right', BoundingBoxDimension.width), y: /*#__PURE__*/createPointer(pointerY, 'top', 'bottom', BoundingBoxDimension.height) });
+var dragAction = /*#__PURE__*/__assign$3( /*#__PURE__*/__assign$3({}, intelligentTransition), { x: /*#__PURE__*/createPointer(pointerX, 'left', 'right', BoundingBoxDimension.width), y: /*#__PURE__*/createPointer(pointerY, 'top', 'bottom', BoundingBoxDimension.height) });
 var justAxis = function (_a) {
     var from = _a.from;
     return just(from);
 };
-var intelligentDragEnd = /*#__PURE__*/__assign$2( /*#__PURE__*/__assign$2({}, intelligentTransition), { x: justAxis, y: justAxis });
+var intelligentDragEnd = /*#__PURE__*/__assign$3( /*#__PURE__*/__assign$3({}, intelligentTransition), { x: justAxis, y: justAxis });
 var defaultTransitions = /*#__PURE__*/new Map([['default', intelligentTransition], ['drag', dragAction], ['dragEnd', intelligentDragEnd]]);
 
 var animationLookup = {
@@ -3597,7 +3624,7 @@ var getAction = function (v, _a, _b) {
         velocity: velocity,
         ease: ease
     } : { ease: ease };
-    return animationLookup[type](__assign$2(__assign$2({}, baseProps), def));
+    return animationLookup[type](__assign$3(__assign$3({}, baseProps), def));
 };
 var isAction = function (action$$1) {
     return typeof action$$1.start !== 'undefined';
@@ -3976,7 +4003,7 @@ var convertPositionalUnits = function (state, nextPose) {
             changedPositionalKeys.push(key);
             if (!applyAtEndHasBeenCopied) {
                 applyAtEndHasBeenCopied = true;
-                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$2({}, nextPose.applyAtEnd) : {};
+                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$3({}, nextPose.applyAtEnd) : {};
             }
             nextPose.applyAtEnd[key] = nextPose.applyAtEnd[key] || nextPose[key];
             setValue(state, key, to);
@@ -4033,7 +4060,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$2(__assign$2({ flip: {} }, config), { props: __assign$2(__assign$2({}, config.props), { onDragStart: onDragStart,
+    var poseConfig = __assign$3(__assign$3({ flip: {} }, config), { props: __assign$3(__assign$3({}, config.props), { onDragStart: onDragStart,
             onDragEnd: onDragEnd,
             onPressStart: onPressStart,
             onPressEnd: onPressEnd,
@@ -4047,8 +4074,8 @@ var createPoseConfig = function (element, _a) {
         var _b = dragPoses(draggable),
             drag = _b.drag,
             dragEnd = _b.dragEnd;
-        poseConfig.drag = __assign$2(__assign$2({}, drag), poseConfig.drag);
-        poseConfig.dragEnd = __assign$2(__assign$2({}, dragEnd), poseConfig.dragEnd);
+        poseConfig.drag = __assign$3(__assign$3({}, drag), poseConfig.drag);
+        poseConfig.dragEnd = __assign$3(__assign$3({}, dragEnd), poseConfig.dragEnd);
     }
     return poseConfig;
 };
@@ -4094,7 +4121,7 @@ var domPose = /*#__PURE__*/pose({
         var props = _a.props,
             activeActions = _a.activeActions;
         var measure = props.dimensions.measure;
-        var poserApi = __assign$2(__assign$2({}, api), { addChild: function (element, childConfig) {
+        var poserApi = __assign$3(__assign$3({}, api), { addChild: function (element, childConfig) {
                 return api._addChild(createPoseConfig(element, childConfig), domPose);
             }, measure: measure, flip: function (op) {
                 if (op) {
@@ -4164,7 +4191,7 @@ var pickAssign = function (shouldPick, sources) {
     }, {});
 };
 
-var _a = React.createContext({}), PoseParentConsumer = _a.Consumer, PoseParentProvider = _a.Provider;
+var _a$1 = React.createContext({}), PoseParentConsumer = _a$1.Consumer, PoseParentProvider = _a$1.Provider;
 var calcPopFromFlowStyle = function (el) {
     var offsetTop = el.offsetTop, offsetLeft = el.offsetLeft, offsetWidth = el.offsetWidth, offsetHeight = el.offsetHeight;
     return {
@@ -6060,19 +6087,12 @@ 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 ? /*#__PURE__*/React__default.createElement(React.Fragment, {
-        key: createUniqueId()
-      }, replacement) : child;
+      return !child ? replacement : child;
     });
   }
 
@@ -6231,8 +6251,7 @@ var BoxWrapper = styled__default(function (_ref) {
       minWidth = _ref.minWidth,
       maxWidth = _ref.maxWidth,
       padding = _ref.padding,
-      hiddenStyles = _ref.hiddenStyles,
-      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles"]);
+      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding"]);
 
   return /*#__PURE__*/React__default.createElement("div", props);
 })(_templateObject$1(), function (_ref2) {
@@ -6443,37 +6462,30 @@ function _templateObject$3() {
 
   return data;
 }
-/* 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;
+var ClusterWrapper = styled__default.div(_templateObject$3(), function (_ref) {
+  var overflow = _ref.overflow;
   return overflow ? "visible" : "hidden";
 });
-var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref3) {
-  var nowrap = _ref3.nowrap;
+var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref2) {
+  var nowrap = _ref2.nowrap;
   return nowrap ? "nowrap" : "wrap";
-}, function (_ref4) {
-  var justify = _ref4.justify;
+}, function (_ref3) {
+  var justify = _ref3.justify;
   return justify;
-}, function (_ref5) {
-  var align = _ref5.align;
+}, function (_ref4) {
+  var align = _ref4.align;
   return align;
-}, function (_ref6) {
-  var childGap = _ref6.childGap;
+}, function (_ref5) {
+  var childGap = _ref5.childGap;
   return childGap;
-}, function (_ref7) {
-  var minHeight = _ref7.minHeight;
+}, function (_ref6) {
+  var minHeight = _ref6.minHeight;
   return minHeight;
-}, function (_ref8) {
-  var minWidth = _ref8.minWidth;
+}, function (_ref7) {
+  var minWidth = _ref7.minWidth;
   return minWidth;
-}, function (_ref9) {
-  var childGap = _ref9.childGap;
+}, function (_ref8) {
+  var childGap = _ref8.childGap;
   return childGap;
 });
 
@@ -6596,35 +6608,25 @@ var SidebarWrapper = styled__default.div(_templateObject$5(), function (_ref) {
   var fullHeight = _ref.fullHeight;
   return fullHeight ? "height: 100%;" : "";
 });
-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 SidebarInnerWrapper = styled__default.div(_templateObject2$3(), function (_ref2) {
+  var childGap = _ref2.childGap;
+  return childGap;
+}, function (_ref3) {
   var childGap = _ref3.childGap;
   return childGap;
 }, function (_ref4) {
-  var childGap = _ref4.childGap;
-  return childGap;
-}, function (_ref5) {
-  var width = _ref5.width;
+  var width = _ref4.width;
   return width ? "flex-basis: ".concat(width) : "";
-}, function (_ref6) {
-  var minHeight = _ref6.minHeight;
+}, function (_ref5) {
+  var minHeight = _ref5.minHeight;
   return minHeight ? "margin-top: 0; margin-bottom: 0;" : "";
-}, function (_ref7) {
-  var onRight = _ref7.onRight,
-      contentMinWidth = _ref7.contentMinWidth,
-      childGap = _ref7.childGap;
+}, 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    }");
-}, function (_ref8) {
-  var fullHeight = _ref8.fullHeight;
+}, function (_ref7) {
+  var fullHeight = _ref7.fullHeight;
   return fullHeight ? "min-height: 100%;" : "";
 });
 
@@ -11081,7 +11083,7 @@ function useForceUpdate() {
 
 var SyncLayoutContext = React.createContext(null);
 
-var _a$1;
+var _a$2;
 var StepName;
 (function (StepName) {
     StepName["Prepare"] = "prepare";
@@ -11119,12 +11121,12 @@ var createUseSyncEffect = function (stepName) { return function (callback) {
     jobsNeedProcessing = true;
     jobs[stepName].push(callback);
 }; };
-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);
+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);
 
 function isHTMLElement$1(element) {
     return element instanceof HTMLElement;
@@ -12930,17 +12932,29 @@ 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", 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", {
+  }, /*#__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", {
     id: "mask-2-accountssmall",
     fill: "white"
   }, /*#__PURE__*/React__default.createElement("use", {
     xlinkHref: "#path-1-accountssmall"
-  })), /*#__PURE__*/React__default.createElement("g", null), /*#__PURE__*/React__default.createElement("path", {
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "Mask"
+  }), /*#__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)"
@@ -13861,13 +13875,18 @@ 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", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("circle", {
+  }, /*#__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",
     cx: "9",
     cy: "9",
     r: "8.5"
@@ -13894,22 +13913,27 @@ 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",
@@ -13917,10 +13941,13 @@ 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"
   }))))))));
@@ -13946,33 +13973,40 @@ 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) "
   }))))))));
 };
@@ -14609,8 +14643,8 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   var themeValues = createThemeValues(themeContext, fallbackValues$7, "Breadcrumb");
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    as: "nav",
-    "aria-label": "Breadcrumb navigation"
+    role: "region",
+    "aria-level": "Breadcrumb navigation"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
@@ -14621,7 +14655,6 @@ 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,
@@ -16468,7 +16501,6 @@ var Checkbox = function Checkbox(_ref4) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
-    "aria-label": name,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1"
@@ -16583,8 +16615,7 @@ var RadioButton = function RadioButton(_ref3) {
       name = _ref3.name;
   return /*#__PURE__*/React__default.createElement(RadioButtonBorder, {
     isSelected: isSelected,
-    name: name,
-    "aria-checked": isSelected
+    name: name
   }, isSelected && /*#__PURE__*/React__default.createElement(RadioButtonCenter, null));
 };
 
@@ -16630,8 +16661,6 @@ 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,
@@ -16655,7 +16684,6 @@ 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,
@@ -16675,8 +16703,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     justify: "flex-start",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(CheckboxItemIcon, {
-    src: imageUrl,
-    alt: imageAlt
+    src: imageUrl
   }))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0rem 0.5rem 0rem 0rem",
     hiddenStyles: !image
@@ -16978,7 +17005,7 @@ var Dropdown = function Dropdown(_ref7) {
     tabIndex: 0,
     padding: "0",
     width: "100%",
-    hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
+    focusStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     "aria-expanded": isOpen
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "button",
@@ -16986,6 +17013,7 @@ 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",
@@ -16995,7 +17023,6 @@ 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
@@ -17008,7 +17035,7 @@ var Dropdown = function Dropdown(_ref7) {
   }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
     open: isOpen,
     ref: dropdownRef,
-    tabIndex: 0
+    tabIndex: -1
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, filteredOptions.map(function (choice, i) {
@@ -18417,8 +18444,28 @@ var fallbackValues$e = {
   hoverFocusStyles: hoverFocusStyles
 };
 
+function _templateObject4$4() {
+  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
+
+  _templateObject4$4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$7() {
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n\n  ", "\n"]);
+
+  _templateObject3$7 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject2$d() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
   _templateObject2$d = function _templateObject2() {
     return data;
@@ -18428,7 +18475,7 @@ function _templateObject2$d() {
 }
 
 function _templateObject$p() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n\n  ", "\n"]);
 
   _templateObject$p = function _templateObject() {
     return data;
@@ -18441,55 +18488,68 @@ var InputField = styled__default.input(_templateObject$p(), function (_ref) {
       showErrors = _ref.showErrors,
       themeValues = _ref.themeValues;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
-}, FONT_WEIGHT_REGULAR, function (_ref2) {
-  var themeValues = _ref2.themeValues;
-  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_ref3) {
+}, function (_ref2) {
+  var customHeight = _ref2.customHeight;
+  return customHeight ? customHeight : "48px";
+}, FONT_WEIGHT_REGULAR, function (_ref3) {
   var themeValues = _ref3.themeValues;
-  return themeValues.color && themeValues.color;
+  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
 }, function (_ref4) {
-  var background = _ref4.background,
-      themeValues = _ref4.themeValues;
+  var themeValues = _ref4.themeValues;
+  return themeValues.color && themeValues.color;
+}, function (_ref5) {
+  var background = _ref5.background,
+      themeValues = _ref5.themeValues;
   return background && "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
-}, MATISSE_BLUE); // eslint-disable-next-line no-unused-vars
+}, MATISSE_BLUE, function (_ref6) {
+  var extraStyles = _ref6.extraStyles;
+  return styled.css(_templateObject2$d(), extraStyles);
+}); // eslint-disable-next-line no-unused-vars
 
-var FormattedInputField = styled__default(function (_ref5) {
-  var showErrors = _ref5.showErrors,
-      themeValues = _ref5.themeValues,
-      props = _objectWithoutProperties(_ref5, ["showErrors", "themeValues"]);
+var FormattedInputField = styled__default(function (_ref7) {
+  var showErrors = _ref7.showErrors,
+      props = _objectWithoutProperties(_ref7, ["showErrors"]);
 
   return /*#__PURE__*/React__default.createElement(src_1, props);
-})(_templateObject2$d(), function (_ref6) {
-  var field = _ref6.field,
-      showErrors = _ref6.showErrors,
-      themeValues = _ref6.themeValues;
+})(_templateObject3$7(), function (_ref8) {
+  var field = _ref8.field,
+      showErrors = _ref8.showErrors,
+      themeValues = _ref8.themeValues;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
-}, FONT_WEIGHT_REGULAR, function (_ref7) {
-  var themeValues = _ref7.themeValues;
+}, function (_ref9) {
+  var customHeight = _ref9.customHeight;
+  return customHeight ? customHeight : "48px";
+}, FONT_WEIGHT_REGULAR, function (_ref10) {
+  var themeValues = _ref10.themeValues;
   return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_ref8) {
-  var themeValues = _ref8.themeValues;
+}, function (_ref11) {
+  var themeValues = _ref11.themeValues;
   return themeValues.color && themeValues.color;
-}, MATISSE_BLUE);
+}, MATISSE_BLUE, function (_ref12) {
+  var extraStyles = _ref12.extraStyles;
+  return styled.css(_templateObject4$4(), extraStyles);
+});
 
-var FormInput = function FormInput(_ref9) {
-  var _ref9$type = _ref9.type,
-      type = _ref9$type === void 0 ? "text" : _ref9$type,
-      labelTextWhenNoError = _ref9.labelTextWhenNoError,
-      errorMessages = _ref9.errorMessages,
-      _ref9$isNum = _ref9.isNum,
-      isNum = _ref9$isNum === void 0 ? false : _ref9$isNum,
-      _ref9$helperModal = _ref9.helperModal,
-      helperModal = _ref9$helperModal === void 0 ? false : _ref9$helperModal,
-      field = _ref9.field,
-      fieldActions = _ref9.fieldActions,
-      showErrors = _ref9.showErrors,
-      _ref9$formatter = _ref9.formatter,
-      formatter = _ref9$formatter === void 0 ? null : _ref9$formatter,
-      decorator = _ref9.decorator,
-      themeValues = _ref9.themeValues,
-      background = _ref9.background,
-      props = _objectWithoutProperties(_ref9, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background"]);
+var FormInput = function FormInput(_ref13) {
+  var _ref13$type = _ref13.type,
+      type = _ref13$type === void 0 ? "text" : _ref13$type,
+      labelTextWhenNoError = _ref13.labelTextWhenNoError,
+      errorMessages = _ref13.errorMessages,
+      _ref13$isNum = _ref13.isNum,
+      isNum = _ref13$isNum === void 0 ? false : _ref13$isNum,
+      _ref13$helperModal = _ref13.helperModal,
+      helperModal = _ref13$helperModal === void 0 ? false : _ref13$helperModal,
+      field = _ref13.field,
+      fieldActions = _ref13.fieldActions,
+      showErrors = _ref13.showErrors,
+      _ref13$formatter = _ref13.formatter,
+      formatter = _ref13$formatter === void 0 ? null : _ref13$formatter,
+      decorator = _ref13.decorator,
+      themeValues = _ref13.themeValues,
+      background = _ref13.background,
+      customHeight = _ref13.customHeight,
+      extraStyles = _ref13.extraStyles,
+      props = _objectWithoutProperties(_ref13, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"]);
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18507,12 +18567,10 @@ 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                  }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }"
   }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Text$1, {
     color: themeValues.linkColor,
     variant: "pS",
@@ -18524,12 +18582,11 @@ 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.replace(/\s+/g, "-")
+    id: labelTextWhenNoError
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -18550,7 +18607,7 @@ var FormInput = function FormInput(_ref9) {
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": labelTextWhenNoError,
     onChange: function onChange(e) {
       return fieldActions.set(e);
     },
@@ -18562,9 +18619,11 @@ var FormInput = function FormInput(_ref9) {
     formatter: formatter,
     showErrors: showErrors,
     "data-qa": labelTextWhenNoError,
-    themeValues: themeValues
+    themeValues: themeValues,
+    customHeight: customHeight,
+    extraStyles: extraStyles
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": labelTextWhenNoError,
     onChange: function onChange(e) {
       return fieldActions.set(e.target.value);
     },
@@ -18576,7 +18635,9 @@ var FormInput = function FormInput(_ref9) {
     showErrors: showErrors,
     "data-qa": labelTextWhenNoError,
     themeValues: themeValues,
-    background: background
+    background: background,
+    customHeight: customHeight,
+    extraStyles: extraStyles
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -18806,10 +18867,10 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
 
 var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$g, "default");
 
-function _templateObject3$7() {
+function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
 
-  _templateObject3$7 = function _templateObject3() {
+  _templateObject3$8 = function _templateObject3() {
     return data;
   };
 
@@ -18837,7 +18898,7 @@ function _templateObject$r() {
 }
 var Hamburger = styled__default.button(_templateObject$r());
 var HamburgerBox = styled__default.span(_templateObject2$f());
-var HamburgerInner = styled__default.span(_templateObject3$7(), function (_ref) {
+var HamburgerInner = styled__default.span(_templateObject3$8(), function (_ref) {
   var inactiveColor = _ref.inactiveColor;
   return inactiveColor;
 }, function (_ref2) {
@@ -18853,14 +18914,13 @@ var HamburgerButton = function HamburgerButton(_ref4) {
       inactiveColor = _ref4.inactiveColor,
       isActive = _ref4.isActive,
       _ref4$onClick = _ref4.onClick,
-      onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick,
-      controls = _ref4.controls;
+      onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick;
   return /*#__PURE__*/React__default.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
     onClick: onClick,
     type: "button",
-    "aria-label": "Menu",
-    "aria-controls": controls
+    ariaLabel: "Menu",
+    ariaControls: "navigation"
   }, /*#__PURE__*/React__default.createElement(HamburgerBox, null, /*#__PURE__*/React__default.createElement(HamburgerInner, {
     className: isActive === true ? "active" : "",
     inactiveColor: inactiveColor,
@@ -19261,20 +19321,20 @@ function _templateObject5$2() {
   return data;
 }
 
-function _templateObject4$4() {
+function _templateObject4$5() {
   var data = _taggedTemplateLiteral(["", " is not a valid length"]);
 
-  _templateObject4$4 = function _templateObject4() {
+  _templateObject4$5 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$8() {
+function _templateObject3$9() {
   var data = _taggedTemplateLiteral(["", " is not the right length"]);
 
-  _templateObject3$8 = function _templateObject3() {
+  _templateObject3$9 = function _templateObject3() {
     return data;
   };
 
@@ -19340,7 +19400,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$8(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -19667,7 +19727,6 @@ 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"
@@ -30303,20 +30362,20 @@ var fallbackValues$o = {
   leftLabelStyles: leftLabelStyles
 };
 
-function _templateObject4$5() {
+function _templateObject4$6() {
   var data = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  top: 3px;\n  left: 3px;\n  right: 3px;\n  bottom: 3px;\n  border-radius: 50%;\n  box-sizing: border-box;\n"]);
 
-  _templateObject4$5 = function _templateObject4() {
+  _templateObject4$6 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$9() {
+function _templateObject3$a() {
   var data = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: 50%;\n  box-sizing: border-box;\n"]);
 
-  _templateObject3$9 = function _templateObject3() {
+  _templateObject3$a = function _templateObject3() {
     return data;
   };
 
@@ -30359,8 +30418,8 @@ var VisibleSwitchComponent = styled__default.label(_templateObject2$i(), functio
   var isMobile = _ref5.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var ToggleSwitchMiddleRingComponent = styled__default.div(_templateObject3$9());
-var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$5());
+var ToggleSwitchMiddleRingComponent = styled__default.div(_templateObject3$a());
+var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$6());
 
 var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
@@ -30473,7 +30532,6 @@ 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,
@@ -32555,31 +32613,29 @@ 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 (item) {
+  }, items.map(function (props) {
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
         modalOpen = _useState2[0],
         toggleModal = _useState2[1];
 
     return /*#__PURE__*/React__default.createElement(EditableListItem, {
-      listItemSize: !!item.id && item.id === autoPayMethod ? "big" : listItemSize,
-      key: item.id || item
+      listItemSize: !!props.id && props.id === autoPayMethod ? "big" : listItemSize,
+      key: props.id
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: CHARADE_GREY
-    }, renderItem(item)), /*#__PURE__*/React__default.createElement(EditableListItemControls, null, item.isPrimary && /*#__PURE__*/React__default.createElement(Text$1, {
+    }, renderItem(props)), /*#__PURE__*/React__default.createElement(EditableListItemControls, null, props.isPrimary && /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: STORM_GREY,
-      extraStyles: "font-style: italic;",
-      key: "Default ".concat(itemName)
+      extraStyles: "font-style: italic;"
     }, "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",
-      key: "Remove ".concat(item.id)
+      dataQa: qaPrefix + " Remove"
     }, useModal ? /*#__PURE__*/React__default.createElement(Modal, _extends({
-      item: _objectSpread2({}, item)
+      item: _objectSpread2({}, props)
     }, modalProps, {
       modalOpen: modalOpen,
       toggleModal: toggleModal
@@ -32587,20 +32643,19 @@ var EditableList = function EditableList(_ref) {
       variant: "smallGhost",
       text: "Remove",
       action: function action() {
-        return removeItem(item.id);
+        return removeItem(props.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",
-      key: "Edit ".concat(item.id)
+      dataQa: qaPrefix + " Edit"
     }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
       variant: "smallGhost",
       text: "Edit",
       action: function action() {
-        return editItem(item.id);
+        return editItem(props.id);
       },
       extraStyles: "min-width: 0;"
     }))));
@@ -32663,20 +32718,20 @@ function _templateObject5$3() {
   return data;
 }
 
-function _templateObject4$6() {
+function _templateObject4$7() {
   var data = _taggedTemplateLiteral(["\n  color: ", ";\n  align-items: center;\n  font-size: 1rem;\n  padding-right: 1rem;\n  cursor: pointer;\n  display: ", ";\n"]);
 
-  _templateObject4$6 = function _templateObject4() {
+  _templateObject4$7 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$a() {
+function _templateObject3$b() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n"]);
 
-  _templateObject3$a = function _templateObject3() {
+  _templateObject3$b = function _templateObject3() {
     return data;
   };
 
@@ -32719,8 +32774,8 @@ var EditableTableListItem = styled__default.div(_templateObject2$k(), function (
   var isMobile = _ref5.isMobile;
   return isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem";
 });
-var EditableListItemControls$1 = styled__default.div(_templateObject3$a());
-var EditableListAction = styled__default.div(_templateObject4$6(), MATISSE_BLUE, function (_ref6) {
+var EditableListItemControls$1 = styled__default.div(_templateObject3$b());
+var EditableListAction = styled__default.div(_templateObject4$7(), MATISSE_BLUE, function (_ref6) {
   var hide = _ref6.hide;
   return hide ? "none" : "flex";
 });
@@ -34388,8 +34443,7 @@ var fallbackValues$s = {
 };
 
 var NavMenuDesktop = function NavMenuDesktop(_ref) {
-  var id = _ref.id,
-      _ref$top = _ref.top,
+  var _ref$top = _ref.top,
       top = _ref$top === void 0 ? "125%" : _ref$top,
       _ref$left = _ref.left,
       left = _ref$left === void 0 ? "-100%" : _ref$left,
@@ -34404,7 +34458,6 @@ 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,
@@ -34467,14 +34520,12 @@ var menu = posed.div({
 var ImposterMenu = styled__default(menu)(_templateObject$y());
 
 var NavMenuMobile = function NavMenuMobile(_ref) {
-  var id = _ref.id,
-      _ref$menuContent = _ref.menuContent,
+  var _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, {
@@ -37225,10 +37276,10 @@ var RadioSection = function RadioSection(_ref) {
     }, /*#__PURE__*/React__default.createElement(Box, {
       padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem 1.25rem 1.25rem",
       background: section.disabled ? themeValues.headingDisabledColor : themeValues.headingBackgroundColor,
-      onClick: isMobile && supportsTouch ? noop : function () {
+      onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
       },
-      onTouchEnd: isMobile && supportsTouch ? function () {
+      onTouchEnd: isMobile && supportsTouch || !section.disabled ? function () {
         return toggleOpenSection(section.id);
       } : noop,
       key: "header-".concat(section.id),
@@ -37252,7 +37303,7 @@ var RadioSection = function RadioSection(_ref) {
       name: section.id,
       radioOn: openSection === section.id,
       radioFocused: focused === section.id,
-      toggleRadio: function toggleRadio() {
+      toggleRadio: section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1"