@thecb/components 10.11.0-beta.0 → 10.11.0

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) {
@@ -15225,6 +15227,42 @@ var StatusUnknownIcon = function StatusUnknownIcon() {
   }))));
 };
 
+var CaretArrowDown = function CaretArrowDown(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "10",
+    height: "7",
+    viewBox: "0 0 10 7",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.01563 1.11612C8.82037 0.920857 8.50379 0.920857 8.30853 1.11612L4.94977 4.47488L1.59101 1.11612C1.39575 0.920857 1.07917 0.920856 0.883904 1.11612L0.353574 1.64645C0.158312 1.84171 0.158312 2.15829 0.353574 2.35356L4.06588 6.06587L4.59621 6.5962C4.79148 6.79146 5.10806 6.79146 5.30332 6.5962L5.83365 6.06587L9.54596 2.35356C9.74122 2.15829 9.74122 1.84171 9.54596 1.64645L9.01563 1.11612Z",
+    fill: color
+  }));
+};
+var CaretArrowDown$1 = themeComponent(CaretArrowDown, "Icons", fallbackValues$2);
+
+var CaretArrowUp = function CaretArrowUp(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "10",
+    height: "7",
+    viewBox: "0 0 10 7",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.883904 5.88388C1.07917 6.07914 1.39575 6.07914 1.59101 5.88388L4.94977 2.52512L8.30853 5.88388C8.50379 6.07914 8.82037 6.07914 9.01563 5.88388L9.54596 5.35355C9.74122 5.15829 9.74122 4.84171 9.54596 4.64644L5.83365 0.934134L5.30332 0.403804C5.10806 0.208542 4.79148 0.208542 4.59621 0.403804L4.06588 0.934134L0.353574 4.64644C0.158312 4.84171 0.158312 5.15829 0.353574 5.35355L0.883904 5.88388Z",
+    fill: color
+  }));
+};
+var CaretArrowUp$1 = themeComponent(CaretArrowUp, "Icons", fallbackValues$2);
+
+// This differs from CaretArrowUp and CaretArrowDown in that it completes a triangular shape. It is used in the header on Navigate.
+
 var CarrotIcon = function CarrotIcon(_ref) {
   var themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -23205,7 +23243,7 @@ var StyledCheckbox = styled__default.span.withConfig({
   var checkboxExtraStyles = _ref4.checkboxExtraStyles;
   return styled.css(["", ""], checkboxExtraStyles);
 });
-var Checkbox = function Checkbox(_ref5) {
+var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
   var title = _ref5.title,
     name = _ref5.name,
     checked = _ref5.checked,
@@ -23240,6 +23278,7 @@ var Checkbox = function Checkbox(_ref5) {
   var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
   var ariaLabel = ariaLabelledById ? undefined : name;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
+    ref: ref,
     padding: "0",
     tabIndex: "0",
     onFocus: function onFocus() {
@@ -23297,7 +23336,7 @@ var Checkbox = function Checkbox(_ref5) {
     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 = {
@@ -23493,6 +23532,181 @@ var CheckboxList = function CheckboxList(_ref2) {
 };
 var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$e, "default");
 
+var inactiveColor = MANATEE_GREY;
+var activeColor$4 = CHARADE_GREY;
+var fallbackValues$f = {
+  inactiveColor: inactiveColor,
+  activeColor: activeColor$4
+};
+
+var Table_styled = styled__default.table.withConfig({
+  displayName: "Tablestyled",
+  componentId: "sc-mveye7-0"
+})(["width:100%;table-layout:auto;border-collapse:collapse;", ""], function (_ref) {
+  var extraStyles = _ref.extraStyles;
+  return extraStyles;
+});
+
+var TableBody_styled = styled__default.tbody.withConfig({
+  displayName: "TableBodystyled",
+  componentId: "sc-wk5osr-0"
+})(["", ""], function (_ref) {
+  var extraStyles = _ref.extraStyles;
+  return extraStyles;
+});
+
+var TableCell_styled = styled__default.td.withConfig({
+  displayName: "TableCellstyled",
+  componentId: "sc-iqndn8-0"
+})(["padding:", ";font-size:", " white-space:nowrap;max-width:", ";overflow:hidden;text-overflow:ellipsis;&:last-child{text-align:right;}", ";"], function (_ref) {
+  var _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "24px" : _ref$padding;
+  return padding;
+}, function (_ref2) {
+  var _ref2$fontSize = _ref2.fontSize,
+    fontSize = _ref2$fontSize === void 0 ? "0.875rem" : _ref2$fontSize;
+  return fontSize;
+}, function (_ref3) {
+  var _ref3$maxWidth = _ref3.maxWidth,
+    maxWidth = _ref3$maxWidth === void 0 ? "250px" : _ref3$maxWidth;
+  return maxWidth;
+}, function (_ref4) {
+  var extraStyles = _ref4.extraStyles;
+  return extraStyles;
+});
+
+var backgroundColor$3 = ALABASTER_WHITE;
+var borderColor = GREY_CHATEAU;
+var fallbackValues$g = {
+  backgroundColor: backgroundColor$3,
+  borderColor: borderColor
+};
+
+var StyledTableHead = styled__default.thead.withConfig({
+  displayName: "TableHeadstyled",
+  componentId: "sc-j8e6c1-0"
+})(["background-color:", ";border-bottom:", ";font-size:", ";"], function (_ref) {
+  var backgroundColor = _ref.backgroundColor;
+  return backgroundColor;
+}, function (_ref2) {
+  var borderColor = _ref2.borderColor;
+  return "1px solid ".concat(borderColor);
+}, function (_ref3) {
+  var _ref3$fontSize = _ref3.fontSize,
+    fontSize = _ref3$fontSize === void 0 ? "0.875rem" : _ref3$fontSize;
+  return fontSize;
+});
+
+var borderColor$1 = GREY_CHATEAU;
+var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
+var fallbackValues$h = {
+  borderColor: borderColor$1,
+  hoverBackgroundColor: hoverBackgroundColor$1
+};
+
+var TableRowWrapper = styled__default.tr.withConfig({
+  displayName: "TableRowstyled",
+  componentId: "sc-1tc0sav-0"
+})(["&:not(:last-child){border-bottom:", ";}", " ", ""], function (_ref) {
+  var borderColor = _ref.borderColor;
+  return "1px solid ".concat(borderColor);
+}, function (_ref2) {
+  var hoverCursor = _ref2.hoverCursor,
+    hoverEffect = _ref2.hoverEffect,
+    hoverBackgroundColor = _ref2.hoverBackgroundColor;
+  return hoverEffect && "&:hover {\n    ".concat(hoverCursor && "cursor: pointer", ";\n    background-color: ").concat(hoverBackgroundColor, ";\n  }");
+}, function (_ref3) {
+  var extraStyles = _ref3.extraStyles;
+  return extraStyles;
+});
+
+var _excluded$t = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var TableRow = function TableRow(_ref) {
+  var children = _ref.children,
+    extraStyles = _ref.extraStyles,
+    _ref$hoverCursor = _ref.hoverCursor,
+    _ref$hoverEffect = _ref.hoverEffect,
+    hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
+    onClick = _ref.onClick,
+    themeValues = _ref.themeValues,
+    props = _objectWithoutProperties(_ref, _excluded$t);
+  return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
+    onClick: onClick,
+    hoverEffect: hoverEffect,
+    extraStyles: extraStyles,
+    borderColor: themeValues.borderColor,
+    hoverBackgroundColor: themeValues.hoverBackgroundColor
+  }, props), children);
+};
+var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$h);
+
+var TableHead = function TableHead(_ref) {
+  var children = _ref.children,
+    _ref$extraStyles = _ref.extraStyles,
+    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+    themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement(StyledTableHead, {
+    backgroundColor: themeValues.backgroundColor,
+    borderColor: themeValues.borderColor
+  }, /*#__PURE__*/React__default.createElement(TableRow$1, {
+    extraStyles: extraStyles,
+    hoverEffect: false
+  }, children));
+};
+var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$g);
+
+var TableHeading = styled__default.th.withConfig({
+  displayName: "TableHeadingstyled",
+  componentId: "sc-1ggk38d-0"
+})(["padding:", ";min-width:", ";text-align:left;&:last-child{text-align:right;}", ""], function (_ref) {
+  var _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "24px" : _ref$padding;
+  return padding;
+}, function (_ref2) {
+  var _ref2$minWidth = _ref2.minWidth,
+    minWidth = _ref2$minWidth === void 0 ? "initial" : _ref2$minWidth;
+  return minWidth;
+}, function (_ref3) {
+  var extraStyles = _ref3.extraStyles;
+  return extraStyles;
+});
+
+var SortableTableHeading = function SortableTableHeading(_ref) {
+  var ariaControlsId = _ref.ariaControlsId,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    displayName = _ref.displayName,
+    onSortChange = _ref.onSortChange,
+    _ref$sortOrder = _ref.sortOrder,
+    sortOrder = _ref$sortOrder === void 0 ? null : _ref$sortOrder,
+    themeValues = _ref.themeValues,
+    extraStyles = _ref.extraStyles;
+  var getCaretColor = function getCaretColor(order) {
+    if (sortOrder === order) {
+      return themeValues.activeColor;
+    }
+    return themeValues.inactiveColor;
+  };
+  return /*#__PURE__*/React__default.createElement(TableHeading, {
+    disabled: disabled,
+    extraStyles: "cursor: pointer; ".concat(extraStyles),
+    onClick: function onClick(event) {
+      return disabled ? noop : onSortChange(event);
+    },
+    "aria-controls": ariaControlsId
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between"
+  }, displayName, /*#__PURE__*/React__default.createElement(Stack, {
+    justify: "center",
+    childGap: "2px"
+  }, /*#__PURE__*/React__default.createElement(CaretArrowUp$1, {
+    color: getCaretColor("asc")
+  }), /*#__PURE__*/React__default.createElement(CaretArrowDown$1, {
+    color: getCaretColor("desc")
+  }))));
+};
+var SortableTableHeading$1 = themeComponent(SortableTableHeading, "SortableTableHeading", fallbackValues$f);
+
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
     version: "1.2",
