@thecb/components 10.5.1-beta.3 → 10.6.1-beta.0

package/dist/index.cjs.js

@@ -4908,49 +4908,27 @@ var themeUtils = /*#__PURE__*/Object.freeze({
 
 /* These are constants used by nav frontend components */
 
-var BORDER_RADIUS = {
-  MD: "4px" // Figma: Corners/Standard Corner
-};
-var BORDER_THIN = "1px";
-var FONT_SIZE = {
-  XS: "0.750rem",
-  // 12px
-  SM: "0.875rem",
-  // 14px
-  MD: "1.000rem",
-  // 16px
-  LG: "1.125rem" // 18px
-};
-var FONT_WEIGHT_REGULAR = "400";
-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 FOOTER_HEIGHT = "100px";
 var SPACER_HEIGHT = "65px";
+var JUMBO_HEIGHT = "300px";
+var COMPACT_JUMBO_HEIGHT = "65px";
+var FONT_WEIGHT_REGULAR = "400";
+var FONT_WEIGHT_BOLD = "700";
+var FONT_WEIGHT_SEMIBOLD = "600";
 var LINK_TEXT_DECORATION = "underline solid 1px";
-var SPACING = {
-  XS: "1.0rem",
-  // Figma: Spacing/XS
-  MD: "1.5rem" // Figma: Spacing/Normal
-};
 
 var style_constants = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  BORDER_RADIUS: BORDER_RADIUS,
-  BORDER_THIN: BORDER_THIN,
-  FONT_SIZE: FONT_SIZE,
-  FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR,
-  FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
-  FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
-  FOOTER_HEIGHT: FOOTER_HEIGHT,
   HEADER_HEIGHT: HEADER_HEIGHT,
-  COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
-  JUMBO_HEIGHT: JUMBO_HEIGHT,
+  FOOTER_HEIGHT: FOOTER_HEIGHT,
   SPACER_HEIGHT: SPACER_HEIGHT,
-  LINK_TEXT_DECORATION: LINK_TEXT_DECORATION,
-  SPACING: SPACING
+  JUMBO_HEIGHT: JUMBO_HEIGHT,
+  COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
+  FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
+  LINK_TEXT_DECORATION: LINK_TEXT_DECORATION
 });
 
 /*
@@ -13583,7 +13561,8 @@ var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackVal
 var WalletIconSmall = function WalletIconSmall(_ref) {
   var themeValues = _ref.themeValues,
     _ref$iconIndex = _ref.iconIndex,
-    iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex;
+    iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex,
+    colorOverride = _ref.colorOverride;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20",
     height: "20",
@@ -13594,7 +13573,7 @@ var WalletIconSmall = function WalletIconSmall(_ref) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M16.3125 6.94643C16.0446 6.70536 15.7232 6.57143 15.3482 6.57143L5.14283 6.57143C5.0089 6.57143 4.90176 6.54464 4.8214 6.46429C4.74104 6.38393 4.71426 6.27678 4.71426 6.14286C4.71426 6.03571 4.74104 5.92857 4.8214 5.84821C4.90176 5.76786 5.0089 5.71428 5.14283 5.71428L15.4285 5.71428C15.5357 5.71428 15.6428 5.6875 15.7232 5.60714C15.8035 5.52678 15.8571 5.41964 15.8571 5.28571C15.8571 4.9375 15.7232 4.64286 15.4821 4.375C15.2143 4.13393 14.9196 4 14.5714 4L4.71426 4C4.23211 4 3.80354 4.1875 3.48211 4.50893C3.16068 4.83036 2.99997 5.23214 2.99997 5.71428V14.2857C2.99997 14.7679 3.16068 15.1964 3.48211 15.5179C3.80354 15.8393 4.23211 16 4.71426 16L15.3482 16C15.7232 16 16.0446 15.8929 16.3125 15.625C16.5803 15.3839 16.7143 15.0893 16.7143 14.7143V7.85714C16.7143 7.50893 16.5803 7.21428 16.3125 6.94643ZM12.7142 13.143C13.661 13.143 14.4285 12.3755 14.4285 11.4288C14.4285 10.482 13.661 9.71447 12.7142 9.71447C11.7674 9.71447 10.9999 10.482 10.9999 11.4288C10.9999 12.3755 11.7674 13.143 12.7142 13.143Z",
-    fill: themeValues.singleIconColor
+    fill: colorOverride || themeValues.singleIconColor
   }), /*#__PURE__*/React__default.createElement("mask", {
     id: "mask0_503_574-".concat(iconIndex),
     style: {
@@ -13615,7 +13594,7 @@ var WalletIconSmall = function WalletIconSmall(_ref) {
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "20",
     height: "20",
-    fill: themeValues.singleIconColor
+    fill: colorOverride || themeValues.singleIconColor
   })));
 };
 var WalletIconSmall$1 = themeComponent(WalletIconSmall, "Icons", fallbackValues$2, "primary");
@@ -39853,14 +39832,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 
@@ -46331,27 +46302,14 @@ var Modal$1 = function Modal(_ref) {
     blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
-
-  // `AriaModal` uses `focus-trap` as a transient dependency. It automatically looks
-  // for a tabbable node when the modal mounts. When it doesn't find one, it looks to
-  // the `fallbackFocus` option. However, React does not guarantee the ref supplied to
-  // this option will be populated on initial render when `focus-trap` is checking
-  // these option. When there are no buttons in the modal, this causes an error.
-  // Because `focus-trap` cannot be disabled, the ref itself requires a default value
-  // to satisfy `focus-trap` until React populates it with the real ref value.
-  //
-  // See:
-  //   - https://react.dev/reference/react/useRef#caveats
-  //   - https://github.com/davidtheclark/react-aria-modal/pull/103
-  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
-  var modalContainerRef = React.useRef("#react-aria-modal-dialog");
+  var modalContainerRef = React.useRef(null);
   return /*#__PURE__*/React__default.createElement("div", {
     ref: modalContainerRef,
-    tabIndex: "-1",
     "data-qa": dataQa
-  }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
+  }, 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: {
-      // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
       fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
     },
     onExit: onExit,
@@ -46476,305 +46434,6 @@ var Modal$1 = function Modal(_ref) {
   }))))))))), children);
 };
 
-var ButtonLayoutWrapper = function ButtonLayoutWrapper(_ref) {
-  var _ref$children = _ref.children,
-    children = _ref$children === void 0 ? [] : _ref$children,
-    _ref$isMobile = _ref.isMobile,
-    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
-  var safeChildren = Array.isArray(children) ? children : [children];
-  var flexGrow = isMobile ? "flex-grow: 1;" : "";
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: SPACING.MD
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "1rem",
-    direction: "row",
-    justify: "flex-end"
-  }, safeChildren.map(function (child, index) {
-    return /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0",
-      extraStyles: flexGrow,
-      key: index
-    }, child);
-  })));
-};
-
-var CancelButton = function CancelButton(_ref) {
-  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
-    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
-    _ref$cancelAction = _ref.cancelAction,
-    cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
-    _ref$cancelButtonText = _ref.cancelButtonText,
-    cancelButtonText = _ref$cancelButtonText === void 0 ? "" : _ref$cancelButtonText,
-    _ref$hideModal = _ref.hideModal,
-    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
-    _ref$isMobile = _ref.isMobile,
-    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
-  var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
-  var width = isMobile ? "width: 100%;" : "";
-  return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    action: cancelAction ? cancelAction : hideModal,
-    borderRadius: BORDER_RADIUS.MD,
-    className: "modal-cancel-button",
-    dataQa: cancelButtonText,
-    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(width),
-    name: cancelButtonText,
-    role: "button",
-    text: cancelButtonText,
-    textExtraStyles: "".concat(fontSize),
-    variant: "secondary"
-  });
-};
-
-var CloseButton = function CloseButton(_ref) {
-  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
-    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
-    _ref$closeButtonText = _ref.closeButtonText,
-    closeButtonText = _ref$closeButtonText === void 0 ? "" : _ref$closeButtonText,
-    _ref$hideModal = _ref.hideModal,
-    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
-    _ref$isMobile = _ref.isMobile,
-    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
-  var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
-  var width = isMobile ? "width: 100%;" : "";
-  return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    action: hideModal,
-    borderRadius: BORDER_RADIUS.MD,
-    className: "modal-close-button",
-    dataQa: closeButtonText,
-    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(width),
-    name: closeButtonText,
-    role: "button",
-    text: closeButtonText,
-    textExtraStyles: "".concat(fontSize),
-    variant: "primary"
-  });
-};
-
-var ContinueButton = function ContinueButton(_ref) {
-  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
-    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
-    _ref$continueAction = _ref.continueAction,
-    continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
-    _ref$continueButtonTe = _ref.continueButtonText,
-    continueButtonText = _ref$continueButtonTe === void 0 ? "" : _ref$continueButtonTe,
-    _ref$continueURL = _ref.continueURL,
-    continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
-    _ref$isContinueAction = _ref.isContinueActionDisabled,
-    isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$isMobile = _ref.isMobile,
-    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
-    _ref$useDangerButton = _ref.useDangerButton,
-    useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
-  var ContinueButtonAtom = continueURL ? ButtonWithLink : ButtonWithAction;
-  var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
-  var width = isMobile ? "width: 100%;" : "";
-  return /*#__PURE__*/React__default.createElement(ContinueButtonAtom, {
-    action: continueAction,
-    borderRadius: BORDER_RADIUS.MD,
-    className: "modal-continue-button",
-    dataQa: continueButtonText,
-    disabled: isContinueActionDisabled,
-    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(width),
-    isLoading: isLoading,
-    linkExtraStyles: "display: inline-block; ".concat(width),
-    name: continueButtonText,
-    role: "button",
-    text: continueButtonText,
-    textExtraStyles: "".concat(fontSize),
-    url: continueURL,
-    variant: useDangerButton ? "danger" : "primary"
-  });
-};
-
-/*
-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,
-    _ref$buttonExtraStyle = _ref.buttonExtraStyles,
-    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
-    _ref$cancelAction = _ref.cancelAction,
-    cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
-    _ref$cancelButtonText = _ref.cancelButtonText,
-    cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? [] : _ref$children,
-    _ref$closeButtonText = _ref.closeButtonText,
-    closeButtonText = _ref$closeButtonText === void 0 ? "Close" : _ref$closeButtonText,
-    _ref$continueAction = _ref.continueAction,
-    continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
-    _ref$continueButtonTe = _ref.continueButtonText,
-    continueButtonText = _ref$continueButtonTe === void 0 ? "Continue" : _ref$continueButtonTe,
-    _ref$continueURL = _ref.continueURL,
-    continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
-    _ref$customWidth = _ref.customWidth,
-    customWidth = _ref$customWidth === void 0 ? "" : _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,
-    _ref$hideModal = _ref.hideModal,
-    hideModal = _ref$hideModal === void 0 ? noop : _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,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? "" : _ref$maxHeight,
-    _ref$modalBodyBg = _ref.modalBodyBg,
-    modalBodyBg = _ref$modalBodyBg === void 0 ? "" : _ref$modalBodyBg,
-    _ref$modalBodyText = _ref.modalBodyText,
-    modalBodyText = _ref$modalBodyText === void 0 ? "" : _ref$modalBodyText,
-    _ref$modalHeaderBg = _ref.modalHeaderBg,
-    modalHeaderBg = _ref$modalHeaderBg === void 0 ? "" : _ref$modalHeaderBg,
-    _ref$modalHeaderText = _ref.modalHeaderText,
-    modalHeaderText = _ref$modalHeaderText === void 0 ? "" : _ref$modalHeaderText,
-    _ref$modalOpen = _ref.modalOpen,
-    modalOpen = _ref$modalOpen === void 0 ? false : _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;
-
-  // `AriaModal` uses `focus-trap` as a transient dependency. It automatically looks
-  // for a tabbable node when the modal mounts. When it doesn't find one, it looks to
-  // the `fallbackFocus` option. However, React does not guarantee the ref supplied to
-  // this option will be populated on initial render when `focus-trap` is checking
-  // these option. When there are no buttons in the modal, this causes an error.
-  // Because `focus-trap` cannot be disabled, the ref itself requires a default value
-  // to satisfy `focus-trap` until React populates it with the real ref value.
-  //
-  // See:
-  //   - https://react.dev/reference/react/useRef#caveats
-  //   - https://github.com/davidtheclark/react-aria-modal/pull/103
-  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
-  var modalContainerRef = React.useRef("#react-aria-modal-dialog");
-  var hasCloseButton = onlyCloseButton && !noButtons;
-  var hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
-  var hasContinueButton = onlyContinueButton && !noButtons || !onlyCloseButton && !noButtons;
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: modalContainerRef,
-    tabIndex: "-1",
-    "data-qa": dataQa
-  }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
-    focusTrapOptions: {
-      // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
-      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: BORDER_RADIUS.MD,
-      margin: SPACING.XS,
-      overflow: "auto",
-      width: isMobile ? "" : customWidth || "615px"
-    },
-    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 || WHITE,
-    borderColor: SILVER_GREY,
-    borderWidthOverride: "0 0 ".concat(BORDER_THIN, " 0"),
-    padding: "".concat(SPACING.XS, " ").concat(SPACING.MD)
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "flex-start",
-    align: "center"
-  }, /*#__PURE__*/React__default.createElement(Title$1, {
-    as: "h2",
-    weight: FONT_WEIGHT_SEMIBOLD,
-    fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG
-  }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
-    background: modalBodyBg || ATHENS_GREY,
-    padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: SPACING.MD,
-    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: isMobile ? "pS" : "p"
-  }, modalBodyText) : /*#__PURE__*/React__default.createElement(Box, {
-    padding: maxHeight ? "0 0 ".concat(SPACING.XS, " 0") : "0"
-  }, modalBodyText)), noButtons ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : /*#__PURE__*/React__default.createElement(ButtonLayoutWrapper, {
-    isMobile: isMobile
-  }, [hasCancelButton && /*#__PURE__*/React__default.createElement(CancelButton, {
-    buttonExtraStyles: buttonExtraStyles,
-    cancelAction: cancelAction,
-    cancelButtonText: cancelButtonText,
-    hideModal: hideModal,
-    isMobile: isMobile,
-    key: "cancel"
-  }), hasContinueButton && /*#__PURE__*/React__default.createElement(ContinueButton, {
-    buttonExtraStyles: buttonExtraStyles,
-    continueAction: continueAction,
-    continueButtonText: continueButtonText,
-    continueURL: continueURL,
-    isContinueActionDisabled: isContinueActionDisabled,
-    isLoading: isLoading,
-    isMobile: isMobile,
-    key: "continue",
-    useDangerButton: useDangerButton
-  }), hasCloseButton && /*#__PURE__*/React__default.createElement(CloseButton, {
-    buttonExtraStyles: buttonExtraStyles,
-    closeButtonText: closeButtonText,
-    hideModal: hideModal,
-    isMobile: isMobile,
-    key: "close"
-  })].filter(function (button) {
-    return button;
-  }))))), children);
-};
-var ModalControlV2 = withWindowSize(Modal$2);
-
-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 : ModalControlV2;
-  return /*#__PURE__*/React__default.createElement(ModalControl, rest);
-};
-
 var fontSize$9 = {
   "default": "1.375rem",
   largeTitle: "1.75rem",
@@ -47182,7 +46841,7 @@ var AutopayModal = function AutopayModal(_ref) {
         }
     }
   };
-  return /*#__PURE__*/React__default.createElement(Modal$3, _extends({
+  return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
     showModal: function showModal() {
       return toggleModal(true);
     },
@@ -47421,7 +47080,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$3, {
+  return /*#__PURE__*/React__default.createElement(Modal$1, {
     showModal: function showModal() {
       return setModalIsOpen(true);
     },
@@ -48180,7 +47839,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$B = ["amount"],
+var _excluded$A = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -48425,7 +48084,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$B);
+      rest = _objectWithoutProperties(_ref5, _excluded$A);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -48585,7 +48244,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$3, {
+  return /*#__PURE__*/React__default.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -48689,7 +48348,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$3, {
+  return /*#__PURE__*/React__default.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -48862,11 +48521,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$C = ["version"];
+var _excluded$B = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -49665,7 +49324,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$D = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+var _excluded$C = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -49713,7 +49372,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$D);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -49817,8 +49476,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
       };
     }, []);
   }
-  var firstNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "First name is required"), validName.error, "First name contains invalid characters");
-  var lastNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "Last name is required"), validName.error, "Last name contains invalid characters");
+  var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
+  var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
   var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email is required"), isProbablyEmail.error, "Invalid email address");
   var passwordErrorMessages = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, required.error, "Password is required"), hasLength.error, "Password must have at least 8 characters"), hasNumber.error, "Password must contain at least one number"), hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)");
   var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
@@ -49894,10 +49553,10 @@ var RegistrationForm = function RegistrationForm(_ref) {
 
 var formConfig$9 = {
   firstName: {
-    validators: [required(), validName()]
+    validators: [required()]
   },
   lastName: {
-    validators: [required(), validName()]
+    validators: [required()]
   },
   email: {
     validators: [required(), isProbablyEmail()]
@@ -50429,7 +50088,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$E = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$D = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -50445,7 +50104,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -51017,7 +50676,7 @@ exports.LinkCard = LinkCard$1;
 exports.Loading = Loading;
 exports.LoadingLine = LoadingLine;
 exports.LoginForm = LoginForm;
-exports.Modal = Modal$3;
+exports.Modal = Modal$1;
 exports.Module = Module$1;
 exports.Motion = Motion;
 exports.MultiCartIcon = MultiCartIcon;