@thecb/components 10.10.0 → 10.11.0-beta.0

package/dist/index.cjs.js

@@ -15225,42 +15225,6 @@ 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", {
@@ -18833,6 +18797,28 @@ var NoResultsIcon = function NoResultsIcon(_ref) {
   }))))));
 };
 
+var _excluded$l = ["color"];
+var AgencyIcon = function AgencyIcon(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#292A33" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$l);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "21",
+    viewBox: "0 0 20 21",
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("g", {
+    id: "Agency / Agency - S"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    id: "Icon - Agency",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.5625 4.375H3.875L3.875 16.625H9.5625V7.875V7V4.375ZM10.4375 7.875V16.625H16.125V7.875H10.4375ZM10.4375 7H16.125C16.6082 7 17 7.39175 17 7.875V16.625C17 17.1082 16.6082 17.5 16.125 17.5H10.4375H9.5625H3.875C3.39175 17.5 3 17.1082 3 16.625V4.375C3 3.89175 3.39175 3.5 3.875 3.5H9.5625C10.0457 3.5 10.4375 3.89175 10.4375 4.375V7ZM8.46875 6.5625H4.96875V7.4375H8.46875V6.5625ZM4.96875 8.3125H8.46875V9.1875H4.96875V8.3125ZM8.46875 10.0625H4.96875V10.9375H8.46875V10.0625ZM4.96875 11.8125H8.46875V12.6875H4.96875V11.8125ZM4.96875 13.5625H8.46875V14.4375H4.96875V13.5625ZM11.5312 10.0625H15.0312V10.9375H11.5312V10.0625ZM11.5312 11.8125H15.0312V12.6875H11.5312V11.8125ZM15.0312 13.5625H11.5312V14.4375H15.0312V13.5625Z",
+    fill: color
+  })));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -19486,7 +19472,7 @@ var mobileFallbackValues = {
 };
 var MOBILE_BREAKPOINT = 768;
 
-var _excluded$l = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$m = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Title elements
@@ -19533,7 +19519,7 @@ var Title = function Title(_ref) {
     as = _ref$as === void 0 ? "h1" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$l);
