@thecb/components 9.2.0-beta.12 → 9.2.0-beta.13

package/dist/index.esm.js

@@ -24193,7 +24193,11 @@ 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;
+      smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+      _ref$widthFitOptions = _ref.widthFitOptions,
+      widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24216,7 +24220,9 @@ var FormSelect = function FormSelect(_ref) {
   });
   return /*#__PURE__*/React.createElement(SelectContainer, {
     ref: dropdownRef,
-    disabled: disabled
+    disabled: disabled,
+    "aria-disabled": disabled,
+    "data-qa": dataQa
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%"
@@ -24234,6 +24240,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,
@@ -24241,6 +24248,7 @@ var FormSelect = function FormSelect(_ref) {
     disabledValues: disabledValues,
     isOpen: open,
     isError: field.hasErrors && field.dirty || field.hasErrors && showErrors,
+    ariaInvalid: field.hasErrors && field.dirty || field.hasErrors && showErrors,
     onSelect: onChange ? function (value) {
       return onChange(value);
     } : function (value) {
@@ -24254,17 +24262,17 @@ var FormSelect = function FormSelect(_ref) {
     smoothScroll: smoothScroll
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
-    justify: "space-between",
-    "aria-live": "polite"
-  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React.createElement(Text$1, {
+    justify: "space-between"
+  }, /*#__PURE__*/React.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }",
-    id: createIdFromString(labelTextWhenNoError, "error message")
-  }, errorMessages[field.errors[0]]) : /*#__PURE__*/React.createElement(Text$1, {
-    extraStyles: "height: ".concat(themeValues.lineHeight, ";")
-  })));
+    extraStyles: "\n            word-break: break-word;\n            font-family: Public Sans;\n            &::first-letter {\n              text-transform: uppercase;\n            }\n          ",
+    id: createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-live": "polite",
+    "aria-atomic": true,
+    "data-qa": createIdFromString(labelTextWhenNoError, "error message")
+  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : "")));
 };
 
 var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$g, "default");
@@ -27283,7 +27291,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
 var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$u);
 
 var activeColor$6 = "".concat(MATISSE_BLUE);
-var inactiveColor = "".concat(GREY_CHATEAU);
+var inactiveColor = "".concat(STORM_GREY);
 var fallbackValues$v = {
   activeColor: activeColor$6,
   inactiveColor: inactiveColor
@@ -27316,19 +27324,21 @@ var RadioButton$1 = function RadioButton(_ref2) {
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 4px 0px ".concat(themeValues.activeColor)
+      outline: "3px solid ".concat(themeValues.activeColor),
+      outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 4px 0px ".concat(themeValues.activeColor)
+      outline: "3px solid ".concat(themeValues.activeColor),
+      outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     }
   };
   var buttonCenter = {
@@ -27377,7 +27387,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderWidth: "1px",
     borderStyle: "solid",
     borderRadius: "12px",
-    margin: "4px 14px 4px 4px",
+    margin: "6px 14px 6px 6px",
     height: "24px",
     width: "24px",
     variants: buttonBorder,
@@ -50325,19 +50335,19 @@ var ToastNotification = function ToastNotification(_ref) {
       backgroundColor = _ref.backgroundColor;
   return /*#__PURE__*/React.createElement(Box, {
     onClick: closeToastNotification,
-    background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === "error" ? ERROR_BACKGROUND_COLOR : WHITE,
+    background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === VARIANTS.ERROR ? ERROR_BACKGROUND_COLOR : WHITE,
     minWidth: minWidth,
     minHeight: height && parseInt(height) < 100 ? height : "100px",
     height: height ? height : "auto",
     tabIndex: toastOpen ? "-1" : "0",
     padding: "0rem 1rem",
     borderRadius: "4px",
-    boxShadow: "0px 4px 4px rgba(41, 42, 51, 0.15), 0px 1px 7px rgba(41, 42, 51, 0.2), 0px 7px 12px rgba(41, 42, 51, 0.15)",
+    boxShadow: generateShadows().standard.base,
     extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n      cursor: pointer;\n    ")
   }, /*#__PURE__*/React.createElement(Cluster, {
     align: "center",
     childGap: childGap
-  }, variant === "success" && /*#__PURE__*/React.createElement(SuccessfulIconMedium, null), variant === "error" && /*#__PURE__*/React.createElement(ErroredIcon, null), /*#__PURE__*/React.createElement(Box, {
+  }, variant === VARIANTS.SUCCESS && /*#__PURE__*/React.createElement(SuccessfulIconMedium, null), variant === VARIANTS.ERROR && /*#__PURE__*/React.createElement(ErroredIcon, null), /*#__PURE__*/React.createElement(Box, {
     padding: "1rem 0",
     maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(Paragraph$1, {