@thecb/components 10.10.0 → 10.11.0-beta.1

package/dist/index.cjs.js

@@ -4864,8 +4864,8 @@ var createThemeValues = function createThemeValues(themeContext, fallbackValues,
   }, {});
   return createdTheme;
 };
-var themeComponent = function themeComponent(component, componentThemeId, fallbackValues, defaultVariant) {
-  return function (_ref7) {
+var themeComponent = function themeComponent(Component, componentThemeId, fallbackValues, defaultVariant) {
+  return /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     var _themeContext$metadat;
     var _ref7$variant = _ref7.variant,
       variant = _ref7$variant === void 0 ? defaultVariant : _ref7$variant,
@@ -4873,12 +4873,13 @@ var themeComponent = function themeComponent(component, componentThemeId, fallba
     var themeContext = React.useContext(styled.ThemeContext);
     var metadata = (_themeContext$metadat = themeContext === null || themeContext === void 0 ? void 0 : themeContext.metadata) !== null && _themeContext$metadat !== void 0 ? _themeContext$metadat : {};
     var themeValues = themeContext ? createThemeValues(themeContext, fallbackValues, componentThemeId, variant) : fallbackValues;
-    return component(_objectSpread2(_objectSpread2({}, props), {}, {
+    return /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
       themeValues: themeValues,
       variant: variant,
-      metadata: metadata
+      metadata: metadata,
+      ref: ref
     }));
-  };
+  });
 };
 
 /*
@@ -6450,7 +6451,7 @@ var _excluded$2 = ["activeStyles", "focusStyles", "hoverStyles", "disabledStyles
 */
 
 /* eslint-disable no-unused-vars */
-var BoxWrapper = styled__default(function (_ref) {
+var BoxWrapper = styled__default( /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var activeStyles = _ref.activeStyles,
     focusStyles = _ref.focusStyles,
     hoverStyles = _ref.hoverStyles,
@@ -6471,10 +6472,11 @@ var BoxWrapper = styled__default(function (_ref) {
     ariaLabel = _ref.ariaLabel,
     props = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: ref,
     "aria-controls": ariaControls,
     "aria-label": ariaLabel
   }, props));
-}).withConfig({
+})).withConfig({
   displayName: "Boxstyled__BoxWrapper",
   componentId: "sc-1f9ij0d-0"
 })(["position:relative;box-sizing:border-box;padding:", ";border:", ";box-shadow:", ";background-color:", ";min-height:", ";", " min-width:", ";max-width:", ";color:", ";border-radius:", ";border-width:", ";text-align:", ";&:hover{", "}&:focus{", "}&:active{", "}&:disabled{", "}&[aria-disabled=\"true\"]{", "}& *{color:", ";}", " ", ""], function (_ref2) {
@@ -18833,6 +18835,28 @@ var NoResultsIcon = function NoResultsIcon(_ref) {
   }))))));
 };
 
+var _excluded$l = ["color"];
+var AgencyIcon = function AgencyIcon(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#292A33" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$l);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "21",
+    viewBox: "0 0 20 21",
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("g", {
+    id: "Agency / Agency - S"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    id: "Icon - Agency",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.5625 4.375H3.875L3.875 16.625H9.5625V7.875V7V4.375ZM10.4375 7.875V16.625H16.125V7.875H10.4375ZM10.4375 7H16.125C16.6082 7 17 7.39175 17 7.875V16.625C17 17.1082 16.6082 17.5 16.125 17.5H10.4375H9.5625H3.875C3.39175 17.5 3 17.1082 3 16.625V4.375C3 3.89175 3.39175 3.5 3.875 3.5H9.5625C10.0457 3.5 10.4375 3.89175 10.4375 4.375V7ZM8.46875 6.5625H4.96875V7.4375H8.46875V6.5625ZM4.96875 8.3125H8.46875V9.1875H4.96875V8.3125ZM8.46875 10.0625H4.96875V10.9375H8.46875V10.0625ZM4.96875 11.8125H8.46875V12.6875H4.96875V11.8125ZM4.96875 13.5625H8.46875V14.4375H4.96875V13.5625ZM11.5312 10.0625H15.0312V10.9375H11.5312V10.0625ZM11.5312 11.8125H15.0312V12.6875H11.5312V11.8125ZM15.0312 13.5625H11.5312V14.4375H15.0312V13.5625Z",
+    fill: color
+  })));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -19486,7 +19510,7 @@ var mobileFallbackValues = {
 };
 var MOBILE_BREAKPOINT = 768;
 
