@thecb/components 10.7.8-beta.0 → 10.8.0-beta.0

package/dist/index.esm.js

@@ -14706,10 +14706,14 @@ var NotFoundIcon = function NotFoundIcon() {
   }))))));
 };
 
-var SearchIcon = function SearchIcon() {
+var SearchIcon = function SearchIcon(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "22px" : _ref$size;
   return /*#__PURE__*/React.createElement("svg", {
-    width: "22px",
-    height: "22px",
+    width: size,
+    height: size,
     viewBox: "0 0 22 22",
     version: "1.1"
   }, /*#__PURE__*/React.createElement("g", {
@@ -14721,7 +14725,7 @@ var SearchIcon = function SearchIcon() {
   }, /*#__PURE__*/React.createElement("g", {
     id: "Debt-Search---Expanded",
     transform: "translate(-155.000000, -258.000000)",
-    stroke: "#292A33",
+    stroke: color,
     strokeWidth: "2"
   }, /*#__PURE__*/React.createElement("g", {
     id: "debt-search",
@@ -28569,10 +28573,113 @@ var RadioButton$1 = function RadioButton(_ref2) {
 };
 var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$v);
 
+var searchIconColor = WHITE;
+var searchIconBackgroundColor = MATISSE_BLUE;
+var fallbackValues$w = {
+  searchIconColor: searchIconColor,
+  searchIconBackgroundColor: searchIconBackgroundColor
+};
+
+/**
+ * Search accepts a redux-freeform field and actions to use
+ * for its `FormInput` state, as well as a dataset and the keys you wish
+ * to include in your search.
+ *
+ * The `dataset` expected is a one-dimensional array of objects.
+ * Properties within the objects are included in the traversal
+ * when they are present in the ``valuesToSearchFor` prop.
+ *
+ * This component expects implementations of `onSearchCallback` and `onClearCallback`
+ * in the consuming application. For example, if you want to filter a table based on
+ * this search, this would trigger the adjustment of your table data's state in your
+ * consuming application.
+ */
+
+var Search = function Search(_ref) {
+  var actions = _ref.actions,
+    fields = _ref.fields,
+    dataset = _ref.dataset,
+    valuesToSearchFor = _ref.valuesToSearchFor,
+    onSearchCallback = _ref.onSearchCallback,
+    onClearCallback = _ref.onClearCallback,
+    disabled = _ref.disabled,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
+    _ref$searchOnKeypress = _ref.searchOnKeypress,
+    searchOnKeypress = _ref$searchOnKeypress === void 0 ? false : _ref$searchOnKeypress,
+    _ref$searchContainerW = _ref.searchContainerWidth,
+    searchContainerWidth = _ref$searchContainerW === void 0 ? null : _ref$searchContainerW,
+    _ref$searchFieldName = _ref.searchFieldName,
+    searchFieldName = _ref$searchFieldName === void 0 ? "searchTerm" : _ref$searchFieldName,
+    autocompleteValue = _ref.autocompleteValue,
+    ariaControlsId = _ref.ariaControlsId,
+    themeValues = _ref.themeValues;
+  var searchTerm = fields[searchFieldName].rawValue;
+  var getFilteredDataset = function getFilteredDataset() {
+    if (!searchTerm) return dataset;
+    return dataset.filter(function (item) {
+      return valuesToSearchFor.some(function (key) {
+        var _item$key;
+        return (_item$key = item[key]) === null || _item$key === void 0 ? void 0 : _item$key.toString().toLowerCase().includes(searchTerm.toLowerCase());
+      });
+    });
+  };
+  var handleSubmit = function handleSubmit() {
+    return onSearchCallback(getFilteredDataset());
+  };
+  return /*#__PURE__*/React.createElement(Cluster, {
+    extraStyles: "overflow: visible;"
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "\n          flex-grow: ".concat(searchContainerWidth ? 0 : 1, "; \n          width: ").concat(searchContainerWidth, " : auto;")
+  }, /*#__PURE__*/React.createElement(FormInput$1, {
+    id: "searchInput",
+    role: "search",
+    "aria-controls": ariaControlsId,
+    autocompleteValue: autocompleteValue,
+    extraStyles: "border-radius: 2px 0 0 2px;",
+    onKeyDown: function onKeyDown(e) {
+      return searchOnKeypress || e.key === "Enter" ? handleSubmit() : noop;
+    },
+    field: fields[searchFieldName],
+    fieldActions: actions.fields[searchFieldName],
+    placeholder: placeholder,
+    errorMessages: {},
+    disabled: disabled
+  }), searchTerm.length > 0 && /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "\n            position: absolute;\n            right: 8px;\n            top: 10px;\n          "
+  }, /*#__PURE__*/React.createElement(ButtonWithAction, {
+    extraStyles: "* > span { text-decoration: none; }",
+    type: "reset",
+    variant: "smallGhost",
+    text: "Clear Search",
+    "aria-label": "Clear Search",
+    action: function action() {
+      actions.fields[searchFieldName].set("");
+      onClearCallback();
+    }
+  }))), /*#__PURE__*/React.createElement(ButtonWithAction, {
+    type: "submit",
+    "aria-label": "Submit search",
+    minWidth: "0",
+    width: "3rem",
+    padding: ".5rem",
+    extraStyles: "\n          height: 48px; \n          margin: 4px 0 0;\n          border-radius: 0 2px 2px 0;\n          background: ".concat(themeValues.searchIconBackgroundColor, ";\n        "),
+    variant: "primary",
+    contentOverride: true,
+    action: handleSubmit
+  }, /*#__PURE__*/React.createElement(SearchIcon, {
+    color: themeValues.searchIconColor,
+    size: 24
+  })));
+};
+var Search$1 = themeComponent(Search, "Search", fallbackValues$w);
+
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$w = {
+var fallbackValues$x = {
   border: border$2
 };
 
@@ -28645,7 +28752,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
     });
   }))));
 };
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$w, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$x, "default");
 
 var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
