@thecb/components 10.12.1-beta.0 → 10.12.2-beta.0

package/dist/index.esm.js

@@ -18849,6 +18849,52 @@ var AgencyIcon = function AgencyIcon(_ref) {
   })));
 };
 
+var _excluded$m = ["width", "height", "color"];
+var PersonIcon = function PersonIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "14" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "15" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$m);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.25 1.8125H1.75C1.50838 1.8125 1.3125 2.00838 1.3125 2.25V12.75C1.3125 12.9916 1.50838 13.1875 1.75 13.1875H2.625V11.7778C2.625 9.89848 4.02411 8.375 5.75 8.375H8.25C9.97589 8.375 11.375 9.89848 11.375 11.7778V13.1875H12.25C12.4916 13.1875 12.6875 12.9916 12.6875 12.75V2.25C12.6875 2.00838 12.4916 1.8125 12.25 1.8125ZM1.75 14.5H2.625H11.375H12.25C13.2165 14.5 14 13.7165 14 12.75V2.25C14 1.2835 13.2165 0.5 12.25 0.5H1.75C0.783502 0.5 0 1.2835 0 2.25V12.75C0 13.7165 0.783502 14.5 1.75 14.5ZM7 7.5C8.20812 7.5 9.1875 6.52062 9.1875 5.3125C9.1875 4.10438 8.20812 3.125 7 3.125C5.79188 3.125 4.8125 4.10438 4.8125 5.3125C4.8125 6.52062 5.79188 7.5 7 7.5Z",
+    fill: color
+  }));
+};
+
+var _excluded$n = ["width", "height", "color"];
+var PaymentStatusIcon = function PaymentStatusIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "20" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "21" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$n);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.875 4.375C10.875 3.89175 11.2668 3.5 11.75 3.5H16.125C16.6082 3.5 17 3.89175 17 4.375V8.75C17 9.23325 16.6082 9.625 16.125 9.625H15.25V15.75C15.25 16.7165 14.4665 17.5 13.5 17.5H4.75C3.7835 17.5 3 16.7165 3 15.75V7C3 6.0335 3.7835 5.25 4.75 5.25H10.875V4.375ZM10.875 8.75V6.5625H4.75C4.50838 6.5625 4.3125 6.75838 4.3125 7V15.75C4.3125 15.9916 4.50838 16.1875 4.75 16.1875H13.5C13.7416 16.1875 13.9375 15.9916 13.9375 15.75V9.625H11.75C11.2668 9.625 10.875 9.23325 10.875 8.75ZM13.9375 7.875C14.6624 7.875 15.25 7.28737 15.25 6.5625C15.25 5.83763 14.6624 5.25 13.9375 5.25C13.2126 5.25 12.625 5.83763 12.625 6.5625C12.625 7.28737 13.2126 7.875 13.9375 7.875Z",
+    fill: color
+  }));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -19502,7 +19548,7 @@ var mobileFallbackValues = {
 };
 var MOBILE_BREAKPOINT = 768;
 