+    rest = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement(TitleText, _extends({
     variant: variant,
     as: as,
@@ -20961,12 +20947,12 @@ var fallbackValues$8 = {
   linkColor: linkColor
 };
 
-var _excluded$m = ["variant", "themeValues", "children"];
+var _excluded$n = ["variant", "themeValues", "children"];
 var BoxWithShadow = function BoxWithShadow(_ref) {
   var variant = _ref.variant,
     themeValues = _ref.themeValues,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var shadowRegistry = {
     baseStandard: "0px 3px 7px 2px ".concat(rgba$1(BLACK, 0.1), ", 0px 1px 2px 1px ").concat(rgba$1(BLACK, 0.1), ";"),
     baseHover: "0px 1px 7px 0px ".concat(rgba$1(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba$1(BLACK, 0.2), ", 0px 7px 12px 0px ").concat(rgba$1(BLACK, 0.2), ";"),
@@ -21026,7 +21012,7 @@ var fallbackValues$a = {
   externalLinkColor: externalLinkColor
 };
 
-var _excluded$n = ["hoverColor", "activeColor", "extrastyles"];
+var _excluded$o = ["hoverColor", "activeColor", "extrastyles"];
 var ROYAL_BLUE$1 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$3 = LINK_TEXT_DECORATION;
 
@@ -21040,7 +21026,7 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
   var hoverColor = _ref.hoverColor,
     activeColor = _ref.activeColor,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React__default.createElement("a", _extends({}, props, {
     ref: ref
   }));
@@ -21115,7 +21101,7 @@ var ExternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 });
 
-var _excluded$o = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
+var _excluded$p = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
 var ROYAL_BLUE$2 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$4 = LINK_TEXT_DECORATION;
 
@@ -21131,7 +21117,7 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
     active = _ref.active,
     color = _ref.color,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, _extends({}, props, {
     ref: ref
   }));
@@ -22814,7 +22800,7 @@ _curry2(function test(pattern, str) {
   return _cloneRegExp(pattern).test(str);
 });
 
-var _excluded$p = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
+var _excluded$q = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
     url = _ref$url === void 0 ? "/" : _ref$url,
@@ -22829,7 +22815,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     _ref$newTab = _ref.newTab,
     newTab = _ref$newTab === void 0 ? false : _ref$newTab,
     dataQa = _ref.dataQa,
-    otherProps = _objectWithoutProperties(_ref, _excluded$p);
+    otherProps = _objectWithoutProperties(_ref, _excluded$q);
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
       url = _ref2.url,
@@ -22917,7 +22903,7 @@ var ParagraphText = styled__default.p.withConfig({
   return extraStyles;
 });
 
-var _excluded$q = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
+var _excluded$r = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
 var Paragraph = function Paragraph(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -22931,7 +22917,7 @@ var Paragraph = function Paragraph(_ref) {
     dataQa = _ref.dataQa,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
     weight: weight,
     color: color,
@@ -23173,6 +23159,7 @@ var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
 
+var _excluded$s = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles"];
 var CheckboxContainer = styled__default.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -23199,7 +23186,7 @@ var HiddenCheckbox = styled__default.input.attrs({
 var StyledCheckbox = styled__default.span.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
-})(["display:inline-block;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";"], CheckboxIcon, function (_ref2) {
+})(["display:inline-block;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";", ""], CheckboxIcon, function (_ref2) {
   var checked = _ref2.checked;
   return checked ? "visible" : "hidden";
 }, function (_ref3) {
@@ -23214,27 +23201,32 @@ var StyledCheckbox = styled__default.span.withConfig({
     disabledStyles = _ref3.disabledStyles,
     disabledCheckedStyles = _ref3.disabledCheckedStyles;
   return error ? styled.css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? styled.css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? styled.css(["", " ", ""], checkedStyles, focused && focusedStyles) : styled.css(["", " ", ""], defaultStyles, focused && focusedStyles);
+}, function (_ref4) {
+  var checkboxExtraStyles = _ref4.checkboxExtraStyles;
+  return styled.css(["", ""], checkboxExtraStyles);
 });
-var Checkbox = function Checkbox(_ref4) {
-  var title = _ref4.title,
-    name = _ref4.name,
-    checked = _ref4.checked,
-    _ref4$onChange = _ref4.onChange,
-    onChange = _ref4$onChange === void 0 ? noop : _ref4$onChange,
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-    themeValues = _ref4.themeValues,
-    _ref4$hidden = _ref4.hidden,
-    hidden = _ref4$hidden === void 0 ? false : _ref4$hidden,
-    _ref4$error = _ref4.error,
-    error = _ref4$error === void 0 ? false : _ref4$error,
-    _ref4$checkboxMargin = _ref4.checkboxMargin,
-    checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
-    extraStyles = _ref4.extraStyles,
-    textExtraStyles = _ref4.textExtraStyles,
-    labelledById = _ref4.labelledById,
-    _ref4$dataQa = _ref4.dataQa,
-    dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
+var Checkbox = function Checkbox(_ref5) {
+  var title = _ref5.title,
+    name = _ref5.name,
+    checked = _ref5.checked,
+    _ref5$onChange = _ref5.onChange,
+    onChange = _ref5$onChange === void 0 ? noop : _ref5$onChange,
+    _ref5$disabled = _ref5.disabled,
+    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
+    themeValues = _ref5.themeValues,
+    _ref5$hidden = _ref5.hidden,
+    hidden = _ref5$hidden === void 0 ? false : _ref5$hidden,
+    _ref5$error = _ref5.error,
+    error = _ref5$error === void 0 ? false : _ref5$error,
+    _ref5$checkboxMargin = _ref5.checkboxMargin,
+    checkboxMargin = _ref5$checkboxMargin === void 0 ? "0 16px 0 0" : _ref5$checkboxMargin,
+    extraStyles = _ref5.extraStyles,
+    textExtraStyles = _ref5.textExtraStyles,
+    labelledById = _ref5.labelledById,
+    _ref5$dataQa = _ref5.dataQa,
+    dataQa = _ref5$dataQa === void 0 ? null : _ref5$dataQa,
+    checkboxExtraStyles = _ref5.checkboxExtraStyles,
+    rest = _objectWithoutProperties(_ref5, _excluded$s);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -23247,7 +23239,7 @@ var Checkbox = function Checkbox(_ref4) {
   var titleId = title ? "checkboxlabel-".concat(name) : undefined;
   var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
   var ariaLabel = ariaLabelledById ? undefined : name;
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0",
     tabIndex: "0",
     onFocus: function onFocus() {
@@ -23262,7 +23254,7 @@ var Checkbox = function Checkbox(_ref4) {
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
     extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
-  }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
+  }, rest), /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
     "data-qa": dataQa
   }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
@@ -23289,7 +23281,8 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles
+    focusedStyles: themeValues.focusedStyles,
+    checkboxExtraStyles: checkboxExtraStyles
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -23500,176 +23493,6 @@ 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$r = ["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$r);
-  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,
-    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, {
-    extraStyles: "cursor: pointer; ".concat(extraStyles),
-    onClick: onSortChange,
-    "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",
@@ -25005,7 +24828,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$i = {
+var fallbackValues$f = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3,
   focusColor: focusColor
@@ -25406,7 +25229,7 @@ var Dropdown = function Dropdown(_ref13) {
     }, choice.text)));
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
-var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$i);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$f);
 
 var SelectContainer = styled__default.div.withConfig({
   displayName: "FormSelectstyled__SelectContainer",
@@ -25453,7 +25276,7 @@ var labelColor = {
   "default": "".concat(CHARADE_GREY),
   disabled: "".concat(CHARADE_GREY)
 };
-var borderColor$2 = {
+var borderColor = {
   "default": "".concat(GREY_CHATEAU),
   disabled: "".concat(GREY_CHATEAU)
 };
@@ -25477,13 +25300,13 @@ var hoverFocusStyles = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6D717E;"
 };
-var fallbackValues$j = {
+var fallbackValues$g = {
   linkColor: linkColor$1,
   formBackgroundColor: formBackgroundColor,
   inputBackgroundColor: inputBackgroundColor,
   color: color$6,
   labelColor: labelColor,
-  borderColor: borderColor$2,
+  borderColor: borderColor,
   lineHeight: lineHeight$1,
   fontSize: fontSize$4,
   errorFontSize: errorFontSize,
@@ -25589,7 +25412,7 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   })));
 };
-var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$j, "default");
+var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$g, "default");
 
 var options = [{
   text: "Afghanistan",
@@ -26412,7 +26235,7 @@ var mobileFontSize$1 = {
   // 12px
   extraSmall: "0.71428rem" // 10px
 };
-var fallbackValues$k = {
+var fallbackValues$h = {
   fontFamily: fontFamily$4,
   fontSize: fontSize$5
 };
@@ -26422,7 +26245,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$s = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$t = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Detail elements
@@ -26453,7 +26276,7 @@ var _excluded$s = ["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$k;
+var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$h;
 var Detail = function Detail(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -26472,7 +26295,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$s);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -26489,10 +26312,10 @@ var Detail = function Detail(_ref) {
 };
 var Detail$1 = themeComponent(Detail, "Detail", fallbacks$1, "regular");
 
-var backgroundColor$4 = WHITE;
+var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$l = {
-  backgroundColor: backgroundColor$4,
+var fallbackValues$i = {
+  backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
 
@@ -26514,7 +26337,7 @@ var DisplayBox = function DisplayBox(_ref) {
     dataQa: dataQa
   }, children));
 };
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$l);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$i);
 
 /* 
   Hook that assigns a click event listener to the main document element
@@ -26609,34 +26432,21 @@ 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,
-  useConditionallyAddValidator: useConditionallyAddValidator
+  useToastNotification: useToastNotification
 });
 
 var hoverColor$4 = "#116285";
-var activeColor$5 = "#0E506D";
+var activeColor$4 = "#0E506D";
 var popoverTriggerColor = "#15749D";
-var fallbackValues$m = {
+var fallbackValues$j = {
   hoverColor: hoverColor$4,
-  activeColor: activeColor$5,
+  activeColor: activeColor$4,
   popoverTriggerColor: popoverTriggerColor
 };
 
@@ -26784,7 +26594,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$m);
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -27055,83 +26865,79 @@ var createFormat = function createFormat(formats, formatChar) {
 var FormattedInput = function FormattedInput(_ref) {
   var value = _ref.value,
       formatter = _ref.formatter,
-      onChange = _ref.onChange,
+      _onChange = _ref.onChange,
       props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
 
-  var _useState = React.useState(format$1(formatter)(value)),
-      _useState2 = _slicedToArray$1(_useState, 2),
-      formattedValue = _useState2[0],
-      setFormattedValue = _useState2[1];
-
   var inputEl = React.useRef(null);
-  var stateRefs = React.useRef({
+
+  var _useState = React.useState({
     selectionStart: 0,
     selectionEnd: 0,
-    isDelete: false,
-    rawValue: ''
-  });
+    rawValue: value,
+    "delete": false,
+    formattedValue: format$1(formatter)(value)
+  }),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
   React.useLayoutEffect(function () {
     // A lot of the work here is cursor manipulation
     if (inputEl.current && inputEl.current === document.activeElement) {
-      inputEl.current.setSelectionRange(stateRefs.current.selectionStart, stateRefs.current.selectionEnd);
-    }
-  }, [stateRefs]);
-
-  var handleChange = function handleChange(event) {
-    var deleteKeyPressed = stateRefs.current.isDelete;
-    var maxFormatExceeded = stateRefs.current.rawValue.length >= formatter.formats.length - 1;
-
-    if (maxFormatExceeded && !deleteKeyPressed) {
-      return;
-    }
-    /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
-    * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
-    * the unformatted value for the user's onChange, the formatted string and unformatted injection need
-    * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
-    * old unformatted value.
-    */
-
-
-    var injectionLength = event.target.value.length - formattedValue.length;
-    var end = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? stateRefs.current.selectionStart + injectionLength : stateRefs.current.selectionEnd - 1;
-    var injection = event.target.value.substring(stateRefs.current.selectionStart, end); // Injection is the new unformatted piece of the input
-    // Need to find where to put it
-
-    var rawInjectionPointStart = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter);
-    var rawInjectionPointEnd = formattedToUnformattedIndex(stateRefs.current.selectionEnd, stateRefs.current.rawValue, formatter); // Unformat the previous formatted value for injection
-    // Using the relevant format string, strips away chars not marked with the formatChar
-
-    var unformattedOldValue = unformat(formatter)(formattedValue, stateRefs.current.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
-
-    var injectIntoOldValue = inject(unformattedOldValue);
-    var unformattedNewValue = deleteKeyPressed ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
-    var lengthDifference = unformattedNewValue.length - stateRefs.current.rawValue.length;
-    var rawIndex = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
-    // Applied by useLayoutEffect
-
-    var newFormattedCursorPosition = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, deleteKeyPressed) : deleteKeyPressed ? stateRefs.current.selectionStart : stateRefs.current.selectionEnd;
-    var formattedNewValue = format$1(formatter)(unformattedNewValue);
-    setFormattedValue(formattedNewValue); // Apply the external onChange function to the raw underlying string
-    // This is where the user generally updates the input value
-
-    if (onChange) {
-      onChange(unformattedNewValue);
+      inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
     }
-  };
-
+  });
   return React__default.createElement("input", _extends$2({}, props, {
     ref: inputEl,
     value: format$1(formatter)(value),
     onKeyDown: function onKeyDown(event) {
-      // Keep track of the state of the input before onChange
-      stateRefs.current = {
-        isDelete: event.key === "Backspace" || event.key === "Delete",
+      // Keep track of the state of the input before onChange, including if user is hitting delete
+      setState({
+        rawValue: value,
         selectionStart: event.target.selectionStart,
         selectionEnd: event.target.selectionEnd,
-        rawValue: value
-      };
+        "delete": event.key === "Backspace" || event.key === "Delete",
+        formattedValue: event.target.value
+      });
     },
-    onChange: handleChange
+    onChange: function onChange(event) {
+      /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
+       * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
+       * the unformatted value for the user's onChange, the formatted string and unformatted injection need
+       * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
+       * old unformatted value.
+       */
+      var injectionLength = event.target.value.length - state.formattedValue.length;
+      var end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
+      var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
+      // Need to find where to put it
+
+      var rawInjectionPointStart = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter);
+      var rawInjectionPointEnd = formattedToUnformattedIndex(state.selectionEnd, state.rawValue, formatter); // Unformat the previous formatted value for injection
+      // Using the relevant format string, strips away chars not marked with the formatChar
+
+      var unformattedOldValue = unformat(formatter)(state.formattedValue, state.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+
+      var injectIntoOldValue = inject(unformattedOldValue);
+      var unformattedNewValue = state["delete"] ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
+      var lengthDifference = unformattedNewValue.length - state.rawValue.length;
+      var rawIndex = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
+      // Applied by useLayoutEffect
+
+      var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
+      setState({
+        selectionStart: newFormattedCursorPosition,
+        selectionEnd: newFormattedCursorPosition,
+        rawValue: state.rawValue,
+        "delete": false,
+        formattedValue: state.formattedValue
+      }); // Apply the external onChange function to the raw underlying string
+      // This is where the user generally updates the input value
+
+      if (_onChange) {
+        _onChange(unformattedNewValue);
+      }
+    }
   }));
 };
 