@@ -24828,7 +25042,7 @@ exportTypedArrayMethod$1('at', function at(index) {
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
 var focusColor = "".concat(MATISSE_BLUE_DARK);
-var fallbackValues$f = {
+var fallbackValues$i = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3,
   focusColor: focusColor
@@ -25229,7 +25443,7 @@ var Dropdown = function Dropdown(_ref13) {
     }, choice.text)));
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
-var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$f);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$i);
 
 var SelectContainer = styled__default.div.withConfig({
   displayName: "FormSelectstyled__SelectContainer",
@@ -25276,7 +25490,7 @@ var labelColor = {
   "default": "".concat(CHARADE_GREY),
   disabled: "".concat(CHARADE_GREY)
 };
-var borderColor = {
+var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU),
   disabled: "".concat(GREY_CHATEAU)
 };
@@ -25300,13 +25514,13 @@ var hoverFocusStyles = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6D717E;"
 };
-var fallbackValues$g = {
+var fallbackValues$j = {
   linkColor: linkColor$1,
   formBackgroundColor: formBackgroundColor,
   inputBackgroundColor: inputBackgroundColor,
   color: color$6,
   labelColor: labelColor,
-  borderColor: borderColor,
+  borderColor: borderColor$2,
   lineHeight: lineHeight$1,
   fontSize: fontSize$4,
   errorFontSize: errorFontSize,
@@ -25412,7 +25626,7 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   })));
 };
