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

package/dist/index.cjs.js

@@ -6548,7 +6548,7 @@ var BoxWrapper = styled__default(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "focusStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "id", "children"];
+var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "focusStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
 
 /*
   Box component to create generic boxes
@@ -6597,7 +6597,6 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$srOnly = _ref.srOnly,
     srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
     dataQa = _ref.dataQa,
-    id = _ref.id,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(BoxWrapper, _extends({
@@ -6633,8 +6632,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onFocus: onFocus,
     onBlur: onBlur,
     onTouchEnd: onTouchEnd,
-    ref: ref,
-    id: id
+    ref: ref
   }, rest), children && safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 });
 
@@ -24898,9 +24896,7 @@ var Dropdown = function Dropdown(_ref13) {
     _ref13$ariaInvalid = _ref13.ariaInvalid,
     ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid,
     _ref13$isRequired = _ref13.isRequired,
-    isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired,
-    _ref13$inputId = _ref13.inputId,
-    inputId = _ref13$inputId === void 0 ? false : _ref13$inputId;
+    isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired;
   var _useState = React.useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
@@ -25109,7 +25105,6 @@ var Dropdown = function Dropdown(_ref13) {
     width: "100%",
     dataQa: "".concat(ariaLabelledby, "-dropdown")
   }, /*#__PURE__*/React__default.createElement(Box, {
-    id: inputId,
     as: "input",
     autoComplete: autocompleteValue,
     "aria-controls": "".concat(ariaLabelledby, "_listbox"),
@@ -25312,11 +25307,7 @@ var FormSelect = function FormSelect(_ref) {
     _ref$widthFitOptions = _ref.widthFitOptions,
     widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions,
     _ref$isRequired = _ref.isRequired,
-    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
-    _ref$htmlFor = _ref.htmlFor,
-    htmlFor = _ref$htmlFor === void 0 ? null : _ref$htmlFor,
-    _ref$inputId = _ref.inputId,
-    inputId = _ref$inputId === void 0 ? null : _ref$inputId;
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -25350,10 +25341,8 @@ var FormSelect = function FormSelect(_ref) {
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
-    id: createIdFromString(labelTextWhenNoError),
-    htmlFor: htmlFor
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    inputId: inputId,
     ariaLabelledby: createIdFromString(labelTextWhenNoError),
     ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
@@ -26150,11 +26139,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
     _ref$isRequired = _ref.isRequired,
     isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
     _ref$dataQa = _ref.dataQa,
-    dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
-    _ref$htmlFor = _ref.htmlFor,
-    htmlFor = _ref$htmlFor === void 0 ? null : _ref$htmlFor,
-    _ref$inputId = _ref.inputId,
-    inputId = _ref$inputId === void 0 ? null : _ref$inputId;
+    dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
     options: options,
     field: field,
@@ -26165,8 +26150,6 @@ var CountryDropdown = function CountryDropdown(_ref) {
     showErrors: showErrors,
     onChange: onChange,
     autocompleteValue: "country-name",
-    htmlFor: htmlFor,
-    inputId: inputId,
     isRequired: isRequired
   });
 };
@@ -26655,45 +26638,34 @@ function _extends$2() {
   _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends$2.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
-
 function _objectWithoutProperties$1(source, excluded) {
   if (source == null) return {};
-
   var target = _objectWithoutPropertiesLoose$1(source, excluded);
-
   var key, i;
-
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
     for (i = 0; i < sourceSymbolKeys.length; i++) {
       key = sourceSymbolKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
@@ -26701,48 +26673,37 @@ function _objectWithoutProperties$1(source, excluded) {
       target[key] = source[key];
     }
   }
-
   return target;
 }
-
 function _slicedToArray$1(arr, i) {
   return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1();
 }
-
 function _toConsumableArray$1(arr) {
   return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _nonIterableSpread$1();
 }
-
 function _arrayWithoutHoles$1(arr) {
   if (Array.isArray(arr)) {
     for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
     return arr2;
   }
 }
-
 function _arrayWithHoles$1(arr) {
   if (Array.isArray(arr)) return arr;
 }
-
 function _iterableToArray$1(iter) {
   if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
 }
-
 function _iterableToArrayLimit$1(arr, i) {
   if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
     return;
   }
-
   var _arr = [];
   var _n = true;
   var _d = false;
   var _e = undefined;
-
   try {
     for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
-
       if (i && _arr.length === i) break;
     }
   } catch (err) {
@@ -26755,29 +26716,23 @@ function _iterableToArrayLimit$1(arr, i) {
       if (_d) throw _e;
     }
   }
-
   return _arr;
 }
-
 function _nonIterableSpread$1() {
   throw new TypeError("Invalid attempt to spread non-iterable instance");
 }
-
 function _nonIterableRest$1() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance");
 }
-
 var getUniqueFormatDelimiters = function getUniqueFormatDelimiters(formats, formatChar) {
   return _toConsumableArray$1(new Set(formats.join("").split(formatChar).join("").split("")));
 };
 var format$1 = function format(formatter) {
   return function (value) {
     var usedFormat = formatter.formats[value.length];
-
     if (!usedFormat) {
       return value;
     }
-
     var formatPieces = usedFormat.split(formatter.formatChar);
     var valuePieces = value.split("");
     var zipped = formatPieces.map(function (v, i) {
@@ -26786,7 +26741,6 @@ var format$1 = function format(formatter) {
     return zipped.join("");
   };
 };
-
 var countDelims = function countDelims(formatter, index) {
   var count = 0;
   var format = formatter.formats[index];
@@ -26796,13 +26750,11 @@ var countDelims = function countDelims(formatter, index) {
   });
   return count;
 };
-
 var unformat = function unformat(formatter) {
   return function (formattedValue, formatIndex) {
     if (formatIndex >= formatter.formats.length) {
       return formattedValue;
     }
-
     var format = formatter.formats[formatIndex];
     return formattedValue.split("").filter(function (_, i) {
       return !(format[i] != formatter.formatChar);
@@ -26816,7 +26768,6 @@ var inject = function inject(baseString) {
 };
 var formattedToUnformattedIndex = function formattedToUnformattedIndex(formattedIndex, rawValue, formatter) {
   var maxFormatExceeded = rawValue.length >= formatter.formats.length;
-
   if (maxFormatExceeded) {
     return formattedIndex;
   } else {
@@ -26841,7 +26792,6 @@ var unformattedToFormattedIndex = function unformattedToFormattedIndex(rawIndex,
     }, 0) + rawIndex;
   }
 };
-
 var createFormat = function createFormat(formats, formatChar) {
   return {
     uniqueDelimiters: getUniqueFormatDelimiters(formats, formatChar),
@@ -26849,83 +26799,80 @@ var createFormat = function createFormat(formats, formatChar) {
     formatChar: formatChar
   };
 };
-
 var FormattedInput = function FormattedInput(_ref) {
   var value = _ref.value,
-      formatter = _ref.formatter,
-      _onChange = _ref.onChange,
-      props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
-
+    formatter = _ref.formatter,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
+  var _useState = React.useState(format$1(formatter)(value)),
+    _useState2 = _slicedToArray$1(_useState, 2),
+    formattedValue = _useState2[0],
+    setFormattedValue = _useState2[1];
   var inputEl = React.useRef(null);
-
-  var _useState = React.useState({
+  var stateRefs = React.useRef({
     selectionStart: 0,
     selectionEnd: 0,
-    rawValue: value,
-    "delete": false,
-    formattedValue: format$1(formatter)(value)
-  }),
-      _useState2 = _slicedToArray$1(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
+    isDelete: false,
+    rawValue: ''
+  });
   React.useLayoutEffect(function () {
     // A lot of the work here is cursor manipulation
     if (inputEl.current && inputEl.current === document.activeElement) {
-      inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
+      inputEl.current.setSelectionRange(stateRefs.current.selectionStart, stateRefs.current.selectionEnd);
     }
-  });
-  return React__default.createElement("input", _extends$2({}, props, {
+  }, [stateRefs]);
+  var handleChange = function handleChange(event) {
+    var deleteKeyPressed = stateRefs.current.isDelete;
+    var maxFormatExceeded = stateRefs.current.rawValue.length >= formatter.formats.length - 1;
+    if (maxFormatExceeded && !deleteKeyPressed) {
+      return;
+    }
+    /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
+    * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
+    * the unformatted value for the user's onChange, the formatted string and unformatted injection need
+    * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
+    * old unformatted value.
+    */
+
+    var injectionLength = event.target.value.length - formattedValue.length;
+    var end = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? stateRefs.current.selectionStart + injectionLength : stateRefs.current.selectionEnd - 1;
+    var injection = event.target.value.substring(stateRefs.current.selectionStart, end); // Injection is the new unformatted piece of the input
+    // Need to find where to put it
+
+    var rawInjectionPointStart = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter);
+    var rawInjectionPointEnd = formattedToUnformattedIndex(stateRefs.current.selectionEnd, stateRefs.current.rawValue, formatter); // Unformat the previous formatted value for injection
+    // Using the relevant format string, strips away chars not marked with the formatChar
+
+    var unformattedOldValue = unformat(formatter)(formattedValue, stateRefs.current.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+
+    var injectIntoOldValue = inject(unformattedOldValue);
+    var unformattedNewValue = deleteKeyPressed ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
+    var lengthDifference = unformattedNewValue.length - stateRefs.current.rawValue.length;
+    var rawIndex = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
+    // Applied by useLayoutEffect
+
+    var newFormattedCursorPosition = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, deleteKeyPressed) : deleteKeyPressed ? stateRefs.current.selectionStart : stateRefs.current.selectionEnd;
+    var formattedNewValue = format$1(formatter)(unformattedNewValue);
+    setFormattedValue(formattedNewValue); // Apply the external onChange function to the raw underlying string
+    // This is where the user generally updates the input value
+
+    if (onChange) {
+      onChange(unformattedNewValue);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("input", _extends$2({}, props, {
     ref: inputEl,
     value: format$1(formatter)(value),
     onKeyDown: function onKeyDown(event) {
-      // Keep track of the state of the input before onChange, including if user is hitting delete
-      setState({
-        rawValue: value,
+      // Keep track of the state of the input before onChange
+      stateRefs.current = {
+        isDelete: event.key === "Backspace" || event.key === "Delete",
         selectionStart: event.target.selectionStart,
         selectionEnd: event.target.selectionEnd,
-        "delete": event.key === "Backspace" || event.key === "Delete",
-        formattedValue: event.target.value
-      });
+        rawValue: value
+      };
     },
-    onChange: function onChange(event) {
-      /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
-       * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
-       * the unformatted value for the user's onChange, the formatted string and unformatted injection need
-       * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
-       * old unformatted value.
-       */
-      var injectionLength = event.target.value.length - state.formattedValue.length;
-      var end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
-      var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
-      // Need to find where to put it
-
-      var rawInjectionPointStart = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter);
-      var rawInjectionPointEnd = formattedToUnformattedIndex(state.selectionEnd, state.rawValue, formatter); // Unformat the previous formatted value for injection
-      // Using the relevant format string, strips away chars not marked with the formatChar
-
-      var unformattedOldValue = unformat(formatter)(state.formattedValue, state.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
-
-      var injectIntoOldValue = inject(unformattedOldValue);
-      var unformattedNewValue = state["delete"] ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
-      var lengthDifference = unformattedNewValue.length - state.rawValue.length;
-      var rawIndex = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
-      // Applied by useLayoutEffect
-
-      var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
-      setState({
-        selectionStart: newFormattedCursorPosition,
-        selectionEnd: newFormattedCursorPosition,
-        rawValue: state.rawValue,
-        "delete": false,
-        formattedValue: state.formattedValue
-      }); // Apply the external onChange function to the raw underlying string
-      // This is where the user generally updates the input value
-
-      if (_onChange) {
-        _onChange(unformattedNewValue);
-      }
-    }
+    onChange: handleChange
   }));
 };
 
@@ -26994,7 +26941,7 @@ var fallbackValues$k = {
 };
 
 var _excluded$s = ["showErrors", "themeValues"],
-  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "htmlFor", "inputId"];
+  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -27082,10 +27029,6 @@ var FormInput = function FormInput(_ref15) {
     dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
     _ref15$isRequired = _ref15.isRequired,
     isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
-    _ref15$htmlFor = _ref15.htmlFor,
-    htmlFor = _ref15$htmlFor === void 0 ? null : _ref15$htmlFor,
-    _ref15$inputId = _ref15.inputId,
-    inputId = _ref15$inputId === void 0 ? null : _ref15$inputId,
     props = _objectWithoutProperties(_ref15, _excluded2);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -27123,8 +27066,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
-    id: createIdFromString(labelTextWhenNoError),
-    htmlFor: htmlFor
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), helperModal()) : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%"
@@ -27137,8 +27079,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
-    id: createIdFromString(labelTextWhenNoError),
-    htmlFor: htmlFor
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -27159,7 +27100,6 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
-    id: inputId || (props === null || props === void 0 ? void 0 : props.id),
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
@@ -27192,7 +27132,6 @@ var FormInput = function FormInput(_ref15) {
       }
     }
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
-    id: inputId || (props === null || props === void 0 ? void 0 : props.id),
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
@@ -28627,7 +28566,7 @@ var Search = function Search(_ref) {
     id: "searchInput",
     role: "search",
     "aria-controls": ariaControlsId,
-    extraStyles: "border-radius: 2px 0 0 2px;",
+    extraStyles: "border-radius: 4px 0 0 4px; border: none; box-shadow: 0px 1px 2px 0px ".concat(CHARADE_GREY, "1A; font-size: 0.875rem;"),
     onKeyDown: function onKeyDown(e) {
       return searchOnKeypress || e.key === "Enter" ? handleSubmit() : noop;
     },
@@ -28655,7 +28594,7 @@ var Search = function Search(_ref) {
     minWidth: "0",
     width: "3rem",
     padding: ".5rem",
-    extraStyles: "\n          height: 48px; \n          margin: 4px 0 0;\n          border-radius: 0 2px 2px 0;\n          background: ".concat(themeValues.searchIconBackgroundColor, ";\n        "),
+    extraStyles: "\n          height: 48px; \n          margin: 4px 0 0;\n          border-radius: 0 4px 4px 0;\n          background: ".concat(themeValues.searchIconBackgroundColor, ";\n          border: none;\n          box-shadow: 0px 1px 2px 0px ").concat(CHARADE_GREY, "1A;\n        "),
     variant: "primary",
     contentOverride: true,
     action: handleSubmit
@@ -39332,11 +39271,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     showErrors = _ref.showErrors,
     countryCode = _ref.countryCode,
     _ref$isRequired = _ref.isRequired,
-    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
-    _ref$htmlFor = _ref.htmlFor,
-    htmlFor = _ref$htmlFor === void 0 ? null : _ref$htmlFor,
-    _ref$inputId = _ref.inputId,
-    inputId = _ref$inputId === void 0 ? null : _ref$inputId;
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
@@ -39347,8 +39282,6 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     autocompleteValue: "address-level1",
-    htmlFor: htmlFor,
-    inputId: inputId,
     isRequired: isRequired
   });
 };
@@ -40862,8 +40795,6 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    htmlFor: "country-name",
-    inputId: "country-name",
     dataQa: "Country",
     isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
@@ -40876,8 +40807,6 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line1",
-    htmlFor: "address-line1",
-    inputId: "address-line1",
     dataQa: "Address",
     isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
@@ -40889,8 +40818,6 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line2",
-    htmlFor: "address-line2",
-    inputId: "address-line2",
     dataQa: "Address Line 2"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
@@ -40902,8 +40829,6 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-level2",
-    htmlFor: "city",
-    inputId: "city",
     dataQa: "City",
     isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
@@ -40916,9 +40841,6 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "address-level1",
-    htmlFor: "stateOrProvince",
-    inputId: "stateOrProvince",
     dataQa: "State or Province",
     isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
@@ -40933,8 +40855,6 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "postal-code",
-    htmlFor: "postal-code",
-    inputId: "postal-code",
     dataQa: "Zip code",
     isRequired: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
@@ -41822,6 +41742,13 @@ var EmailForm = function EmailForm(_ref) {
     }, []);
   }
   var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
+  React.useEffect(function () {
+    if (isRequired) {
+      actions.fields.email.addValidator(required());
+    } else {
+      actions.fields.email.removeValidator(required());
+    }
+  }, [isRequired]);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -41852,7 +41779,7 @@ var EmailForm = function EmailForm(_ref) {
 
 var formConfig$3 = {
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [isProbablyEmail()] // 'required' validator is conditionally added based on `isRequired` prop
   }
 };
 var _createFormState$3 = createFormState(formConfig$3),
@@ -48068,8 +47995,6 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
     _ref4$isError = _ref4.isError,
     isError = _ref4$isError === void 0 ? false : _ref4$isError,
-    _ref4$multiCartEnable = _ref4.multiCartEnabled,
-    multiCartEnabled = _ref4$multiCartEnable === void 0 ? false : _ref4$multiCartEnable,
     agencyDisplayName = _ref4.agencyDisplayName;
   var _useState = React.useState(initiallyOpen),
     _useState2 = _slicedToArray(_useState, 2),
@@ -48110,7 +48035,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       variant: themeValues.labeledAmountSubtotal
     }, fee)));
   });
-  var agencySubheading = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, multiCartEnabled && agencyDisplayName && /*#__PURE__*/React__default.createElement(Cluster, {
+  var agencySubheading = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, agencyDisplayName && /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center",
     style: {
@@ -49059,6 +48984,13 @@ var PhoneForm = function PhoneForm(_ref) {
     }, []);
   }
   var phoneErrorMessage = _defineProperty(_defineProperty({}, required.error, "Phone number is required"), hasLength.error, "Phone number must be 10 digits");
+  React.useEffect(function () {
+    if (isRequired) {
+      actions.fields.phone.addValidator(required());
+    } else {
+      actions.fields.phone.removeValidator(required());
+    }
+  }, [isRequired]);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -49087,7 +49019,8 @@ var PhoneForm = function PhoneForm(_ref) {
 
 var formConfig$8 = {
   phone: {
-    validators: [required(), hasLength(10, 10)],
+    validators: [hasLength(10, 10)],
+    // 'required' validator is conditionally added based on `isRequired` prop
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };