@thecb/components 10.4.0-beta.15 → 10.4.0-beta.17

package/dist/index.esm.js

@@ -6203,7 +6203,7 @@ return numeral;
 }));
 });
 
-var noop$1 = function noop() {};
+var noop = function noop() {};
 var formatMoneyString = function formatMoneyString(s) {
   return numeral(s).format("$0,0.00");
 };
@@ -6337,7 +6337,7 @@ var wrapIndex = function wrapIndex(index, length) {
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  noop: noop$1,
+  noop: noop,
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
@@ -10524,7 +10524,7 @@ var isRefObject = function (ref) {
     return typeof ref === "object" && ref.hasOwnProperty("current");
 };
 
-var noop$2 = function (v) { return v; };
+var noop$1 = function (v) { return v; };
 var ComponentDragControls = /** @class */ (function () {
     function ComponentDragControls(_a) {
         var ref = _a.ref, values = _a.values, controls = _a.controls;
@@ -10552,7 +10552,7 @@ var ComponentDragControls = /** @class */ (function () {
          * @internal
          */
         this.props = {
-            transformPagePoint: noop$2,
+            transformPagePoint: noop$1,
         };
         /**
          * References to the MotionValues used for tracking the current dragged point.
@@ -12982,7 +12982,7 @@ var Spinner = function Spinner(_ref) {
 
 var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$action = _ref2.action,
-    action = _ref2$action === void 0 ? noop$1 : _ref2$action,
+    action = _ref2$action === void 0 ? noop : _ref2$action,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? "primary" : _ref2$variant,
     text = _ref2.text,
@@ -13024,7 +13024,7 @@ var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     disabledStyles: disabledStyles,
     "aria-disabled": disabled,
     as: "button",
-    onClick: isLoading || disabled ? noop$1 : action,
+    onClick: isLoading || disabled ? noop : action,
     borderRadius: "2px",
     theme: themeContext,
     extraStyles: "margin: 0.5rem; ".concat(extraStyles),
@@ -22806,7 +22806,7 @@ var Checkbox = function Checkbox(_ref4) {
     name = _ref4.name,
     checked = _ref4.checked,
     _ref4$onChange = _ref4.onChange,
-    onChange = _ref4$onChange === void 0 ? noop$1 : _ref4$onChange,
+    onChange = _ref4$onChange === void 0 ? noop : _ref4$onChange,
     _ref4$disabled = _ref4.disabled,
     disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
     themeValues = _ref4.themeValues,
@@ -23001,7 +23001,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     padding: "0.875rem",
     borderRadius: "4px",
     minWidth: "30%",
-    onClick: disabled ? noop$1 : onSelect,
+    onClick: disabled ? noop : onSelect,
     borderColor: borderColor,
     borderSize: "1px",
     color: color,
@@ -23016,8 +23016,8 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     name: name,
     "aria-label": name,
     htmlFor: "checkbox-".concat(name, "-").concat(index),
-    onClick: disabled ? noop$1 : onSelect,
-    onKeyDown: disabled ? noop$1 : onSelect,
+    onClick: disabled ? noop : onSelect,
+    onKeyDown: disabled ? noop : onSelect,
     tabIndex: 0
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: {
@@ -24500,7 +24500,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$1 : _ref13$onClick,
+    _onClick = _ref13$onClick === void 0 ? noop : _ref13$onClick,
     themeValues = _ref13.themeValues,
     maxHeight = _ref13.maxHeight,
     _ref13$widthFitOption = _ref13.widthFitOptions,
@@ -26116,7 +26116,7 @@ var Popover = function Popover(_ref) {
     extraStyles: "position: relative; ".concat(extraStyles)
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     action: function action() {
-      return noop$1;
+      return noop;
     },
     onFocus: function onFocus() {
       handleTogglePopover(true);
@@ -27082,7 +27082,7 @@ var HamburgerButton = function HamburgerButton(_ref4) {
     inactiveColor = _ref4.inactiveColor,
     isActive = _ref4.isActive,
     _ref4$onClick = _ref4.onClick,
-    onClick = _ref4$onClick === void 0 ? noop$1 : _ref4$onClick,
+    onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick,
     controls = _ref4.controls;
   return /*#__PURE__*/React.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
@@ -27929,7 +27929,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     themeValues = _ref5.themeValues,
     index = _ref5.index,
     _ref5$handleChange = _ref5.handleChange,
-    handleChange = _ref5$handleChange === void 0 ? noop$1 : _ref5$handleChange,
+    handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
     field = _ref5.field,
     config = _ref5.config;
   var getDefaultChecked = function getDefaultChecked(value, idx) {
@@ -38813,7 +38813,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$1 : _ref6$onToggle,
+    onToggle = _ref6$onToggle === void 0 ? noop : _ref6$onToggle,
     _ref6$disabled = _ref6.disabled,
     disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
     _ref6$name = _ref6.name,
@@ -38921,15 +38921,15 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, /*#__PURE__*/React.createElement(HiddenToggleSwitchBox, {
     "aria-label": name,
     checked: isOn,
-    onChange: disabled ? noop$1 : onToggle,
+    onChange: disabled ? noop : onToggle,
     disabled: disabled,
     id: "#toggle-".concat(name),
     isMobile: isMobile
   }), /*#__PURE__*/React.createElement(VisibleSwitch, {
     name: name,
     htmlFor: "#toggle-".concat(name),
-    onClick: disabled ? noop$1 : onToggle,
-    onKeyDown: disabled ? noop$1 : handleKeyDown,
+    onClick: disabled ? noop : onToggle,
+    onKeyDown: disabled ? noop : handleKeyDown,
     pose: disabled ? "disabled" : isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
@@ -40021,7 +40021,7 @@ var AddressForm = function AddressForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -40221,7 +40221,7 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     fields = _ref.fields,
     actions = _ref.actions,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showErrors = _ref.showErrors,
     isMobile = _ref.isMobile,
     revenueManagement = _ref.revenueManagement,
@@ -40432,8 +40432,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, /*#__PURE__*/React.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
-    onClick: isMobile && supportsTouch ? noop$1 : toggleSection,
-    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop$1,
+    onClick: isMobile && supportsTouch ? noop : toggleSection,
+    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
     key: "header",
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
@@ -40651,7 +40651,7 @@ var EditNameForm = function EditNameForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
   if (clearOnDismount) {
     useEffect$1(function () {
       return function () {
@@ -40991,7 +40991,7 @@ var EmailForm = function EmailForm(_ref) {
     showErrors = _ref.showErrors,
     guestCheckout = _ref.guestCheckout,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -41088,7 +41088,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
   if (clearOnDismount) {
     useEffect$1(function () {
       return function () {
@@ -42740,7 +42740,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
-    onClick: disabled ? noop$1 : onClick,
+    onClick: disabled ? noop : onClick,
     "aria-disabled": disabled,
     isDisabled: disabled,
     role: "group",
@@ -42789,7 +42789,7 @@ var LoginForm = function LoginForm(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
   if (clearOnDismount) {
     useEffect$1(function () {
       return function () {
@@ -46283,7 +46283,9 @@ var Modal$1 = function Modal(_ref) {
     _ref$dataQa = _ref.dataQa,
     dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
     _ref$initialFocusSele = _ref.initialFocusSelector,
-    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+    _ref$blurUnderlay = _ref.blurUnderlay,
+    blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   var modalContainerRef = useRef(null);
@@ -46303,7 +46305,10 @@ var Modal$1 = function Modal(_ref) {
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
-      alignItems: "center"
+      alignItems: "center",
+      background: "rgba(41, 42, 51, 0.45)",
+      backdropFilter: blurUnderlay ? "blur(4px)" : "none",
+      WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
     },
     dialogStyle: {
       width: customWidth || "615px",
@@ -46880,13 +46885,13 @@ var AmountModule = function AmountModule(_ref) {
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
     disableActions: disableActions,
-    action: disableActions ? noop$1 : function () {
+    action: disableActions ? noop : function () {
       return toggleModal(true);
     },
-    onClick: disableActions ? noop$1 : function () {
+    onClick: disableActions ? noop : function () {
       toggleModal(true);
     },
-    onKeyPress: disableActions ? noop$1 : function (e) {
+    onKeyPress: disableActions ? noop : function (e) {
       e.key === "Enter" && toggleModal(true);
     }
   })));
@@ -47016,7 +47021,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     padding: "0"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     isLoading: isLoading,
-    action: disableActions ? noop$1 : function () {
+    action: disableActions ? noop : function () {
       return handleClick(obligations);
     },
     text: "Pay Now",
@@ -47029,7 +47034,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     isLoading: isLoading,
     action: function action() {
-      return disableActions ? noop$1 : function () {
+      return disableActions ? noop : function () {
         return handleClick(obligations);
       };
     },
@@ -47048,8 +47053,8 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     removeAccount = _ref.removeAccount,
     accountType = _ref.accountType,
     isMobile = _ref.isMobile,
-    _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    _ref$disableActions = _ref.disableActions,
+    disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalIsOpen = _useState2[0],
@@ -47073,8 +47078,10 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     modalBodyText: "Are you sure you want to remove the ".concat(identifier, " ").concat(accounts, "? Any autopay scheduled against ").concat(obligations.length > 1 ? "them" : "it", " will be deactivated."),
     continueButtonText: "Remove",
     continueAction: function continueAction() {
-      removeAccount();
-      setModalIsOpen(false);
+      if (!disableActions) {
+        removeAccount();
+        setModalIsOpen(false);
+      }
     },
     useDangerButton: true
   }, /*#__PURE__*/React.createElement(Box, {
@@ -47083,12 +47090,12 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: "Remove",
     variant: "secondary",
-    action: isInCustomerManagement ? noop : function () {
+    action: disableActions ? noop : function () {
       return setModalIsOpen(true);
     },
     dataQa: "Remove Account",
     extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1;",
-    disabled: isInCustomerManagement
+    disabled: disableActions
   })));
 };
 
@@ -47155,10 +47162,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(RemoveAccountModalModule, {
     agencyName: agencyName,
-    removeAccount: disableActions ? noop$1 : handleRemoveAccount,
+    removeAccount: disableActions ? noop : handleRemoveAccount,
     accountType: configType === "ACCOUNT" ? "Account" : "Property",
     isMobile: isMobile,
-    isInCustomerManagement: disableActions
+    disableActions: disableActions
   }))));
 };
 
@@ -47684,7 +47691,7 @@ var Pagination = function Pagination(_ref3) {
         return setCurrentPage({
           pageNumber: item.index
         });
-      } : noop$1,
+      } : noop,
       textExtraStyles: "font-size: ".concat(fontSize, "; font-weight: ").concat(fontWeight, ";"),
       extraStyles: "".concat(extraStyles).concat(item.active ? currentPageStyles : ""),
       dataQa: index
@@ -48041,7 +48048,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$1 : _ref4$partialVoidActi,
+    partialVoidAction = _ref4$partialVoidActi === void 0 ? noop : _ref4$partialVoidActi,
     _ref4$voidableAmountP = _ref4.voidableAmountPaid,
     voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP,
     _ref4$remainingBalanc = _ref4.remainingBalance,
@@ -48500,7 +48507,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -48702,7 +48709,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -49006,7 +49013,7 @@ var PhoneForm = function PhoneForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -49082,7 +49089,7 @@ var RadioGroup = function RadioGroup(_ref) {
     config = _ref.config,
     extraStyles = _ref.extraStyles,
     _ref$handleChange = _ref.handleChange,
-    handleChange = _ref$handleChange === void 0 ? noop$1 : _ref$handleChange,
+    handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
     field = _ref.field,
     fieldActions = _ref.fieldActions;
   var setValue = function setValue(value) {
@@ -49147,7 +49154,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy,
     isLastGroupedItemInSection = _ref.isLastGroupedItemInSection,
     _ref$onKeyDown = _ref.onKeyDown,
-    onKeyDown = _ref$onKeyDown === void 0 ? noop$1 : _ref$onKeyDown;
+    onKeyDown = _ref$onKeyDown === void 0 ? noop : _ref$onKeyDown;
   var wrapper = {
     open: {
       height: openHeight,
@@ -49204,12 +49211,12 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     "aria-required": section.required,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
-    onClick: isMobile && supportsTouch || section.disabled ? noop$1 : function () {
+    onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
       return toggleOpenSection(section.id);
     },
     onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
       return toggleOpenSection(section.id);
-    } : noop$1,
+    } : noop,
     id: "inner-radio-section-".concat(sectionIndex),
     "data-qa": section.dataQa ? section.dataQa : section.id || "inner-radio-section-".concat(sectionIndex)
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -49239,7 +49246,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     ariaDescribedBy: ariaDescribedBy,
     radioOn: openSection === section.id,
     radioFocused: focused === section.id,
-    toggleRadio: section.disabled ? noop$1 : function () {
+    toggleRadio: section.disabled ? noop : function () {
       return toggleOpenSection(section.id);
     },
     tabIndex: "-1",
@@ -49423,7 +49430,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
     fields = _ref.fields,
     actions = _ref.actions,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showErrors = _ref.showErrors,
     isMobile = _ref.isMobile;
   if (clearOnDismount) {
@@ -49583,7 +49590,7 @@ var ResetConfirmationForm$1 = withWindowSize(ResetConfirmationForm);
 
 var ResetPasswordForm = function ResetPasswordForm(_ref) {
   var _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     clearOnDismount = _ref.clearOnDismount,
     fields = _ref.fields,
     actions = _ref.actions,