-var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$g, "default");
+var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$j, "default");
 
 var options = [{
   text: "Afghanistan",
@@ -26235,7 +26449,7 @@ var mobileFontSize$1 = {
   // 12px
   extraSmall: "0.71428rem" // 10px
 };
-var fallbackValues$h = {
+var fallbackValues$k = {
   fontFamily: fontFamily$4,
   fontSize: fontSize$5
 };
@@ -26245,7 +26459,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$t = ["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
@@ -26276,7 +26490,7 @@ var _excluded$t = ["themeValues", "weight", "color", "margin", "textAlign", "ext
 var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
 var isTouchDevice$2 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$2;
-var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$h;
+var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$k;
 var Detail = function Detail(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -26295,7 +26509,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$t);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -26312,10 +26526,10 @@ var Detail = function Detail(_ref) {
 };
 var Detail$1 = themeComponent(Detail, "Detail", fallbacks$1, "regular");
 
-var backgroundColor$3 = WHITE;
+var backgroundColor$4 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$i = {
-  backgroundColor: backgroundColor$3,
+var fallbackValues$l = {
+  backgroundColor: backgroundColor$4,
   boxShadow: boxShadow
 };
 
@@ -26337,7 +26551,7 @@ var DisplayBox = function DisplayBox(_ref) {
     dataQa: dataQa
   }, children));
 };
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$i);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$l);
 
 /* 
   Hook that assigns a click event listener to the main document element
@@ -26432,21 +26646,34 @@ var useToastNotification = function useToastNotification() {
   };
 };
 
+function useConditionallyAddValidator(condition, validatorFn, addValidator, removeValidator) {
+  React.useEffect(function () {
+    if (condition) {
+      addValidator(validatorFn());
+    }
+    return function () {
+      // Remove validator when component unmounts
+      removeValidator(validatorFn());
+    };
+  }, [condition, addValidator, removeValidator]);
+}
+
 
 
 var index$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   useOutsideClick: useOutsideClickHook,
   useScrollTo: useScrollTo,
-  useToastNotification: useToastNotification
+  useToastNotification: useToastNotification,
+  useConditionallyAddValidator: useConditionallyAddValidator
 });
 
 var hoverColor$4 = "#116285";
-var activeColor$4 = "#0E506D";
+var activeColor$5 = "#0E506D";
 var popoverTriggerColor = "#15749D";
-var fallbackValues$j = {
+var fallbackValues$m = {
   hoverColor: hoverColor$4,
-  activeColor: activeColor$4,
+  activeColor: activeColor$5,
   popoverTriggerColor: popoverTriggerColor
 };
 
@@ -26594,7 +26821,7 @@ var Popover = function Popover(_ref) {
     extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
   })));
 };
-var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$m);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -26963,7 +27190,7 @@ var labelColor$1 = {
   "default": "".concat(CHARADE_GREY),
   disabled: "".concat(CHARADE_GREY)
 };
-var borderColor$1 = {
+var borderColor$3 = {
   "default": "".concat(STORM_GREY),
   disabled: "".concat(STORM_GREY)
 };
@@ -26990,13 +27217,13 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$k = {
+var fallbackValues$n = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
   color: color$7,
   labelColor: labelColor$1,
-  borderColor: borderColor$1,
+  borderColor: borderColor$3,
   lineHeight: lineHeight$2,
   fontSize: fontSize$6,
   errorFontSize: errorFontSize$1,
@@ -27005,7 +27232,7 @@ var fallbackValues$k = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$u = ["showErrors", "themeValues"],
+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",
@@ -27040,7 +27267,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$u);
+    props = _objectWithoutProperties(_ref8, _excluded$v);
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -27239,9 +27466,9 @@ var FormInput = function FormInput(_ref15) {
     padding: "0 0 0 auto"
   }, decorator)));
 };
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$n, "default");
 
-var _excluded$v = ["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,
@@ -27250,7 +27477,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$v);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React__default.createElement(Switcher, {
@@ -27261,24 +27488,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$w = ["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$w);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$x = ["themeValues", "children"];
+var _excluded$y = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -27287,7 +27514,7 @@ var FormContainer = function FormContainer(_ref) {
     borderRadius: "4px"
   }, rest), children);
 };
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$k, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$n, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -27308,7 +27535,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
     text: linkText
   })));
 };
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$k, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$n, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -27322,7 +27549,7 @@ var color$8 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$l = {
+var fallbackValues$o = {
   fontSize: fontSize$7,
   padding: padding$1,
   color: color$8
@@ -27364,11 +27591,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
     dataQa: "".concat(qaPrefix, "-3")
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$l, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$o, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$m = {
+var fallbackValues$p = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -27406,11 +27633,11 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$m);
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$p);
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$n = {
+var fallbackValues$q = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -27502,7 +27729,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$n);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$q);
 
 var Hamburger = styled__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -27583,12 +27810,12 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$o = {
+var fallbackValues$r = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
 
-var _excluded$y = ["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,
@@ -27607,7 +27834,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -27622,7 +27849,7 @@ var Heading = function Heading(_ref) {
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$o, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$r, "h1");
 
 var Image = styled__default.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -27757,7 +27984,7 @@ var fontWeight$4 = {
   // fontsize Detail regular
   large: "700" // fontsize Title small
 };
-var fallbackValues$p = {
+var fallbackValues$s = {
   fontWeight: fontWeight$4
 };
 
@@ -27808,15 +28035,15 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
 };
 
-var _excluded$z = ["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$z);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$p, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$s, "default");
 
 var weightTitle = {
   "default": "600",
@@ -27826,7 +28053,7 @@ var detailVariant = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$q = {
+var fallbackValues$t = {
   weightTitle: weightTitle,
   detailVariant: detailVariant
 };
@@ -27874,10 +28101,10 @@ var LineItem = function LineItem(_ref) {
     childGap: "0.25rem"
   }, visibleCustomAttrs));
 };
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$q, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$t, "default");
 
 var color$9 = "#15749D";
-var fallbackValues$r = {
+var fallbackValues$u = {
   color: color$9
 };
 
@@ -27941,7 +28168,7 @@ var Spinner$1 = function Spinner(_ref6) {
     strokeWidth: strokeWidth
   })));
 };
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$r);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$u);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -27957,7 +28184,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$A = ["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,
@@ -27972,7 +28199,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$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -28003,7 +28230,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$B = ["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,
@@ -28012,7 +28239,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -28201,7 +28428,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$s = {
+var fallbackValues$v = {
   color: color$a,
   height: height$1
 };
@@ -28343,13 +28570,13 @@ var Placeholder = function Placeholder(_ref4) {
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
 };
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$s, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$v, "default");
 
-var backgroundColor$4 = {
+var backgroundColor$5 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$t = {
-  backgroundColor: backgroundColor$4
+var fallbackValues$w = {
+  backgroundColor: backgroundColor$5
 };
 
 var ProcessingFee = function ProcessingFee(_ref) {
@@ -28375,13 +28602,13 @@ var ProcessingFee = function ProcessingFee(_ref) {
     showQuitLink: false
   }));
 };
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$t, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$w, "default");
 
-var activeColor$5 = MATISSE_BLUE;
+var activeColor$6 = MATISSE_BLUE;
 var inactiveBorderColor = GREY_CHATEAU;
-var fallbackValues$u = {
+var fallbackValues$x = {
   inactiveBorderColor: inactiveBorderColor,
-  activeColor: activeColor$5
+  activeColor: activeColor$6
 };
 
 var HiddenRadioInput = styled__default.input.withConfig({
@@ -28462,13 +28689,13 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     inactiveBorderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
-var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$u);
+var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$x);
 
-var activeColor$6 = "".concat(MATISSE_BLUE);
-var inactiveColor = "".concat(STORM_GREY);
-var fallbackValues$v = {
-  activeColor: activeColor$6,
-  inactiveColor: inactiveColor
+var activeColor$7 = "".concat(MATISSE_BLUE);
+var inactiveColor$1 = "".concat(STORM_GREY);
+var fallbackValues$y = {
+  activeColor: activeColor$7,
+  inactiveColor: inactiveColor$1
 };
 
 var HiddenRadioButton = styled__default.input.withConfig({
@@ -28571,11 +28798,11 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderRadius: "8px"
   })));
 };
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$v);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$y);
 
 var searchIconColor = WHITE;
 var searchIconBackgroundColor = MATISSE_BLUE;
-var fallbackValues$w = {
+var fallbackValues$z = {
   searchIconColor: searchIconColor,
   searchIconBackgroundColor: searchIconBackgroundColor
 };
@@ -28599,6 +28826,8 @@ var Search = function Search(_ref) {
   var field = _ref.field,
     fieldActions = _ref.fieldActions,
     dataset = _ref.dataset,
+    _ref$disableFilter = _ref.disableFilter,
+    disableFilter = _ref$disableFilter === void 0 ? false : _ref$disableFilter,
     valuesToSearchFor = _ref.valuesToSearchFor,
     onSearchCallback = _ref.onSearchCallback,
     onClearCallback = _ref.onClearCallback,
@@ -28623,7 +28852,7 @@ var Search = function Search(_ref) {
     });
   };
   var handleSubmit = function handleSubmit() {
-    return onSearchCallback(getFilteredDataset());
+    return disableFilter ? onSearchCallback() : onSearchCallback(getFilteredDataset());
   };
   return /*#__PURE__*/React__default.createElement(Cluster, {
     extraStyles: "overflow: visible; width: ".concat(width, "; ").concat(extraStyles)
@@ -28671,12 +28900,12 @@ var Search = function Search(_ref) {
     size: 24
   })));
 };
