@thecb/components 11.11.0-beta.1 → 11.11.0-beta.10

package/dist/index.esm.js

@@ -15814,7 +15814,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",
@@ -18692,7 +18692,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",
@@ -18719,7 +18721,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", {
@@ -18818,7 +18822,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", {
@@ -18943,7 +18949,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",
@@ -18964,7 +18972,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",
@@ -25928,7 +25938,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,
@@ -25936,22 +25947,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"
@@ -26291,7 +26296,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
@@ -26327,8 +26332,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);
 
@@ -26359,21 +26364,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
@@ -26402,13 +26411,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);
@@ -26416,7 +26427,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");
   }
@@ -26443,7 +26455,7 @@ var CreditCardWrapper = styled.div.withConfig({
 var CCIconWrapper = styled.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,
@@ -26451,23 +26463,26 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     expireDate = _ref.expireDate,
     expirationStatus = _ref.expirationStatus,
     themeValues = _ref.themeValues;
+  var _useContext = useContext(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(Fragment$1, 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);
 
@@ -40873,6 +40888,7 @@ var EditableList = function EditableList(_ref) {
     _ref$canAdd = _ref.canAdd,
     canAdd = _ref$canAdd === void 0 ? true : _ref$canAdd,
     addItem = _ref.addItem,
+    addItemDestination = _ref.addItemDestination,
     removeItem = _ref.removeItem,
     editItem = _ref.editItem,
     itemName = _ref.itemName,
@@ -40980,6 +40996,8 @@ var EditableList = function EditableList(_ref) {
     padding: items.length === 0 ? "0" : "1rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Placeholder$1, {
     text: addText,
+    isLink: !!addItemDestination,
+    destination: addItemDestination,
     action: addItem,
     dataQa: "Add " + qaPrefix,
     "aria-label": addText,
@@ -41150,7 +41168,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",
@@ -41242,7 +41260,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,
@@ -45941,7 +45959,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",
@@ -48069,7 +48087,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"
@@ -48908,10 +48926,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;";
@@ -48983,7 +49001,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)),
@@ -49314,7 +49332,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, {
@@ -51446,25 +51464,39 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   }, error)));
 });
 
-var TOOLTIP_THEME_SOURCE = "Popover";
+var hoverColor$6 = ROYAL_BLUE;
+var activeColor$b = CONGRESS_BLUE;
+var linkColor$6 = ROYAL_BLUE_VIVID;
+var textColor$5 = CHARADE_GREY;
 var fallbackValues$12 = {
-  hoverColor: SAPPHIRE_BLUE,
-  activeColor: PEACOCK_BLUE,
-  popoverTriggerColor: MATISSE_BLUE,
-  borderColor: "rgba(255, 255, 255, 0.85)"
+  linkColor: linkColor$6,
+  hoverColor: hoverColor$6,
+  activeColor: activeColor$b,
+  textColor: textColor$5
 };
