@thecb/components 8.4.11-beta.3 → 8.4.11-beta.5

package/dist/index.esm.js

@@ -22143,7 +22143,7 @@ var Checkbox = function Checkbox(_ref4) {
     onChange: onChange,
     tabIndex: "-1",
     "aria-invalid": error,
-    "aria-describedBy": error ? "".concat(name, "-error-message") : ""
+    "aria-describedby": error ? "".concat(name, "-error-message") : ""
   }), /*#__PURE__*/React.createElement(StyledCheckbox, {
     error: error,
     disabled: disabled,
@@ -23986,8 +23986,6 @@ var Dropdown = function Dropdown(_ref8) {
     "aria-describedby": ariaDescribedby,
     "aria-expanded": isOpen,
     "aria-live": "assertive",
-    role: "combobox",
-    disabled: disabled,
     autoComplete: autocompleteValue,
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
@@ -24038,7 +24036,7 @@ var Dropdown = function Dropdown(_ref8) {
       id: focusedRef === optionRefs.current[i] ? "focused_option" : choice.value,
       key: choice.value,
       ref: optionRefs.current[i],
-      tabIndex: 0,
+      tabIndex: -1,
       onClick: function onClick(e) {
         return handleItemSelection(e, choice, i);
       },
@@ -24150,8 +24148,6 @@ var fallbackValues$g = {
   hoverFocusStyles: hoverFocusStyles
 };
 
-var _excluded$o = ["fieldActions", "labelTextWhenNoError", "errorMessages", "options", "field", "showErrors", "onChange", "dropdownMaxHeight", "disabledValues", "disabled", "themeValues", "hasTitles", "autocompleteValue", "smoothScroll"];
-
 var FormSelect = function FormSelect(_ref) {
   var fieldActions = _ref.fieldActions,
       labelTextWhenNoError = _ref.labelTextWhenNoError,
@@ -24168,8 +24164,7 @@ var FormSelect = function FormSelect(_ref) {
       hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles,
       autocompleteValue = _ref.autocompleteValue,
       _ref$smoothScroll = _ref.smoothScroll,
-      smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll,
-      rest = _objectWithoutProperties(_ref, _excluded$o);
+      smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24190,10 +24185,10 @@ var FormSelect = function FormSelect(_ref) {
       document.removeEventListener("mousedown", handleClickAway);
     };
   });
-  return /*#__PURE__*/React.createElement(SelectContainer, _extends({
+  return /*#__PURE__*/React.createElement(SelectContainer, {
     ref: dropdownRef,
     disabled: disabled
-  }, rest), /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%"
   }, /*#__PURE__*/React.createElement(Cluster, {
@@ -24207,8 +24202,8 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
     id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React.createElement(Dropdown$1, {
-    "aria-labelledBy": createIdFromString(labelTextWhenNoError),
-    "aria-describedBy": createIdFromString(labelTextWhenNoError, "error message"),
+    ariaLabelledby: createIdFromString(labelTextWhenNoError),
+    ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -24225,14 +24220,13 @@ var FormSelect = function FormSelect(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     },
-    "aria-disabled": disabled,
+    disabled: disabled,
     autocompleteValue: autocompleteValue,
     smoothScroll: smoothScroll,
     required: options.required
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
-    justify: "space-between",
-    "aria-live": "assertive"
+    justify: "space-between"
   }, /*#__PURE__*/React.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -24988,7 +24982,7 @@ var options = [{
   value: "ZW"
 }];
 
-var _excluded$p = ["labelTextWhenNoError", "errorMessages", "field", "fieldActions", "showErrors", "onChange"];
+var _excluded$o = ["labelTextWhenNoError", "errorMessages", "field", "fieldActions", "showErrors", "onChange"];
 
 var CountryDropdown = function CountryDropdown(_ref) {
   var labelTextWhenNoError = _ref.labelTextWhenNoError,
@@ -24997,7 +24991,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
-      rest = _objectWithoutProperties(_ref, _excluded$p);
+      rest = _objectWithoutProperties(_ref, _excluded$o);
 
   return /*#__PURE__*/React.createElement(FormSelect$1, _extends({
     options: options,
@@ -25007,8 +25001,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
-    autocompleteValue: "country-name",
-    autoComplete: "country-name"
+    autocompleteValue: "country-name"
   }, rest));
 };
 
@@ -25075,7 +25068,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$q = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$p = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 /*
   New responsive text component for Detail elements
   (Block level text elements which are smaller than "Title" elements)
@@ -25125,7 +25118,7 @@ var Detail = function Detail(_ref) {
       as = _ref$as === void 0 ? "p" : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$q);
+      rest = _objectWithoutProperties(_ref, _excluded$p);
 
   return /*#__PURE__*/React.createElement(DetailText, _extends({
     variant: variant,
@@ -25849,7 +25842,7 @@ var fallbackValues$k = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$r = ["showErrors", "themeValues"],
+var _excluded$q = ["showErrors", "themeValues"],
     _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
@@ -25883,7 +25876,7 @@ var InputField = styled.input.withConfig({
 var FormattedInputField = styled(function (_ref8) {
   var showErrors = _ref8.showErrors,
       themeValues = _ref8.themeValues,
-      props = _objectWithoutProperties(_ref8, _excluded$r);
+      props = _objectWithoutProperties(_ref8, _excluded$q);
 
   return /*#__PURE__*/React.createElement(FormattedInput, props);
 }).withConfig({
@@ -26043,7 +26036,7 @@ var FormInput = function FormInput(_ref15) {
   }, props))), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between",
-    role: "alert"
+    "aria-live": "assertive"
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -26059,7 +26052,7 @@ var FormInput = function FormInput(_ref15) {
 
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
 
-var _excluded$s = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$r = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -26069,7 +26062,7 @@ var FormInputRow = function FormInputRow(_ref) {
       largeChild = _ref.largeChild,
       largeChildSize = _ref.largeChildSize,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$s);
+      rest = _objectWithoutProperties(_ref, _excluded$r);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: "0"
@@ -26081,14 +26074,14 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$t = ["childGap", "bottomItem", "children"];
+var _excluded$s = ["childGap", "bottomItem", "children"];
 
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
       childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
       bottomItem = _ref.bottomItem,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$t);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
 
   return /*#__PURE__*/React.createElement(Stack, _extends({
     childGap: childGap,
@@ -26096,12 +26089,12 @@ var FormInputColumn = function FormInputColumn(_ref) {
   }, rest), children);
 };
 
-var _excluded$u = ["themeValues", "children"];
+var _excluded$t = ["themeValues", "children"];
 
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$u);
+      rest = _objectWithoutProperties(_ref, _excluded$t);
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
@@ -26366,7 +26359,7 @@ var fallbackValues$o = {
   fontSize: fontSize$8
 };
 
-var _excluded$v = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$u = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
@@ -26386,7 +26379,7 @@ var Heading = function Heading(_ref) {
       as = _ref$as === void 0 ? variant : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$u);
 
   return /*#__PURE__*/React.createElement(HeadingText, _extends({
     variant: variant,
@@ -26677,7 +26670,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$w = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$v = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
@@ -26693,7 +26686,7 @@ var NavFooter = function NavFooter(_ref) {
       footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
       isMobile = _ref.isMobile,
       footerWidth = _ref.footerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$w);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: footerPadding,
@@ -26725,7 +26718,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$x = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$w = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
@@ -26735,7 +26728,7 @@ var NavHeader = function NavHeader(_ref) {
       isMobile = _ref.isMobile,
       backgroundColor = _ref.backgroundColor,
       headerWidth = _ref.headerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$x);
+      rest = _objectWithoutProperties(_ref, _excluded$w);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: "0 16px 4px",
@@ -38510,7 +38503,7 @@ var TableRowWrapper = styled.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$y = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$x = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
@@ -38520,7 +38513,7 @@ var TableRow = function TableRow(_ref) {
       hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
       onClick = _ref.onClick,
       themeValues = _ref.themeValues,
-      props = _objectWithoutProperties(_ref, _excluded$y);
+      props = _objectWithoutProperties(_ref, _excluded$x);
 
   return /*#__PURE__*/React.createElement(TableRowWrapper, _extends({
     onClick: onClick,
@@ -40375,8 +40368,7 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    "aria-label": "country",
-    "aria-role": "listbox"
+    "aria-label": "Country"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
@@ -40398,7 +40390,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocomplete: "address-line2",
-    "aria-label": "address line 2"
+    "aria-label": "Apt, Suite, Unit, Floor, etc. (Optional)"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     required: true,
@@ -48155,7 +48147,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$z = ["amount"],
+var _excluded$y = ["amount"],
     _excluded2$1 = ["amount"];
 
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
@@ -48365,7 +48357,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-        rest = _objectWithoutProperties(_ref5, _excluded$z);
+        rest = _objectWithoutProperties(_ref5, _excluded$y);
 
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
@@ -48799,12 +48791,12 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage)))));
 };
 
-var _excluded$A = ["version"];
+var _excluded$z = ["version"];
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
       version = _ref$version === void 0 ? "v1" : _ref$version,
-      rest = _objectWithoutProperties(_ref, _excluded$A);
+      rest = _objectWithoutProperties(_ref, _excluded$z);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);