@@ -28653,7 +28760,7 @@ var borderColor$2 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$x = {
+var fallbackValues$y = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -28671,7 +28778,7 @@ var SolidDivider = function SolidDivider(_ref) {
     borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$x, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$y, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -39257,7 +39364,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$y = {
+var fallbackValues$z = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   disabledBackgroundLight: disabledBackgroundLight,
@@ -39434,7 +39541,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     padding: "0"
   }, label))));
 };
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$y);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$z);
 
 var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -39480,7 +39587,7 @@ var backgroundColor$5 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
-var fallbackValues$z = {
+var fallbackValues$A = {
   backgroundColor: backgroundColor$5,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
@@ -39504,7 +39611,7 @@ var CardImage = styled.img.withConfig({
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
 var textColor$3 = BRIGHT_GREY;
-var fallbackValues$A = {
+var fallbackValues$B = {
   titleColor: titleColor,
   titleWeight: titleWeight,
   textColor: textColor$3
@@ -39528,7 +39635,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$A);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$B);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -39630,12 +39737,12 @@ var Card = function Card(_ref) {
     titleVariant: titleVariant
   }), children)))));
 };
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$z);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$A);
 
 var fontFamily$6 = "Public Sans, sans-serif";
 var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$B = {
+var fallbackValues$C = {
   fontFamily: fontFamily$6,
   activeColor: activeColor$7,
   linkColor: linkColor$3
@@ -39664,7 +39771,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$B);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$C);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -39767,7 +39874,7 @@ var backgroundColor$6 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$C = {
+var fallbackValues$D = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -39847,7 +39954,7 @@ var Module = function Module(_ref) {
     boxShadow: themeValues.boxShadow
   }, children)));
 };
-var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$C, "default"));
+var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$D, "default"));
 
 var WalletName = function WalletName(_ref) {
   var mainText = _ref.mainText,
@@ -39952,7 +40059,7 @@ var TableCell_styled = styled.td.withConfig({
 
 var backgroundColor$7 = ALABASTER_WHITE;
 var borderColor$3 = GREY_CHATEAU;
-var fallbackValues$D = {
+var fallbackValues$E = {
   backgroundColor: backgroundColor$7,
   borderColor: borderColor$3
 };
@@ -39974,7 +40081,7 @@ var StyledTableHead = styled.thead.withConfig({
 
 var borderColor$4 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
-var fallbackValues$E = {
+var fallbackValues$F = {
   borderColor: borderColor$4,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
@@ -40013,7 +40120,7 @@ var TableRow = function TableRow(_ref) {
     hoverBackgroundColor: themeValues.hoverBackgroundColor
   }, props), children);
 };
-var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$E);
+var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$F);
 
 var TableHead = function TableHead(_ref) {
   var children = _ref.children,
@@ -40028,7 +40135,7 @@ var TableHead = function TableHead(_ref) {
     hoverEffect: false
   }, children));
 };
-var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$D);
+var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$E);
 
 var TableHeading_styled = styled.th.withConfig({
   displayName: "TableHeadingstyled",
@@ -40863,7 +40970,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$8 = "#ebeffb";
-var fallbackValues$F = {
+var fallbackValues$G = {
   backgroundColor: backgroundColor$8
 };
 
@@ -40912,7 +41019,7 @@ var Banner = function Banner(_ref) {
     extraStyles: isMobile && "> svg { width: 176px; }"
   }, /*#__PURE__*/React.createElement(Image, null))));
 };
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$F);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$G);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -41046,7 +41153,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$G = {
+var fallbackValues$H = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -41171,7 +41278,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$G);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$H);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -41750,7 +41857,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$H = {
+var fallbackValues$I = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41781,7 +41888,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
     rightContent: rightSubfooterContent
   }));
 };
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$H);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$I);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var fields = _ref.fields,
@@ -41828,7 +41935,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
 var backgroundColor$9 = "#182848";
-var fallbackValues$I = {
+var fallbackValues$J = {
   textColor: textColor$4,
   backgroundColor: backgroundColor$9
 };
@@ -41887,7 +41994,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     }, t));
   }), repeat( /*#__PURE__*/React.createElement(Box, null), boxesAfter))));
 };
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$I);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$J);
 
 var AccountBillIcon = function AccountBillIcon(_ref) {
   var color = _ref.color;
@@ -42303,7 +42410,7 @@ var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
 var color$b = ROYAL_BLUE_VIVID;
-var fallbackValues$J = {
+var fallbackValues$K = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
   disabledColor: disabledColor$1,
@@ -42424,7 +42531,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "margin-right: auto;"
   }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$J, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$K, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -46132,8 +46239,6 @@ var CloseButton = function CloseButton(_ref) {
     buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
     _ref$closeButtonText = _ref.closeButtonText,
     closeButtonText = _ref$closeButtonText === void 0 ? "" : _ref$closeButtonText,
-    _ref$closeButtonVaria = _ref.closeButtonVariant,
-    closeButtonVariant = _ref$closeButtonVaria === void 0 ? "primary" : _ref$closeButtonVaria,
     _ref$hideModal = _ref.hideModal,
     hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
     _ref$isMobile = _ref.isMobile,
@@ -46150,7 +46255,7 @@ var CloseButton = function CloseButton(_ref) {
     role: "button",
     text: closeButtonText,
     textExtraStyles: "".concat(fontSize),
-    variant: closeButtonVariant
+    variant: "primary"
   });
 };
 
@@ -46246,8 +46351,6 @@ var Modal$2 = function Modal(_ref) {
     children = _ref$children === void 0 ? [] : _ref$children,
     _ref$closeButtonText = _ref.closeButtonText,
     closeButtonText = _ref$closeButtonText === void 0 ? "Close" : _ref$closeButtonText,
-    _ref$closeButtonVaria = _ref.closeButtonVariant,
-    closeButtonVariant = _ref$closeButtonVaria === void 0 ? "primary" : _ref$closeButtonVaria,
     _ref$continueAction = _ref.continueAction,
     continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
     _ref$continueButtonTe = _ref.continueButtonText,
@@ -46402,7 +46505,6 @@ var Modal$2 = function Modal(_ref) {
   }), hasCloseButton && /*#__PURE__*/React.createElement(CloseButton, {
     buttonExtraStyles: buttonExtraStyles,
     closeButtonText: closeButtonText,
-    closeButtonVariant: closeButtonVariant,
     hideModal: hideModal,
     isMobile: isMobile,
     key: "close"
@@ -46429,7 +46531,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$K = {
+var fallbackValues$L = {
   backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
@@ -46469,7 +46571,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     onBlur: onBlur
   }, menuContent));
 };
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$K, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$L, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -46529,7 +46631,7 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
     background: themeValues.backgroundColor
   }, menuContent));
 };
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$K, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$L, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -47056,7 +47158,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var iconColor = ROYAL_BLUE_VIVID;
-var fallbackValues$L = {
+var fallbackValues$M = {
   iconColor: iconColor
 };
 
@@ -47278,7 +47380,7 @@ var Obligation = function Obligation(_ref) {
   }))));
   return inactive ? inactiveObligation : activeObligation;
 };