@@ -27157,7 +26963,7 @@ var labelColor$1 = {
   "default": "".concat(CHARADE_GREY),
   disabled: "".concat(CHARADE_GREY)
 };
-var borderColor$3 = {
+var borderColor$1 = {
   "default": "".concat(STORM_GREY),
   disabled: "".concat(STORM_GREY)
 };
@@ -27184,13 +26990,13 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$n = {
+var fallbackValues$k = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
   color: color$7,
   labelColor: labelColor$1,
-  borderColor: borderColor$3,
+  borderColor: borderColor$1,
   lineHeight: lineHeight$2,
   fontSize: fontSize$6,
   errorFontSize: errorFontSize$1,
@@ -27199,8 +27005,8 @@ var fallbackValues$n = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$t = ["showErrors", "themeValues"],
-  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired"];
+var _excluded$u = ["showErrors", "themeValues"],
+  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -27234,7 +27040,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$t);
+    props = _objectWithoutProperties(_ref8, _excluded$u);
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -27288,6 +27094,9 @@ var FormInput = function FormInput(_ref15) {
     dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
     _ref15$isRequired = _ref15.isRequired,
     isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
+    errorFieldExtraStyles = _ref15.errorFieldExtraStyles,
+    _ref15$showFieldError = _ref15.showFieldErrorRow,
+    showFieldErrorRow = _ref15$showFieldError === void 0 ? true : _ref15$showFieldError,
     props = _objectWithoutProperties(_ref15, _excluded2);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -27413,7 +27222,7 @@ var FormInput = function FormInput(_ref15) {
     "data-qa": dataQa || labelTextWhenNoError,
     autoComplete: autocompleteValue,
     required: isRequired
-  }, props))), /*#__PURE__*/React__default.createElement(Stack, {
+  }, props))), showFieldErrorRow && /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
     "aria-live": "polite",
@@ -27422,17 +27231,17 @@ var FormInput = function FormInput(_ref15) {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
+    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }\n              ".concat(errorFieldExtraStyles, ";"),
     id: createIdFromString(labelTextWhenNoError, "error message")
   }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
-    extraStyles: "height: ".concat(themeValues.lineHeight, ";")
+    extraStyles: "height: ".concat(themeValues.lineHeight, "; ").concat(errorFieldExtraStyles, ";")
   }), !isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
   }, decorator)));
 };
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$n, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
 
-var _excluded$u = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$v = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -27441,7 +27250,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React__default.createElement(Switcher, {
@@ -27452,24 +27261,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$v = ["childGap", "bottomItem", "children"];
+var _excluded$w = ["childGap", "bottomItem", "children"];
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
     bottomItem = _ref.bottomItem,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$v);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$w = ["themeValues", "children"];
+var _excluded$x = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -27478,7 +27287,7 @@ var FormContainer = function FormContainer(_ref) {
     borderRadius: "4px"
   }, rest), children);
 };
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$n, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$k, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -27499,7 +27308,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
     text: linkText
   })));
 };
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$n, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$k, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -27513,7 +27322,7 @@ var color$8 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$o = {
+var fallbackValues$l = {
   fontSize: fontSize$7,
   padding: padding$1,
   color: color$8
@@ -27555,11 +27364,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
     dataQa: "".concat(qaPrefix, "-3")
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$o, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$l, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$p = {
+var fallbackValues$m = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -27597,11 +27406,11 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$p);
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$m);
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$q = {
+var fallbackValues$n = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -27693,7 +27502,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$q);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$n);
 
 var Hamburger = styled__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -27774,12 +27583,12 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$r = {
+var fallbackValues$o = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
 
-var _excluded$x = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$y = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -27798,7 +27607,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -27813,7 +27622,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$r, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$o, "h1");
 
 var Image = styled__default.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -27948,7 +27757,7 @@ var fontWeight$4 = {
   // fontsize Detail regular
   large: "700" // fontsize Title small
 };
-var fallbackValues$s = {
+var fallbackValues$p = {
   fontWeight: fontWeight$4
 };
 
@@ -27999,15 +27808,15 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
 };
 
-var _excluded$y = ["version"];
+var _excluded$z = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$s, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$p, "default");
 
 var weightTitle = {
   "default": "600",
@@ -28017,7 +27826,7 @@ var detailVariant = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$t = {
+var fallbackValues$q = {
   weightTitle: weightTitle,
   detailVariant: detailVariant
 };
@@ -28065,10 +27874,10 @@ var LineItem = function LineItem(_ref) {
     childGap: "0.25rem"
   }, visibleCustomAttrs));
 };
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$t, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$q, "default");
 
 var color$9 = "#15749D";
-var fallbackValues$u = {
+var fallbackValues$r = {
   color: color$9
 };
 
@@ -28132,7 +27941,7 @@ var Spinner$1 = function Spinner(_ref6) {
     strokeWidth: strokeWidth
   })));
 };
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$u);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$r);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -28148,7 +27957,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$z = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$A = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -28163,7 +27972,7 @@ var NavFooter = function NavFooter(_ref) {
     footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
     isMobile = _ref.isMobile,
     footerWidth = _ref.footerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -28194,7 +28003,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$A = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$B = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -28203,7 +28012,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -28392,7 +28201,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$v = {
+var fallbackValues$s = {
   color: color$a,
   height: height$1
 };
@@ -28534,13 +28343,13 @@ var Placeholder = function Placeholder(_ref4) {
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
 };
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$v, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$s, "default");
 
-var backgroundColor$5 = {
+var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$w = {
-  backgroundColor: backgroundColor$5
+var fallbackValues$t = {
+  backgroundColor: backgroundColor$4
 };
 
 var ProcessingFee = function ProcessingFee(_ref) {
@@ -28566,13 +28375,13 @@ var ProcessingFee = function ProcessingFee(_ref) {
     showQuitLink: false
   }));
 };
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$w, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$t, "default");
 
-var activeColor$6 = MATISSE_BLUE;
+var activeColor$5 = MATISSE_BLUE;
 var inactiveBorderColor = GREY_CHATEAU;