+
+var TOOLTIP_THEME_SOURCE = "Popover";
 var Tooltip = function Tooltip(_ref) {
   var tooltipID = _ref.tooltipID,
-    _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,
+    children = _ref.children,
+    _ref$hasCustomTrigger = _ref.hasCustomTrigger,
+    hasCustomTrigger = _ref$hasCustomTrigger === void 0 ? false : _ref$hasCustomTrigger,
     _ref$triggerText = _ref.triggerText,
-    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,
+    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,
     _ref$contentPosition = _ref.contentPosition,
     contentPosition = _ref$contentPosition === void 0 ? {
       top: "-110px",
@@ -51481,33 +51513,23 @@ var Tooltip = function Tooltip(_ref) {
       arrowBottom: "-8px",
       arrowLeft: "auto"
     } : _ref$arrowPosition,
-    _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;
+    customTriggerRole = _ref.customTriggerRole,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? WHITE : _ref$backgroundColor;
+  /**
+   * closeTimeoutRef is used internally to store a timer ID for delaying tooltip close. It will have a `.current` property (the timer ID) when the effect or event handlers set it.
+   */
   var closeTimeoutRef = useRef(null);
+  /**
+   * containerRef is used to store a reference to the container element. It will have a `.current` property (the container element) when the effect or event handlers set it.
+   */
+  var containerRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipOpen = _useState2[0],
     setTooltipOpen = _useState2[1];
   var themeContext = useContext(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,16 +51538,109 @@ var Tooltip = function Tooltip(_ref) {
     arrowRight = arrowPosition.arrowRight,
     arrowBottom = arrowPosition.arrowBottom,
     arrowLeft = arrowPosition.arrowLeft;
-  var handleToggleTooltip = function handleToggleTooltip(desiredTooltipState) {
-    if (tooltipOpen !== desiredTooltipState) {
-      setTooltipOpen(desiredTooltipState);
+  var handleToggleTooltip = function handleToggleTooltip(desiredState) {
+    if (tooltipOpen !== desiredState) {
+      setTooltipOpen(desiredState);
     }
   };
-  var handleKeyboardEvent = function handleKeyboardEvent(e) {
+  var handleKeyDown = function handleKeyDown(e) {
     if (e.key === "Escape") {
       handleToggleTooltip(false);
     }
   };
+
+  /**
+   * @function renderTrigger
+   * Renders the tooltip trigger element.
+   *
+   * When `hasCustomTrigger` is true, the provided child element is cloned and
+   * injected with the event handlers needed to control tooltip visibility:
+   *  - onFocus/onBlur: open and close for keyboard users
+   *  - onKeyDown: allows Escape to dismiss the tooltip
+   *  - onTouchStart: open on tap for touch/mobile users (onFocus is unreliable on touch)
+   *
+   * Mouse interactions (hover) are handled at the container level via
+   * onMouseEnter/onMouseLeave, so they do not need to be injected here.
+   *
+   * Any existing event handlers on the child are preserved and called first,
+   * so the child's own behavior is not overridden.
+   *
+   * When no custom trigger is provided, a default ButtonWithAction is rendered
+   * using `triggerText` and `triggerButtonVariant`.
+   */
+  var renderTrigger = function renderTrigger() {
+    if (hasCustomTrigger && !children) {
+      console.warn("Tooltip: children prop is required when hasCustomTrigger is true");
+    }
+    if (hasCustomTrigger && children) {
+      var _child$props, _child$props$tabIndex, _child$props2, _child$props3, _child$props4;
+      var child = React__default.Children.only(children);
+      /**
+       * Capture the child's existing handlers before overwriting
+       */
+      var _ref2 = (_child$props = child.props) !== null && _child$props !== void 0 ? _child$props : {},
+        childOnFocus = _ref2.onFocus,
+        childOnBlur = _ref2.onBlur,
+        childOnKeyDown = _ref2.onKeyDown,
+        childOnTouchStart = _ref2.onTouchStart;
+
+      /**
+       * Clone the child element and add the necessary event handlers
+       */
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        tabIndex: (_child$props$tabIndex = (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tabIndex) !== null && _child$props$tabIndex !== void 0 ? _child$props$tabIndex : 0,
+        ariaDescribedby: tooltipID,
+        style: _objectSpread2({
+          cursor: "pointer"
+        }, (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.style),
+        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);
+        },
+        onKeyDown: function onKeyDown(e) {
+          childOnKeyDown === null || childOnKeyDown === void 0 || childOnKeyDown(e);
+          handleKeyDown(e);
+        },
+        onTouchStart: function onTouchStart(e) {
+          childOnTouchStart === null || childOnTouchStart === void 0 || childOnTouchStart(e);
+          handleToggleTooltip(true);
+        },
+        role: customTriggerRole || ((_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : _child$props4.role),
+        "aria-describedby": tooltipID,
+        "data-qa": "tooltip-trigger-".concat(tooltipID)
+      });
+    } else {
+      return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+        action: noop$1,
+        onKeyDown: handleKeyDown,
+        variant: triggerButtonVariant,
+        text: triggerText,
+        tabIndex: 0,
+        ariaDescribedby: tooltipID,
+        onFocus: function onFocus() {
+          return handleToggleTooltip(true);
+        },
+        onBlur: function onBlur() {
+          return handleToggleTooltip(false);
+        },
+        onTouchStart: function onTouchStart() {
+          return handleToggleTooltip(true);
+        },
+        dataQa: "tooltip-trigger-".concat(tooltipID),
+        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          ")
+      });
+    }
+  };
+
+  /**
+   * @function handleMouseEnter
+   * Handles the mouse enter event for the tooltip container.
+   * It clears any existing timeout and opens the tooltip.
+   */
   var handleMouseEnter = function handleMouseEnter() {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
@@ -51533,69 +51648,67 @@ var Tooltip = function Tooltip(_ref) {
     }
     handleToggleTooltip(true);
   };
+
+  /**
+   * @function handleMouseLeave
+   * Handles the mouse leave event for the tooltip container.
+   * It sets a timeout to close the tooltip after 200ms.
+   */
   var handleMouseLeave = function handleMouseLeave() {
     closeTimeoutRef.current = setTimeout(function () {
       handleToggleTooltip(false);
-    }, 300);
+    }, 200);
   };
+
+  /**
+   * Handles the touch start event for the tooltip container.
+   * It closes the tooltip if the touch is outside the container.
+   */
   useEffect$1(function () {
-    return function () {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
+    if (!tooltipOpen) return;
+    var handleOutsideTouch = function handleOutsideTouch(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setTooltipOpen(false);
       }
     };
+    document.addEventListener("touchstart", handleOutsideTouch);
+    return function () {
+      return document.removeEventListener("touchstart", handleOutsideTouch);
+    };
+  }, [tooltipOpen]);
+
+  /**
+   * Cleans up the timeout when the component unmounts.
+   */
+  useEffect$1(function () {
+    return function () {
+      if (closeTimeoutRef !== null && closeTimeoutRef !== void 0 && closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    };
   }, []);
   return /*#__PURE__*/React__default.createElement(Box, {
-    ref: closeTimeoutRef,
+    ref: containerRef,
     padding: "0",
     extraStyles: "position: relative; ".concat(containerExtraStyles),
-    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, {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    "data-qa": "".concat(tooltipID, "-container")
+  }, renderTrigger(), /*#__PURE__*/React__default.createElement(Box, {
     role: "tooltip",
     id: tooltipID,
     "aria-hidden": !tooltipOpen,
-    background: contentBackgroundColor,
+    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
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, tooltipContent), /*#__PURE__*/React__default.createElement(Box, {
+  }, typeof content === "string" && content !== "" ? /*#__PURE__*/React__default.createElement(Text$1, {
+    color: themeValues.textColor
+  }, content) : content !== undefined && content !== null ? content : null, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    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          ")
+    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          ")
   })));
 };