@thecb/components 10.9.0-beta.3 → 10.9.0-beta.4

package/dist/index.d.ts

@@ -629,8 +629,6 @@ interface FormSelectProps {
   smoothScroll?: boolean;
   dataQa?: string | null;
   widthFitOptions?: boolean;
-  htmlFor?: string;
-  inputId?: string;
 }
 
 declare const FormSelect: React.FC<Expand<FormSelectProps> &
@@ -823,7 +821,6 @@ interface BoxProps {
   extraStyles?: string;
   srOnly?: boolean;
   dataQa?: string;
-  id?: string;
 }
 
 declare const Box: React.FC<Expand<BoxProps> &
@@ -1106,8 +1103,6 @@ interface TextProps {
   as?: string;
   dataQa?: string;
   variant?: string;
-  htmlFor?: string;
-  inputId?: string;
 }
 
 declare const Text: React.FC<Expand<TextProps> &

package/dist/index.esm.js

@@ -6540,7 +6540,7 @@ var BoxWrapper = styled(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
@@ -6589,7 +6589,6 @@ var Box = /*#__PURE__*/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.createElement(BoxWrapper, _extends({
@@ -6625,8 +6624,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onFocus: onFocus,
     onBlur: onBlur,
     onTouchEnd: onTouchEnd,
-    ref: ref,
-    id: id
+    ref: ref
   }, rest), children && safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null)));
 });
 
@@ -24890,9 +24888,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 = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
@@ -25101,7 +25097,6 @@ var Dropdown = function Dropdown(_ref13) {
     width: "100%",
     dataQa: "".concat(ariaLabelledby, "-dropdown")
   }, /*#__PURE__*/React.createElement(Box, {
-    id: inputId,
     as: "input",
     autoComplete: autocompleteValue,
     "aria-controls": "".concat(ariaLabelledby, "_listbox"),
@@ -25304,11 +25299,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -25342,10 +25333,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.createElement(Dropdown$1, {
-    inputId: inputId,
     ariaLabelledby: createIdFromString(labelTextWhenNoError),
     ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
@@ -26142,11 +26131,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.createElement(FormSelect$1, {
     options: options,
     field: field,
@@ -26157,8 +26142,6 @@ var CountryDropdown = function CountryDropdown(_ref) {
     showErrors: showErrors,
     onChange: onChange,
     autocompleteValue: "country-name",
-    htmlFor: htmlFor,
-    inputId: inputId,
     isRequired: isRequired
   });
 };
@@ -26986,7 +26969,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.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -27074,10 +27057,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -27115,8 +27094,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.createElement(Box, {
     padding: "0",
     minWidth: "100%"
@@ -27129,8 +27107,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.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -27151,7 +27128,6 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)))), /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React.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,
@@ -27184,7 +27160,6 @@ var FormInput = function FormInput(_ref15) {
       }
     }
   }, props)) : /*#__PURE__*/React.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,
@@ -39324,11 +39299,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.createElement(FormSelect$1, {
@@ -39339,8 +39310,6 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     autocompleteValue: "address-level1",
-    htmlFor: htmlFor,
-    inputId: inputId,
     isRequired: isRequired
   });
 };
@@ -40854,8 +40823,6 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    htmlFor: "country-name",
-    inputId: "country-name",
     dataQa: "Country",
     isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
@@ -40868,8 +40835,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.createElement(FormInput$1, {
@@ -40881,8 +40846,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.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
@@ -40894,8 +40857,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.createElement(FormStateDropdown, {
@@ -40908,9 +40869,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.createElement(FormInput$1, {
@@ -40926,8 +40884,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.createElement(Checkbox$1, {