-var fallbackValues$x = {
+var fallbackValues$u = {
   inactiveBorderColor: inactiveBorderColor,
-  activeColor: activeColor$6
+  activeColor: activeColor$5
 };
 
 var HiddenRadioInput = styled__default.input.withConfig({
@@ -28653,13 +28462,13 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     inactiveBorderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
-var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$x);
+var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$u);
 
-var activeColor$7 = "".concat(MATISSE_BLUE);
-var inactiveColor$1 = "".concat(STORM_GREY);
-var fallbackValues$y = {
-  activeColor: activeColor$7,
-  inactiveColor: inactiveColor$1
+var activeColor$6 = "".concat(MATISSE_BLUE);
+var inactiveColor = "".concat(STORM_GREY);
+var fallbackValues$v = {
+  activeColor: activeColor$6,
+  inactiveColor: inactiveColor
 };
 
 var HiddenRadioButton = styled__default.input.withConfig({
@@ -28762,11 +28571,11 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderRadius: "8px"
   })));
 };
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$y);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$v);
 
 var searchIconColor = WHITE;
 var searchIconBackgroundColor = MATISSE_BLUE;
-var fallbackValues$z = {
+var fallbackValues$w = {
   searchIconColor: searchIconColor,
   searchIconBackgroundColor: searchIconBackgroundColor
 };
@@ -28862,12 +28671,12 @@ var Search = function Search(_ref) {
     size: 24
   })));
 };
-var Search$1 = themeComponent(Search, "Search", fallbackValues$z);
+var Search$1 = themeComponent(Search, "Search", fallbackValues$w);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$A = {
+var fallbackValues$x = {
   border: border$2
 };
 
@@ -28940,16 +28749,16 @@ var SearchableSelect = function SearchableSelect(_ref) {
     });
   }))));
 };
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$A, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$x, "default");
 
-var borderColor$4 = {
+var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$B = {
-  borderColor: borderColor$4,
+var fallbackValues$y = {
+  borderColor: borderColor$2,
   borderSize: borderSize
 };
 
@@ -28966,7 +28775,7 @@ var SolidDivider = function SolidDivider(_ref) {
     borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$B, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$y, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -39552,7 +39361,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$C = {
+var fallbackValues$z = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   disabledBackgroundLight: disabledBackgroundLight,
@@ -39729,7 +39538,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     padding: "0"
   }, label))));
 };
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$C);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$z);
 
 var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -39771,12 +39580,12 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$6 = WHITE;
+var backgroundColor$5 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
-var fallbackValues$D = {
-  backgroundColor: backgroundColor$6,
+var fallbackValues$A = {
+  backgroundColor: backgroundColor$5,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
   headerColor: headerColor
@@ -39799,7 +39608,7 @@ var CardImage = styled__default.img.withConfig({
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
 var textColor$3 = BRIGHT_GREY;
-var fallbackValues$E = {
+var fallbackValues$B = {
   titleColor: titleColor,
   titleWeight: titleWeight,
   textColor: textColor$3
@@ -39823,7 +39632,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$E);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$B);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -39925,14 +39734,14 @@ var Card = function Card(_ref) {
     titleVariant: titleVariant
   }), children)))));
 };
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$D);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$A);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$8 = MATISSE_BLUE;
+var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$F = {
+var fallbackValues$C = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$8,
+  activeColor: activeColor$7,
   linkColor: linkColor$3
 };
 
@@ -39959,7 +39768,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$F);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$C);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -40057,12 +39866,12 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$7 = {
+var backgroundColor$6 = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$G = {
+var fallbackValues$D = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -40072,7 +39881,7 @@ var fallbackValues$G = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$7
+  backgroundColor: backgroundColor$6
 };
 
 /*
@@ -40142,7 +39951,7 @@ var Module = function Module(_ref) {
     boxShadow: themeValues.boxShadow
   }, children)));
 };
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$G, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$D, "default"));
 
 var WalletName = function WalletName(_ref) {
   var mainText = _ref.mainText,
@@ -40209,6 +40018,138 @@ 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) =>
@@ -41026,7 +40967,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$8 = "#ebeffb";
-var fallbackValues$H = {
+var fallbackValues$G = {
   backgroundColor: backgroundColor$8
 };
 
@@ -41075,7 +41016,7 @@ var Banner = function Banner(_ref) {
     extraStyles: isMobile && "> svg { width: 176px; }"
   }, /*#__PURE__*/React__default.createElement(Image, null))));
 };
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$H);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$G);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -41209,7 +41150,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$I = {
+var fallbackValues$H = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -41334,7 +41275,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$I);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$H);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -41868,7 +41809,6 @@ 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,
@@ -41900,7 +41840,7 @@ var EmailForm = function EmailForm(_ref) {
 
 var formConfig$3 = {
   email: {
-    validators: [isProbablyEmail()] // 'required' validator is conditionally added based on `isRequired` prop
+    validators: [required(), isProbablyEmail()]
   }
 };
 var _createFormState$3 = createFormState(formConfig$3),
@@ -41914,7 +41854,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$J = {
+var fallbackValues$I = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41945,7 +41885,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
     rightContent: rightSubfooterContent
   }));
 };
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$J);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$I);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var fields = _ref.fields,
@@ -41992,7 +41932,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
 var backgroundColor$9 = "#182848";
