@thecb/components 9.3.4-beta.0 → 9.3.5-beta.0

package/dist/index.cjs.js

@@ -6371,6 +6371,15 @@ var titleCaseString = function titleCaseString(string) {
 var kebabCaseString = function kebabCaseString(string) {
   return string === null || string === void 0 ? void 0 : string.replaceAll(" ", "-").toLowerCase();
 };
+var wrapIndex = function wrapIndex(index, length) {
+  if (index <= -1) {
+    return length - 1;
+  } else if (index >= length) {
+    return 0;
+  } else {
+    return index;
+  }
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6391,7 +6400,8 @@ var general = /*#__PURE__*/Object.freeze({
   throttle: throttle,
   titleCaseWord: titleCaseWord,
   titleCaseString: titleCaseString,
-  kebabCaseString: kebabCaseString
+  kebabCaseString: kebabCaseString,
+  wrapIndex: wrapIndex
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -12511,7 +12521,7 @@ var _excluded$f = ["position", "padding", "children"];
   This should be sufficient for most scenarios, but if you need to, you have the ability to make Motion act like all of the other primitives using the props provided.
 */
 
-var Motion = function Motion(_ref) {
+var Motion = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$position = _ref.position,
       position = _ref$position === void 0 ? "relative" : _ref$position,
       _ref$padding = _ref.padding,
@@ -12521,9 +12531,10 @@ var Motion = function Motion(_ref) {
 
   return /*#__PURE__*/React__default.createElement(MotionWrapper, _extends({
     position: position,
-    padding: padding
+    padding: padding,
+    ref: ref
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
-};
+});
 
 var ReelStyled = styled__default.div.withConfig({
   displayName: "Reelstyled__ReelStyled",
@@ -22115,6 +22126,14 @@ var fallbackValues$d = {
   disabledCheckedStyles: disabledCheckedStyles
 };
 
+var ARROW_LEFT = 37;
+var ARROW_UP = 38;
+var ARROW_RIGHT = 39;
+var ARROW_DOWN = 40;
+var ENTER = 13;
+var ESCAPE = 27;
+var SPACEBAR = 32;
+
 var CheckboxContainer = styled__default.div.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22185,7 +22204,7 @@ var Checkbox = function Checkbox(_ref4) {
       setFocused = _useState2[1];
 
   var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+    if (e.keyCode === ENTER) {
       func();
     }
   };
@@ -22475,18 +22494,17 @@ var DropdownIcon = function DropdownIcon() {
 };
 
 var check = function (it) {
-  return it && it.Math === Math && it;
+  return it && it.Math == Math && it;
 };
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
 var global_1 =
-  // eslint-disable-next-line es/no-global-this -- safe
+  // eslint-disable-next-line es-x/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
   // eslint-disable-next-line no-restricted-globals -- safe
   check(typeof self == 'object' && self) ||
   check(typeof commonjsGlobal == 'object' && commonjsGlobal) ||
-  check(typeof commonjsGlobal == 'object' && commonjsGlobal) ||
   // eslint-disable-next-line no-new-func -- fallback
   (function () { return this; })() || Function('return this')();
 
@@ -22500,12 +22518,12 @@ var fails = function (exec) {
 
 // Detect IE8's incomplete defineProperty implementation
 var descriptors = !fails(function () {
-  // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-  return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] !== 7;
+  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
+  return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
 });
 
 var functionBindNative = !fails(function () {
-  // eslint-disable-next-line es/no-function-prototype-bind -- safe
+  // eslint-disable-next-line es-x/no-function-prototype-bind -- safe
   var test = (function () { /* empty */ }).bind();
   // eslint-disable-next-line no-prototype-builtins -- safe
   return typeof test != 'function' || test.hasOwnProperty('prototype');
@@ -22518,7 +22536,7 @@ var functionCall = functionBindNative ? call.bind(call) : function () {
 };
 
 var $propertyIsEnumerable = {}.propertyIsEnumerable;
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 
 // Nashorn ~ JDK8 bug
@@ -22545,11 +22563,14 @@ var createPropertyDescriptor = function (bitmap, value) {
 };
 
 var FunctionPrototype = Function.prototype;
+var bind$1 = FunctionPrototype.bind;
 var call$1 = FunctionPrototype.call;
-var uncurryThisWithBind = functionBindNative && FunctionPrototype.bind.bind(call$1, call$1);
+var uncurryThis = functionBindNative && bind$1.bind(call$1, call$1);
 
-var functionUncurryThis = functionBindNative ? uncurryThisWithBind : function (fn) {
-  return function () {
+var functionUncurryThis = functionBindNative ? function (fn) {
+  return fn && uncurryThis(fn);
+} : function (fn) {
+  return fn && function () {
     return call$1.apply(fn, arguments);
   };
 };
@@ -22570,21 +22591,15 @@ var indexedObject = fails(function () {
   // eslint-disable-next-line no-prototype-builtins -- safe
   return !$Object('z').propertyIsEnumerable(0);
 }) ? function (it) {
-  return classofRaw(it) === 'String' ? split(it, '') : $Object(it);
+  return classofRaw(it) == 'String' ? split(it, '') : $Object(it);
 } : $Object;
 
-// we can't use just `it == null` since of `document.all` special case
-// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot-aec
-var isNullOrUndefined = function (it) {
-  return it === null || it === undefined;
-};
-
 var $TypeError = TypeError;
 
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
 var requireObjectCoercible = function (it) {
-  if (isNullOrUndefined(it)) throw new $TypeError("Can't call method on " + it);
+  if (it == undefined) throw $TypeError("Can't call method on " + it);
   return it;
 };
 
@@ -22596,32 +22611,13 @@ var toIndexedObject = function (it) {
   return indexedObject(requireObjectCoercible(it));
 };
 
-var documentAll = typeof document == 'object' && document.all;
-
-// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
-// eslint-disable-next-line unicorn/no-typeof-undefined -- required for testing
-var IS_HTMLDDA = typeof documentAll == 'undefined' && documentAll !== undefined;
-
-var documentAll_1 = {
-  all: documentAll,
-  IS_HTMLDDA: IS_HTMLDDA
-};
-
-var documentAll$1 = documentAll_1.all;
-
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-var isCallable = documentAll_1.IS_HTMLDDA ? function (argument) {
-  return typeof argument == 'function' || argument === documentAll$1;
-} : function (argument) {
+var isCallable = function (argument) {
   return typeof argument == 'function';
 };
 
-var documentAll$2 = documentAll_1.all;
-
-var isObject = documentAll_1.IS_HTMLDDA ? function (it) {
-  return typeof it == 'object' ? it !== null : isCallable(it) || it === documentAll$2;
-} : function (it) {
+var isObject = function (it) {
   return typeof it == 'object' ? it !== null : isCallable(it);
 };
 
@@ -22635,7 +22631,7 @@ var getBuiltIn = function (namespace, method) {
 
 var objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf);
 
-var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
+var engineUserAgent = getBuiltIn('navigator', 'userAgent') || '';
 
 var process$1 = global_1.process;
 var Deno = global_1.Deno;
@@ -22662,29 +22658,24 @@ if (!version && engineUserAgent) {
 
 var engineV8Version = version;
 
-/* eslint-disable es/no-symbol -- required for testing */
+/* eslint-disable es-x/no-symbol -- required for testing */
 
 
 
-
-var $String = global_1.String;
-
-// eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
-var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails(function () {
-  var symbol = Symbol('symbol detection');
+// eslint-disable-next-line es-x/no-object-getownpropertysymbols -- required for testing
+var nativeSymbol = !!Object.getOwnPropertySymbols && !fails(function () {
+  var symbol = Symbol();
   // Chrome 38 Symbol has incorrect toString conversion
   // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
-  // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
-  // of course, fail.
-  return !$String(symbol) || !(Object(symbol) instanceof Symbol) ||
+  return !String(symbol) || !(Object(symbol) instanceof Symbol) ||
     // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
     !Symbol.sham && engineV8Version && engineV8Version < 41;
 });
 
-/* eslint-disable es/no-symbol -- required for testing */
+/* eslint-disable es-x/no-symbol -- required for testing */
 
 
-var useSymbolAsUid = symbolConstructorDetection
+var useSymbolAsUid = nativeSymbol
   && !Symbol.sham
   && typeof Symbol.iterator == 'symbol';
 
@@ -22697,11 +22688,11 @@ var isSymbol = useSymbolAsUid ? function (it) {
   return isCallable($Symbol) && objectIsPrototypeOf($Symbol.prototype, $Object$1(it));
 };
 
-var $String$1 = String;
+var $String = String;
 
 var tryToString = function (argument) {
   try {
-    return $String$1(argument);
+    return $String(argument);
   } catch (error) {
     return 'Object';
   }
@@ -22712,14 +22703,14 @@ var $TypeError$1 = TypeError;
 // `Assert: IsCallable(argument) is true`
 var aCallable = function (argument) {
   if (isCallable(argument)) return argument;
-  throw new $TypeError$1(tryToString(argument) + ' is not a function');
+  throw $TypeError$1(tryToString(argument) + ' is not a function');
 };
 
 // `GetMethod` abstract operation
 // https://tc39.es/ecma262/#sec-getmethod
 var getMethod = function (V, P) {
   var func = V[P];
-  return isNullOrUndefined(func) ? undefined : aCallable(func);
+  return func == null ? undefined : aCallable(func);
 };
 
 var $TypeError$2 = TypeError;
@@ -22731,10 +22722,10 @@ var ordinaryToPrimitive = function (input, pref) {
   if (pref === 'string' && isCallable(fn = input.toString) && !isObject(val = functionCall(fn, input))) return val;
   if (isCallable(fn = input.valueOf) && !isObject(val = functionCall(fn, input))) return val;
   if (pref !== 'string' && isCallable(fn = input.toString) && !isObject(val = functionCall(fn, input))) return val;
-  throw new $TypeError$2("Can't convert object to primitive value");
+  throw $TypeError$2("Can't convert object to primitive value");
 };
 
-// eslint-disable-next-line es/no-object-defineproperty -- safe
+// eslint-disable-next-line es-x/no-object-defineproperty -- safe
 var defineProperty = Object.defineProperty;
 
 var defineGlobalProperty = function (key, value) {
@@ -22751,16 +22742,13 @@ var store = global_1[SHARED] || defineGlobalProperty(SHARED, {});
 var sharedStore = store;
 
 var shared = createCommonjsModule(function (module) {
-
-
-
 (module.exports = function (key, value) {
   return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.33.3',
+  version: '3.24.1',
   mode:  'global',
-  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
+  copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.24.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 });
@@ -22777,7 +22765,7 @@ var hasOwnProperty = functionUncurryThis({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
-// eslint-disable-next-line es/no-object-hasown -- safe
+// eslint-disable-next-line es-x/no-object-hasown -- safe
 var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
   return hasOwnProperty(toObject(it), key);
 };
@@ -22790,15 +22778,21 @@ var uid = function (key) {
   return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$3(++id + postfix, 36);
 };
 
-var Symbol$1 = global_1.Symbol;
 var WellKnownSymbolsStore = shared('wks');
-var createWellKnownSymbol = useSymbolAsUid ? Symbol$1['for'] || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid;
+var Symbol$1 = global_1.Symbol;
+var symbolFor = Symbol$1 && Symbol$1['for'];
+var createWellKnownSymbol = useSymbolAsUid ? Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid;
 
 var wellKnownSymbol = function (name) {
-  if (!hasOwnProperty_1(WellKnownSymbolsStore, name)) {
-    WellKnownSymbolsStore[name] = symbolConstructorDetection && hasOwnProperty_1(Symbol$1, name)
-      ? Symbol$1[name]
-      : createWellKnownSymbol('Symbol.' + name);
+  if (!hasOwnProperty_1(WellKnownSymbolsStore, name) || !(nativeSymbol || typeof WellKnownSymbolsStore[name] == 'string')) {
+    var description = 'Symbol.' + name;
+    if (nativeSymbol && hasOwnProperty_1(Symbol$1, name)) {
+      WellKnownSymbolsStore[name] = Symbol$1[name];
+    } else if (useSymbolAsUid && symbolFor) {
+      WellKnownSymbolsStore[name] = symbolFor(description);
+    } else {
+      WellKnownSymbolsStore[name] = createWellKnownSymbol(description);
+    }
   } return WellKnownSymbolsStore[name];
 };
 
@@ -22815,7 +22809,7 @@ var toPrimitive = function (input, pref) {
     if (pref === undefined) pref = 'default';
     result = functionCall(exoticToPrim, input, pref);
     if (!isObject(result) || isSymbol(result)) return result;
-    throw new $TypeError$3("Can't convert object to primitive value");
+    throw $TypeError$3("Can't convert object to primitive value");
   }
   if (pref === undefined) pref = 'number';
   return ordinaryToPrimitive(input, pref);
@@ -22838,13 +22832,13 @@ var documentCreateElement = function (it) {
 
 // Thanks to IE8 for its funny defineProperty
 var ie8DomDefine = !descriptors && !fails(function () {
-  // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
   return Object.defineProperty(documentCreateElement('div'), 'a', {
     get: function () { return 7; }
-  }).a !== 7;
+  }).a != 7;
 });
 
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 var $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 
 // `Object.getOwnPropertyDescriptor` method
@@ -22865,26 +22859,26 @@ var objectGetOwnPropertyDescriptor = {
 // V8 ~ Chrome 36-
 // https://bugs.chromium.org/p/v8/issues/detail?id=3334
 var v8PrototypeDefineBug = descriptors && fails(function () {
-  // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
   return Object.defineProperty(function () { /* empty */ }, 'prototype', {
     value: 42,
     writable: false
-  }).prototype !== 42;
+  }).prototype != 42;
 });
 
-var $String$2 = String;
+var $String$1 = String;
 var $TypeError$4 = TypeError;
 
 // `Assert: Type(argument) is Object`
 var anObject = function (argument) {
   if (isObject(argument)) return argument;
-  throw new $TypeError$4($String$2(argument) + ' is not an object');
+  throw $TypeError$4($String$1(argument) + ' is not an object');
 };
 
 var $TypeError$5 = TypeError;
-// eslint-disable-next-line es/no-object-defineproperty -- safe
+// eslint-disable-next-line es-x/no-object-defineproperty -- safe
 var $defineProperty = Object.defineProperty;
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 var $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
 var ENUMERABLE = 'enumerable';
 var CONFIGURABLE = 'configurable';
@@ -22914,7 +22908,7 @@ var f$2 = descriptors ? v8PrototypeDefineBug ? function defineProperty(O, P, Att
   if (ie8DomDefine) try {
     return $defineProperty(O, P, Attributes);
   } catch (error) { /* empty */ }
-  if ('get' in Attributes || 'set' in Attributes) throw new $TypeError$5('Accessors not supported');
+  if ('get' in Attributes || 'set' in Attributes) throw $TypeError$5('Accessors not supported');
   if ('value' in Attributes) O[P] = Attributes.value;
   return O;
 };
@@ -22931,7 +22925,7 @@ var createNonEnumerableProperty = descriptors ? function (object, key, value) {
 };
 
 var FunctionPrototype$1 = Function.prototype;
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 var getDescriptor = descriptors && Object.getOwnPropertyDescriptor;
 
 var EXISTS$1 = hasOwnProperty_1(FunctionPrototype$1, 'name');
@@ -22958,7 +22952,7 @@ var inspectSource = sharedStore.inspectSource;
 
 var WeakMap$1 = global_1.WeakMap;
 
-var weakMapBasicDetection = isCallable(WeakMap$1) && /native code/.test(String(WeakMap$1));
+var nativeWeakMap = isCallable(WeakMap$1) && /native code/.test(inspectSource(WeakMap$1));
 
 var keys$1 = shared('keys');
 
@@ -22981,29 +22975,27 @@ var getterFor = function (TYPE) {
   return function (it) {
     var state;
     if (!isObject(it) || (state = get(it)).type !== TYPE) {
-      throw new TypeError$1('Incompatible receiver, ' + TYPE + ' required');
+      throw TypeError$1('Incompatible receiver, ' + TYPE + ' required');
     } return state;
   };
 };
 
-if (weakMapBasicDetection || sharedStore.state) {
+if (nativeWeakMap || sharedStore.state) {
   var store$1 = sharedStore.state || (sharedStore.state = new WeakMap$2());
-  /* eslint-disable no-self-assign -- prototype methods protection */
-  store$1.get = store$1.get;
-  store$1.has = store$1.has;
-  store$1.set = store$1.set;
-  /* eslint-enable no-self-assign -- prototype methods protection */
+  var wmget = functionUncurryThis(store$1.get);
+  var wmhas = functionUncurryThis(store$1.has);
+  var wmset = functionUncurryThis(store$1.set);
   set = function (it, metadata) {
-    if (store$1.has(it)) throw new TypeError$1(OBJECT_ALREADY_INITIALIZED);
+    if (wmhas(store$1, it)) throw new TypeError$1(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
-    store$1.set(it, metadata);
+    wmset(store$1, it, metadata);
     return metadata;
   };
   get = function (it) {
-    return store$1.get(it) || {};
+    return wmget(store$1, it) || {};
   };
   has = function (it) {
-    return store$1.has(it);
+    return wmhas(store$1, it);
   };
 } else {
   var STATE = sharedKey('state');
@@ -23031,23 +23023,14 @@ var internalState = {
 };
 
 var makeBuiltIn_1 = createCommonjsModule(function (module) {
-
-
-
-
-
 var CONFIGURABLE_FUNCTION_NAME = functionName.CONFIGURABLE;
 
 
 
 var enforceInternalState = internalState.enforce;
 var getInternalState = internalState.get;
-var $String = String;
-// eslint-disable-next-line es/no-object-defineproperty -- safe
+// eslint-disable-next-line es-x/no-object-defineproperty -- safe
 var defineProperty = Object.defineProperty;
-var stringSlice = functionUncurryThis(''.slice);
-var replace = functionUncurryThis(''.replace);
-var join = functionUncurryThis([].join);
 
 var CONFIGURABLE_LENGTH = descriptors && !fails(function () {
   return defineProperty(function () { /* empty */ }, 'length', { value: 8 }).length !== 8;
@@ -23056,8 +23039,8 @@ var CONFIGURABLE_LENGTH = descriptors && !fails(function () {
 var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn = module.exports = function (value, name, options) {
-  if (stringSlice($String(name), 0, 7) === 'Symbol(') {
-    name = '[' + replace($String(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
+  if (String(name).slice(0, 7) === 'Symbol(') {
+    name = '[' + String(name).replace(/^Symbol\(([^)]*)\)/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -23076,7 +23059,7 @@ var makeBuiltIn = module.exports = function (value, name, options) {
   } catch (error) { /* empty */ }
   var state = enforceInternalState(value);
   if (!hasOwnProperty_1(state, 'source')) {
-    state.source = join(TEMPLATE, typeof name == 'string' ? name : '');
+    state.source = TEMPLATE.join(typeof name == 'string' ? name : '');
   } return value;
 };
 
@@ -23115,7 +23098,7 @@ var floor = Math.floor;
 
 // `Math.trunc` method
 // https://tc39.es/ecma262/#sec-math.trunc
-// eslint-disable-next-line es/no-math-trunc -- safe
+// eslint-disable-next-line es-x/no-math-trunc -- safe
 var mathTrunc = Math.trunc || function trunc(x) {
   var n = +x;
   return (n > 0 ? floor : ceil)(n);
@@ -23163,10 +23146,10 @@ var createMethod = function (IS_INCLUDES) {
     var value;
     // Array#includes uses SameValueZero equality algorithm
     // eslint-disable-next-line no-self-compare -- NaN check
-    if (IS_INCLUDES && el !== el) while (length > index) {
+    if (IS_INCLUDES && el != el) while (length > index) {
       value = O[index++];
       // eslint-disable-next-line no-self-compare -- NaN check
-      if (value !== value) return true;
+      if (value != value) return true;
     // Array#indexOf ignores holes, Array#includes - not
     } else for (;length > index; index++) {
       if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
@@ -23216,7 +23199,7 @@ var hiddenKeys$1 = enumBugKeys.concat('length', 'prototype');
 
 // `Object.getOwnPropertyNames` method
 // https://tc39.es/ecma262/#sec-object.getownpropertynames
-// eslint-disable-next-line es/no-object-getownpropertynames -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertynames -- safe
 var f$3 = Object.getOwnPropertyNames || function getOwnPropertyNames(O) {
   return objectKeysInternal(O, hiddenKeys$1);
 };
@@ -23225,7 +23208,7 @@ var objectGetOwnPropertyNames = {
 	f: f$3
 };
 
-// eslint-disable-next-line es/no-object-getownpropertysymbols -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertysymbols -- safe
 var f$4 = Object.getOwnPropertySymbols;
 
 var objectGetOwnPropertySymbols = {
@@ -23257,8 +23240,8 @@ var replacement = /#|\.prototype\./;
 
 var isForced = function (feature, detection) {
   var value = data[normalize(feature)];
-  return value === POLYFILL ? true
-    : value === NATIVE ? false
+  return value == POLYFILL ? true
+    : value == NATIVE ? false
     : isCallable(detection) ? fails(detection)
     : !!detection;
 };
@@ -23338,7 +23321,7 @@ var TO_STRING_TAG$1 = wellKnownSymbol('toStringTag');
 var $Object$3 = Object;
 
 // ES3 wrong here
-var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) === 'Arguments';
+var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';
 
 // fallback for IE11 Script Access Denied error
 var tryGet = function (it, key) {
@@ -23356,25 +23339,25 @@ var classof = toStringTagSupport ? classofRaw : function (it) {
     // builtinTag case
     : CORRECT_ARGUMENTS ? classofRaw(O)
     // ES3 arguments fallback
-    : (result = classofRaw(O)) === 'Object' && isCallable(O.callee) ? 'Arguments' : result;
+    : (result = classofRaw(O)) == 'Object' && isCallable(O.callee) ? 'Arguments' : result;
 };
 
-var $String$3 = String;
+var $String$2 = String;
 
 var toString_1 = function (argument) {
-  if (classof(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
-  return $String$3(argument);
+  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
+  return $String$2(argument);
 };
 
 var charAt = functionUncurryThis(''.charAt);
 
 var FORCED = fails(function () {
-  // eslint-disable-next-line es/no-array-string-prototype-at -- safe
+  // eslint-disable-next-line es-x/no-array-string-prototype-at -- safe
   return '𠮷'.at(-2) !== '\uD842';
 });
 
 // `String.prototype.at` method
-// https://tc39.es/ecma262/#sec-string.prototype.at
+// https://github.com/tc39/proposal-relative-indexing-method
 _export({ target: 'String', proto: true, forced: FORCED }, {
   at: function at(index) {
     var S = toString_1(requireObjectCoercible(this));
@@ -23387,14 +23370,14 @@ _export({ target: 'String', proto: true, forced: FORCED }, {
 
 // `Object.keys` method
 // https://tc39.es/ecma262/#sec-object.keys
-// eslint-disable-next-line es/no-object-keys -- safe
+// eslint-disable-next-line es-x/no-object-keys -- safe
 var objectKeys = Object.keys || function keys(O) {
   return objectKeysInternal(O, enumBugKeys);
 };
 
 // `Object.defineProperties` method
 // https://tc39.es/ecma262/#sec-object.defineproperties
-// eslint-disable-next-line es/no-object-defineproperties -- safe
+// eslint-disable-next-line es-x/no-object-defineproperties -- safe
 var f$5 = descriptors && !v8PrototypeDefineBug ? Object.defineProperties : function defineProperties(O, Properties) {
   anObject(O);
   var props = toIndexedObject(Properties);
@@ -23483,7 +23466,7 @@ hiddenKeys[IE_PROTO] = true;
 
 // `Object.create` method
 // https://tc39.es/ecma262/#sec-object.create
-// eslint-disable-next-line es/no-object-create -- safe
+// eslint-disable-next-line es-x/no-object-create -- safe
 var objectCreate = Object.create || function create(O, Properties) {
   var result;
   if (O !== null) {
@@ -23503,7 +23486,7 @@ var ArrayPrototype = Array.prototype;
 
 // Array.prototype[@@unscopables]
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-if (ArrayPrototype[UNSCOPABLES] === undefined) {
+if (ArrayPrototype[UNSCOPABLES] == undefined) {
   defineProperty$1(ArrayPrototype, UNSCOPABLES, {
     configurable: true,
     value: objectCreate(null)
@@ -23516,7 +23499,7 @@ var addToUnscopables = function (key) {
 };
 
 // `Array.prototype.at` method
-// https://tc39.es/ecma262/#sec-array.prototype.at
+// https://github.com/tc39/proposal-relative-indexing-method
 _export({ target: 'Array', proto: true }, {
   at: function at(index) {
     var O = toObject(this);
@@ -23529,19 +23512,13 @@ _export({ target: 'Array', proto: true }, {
 
 addToUnscopables('at');
 
-// eslint-disable-next-line es/no-typed-arrays -- safe
-var arrayBufferBasicDetection = typeof ArrayBuffer != 'undefined' && typeof DataView != 'undefined';
-
-var defineBuiltInAccessor = function (target, name, descriptor) {
-  if (descriptor.get) makeBuiltIn_1(descriptor.get, name, { getter: true });
-  if (descriptor.set) makeBuiltIn_1(descriptor.set, name, { setter: true });
-  return objectDefineProperty.f(target, name, descriptor);
-};
+// eslint-disable-next-line es-x/no-typed-arrays -- safe
+var arrayBufferNative = typeof ArrayBuffer != 'undefined' && typeof DataView != 'undefined';
 
 var correctPrototypeGetter = !fails(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
-  // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
+  // eslint-disable-next-line es-x/no-object-getprototypeof -- required for testing
   return Object.getPrototypeOf(new F()) !== F.prototype;
 });
 
@@ -23551,7 +23528,7 @@ var ObjectPrototype = $Object$4.prototype;
 
 // `Object.getPrototypeOf` method
 // https://tc39.es/ecma262/#sec-object.getprototypeof
-// eslint-disable-next-line es/no-object-getprototypeof -- safe
+// eslint-disable-next-line es-x/no-object-getprototypeof -- safe
 var objectGetPrototypeOf = correctPrototypeGetter ? $Object$4.getPrototypeOf : function (O) {
   var object = toObject(O);
   if (hasOwnProperty_1(object, IE_PROTO$1)) return object[IE_PROTO$1];
@@ -23561,19 +23538,12 @@ var objectGetPrototypeOf = correctPrototypeGetter ? $Object$4.getPrototypeOf : f
   } return object instanceof $Object$4 ? ObjectPrototype : null;
 };
 
-var functionUncurryThisAccessor = function (object, key, method) {
-  try {
-    // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
-    return functionUncurryThis(aCallable(Object.getOwnPropertyDescriptor(object, key)[method]));
-  } catch (error) { /* empty */ }
-};
-
-var $String$4 = String;
+var $String$3 = String;
 var $TypeError$6 = TypeError;
 
 var aPossiblePrototype = function (argument) {
   if (typeof argument == 'object' || isCallable(argument)) return argument;
-  throw new $TypeError$6("Can't set " + $String$4(argument) + ' as a prototype');
+  throw $TypeError$6("Can't set " + $String$3(argument) + ' as a prototype');
 };
 
 /* eslint-disable no-proto -- safe */
@@ -23584,13 +23554,14 @@ var aPossiblePrototype = function (argument) {
 // `Object.setPrototypeOf` method
 // https://tc39.es/ecma262/#sec-object.setprototypeof
 // Works with __proto__ only. Old v8 can't work with null proto objects.
-// eslint-disable-next-line es/no-object-setprototypeof -- safe
+// eslint-disable-next-line es-x/no-object-setprototypeof -- safe
 var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? function () {
   var CORRECT_SETTER = false;
   var test = {};
   var setter;
   try {
-    setter = functionUncurryThisAccessor(Object.prototype, '__proto__', 'set');
+    // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
+    setter = functionUncurryThis(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set);
     setter(test, []);
     CORRECT_SETTER = test instanceof Array;
   } catch (error) { /* empty */ }
@@ -23603,6 +23574,14 @@ var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? functio
   };
 }() : undefined);
 
+var defineProperty$2 = objectDefineProperty.f;
+
+
+
+
+
+
+
 var enforceInternalState = internalState.enforce;
 var getInternalState = internalState.get;
 var Int8Array = global_1.Int8Array;
@@ -23618,7 +23597,7 @@ var TO_STRING_TAG$2 = wellKnownSymbol('toStringTag');
 var TYPED_ARRAY_TAG = uid('TYPED_ARRAY_TAG');
 var TYPED_ARRAY_CONSTRUCTOR = 'TypedArrayConstructor';
 // Fixing native typed arrays in Opera Presto crashes the browser, see #595
-var NATIVE_ARRAY_BUFFER_VIEWS = arrayBufferBasicDetection && !!objectSetPrototypeOf && classof(global_1.opera) !== 'Opera';
+var NATIVE_ARRAY_BUFFER_VIEWS = arrayBufferNative && !!objectSetPrototypeOf && classof(global_1.opera) !== 'Opera';
 var TYPED_ARRAY_TAG_REQUIRED = false;
 var NAME, Constructor, Prototype;
 
@@ -23663,12 +23642,12 @@ var isTypedArray = function (it) {
 
 var aTypedArray = function (it) {
   if (isTypedArray(it)) return it;
-  throw new TypeError$2('Target is not a typed array');
+  throw TypeError$2('Target is not a typed array');
 };
 
 var aTypedArrayConstructor = function (C) {
   if (isCallable(C) && (!objectSetPrototypeOf || objectIsPrototypeOf(TypedArray, C))) return C;
-  throw new TypeError$2(tryToString(C) + ' is not a typed array constructor');
+  throw TypeError$2(tryToString(C) + ' is not a typed array constructor');
 };
 
 var exportTypedArrayMethod = function (KEY, property, forced, options) {
@@ -23732,7 +23711,7 @@ for (NAME in BigIntArrayConstructorsList) {
 if (!NATIVE_ARRAY_BUFFER_VIEWS || !isCallable(TypedArray) || TypedArray === Function.prototype) {
   // eslint-disable-next-line no-shadow -- safe
   TypedArray = function TypedArray() {
-    throw new TypeError$2('Incorrect invocation');
+    throw TypeError$2('Incorrect invocation');
   };
   if (NATIVE_ARRAY_BUFFER_VIEWS) for (NAME in TypedArrayConstructorsList) {
     if (global_1[NAME]) objectSetPrototypeOf(global_1[NAME], TypedArray);
@@ -23753,12 +23732,9 @@ if (NATIVE_ARRAY_BUFFER_VIEWS && objectGetPrototypeOf(Uint8ClampedArrayPrototype
 
 if (descriptors && !hasOwnProperty_1(TypedArrayPrototype, TO_STRING_TAG$2)) {
   TYPED_ARRAY_TAG_REQUIRED = true;
-  defineBuiltInAccessor(TypedArrayPrototype, TO_STRING_TAG$2, {
-    configurable: true,
-    get: function () {
-      return isObject(this) ? this[TYPED_ARRAY_TAG] : undefined;
-    }
-  });
+  defineProperty$2(TypedArrayPrototype, TO_STRING_TAG$2, { get: function () {
+    return isObject(this) ? this[TYPED_ARRAY_TAG] : undefined;
+  } });
   for (NAME in TypedArrayConstructorsList) if (global_1[NAME]) {
     createNonEnumerableProperty(global_1[NAME], TYPED_ARRAY_TAG, NAME);
   }
@@ -23782,7 +23758,7 @@ var aTypedArray$1 = arrayBufferViewCore.aTypedArray;
 var exportTypedArrayMethod$1 = arrayBufferViewCore.exportTypedArrayMethod;
 
 // `%TypedArray%.prototype.at` method
-// https://tc39.es/ecma262/#sec-%typedarray%.prototype.at
+// https://github.com/tc39/proposal-relative-indexing-method
 exportTypedArrayMethod$1('at', function at(index) {
   var O = aTypedArray$1(this);
   var len = lengthOfArrayLike(O);
@@ -24134,10 +24110,9 @@ var Dropdown = function Dropdown(_ref13) {
     dataQa: "".concat(ariaLabelledby, "-dropdown")
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "input",
-    "aria-multiline": "false",
     autoComplete: autocompleteValue,
     "aria-controls": "".concat(ariaLabelledby, "_listbox"),
-    "aria-activedescendant": "focused_option",
+    "aria-activedescendant": isOpen ? "focused_option" : undefined,
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
@@ -24201,7 +24176,7 @@ var Dropdown = function Dropdown(_ref13) {
         return handleItemSelection(e, choice, i);
       },
       onKeyDown: function onKeyDown(e) {
-        if (e.keyCode === 13) {
+        if (e.keyCode === ENTER) {
           handleItemSelection(e, choice, i);
         }
       },
@@ -25567,7 +25542,7 @@ var Popover = function Popover(_ref) {
       handleTogglePopover(false);
     },
     onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === 27) {
+      if (e.keyCode === ESCAPE) {
         handleTogglePopover(false);
       }
     },
@@ -26776,13 +26751,17 @@ var fontWeight$4 = {
   pS: "600",
   p: "600",
   pL: "600",
-  h6: "700"
+  h6: "700",
+  regular: "600",
+  extraSmall: "600",
+  small: "600",
+  large: "600"
 };
 var fallbackValues$p = {
   fontWeight: fontWeight$4
 };
 
-var LabeledAmount = function LabeledAmount(_ref) {
+var LabeledAmountV1 = function LabeledAmountV1(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "pL" : _ref$variant,
       label = _ref.label,
@@ -26806,19 +26785,46 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
+var LabeledAmountV2 = function LabeledAmountV2(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "regular" : _ref$variant,
+      label = _ref.label,
+      amount = _ref.amount,
+      themeValues = _ref.themeValues,
+      as = _ref.as,
+      extraStyles = _ref.extraStyles;
+  return /*#__PURE__*/React__default.createElement(Detail$1, {
+    variant: variant,
+    as: as,
+    weight: themeValues.fontWeight,
+    extraStyles: "display: flex; justify-content: space-between; ".concat(extraStyles)
+  }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
+};
+
+var _excluded$u = ["version"];
+
+var LabeledAmount = function LabeledAmount(_ref) {
+  var _ref$version = _ref.version,
+      version = _ref$version === void 0 ? "v1" : _ref$version,
+      rest = _objectWithoutProperties(_ref, _excluded$u);
+
+  var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
+  return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
+};
+
 var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$p, "default");
 
 var weightTitle = {
   "default": "600",
   small: "400"
 };
-var paragraphVariant = {
-  "default": "pL",
-  small: "pS"
+var detailVariant = {
+  "default": "large",
+  small: "small"
 };
 var fallbackValues$q = {
   weightTitle: weightTitle,
-  paragraphVariant: paragraphVariant
+  detailVariant: detailVariant
 };
 
 var LineItem = function LineItem(_ref) {
@@ -26845,35 +26851,27 @@ var LineItem = function LineItem(_ref) {
   var visibleCustomAttrs = customAttributes === null || customAttributes === void 0 ? void 0 : (_customAttributes$fil = customAttributes.filter(function (attr) {
     return (visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.includes(attr.key)) && attr.key !== "description";
   })) === null || _customAttributes$fil === void 0 ? void 0 : _customAttributes$fil.map(function (attr) {
-    return /*#__PURE__*/React__default.createElement(Paragraph$1, {
-      variant: "pS",
+    return /*#__PURE__*/React__default.createElement(Detail$1, {
+      variant: "small",
       weight: "400",
       key: attr.key,
       color: STORM_GREY
     }, "".concat(formatAttrKeys(attr.key), ": ").concat(attr.value));
   });
-  return /*#__PURE__*/React__default.createElement(Cluster, {
-    nowrap: true,
-    justify: "space-between",
-    align: "start"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  return /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0px"
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: themeValues.paragraphVariant,
-    weight: themeValues.weightTitle
-  }, description), /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: themeValues.paragraphVariant,
+  }, /*#__PURE__*/React__default.createElement(Detail$1, {
+    as: "h3",
+    variant: themeValues.detailVariant,
+    weight: themeValues.weightTitle,
+    extraStyles: "display: flex; justify-content: space-between;"
+  }, /*#__PURE__*/React__default.createElement("span", null, description), /*#__PURE__*/React__default.createElement("span", null, !!displayQuantity && "x".concat(displayQuantity)), /*#__PURE__*/React__default.createElement("span", null, amount)), /*#__PURE__*/React__default.createElement(Detail$1, {
+    as: "p",
+    variant: themeValues.detailVariant,
     weight: "400"
   }, subDescription), visibleCustomAttrs && /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem"
-  }, visibleCustomAttrs)), !!displayQuantity && /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: themeValues.paragraphVariant,
-    weight: themeValues.weightTitle
-  }, "x".concat(displayQuantity)), /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: themeValues.paragraphVariant,
-    weight: "600",
-    extraStyles: "margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;"
-  }, amount));
+  }, visibleCustomAttrs));
 };
 
 var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$q, "default");
@@ -26951,7 +26949,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$u = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$v = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
@@ -26967,7 +26965,7 @@ var NavFooter = function NavFooter(_ref) {
       footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
       isMobile = _ref.isMobile,
       footerWidth = _ref.footerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$u);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
@@ -26999,7 +26997,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$v = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$w = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
@@ -27009,7 +27007,7 @@ var NavHeader = function NavHeader(_ref) {
       isMobile = _ref.isMobile,
       backgroundColor = _ref.backgroundColor,
       headerWidth = _ref.headerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$w);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
@@ -27462,8 +27460,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
       name = _ref2.name,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$ariaDescribedBy = _ref2.ariaDescribedBy,
-      ariaDescribedBy = _ref2$ariaDescribedBy === void 0 ? "" : _ref2$ariaDescribedBy,
+      ariaDescribedBy = _ref2.ariaDescribedBy,
       themeValues = _ref2.themeValues,
       _ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
       ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
@@ -38379,7 +38376,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   });
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       onToggle();
     }
   };
@@ -38805,7 +38802,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$w = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$x = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
@@ -38815,7 +38812,7 @@ var TableRow = function TableRow(_ref) {
       hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
       onClick = _ref.onClick,
       themeValues = _ref.themeValues,
-      props = _objectWithoutProperties(_ref, _excluded$w);
+      props = _objectWithoutProperties(_ref, _excluded$x);
 
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
@@ -39908,7 +39905,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       toggleSection();
     }
   };
@@ -45844,7 +45841,9 @@ var Modal$1 = function Modal(_ref) {
       buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45871,7 +45870,11 @@ var Modal$1 = function Modal(_ref) {
       width: customWidth || "615px",
       overflow: "auto"
     },
-    underlayClickExits: underlayClickExits
+    underlayClickExits: underlayClickExits,
+    "aria-modal": true,
+    initialFocus: initialFocusSelector,
+    focusDialog: !initialFocusSelector // Focus the dialogue box itself if no selector for initial focus was provided
+
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -45882,9 +45885,10 @@ var Modal$1 = function Modal(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h6",
-    weight: FONT_WEIGHT_SEMIBOLD
+  }, /*#__PURE__*/React__default.createElement(Title$1, {
+    as: "h2",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    fontSize: "1.25rem"
   }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
     background: modalBodyBg,
     padding: "1.5rem"
@@ -45918,7 +45922,9 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button"
+    className: "modal-cancel-button",
+    role: "button",
+    name: cancelButtonText
   })), /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",
     padding: "0"
@@ -45930,7 +45936,9 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button"
+    className: "modal-continue-button",
+    role: "button",
+    name: continueButtonText
   }))) : /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -45941,7 +45949,9 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button"
+    className: "modal-cancel-button",
+    role: "button",
+    name: cancelButtonText
   }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
@@ -45950,7 +45960,9 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button"
+    className: "modal-continue-button",
+    role: "button",
+    name: continueButtonText
   }))) : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -45959,7 +45971,9 @@ var Modal$1 = function Modal(_ref) {
     text: closeButtonText,
     dataQa: closeButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-close-button"
+    className: "modal-close-button",
+    role: "button",
+    name: closeButtonText
   }))))))))), children);
 };
 
@@ -46316,9 +46330,8 @@ var AutopayModal = function AutopayModal(_ref) {
       toggleModal(false);
     } : navigateToSettings
   };
-  var hoverStyles = "\n  &:hover {\n    .autopayIcon { fill: ".concat(themeValues.hoverColor, "; text-decoration: underline; cursor: pointer; }\n  }");
-  var activeStyles = "\n   &:active {\n    .autopayIcon { fill: ".concat(themeValues.activeColor, "; text-decoration: underline; }\n    }");
-  var defaultStyles = "\n    .autopayIcon { fill: ".concat(themeValues.color, "; text-decoration: underline; }\n     ");
+  var hoverStyles = "text-decoration: underline;";
+  var activeStyles = "text-decoration: underline;";
 
   var renderAutoPayControl = function renderAutoPayControl() {
     switch (controlType) {
@@ -46357,7 +46370,7 @@ var AutopayModal = function AutopayModal(_ref) {
             },
             hoverStyles: hoverStyles,
             activeStyles: activeStyles,
-            extraStyles: defaultStyles
+            extraStyles: "cursor: pointer;"
           }, /*#__PURE__*/React__default.createElement(Cluster, {
             justify: isMobile ? "flex-start" : "flex-end",
             align: "center"
@@ -47367,12 +47380,12 @@ var lineItem = {
   small: "small"
 };
 var labeledAmountSubtotal = {
-  "default": "pL",
-  small: "pS"
+  "default": "large",
+  small: "small"
 };
 var labeledAmountTotal = {
-  "default": "h6",
-  small: "p"
+  "default": "large",
+  small: "small"
 };
 var fallbackValues$N = {
   backgroundColor: backgroundColor$c,
@@ -47381,7 +47394,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$x = ["amount"],
+var _excluded$y = ["amount"],
     _excluded2$1 = ["amount"];
 
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
@@ -47432,6 +47445,9 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "16px 0px"
   }, /*#__PURE__*/React__default.createElement(SolidDivider$1, null)), /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
+    version: "v2",
+    as: "h3",
+    variant: "small",
     extraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 14px;"),
     label: "Amount paid",
     amount: displayCurrency(voidableAmountPaid)
@@ -47439,15 +47455,18 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   , subtotal ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem 0"
   }, /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
+    version: "v2",
     variant: themeValues.labeledAmountSubtotal,
     label: "Subtotal",
-    amount: displayCurrency(subtotal)
+    amount: displayCurrency(subtotal),
+    as: "h3"
   }), feeElems), /*#__PURE__*/React__default.createElement(SolidDivider$1, null)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
-    as: "p",
+    version: "v2",
+    as: "h3",
     variant: themeValues.labeledAmountTotal,
     label: hasVoidablePaymentsSection ? "Remaining amount due" : "Total",
     amount: displayCurrency(typeof remainingBalance === "number" ? remainingBalance : total),
-    extraStyles: variant === "small" && "font-weight: ".concat(FONT_WEIGHT_BOLD, ";")
+    extraStyles: "margin-top: 1rem;"
   }));
 };
 
@@ -47626,7 +47645,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-        rest = _objectWithoutProperties(_ref5, _excluded$x);
+        rest = _objectWithoutProperties(_ref5, _excluded$y);
 
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
@@ -47655,6 +47674,8 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     }, /*#__PURE__*/React__default.createElement(Box, {
       padding: "4px 0"
     }), /*#__PURE__*/React__default.createElement(LabeledAmount$1, _extends({
+      version: "v2",
+      as: "h3",
       key: fee.label,
       variant: themeValues.labeledAmountSubtotal
     }, fee)));
@@ -47698,7 +47719,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Title$1, {
     weight: FONT_WEIGHT_BOLD,
-    as: "h1",
+    as: "h2",
     extraStyles: "font-size: 1.375rem;",
     id: "payment-details-title"
   }, titleText), /*#__PURE__*/React__default.createElement(Title$1, {
@@ -47706,7 +47727,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     as: "p",
     extraStyles: "font-size: 1.375rem;"
   }, displayCurrency(total)))) : /*#__PURE__*/React__default.createElement(Title$1, {
-    as: "h1",
+    as: "h2",
     weight: FONT_WEIGHT_BOLD,
     margin: "1rem 0 0 0",
     extraStyles: "font-size: 1.75rem;",
@@ -47791,7 +47812,8 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    }
+    },
+    initialFocusSelector: "[name='Close']"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     onClick: function onClick() {
@@ -47804,7 +47826,9 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;"
+    extraStyles: "cursor: pointer;",
+    role: "button",
+    className: "modal-trigger"
   }, link));
 };
 
@@ -47861,7 +47885,9 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       variant = _ref.variant,
       _ref$linkVariant = _ref.linkVariant,
       linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -47887,7 +47913,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    }
+    },
+    initialFocusSelector: initialFocusSelector
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: linkVariant,
     onClick: function onClick() {
@@ -47900,7 +47927,10 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer"
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer",
+    role: "button" // This should always be a "button" since it opens a modal
+    ,
+    className: "modal-trigger"
   }, link));
 };
 
@@ -47913,7 +47943,9 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       terms = _ref.terms,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant;
+      linkVariant = _ref.linkVariant,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47935,7 +47967,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant
+    linkVariant: linkVariant,
+    initialFocusSelector: initialFocusSelector
   })))));
 };
 
@@ -47966,7 +47999,9 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _ref$checkboxMargin = _ref.checkboxMargin,
       checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
       _ref$modalTitle = _ref.modalTitle,
-      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -48022,7 +48057,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     isOpen: showTerms,
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
-    title: modalTitle
+    title: modalTitle,
+    initialFocusSelector: initialFocusSelector
   })), /*#__PURE__*/React__default.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": true
@@ -48033,12 +48069,12 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$y = ["version"];
+var _excluded$z = ["version"];
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
       version = _ref$version === void 0 ? "v1" : _ref$version,
-      rest = _objectWithoutProperties(_ref, _excluded$y);
+      rest = _objectWithoutProperties(_ref, _excluded$z);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
@@ -48223,7 +48259,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };
 
@@ -48419,7 +48456,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };
 
@@ -48715,6 +48753,7 @@ var fallbackValues$Q = {
   focusStyles: focusStyles
 };
 
+var _excluded$A = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired"];
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -48761,11 +48800,39 @@ var RadioSection = function RadioSection(_ref) {
       containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
       ariaDescribedBy = _ref.ariaDescribedBy,
       _ref$isSectionRequire = _ref.isSectionRequired,
-      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire;
+      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
+      rest = _objectWithoutProperties(_ref, _excluded$A);
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var sectionRefs = React.useRef(_toConsumableArray(Array(sections.length)).map(function () {
+    return /*#__PURE__*/React.createRef();
+  }));
+
+  var handleKeyDown = function handleKeyDown(id, e, i) {
+    if (e.currentTarget !== e.target) {
+      return;
+    } // Allow Enter and Space to select a section
+
 
-  var handleKeyDown = function handleKeyDown(id, e) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
+    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
+      e.preventDefault();
       toggleOpenSection(id);
+    } // Allow Up and Down arrow navigation between sections
+
+
+    if (e.keyCode == ARROW_UP || e.keyCode == ARROW_DOWN || e.keyCode == ARROW_LEFT || e.keyCode == ARROW_RIGHT) {
+      var _sectionRefs$current$, _sectionRefs$current$2, _sections$nextIndex, _sections$nextIndex2;
+
+      e.preventDefault();
+      var indexIncrement = e.keyCode == ARROW_RIGHT || e.keyCode == ARROW_DOWN ? 1 : -1;
+      var nextIndex = wrapIndex(i + indexIncrement, sections.length);
+      sectionRefs === null || sectionRefs === void 0 ? void 0 : (_sectionRefs$current$ = sectionRefs.current[nextIndex]) === null || _sectionRefs$current$ === void 0 ? void 0 : (_sectionRefs$current$2 = _sectionRefs$current$.current) === null || _sectionRefs$current$2 === void 0 ? void 0 : _sectionRefs$current$2.focus();
+      setFocused((_sections$nextIndex = sections[nextIndex]) === null || _sections$nextIndex === void 0 ? void 0 : _sections$nextIndex.id);
+      toggleOpenSection((_sections$nextIndex2 = sections[nextIndex]) === null || _sections$nextIndex2 === void 0 ? void 0 : _sections$nextIndex2.id);
     }
   };
 
@@ -48804,34 +48871,29 @@ var RadioSection = function RadioSection(_ref) {
     var fade = _ref4.fade;
     return fade && "opacity: 0.4;";
   });
-
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      focused = _useState2[0],
-      setFocused = _useState2[1];
-
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "1px",
     border: "1px solid ".concat(themeValues.borderColor),
     borderRadius: "4px",
     extraStyles: containerStyles
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: "0",
-    "aria-role": "radiogroup",
+    role: "radiogroup",
     "aria-required": isSectionRequired
-  }, sections.filter(function (section) {
+  }, rest), sections.filter(function (section) {
     return !section.hidden;
-  }).map(function (section) {
+  }).map(function (section, i) {
     return /*#__PURE__*/React__default.createElement(Motion, {
       tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
-      onKeyDown: function onKeyDown(e) {
-        return !section.disabled && handleKeyDown(section.id, e);
+      ref: sectionRefs.current[i],
+      onBlur: function onBlur() {
+        return !section.disabled && setFocused(null);
       },
       onFocus: function onFocus() {
         return !section.disabled && setFocused(section.id);
       },
-      onBlur: function onBlur() {
-        return !section.disabled && setFocused(null);
+      onKeyDown: function onKeyDown(e) {
+        return !section.disabled && handleKeyDown(section.id, e, i);
       },
       hoverStyles: themeValues.focusStyles,
       animate: openSection === section.id ? "open" : "closed",
@@ -48841,7 +48903,9 @@ var RadioSection = function RadioSection(_ref) {
       role: "radio",
       "aria-checked": openSection === section.id,
       "aria-disabled": section.disabled,
-      "aria-required": section === null || section === void 0 ? void 0 : section.required
+      "aria-required": section.required,
+      "aria-labelledby": section.id,
+      "aria-describedby": "right-icons-".concat(idString(section))
     }, /*#__PURE__*/React__default.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -48880,7 +48944,7 @@ var RadioSection = function RadioSection(_ref) {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1",
-      isRequired: section === null || section === void 0 ? void 0 : section.required
+      isRequired: section.required
     })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
@@ -48890,9 +48954,10 @@ var RadioSection = function RadioSection(_ref) {
       htmlFor: "radio-input-".concat(idString(section)),
       color: CHARADE_GREY
     }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
+      id: "right-icons-".concat(idString(section)),
       childGap: "0.5rem",
-      "aria-label": (section === null || section === void 0 ? void 0 : section.rightIconsLabel) || null,
-      role: (section === null || section === void 0 ? void 0 : section.rightIconsRole) || null
+      "aria-label": section.rightIconsLabel || null,
+      role: section.rightIconsRole || null
     }, section.rightIcons.map(function (icon) {
       return /*#__PURE__*/React__default.createElement(RightIcon, {
         src: icon.img,