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

package/README.md

@@ -11,8 +11,6 @@ This library contains CityBase React components for use across all current and f
   - [Storybook deployment](#storybook-deployment)
 - [Adding new components](#adding-new-components)
 - [Version bumping and publishing](#version-bumping-and-publishing)
-  - [Version bumping](#version-bumping)
-  - [Publishing new versions to NPM](#publishing-new-versions-to-npm)
 - [Consuming in your application](#consuming-in-your-application)
 
   - [Adding to existing application](#adding-to-existing-application)
@@ -104,9 +102,15 @@ export * from "./button-with-action";
 
 ## Version bumping and publishing
 
-### Version bumping and Publishing to NPM
+Publishing to NPM is automated. When a PR is merged to master, the package will automatically be built and published to NPM using the version specified in `package.json`. **Developers no longer need to manually run `yarn build && yarn publish`.**
 
-- Authors of PRs are responsible for bumping the version of the package prior to merging an approved PR to master. Once your pending PR has been approved, before merging to master, run `yarn build && yarn publish` in the main directory to create and publish a new build to NPM. This step should happen immediately before you merge your PR to master, to minimize conflicts between built versions.
+### How it works
+
+1. Before merging your PR, bump the version in `package.json` to an appropriate new version following semantic versioning (see below).
+2. Ensure the version you set has **not already been published** to NPM. If you merge a PR with a version that has already been published, the automated publish will fail and you will need to create a follow-up PR that bumps the version to an unpublished one.
+3. Merge your PR to master. The CI pipeline will automatically build and publish the new version.
+
+### Semantic versioning
 
 - CB Components follows semantic versioning practices, which divides version upgrades into three categories: "Patch" (e.g., `6.0.1` -> `6.0.2`), "Minor" (e.g., `6.0.2` -> `6.1.0`), and "Major" (e.g., `6.1.0` -> `7.0.0`)
 

package/dist/index.cjs.js

@@ -15822,7 +15822,7 @@ var GenericCardLarge = function GenericCardLarge() {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
-    "aria-label": "Card Payment"
+    "aria-label": "Credit card"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "36",
     height: "24",
@@ -18700,7 +18700,9 @@ var VisaSmallIcon = function VisaSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Visa"
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -18727,7 +18729,9 @@ var AmExSmallIcon = function AmExSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "American Express"
   }, /*#__PURE__*/React__default.createElement("g", {
     clipPath: "url(#clip0_3693_1095)"
   }, /*#__PURE__*/React__default.createElement("g", {
@@ -18826,7 +18830,9 @@ var DiscoverSmallIcon = function DiscoverSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Discover"
   }, /*#__PURE__*/React__default.createElement("g", {
     clipPath: "url(#clip0_3818_267)"
   }, /*#__PURE__*/React__default.createElement("path", {
@@ -18951,7 +18957,9 @@ var GenericSmallIcon = function GenericSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Credit card"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "24",
     height: "16",
@@ -18972,7 +18980,9 @@ var MasterCardSmallIcon = function MasterCardSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Mastercard"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "24",
     height: "16",
@@ -22623,6 +22633,7 @@ var SortableTableHeading$1 = themeComponent(SortableTableHeading, "SortableTable
 
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
+    "aria-hidden": "true",
     version: "1.2",
     xmlns: "http://www.w3.org/2000/svg",
     overflow: "visible",
@@ -23972,7 +23983,7 @@ var IconWrapper = styled__default.div.withConfig({
 var DropdownContentWrapper = styled__default.div.withConfig({
   displayName: "Dropdown__DropdownContentWrapper",
   componentId: "sc-pn6m0h-1"
-})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}ul{padding-left:0;}"], GREY_CHATEAU, WHITE, function (_ref2) {
+})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}ul{padding-left:0;}"], STORM_GREY, WHITE, function (_ref2) {
   var widthFitOptions = _ref2.widthFitOptions;
   return widthFitOptions ? "fit-content" : "100%";
 }, function (_ref3) {
@@ -24277,7 +24288,7 @@ var Dropdown = function Dropdown(_ref13) {
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
     borderSize: "1px",
-    borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
+    borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : STORM_GREY,
     dataQa: placeholder,
     extraStyles: disabled ? "".concat(inputPlaceholderTextStyle).concat(inputDisabledStyle) : inputPlaceholderTextStyle,
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
@@ -25935,7 +25946,8 @@ var FormInput = function FormInput(_ref15) {
     minWidth: "100%"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
-    align: "center"
+    align: "center",
+    overflow: true
   }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
@@ -25943,22 +25955,16 @@ var FormInput = function FormInput(_ref15) {
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
     id: createIdFromString(labelTextWhenNoError)
-  }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: labelTextVariant,
-    color: themeValues.linkColor,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.hoverFocusStyles,
-    extraStyles: "text-decoration: underline; cursor: pointer; &:focus { outline-offset: -2px; }",
-    onClick: function onClick() {
+  }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "smallGhost",
+    text: showPassword ? "Hide" : "Show",
+    action: function action() {
       return setShowPassword(!showPassword);
     },
-    tabIndex: "0",
     "aria-label": showPassword ? "Hide Password" : "Show password",
-    "aria-live": "polite",
-    onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && setShowPassword(!showPassword);
-    }
-  }, showPassword ? "Hide" : "Show"), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "margin: 0; min-width: auto;",
+    textExtraStyles: "color: ".concat(themeValues.linkColor, ";")
+  }), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -26298,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
@@ -26334,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);
 
@@ -26366,21 +26372,25 @@ var cardBrands = {
     large: GenericCardLarge
   }
 };
+var normalizeType = function normalizeType(type) {
+  if (!type) return undefined;
+  var lower = type.toLowerCase();
+  if (lower === "mastercard") return "master_card";
+  return lower;
+};
 var CardType = function CardType(_ref) {
   var type = _ref.type,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "small" : _ref$size;
-  var _ref2 = cardBrands[type] || cardBrands["default"],
+  var normalizedType = normalizeType(type);
+  var _ref2 = cardBrands[normalizedType] || cardBrands["default"],
     label = _ref2.label,
     IconComponent = _ref2[size];
-  return /*#__PURE__*/React__default.createElement("span", {
-    role: "img",
-    "aria-label": label
-  }, /*#__PURE__*/React__default.createElement(IconComponent, null));
+  return /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconComponent, null));
 };
 
 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
@@ -26409,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);
@@ -26423,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");
   }
@@ -26450,7 +26463,7 @@ var CreditCardWrapper = styled__default.div.withConfig({
 var CCIconWrapper = styled__default.div.withConfig({
   displayName: "FormattedCreditCard__CCIconWrapper",
   componentId: "sc-s0ta5l-1"
-})(["margin-right:16px;width:30px;height:auto;display:flex;"]);
+})(["margin-right:16px;width:36px;height:auto;display:flex;"]);
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
     type = _ref.type,
@@ -26458,23 +26471,26 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     expireDate = _ref.expireDate,
     expirationStatus = _ref.expirationStatus,
     themeValues = _ref.themeValues;
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(CardType, {
-    type: type
+    type: type,
+    size: isMobile ? "small" : "large"
   })), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
-    padding: "0 0 0 8px",
+    padding: "0",
     color: themeValues.textColor,
     textAlign: "left",
     extraStyles: "display: inline-block;"
   }, "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);
 
@@ -41157,7 +41173,7 @@ var EmailForm = function EmailForm(_ref) {
     }, []);
   }
   useConditionallyAddValidator(isRequired, required, actions.fields.email.addValidator, actions.fields.email.removeValidator);
-  var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
+  var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -41249,7 +41265,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
       };
     }, []);
   }
-  var EmailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Email address is not valid");
+  var EmailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
   return /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: EmailErrorMessages,
@@ -45948,7 +45964,7 @@ var LoginForm = function LoginForm(_ref) {
       };
     }, []);
   }
-  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
+  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
   var passwordErrorMessages = _defineProperty({}, required.error, "Password is required");
   return /*#__PURE__*/React__default.createElement(FormInputColumn, {
     role: "form",
@@ -48076,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"
@@ -48915,10 +48931,10 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     componentId: "sc-1wtp6qc-0"
   })(["height:", ";width:", ";", " transition:opacity 0.3s ease;"], function (_ref2) {
     var isMobile = _ref2.isMobile;
-    return isMobile ? "14px" : "18px";
+    return isMobile ? "16px" : "24px";
   }, function (_ref3) {
     var isMobile = _ref3.isMobile;
-    return isMobile ? "22px" : "28px";
+    return isMobile ? "24px" : "36px";
   }, function (_ref4) {
     var fade = _ref4.fade;
     return fade && "opacity: 0.4;";
@@ -48990,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)),
@@ -49321,7 +49337,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
   }
   var firstNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "First name is required"), validName.error, "First name contains invalid characters");
   var lastNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "Last name is required"), validName.error, "Last name contains invalid characters");
-  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email is required"), isProbablyEmail.error, "Invalid email address");
+  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
   var passwordErrorMessages = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, required.error, "Password is required"), hasLength.error, "Password must have at least 8 characters"), hasNumber.error, "Password must contain at least one number"), hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)");
   var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
   return /*#__PURE__*/React__default.createElement(FormInputColumn, {
@@ -50270,6 +50286,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
     props = _objectWithoutProperties(_ref, _excluded$Q);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
+    "aria-hidden": "true",
     width: width,
     height: height,
     viewBox: "0 0 ".concat(width, " ").concat(height),
@@ -51452,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) {
@@ -51501,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,
@@ -51548,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() {
-          return handleToggleTooltip(false);
+        onBlur: function onBlur(e) {
+          childOnBlur === null || childOnBlur === void 0 || childOnBlur(e);
+          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, {
@@ -51593,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          ")
   })));
 };