@thecb/components 11.1.11-beta.1 → 11.1.12-beta.0

package/dist/index.cjs.js

@@ -27094,7 +27094,7 @@ var fallbackValues$n = {
 };
 
 var _excluded$y = ["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"];
+  _excluded2 = ["type", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -27157,6 +27157,8 @@ var FormattedInputField = styled__default(function (_ref8) {
 var FormInput = function FormInput(_ref15) {
   var _ref15$type = _ref15.type,
     type = _ref15$type === void 0 ? "text" : _ref15$type,
+    _ref15$labelDisplayOv = _ref15.labelDisplayOverride,
+    labelDisplayOverride = _ref15$labelDisplayOv === void 0 ? null : _ref15$labelDisplayOv,
     _ref15$labelTextWhenN = _ref15.labelTextWhenNoError,
     labelTextWhenNoError = _ref15$labelTextWhenN === void 0 ? "" : _ref15$labelTextWhenN,
     errorMessages = _ref15.errorMessages,
@@ -27220,7 +27222,7 @@ var FormInput = function FormInput(_ref15) {
   }, helperModal ? /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
+  }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
     variant: labelTextVariant,
@@ -27233,7 +27235,7 @@ var FormInput = function FormInput(_ref15) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
+  }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
     variant: labelTextVariant,
@@ -46850,8 +46852,8 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
     onClick = _ref.onClick,
     onKeyPress = _ref.onKeyPress;
   var generateMethodNeededText = function generateMethodNeededText(planText, allowedPaymentInstruments) {
-    var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
-    var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
+    var allowsCard = allowedPaymentInstruments === null || allowedPaymentInstruments === void 0 ? void 0 : allowedPaymentInstruments.includes(CC_METHOD);
+    var allowsACH = allowedPaymentInstruments === null || allowedPaymentInstruments === void 0 ? void 0 : allowedPaymentInstruments.includes(ACH_METHOD);
     var methodRequired = allowsCard && !allowsACH ? "debit or credit card payment method" : !allowsCard && allowsACH ? "checking account payment method" : "payment method";
     return "To set up ".concat(planText, " you must have a saved ").concat(methodRequired, " and address. Do you want to save these now?");
   };
@@ -47359,7 +47361,8 @@ var fallbackValues$N = {
 var Obligation = function Obligation(_ref) {
   var _obligations$, _firstObligation$cust;
   var config = _ref.config,
-    obligations = _ref.obligations,
+    _ref$obligations = _ref.obligations,
+    obligations = _ref$obligations === void 0 ? [] : _ref$obligations,
     actions = _ref.actions,
     autoPayEnabled = _ref.autoPayEnabled,
     autoPayAvailable = _ref.autoPayAvailable,
@@ -47459,6 +47462,7 @@ var Obligation = function Obligation(_ref) {
     isLoading: true
   }))), !isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
+    obligationAssocID: obligationAssocID,
     autoPayEnabled: autoPayEnabled,
     autoPayAvailable: autoPayAvailable,
     handleAutopayAction: handleAutopayAction,
@@ -47479,6 +47483,7 @@ var Obligation = function Obligation(_ref) {
     isContentLoading: true
   }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
+    obligationAssocID: obligationAssocID,
     autoPayEnabled: autoPayEnabled,
     autoPayAvailable: autoPayAvailable,
     handleAutopayAction: handleAutopayAction,
@@ -47682,15 +47687,40 @@ var Obligation = function Obligation(_ref) {
 };
 var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$N);
 
