@thecb/components 9.0.0-beta.1 → 9.0.0-beta.11

package/dist/index.cjs.js

@@ -6231,7 +6231,7 @@ return numeral;
 }));
 });
 
-var noop$1 = function noop() {};
+var noop = function noop() {};
 
 var formatMoneyString = function formatMoneyString(s) {
   return numeral(s).format("$0,0.00");
@@ -6367,7 +6367,7 @@ var titleCaseString = function titleCaseString(string) {
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  noop: noop$1,
+  noop: noop,
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
@@ -10557,7 +10557,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;
@@ -10585,7 +10585,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.
@@ -12918,7 +12918,7 @@ var Spinner = function Spinner(_ref) {
 
 var ButtonWithAction = function ButtonWithAction(_ref2) {
   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,
@@ -22102,7 +22102,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,
@@ -22115,7 +22115,7 @@ var Checkbox = function Checkbox(_ref4) {
       extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles,
       _ref4$dataQa = _ref4.dataQa,
-      dataQa = _ref4$dataQa === void 0 ? "Checkbox Label" : _ref4$dataQa;
+      dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -22158,9 +22158,11 @@ var Checkbox = function Checkbox(_ref4) {
     "aria-invalid": error,
     "aria-describedby": error ? "".concat(name, "-error-message") : ""
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
+    role: "checkbox",
     error: error,
     disabled: disabled,
     checked: checked,
+    "aria-checked": checked,
     focused: focused,
     defaultStyles: themeValues.defaultStyles,
     checkedStyles: themeValues.checkedStyles,
@@ -22295,7 +22297,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,
@@ -22310,8 +22312,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__default.createElement(styled.ThemeProvider, {
     theme: {
@@ -23735,7 +23737,7 @@ var Dropdown = function Dropdown(_ref8) {
       _ref8$disabledValues = _ref8.disabledValues,
       disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
       _ref8$onClick = _ref8.onClick,
-      _onClick = _ref8$onClick === void 0 ? noop$1 : _ref8$onClick,
+      _onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
       themeValues = _ref8.themeValues,
       maxHeight = _ref8.maxHeight,
       _ref8$widthFitOptions = _ref8.widthFitOptions,
@@ -23994,17 +23996,20 @@ var Dropdown = function Dropdown(_ref8) {
     as: "input",
     "aria-multiline": "false",
     autoComplete: autocompleteValue,
-    "aria-controls": "".concat(createIdFromString(ariaLabelledby), "_listbox"),
+    "aria-controls": "".concat(ariaLabelledby, "_listbox"),
     "aria-activedescendant": "focused_option",
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
     "aria-expanded": isOpen,
+    "aria-required": options.required,
+    "aria-invalid": ariaInvalid,
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
+    dataQa: placeholder,
     extraStyles: disabled ? "".concat(inputPlaceholderTextStyle).concat(inputDisabledStyle) : inputPlaceholderTextStyle,
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     isOpen: isOpen,
@@ -24020,17 +24025,14 @@ var Dropdown = function Dropdown(_ref8) {
     },
     padding: "12px",
     placeholder: getSelection(),
+    required: options.required,
     role: "combobox",
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
     type: "text",
     tabIndex: 0,
     value: inputValue,
-    width: "100%",
-    dataQa: placeholder,
-    required: options.required,
-    "aria-required": options.required,
-    "aria-invalid": ariaInvalid
+    width: "100%"
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen,
     onClick: _onClick
@@ -24070,14 +24072,14 @@ var Dropdown = function Dropdown(_ref8) {
       "data-qa": choice.text,
       themeValues: themeValues,
       title: hasTitles ? choice.text : null,
+      role: "option",
       onFocus: function onFocus() {
         return setFocusedRef(optionRefs.current[i]);
-      },
-      role: "option"
+      }
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
-      extraStyles: "padding-left: 16px; \n                        cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", "; \n                        white-space: nowrap; \n                        overflow: hidden; \n                        text-overflow: ellipsis;")
+      extraStyles: "padding-left: 16px; \n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", "; \n                      white-space: nowrap; \n                      overflow: hidden; \n                      text-overflow: ellipsis;")
     }, choice.text));
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
@@ -24182,11 +24184,11 @@ var FormSelect = function FormSelect(_ref) {
       _ref$hasTitles = _ref.hasTitles,
       hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles,
       _ref$autocompleteValu = _ref.autocompleteValue,
-      autocompleteValue = _ref$autocompleteValu === void 0 ? "" : _ref$autocompleteValu,
+      autocompleteValue = _ref$autocompleteValu === void 0 ? null : _ref$autocompleteValu,
       _ref$smoothScroll = _ref.smoothScroll,
       smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "FormSelect" : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24210,6 +24212,7 @@ var FormSelect = function FormSelect(_ref) {
   return /*#__PURE__*/React__default.createElement(SelectContainer, {
     ref: dropdownRef,
     disabled: disabled,
+    "aria-disabled": disabled,
     "data-qa": dataQa
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -24225,8 +24228,8 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
     id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    ariaLabelledby: labelTextWhenNoError,
-    ariaDescribedBy: createIdFromString(labelTextWhenNoError, "error message"),
+    ariaLabelledby: createIdFromString(labelTextWhenNoError),
+    ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -25008,20 +25011,21 @@ var options = [{
 }];
 
 var CountryDropdown = function CountryDropdown(_ref) {
-  var labelTextWhenNoError = _ref.labelTextWhenNoError,
+  var _ref$labelTextWhenNoE = _ref.labelTextWhenNoError,
+      labelTextWhenNoError = _ref$labelTextWhenNoE === void 0 ? "Country" : _ref$labelTextWhenNoE,
       errorMessages = _ref.errorMessages,
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "Country Dropdown" : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
     options: options,
     field: field,
     fieldActions: fieldActions,
     labelTextWhenNoError: labelTextWhenNoError,
-    dataQa: dataQa,
+    dataQa: dataQa || "CountryDropdown",
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
@@ -25173,7 +25177,7 @@ var DisplayBox = function DisplayBox(_ref) {
       themeValues = _ref.themeValues,
       showError = _ref.showError,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "DisplayBox" : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem 0 1.5rem 0"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -25676,7 +25680,7 @@ var Popover = function Popover(_ref) {
     extraStyles: "position: relative; ".concat(extraStyles)
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: function action() {
-      return noop$1;
+      return noop;
     },
     onFocus: function onFocus() {
       handleTogglePopover(true);
@@ -25953,10 +25957,11 @@ var FormInput = function FormInput(_ref15) {
       background = _ref15.background,
       customHeight = _ref15.customHeight,
       _ref15$autocompleteVa = _ref15.autocompleteValue,
-      autocompleteValue = _ref15$autocompleteVa === void 0 ? "" : _ref15$autocompleteVa,
+      autocompleteValue = _ref15$autocompleteVa === void 0 ? null : _ref15$autocompleteVa,
       extraStyles = _ref15.extraStyles,
       removeFromValue = _ref15.removeFromValue,
-      dataQa = _ref15.dataQa,
+      _ref15$dataQa = _ref15.dataQa,
+      dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
       props = _objectWithoutProperties(_ref15, _excluded2);
 
   var _useState = React.useState(false),
@@ -26067,8 +26072,7 @@ var FormInput = function FormInput(_ref15) {
     direction: "row",
     justify: "space-between",
     "aria-live": "polite",
-    "aria-atomic": true,
-    "data-qa": "".concat(labelTextWhenNoError, " error message")
+    "aria-atomic": true
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -26333,7 +26337,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__default.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
@@ -27141,7 +27145,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;
 
@@ -37957,9 +37961,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       showErrors = _ref.showErrors,
       countryCode = _ref.countryCode,
       _ref$autocompleteValu = _ref.autocompleteValue,
-      autocompleteValue = _ref$autocompleteValu === void 0 ? "administrative-area" : _ref$autocompleteValu,
-      _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "StateProvinceDropdown" : _ref$dataQa;
+      autocompleteValue = _ref$autocompleteValu === void 0 ? null : _ref$autocompleteValu;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
@@ -37969,9 +37971,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    "aria-invalid": !!(errorMessages !== null && errorMessages !== void 0 && errorMessages.length),
-    autocompleteValue: autocompleteValue,
-    dataQa: dataQa
+    autocompleteValue: autocompleteValue
   });
 };
 
@@ -38027,7 +38027,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,
@@ -38137,15 +38137,15 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, /*#__PURE__*/React__default.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__default.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,
@@ -40363,7 +40363,9 @@ var AddressForm = function AddressForm(_ref) {
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked;
+      walletCheckboxMarked = _ref.walletCheckboxMarked,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -40387,7 +40389,8 @@ var AddressForm = function AddressForm(_ref) {
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
-    "aria-label": "Address"
+    "aria-label": "Address",
+    dataQa: dataQa
   }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(CountryDropdown, {
     labelTextWhenNoError: "Country",
     errorMessages: countryErrorMessages,
@@ -40416,7 +40419,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line1",
-    dataQa: "Address Line 1"
+    dataQa: "Address"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -40565,7 +40568,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,
@@ -40785,8 +40788,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, /*#__PURE__*/React__default.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",
@@ -41015,7 +41018,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) {
     React.useEffect(function () {
@@ -41362,7 +41365,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;
@@ -41462,7 +41465,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) {
     React.useEffect(function () {
@@ -43141,7 +43144,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) {
     React.useEffect(function () {
@@ -46667,7 +46670,7 @@ var Modal$1 = function Modal(_ref) {
       buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "" : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -48065,7 +48068,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
@@ -48260,22 +48263,57 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
 var LoadingDetails = function LoadingDetails() {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    background: GRECIAN_GREY,
-    borderRadius: "4px",
     minHeight: "196px"
-  }, /*#__PURE__*/React__default.createElement(Cover, {
-    minHeight: "196px",
-    singleChild: true,
-    fillCenter: true
-  }, /*#__PURE__*/React__default.createElement(Center, {
-    intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: "flex-grow: 1; display: flex; justify-content: center; align-items: center;"
+    extraStyles: "position: absolute;\n        height: 200px;\n        width: 100%;\n        display: flex;\n        justify-content: center;\n        align-items: center;"
   }, /*#__PURE__*/React__default.createElement(Spinner$2, {
     size: "100",
     centerSpinner: true
-  })))));
+  })), /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "16px"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    nowrap: true,
+    justify: "space-between",
+    align: "start"
+  }, /*#__PURE__*/React__default.createElement(LoadingLine, {
+    exactWidth: "110",
+    height: "27px"
+  }), /*#__PURE__*/React__default.createElement(LoadingLine, {
+    exactWidth: "60",
+    height: "27px"
+  })), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.5rem 0"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "start"
+  }, /*#__PURE__*/React__default.createElement(LoadingLine, {
+    exactWidth: "80",
+    height: "27px"
+  }), /*#__PURE__*/React__default.createElement(LoadingLine, {
+    exactWidth: "60",
+    height: "27px"
+  })), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "4px 0"
+  }), /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "start"
+  }, /*#__PURE__*/React__default.createElement(LoadingLine, {
+    exactWidth: "100",
+    height: "27px"
+  }), /*#__PURE__*/React__default.createElement(LoadingLine, {
+    exactWidth: "50",
+    height: "27px"
+  }))), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Stack, {
+    justify: "space-between",
+    direction: "row"
+  }, /*#__PURE__*/React__default.createElement(LoadingLine, {
+    exactWidth: "55",
+    height: "30px"
+  }), /*#__PURE__*/React__default.createElement(LoadingLine, {
+    exactWidth: "70",
+    height: "30px"
+  }))));
 };
 
 var ErrorDetails = function ErrorDetails() {
@@ -48378,7 +48416,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,
@@ -48536,7 +48574,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       imageType = _ref.imageType,
       themeValues = _ref.themeValues,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "AccountAndRoutingModal" : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -48564,7 +48602,6 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       toggleOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
-    role: "button",
     variant: "pS",
     onClick: function onClick() {
       return toggleOpen(true);
@@ -48685,21 +48722,16 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       terms = _ref.terms,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant,
-      _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "TermsAndConditionsControlV1" : _ref$dataQa;
+      linkVariant = _ref.linkVariant;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       showTerms = _useState2[0],
       toggleShowTerms = _useState2[1];
 
-  return /*#__PURE__*/React__default.createElement(DisplayBox$1, {
-    dataQ: dataQa
-  }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "terms",
     title: "Terms and Conditions",
-    dataQa: "Terms and Conditions",
     error: error,
     checked: isChecked,
     onChange: onCheck
@@ -48778,9 +48810,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _ref$checkboxMargin = _ref.checkboxMargin,
       checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
       _ref$modalTitle = _ref.modalTitle,
-      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
-      _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "TermsAndConditionsControlV2" : _ref$dataQa;
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -48802,8 +48832,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     minWidth: displayInline ? "0" : "100%",
     background: displayInline ? "transparent" : containerBackground,
     boxShadow: displayInline ? "none" : standardBoxShadow,
-    borderRadius: displayInline ? "0" : "4px",
-    dataQa: dataQa
+    borderRadius: displayInline ? "0" : "4px"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, html && /*#__PURE__*/React__default.createElement(Box, {
@@ -48872,7 +48901,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,
@@ -49081,7 +49110,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,
@@ -49164,7 +49193,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     childGap: isMobile ? "0rem" : "1rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Expiration date (MM/YY)",
-    dataQa: "Expiration date",
+    dataQa: "Expiration date (MM/YY)",
     errorMessages: expirationDateErrors,
     field: fields.expirationDate,
     fieldActions: actions.fields.expirationDate,
@@ -49424,7 +49453,8 @@ var PhoneForm = function PhoneForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "tel",
-    dataQa: "Phone number"
+    dataQa: "Phone number",
+    isNum: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -49471,7 +49501,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;
 
@@ -49633,12 +49663,12 @@ var RadioSection = function RadioSection(_ref) {
     }, /*#__PURE__*/React__default.createElement(Box, {
       padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem",
       background: section.disabled ? themeValues.headingDisabledColor : themeValues.headingBackgroundColor,
-      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,
       key: "header-".concat(section.id),
       borderSize: "0px",
       borderColor: themeValues.borderColor,
@@ -49661,7 +49691,7 @@ var RadioSection = function RadioSection(_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"
@@ -49707,7 +49737,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;
 
@@ -49740,7 +49770,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "given-name"
+    autocompleteValue: "given-name",
+    dataQa: "First name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Last name",
     errorMessages: lastNameErrorMessages,
@@ -49750,7 +49781,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "family-name"
+    autocompleteValue: "family-name",
+    dataQa: "Last name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: emailErrorMessages,
@@ -49762,7 +49794,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     },
     type: "email",
     isEmail: true,
-    autocompleteValue: "email"
+    autocompleteValue: "email",
+    dataQa: "Email address"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -49773,7 +49806,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "password",
-    autocompleteValue: "new-password"
+    autocompleteValue: "new-password",
+    dataQa: "Password"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmPasswordErrorMessages,
@@ -49784,7 +49818,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "password",
-    autocompleteValue: "new-password"
+    autocompleteValue: "new-password",
+    dataQa: "Confirm password"
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0.5rem 0 0"
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {
@@ -49873,7 +49908,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
   var _passwordErrorMessage;
 
   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,