@thecb/components 10.7.1-beta.0 → 10.7.1-beta.1

package/dist/index.cjs.js

@@ -39714,7 +39714,11 @@ var WalletName = function WalletName(_ref) {
     _ref$linkButtonExtraS = _ref.linkButtonExtraStyles,
     linkButtonExtraStyles = _ref$linkButtonExtraS === void 0 ? "" : _ref$linkButtonExtraS,
     _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$dataQa = _ref.dataQa,
+    dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+    _ref$actionTextPositi = _ref.actionTextPositionMobile,
+    actionTextPositionMobile = _ref$actionTextPositi === void 0 ? "outside" : _ref$actionTextPositi;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Module$1, {
@@ -39737,17 +39741,18 @@ var WalletName = function WalletName(_ref) {
     radius: "10",
     cx: "12",
     cy: "12"
-  })) : mainText && /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
+  })) : mainText && /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), (actionTextPositionMobile === "inside" || !isMobile) && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, text && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pXS"
   }, text), (text || actionText) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     disabled: disableAction,
     text: actionText,
+    dataQa: dataQa,
     action: action,
     variant: "smallGhost",
     extraStyles: "\n                    margin: 0;\n                    min-width: 0;\n                    span {font-size: 0.75rem;}\n                    ".concat(linkButtonExtraStyles, "\n                ")
-  })))), isMobile && /*#__PURE__*/React__default.createElement(Cluster, {
+  })))), !!isMobile && actionTextPositionMobile === "outside" && /*#__PURE__*/React__default.createElement(Cluster, {
     align: "center",
     justify: text || actionText ? "flex-end" : "flex-start",
     extraStyles: "margin-top: 0.5rem;"
@@ -46661,9 +46666,6 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     setDetailedObligation(obligations, config, obligationAssocID);
     navigateToDetailedObligation(detailsSlug);
   };
-  var handlePayNowClick = disableActions ? noop : function () {
-    return handleClick(obligations);
-  };
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "16px 0 0",
     minWidth: "100%",
@@ -46745,7 +46747,9 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
-    action: handlePayNowClick,
+    action: disableActions ? noop : function () {
+      return handleClick(obligations);
+    },
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
@@ -46755,7 +46759,9 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
-    action: handlePayNowClick,
+    action: disableActions ? noop : function () {
+      return handleClick(obligations);
+    },
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
@@ -47492,7 +47498,11 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     buttonGroupStyles = _ref.buttonGroupStyles,
     _ref$hideAdditionalBu = _ref.hideAdditionalButton,
     hideAdditionalButton = _ref$hideAdditionalBu === void 0 ? false : _ref$hideAdditionalBu,
-    additionalButton = _ref.additionalButton;
+    additionalButton = _ref.additionalButton,
+    _ref$nextButtonTestId = _ref.nextButtonTestId,
+    nextButtonTestId = _ref$nextButtonTestId === void 0 ? null : _ref$nextButtonTestId,
+    _ref$backButtonTestId = _ref.backButtonTestId,
+    backButtonTestId = _ref$backButtonTestId === void 0 ? null : _ref$backButtonTestId;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -47500,7 +47510,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     url: cancelURL,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: cancelText,
+    dataQa: backButtonTestId || cancelText,
     "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
     role: "link"
   }) : backButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -47517,7 +47527,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     text: redirectText,
     variant: forwardButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: redirectText,
+    dataQa: nextButtonTestId || redirectText,
     disabled: isForwardButtonDisabled,
     "aria-labelledby": "".concat(kebabCaseString(redirectText), "-button"),
     role: forwardButtonAriaRole
@@ -47527,7 +47537,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     action: forwardButtonAction,
     isLoading: forwardButtonLoading,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: forwardButtonText,
+    dataQa: nextButtonTestId || forwardButtonText,
     disabled: isForwardButtonDisabled,
     "aria-labelledby": "".concat(kebabCaseString(forwardButtonText), "-button"),
     role: forwardButtonAriaRole
