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

package/dist/index.cjs.js

@@ -18819,7 +18819,8 @@ var Alert = function Alert(_ref) {
     borderSize: noBorder ? "0px" : "1px",
     boxShadow: enableBoxShadow ? (_generateShadows = generateShadows()) === null || _generateShadows === void 0 ? void 0 : (_generateShadows$inse = _generateShadows.inset) === null || _generateShadows$inse === void 0 ? void 0 : _generateShadows$inse.base : "",
     extraStyles: extraStyles,
-    role: "alert"
+    role: "alert",
+    "aria-atomic": true
   }, maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: maxContentWidth
   }, content) : content);
@@ -22076,7 +22077,7 @@ var HiddenCheckbox = styled__default.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__default.input.withConfig({
+var StyledCheckbox = styled__default.div.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) {
@@ -22149,9 +22150,10 @@ var Checkbox = function Checkbox(_ref4) {
     "aria-label": name,
     checked: checked,
     onChange: onChange,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    "aria-invalid": error,
+    "aria-describedby": error ? "".concat(name, "-error-message") : ""
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
-    type: "checkbox",
     error: error,
     disabled: disabled,
     checked: checked,
@@ -22161,9 +22163,7 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles,
-    "aria-invalid": error,
-    "aria-describedby": error ? "".concat(name, "-error-message") : ""
+    focusedStyles: themeValues.focusedStyles
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -24021,8 +24021,7 @@ var Dropdown = function Dropdown(_ref8) {
     value: inputValue,
     width: "100%",
     dataQa: placeholder,
-    required: options.required,
-    "aria-required": options.required
+    required: options.required
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen,
     onClick: _onClick
@@ -25855,7 +25854,7 @@ var fallbackValues$k = {
 };
 
 var _excluded$p = ["showErrors", "themeValues"],
-    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "isPhone", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"];
+    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -25926,8 +25925,6 @@ 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,
@@ -26012,7 +26009,7 @@ var FormInput = function FormInput(_ref15) {
     padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": "".concat(createIdFromString(labelTextWhenNoError), "-error-message"),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(value) {
       return setValue(value);
@@ -26020,17 +26017,7 @@ var FormInput = function FormInput(_ref15) {
     type: type,
     value: field.rawValue,
     pattern: isNum ? "[0-9]*" : "",
-    inputMode: function inputMode() {
-      if (isNum) {
-        return "numeric";
-      } else if (isEmail) {
-        return "email";
-      } else if (isPhone) {
-        return "tel";
-      } else {
-        return "text";
-      }
-    },
+    inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
     field: field,
     formatter: formatter,
     showErrors: showErrors,
@@ -26038,10 +26025,10 @@ var FormInput = function FormInput(_ref15) {
     themeValues: themeValues,
     $customHeight: customHeight,
     $extraStyles: extraStyles,
-    autocomplete: autocomplete
+    autoComplete: autocomplete
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": "".concat(createIdFromString(labelTextWhenNoError), "-error-message"),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return setValue(e.target.value);
@@ -26052,7 +26039,7 @@ var FormInput = function FormInput(_ref15) {
     inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
     field: field,
     showErrors: showErrors,
-    "data-qa": labelTextWhenNoError,
+    "data-qa": createIdFromString(labelTextWhenNoError),
     themeValues: themeValues,
     background: background,
     $customHeight: customHeight,
@@ -48550,6 +48537,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       toggleOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    role: "button",
     variant: "pS",
     onClick: function onClick() {
       return toggleOpen(true);
@@ -49166,7 +49154,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "billing postal-code"
+    autoComplete: "billing postal-code"
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
     childGap: "4px",
     align: "center"