@thecb/components 9.3.0-beta.2 → 9.3.0

package/dist/index.esm.js

@@ -5011,6 +5011,7 @@ var INFO_BLUE = "#E4F4FD";
 var CORNFLOWER_BLUE = "#EBEFFB";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
 var MATISSE_BLUE = "#15749D";
+var MATISSE_BLUE_DARK = "#105C7D";
 var ROYAL_BLUE = "#3181E3";
 var ROYAL_BLUE_VIVID = "#3B5BDB";
 var ASTRAL_BLUE = "#3176AA";
@@ -5043,7 +5044,8 @@ var FANTASY_RED = "#FCF4F4";
 var COSMOS_RED = "#FFD0D3";
 var BLUSH_RED = "#FFF0F5"; // Second level color constants
 
-var ERROR_COLOR = RAZZMATAZZ_RED; // These colors are sequestered so that the alert component can reference them // by type of alert
+var ERROR_COLOR = RAZZMATAZZ_RED;
+var ERROR_BACKGROUND_COLOR = "#FFF4F8"; // These colors are sequestered so that the alert component can reference them // by type of alert
 
 var ALERT_COLORS = {
   warn: {
@@ -5145,6 +5147,7 @@ var colors = /*#__PURE__*/Object.freeze({
   BOSTON_BLUE: BOSTON_BLUE,
   HOVER_LIGHT_BLUE: HOVER_LIGHT_BLUE,
   MATISSE_BLUE: MATISSE_BLUE,
+  MATISSE_BLUE_DARK: MATISSE_BLUE_DARK,
   ROYAL_BLUE: ROYAL_BLUE,
   ROYAL_BLUE_VIVID: ROYAL_BLUE_VIVID,
   ASTRAL_BLUE: ASTRAL_BLUE,
@@ -5174,7 +5177,8 @@ var colors = /*#__PURE__*/Object.freeze({
   RASPBERRY: RASPBERRY,
   ALERT_COLORS: ALERT_COLORS,
   PILL_COLORS: PILL_COLORS,
-  ERROR_COLOR: ERROR_COLOR
+  ERROR_COLOR: ERROR_COLOR,
+  ERROR_BACKGROUND_COLOR: ERROR_BACKGROUND_COLOR
 });
 
 var TextSpan = styled.span.withConfig({
@@ -12914,7 +12918,7 @@ var Spinner = function Spinner(_ref) {
 */
 
 
-var ButtonWithAction = function ButtonWithAction(_ref2) {
+var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$action = _ref2.action,
       action = _ref2$action === void 0 ? noop : _ref2$action,
       _ref2$variant = _ref2.variant,
@@ -12945,6 +12949,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      box-shadow: 0 0 10px #6D717E;\n      outline: none;\n    }\n    ".concat(extraDisabledStyles, "\n  ");
   return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
     variant: variant,
     padding: themeValues.padding,
     minHeight: themeValues.height,
@@ -12973,7 +12978,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
     textWrap: textWrap,
     extraStyles: textExtraStyles
   }, text)));
-};
+});
 
 var primaryColor = {
   info: "".concat(WHITE),
@@ -13671,7 +13676,9 @@ var AccountNumberImage = function AccountNumberImage() {
     xmlns: "http://www.w3.org/2000/svg",
     width: "371",
     height: "164",
-    viewBox: "0 0 371 164"
+    viewBox: "0 0 371 164",
+    role: "img",
+    "aria-label": "A check with the account number highlighted in the bottom center"
   }, /*#__PURE__*/React.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -13752,7 +13759,9 @@ var RoutingNumberImage = function RoutingNumberImage() {
     xmlns: "http://www.w3.org/2000/svg",
     width: "371",
     height: "164",
-    viewBox: "0 0 371 164"
+    viewBox: "0 0 371 164",
+    role: "img",
+    "aria-label": "A check with the routing number highlighted in the lower left hand corner"
   }, /*#__PURE__*/React.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -13835,7 +13844,9 @@ var CheckmarkIcon = function CheckmarkIcon() {
     viewBox: "0 0 98 98",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink"
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    role: "img",
+    "aria-label": "Successful payment, green checkmark"
   }, /*#__PURE__*/React.createElement("g", {
     id: "Cityville-Checkout---Desktop---Logged-In",
     stroke: "none",
@@ -13880,7 +13891,9 @@ var BankIcon = function BankIcon() {
     height: "18",
     viewBox: "0 0 28 18",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Check Payment"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0 2.25C0 1.00736 1.04467 0 2.33333 0H25.6667C26.9553 0 28 1.00736 28 2.25V15.75C28 16.9926 26.9553 18 25.6667 18H2.33333C1.04467 18 0 16.9926 0 15.75V2.25Z",
     fill: "#E4F4FD"
@@ -13927,7 +13940,9 @@ var GenericCard = function GenericCard() {
     height: "18",
     viewBox: "0 0 28 18",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Card Payment"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "28",
     height: "18",
@@ -15186,7 +15201,9 @@ var GenericCardLarge = function GenericCardLarge() {
     height: "24",
     viewBox: "0 0 36 24",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Card Payment"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "36",
     height: "24",
@@ -15275,7 +15292,8 @@ var ShoppingCartIcon = function ShoppingCartIcon() {
 };
 
 var TrashIcon = function TrashIcon(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+      iconFill = _ref.iconFill;
   return /*#__PURE__*/React.createElement("svg", {
     width: "20px",
     height: "20px",
@@ -15299,12 +15317,12 @@ var TrashIcon = function TrashIcon(_ref) {
     xlinkHref: "#trash-path-1"
   })), /*#__PURE__*/React.createElement("use", {
     id: "trash-Mask",
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     fillRule: "nonzero",
     xlinkHref: "#trash-path-1"
   }), /*#__PURE__*/React.createElement("polygon", {
     id: "trash-Path",
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     fillRule: "nonzero",
     mask: "url(#trash-mask-2)",
     points: "0 0 20 0 20 20 0 20"
@@ -18235,6 +18253,34 @@ var PlusCircleIcon = function PlusCircleIcon(_ref) {
   }));
 };
 
+var KebabMenuIcon = function KebabMenuIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "21",
+    height: "32",
+    viewBox: "0 0 21 32",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 4C0 1.79086 1.79086 0 4 0L17 0C19.2091 0 21 1.79086 21 4V28C21 30.2091 19.2091 32 17 32H4C1.79086 32 0 30.2091 0 28L0 4Z",
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5 6C9.39333 6 8.5 6.89333 8.5 8C8.5 9.10667 9.39333 10 10.5 10C11.6067 10 12.5 9.10667 12.5 8C12.5 6.89333 11.6067 6 10.5 6Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5 14C9.39333 14 8.5 14.8933 8.5 16C8.5 17.1067 9.39333 18 10.5 18C11.6067 18 12.5 17.1067 12.5 16C12.5 14.8933 11.6067 14 10.5 14Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5 22C9.39333 22 8.5 22.9067 8.5 24C8.5 25.0933 9.40667 26 10.5 26C11.5933 26 12.5 25.0933 12.5 24C12.5 22.9067 11.6067 22 10.5 22Z",
+    fill: "#3B5BDB"
+  }));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -22121,10 +22167,9 @@ var Checkbox = function Checkbox(_ref4) {
       checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
       extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles,
+      labelledById = _ref4.labelledById,
       _ref4$dataQa = _ref4.dataQa,
-      dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa,
-      _ref4$isRequired = _ref4.isRequired,
-      isRequired = _ref4$isRequired === void 0 ? false : _ref4$isRequired;
+      dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -22137,6 +22182,9 @@ var Checkbox = function Checkbox(_ref4) {
     }
   };
 
+  var titleId = title ? "checkboxlabel-".concat(name) : undefined;
+  var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
+  var ariaLabel = ariaLabelledById ? undefined : name;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     tabIndex: "0",
@@ -22160,7 +22208,8 @@ var Checkbox = function Checkbox(_ref4) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
-    "aria-label": name,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledById,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
@@ -22178,8 +22227,7 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles,
-    "aria-required": isRequired
+    focusedStyles: themeValues.focusedStyles
   }, /*#__PURE__*/React.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -22188,6 +22236,7 @@ var Checkbox = function Checkbox(_ref4) {
   }, /*#__PURE__*/React.createElement("polyline", {
     points: "20 6 9 17 4 12"
   })))), title && /*#__PURE__*/React.createElement(Text$1, {
+    id: titleId,
     variant: "p",
     weight: themeValues.textFontWeight,
     color: themeValues.textColor,
@@ -22418,17 +22467,18 @@ 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-x/no-global-this -- safe
+  // eslint-disable-next-line es/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')();
 
@@ -22442,12 +22492,12 @@ var fails = function (exec) {
 
 // Detect IE8's incomplete defineProperty implementation
 var descriptors = !fails(function () {
-  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
-  return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
+  // eslint-disable-next-line es/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-x/no-function-prototype-bind -- safe
+  // eslint-disable-next-line es/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');
@@ -22460,7 +22510,7 @@ var functionCall = functionBindNative ? call.bind(call) : function () {
 };
 
 var $propertyIsEnumerable = {}.propertyIsEnumerable;
-// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
 var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 
 // Nashorn ~ JDK8 bug
@@ -22487,14 +22537,11 @@ var createPropertyDescriptor = function (bitmap, value) {
 };
 
 var FunctionPrototype = Function.prototype;
-var bind$1 = FunctionPrototype.bind;
 var call$1 = FunctionPrototype.call;
-var uncurryThis = functionBindNative && bind$1.bind(call$1, call$1);
+var uncurryThisWithBind = functionBindNative && FunctionPrototype.bind.bind(call$1, call$1);
 
-var functionUncurryThis = functionBindNative ? function (fn) {
-  return fn && uncurryThis(fn);
-} : function (fn) {
-  return fn && function () {
+var functionUncurryThis = functionBindNative ? uncurryThisWithBind : function (fn) {
+  return function () {
     return call$1.apply(fn, arguments);
   };
 };
@@ -22515,15 +22562,21 @@ 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 (it == undefined) throw $TypeError("Can't call method on " + it);
+  if (isNullOrUndefined(it)) throw new $TypeError("Can't call method on " + it);
   return it;
 };
 
@@ -22535,13 +22588,32 @@ 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 = function (argument) {
+var isCallable = documentAll_1.IS_HTMLDDA ? function (argument) {
+  return typeof argument == 'function' || argument === documentAll$1;
+} : function (argument) {
   return typeof argument == 'function';
 };
 
-var isObject = function (it) {
+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) {
   return typeof it == 'object' ? it !== null : isCallable(it);
 };
 
@@ -22555,7 +22627,7 @@ var getBuiltIn = function (namespace, method) {
 
 var objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf);
 
-var engineUserAgent = getBuiltIn('navigator', 'userAgent') || '';
+var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
 
 var process$1 = global_1.process;
 var Deno = global_1.Deno;
@@ -22582,24 +22654,29 @@ if (!version && engineUserAgent) {
 
 var engineV8Version = version;
 
-/* eslint-disable es-x/no-symbol -- required for testing */
+/* eslint-disable es/no-symbol -- required for testing */
+
+
 
 
+var $String = global_1.String;
 
-// eslint-disable-next-line es-x/no-object-getownpropertysymbols -- required for testing
-var nativeSymbol = !!Object.getOwnPropertySymbols && !fails(function () {
-  var symbol = Symbol();
+// eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
+var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails(function () {
+  var symbol = Symbol('symbol detection');
   // Chrome 38 Symbol has incorrect toString conversion
   // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
-  return !String(symbol) || !(Object(symbol) instanceof Symbol) ||
+  // 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) ||
     // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
     !Symbol.sham && engineV8Version && engineV8Version < 41;
 });
 
-/* eslint-disable es-x/no-symbol -- required for testing */
+/* eslint-disable es/no-symbol -- required for testing */
 
 
-var useSymbolAsUid = nativeSymbol
+var useSymbolAsUid = symbolConstructorDetection
   && !Symbol.sham
   && typeof Symbol.iterator == 'symbol';
 
@@ -22612,11 +22689,11 @@ var isSymbol = useSymbolAsUid ? function (it) {
   return isCallable($Symbol) && objectIsPrototypeOf($Symbol.prototype, $Object$1(it));
 };
 
-var $String = String;
+var $String$1 = String;
 
 var tryToString = function (argument) {
   try {
-    return $String(argument);
+    return $String$1(argument);
   } catch (error) {
     return 'Object';
   }
@@ -22627,14 +22704,14 @@ var $TypeError$1 = TypeError;
 // `Assert: IsCallable(argument) is true`
 var aCallable = function (argument) {
   if (isCallable(argument)) return argument;
-  throw $TypeError$1(tryToString(argument) + ' is not a function');
+  throw new $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 func == null ? undefined : aCallable(func);
+  return isNullOrUndefined(func) ? undefined : aCallable(func);
 };
 
 var $TypeError$2 = TypeError;
@@ -22646,10 +22723,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 $TypeError$2("Can't convert object to primitive value");
+  throw new $TypeError$2("Can't convert object to primitive value");
 };
 
-// eslint-disable-next-line es-x/no-object-defineproperty -- safe
+// eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty = Object.defineProperty;
 
 var defineGlobalProperty = function (key, value) {
@@ -22666,13 +22743,16 @@ 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.24.1',
+  version: '3.33.3',
   mode:  'global',
-  copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.24.1/LICENSE',
+  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 });
@@ -22689,7 +22769,7 @@ var hasOwnProperty = functionUncurryThis({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
-// eslint-disable-next-line es-x/no-object-hasown -- safe
+// eslint-disable-next-line es/no-object-hasown -- safe
 var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
   return hasOwnProperty(toObject(it), key);
 };
@@ -22702,21 +22782,15 @@ var uid = function (key) {
   return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$3(++id + postfix, 36);
 };
 
-var WellKnownSymbolsStore = shared('wks');
 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 WellKnownSymbolsStore = shared('wks');
+var createWellKnownSymbol = useSymbolAsUid ? Symbol$1['for'] || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid;
 
 var wellKnownSymbol = function (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);
-    }
+  if (!hasOwnProperty_1(WellKnownSymbolsStore, name)) {
+    WellKnownSymbolsStore[name] = symbolConstructorDetection && hasOwnProperty_1(Symbol$1, name)
+      ? Symbol$1[name]
+      : createWellKnownSymbol('Symbol.' + name);
   } return WellKnownSymbolsStore[name];
 };
 
@@ -22733,7 +22807,7 @@ var toPrimitive = function (input, pref) {
     if (pref === undefined) pref = 'default';
     result = functionCall(exoticToPrim, input, pref);
     if (!isObject(result) || isSymbol(result)) return result;
-    throw $TypeError$3("Can't convert object to primitive value");
+    throw new $TypeError$3("Can't convert object to primitive value");
   }
   if (pref === undefined) pref = 'number';
   return ordinaryToPrimitive(input, pref);
@@ -22756,13 +22830,13 @@ var documentCreateElement = function (it) {
 
 // Thanks to IE8 for its funny defineProperty
 var ie8DomDefine = !descriptors && !fails(function () {
-  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
+  // eslint-disable-next-line es/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-x/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
 var $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 
 // `Object.getOwnPropertyDescriptor` method
@@ -22783,26 +22857,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-x/no-object-defineproperty -- required for testing
+  // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(function () { /* empty */ }, 'prototype', {
     value: 42,
     writable: false
-  }).prototype != 42;
+  }).prototype !== 42;
 });
 
-var $String$1 = String;
+var $String$2 = String;
 var $TypeError$4 = TypeError;
 
 // `Assert: Type(argument) is Object`
 var anObject = function (argument) {
   if (isObject(argument)) return argument;
-  throw $TypeError$4($String$1(argument) + ' is not an object');
+  throw new $TypeError$4($String$2(argument) + ' is not an object');
 };
 
 var $TypeError$5 = TypeError;
-// eslint-disable-next-line es-x/no-object-defineproperty -- safe
+// eslint-disable-next-line es/no-object-defineproperty -- safe
 var $defineProperty = Object.defineProperty;
-// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
 var $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
 var ENUMERABLE = 'enumerable';
 var CONFIGURABLE = 'configurable';
@@ -22832,7 +22906,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 $TypeError$5('Accessors not supported');
+  if ('get' in Attributes || 'set' in Attributes) throw new $TypeError$5('Accessors not supported');
   if ('value' in Attributes) O[P] = Attributes.value;
   return O;
 };
@@ -22849,7 +22923,7 @@ var createNonEnumerableProperty = descriptors ? function (object, key, value) {
 };
 
 var FunctionPrototype$1 = Function.prototype;
-// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
 var getDescriptor = descriptors && Object.getOwnPropertyDescriptor;
 
 var EXISTS$1 = hasOwnProperty_1(FunctionPrototype$1, 'name');
@@ -22876,7 +22950,7 @@ var inspectSource = sharedStore.inspectSource;
 
 var WeakMap$1 = global_1.WeakMap;
 
-var nativeWeakMap = isCallable(WeakMap$1) && /native code/.test(inspectSource(WeakMap$1));
+var weakMapBasicDetection = isCallable(WeakMap$1) && /native code/.test(String(WeakMap$1));
 
 var keys$1 = shared('keys');
 
@@ -22899,27 +22973,29 @@ var getterFor = function (TYPE) {
   return function (it) {
     var state;
     if (!isObject(it) || (state = get(it)).type !== TYPE) {
-      throw TypeError$1('Incompatible receiver, ' + TYPE + ' required');
+      throw new TypeError$1('Incompatible receiver, ' + TYPE + ' required');
     } return state;
   };
 };
 
-if (nativeWeakMap || sharedStore.state) {
+if (weakMapBasicDetection || sharedStore.state) {
   var store$1 = sharedStore.state || (sharedStore.state = new WeakMap$2());
-  var wmget = functionUncurryThis(store$1.get);
-  var wmhas = functionUncurryThis(store$1.has);
-  var wmset = functionUncurryThis(store$1.set);
+  /* 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 */
   set = function (it, metadata) {
-    if (wmhas(store$1, it)) throw new TypeError$1(OBJECT_ALREADY_INITIALIZED);
+    if (store$1.has(it)) throw new TypeError$1(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
-    wmset(store$1, it, metadata);
+    store$1.set(it, metadata);
     return metadata;
   };
   get = function (it) {
-    return wmget(store$1, it) || {};
+    return store$1.get(it) || {};
   };
   has = function (it) {
-    return wmhas(store$1, it);
+    return store$1.has(it);
   };
 } else {
   var STATE = sharedKey('state');
@@ -22947,14 +23023,23 @@ var internalState = {
 };
 
 var makeBuiltIn_1 = createCommonjsModule(function (module) {
+
+
+
+
+
 var CONFIGURABLE_FUNCTION_NAME = functionName.CONFIGURABLE;
 
 
 
 var enforceInternalState = internalState.enforce;
 var getInternalState = internalState.get;
-// eslint-disable-next-line es-x/no-object-defineproperty -- safe
+var $String = String;
+// eslint-disable-next-line es/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;
@@ -22963,8 +23048,8 @@ var CONFIGURABLE_LENGTH = descriptors && !fails(function () {
 var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn = module.exports = function (value, name, options) {
-  if (String(name).slice(0, 7) === 'Symbol(') {
-    name = '[' + String(name).replace(/^Symbol\(([^)]*)\)/, '$1') + ']';
+  if (stringSlice($String(name), 0, 7) === 'Symbol(') {
+    name = '[' + replace($String(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -22983,7 +23068,7 @@ var makeBuiltIn = module.exports = function (value, name, options) {
   } catch (error) { /* empty */ }
   var state = enforceInternalState(value);
   if (!hasOwnProperty_1(state, 'source')) {
-    state.source = TEMPLATE.join(typeof name == 'string' ? name : '');
+    state.source = join(TEMPLATE, typeof name == 'string' ? name : '');
   } return value;
 };
 
@@ -23022,7 +23107,7 @@ var floor = Math.floor;
 
 // `Math.trunc` method
 // https://tc39.es/ecma262/#sec-math.trunc
-// eslint-disable-next-line es-x/no-math-trunc -- safe
+// eslint-disable-next-line es/no-math-trunc -- safe
 var mathTrunc = Math.trunc || function trunc(x) {
   var n = +x;
   return (n > 0 ? floor : ceil)(n);
@@ -23070,10 +23155,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;
@@ -23123,7 +23208,7 @@ var hiddenKeys$1 = enumBugKeys.concat('length', 'prototype');
 
 // `Object.getOwnPropertyNames` method
 // https://tc39.es/ecma262/#sec-object.getownpropertynames
-// eslint-disable-next-line es-x/no-object-getownpropertynames -- safe
+// eslint-disable-next-line es/no-object-getownpropertynames -- safe
 var f$3 = Object.getOwnPropertyNames || function getOwnPropertyNames(O) {
   return objectKeysInternal(O, hiddenKeys$1);
 };
@@ -23132,7 +23217,7 @@ var objectGetOwnPropertyNames = {
 	f: f$3
 };
 
-// eslint-disable-next-line es-x/no-object-getownpropertysymbols -- safe
+// eslint-disable-next-line es/no-object-getownpropertysymbols -- safe
 var f$4 = Object.getOwnPropertySymbols;
 
 var objectGetOwnPropertySymbols = {
@@ -23164,8 +23249,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;
 };
@@ -23245,7 +23330,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) {
@@ -23263,25 +23348,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$2 = String;
+var $String$3 = String;
 
 var toString_1 = function (argument) {
-  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
-  return $String$2(argument);
+  if (classof(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
+  return $String$3(argument);
 };
 
 var charAt = functionUncurryThis(''.charAt);
 
 var FORCED = fails(function () {
-  // eslint-disable-next-line es-x/no-array-string-prototype-at -- safe
+  // eslint-disable-next-line es/no-array-string-prototype-at -- safe
   return '𠮷'.at(-2) !== '\uD842';
 });
 
 // `String.prototype.at` method
-// https://github.com/tc39/proposal-relative-indexing-method
+// https://tc39.es/ecma262/#sec-string.prototype.at
 _export({ target: 'String', proto: true, forced: FORCED }, {
   at: function at(index) {
     var S = toString_1(requireObjectCoercible(this));
@@ -23294,14 +23379,14 @@ _export({ target: 'String', proto: true, forced: FORCED }, {
 
 // `Object.keys` method
 // https://tc39.es/ecma262/#sec-object.keys
-// eslint-disable-next-line es-x/no-object-keys -- safe
+// eslint-disable-next-line es/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-x/no-object-defineproperties -- safe
+// eslint-disable-next-line es/no-object-defineproperties -- safe
 var f$5 = descriptors && !v8PrototypeDefineBug ? Object.defineProperties : function defineProperties(O, Properties) {
   anObject(O);
   var props = toIndexedObject(Properties);
@@ -23390,7 +23475,7 @@ hiddenKeys[IE_PROTO] = true;
 
 // `Object.create` method
 // https://tc39.es/ecma262/#sec-object.create
-// eslint-disable-next-line es-x/no-object-create -- safe
+// eslint-disable-next-line es/no-object-create -- safe
 var objectCreate = Object.create || function create(O, Properties) {
   var result;
   if (O !== null) {
@@ -23410,7 +23495,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)
@@ -23423,7 +23508,7 @@ var addToUnscopables = function (key) {
 };
 
 // `Array.prototype.at` method
-// https://github.com/tc39/proposal-relative-indexing-method
+// https://tc39.es/ecma262/#sec-array.prototype.at
 _export({ target: 'Array', proto: true }, {
   at: function at(index) {
     var O = toObject(this);
@@ -23436,13 +23521,19 @@ _export({ target: 'Array', proto: true }, {
 
 addToUnscopables('at');
 
-// eslint-disable-next-line es-x/no-typed-arrays -- safe
-var arrayBufferNative = typeof ArrayBuffer != 'undefined' && typeof DataView != 'undefined';
+// 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);
+};
 
 var correctPrototypeGetter = !fails(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
-  // eslint-disable-next-line es-x/no-object-getprototypeof -- required for testing
+  // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
   return Object.getPrototypeOf(new F()) !== F.prototype;
 });
 
@@ -23452,7 +23543,7 @@ var ObjectPrototype = $Object$4.prototype;
 
 // `Object.getPrototypeOf` method
 // https://tc39.es/ecma262/#sec-object.getprototypeof
-// eslint-disable-next-line es-x/no-object-getprototypeof -- safe
+// eslint-disable-next-line es/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];
@@ -23462,12 +23553,19 @@ var objectGetPrototypeOf = correctPrototypeGetter ? $Object$4.getPrototypeOf : f
   } return object instanceof $Object$4 ? ObjectPrototype : null;
 };
 
-var $String$3 = String;
+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 $TypeError$6 = TypeError;
 
 var aPossiblePrototype = function (argument) {
   if (typeof argument == 'object' || isCallable(argument)) return argument;
-  throw $TypeError$6("Can't set " + $String$3(argument) + ' as a prototype');
+  throw new $TypeError$6("Can't set " + $String$4(argument) + ' as a prototype');
 };
 
 /* eslint-disable no-proto -- safe */
@@ -23478,14 +23576,13 @@ 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-x/no-object-setprototypeof -- safe
+// eslint-disable-next-line es/no-object-setprototypeof -- safe
 var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? function () {
   var CORRECT_SETTER = false;
   var test = {};
   var setter;
   try {
-    // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
-    setter = functionUncurryThis(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set);
+    setter = functionUncurryThisAccessor(Object.prototype, '__proto__', 'set');
     setter(test, []);
     CORRECT_SETTER = test instanceof Array;
   } catch (error) { /* empty */ }
@@ -23498,14 +23595,6 @@ 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;
@@ -23521,7 +23610,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 = arrayBufferNative && !!objectSetPrototypeOf && classof(global_1.opera) !== 'Opera';
+var NATIVE_ARRAY_BUFFER_VIEWS = arrayBufferBasicDetection && !!objectSetPrototypeOf && classof(global_1.opera) !== 'Opera';
 var TYPED_ARRAY_TAG_REQUIRED = false;
 var NAME, Constructor, Prototype;
 
@@ -23566,12 +23655,12 @@ var isTypedArray = function (it) {
 
 var aTypedArray = function (it) {
   if (isTypedArray(it)) return it;
-  throw TypeError$2('Target is not a typed array');
+  throw new TypeError$2('Target is not a typed array');
 };
 
 var aTypedArrayConstructor = function (C) {
   if (isCallable(C) && (!objectSetPrototypeOf || objectIsPrototypeOf(TypedArray, C))) return C;
-  throw TypeError$2(tryToString(C) + ' is not a typed array constructor');
+  throw new TypeError$2(tryToString(C) + ' is not a typed array constructor');
 };
 
 var exportTypedArrayMethod = function (KEY, property, forced, options) {
@@ -23635,7 +23724,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 TypeError$2('Incorrect invocation');
+    throw new TypeError$2('Incorrect invocation');
   };
   if (NATIVE_ARRAY_BUFFER_VIEWS) for (NAME in TypedArrayConstructorsList) {
     if (global_1[NAME]) objectSetPrototypeOf(global_1[NAME], TypedArray);
@@ -23656,9 +23745,12 @@ if (NATIVE_ARRAY_BUFFER_VIEWS && objectGetPrototypeOf(Uint8ClampedArrayPrototype
 
 if (descriptors && !hasOwnProperty_1(TypedArrayPrototype, TO_STRING_TAG$2)) {
   TYPED_ARRAY_TAG_REQUIRED = true;
-  defineProperty$2(TypedArrayPrototype, TO_STRING_TAG$2, { get: function () {
-    return isObject(this) ? this[TYPED_ARRAY_TAG] : undefined;
-  } });
+  defineBuiltInAccessor(TypedArrayPrototype, TO_STRING_TAG$2, {
+    configurable: true,
+    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);
   }
@@ -23682,7 +23774,7 @@ var aTypedArray$1 = arrayBufferViewCore.aTypedArray;
 var exportTypedArrayMethod$1 = arrayBufferViewCore.exportTypedArrayMethod;
 
 // `%TypedArray%.prototype.at` method
-// https://github.com/tc39/proposal-relative-indexing-method
+// https://tc39.es/ecma262/#sec-%typedarray%.prototype.at
 exportTypedArrayMethod$1('at', function at(index) {
   var O = aTypedArray$1(this);
   var len = lengthOfArrayLike(O);
@@ -23693,9 +23785,11 @@ exportTypedArrayMethod$1('at', function at(index) {
 
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
+var focusColor = "".concat(MATISSE_BLUE_DARK);
 var fallbackValues$f = {
   selectedColor: selectedColor,
-  hoverColor: hoverColor$3
+  hoverColor: hoverColor$3,
+  focusColor: focusColor
 };
 
 var IconWrapper = styled.div.withConfig({
@@ -23718,7 +23812,7 @@ var DropdownContentWrapper = styled.div.withConfig({
 var DropdownItemWrapper = styled.li.withConfig({
   displayName: "Dropdown__DropdownItemWrapper",
   componentId: "sc-pn6m0h-2"
-})(["background-color:", ";text-align:start;border-width:0px;border-color:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;width:100%;list-style:none;cursor:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:none;}"], function (_ref4) {
+})(["text-align:start;border-width:2px;border-style:solid;border-color:", ";box-shadow:none;box-sizing:border-box;width:100%;list-style:none;cursor:", ";&:hover{border-color:", ";> *{background:", ";border-color:", ";}}&:focus{outline:none;border-color:", ";> *{background:", ";border-color:white;outline:none;}}"], function (_ref4) {
   var selected = _ref4.selected,
       themeValues = _ref4.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
@@ -23726,48 +23820,71 @@ var DropdownItemWrapper = styled.li.withConfig({
   var disabled = _ref5.disabled;
   return disabled ? "default" : "pointer";
 }, function (_ref6) {
-  var selected = _ref6.selected,
-      disabled = _ref6.disabled,
+  var disabled = _ref6.disabled,
+      selected = _ref6.selected,
       themeValues = _ref6.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref7) {
   var selected = _ref7.selected,
       disabled = _ref7.disabled,
       themeValues = _ref7.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref8) {
+  var selected = _ref8.selected,
+      disabled = _ref8.disabled,
+      themeValues = _ref8.themeValues;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref9) {
+  var themeValues = _ref9.themeValues;
+  return themeValues.selectedColor;
+}, function (_ref10) {
+  var selected = _ref10.selected,
+      disabled = _ref10.disabled,
+      themeValues = _ref10.themeValues;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
+});
+var DropdownItemBorder = styled.div.withConfig({
+  displayName: "Dropdown__DropdownItemBorder",
+  componentId: "sc-pn6m0h-3"
+})(["background:", ";border-color:", ";border-width:2px;border-style:solid;padding:12px;"], function (_ref11) {
+  var selected = _ref11.selected,
+      themeValues = _ref11.themeValues;
+  return selected ? themeValues.selectedColor : WHITE;
+}, function (_ref12) {
+  var selected = _ref12.selected,
+      themeValues = _ref12.themeValues;
+  return selected ? themeValues.selectedColor : WHITE;
 });
 
-var Dropdown = function Dropdown(_ref8) {
-  var placeholder = _ref8.placeholder,
-      options = _ref8.options,
-      value = _ref8.value,
-      isOpen = _ref8.isOpen,
-      isError = _ref8.isError,
-      onSelect = _ref8.onSelect,
-      _ref8$disabledValues = _ref8.disabledValues,
-      disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
-      _ref8$onClick = _ref8.onClick,
-      _onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
-      themeValues = _ref8.themeValues,
-      maxHeight = _ref8.maxHeight,
-      _ref8$widthFitOptions = _ref8.widthFitOptions,
-      widthFitOptions = _ref8$widthFitOptions === void 0 ? false : _ref8$widthFitOptions,
-      disabled = _ref8.disabled,
-      _ref8$hasTitles = _ref8.hasTitles,
-      hasTitles = _ref8$hasTitles === void 0 ? false : _ref8$hasTitles,
-      _ref8$autoEraseTypeAh = _ref8.autoEraseTypeAhead,
-      autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
-      ariaLabelledby = _ref8.ariaLabelledby,
-      ariaDescribedby = _ref8.ariaDescribedby,
-      autocompleteValue = _ref8.autocompleteValue,
-      _ref8$smoothScroll = _ref8.smoothScroll,
-      smoothScroll = _ref8$smoothScroll === void 0 ? true : _ref8$smoothScroll,
-      _ref8$ariaInvalid = _ref8.ariaInvalid,
-      ariaInvalid = _ref8$ariaInvalid === void 0 ? false : _ref8$ariaInvalid,
-      _ref8$isRequired = _ref8.isRequired,
-      isRequired = _ref8$isRequired === void 0 ? false : _ref8$isRequired;
-
-  var required = options.required || isRequired;
+var Dropdown = function Dropdown(_ref13) {
+  var placeholder = _ref13.placeholder,
+      options = _ref13.options,
+      value = _ref13.value,
+      isOpen = _ref13.isOpen,
+      isError = _ref13.isError,
+      onSelect = _ref13.onSelect,
+      _ref13$disabledValues = _ref13.disabledValues,
+      disabledValues = _ref13$disabledValues === void 0 ? [] : _ref13$disabledValues,
+      _ref13$onClick = _ref13.onClick,
+      _onClick = _ref13$onClick === void 0 ? noop : _ref13$onClick,
+      themeValues = _ref13.themeValues,
+      maxHeight = _ref13.maxHeight,
+      _ref13$widthFitOption = _ref13.widthFitOptions,
+      widthFitOptions = _ref13$widthFitOption === void 0 ? false : _ref13$widthFitOption,
+      disabled = _ref13.disabled,
+      _ref13$hasTitles = _ref13.hasTitles,
+      hasTitles = _ref13$hasTitles === void 0 ? false : _ref13$hasTitles,
+      _ref13$autoEraseTypeA = _ref13.autoEraseTypeAhead,
+      autoEraseTypeAhead = _ref13$autoEraseTypeA === void 0 ? true : _ref13$autoEraseTypeA,
+      ariaLabelledby = _ref13.ariaLabelledby,
+      ariaDescribedby = _ref13.ariaDescribedby,
+      autocompleteValue = _ref13.autocompleteValue,
+      _ref13$smoothScroll = _ref13.smoothScroll,
+      smoothScroll = _ref13$smoothScroll === void 0 ? true : _ref13$smoothScroll,
+      _ref13$ariaInvalid = _ref13.ariaInvalid,
+      ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid,
+      _ref13$isRequired = _ref13.isRequired,
+      isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired;
 
   var _useState = useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -23960,11 +24077,13 @@ var Dropdown = function Dropdown(_ref8) {
       clearTimeout(timer);
       setTimer(setTimeout(function () {
         return setInputValue("");
-      }, 3000));
+      }, 20000));
     }
 
     setFilteredOptions(options.filter(function (option) {
-      return option.value.toLowerCase().startsWith(inputValue.toLowerCase()) || option.text.toLowerCase().startsWith(inputValue.toLowerCase());
+      var _option$value, _option$value$toLower, _option$text, _option$text$toLowerC;
+
+      return (option === null || option === void 0 ? void 0 : (_option$value = option.value) === null || _option$value === void 0 ? void 0 : (_option$value$toLower = _option$value.toLowerCase()) === null || _option$value$toLower === void 0 ? void 0 : _option$value$toLower.indexOf(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase())) >= 0 || ((_option$text = option.text) === null || _option$text === void 0 ? void 0 : (_option$text$toLowerC = _option$text.toLowerCase()) === null || _option$text$toLowerC === void 0 ? void 0 : _option$text$toLowerC.indexOf(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase())) >= 0;
     }));
   }, [inputValue]);
   useEffect$1(function () {
@@ -24016,8 +24135,7 @@ var Dropdown = function Dropdown(_ref8) {
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
     "aria-expanded": isOpen,
-    "aria-required": required,
-    required: required,
+    "aria-required": options.required,
     "aria-invalid": ariaInvalid,
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
@@ -24039,14 +24157,14 @@ var Dropdown = function Dropdown(_ref8) {
     },
     padding: "12px",
     placeholder: getSelection(),
+    required: options.required || isRequired,
     role: "combobox",
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
     type: "text",
     tabIndex: 0,
     value: inputValue,
-    width: "100%",
-    disabled: disabledValues.includes(inputValue)
+    width: "100%"
   }), /*#__PURE__*/React.createElement(IconWrapper, {
     open: isOpen,
     onClick: _onClick
@@ -24057,8 +24175,7 @@ var Dropdown = function Dropdown(_ref8) {
     widthFitOptions: widthFitOptions,
     tabIndex: 0,
     role: "listbox",
-    id: "".concat(ariaLabelledby, "_listbox"),
-    required: required
+    id: "".concat(ariaLabelledby, "_listbox")
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0",
     as: "ul"
@@ -24091,11 +24208,15 @@ var Dropdown = function Dropdown(_ref8) {
       onFocus: function onFocus() {
         return setFocusedRef(optionRefs.current[i]);
       }
+    }, /*#__PURE__*/React.createElement(DropdownItemBorder, {
+      disabled: disabledValues.includes(choice.value),
+      selected: choice.value === value,
+      themeValues: themeValues
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
-      extraStyles: "padding-left: 16px;\n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", ";\n                      white-space: nowrap;\n                      overflow: hidden;\n                      text-overflow: ellipsis;")
-    }, choice.text));
+      extraStyles: "padding-left: 16px;\n                        cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", ";\n                        white-space: nowrap;\n                        overflow: hidden;\n                        text-overflow: ellipsis;")
+    }, choice.text)));
   }))) : /*#__PURE__*/React.createElement(Fragment$1, null)));
 };
 
@@ -24214,17 +24335,6 @@ var FormSelect = function FormSelect(_ref) {
       setOpen = _useState2[1];
 
   var dropdownRef = useRef(null);
-  var required = (options === null || options === void 0 ? void 0 : options.required) || isRequired;
-  var labelId = useMemo(function () {
-    return function (labelTextWhenNoError) {
-      return createIdFromString(labelTextWhenNoError);
-    };
-  }, [labelTextWhenNoError]);
-  var descriptionId = useMemo(function () {
-    return function (field, labelTextWhenNoError) {
-      return field.hasErrors && field.dirty ? labelId(labelTextWhenNoError) + "error-message" : "";
-    };
-  }, [field, labelTextWhenNoError]);
 
   var handleClickAway = function handleClickAway(event) {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -24240,8 +24350,8 @@ var FormSelect = function FormSelect(_ref) {
   });
   return /*#__PURE__*/React.createElement(SelectContainer, {
     ref: dropdownRef,
-    "aria-role": "group",
     disabled: disabled,
+    "aria-disabled": disabled,
     "data-qa": dataQa
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -24255,10 +24365,10 @@ var FormSelect = function FormSelect(_ref) {
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
-    id: labelId(labelTextWhenNoError)
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React.createElement(Dropdown$1, {
-    ariaLabelledby: labelId(labelTextWhenNoError),
-    ariaDescribedby: descriptionId(field, labelTextWhenNoError),
+    ariaLabelledby: createIdFromString(labelTextWhenNoError),
+    ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     widthFitOptions: widthFitOptions,
     hasTitles: hasTitles,
@@ -24280,11 +24390,11 @@ var FormSelect = function FormSelect(_ref) {
     disabled: disabled,
     autocompleteValue: autocompleteValue,
     smoothScroll: smoothScroll,
-    isRequired: required
+    isRequired: isRequired
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between"
-  }, /*#__PURE__*/React.createElement(Text$1, {
+  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
@@ -24293,7 +24403,9 @@ var FormSelect = function FormSelect(_ref) {
     "aria-live": "polite",
     "aria-atomic": true,
     "data-qa": createIdFromString(labelTextWhenNoError, "error message")
-  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : "")));
+  }, errorMessages[field.errors[0]]) : /*#__PURE__*/React.createElement(Text$1, {
+    extraStyles: "height: ".concat(themeValues.lineHeight, ";")
+  })));
 };
 
 var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$g, "default");
@@ -25049,10 +25161,10 @@ var CountryDropdown = function CountryDropdown(_ref) {
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
-      _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
       _ref$isRequired = _ref.isRequired,
-      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React.createElement(FormSelect$1, {
     options: options,
     field: field,
@@ -25227,6 +25339,346 @@ var DisplayBox = function DisplayBox(_ref) {
 
 var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$i);
 
+/* 
+  Hook that assigns a click event listener to the main document element
+  Returns a ref to attach to another element (like an icon/button that triggers a popover)
+  If a click event gets captured by the document and the assigned element isn't the target
+  hook will run whatever handler is passed (eg a function that closes a popover)
+
+  See popover component for implementation
+
+*/
+
+var useOutsideClickHook = function useOutsideClickHook(handler) {
+  var ref = useRef();
+  useEffect$1(function () {
+  }, [ref]);
+  return ref;
+};
+
+/* 
+  Hook that takes an ID selector for an element on the screen
+  And optionally values for top position, left position, smooth behavior
+  Finds element on screen and scrolls it to the provided coordinates
+
+  (string, number, number, string, number) => undefined;
+*/
+var useScrollTo = function useScrollTo(id) {
+  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
+  var delay = arguments.length > 4 ? arguments[4] : undefined;
+  var scrollItem;
+
+  if (delay) {
+    setTimeout(function () {
+      var _scrollItem;
+
+      scrollItem = document.getElementById(id);
+      (_scrollItem = scrollItem) === null || _scrollItem === void 0 ? void 0 : _scrollItem.scrollTo({
+        top: top,
+        left: left,
+        behavior: behavior
+      });
+    }, delay);
+  } else {
+    var _scrollItem2;
+
+    scrollItem = document.getElementById(id);
+    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 ? void 0 : _scrollItem2.scrollTo({
+      top: top,
+      left: left,
+      behavior: behavior
+    });
+  }
+};
+
+var initialToastState = {
+  isOpen: false,
+  variant: "",
+  message: ""
+};
+
+var useToastNotification = function useToastNotification() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
+
+  var _useState = useState(initialToastState),
+      _useState2 = _slicedToArray(_useState, 2),
+      toastState = _useState2[0],
+      setToastState = _useState2[1];
+
+  useEffect$1(function () {
+    if (toastState.isOpen) {
+      setTimeout(function () {
+        setToastState(initialToastState);
+      }, timeout);
+    }
+  }, [timeout, toastState.isOpen]);
+
+  var showToast = function showToast(_ref2) {
+    var message = _ref2.message,
+        variant = _ref2.variant;
+    return setToastState({
+      isOpen: true,
+      variant: variant,
+      message: message
+    });
+  };
+
+  var hideToast = function hideToast() {
+    return setToastState(initialToastState);
+  };
+
+  return {
+    isToastOpen: toastState.isOpen,
+    toastVariant: toastState.variant,
+    toastMessage: toastState.message,
+    showToast: showToast,
+    hideToast: hideToast
+  };
+};
+
+
+
+var index$4 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  useOutsideClick: useOutsideClickHook,
+  useScrollTo: useScrollTo,
+  useToastNotification: useToastNotification
+});
+
+var hoverColor$4 = "#116285";
+var activeColor$4 = "#0E506D";
+var popoverTriggerColor = "#15749D";
+var fallbackValues$j = {
+  hoverColor: hoverColor$4,
+  activeColor: activeColor$4,
+  popoverTriggerColor: popoverTriggerColor
+};
+
+var arrowBorder = function arrowBorder(borderColor, direction) {
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
+  var angle = "".concat(width, " solid transparent");
+  var straight = "".concat(width, " solid ").concat(borderColor);
+
+  if (direction == "down") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
+  } else if (direction == "up") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
+  } else if (direction == "left") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
+  } else if (direction == "right") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
+  }
+};
+
+var Popover = function Popover(_ref) {
+  var themeValues = _ref.themeValues,
+      _ref$triggerText = _ref.triggerText,
+      triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
+      _ref$content = _ref.content,
+      content = _ref$content === void 0 ? "" : _ref$content,
+      _ref$hasIcon = _ref.hasIcon,
+      hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+      Icon = _ref.icon,
+      _ref$iconHelpText = _ref.iconHelpText,
+      iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
+      _ref$popoverID = _ref.popoverID,
+      popoverID = _ref$popoverID === void 0 ? 0 : _ref$popoverID,
+      _ref$popoverFocus = _ref.popoverFocus,
+      popoverFocus = _ref$popoverFocus === void 0 ? false : _ref$popoverFocus,
+      extraStyles = _ref.extraStyles,
+      textExtraStyles = _ref.textExtraStyles,
+      _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+      _ref$maxWidth = _ref.maxWidth,
+      maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "auto" : _ref$height,
+      position = _ref.position,
+      arrowPosition = _ref.arrowPosition,
+      _ref$arrowDirection = _ref.arrowDirection,
+      arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
+      _ref$transform = _ref.transform,
+      transform = _ref$transform === void 0 ? "none" : _ref$transform,
+      buttonExtraStyles = _ref.buttonExtraStyles,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
+      popoverExtraStyles = _ref.popoverExtraStyles;
+  var hoverColor = themeValues.hoverColor,
+      activeColor = themeValues.activeColor,
+      popoverTriggerColor = themeValues.popoverTriggerColor;
+
+  var _ref2 = position !== null && position !== void 0 ? position : {},
+      _ref2$top = _ref2.top,
+      top = _ref2$top === void 0 ? "-110px" : _ref2$top,
+      _ref2$right = _ref2.right,
+      right = _ref2$right === void 0 ? "auto" : _ref2$right,
+      _ref2$bottom = _ref2.bottom,
+      bottom = _ref2$bottom === void 0 ? "auto" : _ref2$bottom,
+      _ref2$left = _ref2.left,
+      left = _ref2$left === void 0 ? "-225px" : _ref2$left;
+
+  var _ref3 = arrowPosition !== null && arrowPosition !== void 0 ? arrowPosition : {},
+      _ref3$arrowTop = _ref3.arrowTop,
+      arrowTop = _ref3$arrowTop === void 0 ? "auto" : _ref3$arrowTop,
+      _ref3$arrowRight = _ref3.arrowRight,
+      arrowRight = _ref3$arrowRight === void 0 ? "10px" : _ref3$arrowRight,
+      _ref3$arrowBottom = _ref3.arrowBottom,
+      arrowBottom = _ref3$arrowBottom === void 0 ? "-8px" : _ref3$arrowBottom,
+      _ref3$arrowLeft = _ref3.arrowLeft,
+      arrowLeft = _ref3$arrowLeft === void 0 ? "auto" : _ref3$arrowLeft;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      popoverOpen = _useState2[0],
+      togglePopover = _useState2[1];
+
+  var handleTogglePopover = function handleTogglePopover(popoverState) {
+    if (popoverOpen !== popoverState) {
+      togglePopover(popoverState);
+    }
+  };
+
+  var triggerRef = useOutsideClickHook();
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "position: relative; ".concat(extraStyles)
+  }, /*#__PURE__*/React.createElement(ButtonWithAction, {
+    action: function action() {
+      return noop;
+    },
+    onFocus: function onFocus() {
+      handleTogglePopover(true);
+    },
+    onBlur: function onBlur() {
+      handleTogglePopover(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === 27) {
+        handleTogglePopover(false);
+      }
+    },
+    onTouchStart: function onTouchStart() {
+      return handleTogglePopover(true);
+    },
+    onTouchEnd: function onTouchEnd() {
+      return handleTogglePopover(false);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return handleTogglePopover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleTogglePopover(false);
+    },
+    contentOverride: true,
+    variant: "smallGhost",
+    tabIndex: "0",
+    id: "btnPopover".concat(popoverID),
+    "aria-expanded": popoverOpen,
+    "aria-labelledby": "btnPopover".concat(popoverID, "_info Disclosure").concat(popoverID),
+    "aria-describedby": "Disclosure".concat(popoverID),
+    "aria-controls": "Disclosed".concat(popoverID),
+    ref: triggerRef,
+    extraStyles: buttonExtraStyles
+  }, hasIcon && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    srOnly: true
+  }, /*#__PURE__*/React.createElement(Text$1, {
+    id: "btnPopover".concat(popoverID, "_info")
+  }, iconHelpText))), !hasIcon && /*#__PURE__*/React.createElement(Text$1, {
+    color: popoverTriggerColor,
+    extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
+  }, triggerText)), /*#__PURE__*/React.createElement(Box, {
+    background: backgroundColor,
+    borderRadius: "4px",
+    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+    id: "Disclosed".concat(popoverID),
+    role: "region",
+    "aria-describedby": "Disclosure".concat(popoverID),
+    tabIndex: popoverFocus && popoverOpen ? "0" : "-1",
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ").concat(popoverExtraStyles, ";\n          ")
+  }, /*#__PURE__*/React.createElement(Paragraph$1, null, content), /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+  })));
+};
+
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
+
+var DisplayCard = function DisplayCard(_ref) {
+  var title = _ref.title,
+      item = _ref.item,
+      buttonText = _ref.buttonText,
+      buttonAction = _ref.buttonAction,
+      url = _ref.url,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? false : _ref$link,
+      helpText = _ref.helpText,
+      _ref$hasPopover = _ref.hasPopover,
+      hasPopover = _ref$hasPopover === void 0 ? false : _ref$hasPopover,
+      _ref$popoverTriggerTe = _ref.popoverTriggerText,
+      popoverTriggerText = _ref$popoverTriggerTe === void 0 ? "" : _ref$popoverTriggerTe,
+      _ref$popoverContent = _ref.popoverContent,
+      popoverContent = _ref$popoverContent === void 0 ? "" : _ref$popoverContent,
+      popoverExtraStyles = _ref.popoverExtraStyles,
+      popoverTextExtraStyles = _ref.popoverTextExtraStyles;
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0 0 16px"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    childGap: "0rem"
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0 0 8px 0"
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    overflow: true
+  }, /*#__PURE__*/React.createElement(Paragraph$1, {
+    variant: "pL",
+    color: CHARADE_GREY,
+    extraStyles: "letter-spacing: 0.29px"
+  }, title), hasPopover && /*#__PURE__*/React.createElement(Popover$1, {
+    triggerText: popoverTriggerText,
+    content: popoverContent,
+    popoverExtraStyles: popoverExtraStyles,
+    popoverTextExtraStyles: popoverTextExtraStyles
+  }))), /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "24px",
+    borderSize: "1px",
+    borderRadius: "4px",
+    background: WHITE,
+    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(Text$1, {
+    color: CHARADE_GREY
+  }, item), link ? /*#__PURE__*/React.createElement(ButtonWithLink, {
+    text: buttonText,
+    url: url,
+    variant: "smallGhost",
+    dataQa: buttonText,
+    extraStyles: "min-width: 0;"
+  }) : buttonAction ? /*#__PURE__*/React.createElement(ButtonWithAction, {
+    text: buttonText,
+    action: buttonAction,
+    variant: "smallGhost",
+    dataQa: buttonText,
+    extraStyles: "min-width: 0;"
+  }) : helpText ? /*#__PURE__*/React.createElement(Text$1, {
+    color: STORM_GREY,
+    extraStyles: "font-style: italic;"
+  }, helpText) : /*#__PURE__*/React.createElement(Fragment$1, null))))));
+};
+
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -25505,344 +25957,6 @@ var FormattedInput = function FormattedInput(_ref) {
   }));
 };
 
-var formatDelimiter = "_";
-var phoneFormats = ["", "_", "__", "(___) ", "(___) _", "(___) __", "(___) ___-", "(___) ___-_", "(___) ___-__", "(___) ___-___", "(___) ___-____"];
-var zipFormats = ["", "_", "__", "___", "____", "_____", "______", "_____-__", "_____-___", "_____-____"];
-var creditCardFormats = ["", "_", "__", "___", "____", "____ _", "____ __", "____ ___", "____ ____", "____ ____ _", "____ ____ __", "____ ____ ___", "____ ____ ____", "____ ____ ____ _", "____ ____ ____ __", "____ ____ ____ ___", "____ ____ ____ ____"];
-var moneyFormats = ["", "$0.0_", "$0.__", "$_.__", "$__.__", "$___.__", "$_,___.__", "$__,___.__", "$___,___.__", "$_,___,___.__", "$__,___,___.__", "$___,___,___.__", "$_,___,___,___.__", "$__,___,___,___.__", "$___,___,___,___.__", "$_,___,___,___,___.__"];
-var expirationDateFormats = ["", "_", "__/", "__/_", "__/__"];
-var zipFormat = createFormat(zipFormats, formatDelimiter);
-var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
-var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
-var phoneFormat = createFormat(phoneFormats, formatDelimiter);
-var moneyFormat = createFormat(moneyFormats, formatDelimiter);
-var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
-  var textAlign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "right";
-  var as = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "span";
-  var ACTIVE = "ACTIVE";
-  var EXPIRING_SOON = "EXPIRING_SOON";
-  var EXPIRED = "EXPIRED";
-  var textMargin = textAlign === "right" ? "auto" : "0";
-
-  switch (expirationStatus) {
-    case ACTIVE:
-      return /*#__PURE__*/React.createElement(Text$1, {
-        as: as,
-        variant: "pXS",
-        color: ASH_GREY,
-        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
-      }, "Exp Date ", expireDate);
-
-    case EXPIRING_SOON:
-      return /*#__PURE__*/React.createElement(Text$1, {
-        as: as,
-        variant: "pXS",
-        color: FIRE_YELLOW,
-        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
-      }, "Expiring Soon ", expireDate);
-
-    case EXPIRED:
-      return /*#__PURE__*/React.createElement(Text$1, {
-        as: as,
-        variant: "pXS",
-        color: ASH_GREY,
-        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
-      }, "Expired");
-  }
-};
-
-var formats = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  formatDelimiter: formatDelimiter,
-  phoneFormats: phoneFormats,
-  moneyFormats: moneyFormats,
-  expirationDateFormats: expirationDateFormats,
-  zipFormat: zipFormat,
-  creditCardFormat: creditCardFormat,
-  expirationDateFormat: expirationDateFormat,
-  phoneFormat: phoneFormat,
-  moneyFormat: moneyFormat,
-  renderCardStatus: renderCardStatus
-});
-
-var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
-  var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
-  // Only move focus when "hasErrors" is true
-  // "hasErrors" is managed by container page of form
-  // typically set to "true" on attempted form submission, if errors exist
-  // Reset errors, if provided, resets the error state tracking in order to properly re-run
-  useEffect$1(function () {
-    if (hasErrors) {
-      var _inputsWithErrors$;
-
-      var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
-      inputsWithErrors === null || inputsWithErrors === void 0 ? void 0 : (_inputsWithErrors$ = inputsWithErrors[0]) === null || _inputsWithErrors$ === void 0 ? void 0 : _inputsWithErrors$.focus();
-    }
-
-    return function () {
-      return resetHasErrors(false);
-    };
-  });
-};
-
-/* 
-  Hook that assigns a click event listener to the main document element
-  Returns a ref to attach to another element (like an icon/button that triggers a popover)
-  If a click event gets captured by the document and the assigned element isn't the target
-  hook will run whatever handler is passed (eg a function that closes a popover)
-
-  See popover component for implementation
-
-*/
-
-var useOutsideClickHook = function useOutsideClickHook(handler) {
-  var ref = useRef();
-  useEffect$1(function () {
-  }, [ref]);
-  return ref;
-};
-
-
-
-var index$4 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  formats: formats,
-  general: general,
-  theme: themeUtils,
-  useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook
-});
-
-var hoverColor$4 = "#116285";
-var activeColor$4 = "#0E506D";
-var popoverTriggerColor = "#15749D";
-var fallbackValues$j = {
-  hoverColor: hoverColor$4,
-  activeColor: activeColor$4,
-  popoverTriggerColor: popoverTriggerColor
-};
-
-var arrowBorder = function arrowBorder(borderColor, direction) {
-  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
-  var angle = "".concat(width, " solid transparent");
-  var straight = "".concat(width, " solid ").concat(borderColor);
-
-  if (direction == "down") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
-  } else if (direction == "up") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
-  } else if (direction == "left") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
-  } else if (direction == "right") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
-  }
-};
-
-var Popover = function Popover(_ref) {
-  var themeValues = _ref.themeValues,
-      _ref$triggerText = _ref.triggerText,
-      triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
-      _ref$content = _ref.content,
-      content = _ref$content === void 0 ? "" : _ref$content,
-      _ref$hasIcon = _ref.hasIcon,
-      hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
-      Icon = _ref.icon,
-      _ref$iconHelpText = _ref.iconHelpText,
-      iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
-      _ref$popoverID = _ref.popoverID,
-      popoverID = _ref$popoverID === void 0 ? 0 : _ref$popoverID,
-      _ref$popoverFocus = _ref.popoverFocus,
-      popoverFocus = _ref$popoverFocus === void 0 ? false : _ref$popoverFocus,
-      extraStyles = _ref.extraStyles,
-      textExtraStyles = _ref.textExtraStyles,
-      _ref$minWidth = _ref.minWidth,
-      minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
-      _ref$maxWidth = _ref.maxWidth,
-      maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? "auto" : _ref$height,
-      position = _ref.position,
-      arrowPosition = _ref.arrowPosition,
-      _ref$arrowDirection = _ref.arrowDirection,
-      arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
-      _ref$transform = _ref.transform,
-      transform = _ref$transform === void 0 ? "none" : _ref$transform,
-      buttonExtraStyles = _ref.buttonExtraStyles,
-      _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
-      _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
-      popoverExtraStyles = _ref.popoverExtraStyles;
-  var hoverColor = themeValues.hoverColor,
-      activeColor = themeValues.activeColor,
-      popoverTriggerColor = themeValues.popoverTriggerColor;
-
-  var _ref2 = position !== null && position !== void 0 ? position : {},
-      _ref2$top = _ref2.top,
-      top = _ref2$top === void 0 ? "-110px" : _ref2$top,
-      _ref2$right = _ref2.right,
-      right = _ref2$right === void 0 ? "auto" : _ref2$right,
-      _ref2$bottom = _ref2.bottom,
-      bottom = _ref2$bottom === void 0 ? "auto" : _ref2$bottom,
-      _ref2$left = _ref2.left,
-      left = _ref2$left === void 0 ? "-225px" : _ref2$left;
-
-  var _ref3 = arrowPosition !== null && arrowPosition !== void 0 ? arrowPosition : {},
-      _ref3$arrowTop = _ref3.arrowTop,
-      arrowTop = _ref3$arrowTop === void 0 ? "auto" : _ref3$arrowTop,
-      _ref3$arrowRight = _ref3.arrowRight,
-      arrowRight = _ref3$arrowRight === void 0 ? "10px" : _ref3$arrowRight,
-      _ref3$arrowBottom = _ref3.arrowBottom,
-      arrowBottom = _ref3$arrowBottom === void 0 ? "-8px" : _ref3$arrowBottom,
-      _ref3$arrowLeft = _ref3.arrowLeft,
-      arrowLeft = _ref3$arrowLeft === void 0 ? "auto" : _ref3$arrowLeft;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      popoverOpen = _useState2[0],
-      togglePopover = _useState2[1];
-
-  var handleTogglePopover = function handleTogglePopover(popoverState) {
-    if (popoverOpen !== popoverState) {
-      togglePopover(popoverState);
-    }
-  };
-
-  var triggerRef = useOutsideClickHook();
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    extraStyles: "position: relative; ".concat(extraStyles)
-  }, /*#__PURE__*/React.createElement(ButtonWithAction, {
-    action: function action() {
-      return noop;
-    },
-    onFocus: function onFocus() {
-      handleTogglePopover(true);
-    },
-    onBlur: function onBlur() {
-      handleTogglePopover(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === 27) {
-        handleTogglePopover(false);
-      }
-    },
-    onTouchStart: function onTouchStart() {
-      return handleTogglePopover(true);
-    },
-    onTouchEnd: function onTouchEnd() {
-      return handleTogglePopover(false);
-    },
-    onMouseEnter: function onMouseEnter() {
-      return handleTogglePopover(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return handleTogglePopover(false);
-    },
-    contentOverride: true,
-    variant: "smallGhost",
-    tabIndex: "0",
-    id: "btnPopover".concat(popoverID),
-    "aria-expanded": popoverOpen,
-    "aria-labelledby": "btnPopover".concat(popoverID, "_info Disclosure").concat(popoverID),
-    "aria-describedby": "Disclosure".concat(popoverID),
-    "aria-controls": "Disclosed".concat(popoverID),
-    ref: triggerRef,
-    extraStyles: buttonExtraStyles
-  }, hasIcon && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    srOnly: true
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    id: "btnPopover".concat(popoverID, "_info")
-  }, iconHelpText))), !hasIcon && /*#__PURE__*/React.createElement(Text$1, {
-    color: popoverTriggerColor,
-    extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
-  }, triggerText)), /*#__PURE__*/React.createElement(Box, {
-    background: backgroundColor,
-    borderRadius: "4px",
-    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-    id: "Disclosed".concat(popoverID),
-    role: "region",
-    "aria-describedby": "Disclosure".concat(popoverID),
-    tabIndex: popoverFocus && popoverOpen ? "0" : "-1",
-    minWidth: minWidth,
-    maxWidth: maxWidth,
-    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ").concat(popoverExtraStyles, ";\n          ")
-  }, /*#__PURE__*/React.createElement(Paragraph$1, null, content), /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
-  })));
-};
-
-var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
-
-var DisplayCard = function DisplayCard(_ref) {
-  var title = _ref.title,
-      item = _ref.item,
-      buttonText = _ref.buttonText,
-      buttonAction = _ref.buttonAction,
-      url = _ref.url,
-      _ref$link = _ref.link,
-      link = _ref$link === void 0 ? false : _ref$link,
-      helpText = _ref.helpText,
-      _ref$hasPopover = _ref.hasPopover,
-      hasPopover = _ref$hasPopover === void 0 ? false : _ref$hasPopover,
-      _ref$popoverTriggerTe = _ref.popoverTriggerText,
-      popoverTriggerText = _ref$popoverTriggerTe === void 0 ? "" : _ref$popoverTriggerTe,
-      _ref$popoverContent = _ref.popoverContent,
-      popoverContent = _ref$popoverContent === void 0 ? "" : _ref$popoverContent,
-      popoverExtraStyles = _ref.popoverExtraStyles,
-      popoverTextExtraStyles = _ref.popoverTextExtraStyles;
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 16px"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    childGap: "0rem"
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 8px 0"
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    justify: "space-between",
-    align: "center",
-    overflow: true
-  }, /*#__PURE__*/React.createElement(Paragraph$1, {
-    variant: "pL",
-    color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px"
-  }, title), hasPopover && /*#__PURE__*/React.createElement(Popover$1, {
-    triggerText: popoverTriggerText,
-    content: popoverContent,
-    popoverExtraStyles: popoverExtraStyles,
-    popoverTextExtraStyles: popoverTextExtraStyles
-  }))), /*#__PURE__*/React.createElement(Box, {
-    padding: "0"
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "24px",
-    borderSize: "1px",
-    borderRadius: "4px",
-    background: WHITE,
-    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    justify: "space-between",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    color: CHARADE_GREY
-  }, item), link ? /*#__PURE__*/React.createElement(ButtonWithLink, {
-    text: buttonText,
-    url: url,
-    variant: "smallGhost",
-    dataQa: buttonText,
-    extraStyles: "min-width: 0;"
-  }) : buttonAction ? /*#__PURE__*/React.createElement(ButtonWithAction, {
-    text: buttonText,
-    action: buttonAction,
-    variant: "smallGhost",
-    dataQa: buttonText,
-    extraStyles: "min-width: 0;"
-  }) : helpText ? /*#__PURE__*/React.createElement(Text$1, {
-    color: STORM_GREY,
-    extraStyles: "font-style: italic;"
-  }, helpText) : /*#__PURE__*/React.createElement(Fragment$1, null))))));
-};
-
 var linkColor$2 = {
   "default": "".concat(MATISSE_BLUE),
   disabled: "".concat(MATISSE_BLUE)
@@ -25999,8 +26113,6 @@ var FormInput = function FormInput(_ref15) {
       isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
       props = _objectWithoutProperties(_ref15, _excluded2);
 
-  var required = isRequired || (props === null || props === void 0 ? void 0 : props.required);
-
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       showPassword = _useState2[0],
@@ -26086,7 +26198,7 @@ var FormInput = function FormInput(_ref15) {
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
     autoComplete: autocompleteValue,
-    required: required
+    required: isRequired
   }, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
@@ -26106,7 +26218,7 @@ var FormInput = function FormInput(_ref15) {
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
     autoComplete: autocompleteValue,
-    required: required
+    required: isRequired
   }, props))), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between",
