@thecb/components 8.4.11-beta.14 → 8.4.11-beta.16

package/dist/index.esm.js

@@ -22068,7 +22068,7 @@ var HiddenCheckbox = styled.input.attrs({
   displayName: "Checkbox__HiddenCheckbox",
   componentId: "sc-36kqbv-3"
 })(["border:0;clip:rect(0 0 0 0);clippath:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;"]);
-var StyledCheckbox = styled.div.withConfig({
+var StyledCheckbox = styled.input.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
 })(["display:inline-block;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";"], CheckboxIcon, function (_ref2) {
@@ -22141,10 +22141,9 @@ var Checkbox = function Checkbox(_ref4) {
     "aria-label": name,
     checked: checked,
     onChange: onChange,
-    tabIndex: "-1",
-    "aria-invalid": error,
-    "aria-describedby": error ? "".concat(name, "-error-message") : ""
+    tabIndex: "-1"
   }), /*#__PURE__*/React.createElement(StyledCheckbox, {
+    type: "checkbox",
     error: error,
     disabled: disabled,
     checked: checked,
@@ -22154,7 +22153,9 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles
+    focusedStyles: themeValues.focusedStyles,
+    "aria-invalid": error,
+    "aria-describedby": error ? "".concat(name, "-error-message") : ""
   }, /*#__PURE__*/React.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -24204,7 +24205,7 @@ var FormSelect = function FormSelect(_ref) {
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
     id: createIdFromString(labelTextWhenNoError)
-  }, "".concat(labelTextWhenNoError).concat(options.required ? "*" : "")))), /*#__PURE__*/React.createElement(Dropdown$1, {
+  }, labelTextWhenNoError))), /*#__PURE__*/React.createElement(Dropdown$1, {
     ariaLabelledby: createIdFromString(labelTextWhenNoError),
     ariaDescribedby: "".concat(createIdFromString(labelTextWhenNoError), "-error-message"),
     maxHeight: dropdownMaxHeight,
@@ -25846,7 +25847,7 @@ var fallbackValues$k = {
 };
 
 var _excluded$p = ["showErrors", "themeValues"],
-    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"];
+    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "isPhone", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -25917,6 +25918,8 @@ var FormInput = function FormInput(_ref15) {
       isNum = _ref15$isNum === void 0 ? false : _ref15$isNum,
       _ref15$isEmail = _ref15.isEmail,
       isEmail = _ref15$isEmail === void 0 ? false : _ref15$isEmail,
+      _ref15$isPhone = _ref15.isPhone,
+      isPhone = _ref15$isPhone === void 0 ? false : _ref15$isPhone,
       _ref15$helperModal = _ref15.helperModal,
       helperModal = _ref15$helperModal === void 0 ? false : _ref15$helperModal,
       field = _ref15.field,
@@ -25993,7 +25996,7 @@ var FormInput = function FormInput(_ref15) {
     "aria-label": showPassword ? "Hide Password" : "Show password",
     "aria-live": "polite",
     onKeyPress: function onKeyPress(e) {
-      return (e.key === "Enter" || e.code === "Space") && setShowPassword(!showPassword);
+      return e.key === "Enter" && setShowPassword(!showPassword);
     }
   }, showPassword ? "Hide" : "Show"), isMobile && decorator && /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 0 auto"
@@ -26009,7 +26012,17 @@ var FormInput = function FormInput(_ref15) {
     type: type,
     value: field.rawValue,
     pattern: isNum ? "[0-9]*" : "",
-    inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
+    inputMode: function inputMode() {
+      if (isNum) {
+        return "numeric";
+      } else if (isEmail) {
+        return "email";
+      } else if (isPhone) {
+        return "tel";
+      } else {
+        return "text";
+      }
+    },
     field: field,
     formatter: formatter,
     showErrors: showErrors,
@@ -40344,7 +40357,7 @@ var AddressForm = function AddressForm(_ref) {
     }, []);
   }
 
-  var street1ErrorMessages = _defineProperty({}, required.error, "Street is required");
+  var street1ErrorMessages = _defineProperty({}, required.error, "Street address is required");
 
   var cityErrorMessages = _defineProperty({}, required.error, "City is required");
 
@@ -40421,7 +40434,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     "aria-label": isUS ? "State" : "State or Province",
-    required: true
+    required: true,
+    autocomplete: "administrative-area"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -40438,7 +40452,7 @@ var AddressForm = function AddressForm(_ref) {
     required: true
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "address checkbox",
-    title: "Save address to Wallet",
+    title: "Save address to wallet",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
   })));
@@ -48791,11 +48805,14 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
     title: modalTitle
-  })), showCheckbox && hasError && /*#__PURE__*/React.createElement(Text$1, {
+  })), /*#__PURE__*/React.createElement("div", {
+    "aria-live": "polite",
+    "aria-atomic": true
+  }, showCheckbox && hasError && /*#__PURE__*/React.createElement(Text$1, {
     variant: "pXS",
     color: ERROR_COLOR,
     id: "".concat(id, "-error-message")
-  }, errorMessage)))));
+  }, errorMessage))))));
 };
 
 var _excluded$y = ["version"];
@@ -49358,8 +49375,8 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true,
-    autocomplete: "tel"
+    autocomplete: "tel",
+    isPhone: true
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",