@thecb/components 10.6.0-beta.5 → 10.6.0-beta.7

package/dist/index.cjs.js

@@ -39580,21 +39580,6 @@ var LoadingLine = function LoadingLine(_ref) {
   });
 };
 
-var backgroundColor$6 = {
-  primary: WHITE
-};
-var color$b = {
-  primary: ROYAL_BLUE_VIVID
-};
-var boxShadow$1 = {
-  primary: "box-shadow: 0px 1px 2px 0px rgba(".concat(CHARADE_GREY, ", 0.1);\n    box-shadow: 0px 2px 6px 0px rgba(").concat(CHARADE_GREY, ", 0.2);\n    box-shadow: 0px -1px 0px 0px rgba(").concat(CHARADE_GREY, ", 0.1) inset;")
-};
-var fallbackValues$C = {
-  backgroundColor: backgroundColor$6,
-  color: color$b,
-  boxShadow: boxShadow$1
-};
-
 var fontSize$9 = {
   "default": "1.375rem",
   largeTitle: "1.75rem",
@@ -39630,7 +39615,7 @@ var titleSpacing = {
   largeTitle: "1.125rem",
   small: "0.5rem"
 };
-var boxShadow$2 = {
+var boxShadow$1 = {
   "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
   largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
   small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
@@ -39640,12 +39625,12 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$7 = {
+var backgroundColor$6 = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$D = {
+var fallbackValues$C = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -39653,9 +39638,9 @@ var fallbackValues$D = {
   textAlign: textAlign,
   titleType: titleType,
   titleSpacing: titleSpacing,
-  boxShadow: boxShadow$2,
+  boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$7
+  backgroundColor: backgroundColor$6
 };
 
 /*
@@ -39722,18 +39707,19 @@ var Module = function Module(_ref) {
     boxShadow: themeValues.boxShadow
   }, children)));
 };
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$D, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$C, "default"));
 
 var WalletName = function WalletName(_ref) {
   var mainText = _ref.mainText,
     action = _ref.action,
-    text = _ref.text,
-    actionText = _ref.actionText,
-    themeValues = _ref.themeValues,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? null : _ref$text,
+    _ref$actionText = _ref.actionText,
+    actionText = _ref$actionText === void 0 ? null : _ref$actionText,
     _ref$disableAction = _ref.disableAction,
     disableAction = _ref$disableAction === void 0 ? false : _ref$disableAction,
-    _ref$buttonExtraStyle = _ref.buttonExtraStyles,
-    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$linkButtonExtraS = _ref.linkButtonExtraStyles,
+    linkButtonExtraStyles = _ref$linkButtonExtraS === void 0 ? "" : _ref$linkButtonExtraS,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
   var _useContext = React.useContext(styled.ThemeContext),
@@ -39743,10 +39729,9 @@ var WalletName = function WalletName(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     align: "center",
     justify: !!text || !!actionText ? "space-between" : "flex-start",
-    extraStyles: "\n            box-shadow: ".concat(themeValues.boxShadow, ";\n            padding: 1.5rem;\n            ").concat(isMobile ? "span {text-align: right;}" : "", "\n          ")
+    extraStyles: "\n            box-shadow: 0px 1px 2px 0px rgba(".concat(CHARADE_GREY, ", 0.1);\n            box-shadow: 0px 2px 6px 0px rgba(").concat(CHARADE_GREY, ", 0.2);\n            box-shadow: 0px -1px 0px 0px rgba(").concat(CHARADE_GREY, ", 0.1) inset;\n            padding: 1.5rem;\n            ").concat(isMobile ? "span {text-align: right;}" : "", "\n          ")
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: ""
+    padding: "0"
   }, isLoading ? /*#__PURE__*/React__default.createElement(Center, {
     as: "span",
     style: {
@@ -39759,7 +39744,7 @@ var WalletName = function WalletName(_ref) {
     radius: "10",
     cx: "12",
     cy: "12"
-  })) : /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
+  })) : mainText && /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, text && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pXS"
@@ -39768,7 +39753,7 @@ var WalletName = function WalletName(_ref) {
     text: actionText,
     action: action,
     variant: "smallGhost",
-    extraStyles: "\n                  margin: 0;\n                  min-width: 0;\n                  span {font-size: 0.75rem;}\n                  ".concat(buttonExtraStyles, "\n                ")
+    extraStyles: "\n                    margin: 0;\n                    min-width: 0;\n                    span {font-size: 0.75rem;}\n                    ".concat(linkButtonExtraStyles, "\n                ")
   })))), isMobile && /*#__PURE__*/React__default.createElement(Cluster, {
     align: "center",
     justify: text || actionText ? "flex-end" : "flex-start",
@@ -39780,10 +39765,9 @@ var WalletName = function WalletName(_ref) {
     action: action,
     variant: "smallGhost",
     disabled: disableAction,
-    extraStyles: "\n                margin: 0;\n                min-width: 0;\n                span {font-size: 0.75rem;}\n                ".concat(buttonExtraStyles, "\n              ")
+    extraStyles: "\n                margin: 0;\n                min-width: 0;\n                span {font-size: 0.75rem;}\n                ".concat(linkButtonExtraStyles, "\n              ")
   })));
 };
-var WalletName$1 = themeComponent(WalletName, "WalletName", fallbackValues$C, "primary");
 
 var Table_styled = styled__default.table.withConfig({
   displayName: "Tablestyled",
@@ -39821,10 +39805,10 @@ var TableCell_styled = styled__default.td.withConfig({
   return extraStyles;
 });
 
-var backgroundColor$8 = ALABASTER_WHITE;
+var backgroundColor$7 = ALABASTER_WHITE;
 var borderColor$3 = GREY_CHATEAU;
-var fallbackValues$E = {
-  backgroundColor: backgroundColor$8,
+var fallbackValues$D = {
+  backgroundColor: backgroundColor$7,
   borderColor: borderColor$3
 };
 
@@ -39845,7 +39829,7 @@ var StyledTableHead = styled__default.thead.withConfig({
 
 var borderColor$4 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
-var fallbackValues$F = {
+var fallbackValues$E = {
   borderColor: borderColor$4,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
@@ -39884,7 +39868,7 @@ var TableRow = function TableRow(_ref) {
     hoverBackgroundColor: themeValues.hoverBackgroundColor
   }, props), children);
 };
-var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$F);
+var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$E);
 
 var TableHead = function TableHead(_ref) {
   var children = _ref.children,
@@ -39899,7 +39883,7 @@ var TableHead = function TableHead(_ref) {
     hoverEffect: false
   }, children));
 };
-var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$E);
+var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$D);
 
 var TableHeading_styled = styled__default.th.withConfig({
   displayName: "TableHeadingstyled",
@@ -40379,14 +40363,6 @@ validatorFns[IS_PROBABLY_EMAIL] = (value, args, form) => {
   return new RegExp(/^\S+@\S+\.\S+$/).test(value);
 };
 
-const VALID_NAME = 'validator/VALID_NAME';
-const VALID_NAME_ERROR = 'validator/VALID_NAME_ERROR';
-const validName = createValidator(VALID_NAME, VALID_NAME_ERROR);
-validatorFns[VALID_NAME] = (value, args, form) =>
-  value === ''
-    ? false
-    : new RegExp(/[A-zÀ-ÿ\-,'\S]+(\s?[A-zÀ-ÿ\-,'\S])*/).test(value);
-
 const runValidatorErrorMessage = (type) =>
   `${type} was passed to runValidator, but that validator type does not exist. 
   Please check that you are only calling validator creator functions exported from 
@@ -40733,9 +40709,9 @@ AddressForm.reducer = reducer;
 AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
-var backgroundColor$9 = "#ebeffb";
-var fallbackValues$G = {
-  backgroundColor: backgroundColor$9
+var backgroundColor$8 = "#ebeffb";
+var fallbackValues$F = {
+  backgroundColor: backgroundColor$8
 };
 
 var Banner = function Banner(_ref) {
@@ -40783,7 +40759,7 @@ var Banner = function Banner(_ref) {
     extraStyles: isMobile && "> svg { width: 176px; }"
   }, /*#__PURE__*/React__default.createElement(Image, null))));
 };
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$G);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$F);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -40917,7 +40893,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$H = {
+var fallbackValues$G = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -41042,7 +41018,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$H);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$G);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -41621,7 +41597,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$I = {
+var fallbackValues$H = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41652,7 +41628,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
     rightContent: rightSubfooterContent
   }));
 };
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$I);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$H);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var fields = _ref.fields,
@@ -41698,10 +41674,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
-var backgroundColor$a = "#182848";
-var fallbackValues$J = {
+var backgroundColor$9 = "#182848";
+var fallbackValues$I = {
   textColor: textColor$4,
-  backgroundColor: backgroundColor$a
+  backgroundColor: backgroundColor$9
 };
 
 // this component needs some fix'n
@@ -41758,7 +41734,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$J);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$I);
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -43223,23 +43199,23 @@ var disabledColor$1 = {
 var activeBackgroundColor$1 = {
   primary: CORNFLOWER_BLUE
 };
-var backgroundColor$b = {
+var backgroundColor$a = {
   primary: LINK_WATER
 };
 var borderColor$5 = {
   primary: MOON_RAKER
 };
-var color$c = {
+var color$b = {
   primary: ROYAL_BLUE_VIVID
 };
-var fallbackValues$K = {
+var fallbackValues$J = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
   disabledColor: disabledColor$1,
   activeBackgroundColor: activeBackgroundColor$1,
-  backgroundColor: backgroundColor$b,
+  backgroundColor: backgroundColor$a,
   borderColor: borderColor$5,
-  color: color$c
+  color: color$b
 };
 
 var Container = styled__default(Box).withConfig({
@@ -43353,7 +43329,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "margin-right: auto;"
   }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$K, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$J, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -47343,7 +47319,7 @@ var Modal$3 = function Modal(_ref) {
   return /*#__PURE__*/React__default.createElement(ModalControl, rest);
 };
 
-var backgroundColor$c = {
+var backgroundColor$b = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -47351,8 +47327,8 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$L = {
-  backgroundColor: backgroundColor$c,
+var fallbackValues$K = {
+  backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
 
@@ -47391,7 +47367,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     onBlur: onBlur
   }, menuContent));
 };
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$L, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$K, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -47451,7 +47427,7 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
     background: themeValues.backgroundColor
   }, menuContent));
 };
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$L, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$K, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -47499,14 +47475,14 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
-var color$d = "#15749D";
+var color$c = "#15749D";
 var hoverColor$5 = "#116285";
 var activeColor$8 = "#0E506D";
 var linkColor$4 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
-var fallbackValues$M = {
-  color: color$d,
+var fallbackValues$L = {
+  color: color$c,
   hoverColor: hoverColor$5,
   activeColor: activeColor$8,
   linkColor: linkColor$4,
@@ -47631,7 +47607,7 @@ var AutopayModal = function AutopayModal(_ref) {
     modalOpen: modalOpen
   }, modalExtraProps), renderAutoPayControl());
 };
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$M);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$L);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -48208,6 +48184,39 @@ var Obligation = function Obligation(_ref) {
   return inactive ? inactiveObligation : activeObligation;
 };
 
+var PartialAmountField = function PartialAmountField(_ref) {
+  var lineItem = _ref.lineItem,
+    field = _ref.field,
+    showErrors = _ref.showErrors,
+    errorMessages = _ref.errorMessages,
+    moneyFormat = _ref.moneyFormat,
+    fieldActions = _ref.fieldActions;
+  return /*#__PURE__*/React__default.createElement(FormInput$1, {
+    labelTextWhenNoError: lineItem.description,
+    key: lineItem.id,
+    field: field,
+    fieldActions: fieldActions,
+    showErrors: showErrors,
+    errorMessages: errorMessages,
+    style: {
+      textAlign: "right"
+    },
+    placeholder: "$0.00",
+    formatter: moneyFormat,
+    isNum: true,
+    decorator: /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "p"
+    }, "Amount owed:", "  ", /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "p",
+      weight: "600"
+    }, displayCurrency(lineItem.amount)))
+  });
+};
+function arePropsEqual(prevProps, nextProps) {
+  return equals(prevProps.errorMessages, nextProps.errorMessages) && equals(prevProps.field, nextProps.field) && equals(prevProps.showErrors, nextProps.showErrors) && equals(prevProps.moneyFormat, nextProps.moneyFormat) && equals(prevProps.lineItem, nextProps.lineItem);
+}
+var PartialAmountField$1 = /*#__PURE__*/React__default.memo(PartialAmountField, arePropsEqual);
+
 var PartialAmountForm = function PartialAmountForm(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "default" : _ref$variant,
@@ -48251,25 +48260,15 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
       height: "16px"
     }
   }), /*#__PURE__*/React__default.createElement(FormInputColumn, null, lineItemsNew.map(function (li) {
-    return /*#__PURE__*/React__default.createElement(FormInput$1, {
-      labelTextWhenNoError: li.description,
+    return /*#__PURE__*/React__default.createElement(PartialAmountField$1, {
       key: li.id,
+      lineItem: li,
       field: fields[li.id],
-      fieldActions: actions.fields[li.id],
+      actions: actions,
       showErrors: showErrors,
-      errorMessages: getPartialAmountFormErrors(li.amount),
-      style: {
-        textAlign: "right"
-      },
-      placeholder: "$0.00",
-      formatter: moneyFormat,
-      isNum: true,
-      decorator: /*#__PURE__*/React__default.createElement(Text$1, {
-        variant: "p"
-      }, "Amount owed:", "  ", /*#__PURE__*/React__default.createElement(Text$1, {
-        variant: "p",
-        weight: "600"
-      }, displayCurrency(li.amount)))
+      moneyFormat: moneyFormat,
+      fieldActions: actions.fields[li.id],
+      errorMessages: getPartialAmountFormErrors(li.amount)
     });
   })));
 };
@@ -48321,7 +48320,7 @@ var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$N = {
+var fallbackValues$M = {
   activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
@@ -48515,7 +48514,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$N);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$M);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -48596,7 +48595,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, !hideBackButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, backButton), !hideForwardButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, forwardButton), !hideAdditionalButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, additionalButton))));
 };
 
-var backgroundColor$d = {
+var backgroundColor$c = {
   "default": "transparent",
   small: "transparent"
 };
@@ -48612,8 +48611,8 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$O = {
-  backgroundColor: backgroundColor$d,
+var fallbackValues$N = {
+  backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -48983,7 +48982,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$O, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$N, "default");
 
 var linkColor$5 = {
   "default": "#3176AA"
@@ -49003,7 +49002,7 @@ var modalLinkHoverFocus$1 = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$P = {
+var fallbackValues$O = {
   linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -49067,9 +49066,9 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$P, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$O, "default");
 
-var backgroundColor$e = {
+var backgroundColor$d = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -49102,8 +49101,8 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$Q = {
-  backgroundColor: backgroundColor$e,
+var fallbackValues$P = {
+  backgroundColor: backgroundColor$d,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -49174,7 +49173,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     className: "modal-trigger"
   }, link));
 };
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$Q, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$P, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -49937,7 +49936,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GHOST_GREY);
 var focusStyles = "outline: none;";
-var fallbackValues$R = {
+var fallbackValues$Q = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -50027,10 +50026,10 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     "aria-required": section.required,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
-    onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
+    onClick: isMobile && supportsTouch || section.disabled || section.id === openSection ? noop : function () {
       return toggleOpenSection(section.id);
     },
-    onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
+    onTouchEnd: isMobile && supportsTouch && !section.disabled && section.id !== openSection ? function () {
       return toggleOpenSection(section.id);
     } : noop,
     id: "inner-radio-section-".concat(sectionIndex),
@@ -50239,7 +50238,7 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$R);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$Q);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -50521,7 +50520,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$S = {
+var fallbackValues$R = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -50589,12 +50588,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$S);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$R);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$T = {
+var fallbackValues$S = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -50649,7 +50648,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$T);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$S);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -50741,7 +50740,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$U = {
+var fallbackValues$T = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -50786,7 +50785,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$U));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$T));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -50846,7 +50845,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$V = {
+var fallbackValues$U = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50913,17 +50912,17 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$V);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$U);
 
 var hoverColor$6 = "#116285";
 var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
-var backgroundColor$f = "white";
-var fallbackValues$W = {
+var backgroundColor$e = "white";
+var fallbackValues$V = {
   hoverColor: hoverColor$6,
   activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
-  backgroundColor: backgroundColor$f
+  backgroundColor: backgroundColor$e
 };
 
 var PopupMenuContainer = styled__default(Box).withConfig({
@@ -51055,10 +51054,10 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$W);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$V);
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$X = {
+var fallbackValues$W = {
   pageBackground: pageBackground
 };
 
@@ -51106,7 +51105,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$X));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$W));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51149,7 +51148,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$X));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$W));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51195,7 +51194,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$X));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$W));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51248,7 +51247,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$X));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$W));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -51318,7 +51317,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$X));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$W));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -51560,7 +51559,7 @@ exports.VoidedIcon = VoidedIcon;
 exports.WalletBannerIcon = WalletBannerIcon$1;
 exports.WalletIcon = WalletIcon$1;
 exports.WalletIconSmall = WalletIconSmall$1;
-exports.WalletName = WalletName$1;
+exports.WalletName = WalletName;
 exports.WarningIconXS = WarningIconXS;
 exports.WelcomeModule = WelcomeModule$1;
 exports.WorkflowTile = WorkflowTile;