@thecb/components 8.0.4-beta.5 → 8.0.4-beta.7

package/dist/index.cjs.js

@@ -6885,10 +6885,11 @@ var Sidebar = function Sidebar(_ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null))));
 };
 
+var _templateObject;
 var StackWrapper = styled__default.div.withConfig({
   displayName: "Stackstyled__StackWrapper",
   componentId: "sc-ejhezz-0"
-})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";"], function (_ref) {
+})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";&:hover{", "}"], function (_ref) {
   var direction = _ref.direction;
   return direction;
 }, function (_ref2) {
@@ -6905,9 +6906,12 @@ var StackWrapper = styled__default.div.withConfig({
   var bottomItem = _ref5.bottomItem,
       direction = _ref5.direction;
   return bottomItem ? "\n    > :nth-child(".concat(bottomItem, ") {\n        ").concat(direction === "row" ? "margin-left: auto;" : "margin-top: auto;", "\n    }\n  ") : "";
+}, function (_ref6) {
+  var hoverStyles = _ref6.hoverStyles;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        ", "\n      "])), hoverStyles);
 });
 
-var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify"];
+var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify", "hoverStyles"];
 /*
   Component to impose margin-top between a list of child elements
   Useful for things like sidebars and button lists
@@ -6928,6 +6932,7 @@ var Stack = function Stack(_ref) {
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? "column" : _ref$direction,
       justify = _ref.justify,
+      hoverStyles = _ref.hoverStyles,
       rest = _objectWithoutProperties(_ref, _excluded$a);
 
   return /*#__PURE__*/React__default.createElement(StackWrapper, _extends({
@@ -26502,7 +26507,7 @@ var NavHeader = function NavHeader(_ref) {
   }, rightContent))))));
 };
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _DEFAULT_ERROR_MESSAG;
+var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _DEFAULT_ERROR_MESSAG;
 
 var MIN_LENGTH_ERROR = "error/HAS_LENGTH";
 var MAX_LENGTH_ERROR = "max_length_error";
