@thecb/components 11.10.1-beta.2 → 11.10.2-beta.2

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, ";"),
@@ -25921,7 +25932,8 @@ var FormInput = function FormInput(_ref15) {
     padding: "0"
   }, helperModal ? /*#__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,
@@ -26297,7 +26309,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
@@ -26333,8 +26345,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);
 
@@ -26365,21 +26377,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
@@ -26408,13 +26424,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);
@@ -26422,7 +26440,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");
   }
@@ -26449,7 +26468,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,
@@ -26457,23 +26476,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);
 
@@ -48914,10 +48936,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;";
@@ -50269,6 +50291,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),
@@ -51451,39 +51474,25 @@ 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 TOOLTIP_THEME_SOURCE = "Popover";
 var fallbackValues$12 = {
-  borderColor: borderColor$7,
-  linkColor: linkColor$6,
-  hoverColor: hoverColor$6,
-  activeColor: activeColor$b
+  hoverColor: SAPPHIRE_BLUE,
+  activeColor: PEACOCK_BLUE,
+  popoverTriggerColor: MATISSE_BLUE,
+  borderColor: "rgba(255, 255, 255, 0.85)"
 };
-
 var Tooltip = function Tooltip(_ref) {
   var tooltipID = _ref.tooltipID,
-    children = _ref.children,
-    _ref$hasCustomTrigger = _ref.hasCustomTrigger,
-    hasCustomTrigger = _ref$hasCustomTrigger === void 0 ? false : _ref$hasCustomTrigger,
+    _ref$hasIconTrigger = _ref.hasIconTrigger,
+    hasIconTrigger = _ref$hasIconTrigger === void 0 ? false : _ref$hasIconTrigger,
+    _ref$IconTrigger = _ref.IconTrigger,
+    IconTrigger = _ref$IconTrigger === void 0 ? WarningIconXS : _ref$IconTrigger,
+    _ref$iconHelpText = _ref.iconHelpText,
+    iconHelpText = _ref$iconHelpText === void 0 ? "Open the tooltip" : _ref$iconHelpText,
     _ref$triggerText = _ref.triggerText,
-    triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
-    _ref$containerExtraSt = _ref.containerExtraStyles,
-    containerExtraStyles = _ref$containerExtraSt === void 0 ? "" : _ref$containerExtraSt,
-    _ref$triggerButtonVar = _ref.triggerButtonVariant,
-    triggerButtonVariant = _ref$triggerButtonVar === void 0 ? "smallGhost" : _ref$triggerButtonVar,
-    _ref$content = _ref.content,
-    content = _ref$content === void 0 ? "" : _ref$content,
-    _ref$contentExtraStyl = _ref.contentExtraStyles,
-    contentExtraStyles = _ref$contentExtraStyl === void 0 ? "" : _ref$contentExtraStyl,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
-    _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? "100%" : _ref$maxWidth,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "auto" : _ref$height,
+    triggerText = _ref$triggerText === void 0 ? "Open the tooltip" : _ref$triggerText,
+    _ref$tooltipContent = _ref.tooltipContent,
+    tooltipContent = _ref$tooltipContent === void 0 ? "The contents of the tooltip go here." : _ref$tooltipContent,
     _ref$contentPosition = _ref.contentPosition,
     contentPosition = _ref$contentPosition === void 0 ? {
       top: "-110px",
@@ -51500,7 +51509,22 @@ var Tooltip = function Tooltip(_ref) {
       arrowBottom: "-8px",
       arrowLeft: "auto"
     } : _ref$arrowPosition,
-    arrowColor = _ref.arrowColor;
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "auto" : _ref$height,
+    _ref$containerExtraSt = _ref.containerExtraStyles,
+    containerExtraStyles = _ref$containerExtraSt === void 0 ? "" : _ref$containerExtraSt,
+    _ref$triggerExtraStyl = _ref.triggerExtraStyles,
+    triggerExtraStyles = _ref$triggerExtraStyl === void 0 ? "" : _ref$triggerExtraStyl,
+    _ref$triggerButtonVar = _ref.triggerButtonVariant,
+    triggerButtonVariant = _ref$triggerButtonVar === void 0 ? "smallGhost" : _ref$triggerButtonVar,
+    _ref$contentExtraStyl = _ref.contentExtraStyles,
+    contentExtraStyles = _ref$contentExtraStyl === void 0 ? "" : _ref$contentExtraStyl,
+    _ref$contentBackgroun = _ref.contentBackgroundColor,
+    contentBackgroundColor = _ref$contentBackgroun === void 0 ? WHITE : _ref$contentBackgroun;
   var closeTimeoutRef = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -51508,6 +51532,10 @@ var Tooltip = function Tooltip(_ref) {
     setTooltipOpen = _useState2[1];
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$12, TOOLTIP_THEME_SOURCE);
+  var borderColor = themeValues.borderColor,
+    tooltipTriggerColor = themeValues.popoverTriggerColor,
+    hoverColor = themeValues.hoverColor,
+    activeColor = themeValues.activeColor;
   var top = contentPosition.top,
     right = contentPosition.right,
     bottom = contentPosition.bottom,
@@ -51516,12 +51544,12 @@ var Tooltip = function Tooltip(_ref) {
     arrowRight = arrowPosition.arrowRight,
     arrowBottom = arrowPosition.arrowBottom,
     arrowLeft = arrowPosition.arrowLeft;
-  var handleToggleTooltip = function handleToggleTooltip(desiredState) {
-    if (tooltipOpen !== desiredState) {
-      setTooltipOpen(desiredState);
+  var handleToggleTooltip = function handleToggleTooltip(desiredTooltipState) {
+    if (tooltipOpen !== desiredTooltipState) {
+      setTooltipOpen(desiredTooltipState);
     }
   };
-  var handleKeyDown = function handleKeyDown(e) {
+  var handleKeyboardEvent = function handleKeyboardEvent(e) {
     if (e.key === "Escape") {
       handleToggleTooltip(false);
     }
@@ -51545,61 +51573,57 @@ var Tooltip = function Tooltip(_ref) {
       }
     };
   }, []);
-  var renderTrigger = function renderTrigger() {
-    if (hasCustomTrigger && children) {
-      return /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
-        "aria-describedby": tooltipID,
-        onFocus: function onFocus() {
-          return handleToggleTooltip(true);
-        },
-        onBlur: function onBlur() {
-          return handleToggleTooltip(false);
-        },
-        onKeyDown: handleKeyDown
-      });
-    }
-    return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-      action: noop$1,
-      "aria-describedby": tooltipID,
-      onKeyDown: handleKeyDown,
-      variant: triggerButtonVariant,
-      onFocus: function onFocus() {
-        return handleToggleTooltip(true);
-      },
-      onBlur: function onBlur() {
-        return handleToggleTooltip(false);
-      },
-      onTouchStart: function onTouchStart() {
-        return handleToggleTooltip(true);
-      },
-      "data-qa": "tooltip-trigger-".concat(tooltipID),
-      text: triggerText,
-      extraStyles: "\n          color: ".concat(themeValues.linkColor, ";\n          &:hover { color: ").concat(themeValues.hoverColor, "; text-decoration: none;}\n          &:active, &:focus { color: ").concat(themeValues.activeColor, ";text-decoration: none;}\n          button, span, &:hover span { text-decoration: none; }\n        ")
-    });
-  };
   return /*#__PURE__*/React__default.createElement(Box, {
+    ref: closeTimeoutRef,
     padding: "0",
     extraStyles: "position: relative; ".concat(containerExtraStyles),
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    "data-qa": "".concat(tooltipID, "-container")
-  }, renderTrigger(), /*#__PURE__*/React__default.createElement(Box, {
+    onMouseEnter: function onMouseEnter() {
+      return handleMouseEnter();
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseLeave();
+    },
+    "data-qa": "tooltip-container"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    "aria-describedby": tooltipID,
+    onKeyDown: handleKeyboardEvent,
+    variant: triggerButtonVariant,
+    onFocus: function onFocus() {
+      return handleToggleTooltip(true);
+    },
+    onBlur: function onBlur() {
+      return handleToggleTooltip(false);
+    },
+    onTouchStart: function onTouchStart() {
+      return handleToggleTooltip(true);
+    },
+    "data-qa": "tooltip-trigger",
+    contentOverride: true
+  }, hasIconTrigger === true && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    "aria-label": "Open tooltip"
+  }, /*#__PURE__*/React__default.createElement(IconTrigger, {
+    color: tooltipTriggerColor
+  })), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    srOnly: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), hasIconTrigger === false && /*#__PURE__*/React__default.createElement(Text$1, {
+    color: tooltipTriggerColor,
+    extraStyles: "\n              color: ".concat(tooltipTriggerColor, ";\n              &:visited {\n                color: ").concat(tooltipTriggerColor, ";\n              }\n              &:hover {\n                color: ").concat(hoverColor, "; \n              }\n              &:active,\n              &:focus {\n                color: ").concat(activeColor, "; \n              }\n              ").concat(triggerExtraStyles, ";\n            ")
+  }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
     role: "tooltip",
     id: tooltipID,
     "aria-hidden": !tooltipOpen,
-    background: themeValues.borderColor,
+    background: contentBackgroundColor,
     "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          ").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
-  }, content) : content, /*#__PURE__*/React__default.createElement(Box, {
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, tooltipContent), /*#__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(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          ")
   })));
 };