@thecb/components 11.9.2-beta.3 → 11.9.3-beta.0

package/dist/index.esm.js

@@ -25927,7 +25927,8 @@ var FormInput = function FormInput(_ref15) {
     minWidth: "100%"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
-    align: "center"
+    align: "center",
+    overflow: true
   }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
@@ -25935,22 +25936,16 @@ var FormInput = function FormInput(_ref15) {
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
     id: createIdFromString(labelTextWhenNoError)
-  }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: labelTextVariant,
-    color: themeValues.linkColor,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.hoverFocusStyles,
-    extraStyles: "text-decoration: underline; cursor: pointer; &:focus { outline-offset: -2px; }",
-    onClick: function onClick() {
+  }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "smallGhost",
+    text: showPassword ? "Hide" : "Show",
+    action: function action() {
       return setShowPassword(!showPassword);
     },
-    tabIndex: "0",
     "aria-label": showPassword ? "Hide Password" : "Show password",
-    "aria-live": "polite",
-    onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && setShowPassword(!showPassword);
-    }
-  }, showPassword ? "Hide" : "Show"), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "margin: 0; min-width: auto;",
+    textExtraStyles: "color: ".concat(themeValues.linkColor, ";")
+  }), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -41149,7 +41144,7 @@ var EmailForm = function EmailForm(_ref) {
     }, []);
   }
   useConditionallyAddValidator(isRequired, required, actions.fields.email.addValidator, actions.fields.email.removeValidator);
-  var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
+  var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -41241,7 +41236,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
       };
     }, []);
   }
-  var EmailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
+  var EmailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Email address is not valid");
   return /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: EmailErrorMessages,
@@ -45940,7 +45935,7 @@ var LoginForm = function LoginForm(_ref) {
       };
     }, []);
   }
-  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
+  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
   var passwordErrorMessages = _defineProperty({}, required.error, "Password is required");
   return /*#__PURE__*/React__default.createElement(FormInputColumn, {
     role: "form",
@@ -49313,7 +49308,7 @@ 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 emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
+  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");
   return /*#__PURE__*/React__default.createElement(FormInputColumn, {