@@ -26543,7 +26548,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject || (_templateObject = _taggedTemplateLiteral(["", " is too short"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " is too long"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " is not the right length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " is not a valid length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["", " is not a valid email address"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", " needs a number"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", " needs an uppercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", " needs a lowercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", " needs a special character"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["", " must be only numbers"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["", " must be only letters"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["", " is required"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["", " is too high"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["", " is too low"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["", " must match ", ""])), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["", " is not a valid option"])), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["", " is too short"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " is too long"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " is not the right length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " is not a valid length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["", " is not a valid email address"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", " needs a number"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", " needs an uppercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", " needs a lowercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", " needs a special character"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["", " must be only numbers"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["", " must be only letters"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["", " is required"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["", " is too high"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["", " is too low"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["", " must match ", ""])), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["", " is not a valid option"])), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -26812,11 +26817,11 @@ var ProcessingFee = function ProcessingFee(_ref) {
 
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
 
-var backgroundColor$5 = MATISSE_BLUE;
-var borderColor$2 = GREY_CHATEAU;
+var activeColor$5 = MATISSE_BLUE;
+var inactiveBorderColor = GREY_CHATEAU;
 var fallbackValues$t = {
-  borderColor: borderColor$2,
-  backgroundColor: backgroundColor$5
+  inactiveBorderColor: inactiveBorderColor,
+  activeColor: activeColor$5
 };
 
 var HiddenRadioInput = styled__default.input.withConfig({
@@ -26827,21 +26832,21 @@ var Circle = styled__default.div.withConfig({
   displayName: "RadioButtonWithLabel__Circle",
   componentId: "sc-1m9whwg-1"
 })(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], function (_ref) {
-  var borderColor = _ref.borderColor;
-  return "1px solid ".concat(borderColor);
+  var inactiveBorderColor = _ref.inactiveBorderColor;
+  return "1px solid ".concat(inactiveBorderColor);
 }, function (_ref2) {
-  var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor;
+  var activeColor = _ref2.activeColor;
+  return activeColor;
 });
 var InputAndLabelContainer = styled__default(Cluster).withConfig({
   displayName: "RadioButtonWithLabel__InputAndLabelContainer",
   componentId: "sc-1m9whwg-2"
 })(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:", "}", ":focus + label ", "{{box-shadow:", "}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor;
-  return "1px solid ".concat(backgroundColor, ";");
+  var activeColor = _ref3.activeColor;
+  return "1px solid ".concat(activeColor, ";");
 }, HiddenRadioInput, Circle, function (_ref4) {
-  var backgroundColor = _ref4.backgroundColor;
-  return "0px 0px 2px 1px ".concat(backgroundColor, ";");
+  var activeColor = _ref4.activeColor;
+  return "0px 0px 2px 1px ".concat(activeColor, ";");
 });
 
 var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
@@ -26861,7 +26866,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   return /*#__PURE__*/React__default.createElement(InputAndLabelContainer, {
     align: "center",
     childGap: "0.5rem",
-    backgroundColor: themeValues.backgroundColor
+    activeColor: themeValues.activeColor
   }, /*#__PURE__*/React__default.createElement(HiddenRadioInput, {
     "aria-invalid": ariaInvalid,
     style: {
@@ -26881,17 +26886,17 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     htmlFor: id,
     extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
   }, /*#__PURE__*/React__default.createElement(Circle, {
-    backgroundColor: themeValues.backgroundColor,
-    borderColor: themeValues.borderColor
+    activeColor: themeValues.activeColor,
+    inactiveBorderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
 
 var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$t);
 
-var activeColor$5 = "".concat(MATISSE_BLUE);
+var activeColor$6 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
 var fallbackValues$u = {
-  activeColor: activeColor$5,
+  activeColor: activeColor$6,
   inactiveColor: inactiveColor
 };
 
@@ -27067,14 +27072,14 @@ var SearchableSelect = function SearchableSelect(_ref) {
 
 var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$v, "default");
 
-var borderColor$3 = {
+var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
 var fallbackValues$w = {
-  borderColor: borderColor$3,
+  borderColor: borderColor$2,
   borderSize: borderSize
 };
 
@@ -37895,12 +37900,12 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$6 = WHITE;
+var backgroundColor$5 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
 var fallbackValues$y = {
-  backgroundColor: backgroundColor$6,
+  backgroundColor: backgroundColor$5,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
   headerColor: headerColor
@@ -38053,11 +38058,11 @@ var Card = function Card(_ref) {
 var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$y);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$6 = MATISSE_BLUE;
+var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
 var fallbackValues$A = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$6,
+  activeColor: activeColor$7,
   linkColor: linkColor$3
 };
 
@@ -38187,11 +38192,11 @@ var TableCell_styled = styled__default.td.withConfig({
   return extraStyles;
 });
 
-var backgroundColor$7 = ALABASTER_WHITE;
-var borderColor$4 = GREY_CHATEAU;
+var backgroundColor$6 = ALABASTER_WHITE;
+var borderColor$3 = GREY_CHATEAU;
 var fallbackValues$B = {
-  backgroundColor: backgroundColor$7,
-  borderColor: borderColor$4
+  backgroundColor: backgroundColor$6,
+  borderColor: borderColor$3
 };
 
 var StyledTableHead = styled__default.thead.withConfig({
@@ -38209,10 +38214,10 @@ var StyledTableHead = styled__default.thead.withConfig({
   return fontSize;
 });
 
-var borderColor$5 = GREY_CHATEAU;
+var borderColor$4 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
 var fallbackValues$C = {
-  borderColor: borderColor$5,
+  borderColor: borderColor$4,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
 
@@ -40189,9 +40194,9 @@ AddressForm.reducer = reducer;
 AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
-var backgroundColor$8 = "#ebeffb";
+var backgroundColor$7 = "#ebeffb";
 var fallbackValues$D = {
-  backgroundColor: backgroundColor$8
+  backgroundColor: backgroundColor$7
 };
 
 var Banner = function Banner(_ref) {
@@ -41186,10 +41191,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
-var backgroundColor$9 = "#182848";
+var backgroundColor$8 = "#182848";
 var fallbackValues$G = {
   textColor: textColor$4,
-  backgroundColor: backgroundColor$9
+  backgroundColor: backgroundColor$8
 };
 
 var HighlightTabRow = function HighlightTabRow(_ref) {
@@ -46394,7 +46399,7 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$a = {
+var backgroundColor$9 = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
@@ -46409,7 +46414,7 @@ var fallbackValues$H = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$a
+  backgroundColor: backgroundColor$9
 };
 
 /*
@@ -46469,7 +46474,7 @@ var Module = function Module(_ref) {
 
 var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
 
-var backgroundColor$b = {
+var backgroundColor$a = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -46478,7 +46483,7 @@ var shadowColor = {
   cms: "#292A33"
 };
 var fallbackValues$I = {
-  backgroundColor: backgroundColor$b,
+  backgroundColor: backgroundColor$a,
   shadowColor: shadowColor
 };
 
@@ -46637,14 +46642,14 @@ var TitleModule = function TitleModule(_ref) {
 
 var color$a = "#15749D";
 var hoverColor$5 = "#116285";
-var activeColor$7 = "#0E506D";
+var activeColor$8 = "#0E506D";
 var linkColor$4 = "#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$J = {
   color: color$a,
   hoverColor: hoverColor$5,
-  activeColor: activeColor$7,
+  activeColor: activeColor$8,
   linkColor: linkColor$4,
   fontWeight: fontWeight$6,
   modalLinkHoverFocus: modalLinkHoverFocus
@@ -47441,9 +47446,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$1 = WHITE;
-var activeColor$8 = MATISSE_BLUE;
+var activeColor$9 = MATISSE_BLUE;
 var fallbackValues$K = {
-  activeColor: activeColor$8,
+  activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$1,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47718,7 +47723,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, !hideBackButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, backButton), !hideForwardButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, forwardButton))));
 };
 
-var backgroundColor$c = {
+var backgroundColor$b = {
   "default": "transparent",
   small: "transparent"
 };
@@ -47735,7 +47740,7 @@ var labeledAmountTotal = {
   small: "p"
 };
 var fallbackValues$L = {
-  backgroundColor: backgroundColor$c,
+  backgroundColor: backgroundColor$b,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -48132,7 +48137,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
 
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$M, "default");
 
-var backgroundColor$d = {
+var backgroundColor$c = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -48162,7 +48167,7 @@ var modalLinkHoverFocus$2 = {
   footer: standardInteractionStyles
 };
 var fallbackValues$N = {
-  backgroundColor: backgroundColor$d,
+  backgroundColor: backgroundColor$c,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -49023,13 +49028,13 @@ var RadioGroup = function RadioGroup(_ref) {
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
-var borderColor$6 = "".concat(GREY_CHATEAU);
+var borderColor$5 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
 var fallbackValues$O = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
-  borderColor: borderColor$6,
+  borderColor: borderColor$5,
   focusStyles: focusStyles
 };