-var _excluded$m = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$o = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Title elements
@@ -19549,7 +19595,7 @@ var Title = function Title(_ref) {
     as = _ref$as === void 0 ? "h1" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$m);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React.createElement(TitleText, _extends({
     variant: variant,
     as: as,
@@ -20977,12 +21023,12 @@ var fallbackValues$8 = {
   linkColor: linkColor
 };
 
-var _excluded$n = ["variant", "themeValues", "children"];
+var _excluded$p = ["variant", "themeValues", "children"];
 var BoxWithShadow = function BoxWithShadow(_ref) {
   var variant = _ref.variant,
     themeValues = _ref.themeValues,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var shadowRegistry = {
     baseStandard: "0px 3px 7px 2px ".concat(rgba$1(BLACK, 0.1), ", 0px 1px 2px 1px ").concat(rgba$1(BLACK, 0.1), ";"),
     baseHover: "0px 1px 7px 0px ".concat(rgba$1(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba$1(BLACK, 0.2), ", 0px 7px 12px 0px ").concat(rgba$1(BLACK, 0.2), ";"),
@@ -21042,7 +21088,7 @@ var fallbackValues$a = {
   externalLinkColor: externalLinkColor
 };
 
-var _excluded$o = ["hoverColor", "activeColor", "extrastyles"];
+var _excluded$q = ["hoverColor", "activeColor", "extrastyles"];
 var ROYAL_BLUE$1 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$3 = LINK_TEXT_DECORATION;
 
@@ -21056,7 +21102,7 @@ var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var hoverColor = _ref.hoverColor,
     activeColor = _ref.activeColor,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React.createElement("a", _extends({}, props, {
     ref: ref
   }));
@@ -21131,7 +21177,7 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 });
 
-var _excluded$p = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
+var _excluded$r = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
 var ROYAL_BLUE$2 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$4 = LINK_TEXT_DECORATION;
 
@@ -21147,7 +21193,7 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
     active = _ref.active,
     color = _ref.color,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React.createElement(Link, _extends({}, props, {
     ref: ref
   }));
@@ -22830,7 +22876,7 @@ _curry2(function test(pattern, str) {
   return _cloneRegExp(pattern).test(str);
 });
 
-var _excluded$q = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
+var _excluded$s = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
     url = _ref$url === void 0 ? "/" : _ref$url,
@@ -22845,7 +22891,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     _ref$newTab = _ref.newTab,
     newTab = _ref$newTab === void 0 ? false : _ref$newTab,
     dataQa = _ref.dataQa,
-    otherProps = _objectWithoutProperties(_ref, _excluded$q);
+    otherProps = _objectWithoutProperties(_ref, _excluded$s);
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
       url = _ref2.url,
@@ -22933,7 +22979,7 @@ var ParagraphText = styled.p.withConfig({
   return extraStyles;
 });
 
-var _excluded$r = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
+var _excluded$t = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
 var Paragraph = function Paragraph(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -22947,7 +22993,7 @@ var Paragraph = function Paragraph(_ref) {
     dataQa = _ref.dataQa,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React.createElement(ParagraphText, _extends({
     weight: weight,
     color: color,
@@ -23189,7 +23235,7 @@ var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
 
-var _excluded$s = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles"];
+var _excluded$u = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
 var CheckboxContainer = styled.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -23256,7 +23302,10 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     _ref5$dataQa = _ref5.dataQa,
     dataQa = _ref5$dataQa === void 0 ? null : _ref5$dataQa,
     checkboxExtraStyles = _ref5.checkboxExtraStyles,
-    rest = _objectWithoutProperties(_ref5, _excluded$s);
+    _ref5$hasIconOverride = _ref5.hasIconOverride,
+    hasIconOverride = _ref5$hasIconOverride === void 0 ? false : _ref5$hasIconOverride,
+    Icon = _ref5.icon,
+    rest = _objectWithoutProperties(_ref5, _excluded$u);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -23314,7 +23363,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
     focusedStyles: themeValues.focusedStyles,
     checkboxExtraStyles: checkboxExtraStyles
-  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
+  }, hasIconOverride ? /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
     disabledCheckColor: themeValues.disabledCheckColor,
@@ -23612,7 +23661,7 @@ var TableRowWrapper = styled.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$t = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$v = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
     extraStyles = _ref.extraStyles,
@@ -23621,7 +23670,7 @@ var TableRow = function TableRow(_ref) {
     hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
     onClick = _ref.onClick,
     themeValues = _ref.themeValues,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React.createElement(TableRowWrapper, _extends({
     onClick: onClick,
     hoverEffect: hoverEffect,
@@ -26455,7 +26504,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$u = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$w = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Detail elements
@@ -26505,7 +26554,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -26562,6 +26611,15 @@ var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$l);
 var useOutsideClickHook = function useOutsideClickHook(handler) {
   var ref = useRef();
   useEffect$1(function () {
+    var handleOutsideClick = function handleOutsideClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        handler();
+      }
+    };
+    document.addEventListener("click", handleOutsideClick, true);
+    return function () {
+      document.removeEventListener("click", handleOutsideClick, true);
+    };
   }, [ref]);
   return ref;
 };
@@ -26752,7 +26810,9 @@ var Popover = function Popover(_ref) {
       togglePopover(popoverState);
     }
   };
-  var triggerRef = useOutsideClickHook();
+  var triggerRef = useOutsideClickHook(function () {
+    return handleTogglePopover(false);
+  });
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "position: relative; ".concat(extraStyles)
@@ -27228,7 +27288,7 @@ var fallbackValues$n = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$v = ["showErrors", "themeValues"],
+var _excluded$x = ["showErrors", "themeValues"],
   _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
@@ -27263,7 +27323,7 @@ var InputField = styled.input.withConfig({
 var FormattedInputField = styled(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$v);
+    props = _objectWithoutProperties(_ref8, _excluded$x);
   return /*#__PURE__*/React.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -27468,7 +27528,7 @@ var FormInput = function FormInput(_ref15) {
 };
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$n, "default");
 
-var _excluded$w = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$y = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -27477,7 +27537,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React.createElement(Switcher, {
@@ -27488,24 +27548,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$x = ["childGap", "bottomItem", "children"];
+var _excluded$z = ["childGap", "bottomItem", "children"];
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
     bottomItem = _ref.bottomItem,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$y = ["themeValues", "children"];
+var _excluded$A = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -27815,7 +27875,7 @@ var fallbackValues$r = {
   fontSize: fontSize$8
 };
 
-var _excluded$z = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$B = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -27834,7 +27894,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -28035,11 +28095,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("span", null, amount));
 };
 
-var _excluded$A = ["version"];
+var _excluded$C = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React.createElement(LabeledAmountComponent, rest);
 };
@@ -28184,7 +28244,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$B = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$D = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -28199,7 +28259,7 @@ var NavFooter = function NavFooter(_ref) {
     footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
     isMobile = _ref.isMobile,
     footerWidth = _ref.footerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -28230,7 +28290,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$C = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$E = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -28239,7 +28299,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -39853,20 +39913,40 @@ var fallbackValues$E = {
 };
 
 var CardText = function CardText(_ref) {
-  var padding = _ref.padding,
+  var showQuitLink = _ref.showQuitLink,
+    onQuitClick = _ref.onQuitClick,
+    titleAs = _ref.titleAs,
+    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.createElement(Box, {
     padding: padding
-  }, /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, titleText && /*#__PURE__*/React.createElement(Title$1, {
-    as: "p",
+  }, /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    overflow: true
+  }, titleText && /*#__PURE__*/React.createElement(Title$1, {
+    as: titleAs,
     variant: titleVariant,
     color: themeValues.titleColor,
     weight: themeValues.titleWeight
-  }, titleText), /*#__PURE__*/React.createElement(Paragraph$1, {
+  }, titleText), showQuitLink && /*#__PURE__*/React.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.createElement(IconQuitLarge, null))), /*#__PURE__*/React.createElement(Paragraph$1, {
+    as: textAs,
     color: themeValues.textColor
   }, text))));
 };
@@ -39907,9 +39987,17 @@ 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$1 : _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,
@@ -39966,9 +40054,13 @@ var Card = function Card(_ref) {
     width: "100%",
     extraStyles: "flex-basis: 100%;"
   }, text && /*#__PURE__*/React.createElement(CardText$1, {
+    onQuitClick: onQuitClick,
     padding: padding,
+    showQuitLink: showQuitLink,
+    titleAs: titleAs,
     titleText: titleText,
     text: text,
+    textAs: textAs,
     titleVariant: titleVariant
   }), children)))));
 };
