@thecb/components 10.12.3-beta.1 → 10.12.4

package/dist/index.cjs.js

@@ -18857,6 +18857,52 @@ var AgencyIcon = function AgencyIcon(_ref) {
   })));
 };
 
+var _excluded$m = ["width", "height", "color"];
+var PersonIcon = function PersonIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "20" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "21" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$m);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.25 4.8125H4.75C4.50838 4.8125 4.3125 5.00838 4.3125 5.25V15.75C4.3125 15.9916 4.50838 16.1875 4.75 16.1875H5.625V14.7778C5.625 12.8985 7.02411 11.375 8.75 11.375H11.25C12.9759 11.375 14.375 12.8985 14.375 14.7778V16.1875H15.25C15.4916 16.1875 15.6875 15.9916 15.6875 15.75V5.25C15.6875 5.00838 15.4916 4.8125 15.25 4.8125ZM4.75 17.5H5.625H14.375H15.25C16.2165 17.5 17 16.7165 17 15.75V5.25C17 4.2835 16.2165 3.5 15.25 3.5H4.75C3.7835 3.5 3 4.2835 3 5.25V15.75C3 16.7165 3.7835 17.5 4.75 17.5ZM10 10.5C11.2081 10.5 12.1875 9.52062 12.1875 8.3125C12.1875 7.10438 11.2081 6.125 10 6.125C8.79188 6.125 7.8125 7.10438 7.8125 8.3125C7.8125 9.52062 8.79188 10.5 10 10.5Z",
+    fill: color
+  }));
+};
+
+var _excluded$n = ["width", "height", "color"];
+var PaymentStatusIcon = function PaymentStatusIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "20" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "21" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$n);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.875 4.375C10.875 3.89175 11.2668 3.5 11.75 3.5H16.125C16.6082 3.5 17 3.89175 17 4.375V8.75C17 9.23325 16.6082 9.625 16.125 9.625H15.25V15.75C15.25 16.7165 14.4665 17.5 13.5 17.5H4.75C3.7835 17.5 3 16.7165 3 15.75V7C3 6.0335 3.7835 5.25 4.75 5.25H10.875V4.375ZM10.875 8.75V6.5625H4.75C4.50838 6.5625 4.3125 6.75838 4.3125 7V15.75C4.3125 15.9916 4.50838 16.1875 4.75 16.1875H13.5C13.7416 16.1875 13.9375 15.9916 13.9375 15.75V9.625H11.75C11.2668 9.625 10.875 9.23325 10.875 8.75ZM13.9375 7.875C14.6624 7.875 15.25 7.28737 15.25 6.5625C15.25 5.83763 14.6624 5.25 13.9375 5.25C13.2126 5.25 12.625 5.83763 12.625 6.5625C12.625 7.28737 13.2126 7.875 13.9375 7.875Z",
+    fill: color
+  }));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -19510,7 +19556,7 @@ var mobileFallbackValues = {
 };
 var MOBILE_BREAKPOINT = 768;
 
-var _excluded$m = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$o = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Title elements
@@ -19557,7 +19603,7 @@ var Title = function Title(_ref) {
     as = _ref$as === void 0 ? "h1" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$m);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React__default.createElement(TitleText, _extends({
     variant: variant,
     as: as,
@@ -20985,12 +21031,12 @@ var fallbackValues$8 = {
   linkColor: linkColor
 };
 
-var _excluded$n = ["variant", "themeValues", "children"];
+var _excluded$p = ["variant", "themeValues", "children"];
 var BoxWithShadow = function BoxWithShadow(_ref) {
   var variant = _ref.variant,
     themeValues = _ref.themeValues,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var shadowRegistry = {
     baseStandard: "0px 3px 7px 2px ".concat(rgba$1(BLACK, 0.1), ", 0px 1px 2px 1px ").concat(rgba$1(BLACK, 0.1), ";"),
     baseHover: "0px 1px 7px 0px ".concat(rgba$1(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba$1(BLACK, 0.2), ", 0px 7px 12px 0px ").concat(rgba$1(BLACK, 0.2), ";"),
@@ -21050,7 +21096,7 @@ var fallbackValues$a = {
   externalLinkColor: externalLinkColor
 };
 
-var _excluded$o = ["hoverColor", "activeColor", "extrastyles"];
+var _excluded$q = ["hoverColor", "activeColor", "extrastyles"];
 var ROYAL_BLUE$1 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$3 = LINK_TEXT_DECORATION;
 
@@ -21064,7 +21110,7 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
   var hoverColor = _ref.hoverColor,
     activeColor = _ref.activeColor,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement("a", _extends({}, props, {
     ref: ref
   }));
@@ -21139,7 +21185,7 @@ var ExternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 });
 
-var _excluded$p = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
+var _excluded$r = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
 var ROYAL_BLUE$2 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$4 = LINK_TEXT_DECORATION;
 
@@ -21155,7 +21201,7 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
     active = _ref.active,
     color = _ref.color,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, _extends({}, props, {
     ref: ref
   }));
@@ -22838,7 +22884,7 @@ _curry2(function test(pattern, str) {
   return _cloneRegExp(pattern).test(str);
 });
 
-var _excluded$q = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
+var _excluded$s = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
     url = _ref$url === void 0 ? "/" : _ref$url,
@@ -22853,7 +22899,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     _ref$newTab = _ref.newTab,
     newTab = _ref$newTab === void 0 ? false : _ref$newTab,
     dataQa = _ref.dataQa,
-    otherProps = _objectWithoutProperties(_ref, _excluded$q);
+    otherProps = _objectWithoutProperties(_ref, _excluded$s);
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
       url = _ref2.url,
@@ -22941,7 +22987,7 @@ var ParagraphText = styled__default.p.withConfig({
   return extraStyles;
 });
 
-var _excluded$r = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
+var _excluded$t = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
 var Paragraph = function Paragraph(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -22955,7 +23001,7 @@ var Paragraph = function Paragraph(_ref) {
     dataQa = _ref.dataQa,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
     weight: weight,
     color: color,
@@ -23159,7 +23205,7 @@ var errorStyles = {
   "default": "border: 1px solid ".concat(RED, ";")
 };
 var focusedStyles = {
-  "default": "box-shadow: 0 0 5px 0 ".concat(MATISSE_BLUE, ";")
+  "default": "\n    outline: 3px solid ".concat(ROYAL_BLUE, "; \n    outline-offset: 3px;\n  ")
 };
 var disabledCheckedStyles = {
   "default": "\n  background: #6d717e;\n  border: 1px solid #6d717e;\n"
@@ -23197,7 +23243,7 @@ var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
 
-var _excluded$s = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles"];
+var _excluded$u = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
 var CheckboxContainer = styled__default.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -23205,7 +23251,7 @@ var CheckboxContainer = styled__default.span.withConfig({
 var CheckboxLabelContainer = styled__default.label.withConfig({
   displayName: "Checkbox__CheckboxLabelContainer",
   componentId: "sc-36kqbv-1"
-})(["display:flex;align-items:center;column-gap:1rem;"]);
+})(["display:flex;align-items:center;column-gap:1rem;cursor:pointer;"]);
 var CheckboxIcon = styled__default.svg.withConfig({
   displayName: "Checkbox__CheckboxIcon",
   componentId: "sc-36kqbv-2"
@@ -23264,7 +23310,10 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     _ref5$dataQa = _ref5.dataQa,
     dataQa = _ref5$dataQa === void 0 ? null : _ref5$dataQa,
     checkboxExtraStyles = _ref5.checkboxExtraStyles,
-    rest = _objectWithoutProperties(_ref5, _excluded$s);
+    _ref5$hasIconOverride = _ref5.hasIconOverride,
+    hasIconOverride = _ref5$hasIconOverride === void 0 ? false : _ref5$hasIconOverride,
+    Icon = _ref5.icon,
+    rest = _objectWithoutProperties(_ref5, _excluded$u);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -23292,7 +23341,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     },
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
-    extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
+    extraStyles: "\n          :focus {\n            outline: 0;\n          }\n          ".concat(extraStyles, "; \n          margin: ").concat(checkboxMargin, ";\n        ")
   }, rest), /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
     "data-qa": dataQa
   }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
@@ -23322,7 +23371,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
     focusedStyles: themeValues.focusedStyles,
     checkboxExtraStyles: checkboxExtraStyles
-  }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
+  }, hasIconOverride ? /*#__PURE__*/React__default.createElement(Icon, null) : /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
     disabledCheckColor: themeValues.disabledCheckColor,
@@ -23620,7 +23669,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$t = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$v = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
     extraStyles = _ref.extraStyles,
@@ -23629,7 +23678,7 @@ var TableRow = function TableRow(_ref) {
     hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
     onClick = _ref.onClick,
     themeValues = _ref.themeValues,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
     hoverEffect: hoverEffect,
@@ -26463,7 +26512,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$u = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$w = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Detail elements
@@ -26513,7 +26562,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -27107,83 +27156,79 @@ var createFormat = function createFormat(formats, formatChar) {
 var FormattedInput = function FormattedInput(_ref) {
   var value = _ref.value,
       formatter = _ref.formatter,
-      onChange = _ref.onChange,
+      _onChange = _ref.onChange,
       props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
 
-  var _useState = React.useState(format$1(formatter)(value)),
-      _useState2 = _slicedToArray$1(_useState, 2),
-      formattedValue = _useState2[0],
-      setFormattedValue = _useState2[1];
-
   var inputEl = React.useRef(null);
-  var stateRefs = React.useRef({
+
+  var _useState = React.useState({
     selectionStart: 0,
     selectionEnd: 0,
-    isDelete: false,
-    rawValue: ''
-  });
+    rawValue: value,
+    "delete": false,
+    formattedValue: format$1(formatter)(value)
+  }),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
   React.useLayoutEffect(function () {
     // A lot of the work here is cursor manipulation
     if (inputEl.current && inputEl.current === document.activeElement) {
-      inputEl.current.setSelectionRange(stateRefs.current.selectionStart, stateRefs.current.selectionEnd);
-    }
-  }, [stateRefs]);
-
-  var handleChange = function handleChange(event) {
-    var deleteKeyPressed = stateRefs.current.isDelete;
-    var maxFormatExceeded = stateRefs.current.rawValue.length >= formatter.formats.length - 1;
-
-    if (maxFormatExceeded && !deleteKeyPressed) {
-      return;
-    }
-    /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
-    * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
-    * the unformatted value for the user's onChange, the formatted string and unformatted injection need
-    * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
-    * old unformatted value.
-    */
-
-
-    var injectionLength = event.target.value.length - formattedValue.length;
-    var end = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? stateRefs.current.selectionStart + injectionLength : stateRefs.current.selectionEnd - 1;
-    var injection = event.target.value.substring(stateRefs.current.selectionStart, end); // Injection is the new unformatted piece of the input
-    // Need to find where to put it
-
-    var rawInjectionPointStart = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter);
-    var rawInjectionPointEnd = formattedToUnformattedIndex(stateRefs.current.selectionEnd, stateRefs.current.rawValue, formatter); // Unformat the previous formatted value for injection
-    // Using the relevant format string, strips away chars not marked with the formatChar
-
-    var unformattedOldValue = unformat(formatter)(formattedValue, stateRefs.current.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
-
-    var injectIntoOldValue = inject(unformattedOldValue);
-    var unformattedNewValue = deleteKeyPressed ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
-    var lengthDifference = unformattedNewValue.length - stateRefs.current.rawValue.length;
-    var rawIndex = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
-    // Applied by useLayoutEffect
-
-    var newFormattedCursorPosition = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, deleteKeyPressed) : deleteKeyPressed ? stateRefs.current.selectionStart : stateRefs.current.selectionEnd;
-    var formattedNewValue = format$1(formatter)(unformattedNewValue);
-    setFormattedValue(formattedNewValue); // Apply the external onChange function to the raw underlying string
-    // This is where the user generally updates the input value
-
-    if (onChange) {
-      onChange(unformattedNewValue);
+      inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
     }
-  };
-
+  });
   return React__default.createElement("input", _extends$2({}, props, {
     ref: inputEl,
     value: format$1(formatter)(value),
     onKeyDown: function onKeyDown(event) {
-      // Keep track of the state of the input before onChange
-      stateRefs.current = {
-        isDelete: event.key === "Backspace" || event.key === "Delete",
+      // Keep track of the state of the input before onChange, including if user is hitting delete
+      setState({
+        rawValue: value,
         selectionStart: event.target.selectionStart,
         selectionEnd: event.target.selectionEnd,
-        rawValue: value
-      };
+        "delete": event.key === "Backspace" || event.key === "Delete",
+        formattedValue: event.target.value
+      });
     },
-    onChange: handleChange
+    onChange: function onChange(event) {
+      /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
+       * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
+       * the unformatted value for the user's onChange, the formatted string and unformatted injection need
+       * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
+       * old unformatted value.
+       */
+      var injectionLength = event.target.value.length - state.formattedValue.length;
+      var end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
+      var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
+      // Need to find where to put it
+
+      var rawInjectionPointStart = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter);
+      var rawInjectionPointEnd = formattedToUnformattedIndex(state.selectionEnd, state.rawValue, formatter); // Unformat the previous formatted value for injection
+      // Using the relevant format string, strips away chars not marked with the formatChar
+
+      var unformattedOldValue = unformat(formatter)(state.formattedValue, state.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+
+      var injectIntoOldValue = inject(unformattedOldValue);
+      var unformattedNewValue = state["delete"] ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
+      var lengthDifference = unformattedNewValue.length - state.rawValue.length;
+      var rawIndex = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
+      // Applied by useLayoutEffect
+
+      var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
+      setState({
+        selectionStart: newFormattedCursorPosition,
+        selectionEnd: newFormattedCursorPosition,
+        rawValue: state.rawValue,
+        "delete": false,
+        formattedValue: state.formattedValue
+      }); // Apply the external onChange function to the raw underlying string
+      // This is where the user generally updates the input value
+
+      if (_onChange) {
+        _onChange(unformattedNewValue);
+      }
+    }
   }));
 };
 
@@ -27251,7 +27296,7 @@ var fallbackValues$n = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$v = ["showErrors", "themeValues"],
+var _excluded$x = ["showErrors", "themeValues"],
   _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
@@ -27286,7 +27331,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$v);
+    props = _objectWithoutProperties(_ref8, _excluded$x);
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -27491,7 +27536,7 @@ var FormInput = function FormInput(_ref15) {
 };
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$n, "default");
 
-var _excluded$w = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$y = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -27500,7 +27545,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React__default.createElement(Switcher, {
@@ -27511,24 +27556,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$x = ["childGap", "bottomItem", "children"];
+var _excluded$z = ["childGap", "bottomItem", "children"];
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
     bottomItem = _ref.bottomItem,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$y = ["themeValues", "children"];
+var _excluded$A = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -27838,7 +27883,7 @@ var fallbackValues$r = {
   fontSize: fontSize$8
 };
 
-var _excluded$z = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$B = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -27857,7 +27902,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -28058,11 +28103,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
 };
 
-var _excluded$A = ["version"];
+var _excluded$C = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
@@ -28207,7 +28252,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$B = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$D = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -28222,7 +28267,7 @@ var NavFooter = function NavFooter(_ref) {
     footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
     isMobile = _ref.isMobile,
     footerWidth = _ref.footerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -28253,7 +28298,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$C = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$E = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -28262,7 +28307,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -46682,11 +46727,11 @@ var Modal$2 = function Modal(_ref) {
 };
 var ModalControlV2 = withWindowSize(Modal$2);
 
-var _excluded$D = ["version"];
+var _excluded$F = ["version"];
 var Modal$3 = function Modal(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
   return /*#__PURE__*/React__default.createElement(ModalControl, rest);
 };
@@ -47988,7 +48033,7 @@ var fallbackValues$P = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$E = ["amount"],
+var _excluded$G = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -48231,7 +48276,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$E);
+      rest = _objectWithoutProperties(_ref5, _excluded$G);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -48668,11 +48713,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$F = ["version"];
+var _excluded$H = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -49480,7 +49525,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$G = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
+var _excluded$I = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -49529,7 +49574,7 @@ var RadioSection = function RadioSection(_ref) {
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
     borderOverride = _ref.borderOverride,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -50076,7 +50121,7 @@ var Timeout = function Timeout(_ref) {
 };
 var Timeout$1 = withWindowSize(Timeout);
 
-var _excluded$H = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
+var _excluded$J = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
@@ -50105,7 +50150,7 @@ var ToastNotification = function ToastNotification(_ref) {
     screenReaderMessage = _ref.screenReaderMessage,
     _ref$showScreenReader = _ref.showScreenReaderMessage,
     showScreenReaderMessage = _ref$showScreenReader === void 0 ? true : _ref$showScreenReader,
-    rest = _objectWithoutProperties(_ref, _excluded$H);
+    rest = _objectWithoutProperties(_ref, _excluded$J);
   var screenReaderMessageRef = React.useRef();
   var LIVEREGION_TRANSITION_DELAY = 1000;
   React.useEffect(function () {
@@ -50288,7 +50333,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$I = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$K = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -50304,7 +50349,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$I);
+    rest = _objectWithoutProperties(_ref, _excluded$K);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -50477,20 +50522,21 @@ var PopupMenu = function PopupMenu(_ref) {
 };
 var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Z);
 
-var primaryColor$1 = INFO_BLUE;
+var primaryColor$1 = WHITE;
+var primaryHoverColor = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
+var secondaryHoverColor = "#115D7E";
 var fallbackValues$_ = {
   primaryColor: primaryColor$1,
-  secondaryColor: secondaryColor
+  primaryHoverColor: primaryHoverColor,
+  secondaryColor: secondaryColor,
+  secondaryHoverColor: secondaryHoverColor
 };
 
 var StyledFilterContainer = styled__default(Box).withConfig({
   displayName: "MultipleSelectFilterstyled__StyledFilterContainer",
   componentId: "sc-126xgc2-0"
-})(["position:relative;box-sizing:border-box;padding:0;", ""], function (_ref) {
-  var extraStyles = _ref.extraStyles;
-  return extraStyles;
-});
+})(["position:relative;overflow:visible;box-sizing:border-box;padding:0;"]);
 var FilterContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement(StyledFilterContainer, _extends({
     ref: ref
@@ -50499,7 +50545,7 @@ var FilterContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var StyledFilterDropdown = styled__default(Box).withConfig({
   displayName: "MultipleSelectFilterstyled__StyledFilterDropdown",
   componentId: "sc-126xgc2-1"
-})(["position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background-color:white;z-index:1000;border-radius:0.25rem;box-shadow:0px 1px 0px 0px rgba(41,42,51,0.1),0px 2px 4px 0px rgba(41,42,51,0.2),0px 1px 2px 0px rgba(41,42,51,0.1);padding:0;max-width:18.625rem;"]);
+})(["position:absolute;top:calc(100% + 0.5rem);left:0;width:18.4rem;background-color:white;z-index:1000;border-radius:0.25rem;box-shadow:0px 1px 0px 0px rgba(41,42,51,0.1),0px 2px 4px 0px rgba(41,42,51,0.2),0px 1px 2px 0px rgba(41,42,51,0.1);padding:0;max-width:18.625rem;"]);
 var FilterDropdownContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement(StyledFilterDropdown, _extends({
     ref: ref
@@ -50508,12 +50554,16 @@ var FilterDropdownContainer = /*#__PURE__*/React.forwardRef(function (props, ref
 var FilterButton = styled__default(ButtonWithAction).withConfig({
   displayName: "MultipleSelectFilterstyled__FilterButton",
   componentId: "sc-126xgc2-2"
-})(["min-width:auto;min-height:2.3125rem;margin:0;padding:0.5rem;border-radius:0.25rem;box-shadow:0px 1px 2px 0px rgba(41,42,51,0.1);", " ", ""], function (_ref2) {
-  var textColor = _ref2.textColor;
-  return "\n    color: ".concat(textColor, ";\n  ");
-}, function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    :hover,\n    :active,\n    :focus {\n      background-color: ").concat(backgroundColor, ";\n    }\n  ");
+})(["min-width:auto;min-height:2.3125rem;margin:0;padding:0.5rem;border-radius:0.25rem;box-shadow:0px 1px 2px 0px rgba(41,42,51,0.1);", " ", ""], function (_ref) {
+  var opened = _ref.opened,
+    textColor = _ref.textColor,
+    textHoverColor = _ref.textHoverColor;
+  return "\n    color: ".concat(opened ? textHoverColor : textColor, ";\n    :hover,\n    :active,\n    :focus {\n      color: ").concat(textHoverColor, ";\n      > * {\n        color: ").concat(textHoverColor, ";\n      }\n    }\n  ");
+}, function (_ref2) {
+  var opened = _ref2.opened,
+    backgroundColor = _ref2.backgroundColor,
+    backgroundHoverColor = _ref2.backgroundHoverColor;
+  return "\n    background-color: ".concat(opened ? backgroundHoverColor : backgroundColor, ";  \n    :hover,\n    :active,\n    :focus {\n      background-color: ").concat(backgroundHoverColor, ";\n    }\n  ");
 });
 var StyledFilterButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement(FilterButton, _extends({
@@ -50524,7 +50574,8 @@ var StyledFilterButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var ActionLinkButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     text = _ref.text,
-    dataQa = _ref.dataQa;
+    dataQa = _ref.dataQa,
+    ariaLabel = _ref.ariaLabel;
   return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     ref: ref,
     action: action,
@@ -50532,11 +50583,12 @@ var ActionLinkButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     extraStyles: "\n        padding: 0.2rem; \n        margin: 0.5rem; \n        min-height: auto; \n        min-width: auto;\n      ",
     textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, ";"),
     text: text,
-    dataQa: dataQa
+    dataQa: dataQa,
+    "aria-label": ariaLabel
   });
 });
 
-var _excluded$J = ["width", "height", "color"];
+var _excluded$L = ["width", "height", "color"];
 var DropdownIconV2 = function DropdownIconV2(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -50544,7 +50596,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
     height = _ref$height === void 0 ? "19" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     width: width,
     height: height,
@@ -50590,7 +50642,9 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     action = _ref$action === void 0 ? noop$1 : _ref$action,
     opened = _ref.opened,
     backgroundColor = _ref.backgroundColor,
-    contentColor = _ref.contentColor,
+    backgroundHoverColor = _ref.backgroundHoverColor,
+    textColor = _ref.textColor,
+    textHoverColor = _ref.textHoverColor,
     name = _ref.name,
     filterDropdownID = _ref.filterDropdownID,
     _ref$hasIcon = _ref.hasIcon,
@@ -50598,7 +50652,10 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     Icon = _ref.icon,
     truncateBtnTextWidth = _ref.truncateBtnTextWidth,
     filterLabel = _ref.filterLabel,
-    selectedOptions = _ref.selectedOptions;
+    selectedOptions = _ref.selectedOptions,
+    extraStyles = _ref.extraStyles;
+  var btnTextFilterDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? "".concat(filterLabel ? "".concat(filterLabel, ": ") : "").concat(selectedOptions[0].name) : "".concat(filterLabel ? filterLabel : "");
+  var btnTextItemsDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? ", +".concat((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - 1, " More") : "";
   return /*#__PURE__*/React__default.createElement(StyledFilterButton, {
     ref: ref,
     variant: "tertiary",
@@ -50607,7 +50664,13 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-expanded": opened,
     "aria-controls": filterDropdownID,
     backgroundColor: backgroundColor,
+    backgroundHoverColor: backgroundHoverColor,
+    textColor: textColor,
+    textHoverColor: textHoverColor,
+    opened: opened,
     dataQa: "".concat(name, "-filter-button"),
+    extraStyles: extraStyles,
+    "aria-label": "".concat(filterLabel, " Filter: ").concat(btnTextFilterDescription, " ").concat(btnTextItemsDescription),
     contentOverride: true
   }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React__default.createElement(Center, {
     as: "span",
@@ -50617,7 +50680,7 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     },
     intrinsic: true
   }, hasIcon && /*#__PURE__*/React__default.createElement(Icon, {
-    color: contentColor
+    color: opened ? textHoverColor : textColor
   }), /*#__PURE__*/React__default.createElement(Center, {
     as: "span",
     style: {
@@ -50628,20 +50691,22 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: contentColor,
+    color: opened ? textHoverColor : textColor,
     extraStyles: "\n                  white-space: nowrap;\n                  overflow: hidden;\n                  text-overflow: ellipsis;\n                  ".concat(truncateBtnTextWidth && "max-width:" + truncateBtnTextWidth, "\n                ")
-  }, selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? "".concat(filterLabel ? filterLabel + ": " : "").concat(selectedOptions[0].name) : "".concat(filterLabel ? filterLabel : "")), /*#__PURE__*/React__default.createElement(Text$1, {
-    color: contentColor,
+  }, btnTextFilterDescription), /*#__PURE__*/React__default.createElement(Text$1, {
+    color: opened ? textHoverColor : textColor,
     variant: "pS"
-  }, selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? ", +".concat((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - 1, " More") : "")), /*#__PURE__*/React__default.createElement(DropdownIconV2, {
-    color: contentColor
+  }, btnTextItemsDescription)), /*#__PURE__*/React__default.createElement(DropdownIconV2, {
+    color: opened ? textHoverColor : textColor
   })));
 });
 
 var FilterDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     ariaOwns = _ref.ariaOwns,
+    ariaControls = _ref.ariaControls,
     opened = _ref.opened,
+    extraStyles = _ref.extraStyles,
     children = _ref.children;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, opened && /*#__PURE__*/React__default.createElement(FilterDropdownContainer, {
     ref: ref,
@@ -50649,7 +50714,9 @@ var FilterDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     role: "combobox",
     "aria-expanded": opened,
     "aria-haspopup": "listbox",
-    "aria-owns": ariaOwns
+    "aria-owns": ariaOwns,
+    "aria-controls": ariaControls,
+    extraStyles: extraStyles
   }, children));
 });
 
@@ -50670,10 +50737,54 @@ var SearchBox = function SearchBox(_ref) {
     fieldActions: actions.fields.searchTerm,
     placeholder: placeholder,
     disabled: disabled,
-    extraStyles: "\n              height: 2.875rem;\n              border: 0; \n              border-radius: 0;\n              padding: 0.45rem;\n              font-size: 0.875rem;\n              border-bottom: 1px solid ".concat(GHOST_GREY, ";\n           ")
+    extraStyles: "\n            height: 2.875rem;\n            border: 0; \n            border-radius: 0;\n            padding: 0.45rem;\n            font-size: 0.875rem;\n            border-bottom: 1px solid ".concat(GHOST_GREY, ";\n            :focus {\n              outline-offset: -3px;\n            }\n          ")
   }));
 };
 
+var _excluded$M = ["width", "height", "color"];
+var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "18" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "18" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#FEFEFE" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$M);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.7503 5.35354C13.555 5.15828 13.2385 5.15828 13.0432 5.35354L7.52373 10.873L5.52808 8.87735C5.33282 8.68209 5.01624 8.68209 4.82097 8.87735L4.35348 9.34484C4.15822 9.54011 4.15822 9.85669 4.35348 10.052L6.70268 12.4012L7.17018 12.8687C7.36544 13.0639 7.68203 13.0639 7.87729 12.8687L8.34478 12.4012L14.2178 6.52814C14.4131 6.33288 14.4131 6.0163 14.2178 5.82104L13.7503 5.35354Z",
+    fill: "#FEFEFE"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_3361_1486",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "4",
+    y: "5",
+    width: "11",
+    height: "9"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.7503 5.35354C13.555 5.15828 13.2385 5.15828 13.0432 5.35354L7.52373 10.873L5.52808 8.87735C5.33282 8.68209 5.01624 8.68209 4.82097 8.87735L4.35348 9.34484C4.15822 9.54011 4.15822 9.85669 4.35348 10.052L6.70268 12.4012L7.17018 12.8687C7.36544 13.0639 7.68203 13.0639 7.87729 12.8687L8.34478 12.4012L14.2178 6.52814C14.4131 6.33288 14.4131 6.0163 14.2178 5.82104L13.7503 5.35354Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_3361_1486)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: width,
+    height: height,
+    fill: color
+  })));
+};
+
 var FilterableListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var index = _ref.index,
     option = _ref.option,
@@ -50682,28 +50793,31 @@ var FilterableListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref.disabled,
     tabIndex = _ref.tabIndex,
     name = _ref.name,
+    showDivider = _ref.showDivider,
+    extraStyles = _ref.extraStyles,
     themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
+  var dividerStyles = "\n    ::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      display: block;\n      height: 1px;\n      background-color: ".concat(GHOST_GREY, ";\n      bottom: -0.5rem;\n      left: 0;\n    }");
+  return /*#__PURE__*/React__default.createElement(Checkbox$1, {
     key: index,
-    extraStyles: "\n        :hover,\n        :active,\n        :focus {\n        background-color: ".concat(themeValues.primaryColor, ";\n        }\n    ")
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     ref: ref,
     title: option.name,
     name: option.name,
+    role: "option",
+    "aria-selected": checked,
+    tabIndex: tabIndex,
+    dataQa: "".concat(name, "-option-").concat(index),
     checked: checked,
     onChange: function onChange() {
       return selectOption(option);
     },
     textExtraStyles: "font-size: 0.875rem; margin: 0;",
     disabled: disabled,
-    extraStyles: "\n            padding: 0.075rem 0.325rem; \n            margin: 0;\n            :hover,\n            :active,\n            :focus {\n                background-color: ".concat(themeValues.primaryColor, ";\n            }\n        "),
-    checkboxMargin: "0.3rem",
-    role: "option",
-    checkboxExtraStyles: "\n            width: 1.375rem; \n            height: 1.375rem;\n            ".concat(checked && !disabled ? "background: " + themeValues.secondaryColor + ";" : "", "\n         "),
-    tabIndex: tabIndex,
-    dataQa: "".concat(name, "-option-").concat(index)
-  }));
+    extraStyles: "\n          padding: 0.375rem 0.625rem; \n          margin: 0;\n          :hover,\n          :active,\n          :focus {\n            background-color: ".concat(themeValues.primaryHoverColor, ";\n          }\n          ").concat(showDivider && dividerStyles, "\n          ").concat(extraStyles, "\n        "),
+    checkboxMargin: showDivider ? "0 0 1rem" : "0",
+    hasIconOverride: true,
+    icon: CheckboxCheckmarkIcon,
+    checkboxExtraStyles: "\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          height: 20px;\n          width: 20px;\n          ".concat(checked && !disabled ? "background: " + themeValues.secondaryColor + ";" : "", "\n       ")
+  });
 });
 
 var filterItemsList = function filterItemsList(list, searchTerm) {
@@ -50868,14 +50982,12 @@ var FilterableList = function FilterableList(_ref) {
     handleKeyDown = _useKeyboardNavigatio.handleKeyDown;
   return /*#__PURE__*/React__default.createElement(Box, {
     id: id,
-    role: "listbox",
     padding: "0",
-    extraStyles: "\n        overflow-y: auto;\n        max-height: 250px;\n        display: flex;\n        flex-flow: column;\n      ",
-    onKeyDown: handleKeyDown
-  }, (sortedAppliedOptions === null || sortedAppliedOptions === void 0 ? void 0 : sortedAppliedOptions.length) > 0 && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: sortedOptions.length > 0 && "border-bottom: 1px solid ".concat(GHOST_GREY)
-  }, sortedAppliedOptions.map(function (option, index) {
+    role: "listbox",
+    "aria-label": "Filter options container",
+    onKeyDown: handleKeyDown,
+    extraStyles: "\n        overflow-y: auto;\n        max-height: 250px;\n        display: flex;\n        flex-flow: column;\n        padding-bottom: 0.5rem;\n    "
+  }, (sortedAppliedOptions === null || sortedAppliedOptions === void 0 ? void 0 : sortedAppliedOptions.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, sortedAppliedOptions.map(function (option, index) {
     var checked = isChecked(option, selectedOptions);
     var tabIndex = index === focusedIndex || index === 0 && focusedIndex === -1 ? "0" : "-1";
     return /*#__PURE__*/React__default.createElement(FilterableListItem, {
@@ -50889,9 +51001,10 @@ var FilterableList = function FilterableList(_ref) {
       selectOption: handleSelectOption,
       tabIndex: tabIndex,
       name: name,
-      themeValues: themeValues
+      themeValues: themeValues,
+      showDivider: sortedOptions.length > 0 && index === sortedAppliedOptions.length - 1
     });
-  })), sortedOptions.map(function (option, index) {
+  })), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, sortedOptions.map(function (option, index) {
     var checked = isChecked(option, selectedOptions);
     var isDisabled = isMaxSelectionReached(maxSelections, selectedOptions) && !checked;
     var indexOffset = sortedAppliedOptions !== null && sortedAppliedOptions !== void 0 && sortedAppliedOptions.length ? sortedAppliedOptions === null || sortedAppliedOptions === void 0 ? void 0 : sortedAppliedOptions.length : 0;
@@ -50911,7 +51024,7 @@ var FilterableList = function FilterableList(_ref) {
       name: name,
       themeValues: themeValues
     });
-  }));
+  })));
 };
 var FilterableList$1 = /*#__PURE__*/React__default.memo(FilterableList);
 
@@ -50919,7 +51032,9 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
   var actions = _ref.actions,
     autocompleteValue = _ref.autocompleteValue,
     btnContentOverride = _ref.btnContentOverride,
+    btnExtraStyles = _ref.btnExtraStyles,
     disabled = _ref.disabled,
+    dropdownExtraStyles = _ref.dropdownExtraStyles,
     extraStyles = _ref.extraStyles,
     fields = _ref.fields,
     filterLabel = _ref.filterLabel,
@@ -50938,8 +51053,6 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
     _ref$searchable = _ref.searchable,
     searchable = _ref$searchable === void 0 ? true : _ref$searchable,
-    selectedOptions = _ref.selectedOptions,
-    setSelectedOptions = _ref.setSelectedOptions,
     themeValues = _ref.themeValues,
     _ref$truncateBtnTextW = _ref.truncateBtnTextWidth,
     truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW;
@@ -50949,22 +51062,29 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     setOpened = _useState2[1];
   var _useState3 = React.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    appliedOptions = _useState4[0],
-    setAppliedOptions = _useState4[1];
-  var handleClickOutsideContainer = function handleClickOutsideContainer() {
-    setOpened(false);
-    actions.fields.searchTerm.set("");
-    onApply(selectedOptions);
+    selectedOptions = _useState4[0],
+    setSelectedOptions = _useState4[1];
+  var _useState5 = React.useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    appliedOptions = _useState6[0],
+    setAppliedOptions = _useState6[1];
+  var openedRef = React.useRef(opened);
+  var handleOnClose = function handleOnClose() {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
   };
   var containerRef = useOutsideClickHook(function () {
-    return handleClickOutsideContainer();
+    return handleOnClose();
   });
   var dropdownRef = React.useRef(null);
   var filterButtonRef = React.useRef(null);
   var applyFilterButtonRef = React.useRef(null);
   var filterDropdownID = "".concat(name, "-filter-dropdown");
-  var checkboxListID = "".concat(name, "-checkbox-list");
+  var listGroupID = "".concat(name, "-list-group");
   React.useEffect(function () {
+    openedRef.current = opened;
     if (!opened) {
       onApply(selectedOptions);
       setAppliedOptions(selectedOptions);
@@ -50981,9 +51101,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
         or tabbing backward past the filter button.
       */
       if (event.key === "Escape" || event.key === "Tab" && !event.shiftKey && applyFilterButtonRef.current && applyFilterButtonRef.current.contains(event.target) || event.key === "Tab" && event.shiftKey && filterButtonRef.current && filterButtonRef.current.contains(event.target)) {
-        setOpened(false);
-        actions.fields.searchTerm.set("");
-        onApply(selectedOptions);
+        handleOnClose();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
@@ -51002,20 +51120,25 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
       setOpened(!opened);
     },
     opened: opened,
-    backgroundColor: opened ? themeValues.primaryColor : selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? themeValues.secondaryColor : WHITE,
-    contentColor: !opened && selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? WHITE : CHARADE_GREY,
+    backgroundHoverColor: appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length ? themeValues.secondaryHoverColor : themeValues.primaryHoverColor,
+    backgroundColor: appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length ? themeValues.secondaryColor : themeValues.primaryColor,
+    textColor: appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length ? WHITE : CHARADE_GREY,
+    textHoverColor: opened && !(appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length) ? CHARADE_GREY : WHITE,
     name: name,
     filterDropdownID: filterDropdownID,
     hasIcon: hasIcon,
     icon: Icon,
     truncateBtnTextWidth: truncateBtnTextWidth,
     filterLabel: filterLabel,
-    selectedOptions: selectedOptions
+    selectedOptions: selectedOptions,
+    extraStyles: btnExtraStyles
   }), /*#__PURE__*/React__default.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,
-    ariaOwns: checkboxListID,
-    opened: opened
+    ariaOwns: listGroupID,
+    ariaControls: listGroupID,
+    opened: opened,
+    extraStyles: dropdownExtraStyles
   }, /*#__PURE__*/React__default.createElement(SearchBox, {
     showSearchBox: searchable && (options === null || options === void 0 ? void 0 : options.length) > 8,
     autocompleteValue: autocompleteValue,
@@ -51024,7 +51147,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     placeholder: placeholder,
     disabled: disabled
   }), /*#__PURE__*/React__default.createElement(FilterableList$1, {
-    id: checkboxListID,
+    id: listGroupID,
     options: options,
     appliedOptions: appliedOptions,
     themeValues: themeValues,
@@ -51038,22 +51161,21 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     extraStyles: "\n            max-height: 100px; \n            display: flex; \n            flex-flow: row; \n            justify-content: space-between;\n            border-top: 1px solid ".concat(GHOST_GREY, ";\n          ")
   }, /*#__PURE__*/React__default.createElement(ActionLinkButton, {
     action: function action() {
-      setOpened(false);
       setSelectedOptions([]);
-      actions.fields.searchTerm.set("");
+      handleOnClose();
       onClear();
     },
     text: "Clear",
-    dataQa: "".concat(name, "-clear-filters")
+    dataQa: "".concat(name, "-clear-filters"),
+    ariaLabel: "Clear all filters"
   }), /*#__PURE__*/React__default.createElement(ActionLinkButton, {
     ref: applyFilterButtonRef,
     action: function action() {
-      setOpened(false);
-      actions.fields.searchTerm.set("");
-      onApply(selectedOptions);
+      return handleOnClose();
     },
     text: "Apply",
-    dataQa: "".concat(name, "-apply-filters")
+    dataQa: "".concat(name, "-apply-filters"),
+    ariaLabel: "Apply all filters"
   }))));
 };
 var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$_);
@@ -51490,11 +51612,13 @@ exports.PaymentFormCard = PaymentFormCard$1;
 exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;
 exports.PaymentSearchIcon = PaymentSearchIcon;
+exports.PaymentStatusIcon = PaymentStatusIcon;
 exports.PaymentsIconSmall = PaymentsIconSmall$1;
 exports.PencilIcon = PencilIcon$1;
 exports.PendingIcon = PendingIcon;
 exports.PeriscopeDashboardIframe = PeriscopeDashboardIframe;
 exports.PeriscopeFailedIcon = PeriscopeFailedIcon;
+exports.PersonIcon = PersonIcon;
 exports.PhoneForm = PhoneForm;
 exports.Placeholder = Placeholder$1;
 exports.PlusCircleIcon = PlusCircleIcon;