@thecb/components 6.0.6 → 6.0.8-beta.0

package/dist/index.esm.js

@@ -4863,7 +4863,8 @@ var BOSTON_BLUE = "#357fb8";
 var INFO_BLUE = "#E4F4FD";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
 var MATISSE_BLUE = "#15749D";
-var ROYAL_BLUE = "#3181E3"; // GREEN
+var ROYAL_BLUE = "#3181E3";
+var ASTRAL_BLUE = "#3176AA"; // GREEN
 
 var FOREST_GREEN = "#19b03F";
 var MEADOW_GREEN = "#16C98D";
@@ -4885,7 +4886,7 @@ var APRICOT_ORANGE = "#FFE8D8"; // RED
 var RED = "#FF0000";
 var CRIMSON_RED = "#ED1C24";
 var THUNDERBIRD_RED = "#C3191F";
-var RAZZMATAZZ_RED = "#ED125F";
+var RAZZMATAZZ_RED = "#D11053";
 var FANTASY_RED = "#FCF4F4";
 var COSMOS_RED = "#FFD0D3";
 var BLUSH_RED = "#FFF0F5"; // Second level color constants
@@ -4969,6 +4970,7 @@ var colors = /*#__PURE__*/Object.freeze({
   HOVER_LIGHT_BLUE: HOVER_LIGHT_BLUE,
   MATISSE_BLUE: MATISSE_BLUE,
   ROYAL_BLUE: ROYAL_BLUE,
+  ASTRAL_BLUE: ASTRAL_BLUE,
   FOREST_GREEN: FOREST_GREEN,
   MEADOW_GREEN: MEADOW_GREEN,
   POLAR_GREEN: POLAR_GREEN,
@@ -6064,6 +6066,18 @@ var createUniqueId = function createUniqueId() {
   return "_" + Math.random().toString(36).substr(2, 9);
 };
 
+var createIdFromString = function createIdFromString(text, postscript) {
+  var unique = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+  if (text === undefined) {
+    return createUniqueId();
+  } else {
+    // "first name", undefined, false -> "first-name"
+    // "email address", "error message", false -> "email-address-error-message"
+    // "shopping cart", "order item", true -> "shopping-cart-order-item_2ahtlz608"
+    return "".concat(text === null || text === void 0 ? void 0 : text.replace(/\s+/g, "-")).concat(postscript ? "-".concat(postscript === null || postscript === void 0 ? void 0 : postscript.replace(/\s+/g, "-")) : "").concat(unique ? createUniqueId() : "");
+  }
+};
 var safeChildren = function safeChildren(children) {
   var replacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var unsafeValues = [false, undefined, NaN, null];
@@ -6146,6 +6160,7 @@ var general = /*#__PURE__*/Object.freeze({
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
+  createIdFromString: createIdFromString,
   safeChildren: safeChildren,
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
@@ -19028,13 +19043,13 @@ var disabledCheckedStyles = {
   "default": "\n  background: #6d717e;\n  border: 1px solid #6d717e;\n"
 };
 var disabledStyles = {
-  "default": "\n  background: ".concat(SEASHELL_WHITE, ";\n  border: 1px solid ").concat(GHOST_GREY, ";\n")
+  "default": "\n  background: ".concat(SEASHELL_WHITE, ";\n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
 var checkedStyles = {
   "default": "\n  background: ".concat(MATISSE_BLUE, ";    \n  border: 1px solid ").concat(MATISSE_BLUE, ";\n")
 };
 var defaultStyles = {
-  "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(GHOST_GREY, ";\n")
+  "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
 var fallbackValues$c = {
   backgroundColor: backgroundColor$2,
@@ -20710,6 +20725,7 @@ var Dropdown = function Dropdown(_ref8) {
       _ref8$autoEraseTypeAh = _ref8.autoEraseTypeAhead,
       autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
       ariaLabelledby = _ref8.ariaLabelledby,
+      ariaDescribedby = _ref8.ariaDescribedby,
       _ref8$autocompleteVal = _ref8.autocompleteValue,
       autocompleteValue = _ref8$autocompleteVal === void 0 ? "" : _ref8$autocompleteVal,
       _ref8$smoothScroll = _ref8.smoothScroll,
@@ -20959,6 +20975,7 @@ var Dropdown = function Dropdown(_ref8) {
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     "aria-expanded": isOpen,
     autocomplete: autocompleteValue,
     background: isOpen ? themeValues.hoverColor : WHITE,
@@ -21175,9 +21192,10 @@ var FormSelect = function FormSelect(_ref) {
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React.createElement(Dropdown$1, {
-    ariaLabelledby: labelTextWhenNoError.replace(/\s+/g, "-"),
+    ariaLabelledby: createIdFromString(labelTextWhenNoError),
+    ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -21204,7 +21222,8 @@ var FormSelect = function FormSelect(_ref) {
     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                }"
+    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, ";")
   })));
@@ -22479,8 +22498,8 @@ var labelColor$1 = {
   disabled: "".concat(CHARADE_GREY)
 };
 var borderColor$1 = {
-  "default": "".concat(GREY_CHATEAU),
-  disabled: "".concat(GREY_CHATEAU)
+  "default": "".concat(STORM_GREY),
+  disabled: "".concat(STORM_GREY)
 };
 var lineHeight$2 = {
   "default": "1rem",
@@ -22627,7 +22646,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), /*#__PURE__*/React.createElement(Text$1, {
     color: themeValues.linkColor,
     variant: "pS",
@@ -22644,7 +22663,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -22664,7 +22683,8 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)))), /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React.createElement(FormattedInputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     onChange: function onChange(e) {
       return fieldActions.set(e);
     },
@@ -22680,7 +22700,8 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles
   }, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     onChange: function onChange(e) {
       return fieldActions.set(e.target.value);
     },
@@ -22702,7 +22723,8 @@ var FormInput = function FormInput(_ref15) {
     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              }"
+    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, ";")
   }), !isMobile && decorator && /*#__PURE__*/React.createElement(Box, {
@@ -40643,7 +40665,7 @@ var TitleModule = function TitleModule(_ref) {
 var color$a = "#15749D";
 var hoverColor$4 = "#116285";
 var activeColor$5 = "#0E506D";
-var linkColor$3 = "#357fb8";
+var linkColor$3 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
 var fallbackValues$z = {
@@ -41824,7 +41846,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
 var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$A, "default");
 
 var linkColor$4 = {
-  "default": "#357fb8"
+  "default": "#3176AA"
 };
 var fontSize$a = {
   "default": "1rem"
@@ -42978,7 +43000,7 @@ var backgroundColor$9 = {
   footer: "#ffffff"
 };
 var linkColor$5 = {
-  "default": "#357fb8",
+  "default": "#3176AA",
   footer: "#ffffff"
 };
 var border$3 = {