@thecb/components 10.4.7-beta.0 → 10.5.0-beta.0

package/dist/index.cjs.js

@@ -4908,27 +4908,35 @@ var themeUtils = /*#__PURE__*/Object.freeze({
 
 /* These are constants used by nav frontend components */
 
-var HEADER_HEIGHT = "104px";
-var FOOTER_HEIGHT = "100px";
-var SPACER_HEIGHT = "65px";
-var JUMBO_HEIGHT = "300px";
-var COMPACT_JUMBO_HEIGHT = "65px";
+var BORDER_THIN = "1px";
+var CORNER_STANDARD = "4px";
 var FONT_WEIGHT_REGULAR = "400";
-var FONT_WEIGHT_BOLD = "700";
 var FONT_WEIGHT_SEMIBOLD = "600";
+var FONT_WEIGHT_BOLD = "700";
+var FOOTER_HEIGHT = "100px";
+var HEADER_HEIGHT = "104px";
+var COMPACT_JUMBO_HEIGHT = "65px";
+var JUMBO_HEIGHT = "300px";
+var SPACER_HEIGHT = "65px";
 var LINK_TEXT_DECORATION = "underline solid 1px";
+var SPACING_XS = "1.0rem";
+var SPACING_NORMAL = "1.5rem";
 
 var style_constants = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  HEADER_HEIGHT: HEADER_HEIGHT,
-  FOOTER_HEIGHT: FOOTER_HEIGHT,
-  SPACER_HEIGHT: SPACER_HEIGHT,
-  JUMBO_HEIGHT: JUMBO_HEIGHT,
-  COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
+  BORDER_THIN: BORDER_THIN,
+  CORNER_STANDARD: CORNER_STANDARD,
   FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR,
-  FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
   FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
-  LINK_TEXT_DECORATION: LINK_TEXT_DECORATION
+  FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
+  FOOTER_HEIGHT: FOOTER_HEIGHT,
+  HEADER_HEIGHT: HEADER_HEIGHT,
+  COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
+  JUMBO_HEIGHT: JUMBO_HEIGHT,
+  SPACER_HEIGHT: SPACER_HEIGHT,
+  LINK_TEXT_DECORATION: LINK_TEXT_DECORATION,
+  SPACING_XS: SPACING_XS,
+  SPACING_NORMAL: SPACING_NORMAL
 });
 
 /*
@@ -38771,17 +38779,17 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
 };
 
 var onBackground = "".concat(MATISSE_BLUE);
-var disabledBackground = "".concat(MANATEE_GREY);
-var disabledBackgroundLight = "".concat(ATHENS_GREY);
+var disabledBackground = "".concat(IRON_GREY);
 var white = "".concat(WHITE);
+var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
 var fallbackValues$y = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
-  disabledBackgroundLight: disabledBackgroundLight,
   white: white,
+  offBackground: offBackground,
   rightLabelStyles: rightLabelStyles,
   leftLabelStyles: leftLabelStyles
 };
@@ -38799,7 +38807,7 @@ var HiddenToggleSwitchBox = styled__default.input.withConfig({
 var VisibleSwitchComponent = styled__default.label.withConfig({
   displayName: "ToggleSwitch__VisibleSwitchComponent",
   componentId: "sc-1t51u6v-1"
-})(["width:44px;height:24px;border-radius:12px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
+})(["width:48px;height:24px;border-radius:48px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
   var disabled = _ref3.disabled;
   return disabled ? "auto" : "pointer";
 }, function (_ref4) {
@@ -38809,10 +38817,14 @@ var VisibleSwitchComponent = styled__default.label.withConfig({
   var isMobile = _ref5.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var ToggleSwitchRingComponent = styled__default.div.withConfig({
-  displayName: "ToggleSwitch__ToggleSwitchRingComponent",
+var ToggleSwitchMiddleRingComponent = styled__default.div.withConfig({
+  displayName: "ToggleSwitch__ToggleSwitchMiddleRingComponent",
   componentId: "sc-1t51u6v-2"
-})(["position:absolute;width:16px;height:16px;border:none;border-radius:50%;box-sizing:border-box;"]);
+})(["position:absolute;width:20px;height:20px;border:none;border-radius:50%;box-sizing:border-box;"]);
+var ToggleSwitchInnerRingComponent = styled__default.div.withConfig({
+  displayName: "ToggleSwitch__ToggleSwitchInnerRingComponent",
+  componentId: "sc-1t51u6v-3"
+})(["position:absolute;width:14px;height:14px;top:3px;left:3px;right:3px;bottom:3px;border-radius:50%;box-sizing:border-box;"]);
 var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
     isOn = _ref6$isOn === void 0 ? false : _ref6$isOn,
@@ -38829,30 +38841,52 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     themeValues = _ref6.themeValues,
     isMobile = _ref6.isMobile,
     dataQa = _ref6.dataQa;
-  var ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
+  var ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
+    off: {
+      backgroundColor: themeValues.offBackground,
+      transition: {
+        ease: "easeOut"
+      }
+    },
+    on: {
+      backgroundColor: themeValues.onBackground,
+      transition: {
+        ease: "easeIn"
+      }
+    },
+    disabled: {
+      backgroundColor: themeValues.disabledBackground
+    }
+  });
+  var ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
     off: {
-      backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
-      left: "4px",
-      top: "3px",
-      bottom: "3px",
-      right: "20px",
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px",
       transition: {
         ease: "backIn"
       }
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "8px",
-      top: "3px",
-      bottom: "4px",
-      left: "23px",
+      right: "1px",
+      top: "2px",
+      bottom: "2px",
+      left: "25px",
       transition: {
         ease: "backIn"
       }
+    },
+    disabled: {
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px"
     }
   });
-
-  // to do: for disabled, background color should not be white (should be lighter disabled background)
   var VisibleSwitch = posed(VisibleSwitchComponent)({
     focusable: true,
     hoverable: true,
@@ -38865,20 +38899,19 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
       boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
     },
     off: {
-      border: "1px solid",
-      backgroundColor: disabled ? themeValues.disabledBackgroundLight : themeValues.white,
-      borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
+      backgroundColor: themeValues.offBackground,
       transition: {
         ease: "easeOut"
       }
     },
     on: {
-      border: "1px solid",
-      backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
-      borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
+      backgroundColor: themeValues.onBackground,
       transition: {
         ease: "easeIn"
       }
+    },
+    disabled: {
+      backgroundColor: themeValues.disabledBackground
     }
   });
   var handleKeyDown = function handleKeyDown(e) {
@@ -38913,11 +38946,11 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     htmlFor: "#toggle-".concat(name),
     onClick: disabled ? noop : onToggle,
     onKeyDown: disabled ? noop : handleKeyDown,
-    pose: isOn ? "on" : "off",
+    pose: disabled ? "disabled" : isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
     isMobile: isMobile
-  }, /*#__PURE__*/React__default.createElement(ToggleSwitchRing, null)))), label && /*#__PURE__*/React__default.createElement(Heading$1, {
+  }, /*#__PURE__*/React__default.createElement(ToggleSwitchMiddleRing, null, /*#__PURE__*/React__default.createElement(ToggleSwitchInnerRing, null))))), label && /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: "h4",
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;",
@@ -46403,6 +46436,244 @@ var Modal$1 = function Modal(_ref) {
   }))))))))), children);
 };
 
+/*
+Default Modal molecule
+Uses react-aria-modal behind the scenes for a11y purposes
+Styling accomplished with our atoms / layout primitives
+
+Cancel button will (for now) always use hideModal as its action
+Continue button takes an action, if you want to navigate to
+a different route (as with a link) connect() and use "push" from @thecb/connected-react-router
+*/
+
+var getApplicationNode$1 = function getApplicationNode() {
+  return document.getElementById("root");
+};
+var Modal$2 = function Modal(_ref) {
+  var _ref$blurUnderlay = _ref.blurUnderlay,
+    blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay,
+    buttonExtraStyles = _ref.buttonExtraStyles,
+    cancelAction = _ref.cancelAction,
+    _ref$cancelButtonText = _ref.cancelButtonText,
+    cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
+    children = _ref.children,
+    _ref$closeButtonText = _ref.closeButtonText,
+    closeButtonText = _ref$closeButtonText === void 0 ? "Close" : _ref$closeButtonText,
+    continueAction = _ref.continueAction,
+    _ref$continueButtonTe = _ref.continueButtonText,
+    continueButtonText = _ref$continueButtonTe === void 0 ? "Continue" : _ref$continueButtonTe,
+    customWidth = _ref.customWidth,
+    _ref$dataQa = _ref.dataQa,
+    dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+    _ref$defaultWrapper = _ref.defaultWrapper,
+    defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
+    hideModal = _ref.hideModal,
+    _ref$initialFocusSele = _ref.initialFocusSelector,
+    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+    _ref$isContinueAction = _ref.isContinueActionDisabled,
+    isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
+    isLoading = _ref.isLoading,
+    maxHeight = _ref.maxHeight,
+    _ref$modalBodyBg = _ref.modalBodyBg,
+    modalBodyBg = _ref$modalBodyBg === void 0 ? ATHENS_GREY : _ref$modalBodyBg,
+    modalBodyText = _ref.modalBodyText,
+    _ref$modalHeaderBg = _ref.modalHeaderBg,
+    modalHeaderBg = _ref$modalHeaderBg === void 0 ? WHITE : _ref$modalHeaderBg,
+    modalHeaderText = _ref.modalHeaderText,
+    modalOpen = _ref.modalOpen,
+    _ref$noButtons = _ref.noButtons,
+    noButtons = _ref$noButtons === void 0 ? false : _ref$noButtons,
+    _ref$onExit = _ref.onExit,
+    onExit = _ref$onExit === void 0 ? hideModal : _ref$onExit,
+    _ref$onlyCloseButton = _ref.onlyCloseButton,
+    onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
+    _ref$onlyContinueButt = _ref.onlyContinueButton,
+    onlyContinueButton = _ref$onlyContinueButt === void 0 ? false : _ref$onlyContinueButt,
+    _ref$underlayClickExi = _ref.underlayClickExits,
+    underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
+    _ref$useDangerButton = _ref.useDangerButton,
+    useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
+  var modalContainerRef = React.useRef(null);
+  var AllButtons = function AllButtons() {
+    return isMobile ? /*#__PURE__*/React__default.createElement(Stack, {
+      childGap: "1rem",
+      direction: "row"
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      width: "100%",
+      padding: "0"
+    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      variant: "secondary",
+      action: cancelAction ? cancelAction : hideModal,
+      text: cancelButtonText,
+      dataQa: cancelButtonText,
+      extraStyles: buttonExtraStyles,
+      borderRadius: CORNER_STANDARD,
+      className: "modal-cancel-button",
+      role: "button",
+      name: cancelButtonText
+    })), /*#__PURE__*/React__default.createElement(Box, {
+      width: "100%",
+      padding: "0"
+    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      variant: useDangerButton ? "danger" : "primary",
+      action: continueAction,
+      text: continueButtonText,
+      dataQa: continueButtonText,
+      isLoading: isLoading,
+      disabled: isContinueActionDisabled,
+      extraStyles: buttonExtraStyles,
+      borderRadius: CORNER_STANDARD,
+      className: "modal-continue-button",
+      role: "button",
+      name: continueButtonText
+    }))) : /*#__PURE__*/React__default.createElement(Stack, {
+      childGap: "1rem",
+      direction: "row",
+      justify: "flex-end"
+    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      variant: "secondary",
+      action: cancelAction ? cancelAction : hideModal,
+      text: cancelButtonText,
+      dataQa: cancelButtonText,
+      extraStyles: buttonExtraStyles,
+      borderRadius: CORNER_STANDARD,
+      className: "modal-cancel-button",
+      role: "button",
+      name: cancelButtonText
+    }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      variant: useDangerButton ? "danger" : "primary",
+      action: continueAction,
+      text: continueButtonText,
+      dataQa: continueButtonText,
+      isLoading: isLoading,
+      disabled: isContinueActionDisabled,
+      extraStyles: buttonExtraStyles,
+      borderRadius: CORNER_STANDARD,
+      className: "modal-continue-button",
+      role: "button",
+      name: continueButtonText
+    }));
+  };
+  var CloseButton = function CloseButton() {
+    return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      action: hideModal,
+      variant: "primary",
+      text: closeButtonText,
+      dataQa: closeButtonText,
+      extraStyles: buttonExtraStyles,
+      borderRadius: CORNER_STANDARD,
+      className: "modal-close-button",
+      role: "button",
+      name: closeButtonText
+    });
+  };
+  var ContinueButton = function ContinueButton() {
+    return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      variant: useDangerButton ? "danger" : "primary",
+      action: continueAction,
+      text: continueButtonText,
+      dataQa: continueButtonText,
+      isLoading: isLoading,
+      disabled: isContinueActionDisabled,
+      extraStyles: buttonExtraStyles,
+      borderRadius: CORNER_STANDARD,
+      className: "modal-continue-button",
+      role: "button",
+      name: continueButtonText
+    });
+  };
+  var MaybeButtons = /*#__PURE__*/React.forwardRef(function () {
+    return /*#__PURE__*/React__default.createElement(React.Fragment, null);
+  });
+  if (!noButtons) {
+    if (onlyContinueButton) {
+      MaybeButtons = ContinueButton;
+    } else if (onlyCloseButton) {
+      MaybeButtons = CloseButton;
+    } else {
+      MaybeButtons = AllButtons;
+    }
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: modalContainerRef,
+    "data-qa": dataQa
+  }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal
+  // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
+  , {
+    focusTrapOptions: {
+      fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
+    },
+    onExit: onExit,
+    getApplicationNode: getApplicationNode$1,
+    titleText: modalHeaderText,
+    underlayStyle: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      background: "rgba(41, 42, 51, 0.45)",
+      backdropFilter: blurUnderlay ? "blur(4px)" : "none",
+      WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
+    },
+    dialogStyle: {
+      borderRadius: CORNER_STANDARD,
+      width: customWidth || "615px",
+      overflow: "auto"
+    },
+    underlayClickExits: underlayClickExits,
+    "aria-modal": true,
+    initialFocus: initialFocusSelector,
+    focusDialog: !initialFocusSelector // Focus the dialogue box itself if no selector for initial focus was provided
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    background: modalHeaderBg,
+    borderColor: SILVER_GREY,
+    borderWidthOverride: "0 0 ".concat(BORDER_THIN, " 0"),
+    padding: "".concat(SPACING_XS, " ").concat(SPACING_NORMAL)
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(Title$1, {
+    as: "h2",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    fontSize: "1.25rem"
+  }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
+    background: modalBodyBg,
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: SPACING_NORMAL
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: SPACING_NORMAL,
+    borderWidthOverride: !noButtons && "0 0 ".concat(BORDER_THIN, " 0"),
+    borderColor: !noButtons && SILVER_GREY,
+    extraStyles: maxHeight ? "max-height: ".concat(maxHeight, "; overflow: auto;") : ""
+  }, defaultWrapper ? /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "p"
+  }, modalBodyText) : /*#__PURE__*/React__default.createElement(Box, {
+    padding: maxHeight ? "0 0 ".concat(SPACING_XS, " 0") : "0"
+  }, modalBodyText)), noButtons ? /*#__PURE__*/React__default.createElement(MaybeButtons, null) : /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 ".concat(SPACING_NORMAL, " ").concat(SPACING_NORMAL)
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    justify: "flex-end",
+    align: "center",
+    childGap: "0rem"
+  }, /*#__PURE__*/React__default.createElement(MaybeButtons, null))))))), children);
+};
+
+var _excluded$A = ["version"];
+var Modal$3 = function Modal(_ref) {
+  var _ref$version = _ref.version,
+    version = _ref$version === void 0 ? "v1" : _ref$version,
+    rest = _objectWithoutProperties(_ref, _excluded$A);
+  var ModalControl = version === "v1" ? Modal$1 : Modal$2;
+  return /*#__PURE__*/React__default.createElement(ModalControl, rest);
+};
+
 var fontSize$9 = {
   "default": "1.375rem",
   largeTitle: "1.75rem",
@@ -46810,7 +47081,7 @@ var AutopayModal = function AutopayModal(_ref) {
         }
     }
   };
-  return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
+  return /*#__PURE__*/React__default.createElement(Modal$3, _extends({
     showModal: function showModal() {
       return toggleModal(true);
     },
@@ -47049,7 +47320,7 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     return formattedAccount === agencyName ? agencyName : acc + formattedAccount;
   }, "".concat(agencyName, " - ")) : "";
   var identifier = accountType === "Account" && obligations.length > 1 ? "accounts" : accountType === "Property" && obligations.length > 1 ? "properties" : accountType.toLowerCase();
-  return /*#__PURE__*/React__default.createElement(Modal$1, {
+  return /*#__PURE__*/React__default.createElement(Modal$3, {
     showModal: function showModal() {
       return setModalIsOpen(true);
     },
@@ -47808,7 +48079,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$A = ["amount"],
+var _excluded$B = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -48053,7 +48324,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$A);
+      rest = _objectWithoutProperties(_ref5, _excluded$B);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -48213,7 +48484,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     themeValues = _ref.themeValues,
     _ref$dataQa = _ref.dataQa,
     dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
-  return /*#__PURE__*/React__default.createElement(Modal$1, {
+  return /*#__PURE__*/React__default.createElement(Modal$3, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -48317,7 +48588,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     themeValues = _ref.themeValues,
     _ref$initialFocusSele = _ref.initialFocusSelector,
     initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
-  return /*#__PURE__*/React__default.createElement(Modal$1, {
+  return /*#__PURE__*/React__default.createElement(Modal$3, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -48490,11 +48761,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$B = ["version"];
+var _excluded$C = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -49293,7 +49564,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$C = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+var _excluded$D = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -49341,7 +49612,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$isSectionRequire = _ref.isSectionRequired,
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -50050,7 +50321,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$D = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$E = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -50066,7 +50337,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -50638,7 +50909,7 @@ exports.LinkCard = LinkCard$1;
 exports.Loading = Loading;
 exports.LoadingLine = LoadingLine;
 exports.LoginForm = LoginForm;
-exports.Modal = Modal$1;
+exports.Modal = Modal$3;
 exports.Module = Module$1;
 exports.Motion = Motion;
 exports.MultiCartIcon = MultiCartIcon;