@@ -26315,6 +26427,66 @@ var fallbackValues$n = {
   autopayTextColor: autopayTextColor$1
 };
 
+var formatDelimiter = "_";
+var phoneFormats = ["", "_", "__", "(___) ", "(___) _", "(___) __", "(___) ___-", "(___) ___-_", "(___) ___-__", "(___) ___-___", "(___) ___-____"];
+var zipFormats = ["", "_", "__", "___", "____", "_____", "______", "_____-__", "_____-___", "_____-____"];
+var creditCardFormats = ["", "_", "__", "___", "____", "____ _", "____ __", "____ ___", "____ ____", "____ ____ _", "____ ____ __", "____ ____ ___", "____ ____ ____", "____ ____ ____ _", "____ ____ ____ __", "____ ____ ____ ___", "____ ____ ____ ____"];
+var moneyFormats = ["", "$0.0_", "$0.__", "$_.__", "$__.__", "$___.__", "$_,___.__", "$__,___.__", "$___,___.__", "$_,___,___.__", "$__,___,___.__", "$___,___,___.__", "$_,___,___,___.__", "$__,___,___,___.__", "$___,___,___,___.__", "$_,___,___,___,___.__"];
+var expirationDateFormats = ["", "_", "__/", "__/_", "__/__"];
+var zipFormat = createFormat(zipFormats, formatDelimiter);
+var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
+var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
+var phoneFormat = createFormat(phoneFormats, formatDelimiter);
+var moneyFormat = createFormat(moneyFormats, formatDelimiter);
+var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
+  var textAlign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "right";
+  var as = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "span";
+  var ACTIVE = "ACTIVE";
+  var EXPIRING_SOON = "EXPIRING_SOON";
+  var EXPIRED = "EXPIRED";
+  var textMargin = textAlign === "right" ? "auto" : "0";
+
+  switch (expirationStatus) {
+    case ACTIVE:
+      return /*#__PURE__*/React.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: ASH_GREY,
+        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
+      }, "Exp Date ", expireDate);
+
+    case EXPIRING_SOON:
+      return /*#__PURE__*/React.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: FIRE_YELLOW,
+        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
+      }, "Expiring Soon ", expireDate);
+
+    case EXPIRED:
+      return /*#__PURE__*/React.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: ASH_GREY,
+        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
+      }, "Expired");
+  }
+};
+
+var formats = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  formatDelimiter: formatDelimiter,
+  phoneFormats: phoneFormats,
+  moneyFormats: moneyFormats,
+  expirationDateFormats: expirationDateFormats,
+  zipFormat: zipFormat,
+  creditCardFormat: creditCardFormat,
+  expirationDateFormat: expirationDateFormat,
+  phoneFormat: phoneFormat,
+  moneyFormat: moneyFormat,
+  renderCardStatus: renderCardStatus
+});
+
 var CreditCardWrapper = styled.div.withConfig({
   displayName: "FormattedCreditCard__CreditCardWrapper",
   componentId: "sc-s0ta5l-0"
@@ -27289,8 +27461,8 @@ var RadioButton$1 = function RadioButton(_ref2) {
       ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
       _ref2$ariaLabel = _ref2.ariaLabel,
       ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel,
-      _ref2$required = _ref2.required,
-      required = _ref2$required === void 0 ? false : _ref2$required;
+      _ref2$isRequired = _ref2.isRequired,
+      isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired;
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
@@ -27350,11 +27522,10 @@ var RadioButton$1 = function RadioButton(_ref2) {
     type: "radio",
     id: "radio-".concat(name),
     disabled: disabled,
-    required: required,
-    "aria-required": required,
     onClick: toggleRadio,
     "aria-describedby": ariaDescribedBy,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    required: isRequired
   }, extraProps)), /*#__PURE__*/React.createElement(Motion, {
     borderWidth: "1px",
     borderStyle: "solid",
@@ -39383,7 +39554,6 @@ var AddressForm = function AddressForm(_ref) {
     labelTextWhenNoError: "Country",
     errorMessages: countryErrorMessages,
     field: fields.country,
-    isRequired: true,
     onChange: function onChange(value) {
       actions.fields.country.set(value); // temporary measure to not dirty fields until
       // we can write a reset function for fields
@@ -39397,7 +39567,8 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    dataQa: "Country"
+    dataQa: "Country",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
@@ -39419,8 +39590,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line2",
-    dataQa: "Address Line 2",
-    isRequired: false
+    dataQa: "Address Line 2"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     errorMessages: cityErrorMessages,
@@ -40361,7 +40531,9 @@ var EmailForm = function EmailForm(_ref) {
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked;
+      walletCheckboxMarked = _ref.walletCheckboxMarked,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
 
   if (clearOnDismount) {
     useEffect$1(function () {
@@ -40390,7 +40562,8 @@ var EmailForm = function EmailForm(_ref) {
     },
     isEmail: true,
     autocompleteValue: "email",
-    dataQa: "Email address"
+    dataQa: "Email address",
+    isRequired: isRequired
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
@@ -45687,7 +45860,8 @@ var Modal$1 = function Modal(_ref) {
       alignItems: "center"
     },
     dialogStyle: {
-      width: customWidth || "615px"
+      width: customWidth || "615px",
+      overflow: "auto"
     },
     underlayClickExits: underlayClickExits
   }, /*#__PURE__*/React.createElement(Box, {
@@ -47743,8 +47917,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     title: "Terms and Conditions",
     error: error,
     checked: isChecked,
-    onChange: onCheck,
-    isRequired: true
+    onChange: onCheck
   }), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 0 58px"
   }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
@@ -47758,42 +47931,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   })))));
 };
 
