@thecb/components 9.1.0-beta.7 → 9.1.0

package/dist/index.cjs.js

@@ -6530,7 +6530,7 @@ var BoxWrapper = styled__default(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
+var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
 /*
   Box component to create generic boxes
   Supply padding, border, background, and color values
@@ -6540,7 +6540,8 @@ var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxS
 */
 
 var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$padding = _ref.padding,
+  var autocompleteValue = _ref.autocompleteValue,
+      _ref$padding = _ref.padding,
       padding = _ref$padding === void 0 ? "16px" : _ref$padding,
       _ref$borderSize = _ref.borderSize,
       borderSize = _ref$borderSize === void 0 ? "0px" : _ref$borderSize,
@@ -6580,6 +6581,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       rest = _objectWithoutProperties(_ref, _excluded$3);
 
   return /*#__PURE__*/React__default.createElement(BoxWrapper, _extends({
+    autoComplete: autocompleteValue,
     padding: padding,
     borderSize: borderSize,
     borderColor: borderColor,
@@ -18762,7 +18764,13 @@ var Alert = function Alert(_ref) {
       _ref$iconPadding = _ref.iconPadding,
       iconPadding = _ref$iconPadding === void 0 ? "0 0 0 1rem" : _ref$iconPadding,
       _ref$contentFullHeigh = _ref.contentFullHeight,
-      contentFullHeight = _ref$contentFullHeigh === void 0 ? false : _ref$contentFullHeigh;
+      contentFullHeight = _ref$contentFullHeigh === void 0 ? false : _ref$contentFullHeigh,
+      _ref$ariaRole = _ref.ariaRole,
+      ariaRole = _ref$ariaRole === void 0 ? null : _ref$ariaRole,
+      _ref$ariaAtomic = _ref.ariaAtomic,
+      ariaAtomic = _ref$ariaAtomic === void 0 ? true : _ref$ariaAtomic,
+      _ref$ariaLive = _ref.ariaLive,
+      ariaLive = _ref$ariaLive === void 0 ? "polite" : _ref$ariaLive;
   var Icon = AlertIcons[variant];
   var contentPadding = maxContentWidth ? "".concat(padding, " 1rem") : innerContentPadding;
   var content = /*#__PURE__*/React__default.createElement(Sidebar, {
@@ -18808,7 +18816,7 @@ var Alert = function Alert(_ref) {
     minHeight: "100%",
     onClick: onLinkClick
   }, /*#__PURE__*/React__default.createElement(IconQuit, null))))));
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: padding,
     width: "100%",
     minHeight: height && parseInt(height) < 100 ? height : "100px",
@@ -18819,9 +18827,12 @@ 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",
-    "aria-atomic": true
-  }, maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
+    "aria-live": ariaLive
+  }, ariaAtomic !== null ? {
+    "aria-atomic": ariaAtomic
+  } : {}, ariaRole !== null ? {
+    role: ariaRole
+  } : {}), maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: maxContentWidth
   }, content) : content);
 };