-var Search$1 = themeComponent(Search, "Search", fallbackValues$w);
+var Search$1 = themeComponent(Search, "Search", fallbackValues$z);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$x = {
+var fallbackValues$A = {
   border: border$2
 };
 
@@ -28749,16 +28978,16 @@ var SearchableSelect = function SearchableSelect(_ref) {
     });
   }))));
 };
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$x, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$A, "default");
 
-var borderColor$2 = {
+var borderColor$4 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$y = {
-  borderColor: borderColor$2,
+var fallbackValues$B = {
+  borderColor: borderColor$4,
   borderSize: borderSize
 };
 
@@ -28775,7 +29004,7 @@ var SolidDivider = function SolidDivider(_ref) {
     borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$y, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$B, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -39361,7 +39590,7 @@ var white = "".concat(WHITE);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-var fallbackValues$z = {
+var fallbackValues$C = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   disabledBackgroundLight: disabledBackgroundLight,
@@ -39538,7 +39767,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     padding: "0"
   }, label))));
 };
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$z);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$C);
 
 var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -39580,12 +39809,12 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$5 = WHITE;
+var backgroundColor$6 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
-var fallbackValues$A = {
-  backgroundColor: backgroundColor$5,
+var fallbackValues$D = {
+  backgroundColor: backgroundColor$6,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
   headerColor: headerColor
@@ -39608,7 +39837,7 @@ var CardImage = styled__default.img.withConfig({
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
 var textColor$3 = BRIGHT_GREY;
-var fallbackValues$B = {
+var fallbackValues$E = {
   titleColor: titleColor,
   titleWeight: titleWeight,
   textColor: textColor$3
@@ -39632,7 +39861,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$B);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$E);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -39734,14 +39963,14 @@ var Card = function Card(_ref) {
     titleVariant: titleVariant
   }), children)))));
 };
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$A);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$D);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$7 = MATISSE_BLUE;
+var activeColor$8 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$C = {
+var fallbackValues$F = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$7,
+  activeColor: activeColor$8,
   linkColor: linkColor$3
 };
 
@@ -39768,7 +39997,7 @@ var NavTab = function NavTab(_ref) {
     extraStyles: "\n          border-bottom: 3px solid transparent;\n          font-family: ".concat(themeValues.fontFamily, ";\n          text-decoration: none;\n          ").concat(isActive && !isMobile ? border : "none", ";\n          &:hover {\n            text-decoration: none;\n            color: ").concat(themeValues.activeColor, ";\n            ").concat(isMobile ? "" : "".concat(border), "\n          };\n          padding: 1.25rem 0;\n        ")
   }, label));
 };
-var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$C);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$F);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -39866,12 +40095,12 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$6 = {
+var backgroundColor$7 = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$D = {
+var fallbackValues$G = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -39881,7 +40110,7 @@ var fallbackValues$D = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$6
+  backgroundColor: backgroundColor$7
 };
 
 /*
@@ -39951,7 +40180,7 @@ var Module = function Module(_ref) {
     boxShadow: themeValues.boxShadow
   }, children)));
 };
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$D, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$G, "default"));
 
 var WalletName = function WalletName(_ref) {
   var mainText = _ref.mainText,
@@ -40018,138 +40247,6 @@ var WalletName = function WalletName(_ref) {
   })));
 };
 
-var Table_styled = styled__default.table.withConfig({
-  displayName: "Tablestyled",
-  componentId: "sc-mveye7-0"
-})(["width:100%;table-layout:auto;border-collapse:collapse;", ""], function (_ref) {
-  var extraStyles = _ref.extraStyles;
-  return extraStyles;
-});
-
-var TableBody_styled = styled__default.tbody.withConfig({
-  displayName: "TableBodystyled",
-  componentId: "sc-wk5osr-0"
-})(["", ""], function (_ref) {
-  var extraStyles = _ref.extraStyles;
-  return extraStyles;
-});
-
-var TableCell_styled = styled__default.td.withConfig({
-  displayName: "TableCellstyled",
-  componentId: "sc-iqndn8-0"
-})(["padding:", ";font-size:", " white-space:nowrap;max-width:", ";overflow:hidden;text-overflow:ellipsis;&:last-child{text-align:right;}", ";"], function (_ref) {
-  var _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? "24px" : _ref$padding;
-  return padding;
-}, function (_ref2) {
-  var _ref2$fontSize = _ref2.fontSize,
-    fontSize = _ref2$fontSize === void 0 ? "0.875rem" : _ref2$fontSize;
-  return fontSize;
-}, function (_ref3) {
-  var _ref3$maxWidth = _ref3.maxWidth,
-    maxWidth = _ref3$maxWidth === void 0 ? "250px" : _ref3$maxWidth;
-  return maxWidth;
-}, function (_ref4) {
-  var extraStyles = _ref4.extraStyles;
-  return extraStyles;
-});
-
-var backgroundColor$7 = ALABASTER_WHITE;
-var borderColor$3 = GREY_CHATEAU;
-var fallbackValues$E = {
-  backgroundColor: backgroundColor$7,
-  borderColor: borderColor$3
-};
-
-var StyledTableHead = styled__default.thead.withConfig({
-  displayName: "TableHeadstyled",
-  componentId: "sc-j8e6c1-0"
-})(["background-color:", ";border-bottom:", ";font-size:", ";"], function (_ref) {
-  var backgroundColor = _ref.backgroundColor;
-  return backgroundColor;
-}, function (_ref2) {
-  var borderColor = _ref2.borderColor;
-  return "1px solid ".concat(borderColor);
-}, function (_ref3) {
-  var _ref3$fontSize = _ref3.fontSize,
-    fontSize = _ref3$fontSize === void 0 ? "0.875rem" : _ref3$fontSize;
-  return fontSize;
-});
-
-var borderColor$4 = GREY_CHATEAU;
-var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
-var fallbackValues$F = {
-  borderColor: borderColor$4,
-  hoverBackgroundColor: hoverBackgroundColor$1
-};
-
-var TableRowWrapper = styled__default.tr.withConfig({
-  displayName: "TableRowstyled",
-  componentId: "sc-1tc0sav-0"
-})(["&:not(:last-child){border-bottom:", ";}", " ", ""], function (_ref) {
-  var borderColor = _ref.borderColor;
-  return "1px solid ".concat(borderColor);
-}, function (_ref2) {
-  var hoverCursor = _ref2.hoverCursor,
-    hoverEffect = _ref2.hoverEffect,
-    hoverBackgroundColor = _ref2.hoverBackgroundColor;
-  return hoverEffect && "&:hover {\n    ".concat(hoverCursor && "cursor: pointer", ";\n    background-color: ").concat(hoverBackgroundColor, ";\n  }");
-}, function (_ref3) {
-  var extraStyles = _ref3.extraStyles;
-  return extraStyles;
-});
-
-var _excluded$C = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
-var TableRow = function TableRow(_ref) {
-  var children = _ref.children,
-    extraStyles = _ref.extraStyles,
-    _ref$hoverCursor = _ref.hoverCursor,
-    _ref$hoverEffect = _ref.hoverEffect,
-    hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
-    onClick = _ref.onClick,
-    themeValues = _ref.themeValues,
-    props = _objectWithoutProperties(_ref, _excluded$C);
-  return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
-    onClick: onClick,
-    hoverEffect: hoverEffect,
-    extraStyles: extraStyles,
-    borderColor: themeValues.borderColor,
-    hoverBackgroundColor: themeValues.hoverBackgroundColor
-  }, props), children);
-};
-var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$F);
-
-var TableHead = function TableHead(_ref) {
-  var children = _ref.children,
-    _ref$extraStyles = _ref.extraStyles,
-    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
-    themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement(StyledTableHead, {
-    backgroundColor: themeValues.backgroundColor,
-    borderColor: themeValues.borderColor
-  }, /*#__PURE__*/React__default.createElement(TableRow$1, {
-    extraStyles: extraStyles,
-    hoverEffect: false
-  }, children));
-};
-var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$E);
-
-var TableHeading_styled = styled__default.th.withConfig({
-  displayName: "TableHeadingstyled",
-  componentId: "sc-1ggk38d-0"
-})(["padding:", ";min-width:", ";text-align:left;&:last-child{text-align:right;}", ""], function (_ref) {
-  var _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? "24px" : _ref$padding;
-  return padding;
-}, function (_ref2) {
-  var _ref2$minWidth = _ref2.minWidth,
-    minWidth = _ref2$minWidth === void 0 ? "initial" : _ref2$minWidth;
-  return minWidth;
-}, function (_ref3) {
-  var extraStyles = _ref3.extraStyles;
-  return extraStyles;
-});
-
 const validatorToPredicate =
   (validatorFn, emptyCase) =>
   (value, ...rest) =>
