@thecb/components 6.1.0-beta.0 → 6.1.0-beta.2

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];
@@ -6137,6 +6151,8 @@ var checkDeniedCards = function checkDeniedCards(name) {
 */
 
 var screenReaderOnlyStyle = "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
+var inputPlaceholderTextStyle = "\n  ::-webkit-input-placeholder {\n    color: ".concat(CHARADE_GREY, ";\n  }\n  ::-moz-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::-ms-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n");
+var inputDisabledStyle = "\n  color: #6e727e;\n  background-color: #f7f7f7;\n  pointer-events: none;\n";
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6144,12 +6160,15 @@ var general = /*#__PURE__*/Object.freeze({
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
+  createIdFromString: createIdFromString,
   safeChildren: safeChildren,
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
   displayCardBrand: displayCardBrand,
   checkDeniedCards: checkDeniedCards,
-  screenReaderOnlyStyle: screenReaderOnlyStyle
+  screenReaderOnlyStyle: screenReaderOnlyStyle,
+  inputPlaceholderTextStyle: inputPlaceholderTextStyle,
+  inputDisabledStyle: inputDisabledStyle
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
@@ -19024,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,
@@ -20706,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,
@@ -20955,13 +20975,14 @@ 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,
     borderRadius: "2px",
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
-    extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;",
+    extraStyles: disabled ? "".concat(inputPlaceholderTextStyle).concat(inputDisabledStyle) : inputPlaceholderTextStyle,
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     isOpen: isOpen,
     minHeight: "48px",
@@ -21171,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 : "",
@@ -21200,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, ";")
   })));
@@ -22475,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",
@@ -22623,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",
@@ -22640,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,
@@ -22660,7 +22683,9 @@ 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"),
+    "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return fieldActions.set(e);
     },
@@ -22676,7 +22701,9 @@ 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"),
+    "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return fieldActions.set(e.target.value);
     },
@@ -22698,7 +22725,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, {
@@ -40234,6 +40262,8 @@ var getApplicationNode = function getApplicationNode() {
 var Modal$1 = function Modal(_ref) {
   var hideModal = _ref.hideModal,
       continueAction = _ref.continueAction,
+      _ref$isContinueAction = _ref.isContinueActionDisabled,
+      isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
       cancelAction = _ref.cancelAction,
       modalOpen = _ref.modalOpen,
       modalHeaderText = _ref.modalHeaderText,
@@ -40252,6 +40282,8 @@ var Modal$1 = function Modal(_ref) {
       defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
       _ref$onlyCloseButton = _ref.onlyCloseButton,
       onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
+      _ref$noButtons = _ref.noButtons,
+      noButtons = _ref$noButtons === void 0 ? false : _ref$noButtons,
       maxHeight = _ref.maxHeight,
       _ref$underlayClickExi = _ref.underlayClickExits,
       underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
@@ -40312,7 +40344,7 @@ var Modal$1 = function Modal(_ref) {
     justify: "flex-end",
     align: "center",
     childGap: "0rem"
-  }, !onlyCloseButton ? /*#__PURE__*/React.createElement(Fragment, null, isMobile ? /*#__PURE__*/React.createElement(Stack, {
+  }, !noButtons && /*#__PURE__*/React.createElement(React.Fragment, null, !onlyCloseButton ? /*#__PURE__*/React.createElement(Fragment, null, isMobile ? /*#__PURE__*/React.createElement(Stack, {
     childGap: "1rem",
     direction: "row"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -40334,6 +40366,7 @@ var Modal$1 = function Modal(_ref) {
     text: continueButtonText,
     dataQa: continueButtonText,
     isLoading: isLoading,
+    disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
     className: "modal-continue-button"
   }))) : /*#__PURE__*/React.createElement(Stack, {
@@ -40353,6 +40386,7 @@ var Modal$1 = function Modal(_ref) {
     text: continueButtonText,
     dataQa: continueButtonText,
     isLoading: isLoading,
+    disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
     className: "modal-continue-button"
   }))) : /*#__PURE__*/React.createElement(Box, {
@@ -40364,7 +40398,7 @@ var Modal$1 = function Modal(_ref) {
     dataQa: "Close",
     extraStyles: buttonExtraStyles,
     className: "modal-cancel-button"
-  })))))))), children);
+  }))))))))), children);
 };
 
 var fontSize$9 = {
@@ -40637,7 +40671,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 = {
@@ -41818,7 +41852,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"
@@ -42972,7 +43006,7 @@ var backgroundColor$9 = {
   footer: "#ffffff"
 };
 var linkColor$5 = {
-  "default": "#357fb8",
+  "default": "#3176AA",
   footer: "#ffffff"
 };
 var border$3 = {
@@ -43032,7 +43066,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       borderRadius: "3px",
       extraStyles: "overflow: scroll; max-height: 20rem;"
     }, /*#__PURE__*/React.createElement(Text$1, {
-      variant: "p"
+      variant: "p",
+      extraStyles: "& a { text-decoration: underline; }"
     }, terms)),
     defaultWrapper: false,
     onlyCloseButton: !acceptText,
@@ -43276,6 +43311,9 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
     time.timer = setTimeout(function () {
       periscopeDataRequestFailure();
     }, 10000);
+    return function () {
+      return clearTimeout(time.timer);
+    };
   }, []);
 
   var Dashboard = function Dashboard(height) {
@@ -43296,8 +43334,11 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
   var validatePeriscope = function validatePeriscope(message) {
     if (isValidMessage(message)) {
       setHeight(message.data.dashboard_height + 100);
-      clearTimeout(time.timer);
-      periscopeDataRequestSuccess();
+
+      if (!periscopeDataSuccess) {
+        clearTimeout(time.timer);
+        periscopeDataRequestSuccess();
+      }
     }
   };
 
@@ -43606,13 +43647,27 @@ var index$4 = /*#__PURE__*/Object.freeze({
   fontWeights: style_constants
 });
 
+var useFocusInvalidInput = function useFocusInvalidInput() {
+  var showErrors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  // Only move focus when "showErrors" is true
+  // "showErrors" is managed by container page of form
+  // typically set to "true" on attempted form submission, if errors exist
+  useEffect$1(function () {
+    if (showErrors) {
+      var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
+      console.log("inputs with errors...", inputsWithErrors);
+    }
+  }, [showErrors]);
+};
+
 
 
 var index$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   formats: formats,
   general: general,
-  theme: themeUtils
+  theme: themeUtils,
+  useFocusInvalidInput: useFocusInvalidInput
 });
 
 export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, FailedIcon, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };