@thecb/components 10.12.0 → 10.12.1-beta.0

package/dist/index.cjs.js

@@ -6249,7 +6249,7 @@ return numeral;
 }));
 });
 
-var noop = function noop() {};
+var noop$1 = function noop() {};
 var formatMoneyString = function formatMoneyString(s) {
   return numeral(s).format("$0,0.00");
 };
@@ -6383,7 +6383,7 @@ var wrapIndex = function wrapIndex(index, length) {
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  noop: noop,
+  noop: noop$1,
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
@@ -10575,7 +10575,7 @@ var isRefObject = function (ref) {
     return typeof ref === "object" && ref.hasOwnProperty("current");
 };
 
-var noop$1 = function (v) { return v; };
+var noop$2 = function (v) { return v; };
 var ComponentDragControls = /** @class */ (function () {
     function ComponentDragControls(_a) {
         var ref = _a.ref, values = _a.values, controls = _a.controls;
@@ -10603,7 +10603,7 @@ var ComponentDragControls = /** @class */ (function () {
          * @internal
          */
         this.props = {
-            transformPagePoint: noop$1,
+            transformPagePoint: noop$2,
         };
         /**
          * References to the MotionValues used for tracking the current dragged point.
@@ -13033,7 +13033,7 @@ var Spinner = function Spinner(_ref) {
 
 var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$action = _ref2.action,
-    action = _ref2$action === void 0 ? noop : _ref2$action,
+    action = _ref2$action === void 0 ? noop$1 : _ref2$action,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? "primary" : _ref2$variant,
     text = _ref2.text,
@@ -13075,7 +13075,7 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     disabledStyles: disabledStyles,
     "aria-disabled": disabled,
     as: "button",
-    onClick: isLoading || disabled ? noop : action,
+    onClick: isLoading || disabled ? noop$1 : action,
     borderRadius: "2px",
     theme: themeContext,
     extraStyles: "margin: 0.5rem; ".concat(extraStyles),
@@ -23248,7 +23248,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     name = _ref5.name,
     checked = _ref5.checked,
     _ref5$onChange = _ref5.onChange,
-    onChange = _ref5$onChange === void 0 ? noop : _ref5$onChange,
+    onChange = _ref5$onChange === void 0 ? noop$1 : _ref5$onChange,
     _ref5$disabled = _ref5.disabled,
     disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
     themeValues = _ref5.themeValues,
@@ -23447,7 +23447,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     padding: "0.875rem",
     borderRadius: "4px",
     minWidth: "30%",
-    onClick: disabled ? noop : onSelect,
+    onClick: disabled ? noop$1 : onSelect,
     borderColor: borderColor,
     borderSize: "1px",
     color: color,
@@ -23462,8 +23462,8 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     name: name,
     "aria-label": name,
     htmlFor: "checkbox-".concat(name, "-").concat(index),
-    onClick: disabled ? noop : onSelect,
-    onKeyDown: disabled ? noop : onSelect,
+    onClick: disabled ? noop$1 : onSelect,
+    onKeyDown: disabled ? noop$1 : onSelect,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
     theme: {
@@ -23691,7 +23691,7 @@ var SortableTableHeading = function SortableTableHeading(_ref) {
     disabled: disabled,
     extraStyles: "cursor: pointer; ".concat(extraStyles),
     onClick: function onClick(event) {
-      return disabled ? noop : onSortChange(event);
+      return disabled ? noop$1 : onSortChange(event);
     },
     "aria-controls": ariaControlsId
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -25121,7 +25121,7 @@ var Dropdown = function Dropdown(_ref13) {
     _ref13$disabledValues = _ref13.disabledValues,
     disabledValues = _ref13$disabledValues === void 0 ? [] : _ref13$disabledValues,
     _ref13$onClick = _ref13.onClick,
-    _onClick = _ref13$onClick === void 0 ? noop : _ref13$onClick,
+    _onClick = _ref13$onClick === void 0 ? noop$1 : _ref13$onClick,
     themeValues = _ref13.themeValues,
     maxHeight = _ref13.maxHeight,
     _ref13$widthFitOption = _ref13.widthFitOptions,
@@ -26766,7 +26766,7 @@ var Popover = function Popover(_ref) {
     extraStyles: "position: relative; ".concat(extraStyles)
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: function action() {
-      return noop;
+      return noop$1;
     },
     onFocus: function onFocus() {
       handleTogglePopover(true);
@@ -27096,83 +27096,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);
+      inputEl.current.setSelectionRange(state.selectionStart, state.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);
-    }
-  };
-
+  });
   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);
+      }
+    }
   }));
 };
 
@@ -27769,7 +27765,7 @@ var HamburgerButton = function HamburgerButton(_ref4) {
     inactiveColor = _ref4.inactiveColor,
     isActive = _ref4.isActive,
     _ref4$onClick = _ref4.onClick,
-    onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick,
+    onClick = _ref4$onClick === void 0 ? noop$1 : _ref4$onClick,
     controls = _ref4.controls;
   return /*#__PURE__*/React__default.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
@@ -28660,7 +28656,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     themeValues = _ref5.themeValues,
     index = _ref5.index,
     _ref5$handleChange = _ref5.handleChange,
-    handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
+    handleChange = _ref5$handleChange === void 0 ? noop$1 : _ref5$handleChange,
     field = _ref5.field,
     config = _ref5.config;
   var getDefaultChecked = function getDefaultChecked(value, idx) {
@@ -28877,7 +28873,7 @@ var Search = function Search(_ref) {
     "aria-controls": ariaControlsId,
     extraStyles: "border-radius: 4px 0 0 4px; border: none; box-shadow: 0px 1px 2px 0px ".concat(CHARADE_GREY, "1A; font-size: 0.875rem;"),
     onKeyDown: function onKeyDown(e) {
-      return searchOnKeypress || e.key === "Enter" ? handleSubmit() : noop;
+      return searchOnKeypress || e.key === "Enter" ? handleSubmit() : noop$1;
     },
     field: field,
     fieldActions: fieldActions,
@@ -39665,7 +39661,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     _ref10$isOn = _ref10.isOn,
     isOn = _ref10$isOn === void 0 ? false : _ref10$isOn,
     _ref10$onToggle = _ref10.onToggle,
-    onToggle = _ref10$onToggle === void 0 ? noop : _ref10$onToggle,
+    onToggle = _ref10$onToggle === void 0 ? noop$1 : _ref10$onToggle,
     _ref10$disabled = _ref10.disabled,
     disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
     _ref10$name = _ref10.name,
@@ -39765,13 +39761,13 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     "aria-labelledby": label ? "".concat(nameId, "-label") : null,
     "aria-describedby": ariaDescribedBy ? ariaDescribedBy : null,
     checked: isOn,
-    onChange: disabled ? noop : onToggle,
+    onChange: disabled ? noop$1 : onToggle,
     disabled: disabled,
     id: "#".concat(nameId),
     isMobile: isMobile
   }), /*#__PURE__*/React__default.createElement(VisibleSwitch, {
-    onClick: disabled ? noop : onToggle,
-    onKeyDown: disabled ? noop : handleKeyDown,
+    onClick: disabled ? noop$1 : onToggle,
+    onKeyDown: disabled ? noop$1 : handleKeyDown,
     pose: isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
@@ -39865,40 +39861,20 @@ var fallbackValues$E = {
 };
 
 var CardText = function CardText(_ref) {
-  var showQuitLink = _ref.showQuitLink,
-    onQuitClick = _ref.onQuitClick,
-    titleAs = _ref.titleAs,
-    padding = _ref.padding,
+  var padding = _ref.padding,
     text = _ref.text,
-    _ref$textAs = _ref.textAs,
-    textAs = _ref$textAs === void 0 ? "p" : _ref$textAs,
     titleText = _ref.titleText,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
     themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: padding
-  }, /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "space-between",
-    align: "center",
-    overflow: true
-  }, titleText && /*#__PURE__*/React__default.createElement(Title$1, {
-    as: titleAs,
+  }, /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Stack, null, titleText && /*#__PURE__*/React__default.createElement(Title$1, {
+    as: "p",
     variant: titleVariant,
     color: themeValues.titleColor,
     weight: themeValues.titleWeight
-  }, titleText), showQuitLink && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    onClick: onQuitClick,
-    onKeyDown: function onKeyDown(e) {
-      return e.key === "Enter" && onQuitClick();
-    },
-    role: "button",
-    tabIndex: 0,
-    "aria-label": "Close Card: ".concat(titleText),
-    extraStyles: "cursor: pointer;"
-  }, /*#__PURE__*/React__default.createElement(IconQuitLarge, null))), /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    as: textAs,
+  }, titleText), /*#__PURE__*/React__default.createElement(Paragraph$1, {
     color: themeValues.textColor
   }, text))));
 };
@@ -39939,17 +39915,9 @@ var Card = function Card(_ref) {
     _ref$imgObjectFit = _ref.imgObjectFit,
     imgObjectFit = _ref$imgObjectFit === void 0 ? "none" : _ref$imgObjectFit,
     imgAltText = _ref.imgAltText,
-    _ref$onQuitClick = _ref.onQuitClick,
-    onQuitClick = _ref$onQuitClick === void 0 ? noop : _ref$onQuitClick,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "24px" : _ref$padding,
-    _ref$showQuitLink = _ref.showQuitLink,
-    showQuitLink = _ref$showQuitLink === void 0 ? false : _ref$showQuitLink,
     text = _ref.text,
-    _ref$textAs = _ref.textAs,
-    textAs = _ref$textAs === void 0 ? "p" : _ref$textAs,
-    _ref$titleAs = _ref.titleAs,
-    titleAs = _ref$titleAs === void 0 ? "h2" : _ref$titleAs,
     titleText = _ref.titleText,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
@@ -40006,13 +39974,9 @@ var Card = function Card(_ref) {
     width: "100%",
     extraStyles: "flex-basis: 100%;"
   }, text && /*#__PURE__*/React__default.createElement(CardText$1, {
-    onQuitClick: onQuitClick,
     padding: padding,
-    showQuitLink: showQuitLink,
-    titleAs: titleAs,
     titleText: titleText,
     text: text,
-    textAs: textAs,
     titleVariant: titleVariant
   }), children)))));
 };
@@ -40973,7 +40937,7 @@ var AddressForm = function AddressForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -41173,7 +41137,7 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     fields = _ref.fields,
     actions = _ref.actions,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showErrors = _ref.showErrors,
     isMobile = _ref.isMobile,
     revenueManagement = _ref.revenueManagement,
@@ -41384,8 +41348,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
-    onClick: isMobile && supportsTouch ? noop : toggleSection,
-    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
+    onClick: isMobile && supportsTouch ? noop$1 : toggleSection,
+    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop$1,
     key: "header",
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
@@ -41603,7 +41567,7 @@ var EditNameForm = function EditNameForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -41946,7 +41910,7 @@ var EmailForm = function EmailForm(_ref) {
     showErrors = _ref.showErrors,
     guestCheckout = _ref.guestCheckout,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -42044,7 +42008,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -42638,7 +42602,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
-    onClick: disabled ? noop : onClick,
+    onClick: disabled ? noop$1 : onClick,
     "aria-disabled": disabled,
     isDisabled: disabled,
     role: "group",
@@ -42687,7 +42651,7 @@ var LoginForm = function LoginForm(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -46357,13 +46321,13 @@ var CancelButton = function CancelButton(_ref) {
   var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
     buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
     _ref$cancelAction = _ref.cancelAction,
-    cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
+    cancelAction = _ref$cancelAction === void 0 ? noop$1 : _ref$cancelAction,
     _ref$cancelButtonText = _ref.cancelButtonText,
     cancelButtonText = _ref$cancelButtonText === void 0 ? "" : _ref$cancelButtonText,
     _ref$cancelButtonVari = _ref.cancelButtonVariant,
     cancelButtonVariant = _ref$cancelButtonVari === void 0 ? "secondary" : _ref$cancelButtonVari,
     _ref$hideModal = _ref.hideModal,
-    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop$1 : _ref$hideModal,
     _ref$isMobile = _ref.isMobile,
     isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
   var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
@@ -46390,7 +46354,7 @@ var CloseButton = function CloseButton(_ref) {
     _ref$closeButtonVaria = _ref.closeButtonVariant,
     closeButtonVariant = _ref$closeButtonVaria === void 0 ? "primary" : _ref$closeButtonVaria,
     _ref$hideModal = _ref.hideModal,
-    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop$1 : _ref$hideModal,
     _ref$isMobile = _ref.isMobile,
     isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
   var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
@@ -46412,7 +46376,7 @@ var CloseButton = function CloseButton(_ref) {
 var CloseIconButton = function CloseIconButton(_ref) {
   var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
     _ref$hideModal = _ref.hideModal,
-    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop$1 : _ref$hideModal,
     _ref$iconWidth = _ref.iconWidth,
     iconWidth = _ref$iconWidth === void 0 ? "24px" : _ref$iconWidth,
     _ref$iconHeight = _ref.iconHeight,
@@ -46437,7 +46401,7 @@ var ContinueButton = function ContinueButton(_ref) {
   var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
     buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
     _ref$continueAction = _ref.continueAction,
-    continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
+    continueAction = _ref$continueAction === void 0 ? noop$1 : _ref$continueAction,
     _ref$continueButtonTe = _ref.continueButtonText,
     continueButtonText = _ref$continueButtonTe === void 0 ? "" : _ref$continueButtonTe,
     _ref$continueURL = _ref.continueURL,
@@ -46492,7 +46456,7 @@ var Modal$2 = function Modal(_ref) {
     _ref$buttonExtraStyle = _ref.buttonExtraStyles,
     buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
     _ref$cancelAction = _ref.cancelAction,
-    cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
+    cancelAction = _ref$cancelAction === void 0 ? noop$1 : _ref$cancelAction,
     _ref$cancelButtonText = _ref.cancelButtonText,
     cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
     _ref$cancelButtonVari = _ref.cancelButtonVariant,
@@ -46504,7 +46468,7 @@ var Modal$2 = function Modal(_ref) {
     _ref$closeButtonVaria = _ref.closeButtonVariant,
     closeButtonVariant = _ref$closeButtonVaria === void 0 ? "primary" : _ref$closeButtonVaria,
     _ref$continueAction = _ref.continueAction,
-    continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
+    continueAction = _ref$continueAction === void 0 ? noop$1 : _ref$continueAction,
     _ref$continueButtonTe = _ref.continueButtonText,
     continueButtonText = _ref$continueButtonTe === void 0 ? "Continue" : _ref$continueButtonTe,
     _ref$continueButtonVa = _ref.continueButtonVariant,
@@ -46518,7 +46482,7 @@ var Modal$2 = function Modal(_ref) {
     _ref$defaultWrapper = _ref.defaultWrapper,
     defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
     _ref$hideModal = _ref.hideModal,
-    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop$1 : _ref$hideModal,
     _ref$initialFocusSele = _ref.initialFocusSelector,
     initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
     _ref$isContinueAction = _ref.isContinueActionDisabled,
@@ -46999,13 +46963,13 @@ var AmountModule = function AmountModule(_ref) {
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
     disableActions: disableActions,
-    action: disableActions ? noop : function () {
+    action: disableActions ? noop$1 : function () {
       return toggleModal(true);
     },
-    onClick: disableActions ? noop : function () {
+    onClick: disableActions ? noop$1 : function () {
       toggleModal(true);
     },
-    onKeyPress: disableActions ? noop : function (e) {
+    onKeyPress: disableActions ? noop$1 : function (e) {
       e.key === "Enter" && toggleModal(true);
     }
   })));
@@ -47135,7 +47099,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
-    action: disableActions ? noop : function () {
+    action: disableActions ? noop$1 : function () {
       return handleClick(obligations);
     },
     text: "Pay Now",
@@ -47147,7 +47111,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
-    action: disableActions ? noop : function () {
+    action: disableActions ? noop$1 : function () {
       return handleClick(obligations);
     },
     text: "Pay Now",
@@ -47202,7 +47166,7 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: "Remove",
     variant: "secondary",
-    action: disableActions ? noop : function () {
+    action: disableActions ? noop$1 : function () {
       return setModalIsOpen(true);
     },
     dataQa: "Remove Account",
@@ -47274,7 +47238,7 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(RemoveAccountModalModule, {
     agencyName: agencyName,
-    removeAccount: disableActions ? noop : handleRemoveAccount,
+    removeAccount: disableActions ? noop$1 : handleRemoveAccount,
     accountType: configType === "ACCOUNT" ? "Account" : "Property",
     isMobile: isMobile,
     disableActions: disableActions
@@ -47835,7 +47799,7 @@ var Pagination = function Pagination(_ref3) {
         return setCurrentPage({
           pageNumber: item.index
         });
-      } : noop,
+      } : noop$1,
       textExtraStyles: "font-size: ".concat(fontSize, "; font-weight: ").concat(fontWeight, ";"),
       extraStyles: "".concat(extraStyles).concat(item.active ? currentPageStyles : ""),
       dataQa: index
@@ -48198,7 +48162,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     _ref4$voidableTransac = _ref4.voidableTransactionDetails,
     voidableTransactionDetails = _ref4$voidableTransac === void 0 ? [] : _ref4$voidableTransac,
     _ref4$partialVoidActi = _ref4.partialVoidAction,
-    partialVoidAction = _ref4$partialVoidActi === void 0 ? noop : _ref4$partialVoidActi,
+    partialVoidAction = _ref4$partialVoidActi === void 0 ? noop$1 : _ref4$partialVoidActi,
     _ref4$voidableAmountP = _ref4.voidableAmountPaid,
     voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP,
     _ref4$remainingBalanc = _ref4.remainingBalance,
@@ -48675,7 +48639,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -48877,7 +48841,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -49182,7 +49146,7 @@ var PhoneForm = function PhoneForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -49266,7 +49230,7 @@ var RadioGroup = function RadioGroup(_ref2) {
     config = _ref2.config,
     extraStyles = _ref2.extraStyles,
     _ref2$handleChange = _ref2.handleChange,
-    handleChange = _ref2$handleChange === void 0 ? noop : _ref2$handleChange,
+    handleChange = _ref2$handleChange === void 0 ? noop$1 : _ref2$handleChange,
     field = _ref2.field,
     fieldActions = _ref2.fieldActions;
   var setValue = function setValue(value) {
@@ -49331,7 +49295,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy,
     isLastGroupedItemInSection = _ref.isLastGroupedItemInSection,
     _ref$onKeyDown = _ref.onKeyDown,
-    onKeyDown = _ref$onKeyDown === void 0 ? noop : _ref$onKeyDown;
+    onKeyDown = _ref$onKeyDown === void 0 ? noop$1 : _ref$onKeyDown;
   var wrapper = {
     open: {
       height: openHeight,
@@ -49388,12 +49352,12 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     "aria-required": section.required,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
-    onClick: isMobile && supportsTouch || section.disabled || section.id === openSection ? noop : function () {
+    onClick: isMobile && supportsTouch || section.disabled || section.id === openSection ? noop$1 : function () {
       return toggleOpenSection(section.id);
     },
     onTouchEnd: isMobile && supportsTouch && !section.disabled && section.id !== openSection ? function () {
       return toggleOpenSection(section.id);
-    } : noop,
+    } : noop$1,
     id: "inner-radio-section-".concat(sectionIndex),
     "data-qa": section.dataQa ? section.dataQa : section.id || "inner-radio-section-".concat(sectionIndex)
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -49423,7 +49387,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     ariaDescribedBy: ariaDescribedBy,
     radioOn: openSection === section.id,
     radioFocused: focused === section.id,
-    toggleRadio: section.disabled ? noop : function () {
+    toggleRadio: section.disabled ? noop$1 : function () {
       return toggleOpenSection(section.id);
     },
     tabIndex: "-1",
@@ -49608,7 +49572,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
     fields = _ref.fields,
     actions = _ref.actions,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showErrors = _ref.showErrors,
     isMobile = _ref.isMobile;
   if (clearOnDismount) {
@@ -49775,7 +49739,7 @@ var ResetConfirmationForm$1 = withWindowSize(ResetConfirmationForm);
 
 var ResetPasswordForm = function ResetPasswordForm(_ref) {
   var _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     clearOnDismount = _ref.clearOnDismount,
     fields = _ref.fields,
     actions = _ref.actions,
@@ -50469,6 +50433,58 @@ var fallbackValues$_ = {
   secondaryColor: secondaryColor
 };
 
+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;
+});
+var FilterContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(StyledFilterContainer, _extends({
+    ref: ref
+  }, props));
+});
+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;"]);
+var FilterDropdownContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(StyledFilterDropdown, _extends({
+    ref: ref
+  }, props));
+});
+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  ");
+});
+var StyledFilterButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(FilterButton, _extends({
+    ref: ref
+  }, props));
+});
+
+var ActionLinkButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var action = _ref.action,
+    text = _ref.text,
+    dataQa = _ref.dataQa;
+  return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    ref: ref,
+    action: action,
+    variant: "tertiary",
+    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
+  });
+});
+
 var _excluded$J = ["width", "height", "color"];
 var DropdownIconV2 = function DropdownIconV2(_ref) {
   var _ref$width = _ref.width,
@@ -50517,205 +50533,385 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
   }))));
 };
 
-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;
-});
-var FilterContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(StyledFilterContainer, _extends({
-    ref: ref
-  }, props));
-});
-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;"]);
-var FilterDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(StyledFilterDropdown, _extends({
-    ref: ref
-  }, props));
+var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var btnContentOverride = _ref.btnContentOverride,
+    _ref$action = _ref.action,
+    action = _ref$action === void 0 ? noop$1 : _ref$action,
+    opened = _ref.opened,
+    backgroundColor = _ref.backgroundColor,
+    contentColor = _ref.contentColor,
+    name = _ref.name,
+    filterDropdownID = _ref.filterDropdownID,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+    Icon = _ref.icon,
+    truncateBtnTextWidth = _ref.truncateBtnTextWidth,
+    filterLabel = _ref.filterLabel,
+    selectedOptions = _ref.selectedOptions;
+  return /*#__PURE__*/React__default.createElement(StyledFilterButton, {
+    ref: ref,
+    variant: "tertiary",
+    action: action,
+    "aria-haspopup": "listbox",
+    "aria-expanded": opened,
+    "aria-controls": filterDropdownID,
+    backgroundColor: backgroundColor,
+    dataQa: "".concat(name, "-filter-button"),
+    contentOverride: true
+  }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React__default.createElement(Center, {
+    as: "span",
+    style: {
+      display: "flex",
+      flexDirection: "row"
+    },
+    intrinsic: true
+  }, hasIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    color: contentColor
+  }), /*#__PURE__*/React__default.createElement(Center, {
+    as: "span",
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      padding: "0 0.5rem 0 0.25rem"
+    },
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pS",
+    color: contentColor,
+    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,
+    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
+  })));
 });
-var StyledFilterButton = styled__default(ButtonWithAction).withConfig({
-  displayName: "MultipleSelectFilterstyled__StyledFilterButton",
-  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  ");
+
+var FilterDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    ariaOwns = _ref.ariaOwns,
+    opened = _ref.opened,
+    children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, opened && /*#__PURE__*/React__default.createElement(FilterDropdownContainer, {
+    ref: ref,
+    id: id,
+    role: "combobox",
+    "aria-expanded": opened,
+    "aria-haspopup": "listbox",
+    "aria-owns": ariaOwns
+  }, children));
 });
-var FilterButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(StyledFilterButton, _extends({
-    ref: ref
-  }, props));
+
+var SearchBox = function SearchBox(_ref) {
+  var autocompleteValue = _ref.autocompleteValue,
+    fields = _ref.fields,
+    actions = _ref.actions,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    showSearchBox = _ref.showSearchBox;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 0.5rem"
+  }, showSearchBox && /*#__PURE__*/React__default.createElement(FormInput$1, {
+    autocompleteValue: autocompleteValue,
+    showFieldErrorRow: false,
+    errorMessages: {},
+    field: fields.searchTerm,
+    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           ")
+  }));
+};
+
+var FilterableListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var index = _ref.index,
+    option = _ref.option,
+    checked = _ref.checked,
+    selectOption = _ref.selectOption,
+    disabled = _ref.disabled,
+    tabIndex = _ref.tabIndex,
+    name = _ref.name,
+    themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    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,
+    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)
+  }));
 });
 