@@ -40967,7 +41064,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$8 = "#ebeffb";
-var fallbackValues$G = {
+var fallbackValues$H = {
   backgroundColor: backgroundColor$8
 };
 
@@ -41016,7 +41113,7 @@ var Banner = function Banner(_ref) {
     extraStyles: isMobile && "> svg { width: 176px; }"
   }, /*#__PURE__*/React__default.createElement(Image, null))));
 };
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$G);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$H);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -41150,7 +41247,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$H = {
+var fallbackValues$I = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -41275,7 +41372,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$H);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$I);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -41809,6 +41906,7 @@ var EmailForm = function EmailForm(_ref) {
       };
     }, []);
   }
+  useConditionallyAddValidator(isRequired, required, actions.fields.email.addValidator, actions.fields.email.removeValidator);
   var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -41840,7 +41938,7 @@ var EmailForm = function EmailForm(_ref) {
 
 var formConfig$3 = {
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [isProbablyEmail()] // 'required' validator is conditionally added based on `isRequired` prop
   }
 };
 var _createFormState$3 = createFormState(formConfig$3),
@@ -41854,7 +41952,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$I = {
+var fallbackValues$J = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41885,7 +41983,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
     rightContent: rightSubfooterContent
   }));
 };
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$I);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$J);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var fields = _ref.fields,
@@ -41932,7 +42030,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
 var backgroundColor$9 = "#182848";
-var fallbackValues$J = {
+var fallbackValues$K = {
   textColor: textColor$4,
   backgroundColor: backgroundColor$9
 };
@@ -41991,7 +42089,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$J);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$K);
 
 var AccountBillIcon = function AccountBillIcon(_ref) {
   var color = _ref.color;
@@ -42407,7 +42505,7 @@ var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
 var color$b = ROYAL_BLUE_VIVID;
-var fallbackValues$K = {
+var fallbackValues$L = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
   disabledColor: disabledColor$1,
@@ -42528,7 +42626,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "margin-right: auto;"
   }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$K, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$L, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -46533,7 +46631,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$L = {
+var fallbackValues$M = {
   backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
@@ -46573,7 +46671,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     onBlur: onBlur
   }, menuContent));
 };
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$L, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$M, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -46633,7 +46731,7 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
     background: themeValues.backgroundColor
   }, menuContent));
 };
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$L, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$M, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -47160,7 +47258,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var iconColor = ROYAL_BLUE_VIVID;
-var fallbackValues$M = {
+var fallbackValues$N = {
   iconColor: iconColor
 };
 
@@ -47382,7 +47480,7 @@ var Obligation = function Obligation(_ref) {
   }))));
   return inactive ? inactiveObligation : activeObligation;
 };
-var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$M);
+var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$N);
 
 var PartialAmountField = function PartialAmountField(_ref) {
   var lineItem = _ref.lineItem,
@@ -47519,9 +47617,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
-var activeColor$8 = MATISSE_BLUE;
-var fallbackValues$N = {
-  activeColor: activeColor$8,
+var activeColor$9 = MATISSE_BLUE;
+var fallbackValues$O = {
+  activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47714,7 +47812,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$N);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$O);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47815,7 +47913,7 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$O = {
+var fallbackValues$P = {
   backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -48184,7 +48282,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$O, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$P, "default");
 
 var linkColor$4 = {
   "default": "#3176AA"
@@ -48204,7 +48302,7 @@ var modalLinkHoverFocus = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$P = {
+var fallbackValues$Q = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -48268,7 +48366,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$P, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$Q, "default");
 
 var backgroundColor$d = {
   "default": "#ffffff",
@@ -48303,7 +48401,7 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$Q = {
+var fallbackValues$R = {
   backgroundColor: backgroundColor$d,
   linkColor: linkColor$5,
   border: border$3,
@@ -48375,7 +48473,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     className: "modal-trigger"
   }, link));
 };
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$Q, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$R, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -49044,6 +49142,7 @@ var PhoneForm = function PhoneForm(_ref) {
       };
     }, []);
   }
+  useConditionallyAddValidator(isRequired, required, actions.fields.phone.addValidator, actions.fields.phone.removeValidator);
   var phoneErrorMessage = _defineProperty(_defineProperty({}, required.error, "Phone number is required"), hasLength.error, "Phone number must be 10 digits");
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -49073,7 +49172,8 @@ var PhoneForm = function PhoneForm(_ref) {
 
 var formConfig$8 = {
   phone: {
-    validators: [required(), hasLength(10, 10)],
+    validators: [hasLength(10, 10)],
+    // 'required' validator is conditionally added based on `isRequired` prop
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };
@@ -49139,7 +49239,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GHOST_GREY);
 var focusStyles = "outline: none;";
-var fallbackValues$R = {
+var fallbackValues$S = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49442,7 +49542,7 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$R);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$S);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -49562,13 +49662,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var GRECIAN_GREY$1 = GRECIAN_GREY;
 var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$S = {
+var fallbackValues$T = {
   bannerBackgroundColor: bannerBackgroundColor
 };
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$S, "ResetConfirmationForm");
+  var themeValues = createThemeValues(themeContext, fallbackValues$T, "ResetConfirmationForm");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49683,13 +49783,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var GRECIAN_GREY$2 = GRECIAN_GREY;
 var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$T = {
+var fallbackValues$U = {
   bannerBackgroundColor: bannerBackgroundColor$1
 };
 
 var ResetPasswordSuccess = function ResetPasswordSuccess() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$T, "ResetPasswordSuccess");
+  var themeValues = createThemeValues(themeContext, fallbackValues$U, "ResetPasswordSuccess");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49738,7 +49838,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$U = {
+var fallbackValues$V = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49806,12 +49906,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$U);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$V);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$V = {
+var fallbackValues$W = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49866,7 +49966,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$V);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$W);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49987,7 +50087,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$W = {
+var fallbackValues$X = {
   fontWeight: fontWeight$8,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -50032,7 +50132,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$W));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$X));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -50092,7 +50192,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$X = {
+var fallbackValues$Y = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50159,15 +50259,15 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$X);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$Y);
 
 var hoverColor$5 = "#116285";
-var activeColor$9 = "#0E506D";
+var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$Y = {
+var fallbackValues$Z = {
   hoverColor: hoverColor$5,
-  activeColor: activeColor$9,
+  activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
   backgroundColor: backgroundColor$e
 };
@@ -50301,11 +50401,11 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Y);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Z);
 
 var primaryColor$1 = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
-var fallbackValues$Z = {
+var fallbackValues$_ = {
   primaryColor: primaryColor$1,
   secondaryColor: secondaryColor
 };
@@ -50358,20 +50458,30 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
   }))));
 };
 