@@ -46623,11 +46715,11 @@ var Modal$2 = function Modal(_ref) {
 };
 var ModalControlV2 = withWindowSize(Modal$2);
 
-var _excluded$D = ["version"];
+var _excluded$F = ["version"];
 var Modal$3 = function Modal(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
   return /*#__PURE__*/React.createElement(ModalControl, rest);
 };
@@ -47929,7 +48021,7 @@ var fallbackValues$P = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$E = ["amount"],
+var _excluded$G = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -48172,7 +48264,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$E);
+      rest = _objectWithoutProperties(_ref5, _excluded$G);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -48609,11 +48701,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$F = ["version"];
+var _excluded$H = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);
 };
@@ -49421,7 +49513,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$G = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
+var _excluded$I = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -49470,7 +49562,7 @@ var RadioSection = function RadioSection(_ref) {
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
     borderOverride = _ref.borderOverride,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -50017,7 +50109,7 @@ var Timeout = function Timeout(_ref) {
 };
 var Timeout$1 = withWindowSize(Timeout);
 
-var _excluded$H = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
+var _excluded$J = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
@@ -50046,7 +50138,7 @@ var ToastNotification = function ToastNotification(_ref) {
     screenReaderMessage = _ref.screenReaderMessage,
     _ref$showScreenReader = _ref.showScreenReaderMessage,
     showScreenReaderMessage = _ref$showScreenReader === void 0 ? true : _ref$showScreenReader,
-    rest = _objectWithoutProperties(_ref, _excluded$H);
+    rest = _objectWithoutProperties(_ref, _excluded$J);
   var screenReaderMessageRef = useRef();
   var LIVEREGION_TRANSITION_DELAY = 1000;
   useEffect$1(function () {
@@ -50229,7 +50321,7 @@ var PopupMenuItemContainer = styled(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$I = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$K = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -50245,7 +50337,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$I);
+    rest = _objectWithoutProperties(_ref, _excluded$K);
   return /*#__PURE__*/React.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -50428,10 +50520,7 @@ var fallbackValues$_ = {
 var StyledFilterContainer = styled(Box).withConfig({
   displayName: "MultipleSelectFilterstyled__StyledFilterContainer",
   componentId: "sc-126xgc2-0"
-})(["position:relative;box-sizing:border-box;padding:0;", ""], function (_ref) {
-  var extraStyles = _ref.extraStyles;
-  return extraStyles;
-});
+})(["position:relative;overflow:visible;box-sizing:border-box;padding:0;"]);
 var FilterContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(StyledFilterContainer, _extends({
     ref: ref
@@ -50440,7 +50529,7 @@ var FilterContainer = /*#__PURE__*/forwardRef(function (props, ref) {
 var StyledFilterDropdown = styled(Box).withConfig({
   displayName: "MultipleSelectFilterstyled__StyledFilterDropdown",
   componentId: "sc-126xgc2-1"
-})(["position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background-color:white;z-index:1000;border-radius:0.25rem;box-shadow:0px 1px 0px 0px rgba(41,42,51,0.1),0px 2px 4px 0px rgba(41,42,51,0.2),0px 1px 2px 0px rgba(41,42,51,0.1);padding:0;max-width:18.625rem;"]);
+})(["position:absolute;top:calc(100% + 0.5rem);left:0;width:18.4rem;background-color:white;z-index:1000;border-radius:0.25rem;box-shadow:0px 1px 0px 0px rgba(41,42,51,0.1),0px 2px 4px 0px rgba(41,42,51,0.2),0px 1px 2px 0px rgba(41,42,51,0.1);padding:0;max-width:18.625rem;"]);
 var FilterDropdownContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(StyledFilterDropdown, _extends({
     ref: ref
@@ -50449,11 +50538,11 @@ var FilterDropdownContainer = /*#__PURE__*/forwardRef(function (props, ref) {
 var FilterButton = styled(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;
+})(["min-width:auto;min-height:2.3125rem;margin:0;padding:0.5rem;border-radius:0.25rem;box-shadow:0px 1px 2px 0px rgba(41,42,51,0.1);", " ", ""], function (_ref) {
+  var textColor = _ref.textColor;
   return "\n    color: ".concat(textColor, ";\n  ");
-}, function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor;
+}, function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
   return "\n    background-color: ".concat(backgroundColor, ";\n    :hover,\n    :active,\n    :focus {\n      background-color: ").concat(backgroundColor, ";\n    }\n  ");
 });
 var StyledFilterButton = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -50465,7 +50554,8 @@ var StyledFilterButton = /*#__PURE__*/forwardRef(function (props, ref) {
 var ActionLinkButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var action = _ref.action,
     text = _ref.text,
-    dataQa = _ref.dataQa;
+    dataQa = _ref.dataQa,
+    ariaLabel = _ref.ariaLabel;
   return /*#__PURE__*/React.createElement(ButtonWithAction, {
     ref: ref,
     action: action,
@@ -50473,11 +50563,12 @@ var ActionLinkButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     extraStyles: "\n        padding: 0.2rem; \n        margin: 0.5rem; \n        min-height: auto; \n        min-width: auto;\n      ",
     textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, ";"),
     text: text,
-    dataQa: dataQa
+    dataQa: dataQa,
+    "aria-label": ariaLabel
   });
 });
 
-var _excluded$J = ["width", "height", "color"];
+var _excluded$L = ["width", "height", "color"];
 var DropdownIconV2 = function DropdownIconV2(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -50485,7 +50576,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
     height = _ref$height === void 0 ? "19" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: width,
     height: height,
@@ -50539,7 +50630,10 @@ var FilterButton$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     Icon = _ref.icon,
     truncateBtnTextWidth = _ref.truncateBtnTextWidth,
     filterLabel = _ref.filterLabel,
-    selectedOptions = _ref.selectedOptions;
+    selectedOptions = _ref.selectedOptions,
+    extraStyles = _ref.extraStyles;
+  var btnTextFilterDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? "".concat(filterLabel ? "".concat(filterLabel, ": ") : "").concat(selectedOptions[0].name) : "".concat(filterLabel ? filterLabel : "");
+  var btnTextItemsDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? ", +".concat((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - 1, " More") : "";
   return /*#__PURE__*/React.createElement(StyledFilterButton, {
     ref: ref,
     variant: "tertiary",
@@ -50549,6 +50643,8 @@ var FilterButton$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-controls": filterDropdownID,
     backgroundColor: backgroundColor,
     dataQa: "".concat(name, "-filter-button"),
+    extraStyles: extraStyles,
+    "aria-label": "".concat(filterLabel, " Filter: ").concat(btnTextFilterDescription, " ").concat(btnTextItemsDescription),
     contentOverride: true
   }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React.createElement(Center, {
     as: "span",
@@ -50571,10 +50667,10 @@ var FilterButton$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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.createElement(Text$1, {
+  }, btnTextFilterDescription), /*#__PURE__*/React.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.createElement(DropdownIconV2, {
+  }, btnTextItemsDescription)), /*#__PURE__*/React.createElement(DropdownIconV2, {
     color: contentColor
   })));
 });
@@ -50582,7 +50678,9 @@ var FilterButton$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var FilterDropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     ariaOwns = _ref.ariaOwns,
+    ariaControls = _ref.ariaControls,
     opened = _ref.opened,
+    extraStyles = _ref.extraStyles,
     children = _ref.children;
   return /*#__PURE__*/React.createElement(React.Fragment, null, opened && /*#__PURE__*/React.createElement(FilterDropdownContainer, {
     ref: ref,
@@ -50590,7 +50688,9 @@ var FilterDropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     role: "combobox",
     "aria-expanded": opened,
     "aria-haspopup": "listbox",
-    "aria-owns": ariaOwns
+    "aria-owns": ariaOwns,
+    "aria-controls": ariaControls,
+    extraStyles: extraStyles
   }, children));
 });
 
@@ -50611,10 +50711,54 @@ var SearchBox = function SearchBox(_ref) {
     fieldActions: actions.fields.searchTerm,
     placeholder: placeholder,
     disabled: disabled,
-    extraStyles: "\n              height: 2.875rem;\n              border: 0; \n              border-radius: 0;\n              padding: 0.45rem;\n              font-size: 0.875rem;\n              border-bottom: 1px solid ".concat(GHOST_GREY, ";\n           ")
+    extraStyles: "\n            height: 2.875rem;\n            border: 0; \n            border-radius: 0;\n            padding: 0.45rem;\n            font-size: 0.875rem;\n            border-bottom: 1px solid ".concat(GHOST_GREY, ";\n            :focus {\n              outline-offset: -3px;\n            }\n          ")
   }));
 };
 
+var _excluded$M = ["width", "height", "color"];
+var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "18" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "18" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#FEFEFE" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$M);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.7503 5.35354C13.555 5.15828 13.2385 5.15828 13.0432 5.35354L7.52373 10.873L5.52808 8.87735C5.33282 8.68209 5.01624 8.68209 4.82097 8.87735L4.35348 9.34484C4.15822 9.54011 4.15822 9.85669 4.35348 10.052L6.70268 12.4012L7.17018 12.8687C7.36544 13.0639 7.68203 13.0639 7.87729 12.8687L8.34478 12.4012L14.2178 6.52814C14.4131 6.33288 14.4131 6.0163 14.2178 5.82104L13.7503 5.35354Z",
+    fill: "#FEFEFE"
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "mask0_3361_1486",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "4",
+    y: "5",
+    width: "11",
+    height: "9"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.7503 5.35354C13.555 5.15828 13.2385 5.15828 13.0432 5.35354L7.52373 10.873L5.52808 8.87735C5.33282 8.68209 5.01624 8.68209 4.82097 8.87735L4.35348 9.34484C4.15822 9.54011 4.15822 9.85669 4.35348 10.052L6.70268 12.4012L7.17018 12.8687C7.36544 13.0639 7.68203 13.0639 7.87729 12.8687L8.34478 12.4012L14.2178 6.52814C14.4131 6.33288 14.4131 6.0163 14.2178 5.82104L13.7503 5.35354Z",
+    fill: "white"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0_3361_1486)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: width,
+    height: height,
+    fill: color
+  })));
+};
+
 var FilterableListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var index = _ref.index,
     option = _ref.option,