+var weightTitle$1 = {
+  "default": "600",
+  small: "400"
+};
+var detailVariant$1 = {
+  "default": "large",
+  small: "small"
+};
+var fallbackValues$O = {
+  weightTitle: weightTitle$1,
+  detailVariant: detailVariant$1
+};
+
 var PartialAmountField = function PartialAmountField(_ref) {
   var lineItem = _ref.lineItem,
     field = _ref.field,
     showErrors = _ref.showErrors,
     errorMessages = _ref.errorMessages,
     moneyFormat = _ref.moneyFormat,
-    fieldActions = _ref.fieldActions;
+    fieldActions = _ref.fieldActions,
+    themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: lineItem.description,
+    labelDisplayOverride: /*#__PURE__*/React__default.createElement(Stack, {
+      childGap: "0px"
+    }, /*#__PURE__*/React__default.createElement(Detail$1, {
+      as: "h3",
+      variant: themeValues.detailVariant,
+      weight: themeValues.weightTitle
+    }, /*#__PURE__*/React__default.createElement("span", null, lineItem.description)), /*#__PURE__*/React__default.createElement(Detail$1, {
+      as: "p",
+      variant: themeValues.detailVariant,
+      weight: "400"
+    }, lineItem.subDescription)),
+    labelTextWhenNoError: "".concat(lineItem.description, " | ").concat(lineItem.subDescription),
     key: lineItem.id,
     field: field,
     fieldActions: fieldActions,
@@ -47713,7 +47743,7 @@ var PartialAmountField = function PartialAmountField(_ref) {
 function arePropsEqual(prevProps, nextProps) {
   return equals(prevProps.errorMessages, nextProps.errorMessages) && equals(prevProps.field, nextProps.field) && equals(prevProps.showErrors, nextProps.showErrors) && equals(prevProps.moneyFormat, nextProps.moneyFormat) && equals(prevProps.lineItem, nextProps.lineItem);
 }
-var PartialAmountField$1 = /*#__PURE__*/React__default.memo(PartialAmountField, arePropsEqual);
+var PartialAmountField$1 = /*#__PURE__*/React__default.memo(themeComponent(PartialAmountField, "PartialAmountField", fallbackValues$O, "default"), arePropsEqual);
 
 var PartialAmountForm = function PartialAmountForm(_ref) {
   var _ref$variant = _ref.variant,
@@ -47818,7 +47848,7 @@ var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$O = {
+var fallbackValues$P = {
   activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
@@ -48012,7 +48042,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$O);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$P);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -48113,7 +48143,7 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$P = {
+var fallbackValues$Q = {
   backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -48482,7 +48512,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$P, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$Q, "default");
 
 var linkColor$4 = {
   "default": "#3176AA"
@@ -48502,7 +48532,7 @@ var modalLinkHoverFocus = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$Q = {
+var fallbackValues$R = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -48566,7 +48596,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$Q, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$R, "default");
 
 var backgroundColor$d = {
   "default": "#ffffff",
@@ -48601,7 +48631,7 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$R = {
+var fallbackValues$S = {
   backgroundColor: backgroundColor$d,
   linkColor: linkColor$5,
   border: border$3,
@@ -48673,7 +48703,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     className: "modal-trigger"
   }, link));
 };
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$R, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$S, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -49445,7 +49475,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GHOST_GREY);
 var focusStyles = "outline: none;";
-var fallbackValues$S = {
+var fallbackValues$T = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49748,7 +49778,7 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$S);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$T);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -49868,13 +49898,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var GRECIAN_GREY$1 = GRECIAN_GREY;
 var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$T = {
+var fallbackValues$U = {
   bannerBackgroundColor: bannerBackgroundColor
 };
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$T, "ResetConfirmationForm");
+  var themeValues = createThemeValues(themeContext, fallbackValues$U, "ResetConfirmationForm");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49989,13 +50019,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var GRECIAN_GREY$2 = GRECIAN_GREY;
 var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$U = {
+var fallbackValues$V = {
   bannerBackgroundColor: bannerBackgroundColor$1
 };
 
 var ResetPasswordSuccess = function ResetPasswordSuccess() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$U, "ResetPasswordSuccess");
+  var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetPasswordSuccess");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -50044,7 +50074,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$V = {
+var fallbackValues$W = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -50112,12 +50142,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$V);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$W);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$W = {
+var fallbackValues$X = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -50172,7 +50202,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$W);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$X);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -50293,7 +50323,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$X = {
+var fallbackValues$Y = {
   fontWeight: fontWeight$8,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -50338,7 +50368,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$X));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Y));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -50398,7 +50428,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$Y = {
+var fallbackValues$Z = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50465,13 +50495,13 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$Y);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$Z);
 
 var hoverColor$5 = "#116285";
 var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$Z = {
+var fallbackValues$_ = {
   hoverColor: hoverColor$5,
   activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
@@ -50607,13 +50637,13 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Z);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$_);
 
 var primaryColor$1 = WHITE;
 var primaryHoverColor = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
 var secondaryHoverColor = "#115D7E";
-var fallbackValues$_ = {
+var fallbackValues$$ = {
   primaryColor: primaryColor$1,
   primaryHoverColor: primaryHoverColor,
   secondaryColor: secondaryColor,
@@ -50740,7 +50770,8 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     truncateBtnTextWidth = _ref.truncateBtnTextWidth,
     filterLabel = _ref.filterLabel,
     selectedOptions = _ref.selectedOptions,
-    extraStyles = _ref.extraStyles;
+    extraStyles = _ref.extraStyles,
+    dataAppliedOptions = _ref.dataAppliedOptions;
   var btnTextFilterDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? "".concat(filterLabel ? "".concat(filterLabel, ": ") : "").concat(selectedOptions[0].name) : "".concat(filterLabel ? filterLabel : "");
   var btnTextItemsDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? ", +".concat((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - 1, " More") : "";
   return /*#__PURE__*/React__default.createElement(StyledFilterButton, {
@@ -50758,6 +50789,7 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     dataQa: "".concat(name, "-filter-button"),
     extraStyles: extraStyles,
     "aria-label": "".concat(filterLabel, " Filter: ").concat(btnTextFilterDescription, " ").concat(btnTextItemsDescription),
+    "data-applied-options": dataAppliedOptions,
     contentOverride: true
   }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React__default.createElement(Center, {
     as: "span",
@@ -50942,6 +50974,19 @@ var selectOption = function selectOption(option, selectedOptions, setSelectedOpt
     setSelectedOptions(moreOptions);
   }
 };
+var mergeOptions = function mergeOptions(selectedOptions, activeOptions) {
+  if (!activeOptions.length) return selectedOptions;
+  if (!selectedOptions.length) return activeOptions;
+  var mergedOptions = _toConsumableArray(selectedOptions);
+  activeOptions.forEach(function (activeOption) {
+    if (!mergedOptions.some(function (option) {
+      return option.name === activeOption.name;
+    })) {
+      mergedOptions.push(activeOption);
+    }
+  });
+  return mergedOptions;
+};
 
 var useKeyboardNavigation = function useKeyboardNavigation(_ref) {
   var options = _ref.options,
@@ -51142,41 +51187,75 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     searchable = _ref$searchable === void 0 ? true : _ref$searchable,
     themeValues = _ref.themeValues,
     _ref$truncateBtnTextW = _ref.truncateBtnTextWidth,
-    truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW;
+    truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW,
+    activeAppliedOptions = _ref.activeAppliedOptions;
+  // State to manage whether the dropdown is open or closed
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     opened = _useState2[0],
     setOpened = _useState2[1];
+
+  // State to manage the currently selected options
   var _useState3 = React.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     selectedOptions = _useState4[0],
     setSelectedOptions = _useState4[1];
-  var _useState5 = React.useState([]),
+
+  // State to manage the applied options, initialized with activeAppliedOptions or an empty array
+  var _useState5 = React.useState(activeAppliedOptions || []),
     _useState6 = _slicedToArray(_useState5, 2),
     appliedOptions = _useState6[0],
     setAppliedOptions = _useState6[1];
+
+  // State to track whether the user has interacted with the component
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hasInteracted = _useState8[0],
+    setHasInteracted = _useState8[1];
+
+  // Reference to keep track of the opened state across renders without causing re-renders
   var openedRef = React.useRef(opened);
-  var handleOnClose = function handleOnClose() {
-    if (openedRef.current) {
-      setOpened(false);
-      actions.fields.searchTerm.set("");
-    }
-  };
+
+  // Hook to detect clicks outside the component and close the dropdown
   var containerRef = useOutsideClickHook(function () {
     return handleOnClose();
   });
+
+  // References to various elements within the component
   var dropdownRef = React.useRef(null);
   var filterButtonRef = React.useRef(null);
   var applyFilterButtonRef = React.useRef(null);
+
+  // IDs for accessibility and identification purposes
   var filterDropdownID = "".concat(name, "-filter-dropdown");
   var listGroupID = "".concat(name, "-list-group");
+  var handleOnClose = function handleOnClose() {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
+  };
   React.useEffect(function () {
     openedRef.current = opened;
     if (!opened) {
-      onApply(selectedOptions);
-      setAppliedOptions(selectedOptions);
+      if (hasInteracted) {
+        onApply(selectedOptions);
+        setAppliedOptions(selectedOptions);
+      }
+    } else {
+      setHasInteracted(true);
     }
   }, [opened]);
+  React.useEffect(function () {
+    // Update the applied options state with the current active applied options,
+    // or an empty array if activeAppliedOptions is undefined or null.
+    // This ensures that the current applied options are in sync with the parent component.
+    setAppliedOptions(activeAppliedOptions || []);
+
+    // Merge the selected options with the active applied options.
+    var mergedSelections = mergeOptions(selectedOptions, activeAppliedOptions);
+    setSelectedOptions(mergedSelections);
+  }, [activeAppliedOptions]);
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === "Escape") {
@@ -51218,7 +51297,8 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     truncateBtnTextWidth: truncateBtnTextWidth,
     filterLabel: filterLabel,
     selectedOptions: selectedOptions,
-    extraStyles: btnExtraStyles
+    extraStyles: btnExtraStyles,
+    dataAppliedOptions: appliedOptions === null || appliedOptions === void 0 ? void 0 : appliedOptions.length
   }), /*#__PURE__*/React__default.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,
@@ -51265,10 +51345,10 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     ariaLabel: "Apply all filters"
   }))));
 };
-var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$_);
+var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$$);
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$$ = {
+var fallbackValues$10 = {
   pageBackground: pageBackground
 };
 
@@ -51316,7 +51396,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$$));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$10));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51359,7 +51439,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$$));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$10));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51405,7 +51485,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$10));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51458,7 +51538,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$$));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$10));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -51528,7 +51608,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$10));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};