@@ -49051,7 +49061,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$E = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+var _excluded$E = ["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' 
@@ -49099,6 +49109,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$isSectionRequire = _ref.isSectionRequired,
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
+    borderOverride = _ref.borderOverride,
     rest = _objectWithoutProperties(_ref, _excluded$E);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -49131,7 +49142,7 @@ var RadioSection = function RadioSection(_ref) {
   };
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "1px",
-    border: "1px solid ".concat(themeValues.borderColor),
+    border: borderOverride || "1px solid ".concat(themeValues.borderColor),
     borderRadius: "4px",
     extraStyles: containerStyles,
     role: "radiogroup",
@@ -49304,9 +49315,16 @@ RegistrationForm.reducer = reducer$9;
 RegistrationForm.mapStateToProps = mapStateToProps$a;
 RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
+var GRECIAN_GREY$1 = GRECIAN_GREY;
+var bannerBackgroundColor = GRECIAN_GREY$1;
+var fallbackValues$R = {
+  bannerBackgroundColor: bannerBackgroundColor
+};
+
 var ResetConfirmationForm = function ResetConfirmationForm() {
-  var _useContext = React.useContext(styled.ThemeContext),
-    isMobile = _useContext.isMobile;
+  var themeContext = React.useContext(styled.ThemeContext);
+  var themeValues = createThemeValues(themeContext, fallbackValues$R, "ResetConfirmationForm");
+  var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     width: isMobile ? "auto" : "576px",
@@ -49314,7 +49332,7 @@ var ResetConfirmationForm = function ResetConfirmationForm() {
     background: WHITE,
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    background: GRECIAN_GREY,
+    background: themeValues.bannerBackgroundColor,
     minWidth: "100%",
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -49418,9 +49436,16 @@ ResetPasswordForm.reducer = reducer$a;
 ResetPasswordForm.mapStateToProps = mapStateToProps$b;
 ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
-var ResetConfirmationForm$2 = function ResetConfirmationForm() {
-  var _useContext = React.useContext(styled.ThemeContext),
-    isMobile = _useContext.isMobile;
+var GRECIAN_GREY$2 = GRECIAN_GREY;
+var bannerBackgroundColor$1 = GRECIAN_GREY$2;
+var fallbackValues$S = {
+  bannerBackgroundColor: bannerBackgroundColor$1
+};
+
+var ResetPasswordSuccess = function ResetPasswordSuccess() {
+  var themeContext = React.useContext(styled.ThemeContext);
+  var themeValues = createThemeValues(themeContext, fallbackValues$S, "ResetPasswordSuccess");
+  var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     width: isMobile ? "auto" : "576px",
@@ -49428,7 +49453,7 @@ var ResetConfirmationForm$2 = function ResetConfirmationForm() {
     background: WHITE,
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    background: GRECIAN_GREY,
+    background: themeValues.bannerBackgroundColor,
     minWidth: "100%",
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -49463,12 +49488,12 @@ var ResetConfirmationForm$2 = function ResetConfirmationForm() {
     linkExtraStyles: "width: 100%;"
   }))))));
 };
-var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
+var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$R = {
+var fallbackValues$T = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49536,12 +49561,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$R);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$T);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$S = {
+var fallbackValues$U = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49596,7 +49621,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$S);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$U);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49696,7 +49721,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$T = {
+var fallbackValues$V = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -49741,7 +49766,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$T));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$V));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49801,7 +49826,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$U = {
+var fallbackValues$W = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -49868,13 +49893,13 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$U);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$W);
 
 var hoverColor$6 = "#116285";
 var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$V = {
+var fallbackValues$X = {
   hoverColor: hoverColor$6,
   activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
@@ -50010,10 +50035,10 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$V);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$X);
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$W = {
+var fallbackValues$Y = {
   pageBackground: pageBackground
 };
 
@@ -50061,7 +50086,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$W));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$Y));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -50104,7 +50129,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$W));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$Y));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -50150,7 +50175,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$W));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$Y));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -50203,7 +50228,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$W));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$Y));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50273,7 +50298,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$W));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$Y));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -50471,7 +50496,7 @@ exports.RejectedVelocityIcon = RejectedVelocityIcon;
 exports.ResetConfirmationForm = ResetConfirmationForm$1;
 exports.ResetPasswordForm = ResetPasswordForm;
 exports.ResetPasswordIcon = ResetPasswordIcon;
-exports.ResetPasswordSuccess = ResetPasswordSuccess;
+exports.ResetPasswordSuccess = ResetPasswordSuccess$1;
 exports.RevenueManagementImage = RevenueManagementImage;
 exports.RoutingNumberImage = RoutingNumberImage;
 exports.SearchIcon = SearchIcon;