@@ -50623,28 +50767,31 @@ var FilterableListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled = _ref.disabled,
     tabIndex = _ref.tabIndex,
     name = _ref.name,
+    showDivider = _ref.showDivider,
+    extraStyles = _ref.extraStyles,
     themeValues = _ref.themeValues;
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
+  var dividerStyles = "\n    ::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      display: block;\n      height: 1px;\n      background-color: ".concat(GHOST_GREY, ";\n      bottom: -0.5rem;\n      left: 0;\n    }");
+  return /*#__PURE__*/React.createElement(Checkbox$1, {
     key: index,
-    extraStyles: "\n        :hover,\n        :active,\n        :focus {\n        background-color: ".concat(themeValues.primaryColor, ";\n        }\n    ")
-  }, /*#__PURE__*/React.createElement(Checkbox$1, {
     ref: ref,
     title: option.name,
     name: option.name,
+    role: "option",
+    "aria-selected": checked,
+    tabIndex: tabIndex,
+    dataQa: "".concat(name, "-option-").concat(index),
     checked: checked,
     onChange: function onChange() {
       return selectOption(option);
     },
     textExtraStyles: "font-size: 0.875rem; margin: 0;",
     disabled: disabled,
-    extraStyles: "\n            padding: 0.075rem 0.325rem; \n            margin: 0;\n            :hover,\n            :active,\n            :focus {\n                background-color: ".concat(themeValues.primaryColor, ";\n            }\n        "),
-    checkboxMargin: "0.3rem",
-    role: "option",
-    checkboxExtraStyles: "\n            width: 1.375rem; \n            height: 1.375rem;\n            ".concat(checked && !disabled ? "background: " + themeValues.secondaryColor + ";" : "", "\n         "),
-    tabIndex: tabIndex,
-    dataQa: "".concat(name, "-option-").concat(index)
-  }));
+    extraStyles: "\n          padding: 0.375rem 0.625rem; \n          margin: 0;\n          :hover,\n          :active,\n          :focus {\n            background-color: ".concat(themeValues.primaryColor, ";\n            outline-offset: -3px;\n          }\n          ").concat(showDivider && dividerStyles, "\n          ").concat(extraStyles, "\n        "),
+    checkboxMargin: showDivider ? "0 0 1rem" : "0",
+    hasIconOverride: true,
+    icon: CheckboxCheckmarkIcon,
+    checkboxExtraStyles: "\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          height: 20px;\n          width: 20px;\n          ".concat(checked && !disabled ? "background: " + themeValues.secondaryColor + ";" : "", "\n       ")
+  });
 });
 
 var filterItemsList = function filterItemsList(list, searchTerm) {
@@ -50809,14 +50956,12 @@ var FilterableList = function FilterableList(_ref) {
     handleKeyDown = _useKeyboardNavigatio.handleKeyDown;
   return /*#__PURE__*/React.createElement(Box, {
     id: id,
-    role: "listbox",
     padding: "0",
-    extraStyles: "\n        overflow-y: auto;\n        max-height: 250px;\n        display: flex;\n        flex-flow: column;\n      ",
-    onKeyDown: handleKeyDown
-  }, (sortedAppliedOptions === null || sortedAppliedOptions === void 0 ? void 0 : sortedAppliedOptions.length) > 0 && /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    extraStyles: sortedOptions.length > 0 && "border-bottom: 1px solid ".concat(GHOST_GREY)
-  }, sortedAppliedOptions.map(function (option, index) {
+    role: "listbox",
+    "aria-label": "Filter options container",
+    onKeyDown: handleKeyDown,
+    extraStyles: "\n        overflow-y: auto;\n        max-height: 250px;\n        display: flex;\n        flex-flow: column;\n        padding-bottom: 0.5rem;\n    "
+  }, (sortedAppliedOptions === null || sortedAppliedOptions === void 0 ? void 0 : sortedAppliedOptions.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, sortedAppliedOptions.map(function (option, index) {
     var checked = isChecked(option, selectedOptions);
     var tabIndex = index === focusedIndex || index === 0 && focusedIndex === -1 ? "0" : "-1";
     return /*#__PURE__*/React.createElement(FilterableListItem, {
@@ -50830,9 +50975,10 @@ var FilterableList = function FilterableList(_ref) {
       selectOption: handleSelectOption,
       tabIndex: tabIndex,
       name: name,
-      themeValues: themeValues
+      themeValues: themeValues,
+      showDivider: sortedOptions.length > 0 && index === sortedAppliedOptions.length - 1
     });
-  })), sortedOptions.map(function (option, index) {
+  })), /*#__PURE__*/React.createElement(React.Fragment, null, sortedOptions.map(function (option, index) {
     var checked = isChecked(option, selectedOptions);
     var isDisabled = isMaxSelectionReached(maxSelections, selectedOptions) && !checked;
     var indexOffset = sortedAppliedOptions !== null && sortedAppliedOptions !== void 0 && sortedAppliedOptions.length ? sortedAppliedOptions === null || sortedAppliedOptions === void 0 ? void 0 : sortedAppliedOptions.length : 0;
@@ -50852,7 +50998,7 @@ var FilterableList = function FilterableList(_ref) {
       name: name,
       themeValues: themeValues
     });
-  }));
+  })));
 };
 var FilterableList$1 = /*#__PURE__*/React.memo(FilterableList);
 
@@ -50860,7 +51006,9 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
   var actions = _ref.actions,
     autocompleteValue = _ref.autocompleteValue,
     btnContentOverride = _ref.btnContentOverride,
+    btnExtraStyles = _ref.btnExtraStyles,
     disabled = _ref.disabled,
+    dropdownExtraStyles = _ref.dropdownExtraStyles,
     extraStyles = _ref.extraStyles,
     fields = _ref.fields,
     filterLabel = _ref.filterLabel,
@@ -50879,8 +51027,6 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
     _ref$searchable = _ref.searchable,
     searchable = _ref$searchable === void 0 ? true : _ref$searchable,
-    selectedOptions = _ref.selectedOptions,
-    setSelectedOptions = _ref.setSelectedOptions,
     themeValues = _ref.themeValues,
     _ref$truncateBtnTextW = _ref.truncateBtnTextWidth,
     truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW;
@@ -50890,15 +51036,29 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     setOpened = _useState2[1];
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    appliedOptions = _useState4[0],
-    setAppliedOptions = _useState4[1];
-  var containerRef = useRef(null);
+    selectedOptions = _useState4[0],
+    setSelectedOptions = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    appliedOptions = _useState6[0],
+    setAppliedOptions = _useState6[1];
+  var openedRef = useRef(opened);
+  var handleOnClose = function handleOnClose() {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
+  };
+  var containerRef = useOutsideClickHook(function () {
+    return handleOnClose();
+  });
   var dropdownRef = useRef(null);
   var filterButtonRef = useRef(null);
   var applyFilterButtonRef = useRef(null);
   var filterDropdownID = "".concat(name, "-filter-dropdown");