-var StyledContainer = styled__default.div.withConfig({
-  displayName: "MultipleSelectFilter__StyledContainer",
-  componentId: "sc-1wom9fl-0"
+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 StyledFilterDropdown = styled__default.div.withConfig({
-  displayName: "MultipleSelectFilter__StyledFilterDropdown",
-  componentId: "sc-1wom9fl-1"
+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: "MultipleSelectFilter__StyledFilterButton",
-  componentId: "sc-1wom9fl-2"
+  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  ");
@@ -50379,23 +50489,34 @@ var StyledFilterButton = styled__default(ButtonWithAction).withConfig({
   var backgroundColor = _ref3.backgroundColor;
   return "\n    background-color: ".concat(backgroundColor, ";\n    :hover,\n    :active,\n    :focus {\n      background-color: ").concat(backgroundColor, ";\n    }\n  ");
 });
-var ScrollableOptionsList = function ScrollableOptionsList(_ref4) {
-  var id = _ref4.id,
-    optionsList = _ref4.optionsList,
-    selectedOptions = _ref4.selectedOptions,
-    themeValues = _ref4.themeValues,
-    selectOption = _ref4.selectOption,
-    maxSelections = _ref4.maxSelections,
-    name = _ref4.name;
+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 () {
-    var activeOption = document.getElementById("".concat(name, "-option-").concat(focusedIndex));
-    if (focusedIndex !== -1 && optionsList !== null && optionsList !== void 0 && optionsList.length && activeOption) {
-      activeOption.focus(); // move focus to the active option
+    if (focusedIndex !== -1 && checkboxRefs.current && checkboxRefs.current[focusedIndex]) {
+      checkboxRefs.current[focusedIndex].focus(); // move focus to the active option
     }
   }, [focusedIndex]);
   var handleKeyDown = function handleKeyDown(event) {
@@ -50410,15 +50531,11 @@ var ScrollableOptionsList = function ScrollableOptionsList(_ref4) {
         return prevIndex > 0 ? prevIndex - 1 : optionsList.length - 1;
       });
     } else if (event.key === " ") {
-      // Select option on spacebar press if the maximum selection hasn't been reached.
       event.preventDefault();
-      if (!isMaxSelectionReached || selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.some(function (item) {
-        var _event$target;
-        return (item === null || item === void 0 ? void 0 : item.name) === ((_event$target = event.target) === null || _event$target === void 0 || (_event$target = _event$target.textContent) === null || _event$target === void 0 ? void 0 : _event$target.trim());
-      })) {
-        var optionIDArr = event.target.id.split("-");
-        var index = +optionIDArr[optionIDArr.length - 1];
-        selectOption(optionsList[index]);
+      // 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.
@@ -50434,20 +50551,20 @@ var ScrollableOptionsList = function ScrollableOptionsList(_ref4) {
     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 isChecked = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.some(function (item) {
-      return (item === null || item === void 0 ? void 0 : item.name) === (option === null || option === void 0 ? void 0 : option.name);
-    });
-    var isDisabled = isMaxSelectionReached && !isChecked;
+    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, {
-      id: "".concat(name, "-option-").concat(index),
+      ref: function ref(el) {
+        return checkboxRefs.current[index] = el;
+      },
       title: option.name,
       name: option.name,
-      checked: isChecked,
+      checked: checked,
       onChange: function onChange() {
         return isDisabled ? noop : selectOption(option);
       },
@@ -50456,39 +50573,40 @@ var ScrollableOptionsList = function ScrollableOptionsList(_ref4) {
       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(isChecked && !isDisabled ? "background: " + themeValues.secondaryColor + ";" : ""),
-      tabIndex: tabIndex
+      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(_ref5) {
-  var actions = _ref5.actions,
-    autocompleteValue = _ref5.autocompleteValue,
-    btnContentOverride = _ref5.btnContentOverride,
-    disabled = _ref5.disabled,
-    extraStyles = _ref5.extraStyles,
-    fields = _ref5.fields,
-    filterLabel = _ref5.filterLabel,
-    _ref5$hasIcon = _ref5.hasIcon,
-    hasIcon = _ref5$hasIcon === void 0 ? false : _ref5$hasIcon,
-    Icon = _ref5.icon,
-    maxSelections = _ref5.maxSelections,
-    _ref5$name = _ref5.name,
-    name = _ref5$name === void 0 ? "MultipleSelectFilter" : _ref5$name,
-    _ref5$onApply = _ref5.onApply,
-    onApply = _ref5$onApply === void 0 ? noop : _ref5$onApply,
-    _ref5$onClear = _ref5.onClear,
-    onClear = _ref5$onClear === void 0 ? noop : _ref5$onClear,
-    options = _ref5.options,
-    _ref5$placeholder = _ref5.placeholder,
-    placeholder = _ref5$placeholder === void 0 ? "Search" : _ref5$placeholder,
-    _ref5$searchable = _ref5.searchable,
-    searchable = _ref5$searchable === void 0 ? true : _ref5$searchable,
-    selectedOptions = _ref5.selectedOptions,
-    setSelectedOptions = _ref5.setSelectedOptions,
-    themeValues = _ref5.themeValues,
-    _ref5$truncateBtnText = _ref5.truncateBtnTextWidth,
-    truncateBtnTextWidth = _ref5$truncateBtnText === void 0 ? "15rem" : _ref5$truncateBtnText;
+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],
@@ -50499,14 +50617,13 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref5) {
     setOpened = _useState6[1];
   var containerRef = React.useRef(null);
   var dropdownRef = React.useRef(null);
-  var filterButtonID = "".concat(name, "-filter-button");
+  var filterButtonRef = React.useRef(null);
+  var applyFilterButtonRef = React.useRef(null);
   var filterDropdownID = "".concat(name, "-filter-dropdown");
   var checkboxListID = "".concat(name, "-checkbox-list");
-  var applyFilterButtonID = "".concat(name, "-apply-filters");
-  var clearFilterButtonID = "".concat(name, "-clear-filters");
   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) {
+  var completeOptionsList = itemList.slice().sort(function (a, b) {
     return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
   });
   var selectValues = function selectValues(items) {
@@ -50550,7 +50667,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref5) {
         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 && event.target && event.target.id === applyFilterButtonID || event.key === "Tab" && event.shiftKey && event.target && event.target.id === filterButtonID) {
+      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);
@@ -50570,11 +50687,11 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref5) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledContainer, {
+  return /*#__PURE__*/React__default.createElement(FilterContainer, {
     ref: containerRef,
     extraStyles: "".concat(extraStyles)
-  }, /*#__PURE__*/React__default.createElement(StyledFilterButton, {
-    id: filterButtonID,
+  }, /*#__PURE__*/React__default.createElement(FilterButton, {
+    ref: filterButtonRef,
     variant: "tertiary",
     action: function action() {
       actions.fields.searchTerm.set("");
@@ -50584,6 +50701,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref5) {
     "aria-expanded": opened,
     "aria-controls": filterDropdownID,
     backgroundColor: backgroundColor,
+    dataQa: "".concat(name, "-filter-button"),
     contentOverride: true
   }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React__default.createElement(Center, {
     as: "span",
@@ -50611,7 +50729,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref5) {
     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(StyledFilterDropdown, {
+  }))), /*#__PURE__*/React__default.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,
     hidden: !opened,
@@ -50649,27 +50767,28 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref5) {
       onClear();
     },
     variant: "tertiary",
-    id: clearFilterButtonID,
     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"
+    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",
-    id: applyFilterButtonID,
     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"
+    text: "Apply",
+    dataQa: "".concat(name, "-apply-filters")
   }))));
 };
-var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$Z);
+var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$_);
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$_ = {
+var fallbackValues$$ = {
   pageBackground: pageBackground
 };
 
@@ -50717,7 +50836,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,
@@ -50760,7 +50879,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,
@@ -50806,7 +50925,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,
@@ -50859,7 +50978,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,
@@ -50929,7 +51048,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 () {};
@@ -50991,6 +51110,8 @@ exports.ButtonWithAction = ButtonWithAction;
 exports.ButtonWithLink = ButtonWithLink;
 exports.CalendarIcon = CalendarIcon;
 exports.Card = Card$1;
+exports.CaretArrowDown = CaretArrowDown$1;
+exports.CaretArrowUp = CaretArrowUp$1;
 exports.CarrotIcon = CarrotIcon$1;
 exports.CashIcon = CashIcon;
 exports.Center = Center;
@@ -51143,6 +51264,7 @@ exports.Sidebar = Sidebar;
 exports.SidebarSingleContent = SidebarSingleContent$1;
 exports.SidebarStackContent = SidebarStackContent$1;
 exports.SolidDivider = SolidDivider$1;
+exports.SortableTableHeading = SortableTableHeading$1;
 exports.Spinner = Spinner$2;
 exports.Stack = Stack;
 exports.StandardCheckoutImage = StandardCheckoutImage;
@@ -51157,7 +51279,7 @@ exports.Table = Table_styled;
 exports.TableBody = TableBody_styled;
 exports.TableCell = TableCell_styled;
 exports.TableHead = TableHead$1;
-exports.TableHeading = TableHeading_styled;
+exports.TableHeading = TableHeading;
 exports.TableListItem = TableListItem;
 exports.TableRow = TableRow$1;
 exports.Tabs = Tabs$1;