-var fallbackValues$K = {
+var fallbackValues$J = {
   textColor: textColor$4,
   backgroundColor: backgroundColor$9
 };
@@ -42051,7 +41991,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$K);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$J);
 
 var AccountBillIcon = function AccountBillIcon(_ref) {
   var color = _ref.color;
@@ -42467,7 +42407,7 @@ var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
 var color$b = ROYAL_BLUE_VIVID;
-var fallbackValues$L = {
+var fallbackValues$K = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
   disabledColor: disabledColor$1,
@@ -42588,7 +42528,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "margin-right: auto;"
   }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$L, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$K, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -46576,11 +46516,11 @@ var Modal$2 = function Modal(_ref) {
 };
 var ModalControlV2 = withWindowSize(Modal$2);
 
-var _excluded$B = ["version"];
+var _excluded$D = ["version"];
 var Modal$3 = function Modal(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
   return /*#__PURE__*/React__default.createElement(ModalControl, rest);
 };
@@ -46593,7 +46533,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$M = {
+var fallbackValues$L = {
   backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
@@ -46633,7 +46573,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     onBlur: onBlur
   }, menuContent));
 };
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$M, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$L, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -46693,7 +46633,7 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
     background: themeValues.backgroundColor
   }, menuContent));
 };
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$M, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$L, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -47220,7 +47160,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var iconColor = ROYAL_BLUE_VIVID;
-var fallbackValues$N = {
+var fallbackValues$M = {
   iconColor: iconColor
 };
 
@@ -47442,7 +47382,7 @@ var Obligation = function Obligation(_ref) {
   }))));
   return inactive ? inactiveObligation : activeObligation;
 };
-var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$N);
+var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$M);
 
 var PartialAmountField = function PartialAmountField(_ref) {
   var lineItem = _ref.lineItem,
@@ -47579,9 +47519,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
-var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$O = {
-  activeColor: activeColor$9,
+var activeColor$8 = MATISSE_BLUE;
+var fallbackValues$N = {
+  activeColor: activeColor$8,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47774,7 +47714,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$O);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$N);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47875,14 +47815,14 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$P = {
+var fallbackValues$O = {
   backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$C = ["amount"],
+var _excluded$E = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -48125,7 +48065,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$C);
+      rest = _objectWithoutProperties(_ref5, _excluded$E);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -48244,7 +48184,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$P, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$O, "default");
 
 var linkColor$4 = {
   "default": "#3176AA"
@@ -48264,7 +48204,7 @@ var modalLinkHoverFocus = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$Q = {
+var fallbackValues$P = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -48328,7 +48268,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$Q, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$P, "default");
 
 var backgroundColor$d = {
   "default": "#ffffff",
@@ -48363,7 +48303,7 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$R = {
+var fallbackValues$Q = {
   backgroundColor: backgroundColor$d,
   linkColor: linkColor$5,
   border: border$3,
@@ -48435,7 +48375,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$Q, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -48562,11 +48502,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$D = ["version"];
+var _excluded$F = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -49104,7 +49044,6 @@ 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,
@@ -49134,8 +49073,7 @@ var PhoneForm = function PhoneForm(_ref) {
 
 var formConfig$8 = {
   phone: {
-    validators: [hasLength(10, 10)],
-    // 'required' validator is conditionally added based on `isRequired` prop
+    validators: [required(), hasLength(10, 10)],
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };
@@ -49201,7 +49139,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$R = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49368,7 +49306,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$E = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
+var _excluded$G = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -49417,7 +49355,7 @@ var RadioSection = function RadioSection(_ref) {
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
     borderOverride = _ref.borderOverride,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
+    rest = _objectWithoutProperties(_ref, _excluded$G);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -49504,7 +49442,7 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$S);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$R);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -49624,13 +49562,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var GRECIAN_GREY$1 = GRECIAN_GREY;
 var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$T = {
+var fallbackValues$S = {
   bannerBackgroundColor: bannerBackgroundColor
 };
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$T, "ResetConfirmationForm");
+  var themeValues = createThemeValues(themeContext, fallbackValues$S, "ResetConfirmationForm");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49745,13 +49683,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var GRECIAN_GREY$2 = GRECIAN_GREY;
 var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$U = {
+var fallbackValues$T = {
   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$T, "ResetPasswordSuccess");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49800,7 +49738,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$V = {
+var fallbackValues$U = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49868,12 +49806,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$V);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$U);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$W = {
+var fallbackValues$V = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49928,7 +49866,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$W);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$V);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49964,7 +49902,7 @@ var Timeout = function Timeout(_ref) {
 };
 var Timeout$1 = withWindowSize(Timeout);
 
-var _excluded$F = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
+var _excluded$H = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
@@ -49993,7 +49931,7 @@ var ToastNotification = function ToastNotification(_ref) {
     screenReaderMessage = _ref.screenReaderMessage,
     _ref$showScreenReader = _ref.showScreenReaderMessage,
     showScreenReaderMessage = _ref$showScreenReader === void 0 ? true : _ref$showScreenReader,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   var screenReaderMessageRef = React.useRef();
   var LIVEREGION_TRANSITION_DELAY = 1000;
   React.useEffect(function () {
@@ -50049,7 +49987,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$X = {
+var fallbackValues$W = {
   fontWeight: fontWeight$8,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -50094,7 +50032,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$W));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -50154,7 +50092,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$Y = {
+var fallbackValues$X = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50176,7 +50114,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$G = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$I = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -50192,7 +50130,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -50221,15 +50159,15 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$Y);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$X);
 
 var hoverColor$5 = "#116285";
-var activeColor$a = "#0E506D";
+var activeColor$9 = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$Z = {
+var fallbackValues$Y = {
   hoverColor: hoverColor$5,
-  activeColor: activeColor$a,
+  activeColor: activeColor$9,
   menuTriggerColor: menuTriggerColor,
   backgroundColor: backgroundColor$e
 };
@@ -50363,7 +50301,372 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Z);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Y);
+
+var primaryColor$1 = INFO_BLUE;
+var secondaryColor = MATISSE_BLUE;
+var fallbackValues$Z = {
+  primaryColor: primaryColor$1,
+  secondaryColor: secondaryColor
+};
+
+var _excluded$J = ["width", "height", "color"];
+var DropdownIconV2 = function DropdownIconV2(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "18" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "19" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#292A33" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$J);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none"
+  }, props), /*#__PURE__*/React__default.createElement("g", {
+    id: "Carrot - Down / Carrot - Down - XS"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    id: "Combined Shape",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.1075 7.45743C13.9122 7.26217 13.5956 7.26216 13.4003 7.45743L8.99233 11.8654L4.59199 7.46509C4.39673 7.26983 4.08014 7.26983 3.88488 7.46509L3.45355 7.89643C3.25828 8.09169 3.25828 8.40827 3.45355 8.60354L8.65078 13.8008C8.84604 13.996 9.16263 13.996 9.35789 13.8008L9.78922 13.3694C9.81738 13.3413 9.84147 13.3106 9.86151 13.2781L14.5413 8.59836C14.7365 8.4031 14.7365 8.08652 14.5413 7.89126L14.1075 7.45743Z",
+    fill: color
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_3043_4463",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "3",
+    y: "7",
+    width: "12",
+    height: "7"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    id: "Combined Shape_2",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.1075 7.45743C13.9122 7.26217 13.5956 7.26216 13.4003 7.45743L8.99233 11.8654L4.59199 7.46509C4.39673 7.26983 4.08014 7.26983 3.88488 7.46509L3.45355 7.89643C3.25828 8.09169 3.25828 8.40827 3.45355 8.60354L8.65078 13.8008C8.84604 13.996 9.16263 13.996 9.35789 13.8008L9.78922 13.3694C9.81738 13.3413 9.84147 13.3106 9.86151 13.2781L14.5413 8.59836C14.7365 8.4031 14.7365 8.08652 14.5413 7.89126L14.1075 7.45743Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_3043_4463)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    id: "Path",
+    d: "M0 0.5H18V18.5H0V0.5Z",
+    fill: color
+  }))));
+};
+
+var StyledContainer = styled__default.div.withConfig({
+  displayName: "MultipleSelectFilter__StyledContainer",
+  componentId: "sc-1wom9fl-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"
+})(["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 StyledFilterButton = styled__default(ButtonWithAction).withConfig({
+  displayName: "MultipleSelectFilter__StyledFilterButton",
+  componentId: "sc-1wom9fl-2"
+})(["min-width:auto;min-height:2.3125rem;margin:0;padding:0.5rem;border-radius:0.25rem;box-shadow:0px 1px 2px 0px rgba(41,42,51,0.1);", " ", ""], function (_ref2) {
+  var textColor = _ref2.textColor;
+  return "\n    color: ".concat(textColor, ";\n  ");
+}, function (_ref3) {
+  var backgroundColor = _ref3.backgroundColor;
+  return "\n    background-color: ".concat(backgroundColor, ";\n    :hover,\n    :active,\n    :focus {\n      background-color: ").concat(backgroundColor, ";\n    }\n  ");
+});
+var 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 _useState = React.useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedIndex = _useState2[0],
+    setFocusedIndex = _useState2[1];
+  var isMaxSelectionReached = maxSelections && maxSelections === (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length);
+  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
+    }
+  }, [focusedIndex]);
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setFocusedIndex(function (prevIndex) {
+        return prevIndex < optionsList.length - 1 ? prevIndex + 1 : 0;
+      });
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setFocusedIndex(function (prevIndex) {
+        return prevIndex > 0 ? prevIndex - 1 : optionsList.length - 1;
+      });
+    } else if (event.key === " ") {
+      // 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]);
+      }
+    } else if (event.key === "Tab") {
+      // Reset focus when tabbing out of the list.
+      setTimeout(function () {
+        setFocusedIndex(-1);
+      }, 500);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Box, {
+    id: id,
+    role: "listbox",
+    padding: "0",
+    extraStyles: "\n        overflow-y: auto; \n        max-height: 250px; \n        display: flex; \n        flex-flow: column;\n      ",
+    onKeyDown: handleKeyDown
+  }, optionsList.map(function (option, index) {
+    var 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 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),
+      title: option.name,
+      name: option.name,
+      checked: isChecked,
+      onChange: function onChange() {
+        return isDisabled ? noop : selectOption(option);
+      },
+      textExtraStyles: "font-size: 0.875rem; margin: 0;",
+      disabled: isDisabled,
+      extraStyles: "\n                padding: 0.075rem 0.325rem; \n                margin: 0;\n                :hover,\n                :active,\n                :focus {\n                  background-color: ".concat(themeValues.primaryColor, ";\n                }\n            "),
+      checkboxMargin: "0.3rem",
+      role: "option",
+      checkboxExtraStyles: "\n                width: 1.375rem; \n                height: 1.375rem; \n                ".concat(isChecked && !isDisabled ? "background: " + themeValues.secondaryColor + ";" : ""),
+      tabIndex: tabIndex
+    }));
+  }));
+};
+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 _useState3 = React.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    itemList = _useState4[0],
+    setItemList = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    opened = _useState6[0],
+    setOpened = _useState6[1];
+  var containerRef = React.useRef(null);
+  var dropdownRef = React.useRef(null);
+  var filterButtonID = "".concat(name, "-filter-button");
+  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) {
+    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+  });
+  var selectValues = function selectValues(items) {
+    return items.map(function (item) {
+      return item.value;
+    });
+  };
+  var selectOption = function selectOption(selectedOption) {
+    if (selectValues(selectedOptions).includes(selectedOption.value)) {
+      var fewerOptions = selectedOptions.filter(function (option) {
+        return option.value !== selectedOption.value;
+      });
+      setSelectedOptions(fewerOptions);
+    } else {
+      var moreOptions = selectedOptions.concat(selectedOption);
+      setSelectedOptions(moreOptions);
+    }
+  };
+  React.useEffect(function () {
+    return setItemList(options);
+  }, [options]);
+  React.useEffect(function () {
+    var filteredItems = options.filter(function (item) {
+      var _item$name, _fields$searchTerm;
+      return item === null || item === void 0 || (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toLowerCase().includes(fields === null || fields === void 0 || (_fields$searchTerm = fields.searchTerm) === null || _fields$searchTerm === void 0 || (_fields$searchTerm = _fields$searchTerm.rawValue) === null || _fields$searchTerm === void 0 ? void 0 : _fields$searchTerm.toLowerCase());
+    });
+    // If no items are filtered, display the entire list of options.
+    if (filteredItems !== null && filteredItems !== void 0 && filteredItems.length) {
+      setItemList(filteredItems);
+    } else {
+      setItemList(options);
+    }
+  }, [fields.searchTerm.rawValue]);
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+      }
+      /*
+        Close the dropdown if we hit the Escape key, 
+        or if we are tabbing forward away from the last button (apply button) 
+        or tabbing backward past the filter button.
+      */
+      if (event.key === "Escape" || event.key === "Tab" && !event.shiftKey && event.target && event.target.id === applyFilterButtonID || event.key === "Tab" && event.shiftKey && event.target && event.target.id === filterButtonID) {
+        setOpened(false);
+        actions.fields.searchTerm.set("");
+        onApply(selectedOptions);
+      }
+    };
+    var handleClickOutside = function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpened(false);
+        actions.fields.searchTerm.set("");
+        onApply(selectedOptions);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(StyledContainer, {
+    ref: containerRef,
+    extraStyles: "".concat(extraStyles)
+  }, /*#__PURE__*/React__default.createElement(StyledFilterButton, {
+    id: filterButtonID,
+    variant: "tertiary",
+    action: function action() {
+      actions.fields.searchTerm.set("");
+      setOpened(!opened);
+    },
+    "aria-haspopup": "listbox",
+    "aria-expanded": opened,
+    "aria-controls": filterDropdownID,
+    backgroundColor: backgroundColor,
+    contentOverride: true
+  }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React__default.createElement(Center, {
+    as: "span",
+    style: {
+      display: "flex",
+      flexDirection: "row"
+    },
+    intrinsic: true
+  }, hasIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    color: contentColor
+  }), /*#__PURE__*/React__default.createElement(Center, {
+    as: "span",
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      padding: "0 0.5rem 0 0.25rem"
+    },
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pS",
+    color: contentColor,
+    extraStyles: "\n                  white-space: nowrap;\n                  overflow: hidden;\n                  text-overflow: ellipsis;\n                  ".concat(truncateBtnTextWidth && "max-width:" + truncateBtnTextWidth, "\n                ")
+  }, selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? "".concat(filterLabel ? filterLabel + ": " : "").concat(selectedOptions[0].name) : "".concat(filterLabel ? filterLabel : "")), /*#__PURE__*/React__default.createElement(Text$1, {
+    color: contentColor,
+    variant: "pS"
+  }, selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? ", +".concat((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - 1, " More") : "")), /*#__PURE__*/React__default.createElement(DropdownIconV2, {
+    color: contentColor
+  }))), /*#__PURE__*/React__default.createElement(StyledFilterDropdown, {
+    id: filterDropdownID,
+    ref: dropdownRef,
+    hidden: !opened,
+    role: "combobox",
+    "aria-expanded": opened,
+    "aria-haspopup": "listbox",
+    "aria-owns": checkboxListID
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 0.5rem"
+  }, searchable && (options === null || options === void 0 ? void 0 : options.length) > 8 && /*#__PURE__*/React__default.createElement(FormInput$1, {
+    autocompleteValue: autocompleteValue,
+    showFieldErrorRow: false,
+    errorMessages: {},
+    field: fields.searchTerm,
+    fieldActions: actions.fields.searchTerm,
+    placeholder: placeholder,
+    disabled: disabled,
+    extraStyles: "\n                height: 2.875rem;\n                border: 0; \n                border-radius: 0;\n                padding: 0.45rem;\n                font-size: 0.875rem;\n                border-bottom: 1px solid ".concat(GHOST_GREY, ";\n             ")
+  })), /*#__PURE__*/React__default.createElement(ScrollableOptionsList, {
+    id: checkboxListID,
+    optionsList: completeOptionsList,
+    selectedOptions: selectedOptions,
+    themeValues: themeValues,
+    selectOption: selectOption,
+    maxSelections: maxSelections,
+    name: name
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0.5rem 0.0625rem 0.5rem",
+    extraStyles: "\n            max-height: 100px; \n            display: flex; \n            flex-flow: row; \n            justify-content: space-between;\n            border-top: 1px solid ".concat(GHOST_GREY, ";\n          ")
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: function action() {
+      setOpened(false);
+      setSelectedOptions([]);
+      actions.fields.searchTerm.set("");
+      onClear();
+    },
+    variant: "tertiary",
+    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"
+  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    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"
+  }))));
+};
+var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$Z);
 
 var pageBackground = "#FBFCFD";
 var fallbackValues$_ = {
@@ -50665,6 +50968,7 @@ exports.AccountsIconSmall = AccountsIconSmall$1;
 exports.AchReturnIcon = AchReturnIcon;
 exports.AddObligation = AddObligation$1;
 exports.AddressForm = AddressForm;
+exports.AgencyIcon = AgencyIcon;
 exports.Alert = Alert$1;
 exports.AllocatedIcon = AllocatedIcon;
 exports.AmountCallout = AmountCallout$1;
@@ -50687,8 +50991,6 @@ 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;
@@ -50774,6 +51076,7 @@ exports.Modal = Modal$3;
 exports.Module = Module$1;
 exports.Motion = Motion;
 exports.MultiCartIcon = MultiCartIcon;
+exports.MultipleSelectFilter = MultipleSelectFilter$1;
 exports.NavFooter = NavFooter;
 exports.NavHeader = NavHeader;
 exports.NavMenuDesktop = NavMenuDesktop$1;
@@ -50840,7 +51143,6 @@ 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;
@@ -50855,7 +51157,7 @@ exports.Table = Table_styled;
 exports.TableBody = TableBody_styled;
 exports.TableCell = TableCell_styled;
 exports.TableHead = TableHead$1;
-exports.TableHeading = TableHeading;
+exports.TableHeading = TableHeading_styled;
 exports.TableListItem = TableListItem;
 exports.TableRow = TableRow$1;
 exports.Tabs = Tabs$1;