-  var checkboxListID = "".concat(name, "-checkbox-list");
+  var listGroupID = "".concat(name, "-list-group");
   useEffect$1(function () {
+    openedRef.current = opened;
     if (!opened) {
       onApply(selectedOptions);
       setAppliedOptions(selectedOptions);
@@ -50915,22 +51075,11 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
         or tabbing backward past the filter button.
       */
       if (event.key === "Escape" || event.key === "Tab" && !event.shiftKey && applyFilterButtonRef.current && applyFilterButtonRef.current.contains(event.target) || event.key === "Tab" && event.shiftKey && filterButtonRef.current && filterButtonRef.current.contains(event.target)) {
-        setOpened(false);
-        actions.fields.searchTerm.set("");
-        onApply(selectedOptions);
-      }
-    };
-    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);
+        handleOnClose();
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", handleKeyDown);
     return function () {
-      document.addEventListener("mousedown", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
@@ -50946,19 +51095,22 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     },
     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",
+    contentColor: !opened && selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? WHITE : CHARADE_GREY,
     name: name,
     filterDropdownID: filterDropdownID,
     hasIcon: hasIcon,
     icon: Icon,
     truncateBtnTextWidth: truncateBtnTextWidth,
     filterLabel: filterLabel,
-    selectedOptions: selectedOptions
+    selectedOptions: selectedOptions,
+    extraStyles: btnExtraStyles
   }), /*#__PURE__*/React.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,
-    ariaOwns: checkboxListID,
-    opened: opened
+    ariaOwns: listGroupID,
+    ariaControls: listGroupID,
+    opened: opened,
+    extraStyles: dropdownExtraStyles
   }, /*#__PURE__*/React.createElement(SearchBox, {
     showSearchBox: searchable && (options === null || options === void 0 ? void 0 : options.length) > 8,
     autocompleteValue: autocompleteValue,
@@ -50967,7 +51119,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     placeholder: placeholder,
     disabled: disabled
   }), /*#__PURE__*/React.createElement(FilterableList$1, {
-    id: checkboxListID,
+    id: listGroupID,
     options: options,
     appliedOptions: appliedOptions,
     themeValues: themeValues,
@@ -50981,22 +51133,21 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     extraStyles: "\n            max-height: 100px; \n            display: flex; \n            flex-flow: row; \n            justify-content: space-between;\n            border-top: 1px solid ".concat(GHOST_GREY, ";\n          ")
   }, /*#__PURE__*/React.createElement(ActionLinkButton, {
     action: function action() {
-      setOpened(false);
       setSelectedOptions([]);
-      actions.fields.searchTerm.set("");
+      handleOnClose();
       onClear();
     },
     text: "Clear",
-    dataQa: "".concat(name, "-clear-filters")
+    dataQa: "".concat(name, "-clear-filters"),
+    ariaLabel: "Clear all filters"
   }), /*#__PURE__*/React.createElement(ActionLinkButton, {
     ref: applyFilterButtonRef,
     action: function action() {
-      setOpened(false);
-      actions.fields.searchTerm.set("");
-      onApply(selectedOptions);
+      return handleOnClose();
     },
     text: "Apply",
-    dataQa: "".concat(name, "-apply-filters")
+    dataQa: "".concat(name, "-apply-filters"),
+    ariaLabel: "Apply all filters"
   }))));
 };
 var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$_);
@@ -51294,5 +51445,5 @@ var index$6 = /*#__PURE__*/Object.freeze({
   useToastNotification: useToastNotification
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentStatusIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PersonIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map