-var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$L);
+var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$M);
 
 var PartialAmountField = function PartialAmountField(_ref) {
   var lineItem = _ref.lineItem,
@@ -47416,7 +47518,7 @@ var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
 var activeColor$8 = MATISSE_BLUE;
-var fallbackValues$M = {
+var fallbackValues$N = {
   activeColor: activeColor$8,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
@@ -47610,7 +47712,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$M);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$N);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47711,7 +47813,7 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$N = {
+var fallbackValues$O = {
   backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -48082,7 +48184,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$N, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$O, "default");
 
 var linkColor$4 = {
   "default": "#3176AA"
@@ -48102,7 +48204,7 @@ var modalLinkHoverFocus = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$O = {
+var fallbackValues$P = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -48166,7 +48268,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$O, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$P, "default");
 
 var backgroundColor$d = {
   "default": "#ffffff",
@@ -48201,7 +48303,7 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$P = {
+var fallbackValues$Q = {
   backgroundColor: backgroundColor$d,
   linkColor: linkColor$5,
   border: border$3,
@@ -48273,7 +48375,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     className: "modal-trigger"
   }, link));
 };
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$P, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$Q, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -49037,7 +49139,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GHOST_GREY);
 var focusStyles = "outline: none;";
-var fallbackValues$Q = {
+var fallbackValues$R = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49340,7 +49442,7 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$Q);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$R);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -49460,13 +49562,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var GRECIAN_GREY$1 = GRECIAN_GREY;
 var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$R = {
+var fallbackValues$S = {
   bannerBackgroundColor: bannerBackgroundColor
 };
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$R, "ResetConfirmationForm");
+  var themeValues = createThemeValues(themeContext, fallbackValues$S, "ResetConfirmationForm");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -49581,13 +49683,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var GRECIAN_GREY$2 = GRECIAN_GREY;
 var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$S = {
+var fallbackValues$T = {
   bannerBackgroundColor: bannerBackgroundColor$1
 };
 
 var ResetPasswordSuccess = function ResetPasswordSuccess() {
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$S, "ResetPasswordSuccess");
+  var themeValues = createThemeValues(themeContext, fallbackValues$T, "ResetPasswordSuccess");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -49636,7 +49738,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$T = {
+var fallbackValues$U = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49704,12 +49806,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$T);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$U);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$U = {
+var fallbackValues$V = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49764,7 +49866,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$U);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$V);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49885,7 +49987,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$V = {
+var fallbackValues$W = {
   fontWeight: fontWeight$8,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -49930,7 +50032,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$V));
+var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$W));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49990,7 +50092,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$W = {
+var fallbackValues$X = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50057,13 +50159,13 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$W);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$X);
 
 var hoverColor$5 = "#116285";
 var activeColor$9 = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$X = {
+var fallbackValues$Y = {
   hoverColor: hoverColor$5,
   activeColor: activeColor$9,
   menuTriggerColor: menuTriggerColor,
@@ -50199,10 +50301,10 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$X);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Y);
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$Y = {
+var fallbackValues$Z = {
   pageBackground: pageBackground
 };
 
@@ -50250,7 +50352,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$Y));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$Z));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -50293,7 +50395,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$Y));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$Z));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -50339,7 +50441,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$Y));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$Z));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -50392,7 +50494,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$Y));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$Z));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50462,7 +50564,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$Y));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$Z));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -50494,5 +50596,5 @@ var index$6 = /*#__PURE__*/Object.freeze({
   useToastNotification: useToastNotification
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map