-var _excluded$l = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$m = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Title elements
@@ -19533,7 +19557,7 @@ var Title = function Title(_ref) {
     as = _ref$as === void 0 ? "h1" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$l);
+    rest = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement(TitleText, _extends({
     variant: variant,
     as: as,
@@ -20961,12 +20985,12 @@ var fallbackValues$8 = {
   linkColor: linkColor
 };
 
-var _excluded$m = ["variant", "themeValues", "children"];
+var _excluded$n = ["variant", "themeValues", "children"];
 var BoxWithShadow = function BoxWithShadow(_ref) {
   var variant = _ref.variant,
     themeValues = _ref.themeValues,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   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), ";"),
@@ -21026,7 +21050,7 @@ var fallbackValues$a = {
   externalLinkColor: externalLinkColor
 };
 
-var _excluded$n = ["hoverColor", "activeColor", "extrastyles"];
+var _excluded$o = ["hoverColor", "activeColor", "extrastyles"];
 var ROYAL_BLUE$1 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$3 = LINK_TEXT_DECORATION;
 
@@ -21040,7 +21064,7 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
   var hoverColor = _ref.hoverColor,
     activeColor = _ref.activeColor,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React__default.createElement("a", _extends({}, props, {
     ref: ref
   }));
@@ -21115,7 +21139,7 @@ var ExternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 });
 
-var _excluded$o = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
+var _excluded$p = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
 var ROYAL_BLUE$2 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$4 = LINK_TEXT_DECORATION;
 
@@ -21131,7 +21155,7 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
     active = _ref.active,
     color = _ref.color,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, _extends({}, props, {
     ref: ref
   }));
@@ -22814,7 +22838,7 @@ _curry2(function test(pattern, str) {
   return _cloneRegExp(pattern).test(str);
 });
 
-var _excluded$p = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
+var _excluded$q = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
     url = _ref$url === void 0 ? "/" : _ref$url,
@@ -22829,7 +22853,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$p);
+    otherProps = _objectWithoutProperties(_ref, _excluded$q);
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
       url = _ref2.url,
@@ -22917,7 +22941,7 @@ var ParagraphText = styled__default.p.withConfig({
   return extraStyles;
 });
 
-var _excluded$q = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
+var _excluded$r = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
 var Paragraph = function Paragraph(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -22931,7 +22955,7 @@ var Paragraph = function Paragraph(_ref) {
     dataQa = _ref.dataQa,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
     weight: weight,
     color: color,
@@ -23173,6 +23197,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 CheckboxContainer = styled__default.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -23199,7 +23224,7 @@ var HiddenCheckbox = styled__default.input.attrs({
 var StyledCheckbox = styled__default.span.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
-})(["display:inline-block;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";"], CheckboxIcon, function (_ref2) {
+})(["display:inline-block;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";", ""], CheckboxIcon, function (_ref2) {
   var checked = _ref2.checked;
   return checked ? "visible" : "hidden";
 }, function (_ref3) {
@@ -23214,27 +23239,32 @@ var StyledCheckbox = styled__default.span.withConfig({
     disabledStyles = _ref3.disabledStyles,
     disabledCheckedStyles = _ref3.disabledCheckedStyles;
   return error ? styled.css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? styled.css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? styled.css(["", " ", ""], checkedStyles, focused && focusedStyles) : styled.css(["", " ", ""], defaultStyles, focused && focusedStyles);
+}, function (_ref4) {
+  var checkboxExtraStyles = _ref4.checkboxExtraStyles;
+  return styled.css(["", ""], checkboxExtraStyles);
 });
-var Checkbox = function Checkbox(_ref4) {
-  var title = _ref4.title,
-    name = _ref4.name,
-    checked = _ref4.checked,
-    _ref4$onChange = _ref4.onChange,
-    onChange = _ref4$onChange === void 0 ? noop : _ref4$onChange,
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-    themeValues = _ref4.themeValues,
-    _ref4$hidden = _ref4.hidden,
-    hidden = _ref4$hidden === void 0 ? false : _ref4$hidden,
-    _ref4$error = _ref4.error,
-    error = _ref4$error === void 0 ? false : _ref4$error,
-    _ref4$checkboxMargin = _ref4.checkboxMargin,
-    checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
-    extraStyles = _ref4.extraStyles,
-    textExtraStyles = _ref4.textExtraStyles,
-    labelledById = _ref4.labelledById,
-    _ref4$dataQa = _ref4.dataQa,
-    dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
+var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+  var title = _ref5.title,
+    name = _ref5.name,
+    checked = _ref5.checked,
+    _ref5$onChange = _ref5.onChange,
+    onChange = _ref5$onChange === void 0 ? noop : _ref5$onChange,
+    _ref5$disabled = _ref5.disabled,
+    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
+    themeValues = _ref5.themeValues,
+    _ref5$hidden = _ref5.hidden,
+    hidden = _ref5$hidden === void 0 ? false : _ref5$hidden,
+    _ref5$error = _ref5.error,
+    error = _ref5$error === void 0 ? false : _ref5$error,
+    _ref5$checkboxMargin = _ref5.checkboxMargin,
+    checkboxMargin = _ref5$checkboxMargin === void 0 ? "0 16px 0 0" : _ref5$checkboxMargin,
+    extraStyles = _ref5.extraStyles,
+    textExtraStyles = _ref5.textExtraStyles,
+    labelledById = _ref5.labelledById,
+    _ref5$dataQa = _ref5.dataQa,
+    dataQa = _ref5$dataQa === void 0 ? null : _ref5$dataQa,
+    checkboxExtraStyles = _ref5.checkboxExtraStyles,
+    rest = _objectWithoutProperties(_ref5, _excluded$s);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -23247,7 +23277,8 @@ var Checkbox = function Checkbox(_ref4) {
   var titleId = title ? "checkboxlabel-".concat(name) : undefined;
   var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
   var ariaLabel = ariaLabelledById ? undefined : name;
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, _extends({
+    ref: ref,
     padding: "0",
     tabIndex: "0",
     onFocus: function onFocus() {
@@ -23262,7 +23293,7 @@ var Checkbox = function Checkbox(_ref4) {
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
     extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
-  }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
+  }, rest), /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
     "data-qa": dataQa
   }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
@@ -23289,7 +23320,8 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles
+    focusedStyles: themeValues.focusedStyles,
+    checkboxExtraStyles: checkboxExtraStyles
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -23304,7 +23336,7 @@ var Checkbox = function Checkbox(_ref4) {
     color: themeValues.textColor,
     extraStyles: textExtraStyles ? "".concat(textExtraStyles, " ").concat(disabled && "color: #6e727e; background-color: #f7f7f7;", " ") : "margin-left: 1rem ".concat(disabled && "color: #6e727e; background-color: #f7f7f7;")
   }, title)));
-};
+});
 var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$d, "default");
 
 var listBackgroundColor = {
@@ -23588,7 +23620,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$r = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$t = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
     extraStyles = _ref.extraStyles,
@@ -23597,7 +23629,7 @@ var TableRow = function TableRow(_ref) {
     hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
     onClick = _ref.onClick,
     themeValues = _ref.themeValues,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
     hoverEffect: hoverEffect,
@@ -26422,7 +26454,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$s = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$u = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Detail elements
@@ -26472,7 +26504,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$s);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -27055,83 +27087,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);
+      }
+    }
   }));
 };
 
@@ -27199,8 +27227,8 @@ var fallbackValues$n = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$t = ["showErrors", "themeValues"],
-  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired"];
+var _excluded$v = ["showErrors", "themeValues"],
+  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -27234,7 +27262,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$t);
+    props = _objectWithoutProperties(_ref8, _excluded$v);
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -27288,6 +27316,9 @@ var FormInput = function FormInput(_ref15) {
     dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
     _ref15$isRequired = _ref15.isRequired,
     isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
+    errorFieldExtraStyles = _ref15.errorFieldExtraStyles,
+    _ref15$showFieldError = _ref15.showFieldErrorRow,
+    showFieldErrorRow = _ref15$showFieldError === void 0 ? true : _ref15$showFieldError,
     props = _objectWithoutProperties(_ref15, _excluded2);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -27413,7 +27444,7 @@ var FormInput = function FormInput(_ref15) {
     "data-qa": dataQa || labelTextWhenNoError,
     autoComplete: autocompleteValue,
     required: isRequired
-  }, props))), /*#__PURE__*/React__default.createElement(Stack, {
+  }, props))), showFieldErrorRow && /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
     "aria-live": "polite",
@@ -27422,17 +27453,17 @@ var FormInput = function FormInput(_ref15) {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
+    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }\n              ".concat(errorFieldExtraStyles, ";"),
     id: createIdFromString(labelTextWhenNoError, "error message")
   }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
-    extraStyles: "height: ".concat(themeValues.lineHeight, ";")
+    extraStyles: "height: ".concat(themeValues.lineHeight, "; ").concat(errorFieldExtraStyles, ";")
   }), !isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
   }, decorator)));
 };
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$n, "default");
 
-var _excluded$u = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$w = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -27441,7 +27472,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React__default.createElement(Switcher, {
@@ -27452,24 +27483,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$v = ["childGap", "bottomItem", "children"];
+var _excluded$x = ["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$v);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$w = ["themeValues", "children"];
+var _excluded$y = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -27779,7 +27810,7 @@ var fallbackValues$r = {
   fontSize: fontSize$8
 };
 
-var _excluded$x = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$z = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -27798,7 +27829,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -27999,11 +28030,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
 };
 
-var _excluded$y = ["version"];
+var _excluded$A = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
@@ -28148,7 +28179,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$z = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$B = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -28163,7 +28194,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$z);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -28194,7 +28225,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$A = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$C = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -28203,7 +28234,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -46576,11 +46607,11 @@ var Modal$2 = function Modal(_ref) {
 };
 var ModalControlV2 = withWindowSize(Modal$2);
 
-var _excluded$B = ["version"];
+var _excluded$D = ["version"];
 var Modal$3 = function Modal(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
   return /*#__PURE__*/React__default.createElement(ModalControl, rest);
 };
@@ -47882,7 +47913,7 @@ var fallbackValues$P = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$C = ["amount"],
+var _excluded$E = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -48125,7 +48156,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$C);
+      rest = _objectWithoutProperties(_ref5, _excluded$E);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -48562,11 +48593,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$D = ["version"];
+var _excluded$F = ["version"];
 var TermsAndConditions = function TermsAndConditions(_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 TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -49368,7 +49399,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$E = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
+var _excluded$G = ["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' 
@@ -49417,7 +49448,7 @@ var RadioSection = function RadioSection(_ref) {
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
     borderOverride = _ref.borderOverride,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
+    rest = _objectWithoutProperties(_ref, _excluded$G);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -49964,7 +49995,7 @@ var Timeout = function Timeout(_ref) {
 };
 var Timeout$1 = withWindowSize(Timeout);
 
-var _excluded$F = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
+var _excluded$H = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
@@ -49993,7 +50024,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$F);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   var screenReaderMessageRef = React.useRef();
   var LIVEREGION_TRANSITION_DELAY = 1000;
   React.useEffect(function () {
@@ -50176,7 +50207,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$G = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$I = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -50192,7 +50223,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -50365,8 +50396,392 @@ var PopupMenu = function PopupMenu(_ref) {
 };
 var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Z);
 
-var pageBackground = "#FBFCFD";
+var primaryColor$1 = INFO_BLUE;
+var secondaryColor = MATISSE_BLUE;
 var fallbackValues$_ = {
+  primaryColor: primaryColor$1,
+  secondaryColor: secondaryColor
+};
+
+var _excluded$J = ["width", "height", "color"];
+var DropdownIconV2 = function DropdownIconV2(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "18" : _ref$width,
+    _ref$height = _ref.height,
+    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);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("g", {
+    id: "Carrot - Down / Carrot - Down - XS"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    id: "Combined Shape",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.1075 7.45743C13.9122 7.26217 13.5956 7.26216 13.4003 7.45743L8.99233 11.8654L4.59199 7.46509C4.39673 7.26983 4.08014 7.26983 3.88488 7.46509L3.45355 7.89643C3.25828 8.09169 3.25828 8.40827 3.45355 8.60354L8.65078 13.8008C8.84604 13.996 9.16263 13.996 9.35789 13.8008L9.78922 13.3694C9.81738 13.3413 9.84147 13.3106 9.86151 13.2781L14.5413 8.59836C14.7365 8.4031 14.7365 8.08652 14.5413 7.89126L14.1075 7.45743Z",
+    fill: color
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_3043_4463",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "3",
+    y: "7",
+    width: "12",
+    height: "7"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    id: "Combined Shape_2",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.1075 7.45743C13.9122 7.26217 13.5956 7.26216 13.4003 7.45743L8.99233 11.8654L4.59199 7.46509C4.39673 7.26983 4.08014 7.26983 3.88488 7.46509L3.45355 7.89643C3.25828 8.09169 3.25828 8.40827 3.45355 8.60354L8.65078 13.8008C8.84604 13.996 9.16263 13.996 9.35789 13.8008L9.78922 13.3694C9.81738 13.3413 9.84147 13.3106 9.86151 13.2781L14.5413 8.59836C14.7365 8.4031 14.7365 8.08652 14.5413 7.89126L14.1075 7.45743Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_3043_4463)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    id: "Path",
+    d: "M0 0.5H18V18.5H0V0.5Z",
+    fill: color
+  }))));
+};
+
+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 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 FilterButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(StyledFilterButton, _extends({
+    ref: ref
+  }, props));
+});
+
+var ScrollableOptionsList = function ScrollableOptionsList(_ref) {
+  var id = _ref.id,
+    optionsList = _ref.optionsList,
+    selectedOptions = _ref.selectedOptions,
+    themeValues = _ref.themeValues,
+    selectOption = _ref.selectOption,
+    maxSelections = _ref.maxSelections,
+    name = _ref.name;
+  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);
+    });
+  };
+  React.useEffect(function () {
+    if (focusedIndex !== -1 && checkboxRefs.current && checkboxRefs.current[focusedIndex]) {
+      checkboxRefs.current[focusedIndex].focus(); // move focus to the active option
+    }
+  }, [focusedIndex]);
+  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);
+    }
+  };
+  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
+  }, optionsList.map(function (option, index) {
+    var checked = isChecked(option);
+    var isDisabled = isMaxSelectionReached && !checked;
+    var tabIndex = index === focusedIndex || index === 0 && focusedIndex === -1 ? "0" : "-1";
+    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: function ref(el) {
+        return checkboxRefs.current[index] = el;
+      },
+      title: option.name,
+      name: option.name,
+      checked: checked,
+      onChange: function onChange() {
+        return isDisabled ? noop : selectOption(option);
+      },
+      textExtraStyles: "font-size: 0.875rem; margin: 0;",
+      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)
+    }));
+  }));
+};
+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 _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];
+  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.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);
+    }
+  }, [fields.searchTerm.rawValue]);
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+      }
+      /*
+        Close the dropdown if we hit the Escape key, 
+        or if we are tabbing forward away from the last button (apply button) 
+        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);
+      }
+    };
+    var handleClickOutside = function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpened(false);
+        actions.fields.searchTerm.set("");
+        onApply(selectedOptions);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(FilterContainer, {
+    ref: containerRef,
+    extraStyles: "".concat(extraStyles)
+  }, /*#__PURE__*/React__default.createElement(FilterButton, {
+    ref: filterButtonRef,
+    variant: "tertiary",
+    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, {
+    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, {
+    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             ")
+  })), /*#__PURE__*/React__default.createElement(ScrollableOptionsList, {
+    id: checkboxListID,
+    optionsList: completeOptionsList,
+    selectedOptions: selectedOptions,
+    themeValues: themeValues,
+    selectOption: selectOption,
+    maxSelections: maxSelections,
+    name: name
+  }), /*#__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, {
+    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, {
+    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")
+  }))));
+};
+var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$_);
+
+var pageBackground = "#FBFCFD";
+var fallbackValues$$ = {
   pageBackground: pageBackground
 };
 
@@ -50414,7 +50829,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$_));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$$));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -50457,7 +50872,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$_));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$$));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -50503,7 +50918,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$_));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$$));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -50556,7 +50971,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$_));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$$));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50626,7 +51041,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$_));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$$));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -50665,6 +51080,7 @@ exports.AccountsIconSmall = AccountsIconSmall$1;
 exports.AchReturnIcon = AchReturnIcon;
 exports.AddObligation = AddObligation$1;
 exports.AddressForm = AddressForm;
+exports.AgencyIcon = AgencyIcon;
 exports.Alert = Alert$1;
 exports.AllocatedIcon = AllocatedIcon;
 exports.AmountCallout = AmountCallout$1;
@@ -50774,6 +51190,7 @@ exports.Modal = Modal$3;
 exports.Module = Module$1;
 exports.Motion = Motion;
 exports.MultiCartIcon = MultiCartIcon;
+exports.MultipleSelectFilter = MultipleSelectFilter$1;
 exports.NavFooter = NavFooter;
 exports.NavHeader = NavHeader;
 exports.NavMenuDesktop = NavMenuDesktop$1;