@@ -23749,8 +23760,7 @@ var Dropdown = function Dropdown(_ref8) {
       autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
       ariaLabelledby = _ref8.ariaLabelledby,
       ariaDescribedby = _ref8.ariaDescribedby,
-      _ref8$autocompleteVal = _ref8.autocompleteValue,
-      autocompleteValue = _ref8$autocompleteVal === void 0 ? null : _ref8$autocompleteVal,
+      autocompleteValue = _ref8.autocompleteValue,
       _ref8$smoothScroll = _ref8.smoothScroll,
       smoothScroll = _ref8$smoothScroll === void 0 ? true : _ref8$smoothScroll,
       _ref8$ariaInvalid = _ref8.ariaInvalid,
@@ -24079,7 +24089,7 @@ var Dropdown = function Dropdown(_ref8) {
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
-      extraStyles: "padding-left: 16px; \n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", "; \n                      white-space: nowrap; \n                      overflow: hidden; \n                      text-overflow: ellipsis;")
+      extraStyles: "padding-left: 16px;\n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", ";\n                      white-space: nowrap;\n                      overflow: hidden;\n                      text-overflow: ellipsis;")
     }, choice.text));
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
@@ -24183,12 +24193,13 @@ var FormSelect = function FormSelect(_ref) {
       themeValues = _ref.themeValues,
       _ref$hasTitles = _ref.hasTitles,
       hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles,
-      _ref$autocompleteValu = _ref.autocompleteValue,
-      autocompleteValue = _ref$autocompleteValu === void 0 ? null : _ref$autocompleteValu,
+      autocompleteValue = _ref.autocompleteValue,
       _ref$smoothScroll = _ref.smoothScroll,
       smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+      _ref$widthFitOptions = _ref.widthFitOptions,
+      widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24231,6 +24242,7 @@ var FormSelect = function FormSelect(_ref) {
     ariaLabelledby: createIdFromString(labelTextWhenNoError),
     ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
+    widthFitOptions: widthFitOptions,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
     options: options,
@@ -25956,8 +25968,7 @@ var FormInput = function FormInput(_ref15) {
       themeValues = _ref15.themeValues,
       background = _ref15.background,
       customHeight = _ref15.customHeight,
-      _ref15$autocompleteVa = _ref15.autocompleteValue,
-      autocompleteValue = _ref15$autocompleteVa === void 0 ? null : _ref15$autocompleteVa,
+      autocompleteValue = _ref15.autocompleteValue,
       extraStyles = _ref15.extraStyles,
       removeFromValue = _ref15.removeFromValue,
       _ref15$dataQa = _ref15.dataQa,
@@ -26627,12 +26638,11 @@ var LineItem = function LineItem(_ref) {
     return visibleFields.includes(attr.key) && attr.key !== "description";
   })) === null || _customAttributes$fil === void 0 ? void 0 : _customAttributes$fil.map(function (attr) {
     return /*#__PURE__*/React__default.createElement(Paragraph$1, {
-      variant: themeValues.paragraphVariant,
+      variant: "pS",
       weight: "400",
-      key: attr.key
-    }, /*#__PURE__*/React__default.createElement(Text$1, {
-      weight: FONT_WEIGHT_SEMIBOLD
-    }, "".concat(formatAttrKeys(attr.key), ":")), /*#__PURE__*/React__default.createElement(Text$1, null, " ".concat(attr.value)));
+      key: attr.key,
+      color: STORM_GREY
+    }, "".concat(formatAttrKeys(attr.key), ": ").concat(attr.value));
   });
   return /*#__PURE__*/React__default.createElement(Cluster, {
     nowrap: true,
@@ -26647,7 +26657,7 @@ var LineItem = function LineItem(_ref) {
     variant: themeValues.paragraphVariant,
     weight: "400"
   }, subDescription), visibleCustomAttrs && /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "0"
+    childGap: "0.25rem"
   }, visibleCustomAttrs)), !!displayQuantity && /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: themeValues.paragraphVariant,
     weight: themeValues.weightTitle
@@ -27339,7 +27349,8 @@ var fallbackValues$w = {
 var SELECT_ALL = "Select All";
 
 var SearchableSelect = function SearchableSelect(_ref) {
-  var items = _ref.items,
+  var autocompleteValue = _ref.autocompleteValue,
+      items = _ref.items,
       selectedItems = _ref.selectedItems,
       allSelected = _ref.allSelected,
       toggleSelectAllItems = _ref.toggleSelectAllItems,
@@ -27381,6 +27392,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
     border: themeValues.border,
     extraStyles: disabled && "color: #6e727e; background-color: #f7f7f7; pointer-events: none;"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
+    autocompleteValue: autocompleteValue,
     errorMessages: {},
     field: fields.searchTerm,
     fieldActions: actions.fields.searchTerm,
@@ -37998,9 +38010,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
-      countryCode = _ref.countryCode,
-      _ref$autocompleteValu = _ref.autocompleteValue,
-      autocompleteValue = _ref$autocompleteValu === void 0 ? null : _ref$autocompleteValu;
+      countryCode = _ref.countryCode;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
@@ -38010,7 +38020,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: autocompleteValue
+    autocompleteValue: "address-level1"
   });
 };
 
@@ -39380,7 +39390,7 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "city",
+    autocompleteValue: "address-level2",
     dataQa: "City"
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
@@ -39392,7 +39402,6 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "administrative-area",
     dataQa: "State or Province"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
@@ -48399,7 +48408,7 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "tel",
+    autocompleteValue: "tel-national",
     dataQa: "Phone number",
     isNum: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {