@thecb/components 10.3.0 → 10.4.0-beta.1

package/dist/index.cjs.js

@@ -6211,7 +6211,7 @@ return numeral;
 }));
 });
 
-var noop = function noop() {};
+var noop$1 = function noop() {};
 var formatMoneyString = function formatMoneyString(s) {
   return numeral(s).format("$0,0.00");
 };
@@ -6345,7 +6345,7 @@ var wrapIndex = function wrapIndex(index, length) {
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  noop: noop,
+  noop: noop$1,
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
@@ -6509,7 +6509,7 @@ var BoxWrapper = styled__default(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
+var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "disabled", "children"];
 
 /*
   Box component to create generic boxes
@@ -6557,6 +6557,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$srOnly = _ref.srOnly,
     srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
     dataQa = _ref.dataQa,
+    _ref$disabled = _ref.disabled,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(BoxWrapper, _extends({
@@ -10532,7 +10533,7 @@ var isRefObject = function (ref) {
     return typeof ref === "object" && ref.hasOwnProperty("current");
 };
 
-var noop$1 = function (v) { return v; };
+var noop$2 = function (v) { return v; };
 var ComponentDragControls = /** @class */ (function () {
     function ComponentDragControls(_a) {
         var ref = _a.ref, values = _a.values, controls = _a.controls;
@@ -10560,7 +10561,7 @@ var ComponentDragControls = /** @class */ (function () {
          * @internal
          */
         this.props = {
-            transformPagePoint: noop$1,
+            transformPagePoint: noop$2,
         };
         /**
          * References to the MotionValues used for tracking the current dragged point.
@@ -12594,10 +12595,54 @@ var WHITE$1 = WHITE,
   TRANSPARENT$1 = TRANSPARENT,
   SAPPHIRE_BLUE$1 = SAPPHIRE_BLUE,
   PEACOCK_BLUE$1 = PEACOCK_BLUE,
+  MANATEE_GREY$1 = MANATEE_GREY,
   MATISSE_BLUE$1 = MATISSE_BLUE,
   RASPBERRY$1 = RASPBERRY,
-  ERROR_COLOR$1 = ERROR_COLOR;
+  ERROR_COLOR$1 = ERROR_COLOR,
+  STORM_GREY$1 = STORM_GREY;
 var LINK_TEXT_DECORATION$1 = LINK_TEXT_DECORATION;
+var disabledBorderColor = {
+  primary: STORM_GREY$1,
+  secondary: STORM_GREY$1,
+  back: TRANSPARENT$1,
+  smallPrimary: STORM_GREY$1,
+  smallSecondary: STORM_GREY$1,
+  smallGhost: TRANSPARENT$1,
+  ghost: TRANSPARENT$1,
+  tertiary: TRANSPARENT$1,
+  danger: STORM_GREY$1,
+  dangerSecondary: STORM_GREY$1,
+  whiteSecondary: TRANSPARENT$1,
+  whitePrimary: TRANSPARENT$1
+};
+var disabledColor = {
+  primary: WHITE$1,
+  secondary: MANATEE_GREY$1,
+  back: MANATEE_GREY$1,
+  smallPrimary: WHITE$1,
+  smallSecondary: MANATEE_GREY$1,
+  smallGhost: MANATEE_GREY$1,
+  ghost: MANATEE_GREY$1,
+  tertiary: MANATEE_GREY$1,
+  danger: WHITE$1,
+  dangerSecondary: MANATEE_GREY$1,
+  whiteSecondary: MANATEE_GREY$1,
+  whitePrimary: MANATEE_GREY$1
+};
+var disabledBackgroundColor = {
+  primary: MANATEE_GREY$1,
+  secondary: TRANSPARENT$1,
+  back: TRANSPARENT$1,
+  smallPrimary: MANATEE_GREY$1,
+  smallSecondary: TRANSPARENT$1,
+  smallGhost: TRANSPARENT$1,
+  ghost: TRANSPARENT$1,
+  tertiary: TRANSPARENT$1,
+  danger: MANATEE_GREY$1,
+  dangerSecondary: TRANSPARENT$1,
+  whiteSecondary: TRANSPARENT$1,
+  whitePrimary: TRANSPARENT$1
+};
 var padding = {
   primary: "0.75rem 1.5rem",
   secondary: "0.75rem 1.5rem",
@@ -12823,7 +12868,10 @@ var fallbackValues$1 = {
   hoverColor: hoverColor,
   activeBackgroundColor: activeBackgroundColor,
   activeBorderColor: activeBorderColor,
-  activeColor: activeColor
+  activeColor: activeColor,
+  disabledColor: disabledColor,
+  disabledBackgroundColor: disabledBackgroundColor,
+  disabledBorderColor: disabledBorderColor
 };
 
 var rotate = posed.div({
@@ -12944,7 +12992,7 @@ var Spinner = function Spinner(_ref) {
 
 var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$action = _ref2.action,
-    action = _ref2$action === void 0 ? noop : _ref2$action,
+    action = _ref2$action === void 0 ? noop$1 : _ref2$action,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? "primary" : _ref2$variant,
     text = _ref2.text,
@@ -12970,9 +13018,9 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   var isMobile = themeContext.isMobile;
-  var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    cursor: pointer;\n  ");
-  var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n  ");
-  var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      outline: 3px solid #6D717E;\n      outline-offset: 2px;\n    }\n    ".concat(extraDisabledStyles, "\n  ");
+  var hoverStyles = "\n      outline: none;\n      background-color: ".concat(themeValues.hoverBackgroundColor, ";\n      border-color: ").concat(themeValues.hoverBorderColor, ";\n      color: ").concat(themeValues.hoverColor, ";\n      text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n      cursor: pointer;\n    ");
+  var activeStyles = "\n      outline: none;\n      background-color: ".concat(themeValues.activeBackgroundColor, ";\n      border-color: ").concat(themeValues.activeBorderColor, ";\n      color: ").concat(themeValues.activeColor, ";\n      text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
+  var disabledStyles = "\n      background-color: ".concat(themeValues.disabledBackgroundColor, ";\n      border-color: ").concat(themeValues.disabledBorderColor, ";\n      color: ").concat(themeValues.disabledColor, ";\n      cursor: default;\n      &:focus {\n        outline: 3px solid ").concat(themeValues.disabledBorderColor, ";\n        outline-offset: 2px;\n      }\n      ").concat(extraDisabledStyles, "\n    ");
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     ref: ref,
     variant: variant,
@@ -13001,7 +13049,7 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }) : /*#__PURE__*/React__default.createElement(Text$1, {
     weight: themeValues.fontWeight,
     variant: themeValues.fontSizeVariant,
-    color: themeValues.color,
+    color: disabled ? themeValues.disabledColor : themeValues.color,
     textDecoration: themeValues.textDecoration,
     textWrap: textWrap,
     extraStyles: textExtraStyles
@@ -13072,7 +13120,9 @@ var AccountsIcon$1 = themeComponent(AccountsIcon, "Icons", fallbackValues$2, "in
 // Fill color based on default "success" variant color
 var AutopayIcon = function AutopayIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? "#317D4F" : _ref$fill;
+    fill = _ref$fill === void 0 ? "#317D4F" : _ref$fill,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#317D4F" : _ref$color;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "16",
     height: "16",
@@ -13096,7 +13146,7 @@ var AutopayIcon = function AutopayIcon(_ref) {
     mask: "url(#mask0_5560_39870)"
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M0 0H16V16H0V0Z",
-    fill: fill
+    fill: fill || color
   })));
 };
 
@@ -19121,13 +19171,15 @@ var background$1 = {
   info: "".concat(INFO_BLUE),
   warn: "".concat(HALF_COLONIAL_WHITE),
   primary: "".concat(CORNFLOWER_BLUE),
-  success: "".concat(HINT_GREEN)
+  success: "".concat(HINT_GREEN),
+  disabled: "".concat(GRECIAN_GREY)
 };
 var color$4 = {
   info: "".concat(MATISSE_BLUE),
   warn: "".concat(ZEST_ORANGE),
   primary: "".concat(ROYAL_BLUE_VIVID),
-  success: "".concat(SEA_GREEN)
+  success: "".concat(SEA_GREEN),
+  disabled: "".concat(MANATEE_GREY)
 };
 var fallbackValues$7 = {
   background: background$1,
@@ -19151,10 +19203,12 @@ var Badge = function Badge(_ref) {
   return /*#__PURE__*/React__default.createElement(StyledBadgeContainer, {
     background: themeValues.background
   }, iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    color: themeValues.color,
     fill: themeValues.color
   }), /*#__PURE__*/React__default.createElement(StyledBadge, {
     color: themeValues.color
   }, label), !iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    color: themeValues.color,
     fill: themeValues.color
   }));
 };
@@ -20527,7 +20581,7 @@ var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackVal
 
 // import theme from "styled-theming";
 var MATISSE_BLUE$2 = MATISSE_BLUE,
-  STORM_GREY$1 = STORM_GREY;
+  STORM_GREY$2 = STORM_GREY;
 var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
 
 /*
@@ -20536,8 +20590,8 @@ var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
 */
 
 var color$5 = "".concat(MATISSE_BLUE$2);
-var activeColor$2 = "".concat(STORM_GREY$1);
-var activeBreadcrumbColor = "".concat(STORM_GREY$1);
+var activeColor$2 = "".concat(STORM_GREY$2);
+var activeBreadcrumbColor = "".concat(STORM_GREY$2);
 var fontSize$2 = "0.875rem";
 var lineHeight = "1.25rem";
 var fontWeight$1 = "400";
@@ -22762,7 +22816,7 @@ var Checkbox = function Checkbox(_ref4) {
     name = _ref4.name,
     checked = _ref4.checked,
     _ref4$onChange = _ref4.onChange,
-    onChange = _ref4$onChange === void 0 ? noop : _ref4$onChange,
+    onChange = _ref4$onChange === void 0 ? noop$1 : _ref4$onChange,
     _ref4$disabled = _ref4.disabled,
     disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
     themeValues = _ref4.themeValues,
@@ -22957,7 +23011,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     padding: "0.875rem",
     borderRadius: "4px",
     minWidth: "30%",
-    onClick: disabled ? noop : onSelect,
+    onClick: disabled ? noop$1 : onSelect,
     borderColor: borderColor,
     borderSize: "1px",
     color: color,
@@ -22972,8 +23026,8 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     name: name,
     "aria-label": name,
     htmlFor: "checkbox-".concat(name, "-").concat(index),
-    onClick: disabled ? noop : onSelect,
-    onKeyDown: disabled ? noop : onSelect,
+    onClick: disabled ? noop$1 : onSelect,
+    onKeyDown: disabled ? noop$1 : onSelect,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
     theme: {
@@ -24456,7 +24510,7 @@ var Dropdown = function Dropdown(_ref13) {
     _ref13$disabledValues = _ref13.disabledValues,
     disabledValues = _ref13$disabledValues === void 0 ? [] : _ref13$disabledValues,
     _ref13$onClick = _ref13.onClick,
-    _onClick = _ref13$onClick === void 0 ? noop : _ref13$onClick,
+    _onClick = _ref13$onClick === void 0 ? noop$1 : _ref13$onClick,
     themeValues = _ref13.themeValues,
     maxHeight = _ref13.maxHeight,
     _ref13$widthFitOption = _ref13.widthFitOptions,
@@ -26072,7 +26126,7 @@ var Popover = function Popover(_ref) {
     extraStyles: "position: relative; ".concat(extraStyles)
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: function action() {
-      return noop;
+      return noop$1;
     },
     onFocus: function onFocus() {
       handleTogglePopover(true);
@@ -27038,7 +27092,7 @@ var HamburgerButton = function HamburgerButton(_ref4) {
     inactiveColor = _ref4.inactiveColor,
     isActive = _ref4.isActive,
     _ref4$onClick = _ref4.onClick,
-    onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick,
+    onClick = _ref4$onClick === void 0 ? noop$1 : _ref4$onClick,
     controls = _ref4.controls;
   return /*#__PURE__*/React__default.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
@@ -27723,7 +27777,9 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
     action = _ref.action,
     destination = _ref.destination,
     children = _ref.children,
-    dataQa = _ref.dataQa;
+    dataQa = _ref.dataQa,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: destination,
     "data-qa": dataQa,
@@ -27733,13 +27789,14 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minHeight: "100%",
-    extraStyles: "cursor: pointer;"
+    extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
   }, children)) : /*#__PURE__*/React__default.createElement(Box, {
-    onClick: action,
+    onClick: disabled ? noop$1 : action,
     padding: "0",
     minHeight: "100%",
-    extraStyles: "cursor: pointer;",
-    dataQa: dataQa
+    dataQa: dataQa,
+    "aria-disabled": disabled,
+    extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
   }, children);
 };
 var Placeholder = function Placeholder(_ref2) {
@@ -27753,12 +27810,16 @@ var Placeholder = function Placeholder(_ref2) {
     variant = _ref2.variant,
     largeIcon = _ref2.largeIcon,
     themeValues = _ref2.themeValues,
-    dataQa = _ref2.dataQa;
+    dataQa = _ref2.dataQa,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
+  var tintedColor = "".concat(curriedTint$1(0.9, themeValues.color));
   return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
     destination: destination,
-    dataQa: dataQa
+    dataQa: dataQa,
+    disabled: disabled
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -27766,14 +27827,14 @@ var Placeholder = function Placeholder(_ref2) {
     minHeight: themeValues.height,
     hiddenStyles: !visible,
     extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
-    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
+    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : tintedColor, ";")
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     tabIndex: "0",
     onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && action();
+      return e.key === "Enter" && !disabled && action();
     }
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
@@ -27885,7 +27946,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     themeValues = _ref5.themeValues,
     index = _ref5.index,
     _ref5$handleChange = _ref5.handleChange,
-    handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
+    handleChange = _ref5$handleChange === void 0 ? noop$1 : _ref5$handleChange,
     field = _ref5.field,
     config = _ref5.config;
   var getDefaultChecked = function getDefaultChecked(value, idx) {
@@ -38769,7 +38830,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
     isOn = _ref6$isOn === void 0 ? false : _ref6$isOn,
     _ref6$onToggle = _ref6.onToggle,
-    onToggle = _ref6$onToggle === void 0 ? noop : _ref6$onToggle,
+    onToggle = _ref6$onToggle === void 0 ? noop$1 : _ref6$onToggle,
     _ref6$disabled = _ref6.disabled,
     disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
     _ref6$name = _ref6.name,
@@ -38877,15 +38938,15 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, /*#__PURE__*/React__default.createElement(HiddenToggleSwitchBox, {
     "aria-label": name,
     checked: isOn,
-    onChange: disabled ? noop : onToggle,
+    onChange: disabled ? noop$1 : onToggle,
     disabled: disabled,
     id: "#toggle-".concat(name),
     isMobile: isMobile
   }), /*#__PURE__*/React__default.createElement(VisibleSwitch, {
     name: name,
     htmlFor: "#toggle-".concat(name),
-    onClick: disabled ? noop : onToggle,
-    onKeyDown: disabled ? noop : handleKeyDown,
+    onClick: disabled ? noop$1 : onToggle,
+    onKeyDown: disabled ? noop$1 : handleKeyDown,
     pose: disabled ? "disabled" : isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
@@ -39977,7 +40038,7 @@ var AddressForm = function AddressForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -40177,7 +40238,7 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     fields = _ref.fields,
     actions = _ref.actions,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showErrors = _ref.showErrors,
     isMobile = _ref.isMobile,
     revenueManagement = _ref.revenueManagement,
@@ -40388,8 +40449,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
-    onClick: isMobile && supportsTouch ? noop : toggleSection,
-    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
+    onClick: isMobile && supportsTouch ? noop$1 : toggleSection,
+    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop$1,
     key: "header",
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
@@ -40607,7 +40668,7 @@ var EditNameForm = function EditNameForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -40947,7 +41008,7 @@ var EmailForm = function EmailForm(_ref) {
     showErrors = _ref.showErrors,
     guestCheckout = _ref.guestCheckout,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -41044,7 +41105,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -42595,10 +42656,22 @@ var PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), ACCOUNTS_DENTAL_ICON, AccountDentalIcon), ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), PROPERTIES_LAND_ICON, PropertyLandIcon), PROPERTIES_CAR_ICON, PropertyCarIcon), PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), MISC_BILL_ICON, AccountBillIcon));
 
-var activeBackgroundColor$1 = CORNFLOWER_BLUE;
-var backgroundColor$9 = LINK_WATER;
-var borderColor$5 = MOON_RAKER;
-var color$b = ROYAL_BLUE_VIVID;
+var activeBackgroundColor$1 = {
+  primary: "".concat(CORNFLOWER_BLUE),
+  disabled: "".concat(TRANSPARENT)
+};
+var backgroundColor$9 = {
+  primary: "".concat(LINK_WATER),
+  disabled: "".concat(TRANSPARENT)
+};
+var borderColor$5 = {
+  primary: "".concat(MOON_RAKER),
+  disabled: "".concat(GHOST_GREY)
+};
+var color$b = {
+  primary: "".concat(ROYAL_BLUE_VIVID),
+  disabled: "".concat(MANATEE_GREY)
+};
 var fallbackValues$I = {
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$9,
@@ -42609,28 +42682,34 @@ var fallbackValues$I = {
 var Container = styled__default(Box).withConfig({
   displayName: "LinkCardstyled__Container",
   componentId: "sc-l5q1h2-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;", " transition:all .2s ease-in-out;&:hover,&:active{cursor:pointer;box-shadow:0px 0px 0px 0px rgba(41,42,51,0.1),0px 5px 11px 0px rgba(41,42,51,0.1),0px 4px 19px 0px rgba(41,42,51,0.09),0px 27px 26px 0px rgba(41,42,51,0.05),0px 56px 31px 0px rgba(41,42,51,0.01),0px 80px 33px 0px rgba(41,42,51,0);}&:hover:not(:active){", "}&:active{", "}"], function (_ref) {
+})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;", " transition:all .2s ease-in-out;&:hover,&:active{cursor:", ";box-shadow:", ";}&:hover:not(:active){", "}&:active{", "}"], function (_ref) {
   var theme = _ref.theme;
   return "\n    background-color: ".concat(theme.backgroundColor, ";\n    border: 1px solid ").concat(theme.borderColor, ";\n  ");
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return "border: 1px solid ".concat(theme.borderColor, ";");
+  var disabled = _ref2.disabled;
+  return disabled ? "default" : "pointer";
 }, function (_ref3) {
-  var theme = _ref3.theme;
-  return "\n      background-color: ".concat(theme.activeBackgroundColor, ";\n      border: 1px solid ").concat(theme.color, ";\n    ;");
+  var disabled = _ref3.disabled;
+  return "\n      ".concat(disabled ? "none" : "0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n      0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n      0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n      0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n      0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n      0px 80px 33px 0px rgba(41, 42, 51, 0);", "\n    ");
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return "border: 1px solid ".concat(theme.borderColor, ";");
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return "\n      background-color: ".concat(theme.activeBackgroundColor, ";\n      border: 1px solid ").concat(theme.borderColor, ";\n    ;");
 });
 var Title$2 = styled__default(Heading$1).withConfig({
   displayName: "LinkCardstyled__Title",
   componentId: "sc-l5q1h2-1"
-})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref4) {
-  var theme = _ref4.theme;
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref6) {
+  var theme = _ref6.theme;
   return "color: ".concat(theme.color, ";");
 });
 var Subtitle = styled__default(Paragraph$1).withConfig({
   displayName: "LinkCardstyled__Subtitle",
   componentId: "sc-l5q1h2-2"
-})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150 %;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref5) {
-  var theme = _ref5.theme;
+})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150 %;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref7) {
+  var theme = _ref7.theme;
   return "color: ".concat(theme.color, ";");
 });
 var Footer = styled__default(Stack).withConfig({
@@ -42639,7 +42718,8 @@ var Footer = styled__default(Stack).withConfig({
 })(["align-items:center;width:100%;"]);
 
 var LinkCard = function LinkCard(_ref) {
-  var _ref$title = _ref.title,
+  var _ref$variant = _ref.variant,
+    _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
     _ref$subtitle = _ref.subtitle,
     subtitle = _ref$subtitle === void 0 ? "Link your benefit plan" : _ref$subtitle,
@@ -42656,7 +42736,9 @@ var LinkCard = function LinkCard(_ref) {
     extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle,
     themeValues = _ref.themeValues,
     _ref$titleVariant = _ref.titleVariant,
-    titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant;
+    titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var regex = /\W/g;
@@ -42673,7 +42755,8 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
-    onClick: onClick
+    onClick: disabled ? noop$1 : onClick,
+    disabled: disabled
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -42704,9 +42787,11 @@ var LinkCard = function LinkCard(_ref) {
     direction: "row",
     childGap: "6px",
     justify: "space-between"
-  }, showLeft && !leftContent && /*#__PURE__*/React__default.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
+  }, showLeft && !!leftContent ? leftContent : /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "margin-right: auto;"
+  }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I);
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -42714,7 +42799,7 @@ var LoginForm = function LoginForm(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -46658,7 +46743,9 @@ var AutopayModal = function AutopayModal(_ref) {
     inactive = _ref.inactive,
     description = _ref.description,
     subDescription = _ref.subDescription,
-    allowedPaymentInstruments = _ref.allowedPaymentInstruments;
+    allowedPaymentInstruments = _ref.allowedPaymentInstruments,
+    _ref$isInCustomerMana = _ref.isInCustomerManagement,
+    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
   var generateMethodNeededText = function generateMethodNeededText(planText, allowedPaymentInstruments) {
     var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
     var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
@@ -46687,6 +46774,7 @@ var AutopayModal = function AutopayModal(_ref) {
       case "secondary":
         {
           return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+            disabled: isInCustomerManagement,
             text: autoPayActive ? "Turn off ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "secondary",
             action: function action() {
@@ -46699,10 +46787,11 @@ var AutopayModal = function AutopayModal(_ref) {
       case "tertiary":
         {
           return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+            disabled: isInCustomerManagement,
             text: autoPayActive ? "Manage ".concat(shortPlan) : "Set Up ".concat(shortPlan),
-            variant: "tertiary",
+            variant: isInCustomerManagement ? "disabledTertiary" : "tertiary",
             action: function action() {
-              toggleModal(true);
+              isInCustomerManagement ? noop$1 : toggleModal(true);
             },
             dataQa: "Manage Autopay",
             extraStyles: isMobile && "flex-grow: 1; width: 100%;"
@@ -46713,7 +46802,7 @@ var AutopayModal = function AutopayModal(_ref) {
           return /*#__PURE__*/React__default.createElement(Box, {
             padding: "0",
             onClick: function onClick() {
-              toggleModal(true);
+              isInCustomerManagement ? noop$1 : toggleModal(true);
             },
             hoverStyles: hoverStyles,
             activeStyles: activeStyles,
@@ -46726,7 +46815,7 @@ var AutopayModal = function AutopayModal(_ref) {
             onClick: function onClick() {
               return toggleModal(true);
             },
-            onKeyPress: function onKeyPress(e) {
+            onKeyPress: isInCustomerManagement ? noop$1 : function (e) {
               e.key === "Enter" && toggleModal(true);
             },
             tabIndex: "0",
@@ -46740,10 +46829,10 @@ var AutopayModal = function AutopayModal(_ref) {
     }
   };
   return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
-    showModal: function showModal() {
+    showModal: isInCustomerManagement ? noop$1 : function () {
       return toggleModal(true);
     },
-    hideModal: function hideModal() {
+    hideModal: isInCustomerManagement ? noop$1 : function () {
       return toggleModal(false);
     },
     modalOpen: modalOpen
@@ -46815,7 +46904,9 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     dueDate = _ref.dueDate,
     description = _ref.description,
     subDescription = _ref.subDescription,
-    allowedPaymentInstruments = _ref.allowedPaymentInstruments;
+    allowedPaymentInstruments = _ref.allowedPaymentInstruments,
+    _ref$isInCustomerMana = _ref.isInCustomerManagement,
+    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -46879,7 +46970,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     padding: isMobile ? "0 8px 0 0" : "0",
     extraStyles: isMobile && "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    variant: "tertiary",
+    variant: isInCustomerManagement ? "disabledTertiary" : "tertiary",
     text: config.type === "ACCOUNT" ? "Account Details" : "Property Details",
     action: handleDetailsClick,
     dataQa: "Account Details",
@@ -46888,14 +46979,15 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     padding: isMobile ? "0 8px 0 0" : "0",
     extraStyles: isMobile && "flex-grow: 1;"
   }, autoPayAvailable && !autoPayEnabled ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    variant: "tertiary",
+    variant: isInCustomerManagement ? "disabledTertiary" : "tertiary",
     text: "Set Up ".concat(planType),
     action: function action() {
       setDetailedObligation(obligations, config, obligationAssocID);
       handleAutopayAction();
     },
     dataQa: "Set Up Autopay",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+    extraStyles: isMobile && "flex-grow: 1; width: 100%;",
+    disabled: isInCustomerManagement
   }) : /*#__PURE__*/React__default.createElement(AutopayModalModule, {
     autoPayActive: autoPayEnabled,
     autoPaySchedule: autoPaySchedule,
@@ -46911,17 +47003,19 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     dueDate: dueDate,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments
+    allowedPaymentInstruments: allowedPaymentInstruments,
+    isInCustomerManagement: isInCustomerManagement
   })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
-    action: function action() {
+    action: isInCustomerManagement ? noop : function () {
       return handleClick(obligations);
     },
     text: "Pay Now",
-    variant: isMobile ? "smallSecondary" : "secondary",
-    dataQa: "Pay Now"
+    variant: isMobile ? isInCustomerManagement ? "disabledSmallSecondary" : "smallSecondary" : isInCustomerManagement ? "disabledSecondary" : "secondary",
+    dataQa: "Pay Now",
+    disabled: isInCustomerManagement
   }))), isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "8px 0 0",
     width: "100%"
@@ -46933,7 +47027,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%; margin: 0;"
+    extraStyles: isMobile && "flex-grow: 1; width: 100%; margin: 0;",
+    disabled: isInCustomerManagement
   }))));
 };
 
@@ -46943,7 +47038,9 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     obligations = _ref$obligations === void 0 ? [] : _ref$obligations,
     removeAccount = _ref.removeAccount,
     accountType = _ref.accountType,
-    isMobile = _ref.isMobile;
+    isMobile = _ref.isMobile,
+    _ref$isInCustomerMana = _ref.isInCustomerManagement,
+    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalIsOpen = _useState2[0],
@@ -46976,12 +47073,13 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: "Remove",
-    variant: "secondary",
-    action: function action() {
+    variant: isInCustomerManagement ? "disabledSecondary" : "secondary",
+    action: isInCustomerManagement ? noop : function () {
       return setModalIsOpen(true);
     },
     dataQa: "Remove Account",
-    extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1;"
+    extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1;",
+    disabled: isInCustomerManagement
   })));
 };
 
@@ -47001,7 +47099,9 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     actions = _ref.actions,
     description = _ref.description,
     subDescription = _ref.subDescription,
-    allowedPaymentInstruments = _ref.allowedPaymentInstruments;
+    allowedPaymentInstruments = _ref.allowedPaymentInstruments,
+    _ref$isInCustomerMana = _ref.isInCustomerManagement,
+    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalOpen = _useState2[0],
@@ -47039,15 +47139,17 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     inactive: true,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments
+    allowedPaymentInstruments: allowedPaymentInstruments,
+    isInCustomerManagement: isInCustomerManagement
   })), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(RemoveAccountModalModule, {
     agencyName: agencyName,
-    removeAccount: handleRemoveAccount,
+    removeAccount: isInCustomerManagement ? noop$1 : handleRemoveAccount,
     accountType: configType === "ACCOUNT" ? "Account" : "Property",
-    isMobile: isMobile
+    isMobile: isMobile,
+    isInCustomerManagement: isInCustomerManagement
   }))));
 };
 
@@ -47105,7 +47207,9 @@ var Obligation = function Obligation(_ref) {
     _ref$inactiveLookupIn = _ref.inactiveLookupInput,
     inactiveLookupInput = _ref$inactiveLookupIn === void 0 ? "Account" : _ref$inactiveLookupIn,
     _ref$inactiveLookupVa = _ref.inactiveLookupValue,
-    inactiveLookupValue = _ref$inactiveLookupVa === void 0 ? "" : _ref$inactiveLookupVa;
+    inactiveLookupValue = _ref$inactiveLookupVa === void 0 ? "" : _ref$inactiveLookupVa,
+    _ref$isInCustomerMana = _ref.isInCustomerManagement,
+    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
   /*
     The value of obligations is always an array. It can contain:
       - A single obligation
@@ -47193,7 +47297,8 @@ var Obligation = function Obligation(_ref) {
     obligationAssocID: obligationAssocID,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments
+    allowedPaymentInstruments: allowedPaymentInstruments,
+    isInCustomerManagement: isInCustomerManagement
   }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -47211,7 +47316,8 @@ var Obligation = function Obligation(_ref) {
     obligationAssocID: obligationAssocID,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments
+    allowedPaymentInstruments: allowedPaymentInstruments,
+    isInCustomerManagement: isInCustomerManagement
   }));
   var inactiveObligation = /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -47267,7 +47373,8 @@ var Obligation = function Obligation(_ref) {
     configType: config.type,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments
+    allowedPaymentInstruments: allowedPaymentInstruments,
+    isInCustomerManagement: isInCustomerManagement
   }))), isMobile && /*#__PURE__*/React__default.createElement(InactiveControlsModule, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -47284,7 +47391,8 @@ var Obligation = function Obligation(_ref) {
     configType: config.type,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments
+    allowedPaymentInstruments: allowedPaymentInstruments,
+    isInCustomerManagement: isInCustomerManagement
   }))));
   return inactive ? inactiveObligation : activeObligation;
 };