-/* 
-  Hook that takes an ID selector for an element on the screen
-  And optionally values for top position, left position, smooth behavior
-  Finds element on screen and scrolls it to the provided coordinates
-
-  (string, number, number, string, number) => undefined;
-*/
-var useScrollTo = function useScrollTo(id) {
-  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
-  var delay = arguments.length > 4 ? arguments[4] : undefined;
-  var scrollItem;
-
-  if (delay) {
-    setTimeout(function () {
-      var _scrollItem;
-
-      scrollItem = document.getElementById(id);
-      (_scrollItem = scrollItem) === null || _scrollItem === void 0 ? void 0 : _scrollItem.scrollTo({
-        top: top,
-        left: left,
-        behavior: behavior
-      });
-    }, delay);
-  } else {
-    var _scrollItem2;
-
-    scrollItem = document.getElementById(id);
-    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 ? void 0 : _scrollItem2.scrollTo({
-      top: top,
-      left: left,
-      behavior: behavior
-    });
-  }
-};
+var TermsAndConditionsTitleDivId = "terms-and-conditions-title";
 
 var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   var _ref$showCheckbox = _ref.showCheckbox,
@@ -47858,7 +47996,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
     extraStyles: "align-self: flex-start;",
-    isRequired: true
+    labelledById: TermsAndConditionsTitleDivId
   }), /*#__PURE__*/React.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
@@ -47866,7 +48004,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     justify: "flex-start",
     align: "center",
     nowrap: true,
-    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };"
+    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };",
+    id: TermsAndConditionsTitleDivId
   }, description && /*#__PURE__*/React.createElement(Text$1, {
     color: CHARADE_GREY
   }, description), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
@@ -47999,8 +48138,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isRequired: true,
-    isNum: true
+    isNum: true,
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
     dataQa: "Account number",
@@ -48008,7 +48147,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
-    isRequired: true,
     isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React.createElement(AccountAndRoutingModal$1, {
@@ -48023,11 +48161,11 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
     dataQa: "Confirm account number",
-    isRequired: true,
     errorMessages: confirmAccountNumberErrors,
     field: fields.confirmAccountNumber,
     fieldActions: actions.fields.confirmAccountNumber,
@@ -48035,10 +48173,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
+    isRequired: true,
     isNum: true
   }), allowBankAccountType && /*#__PURE__*/React.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
-    isRequired: true,
     dataQa: "Account type",
     options: [{
       text: "Select account type",
@@ -48053,7 +48191,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     fieldActions: actions.fields.accountType,
     showErrors: showErrors,
     errorMessages: accountTypeErrors,
-    field: fields.accountType
+    field: fields.accountType,
+    isRequired: true
   }), !hideDefaultPayment && /*#__PURE__*/React.createElement(Checkbox$1, {
     title: "Save as Default Payment Method",
     dataQa: "default-payment-ach",
@@ -48076,8 +48215,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    isRequired: true
+    terms: termsContent
   })))));
 };
 
@@ -48170,7 +48308,6 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     "aria-label": "Card payment"
   }, /*#__PURE__*/React.createElement(FormInputColumn, null, !hideZipCode && /*#__PURE__*/React.createElement(CountryDropdown, {
     labelTextWhenNoError: "Country",
-    isRequired: true,
     errorMessages: countryErrorMessages,
     field: fields.country,
     onChange: function onChange(value) {
@@ -48274,8 +48411,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    isRequired: true
+    terms: termsContent
   })))));
 };
 
@@ -48452,7 +48588,9 @@ var PhoneForm = function PhoneForm(_ref) {
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked;
+      walletCheckboxMarked = _ref.walletCheckboxMarked,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
 
   if (clearOnDismount) {
     useEffect$1(function () {
@@ -48479,7 +48617,8 @@ var PhoneForm = function PhoneForm(_ref) {
     },
     autocompleteValue: "tel-national",
     dataQa: "Phone number",
-    isNum: true
+    isNum: true,
+    isRequired: isRequired
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -48612,7 +48751,9 @@ var RadioSection = function RadioSection(_ref) {
       openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
       _ref$containerStyles = _ref.containerStyles,
       containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
-      ariaDescribedBy = _ref.ariaDescribedBy;
+      ariaDescribedBy = _ref.ariaDescribedBy,
+      _ref$isSectionRequire = _ref.isSectionRequired,
+      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire;
 
   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) {
@@ -48668,7 +48809,8 @@ var RadioSection = function RadioSection(_ref) {
     extraStyles: containerStyles
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0",
-    role: "radiogroup"
+    "aria-role": "radiogroup",
+    "aria-required": isSectionRequired
   }, sections.filter(function (section) {
     return !section.hidden;
   }).map(function (section) {
@@ -48690,7 +48832,8 @@ var RadioSection = function RadioSection(_ref) {
       extraStyles: borderStyles,
       role: "radio",
       "aria-checked": openSection === section.id,
-      "aria-disabled": section.disabled
+      "aria-disabled": section.disabled,
+      "aria-required": section === null || section === void 0 ? void 0 : section.required
     }, /*#__PURE__*/React.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -48729,7 +48872,7 @@ var RadioSection = function RadioSection(_ref) {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1",
-      required: section === null || section === void 0 ? void 0 : section.required
+      isRequired: section === null || section === void 0 ? void 0 : section.required
     })), section.titleIcon && /*#__PURE__*/React.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React.createElement(Box, {
@@ -48741,7 +48884,7 @@ var RadioSection = function RadioSection(_ref) {
     }, section.title))), section.rightIcons && /*#__PURE__*/React.createElement(Cluster, {
       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) || "group"
+      role: (section === null || section === void 0 ? void 0 : section.rightIconsRole) || null
     }, section.rightIcons.map(function (icon) {
       return /*#__PURE__*/React.createElement(RightIcon, {
         src: icon.img,
@@ -49248,6 +49391,51 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
+var VARIANTS = {
+  SUCCESS: "success",
+  ERROR: "error"
+};
+
+var ToastNotification = function ToastNotification(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? VARIANTS.SUCCESS : _ref$variant,
+      _ref$message = _ref.message,
+      message = _ref$message === void 0 ? "" : _ref$message,
+      toastOpen = _ref.toastOpen,
+      closeToastNotification = _ref.closeToastNotification,
+      extraStyles = _ref.extraStyles,
+      _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === void 0 ? "112px" : _ref$minWidth,
+      _ref$maxWidth = _ref.maxWidth,
+      maxWidth = _ref$maxWidth === void 0 ? "350px" : _ref$maxWidth,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "56px" : _ref$height,
+      _ref$childGap = _ref.childGap,
+      childGap = _ref$childGap === void 0 ? "1rem" : _ref$childGap,
+      backgroundColor = _ref.backgroundColor;
+  return /*#__PURE__*/React.createElement(Box, {
+    onClick: closeToastNotification,
+    background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === VARIANTS.ERROR ? ERROR_BACKGROUND_COLOR : WHITE,
+    minWidth: minWidth,
+    minHeight: height && parseInt(height) < 100 ? height : "100px",
+    height: height ? height : "auto",
+    tabIndex: toastOpen ? "-1" : "0",
+    padding: "0rem 1rem",
+    borderRadius: "4px",
+    boxShadow: generateShadows().standard.base,
+    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n      cursor: pointer;\n    ")
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    align: "center",
+    childGap: childGap
+  }, variant === VARIANTS.SUCCESS && /*#__PURE__*/React.createElement(SuccessfulIconMedium, null), variant === VARIANTS.ERROR && /*#__PURE__*/React.createElement(ErroredIcon, null), /*#__PURE__*/React.createElement(Box, {
+    padding: "1rem 0",
+    maxWidth: maxWidth
+  }, /*#__PURE__*/React.createElement(Paragraph$1, {
+    weight: FONT_WEIGHT_SEMIBOLD,
+    extraStyles: "word-break: break-word;"
+  }, message)), /*#__PURE__*/React.createElement(IconQuitLarge, null)));
+};
+
 var fontWeight$9 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
@@ -49620,5 +49808,37 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 as util, withWindowSize };
+var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
+  var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+  // Only move focus when "hasErrors" is true
+  // "hasErrors" is managed by container page of form
+  // typically set to "true" on attempted form submission, if errors exist
+  // Reset errors, if provided, resets the error state tracking in order to properly re-run
+  useEffect$1(function () {
+    if (hasErrors) {
+      var _inputsWithErrors$;
+
+      var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
+      inputsWithErrors === null || inputsWithErrors === void 0 ? void 0 : (_inputsWithErrors$ = inputsWithErrors[0]) === null || _inputsWithErrors$ === void 0 ? void 0 : _inputsWithErrors$.focus();
+    }
+
+    return function () {
+      return resetHasErrors(false);
+    };
+  });
+};
+
+
+
+var index$6 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  formats: formats,
+  general: general,
+  theme: themeUtils,
+  useFocusInvalidInput: useFocusInvalidInput,
+  useOutsideClick: useOutsideClickHook,
+  useToastNotification: useToastNotification
+});
+
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 as hooks, index$6 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map