-var ScrollableOptionsList = function ScrollableOptionsList(_ref) {
-  var id = _ref.id,
-    optionsList = _ref.optionsList,
+var filterItemsList = function filterItemsList(list, searchTerm) {
+  return list.filter(function (item) {
+    var _item$name;
+    return item === null || item === void 0 || (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toLowerCase().includes(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.toLowerCase());
+  });
+};
+var sortItemsList = function sortItemsList(list) {
+  return list.slice().sort(function (a, b) {
+    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+  });
+};
+var isMaxSelectionReached = function isMaxSelectionReached(maxSelection, selectedOptions) {
+  return maxSelection && maxSelection === (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length);
+};
+var isChecked = function isChecked(option, selectedOptions) {
+  return selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.some(function (selectedOption) {
+    return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name) === (option === null || option === void 0 ? void 0 : option.name);
+  });
+};
+var selectValues = function selectValues(items) {
+  return items.map(function (item) {
+    return item.value;
+  });
+};
+var selectOption = function selectOption(option, selectedOptions, setSelectedOptions) {
+  if (selectValues(selectedOptions).includes(option.value)) {
+    var fewerOptions = selectedOptions.filter(function (selectedOption) {
+      return selectedOption.value !== option.value;
+    });
+    setSelectedOptions(fewerOptions);
+  } else {
+    var moreOptions = selectedOptions.concat(option);
+    setSelectedOptions(moreOptions);
+  }
+};
+
+var useKeyboardNavigation = function useKeyboardNavigation(_ref) {
+  var options = _ref.options,
+    appliedOptions = _ref.appliedOptions,
     selectedOptions = _ref.selectedOptions,
-    themeValues = _ref.themeValues,
-    selectOption = _ref.selectOption,
-    maxSelections = _ref.maxSelections,
-    name = _ref.name;
+    maxSelections = _ref.maxSelections;
   var _useState = React.useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     focusedIndex = _useState2[0],
     setFocusedIndex = _useState2[1];
-  var checkboxRefs = React.useRef([]);
-  var isMaxSelectionReached = maxSelections && maxSelections === (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length);
-  var isChecked = function isChecked(option) {
-    return selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.some(function (selectedOption) {
-      return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name) === (option === null || option === void 0 ? void 0 : option.name);
+  var itemRefs = React.useRef([]);
+  var totalItemsLength = options.length + appliedOptions.length;
+  var handleArrowUp = function handleArrowUp(event) {
+    event.preventDefault();
+    setFocusedIndex(function (prevIndex) {
+      return prevIndex > 0 ? prevIndex - 1 : totalItemsLength - 1;
     });
   };
-  React.useEffect(function () {
-    if (focusedIndex !== -1 && checkboxRefs.current && checkboxRefs.current[focusedIndex]) {
-      checkboxRefs.current[focusedIndex].focus(); // move focus to the active option
+  var handleArrowDown = function handleArrowDown(event) {
+    event.preventDefault();
+    setFocusedIndex(function (prevIndex) {
+      return prevIndex < totalItemsLength - 1 ? prevIndex + 1 : 0;
+    });
+  };
+  var handleSpacebar = function handleSpacebar(event) {
+    event.preventDefault();
+    var validFocusedIndex = focusedIndex < 0 ? 0 : focusedIndex;
+    // Select option on spacebar press if the maximum selection hasn't been reached.
+    if (!isMaxSelectionReached(maxSelections, selectedOptions) && itemRefs.current && itemRefs.current[validFocusedIndex]) {
+      var nestedInput = itemRefs.current[validFocusedIndex].querySelector("input");
+      if (nestedInput) {
+        nestedInput.click();
+      }
     }
-  }, [focusedIndex]);
+  };
+  var handleTab = function handleTab(event) {
+    // Reset focus when tabbing out of the list.
+    setFocusedIndex(-1);
+  };
+  var keyActions = {
+    " ": function _(event) {
+      return handleSpacebar(event);
+    },
+    Space: function Space(event) {
+      return handleSpacebar(event);
+    },
+    Tab: function Tab(event) {
+      return handleTab();
+    },
+    ArrowUp: function ArrowUp(event) {
+      return handleArrowUp(event);
+    },
+    ArrowDown: function ArrowDown(event) {
+      return handleArrowDown(event);
+    }
+  };
   var handleKeyDown = function handleKeyDown(event) {
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      setFocusedIndex(function (prevIndex) {
-        return prevIndex < optionsList.length - 1 ? prevIndex + 1 : 0;
-      });
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      setFocusedIndex(function (prevIndex) {
-        return prevIndex > 0 ? prevIndex - 1 : optionsList.length - 1;
-      });
-    } else if (event.key === " ") {
-      event.preventDefault();
-      // Select option on spacebar press if the maximum selection hasn't been reached.
-      var validFocusedIndex = focusedIndex < 0 ? 0 : focusedIndex;
-      if (!isMaxSelectionReached || focusedIndex !== -1 && isChecked(optionsList[validFocusedIndex])) {
-        selectOption(optionsList[validFocusedIndex]);
-      }
-    } else if (event.key === "Tab") {
-      // Reset focus when tabbing out of the list.
-      setTimeout(function () {
-        setFocusedIndex(-1);
-      }, 500);
+    var eventKey = event.code || event.key;
+    var action = keyActions[eventKey];
+    if (action) {
+      action(event);
+    }
+  };
+  React.useEffect(function () {
+    if (focusedIndex !== -1 && itemRefs.current && itemRefs.current[focusedIndex]) {
+      itemRefs.current[focusedIndex].focus(); // move focus to the active option
     }
+  }, [focusedIndex]);
+  return {
+    itemRefs: itemRefs,
+    focusedIndex: focusedIndex,
+    handleKeyDown: handleKeyDown
+  };
+};
+
+var FilterableList = function FilterableList(_ref) {
+  var id = _ref.id,
+    options = _ref.options,
+    appliedOptions = _ref.appliedOptions,
+    selectedOptions = _ref.selectedOptions,
+    maxSelections = _ref.maxSelections,
+    name = _ref.name,
+    setSelectedOptions = _ref.setSelectedOptions,
+    searchTerm = _ref.searchTerm,
+    themeValues = _ref.themeValues;
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    filteredOptions = _useState2[0],
+    setFilteredOptions = _useState2[1];
+  var _useState3 = React.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredAppliedOptions = _useState4[0],
+    setFilteredAppliedOptions = _useState4[1];
+  React.useEffect(function () {
+    setFilteredOptions(options);
+    setFilteredAppliedOptions(appliedOptions);
+  }, [options, appliedOptions]);
+  React.useEffect(function () {
+    var filteredOptionItems = filterItemsList(options, searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.rawValue);
+    var filteredAppliedItems = filterItemsList(appliedOptions, searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.rawValue);
+    setFilteredOptions(filteredOptionItems.length ? filteredOptionItems : filteredOptions);
+    setFilteredAppliedOptions(filteredAppliedItems);
+  }, [searchTerm.rawValue]);
+  var handleSelectOption = function handleSelectOption(option) {
+    return selectOption(option, selectedOptions, setSelectedOptions);
   };
+  var isAppliedOption = function isAppliedOption(option) {
+    return filteredAppliedOptions === null || filteredAppliedOptions === void 0 ? void 0 : filteredAppliedOptions.some(function (appliedItem) {
+      return (appliedItem === null || appliedItem === void 0 ? void 0 : appliedItem.name) === (option === null || option === void 0 ? void 0 : option.name);
+    });
+  };
+  var currentFilteredOptions = filteredOptions.filter(function (option) {
+    return !isAppliedOption(option);
+  });
+  var sortedOptions = sortItemsList(currentFilteredOptions);
+  var sortedAppliedOptions = sortItemsList(filteredAppliedOptions);
+  var _useKeyboardNavigatio = useKeyboardNavigation({
+      options: sortedOptions,
+      appliedOptions: sortedAppliedOptions,
+      selectedOptions: selectedOptions,
+      maxSelections: maxSelections
+    }),
+    itemRefs = _useKeyboardNavigatio.itemRefs,
+    focusedIndex = _useKeyboardNavigatio.focusedIndex,
+    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      ",
+    extraStyles: "\n        overflow-y: auto;\n        max-height: 250px;\n        display: flex;\n        flex-flow: column;\n      ",
     onKeyDown: handleKeyDown
-  }, optionsList.map(function (option, index) {
-    var checked = isChecked(option);
-    var isDisabled = isMaxSelectionReached && !checked;
+  }, (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) {
+    var checked = isChecked(option, selectedOptions);
     var tabIndex = index === focusedIndex || index === 0 && focusedIndex === -1 ? "0" : "-1";
-    return /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0",
+    return /*#__PURE__*/React__default.createElement(FilterableListItem, {
       key: index,
-      extraStyles: "\n              :hover,\n              :active,\n              :focus {\n                background-color: ".concat(themeValues.primaryColor, ";\n              }\n          ")
-    }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
       ref: function ref(el) {
-        return checkboxRefs.current[index] = el;
+        return itemRefs.current[index] = el;
       },
-      title: option.name,
-      name: option.name,
+      index: index,
+      option: option,
       checked: checked,
-      onChange: function onChange() {
-        return isDisabled ? noop : selectOption(option);
+      selectOption: handleSelectOption,
+      tabIndex: tabIndex,
+      name: name,
+      themeValues: themeValues
+    });
+  })), 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;
+    var currentIndex = index === 0 ? indexOffset : index + indexOffset;
+    var tabIndex = currentIndex === focusedIndex || indexOffset === 0 && currentIndex === indexOffset && focusedIndex === -1 ? "0" : "-1";
+    return /*#__PURE__*/React__default.createElement(FilterableListItem, {
+      key: currentIndex,
+      ref: function ref(el) {
+        return itemRefs.current[currentIndex] = el;
       },
-      textExtraStyles: "font-size: 0.875rem; margin: 0;",
+      index: currentIndex,
+      option: option,
+      checked: checked,
+      selectOption: isDisabled ? noop : handleSelectOption,
       disabled: isDisabled,
-      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 && !isDisabled ? "background: " + themeValues.secondaryColor + ";" : ""),
       tabIndex: tabIndex,
-      dataQa: "".concat(name, "-option-").concat(index)
-    }));
+      name: name,
+      themeValues: themeValues
+    });
   }));
 };
-var MultipleSelectFilter = function MultipleSelectFilter(_ref2) {
-  var actions = _ref2.actions,
-    autocompleteValue = _ref2.autocompleteValue,
-    btnContentOverride = _ref2.btnContentOverride,
-    disabled = _ref2.disabled,
-    extraStyles = _ref2.extraStyles,
-    fields = _ref2.fields,
-    filterLabel = _ref2.filterLabel,
-    _ref2$hasIcon = _ref2.hasIcon,
-    hasIcon = _ref2$hasIcon === void 0 ? false : _ref2$hasIcon,
-    Icon = _ref2.icon,
-    maxSelections = _ref2.maxSelections,
-    _ref2$name = _ref2.name,
-    name = _ref2$name === void 0 ? "MultipleSelectFilter" : _ref2$name,
-    _ref2$onApply = _ref2.onApply,
-    onApply = _ref2$onApply === void 0 ? noop : _ref2$onApply,
-    _ref2$onClear = _ref2.onClear,
-    onClear = _ref2$onClear === void 0 ? noop : _ref2$onClear,
-    options = _ref2.options,
-    _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? "Search" : _ref2$placeholder,
-    _ref2$searchable = _ref2.searchable,
-    searchable = _ref2$searchable === void 0 ? true : _ref2$searchable,
-    selectedOptions = _ref2.selectedOptions,
-    setSelectedOptions = _ref2.setSelectedOptions,
-    themeValues = _ref2.themeValues,
-    _ref2$truncateBtnText = _ref2.truncateBtnTextWidth,
-    truncateBtnTextWidth = _ref2$truncateBtnText === void 0 ? "15rem" : _ref2$truncateBtnText;
+var FilterableList$1 = /*#__PURE__*/React__default.memo(FilterableList);
+
+var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
+  var actions = _ref.actions,
+    autocompleteValue = _ref.autocompleteValue,
+    btnContentOverride = _ref.btnContentOverride,
+    disabled = _ref.disabled,
+    extraStyles = _ref.extraStyles,
+    fields = _ref.fields,
+    filterLabel = _ref.filterLabel,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+    Icon = _ref.icon,
+    maxSelections = _ref.maxSelections,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "MultipleSelectFilter" : _ref$name,
+    _ref$onApply = _ref.onApply,
+    onApply = _ref$onApply === void 0 ? noop$1 : _ref$onApply,
+    _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? noop$1 : _ref$onClear,
+    options = _ref.options,
+    _ref$placeholder = _ref.placeholder,
+    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;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    opened = _useState2[0],
+    setOpened = _useState2[1];
   var _useState3 = React.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    itemList = _useState4[0],
-    setItemList = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    opened = _useState6[0],
-    setOpened = _useState6[1];
+    appliedOptions = _useState4[0],
+    setAppliedOptions = _useState4[1];
   var containerRef = React.useRef(null);
   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 backgroundColor = opened ? themeValues.primaryColor : selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? themeValues.secondaryColor : WHITE;
-  var contentColor = !opened && selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? WHITE : "#292A33";
-  var completeOptionsList = itemList.slice().sort(function (a, b) {
-    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
-  });
-  var selectValues = function selectValues(items) {
-    return items.map(function (item) {
-      return item.value;
-    });
-  };
-  var selectOption = function selectOption(selectedOption) {
-    if (selectValues(selectedOptions).includes(selectedOption.value)) {
-      var fewerOptions = selectedOptions.filter(function (option) {
-        return option.value !== selectedOption.value;
-      });
-      setSelectedOptions(fewerOptions);
-    } else {
-      var moreOptions = selectedOptions.concat(selectedOption);
-      setSelectedOptions(moreOptions);
-    }
-  };
-  React.useEffect(function () {
-    return setItemList(options);
-  }, [options]);
   React.useEffect(function () {
-    var filteredItems = options.filter(function (item) {
-      var _item$name, _fields$searchTerm;
-      return item === null || item === void 0 || (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toLowerCase().includes(fields === null || fields === void 0 || (_fields$searchTerm = fields.searchTerm) === null || _fields$searchTerm === void 0 || (_fields$searchTerm = _fields$searchTerm.rawValue) === null || _fields$searchTerm === void 0 ? void 0 : _fields$searchTerm.toLowerCase());
-    });
-    // If no items are filtered, display the entire list of options.
-    if (filteredItems !== null && filteredItems !== void 0 && filteredItems.length) {
-      setItemList(filteredItems);
-    } else {
-      setItemList(options);
+    if (!opened) {
+      onApply(selectedOptions);
+      setAppliedOptions(selectedOptions);
     }
-  }, [fields.searchTerm.rawValue]);
+  }, [opened]);
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === "Escape") {
@@ -50749,97 +50945,64 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref2) {
   return /*#__PURE__*/React__default.createElement(FilterContainer, {
     ref: containerRef,
     extraStyles: "".concat(extraStyles)
-  }, /*#__PURE__*/React__default.createElement(FilterButton, {
+  }, /*#__PURE__*/React__default.createElement(FilterButton$1, {
     ref: filterButtonRef,
-    variant: "tertiary",
+    btnContentOverride: btnContentOverride,
     action: function action() {
       actions.fields.searchTerm.set("");
       setOpened(!opened);
     },
-    "aria-haspopup": "listbox",
-    "aria-expanded": opened,
-    "aria-controls": filterDropdownID,
-    backgroundColor: backgroundColor,
-    dataQa: "".concat(name, "-filter-button"),
-    contentOverride: true
-  }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React__default.createElement(Center, {
-    as: "span",
-    style: {
-      display: "flex",
-      flexDirection: "row"
-    },
-    intrinsic: true
-  }, hasIcon && /*#__PURE__*/React__default.createElement(Icon, {
-    color: contentColor
-  }), /*#__PURE__*/React__default.createElement(Center, {
-    as: "span",
-    style: {
-      display: "flex",
-      flexDirection: "row",
-      padding: "0 0.5rem 0 0.25rem"
-    },
-    intrinsic: true
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "pS",
-    color: contentColor,
-    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,
-    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
-  }))), /*#__PURE__*/React__default.createElement(FilterDropdown, {
+    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 : "#292A33",
+    name: name,
+    filterDropdownID: filterDropdownID,
+    hasIcon: hasIcon,
+    icon: Icon,
+    truncateBtnTextWidth: truncateBtnTextWidth,
+    filterLabel: filterLabel,
+    selectedOptions: selectedOptions
+  }), /*#__PURE__*/React__default.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,
-    hidden: !opened,
-    role: "combobox",
-    "aria-expanded": opened,
-    "aria-haspopup": "listbox",
-    "aria-owns": checkboxListID
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 0.5rem"
-  }, searchable && (options === null || options === void 0 ? void 0 : options.length) > 8 && /*#__PURE__*/React__default.createElement(FormInput$1, {
+    ariaOwns: checkboxListID,
+    opened: opened
+  }, /*#__PURE__*/React__default.createElement(SearchBox, {
+    showSearchBox: searchable && (options === null || options === void 0 ? void 0 : options.length) > 8,
     autocompleteValue: autocompleteValue,
-    showFieldErrorRow: false,
-    errorMessages: {},
-    field: fields.searchTerm,
-    fieldActions: actions.fields.searchTerm,
+    fields: fields,
+    actions: actions,
     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             ")
-  })), /*#__PURE__*/React__default.createElement(ScrollableOptionsList, {
+    disabled: disabled
+  }), /*#__PURE__*/React__default.createElement(FilterableList$1, {
     id: checkboxListID,
-    optionsList: completeOptionsList,
-    selectedOptions: selectedOptions,
+    options: options,
+    appliedOptions: appliedOptions,
     themeValues: themeValues,
-    selectOption: selectOption,
+    selectedOptions: selectedOptions,
     maxSelections: maxSelections,
-    name: name
+    name: name,
+    setSelectedOptions: setSelectedOptions,
+    searchTerm: fields === null || fields === void 0 ? void 0 : fields.searchTerm
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0.5rem 0.0625rem 0.5rem",
     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(ButtonWithAction, {
+  }, /*#__PURE__*/React__default.createElement(ActionLinkButton, {
     action: function action() {
       setOpened(false);
       setSelectedOptions([]);
       actions.fields.searchTerm.set("");
       onClear();
     },
-    variant: "tertiary",
-    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: "Clear",
     dataQa: "".concat(name, "-clear-filters")
-  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+  }), /*#__PURE__*/React__default.createElement(ActionLinkButton, {
     ref: applyFilterButtonRef,
     action: function action() {
       setOpened(false);
       actions.fields.searchTerm.set("");
       onApply(selectedOptions);
     },
-    variant: "tertiary",
-    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: "Apply",
     dataQa: "".concat(name, "-apply-filters")
   }))));