@@ -47566,7 +47674,7 @@ var Pagination = function Pagination(_ref3) {
         return setCurrentPage({
           pageNumber: item.index
         });
-      } : noop,
+      } : noop$1,
       textExtraStyles: "font-size: ".concat(fontSize, "; font-weight: ").concat(fontWeight, ";"),
       extraStyles: "".concat(extraStyles).concat(item.active ? currentPageStyles : ""),
       dataQa: index
@@ -47923,7 +48031,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     _ref4$voidableTransac = _ref4.voidableTransactionDetails,
     voidableTransactionDetails = _ref4$voidableTransac === void 0 ? [] : _ref4$voidableTransac,
     _ref4$partialVoidActi = _ref4.partialVoidAction,
-    partialVoidAction = _ref4$partialVoidActi === void 0 ? noop : _ref4$partialVoidActi,
+    partialVoidAction = _ref4$partialVoidActi === void 0 ? noop$1 : _ref4$partialVoidActi,
     _ref4$voidableAmountP = _ref4.voidableAmountPaid,
     voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP,
     _ref4$remainingBalanc = _ref4.remainingBalance,
@@ -48382,7 +48490,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -48584,7 +48692,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -48888,7 +48996,7 @@ var PhoneForm = function PhoneForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -48964,7 +49072,7 @@ var RadioGroup = function RadioGroup(_ref) {
     config = _ref.config,
     extraStyles = _ref.extraStyles,
     _ref$handleChange = _ref.handleChange,
-    handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
+    handleChange = _ref$handleChange === void 0 ? noop$1 : _ref$handleChange,
     field = _ref.field,
     fieldActions = _ref.fieldActions;
   var setValue = function setValue(value) {
@@ -49029,7 +49137,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy,
     isLastGroupedItemInSection = _ref.isLastGroupedItemInSection,
     _ref$onKeyDown = _ref.onKeyDown,
-    onKeyDown = _ref$onKeyDown === void 0 ? noop : _ref$onKeyDown;
+    onKeyDown = _ref$onKeyDown === void 0 ? noop$1 : _ref$onKeyDown;
   var wrapper = {
     open: {
       height: openHeight,
@@ -49086,12 +49194,12 @@ 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 ? noop$1 : function () {
       return toggleOpenSection(section.id);
     },
     onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
       return toggleOpenSection(section.id);
-    } : noop,
+    } : noop$1,
     id: "inner-radio-section-".concat(sectionIndex),
     "data-qa": section.dataQa ? section.dataQa : section.id || "inner-radio-section-".concat(sectionIndex)
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -49121,7 +49229,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     ariaDescribedBy: ariaDescribedBy,
     radioOn: openSection === section.id,
     radioFocused: focused === section.id,
-    toggleRadio: section.disabled ? noop : function () {
+    toggleRadio: section.disabled ? noop$1 : function () {
       return toggleOpenSection(section.id);
     },
     tabIndex: "-1",
@@ -49305,7 +49413,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
     fields = _ref.fields,
     actions = _ref.actions,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     showErrors = _ref.showErrors,
     isMobile = _ref.isMobile;
   if (clearOnDismount) {
@@ -49465,7 +49573,7 @@ var ResetConfirmationForm$1 = withWindowSize(ResetConfirmationForm);
 
 var ResetPasswordForm = function ResetPasswordForm(_ref) {
   var _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
     clearOnDismount = _ref.clearOnDismount,
     fields = _ref.fields,
     actions = _ref.actions,