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

package/dist/index.cjs.js

@@ -26304,7 +26304,7 @@ var FormattedAddress = function FormattedAddress(_ref) {
 var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$n, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
-var autopayTextColor = "".concat(REGENT_GREY);
+var autopayTextColor = "".concat(SEA_GREEN);
 var fallbackValues$o = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
@@ -26340,8 +26340,8 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
   }, "Savings Account ending in ", lastFour), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.autopayTextColor,
-    extraStyles: "font-style: italic;"
-  }, "Autopay Enabled")));
+    extraStyles: "font-style: italic; font-size: .75rem;"
+  }, "Autopay On")));
 };
 var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$o);
 
@@ -26390,7 +26390,7 @@ var CardType = function CardType(_ref) {
 };
 
 var textColor$2 = "".concat(CHARADE_GREY);
-var autopayTextColor$1 = "".concat(REGENT_GREY);
+var autopayTextColor$1 = "".concat(SEA_GREEN);
 var fallbackValues$p = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
@@ -26419,13 +26419,15 @@ var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
       return /*#__PURE__*/React__default.createElement(Text$1, {
         as: as,
         variant: "pXS",
-        color: ASH_GREY,
+        fontSize: ".75rem",
+        color: STORM_GREY,
         extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
       }, "Exp Date ", expireDate);
     case EXPIRING_SOON:
       return /*#__PURE__*/React__default.createElement(Text$1, {
         as: as,
         variant: "pXS",
+        fontSize: ".75rem",
         color: FIRE_YELLOW,
         extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
       }, "Expiring Soon ", expireDate);
@@ -26433,7 +26435,8 @@ var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
       return /*#__PURE__*/React__default.createElement(Text$1, {
         as: as,
         variant: "pXS",
-        color: ASH_GREY,
+        fontSize: ".75rem",
+        color: STORM_GREY,
         extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
       }, "Expired");
   }
@@ -26486,8 +26489,8 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React__default.createElement(React.Fragment, null, renderCardStatus(expirationStatus, expireDate, "left", "p"))), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.autopayTextColor,
-    extraStyles: "font-style: italic;"
-  }, "Autopay Enabled")));
+    extraStyles: "font-style: italic; font-size: .75rem;"
+  }, "Autopay On")));
 };
 var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$p);
 
@@ -48089,7 +48092,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
     textDecoration: themeValues.modalLinkTextDecoration,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer",
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px;",
     role: "button" // This should always be a "button" since it opens a modal
     ,
     className: "modal-trigger"
@@ -49003,7 +49006,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     padding: section.titleIcon ? "0 0 0 8px" : "0"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
-    htmlFor: "radio-input-".concat(idString(section)),
+    htmlFor: "radio-".concat(idString(section)),
     color: CHARADE_GREY
   }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
     id: "right-icons-".concat(idString(section)),
@@ -51466,16 +51469,15 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   }, error)));
 });
 
-var hoverColor$6 = SAPPHIRE_BLUE;
-var activeColor$b = PEACOCK_BLUE;
-var linkColor$6 = MATISSE_BLUE;
-var borderColor$7 = "rgba(255, 255, 255, 0.85)";
-var TOOLTIP_THEME_SOURCE = "Button";
+var hoverColor$6 = ROYAL_BLUE;
+var activeColor$b = CONGRESS_BLUE;
+var linkColor$6 = ROYAL_BLUE_VIVID;
+var textColor$5 = CHARADE_GREY;
 var fallbackValues$12 = {
-  borderColor: borderColor$7,
   linkColor: linkColor$6,
   hoverColor: hoverColor$6,
-  activeColor: activeColor$b
+  activeColor: activeColor$b,
+  textColor: textColor$5
 };
 
 var Tooltip = function Tooltip(_ref) {
@@ -51515,14 +51517,15 @@ var Tooltip = function Tooltip(_ref) {
       arrowBottom: "-8px",
       arrowLeft: "auto"
     } : _ref$arrowPosition,
-    arrowColor = _ref.arrowColor;
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? WHITE : _ref$backgroundColor;
   var closeTimeoutRef = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipOpen = _useState2[0],
     setTooltipOpen = _useState2[1];
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$12, TOOLTIP_THEME_SOURCE);
+  var themeValues = createThemeValues(themeContext, fallbackValues$12, "Tooltip");
   var top = contentPosition.top,
     right = contentPosition.right,
     bottom = contentPosition.bottom,
@@ -51562,19 +51565,30 @@ var Tooltip = function Tooltip(_ref) {
   }, []);
   var renderTrigger = function renderTrigger() {
     if (hasCustomTrigger && children) {
-      return /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
+      var _child$props, _child$props2;
+      var child = React__default.Children.only(children);
+      var _ref2 = (_child$props = child.props) !== null && _child$props !== void 0 ? _child$props : {},
+        childOnFocus = _ref2.onFocus,
+        childOnBlur = _ref2.onBlur,
+        childOnKeyDown = _ref2.onKeyDown;
+      return /*#__PURE__*/React__default.cloneElement(child, {
         "aria-describedby": tooltipID,
-        onFocus: function onFocus() {
-          return handleToggleTooltip(true);
+        onFocus: function onFocus(e) {
+          childOnFocus === null || childOnFocus === void 0 || childOnFocus(e);
+          handleToggleTooltip(true);
+        },
+        onBlur: function onBlur(e) {
+          childOnBlur === null || childOnBlur === void 0 || childOnBlur(e);
+          handleToggleTooltip(false);
         },
-        onBlur: function onBlur() {
-          return handleToggleTooltip(false);
+        onKeyDown: function onKeyDown(e) {
+          childOnKeyDown === null || childOnKeyDown === void 0 || childOnKeyDown(e);
+          handleKeyDown(e);
         },
-        onKeyDown: handleKeyDown,
         tabIndex: "0",
-        style: {
+        style: _objectSpread2(_objectSpread2({}, (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.style), {}, {
           cursor: "pointer"
-        }
+        })
       });
     }
     return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -51607,19 +51621,19 @@ var Tooltip = function Tooltip(_ref) {
     role: "tooltip",
     id: tooltipID,
     "aria-hidden": !tooltipOpen,
-    background: themeValues.borderColor,
+    background: backgroundColor,
     "data-qa": "tooltip-contents",
-    extraStyles: "\n          position: absolute;\n          display: ".concat(tooltipOpen ? "block" : "none", ";\n          top: ").concat(top, ";\n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          ").concat(contentExtraStyles, "\n        "),
+    extraStyles: "\n          position: absolute;\n          display: ".concat(tooltipOpen ? "block" : "none", ";\n          top: ").concat(top, ";\n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          color: ").concat(themeValues.textColor, ";\n          ").concat(contentExtraStyles, "\n        "),
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
     border: "1px solid transparent",
     borderRadius: "4px",
     minWidth: minWidth,
     maxWidth: maxWidth
   }, typeof content === "string" ? /*#__PURE__*/React__default.createElement(Text$1, {
-    color: themeValues.linkColor
+    color: themeValues.textColor
   }, content) : content, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(arrowColor || themeValues.borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(backgroundColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
   })));
 };