carbon-react 112.0.3 → 113.0.0

package/esm/hooks/__internal__/useFloating/useFloating.d.ts

@@ -2,8 +2,8 @@
 import { Strategy, Middleware, Placement } from "@floating-ui/dom";
 export interface UseFloatingProps {
     isOpen?: boolean;
-    reference: React.RefObject<HTMLElement>;
-    floating: React.RefObject<HTMLElement>;
+    reference: React.RefObject<HTMLElement | null>;
+    floating: React.RefObject<HTMLElement | null>;
     strategy?: Strategy;
     middleware?: Middleware[];
     placement?: Placement;

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -1,6 +1,6 @@
 import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
-export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
+export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth" | "maxWidth">, never>;
 declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/lib/__internal__/tooltip-provider/index.d.ts

@@ -9,7 +9,7 @@ interface TooltipProviderProps {
     focusable?: boolean;
     tooltipVisible?: boolean;
     disabled?: boolean;
-    target?: Element;
+    target?: HTMLElement;
 }
 interface ToolbarContextProps extends Omit<TooltipProviderProps, "children"> {
     tooltipId?: {

package/lib/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -255,136 +255,140 @@ const StyledTabTitle = _styledComponents.default.button`
   isInSidebar
 }) => (0, _styledComponents.css)`
     height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
-    
+
     ${position === "top" && (0, _styledComponents.css)`
-        ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
-          &:nth-of-type(n + 1) {
-            margin-left: -1px;
-          }
-          &:first-child {
-            margin-left: 0;
-          }
-        `}
+      ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
+        &:nth-of-type(n + 1) {
+          margin-left: -1px;
+        }
+        &:first-child {
+          margin-left: 0;
+        }
       `}
+    `}
     ${position === "left" && (0, _styledComponents.css)`
-        ${borders && (0, _styledComponents.css)`
-          &:nth-of-type(n + 1) {
-            margin-top: -1px;
-          }
-          &:first-child {
-            margin-top: 0;
-          }
-        `}
+      ${borders && (0, _styledComponents.css)`
+        &:nth-of-type(n + 1) {
+          margin-top: -1px;
+        }
+        &:first-child {
+          margin-top: 0;
+        }
       `}
+    `}
 
     ${!isTabSelected && (0, _styledComponents.css)`
-        color: var(--colorsActionMinorYin090);
+      color: var(--colorsActionMinorYin090);
 
-        &:hover {
-          background: var(--colorsActionMinor100);
-          color: var(--colorsActionMinorYin090);
-          outline: none;
-        }
-        &:focus {
-          color: var(--colorsActionMinorYin090);
-          outline: none;
-        }
-      `}
+      &:hover {
+        background: var(--colorsActionMinor100);
+        color: var(--colorsActionMinorYin090);
+        outline: none;
+      }
+      &:focus {
+        color: var(--colorsActionMinorYin090);
+        outline: none;
+      }
+    `}
 
     ${isTabSelected && (0, _styledComponents.css)`
-        color: var(--colorsActionMajorYin090);
-        background-color: var(--colorsActionMajorYang100);
-
-        ${(error || warning || info) && (0, _styledComponents.css)`
-          padding-bottom: 0px;
-        `}
+      color: var(--colorsActionMajorYin090);
+      background-color: var(--colorsActionMajorYang100);
 
-        &:hover {
-          background-color: var(--colorsActionMajorYang100);
-          border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
-          color: var(--colorsActionMajorYin090);
-          cursor: default;
-        }
+      ${(error || warning || info) && (0, _styledComponents.css)`
+        padding-bottom: 0px;
       `}
 
+      &:hover {
+        background-color: var(--colorsActionMajorYang100);
+        border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
+        color: var(--colorsActionMajorYin090);
+        cursor: default;
+      }
+    `}
+
     &:focus {
-      outline: ${isInSidebar ? "none;" : "var(--borderWidth300) solid var(--colorsSemanticFocus500);"}
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
       z-index: 2;
+
+      ${isInSidebar && (0, _styledComponents.css)`
+        outline-offset: -3px;
+      `}
     }
 
     ${position === "left" && (0, _styledComponents.css)`
-        background-color: transparent;
-        border-bottom: 0px;
+      background-color: transparent;
+      border-bottom: 0px;
 
-        ${!isInSidebar && !error && (0, _styledComponents.css)`
-          border-right: ${alternateStyling ? "1px" : "2px"} solid
-            var(--colorsActionMinor100);
-        `}
+      ${!isInSidebar && !error && (0, _styledComponents.css)`
+        border-right: ${alternateStyling ? "1px" : "2px"} solid
+          var(--colorsActionMinor100);
+      `}
 
-        ${!borders && (0, _styledComponents.css)`
-          ${StyledTitleContent} {
-            border-bottom: none;
-          }
-        `}
+      ${!borders && (0, _styledComponents.css)`
+        ${StyledTitleContent} {
+          border-bottom: none;
+        }
+      `}
 
       display: flex;
-        height: auto;
-        margin-left: 0px;
+      height: auto;
+      margin-left: 0px;
 
-        &:first-child {
-          margin-top: 0;
-        }
+      &:first-child {
+        margin-top: 0;
+      }
 
-        &:hover {
-          ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
-        }
+      &:hover {
+        ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
+      }
 
-        ${(warning || info) && (0, _styledComponents.css)`
-          border-right: none;
+      ${(warning || info) && (0, _styledComponents.css)`
+        border-right: none;
+      `}
+
+      ${isTabSelected && (0, _styledComponents.css)`
+        ${alternateStyling && (0, _styledComponents.css)`
+          border-right-color: var(--colorsActionMinor100);
         `}
 
-        ${isTabSelected && (0, _styledComponents.css)`
-          ${alternateStyling && (0, _styledComponents.css)`
-            border-right-color: var(--colorsActionMinor100);
-          `}
+        ${!alternateStyling && (0, _styledComponents.css)`
+          border-right: none;
+          padding-bottom: 0px;
 
-          ${!alternateStyling && (0, _styledComponents.css)`
+          ${StyledTitleContent} {
+            ${!(error || warning || info) && "margin-right: 2px;"}
             border-right: none;
-            padding-bottom: 0px;
-
-            ${StyledTitleContent} {
-              ${!(error || warning || info) && "margin-right: 2px;"}
-              border-right: none;
-            }
-          `}
+          }
+        `}
   
         background-color: var(--colorsActionMajorYang100);
 
-          &:hover {
-            ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
-            background-color: var(--colorsActionMajorYang100);
-            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
-          }
+        &:hover {
+          ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
+          background-color: var(--colorsActionMajorYang100);
+          ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
+        }
 
-          &:focus {
-            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
-          }
-        `}
+        &:focus {
+          ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
+        }
       `}
+    `}
 
     ${alternateStyling && (0, _styledComponents.css)`
-        &:focus {
-          background-color: var(--colorsActionMinor200);
-        }
+      &:focus {
+        background-color: var(--colorsActionMinor200);
+      }
 
-        &:hover {
-          background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
-        }
+      &:hover {
+        background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
+      }
 
-        ${isTabSelected && (0, _styledComponents.css)`
-          background-color: var(--colorsActionMinor200);
-        `}
+      ${isTabSelected && (0, _styledComponents.css)`
+        background-color: var(--colorsActionMinor200);
       `}
+    `}
   `}
 `;
 exports.StyledTabTitle = StyledTabTitle;

package/lib/components/tooltip/tooltip-pointer.style.d.ts

@@ -1,11 +1,3 @@
-import { Placement } from "tippy.js";
-interface StyledTooltipPointer {
-    /** Sets position of the tooltip */
-    position?: Placement;
-    /** Defines the message type */
-    type?: string;
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
-    bgColor?: string;
-}
-declare const StyledTooltipPointer: import("styled-components").StyledComponent<"div", any, StyledTooltipPointer, never>;
+import { TooltipProps } from "./tooltip.component";
+declare const StyledTooltipPointer: import("styled-components").StyledComponent<"div", any, Pick<TooltipProps, "type" | "bgColor">, never>;
 export default StyledTooltipPointer;

package/lib/components/tooltip/tooltip-pointer.style.js

@@ -24,59 +24,20 @@ const pointerColor = (theme, bgColor, type) => {
 
 const StyledTooltipPointer = _styledComponents.default.div`
   ${({
-  position,
   theme,
   type,
   bgColor
 }) => (0, _styledComponents.css)`
+    z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437
+    background: ${pointerColor(theme, bgColor, type)};
     position: absolute;
-    width: 0;
-    height: 0;
-
-    ${position === "top" && (0, _styledComponents.css)`
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 8px solid ${pointerColor(theme, bgColor, type)};
-      bottom: calc(-1 * var(--spacing100));
-      @-moz-document url-prefix() {
-        bottom: -7px;
-      }
-    `}
-
-    ${position === "bottom" && (0, _styledComponents.css)`
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-bottom: 8px solid ${pointerColor(theme, bgColor, type)};
-      top: calc(-1 * var(--spacing100));
-      @-moz-document url-prefix() {
-        top: -7px;
-      }
-    `}
-
-    ${position === "right" && (0, _styledComponents.css)`
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-      border-right: 8px solid ${pointerColor(theme, bgColor, type)};
-      left: calc(-1 * var(--spacing100));
-      @-moz-document url-prefix() {
-        left: -7px;
-      }
-    `}
-
-    ${position === "left" && (0, _styledComponents.css)`
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-      border-left: 8px solid ${pointerColor(theme, bgColor, type)};
-      right: calc(-1 * var(--spacing100));
-      @-moz-document url-prefix() {
-        right: -7px;
-      }
-    `}
+    width: 12px;
+    height: 12px;
+    transform: rotate(45deg);
   `}
 `;
 StyledTooltipPointer.defaultProps = {
-  theme: _base.default,
-  position: "top"
+  theme: _base.default
 };
 var _default = StyledTooltipPointer;
 exports.default = _default;

package/lib/components/tooltip/tooltip.component.d.ts

@@ -27,7 +27,7 @@ export interface TooltipProps {
      */
     flipOverrides?: TooltipPositions[];
     /** @ignore @private */
-    target?: Element;
+    target?: HTMLElement;
     /** @ignore @private */
     isPartOfInput?: boolean;
     /** @ignore @private */

package/lib/components/tooltip/tooltip.component.js

@@ -5,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Tooltip = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _headless = _interopRequireDefault(require("@tippyjs/react/headless"));
-
-var _tippy = require("tippy.js");
-
 var _invariant = _interopRequireDefault(require("invariant"));
 
+var _reactDom = require("@floating-ui/react-dom");
+
 var _tooltip = _interopRequireDefault(require("./tooltip.style"));
 
 var _tooltipPointer = _interopRequireDefault(require("./tooltip-pointer.style"));
@@ -23,14 +21,29 @@ var _tooltip2 = require("./tooltip.config");
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
+var _portal = _interopRequireDefault(require("../portal"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function preserveRef(ref, node) {
+  if (!ref) return;
+
+  if (typeof ref === "function") {
+    ref(node);
+  }
+
+  if (typeof ref === "object" && "current" in ref) {
+    ref.current = node;
+  }
+}
+
 const TOOLTIP_DELAY = 100;
-const tippyPlugins = [_tippy.sticky];
 
 const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   children,
@@ -40,7 +53,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   type,
   size = "medium",
   isPartOfInput,
-  inputSize,
+  inputSize = "medium",
   id,
   bgColor,
   fontColor,
@@ -48,61 +61,155 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   target,
   ...rest
 }, ref) => {
-  const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => _tooltip2.TOOLTIP_POSITIONS.includes(placement));
-  !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
+  const targetInternalRef = (0, _react.useRef)(null);
+  const isControlled = isVisible !== undefined;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  let showTooltip = isOpen;
+
+  if (isControlled) {
+    showTooltip = isVisible;
+  }
+
+  const showDelayedTimeout = (0, _react.useRef)(undefined);
+  const hideDelayedTimeout = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    return () => {
+      clearTimeout(showDelayedTimeout.current);
+      clearTimeout(hideDelayedTimeout.current);
+    };
+  }, []);
+  const show = (0, _react.useCallback)(() => setIsOpen(true), []);
+  const hide = (0, _react.useCallback)(() => setIsOpen(false), []);
+  const showDelayed = (0, _react.useCallback)(() => {
+    showDelayedTimeout.current = window.setTimeout(show, TOOLTIP_DELAY);
+  }, [show]);
+  const hideDelayed = (0, _react.useCallback)(() => {
+    hideDelayedTimeout.current = window.setTimeout(hide, TOOLTIP_DELAY);
+  }, [hide]);
+  (0, _react.useEffect)(() => {
+    const events = {
+      mouseenter: showDelayed,
+      mouseleave: hideDelayed,
+      focus: show,
+      blur: hide
+    };
+    const targetElement = target || targetInternalRef.current;
+
+    if (!isControlled) {
+      Object.entries(events).forEach(([event, handler]) => {
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener(event, handler);
+      });
+    }
 
-  const tooltip = (attrs, content) => {
-    const currentPosition = attrs["data-placement"] || position;
-    return /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
-      "data-element": "tooltip",
-      role: "tooltip",
-      tabIndex: -1,
-      type: type,
-      size: size,
-      id: id
-    }, (0, _tags.default)("tooltip", rest), {
-      isPartOfInput: isPartOfInput,
-      inputSize: inputSize
-    }, attrs, {
-      position: currentPosition,
-      ref: ref,
-      bgColor: bgColor,
-      fontColor: fontColor
-    }), /*#__PURE__*/_react.default.createElement(_tooltipPointer.default, _extends({
-      key: "pointer",
-      type: type
-    }, attrs, {
-      position: currentPosition,
-      "data-popper-arrow": "",
-      "data-element": "tooltip-pointer",
-      bgColor: bgColor
-    })), content));
-  };
+    return () => {
+      if (!isControlled) {
+        Object.entries(events).forEach(([event, handler]) => {
+          targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener(event, handler);
+        });
+      }
+    };
+  }, [children, show, showDelayed, hide, hideDelayed, isControlled, target]);
+  const flipOverridesRef = (0, _react.useRef)(flipOverrides);
+  flipOverridesRef.current = flipOverrides;
+  const arrowReference = (0, _react.useRef)(null);
+  const calculateOffset = (0, _react.useCallback)(placement => {
+    let mainAxisOffset = 9;
+
+    if (isPartOfInput) {
+      const offsets = {
+        small: 5,
+        medium: ["top", "bottom"].includes(placement) ? 6 : 8,
+        large: ["top", "bottom"].includes(placement) ? 10 : 12
+      };
+      mainAxisOffset = offsets[inputSize];
+    }
 
-  return /*#__PURE__*/_react.default.createElement(_headless.default, _extends({
+    return mainAxisOffset;
+  }, [inputSize, isPartOfInput]);
+  const defaultMiddleware = (0, _react.useMemo)(() => [(0, _reactDom.offset)(({
+    placement
+  }) => ({
+    mainAxis: calculateOffset(placement)
+  })), (0, _reactDom.flip)({
+    fallbackPlacements: flipOverridesRef.current
+  }), (0, _reactDom.shift)({
+    padding: 5,
+    limiter: (0, _reactDom.limitShift)({
+      offset: ({
+        rects
+      }) => ({
+        mainAxis: rects.reference.height
+      })
+    })
+  }), (0, _reactDom.arrow)({
+    element: arrowReference
+  })], [calculateOffset, arrowReference]);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    placement: currentPlacement,
+    middlewareData
+  } = (0, _reactDom.useFloating)({
     placement: position,
-    delay: TOOLTIP_DELAY
-  }, isVisible !== undefined && {
-    visible: isVisible
-  }, {
-    plugins: tippyPlugins,
-    sticky: true,
-    render: attrs => tooltip(attrs, message),
-    reference: target,
-    popperOptions: {
-      modifiers: [...(flipOverrides ? [{
-        name: "flip",
-        options: {
-          fallbackPlacements: flipOverrides
-        }
-      }] : []), {
-        name: "computeStyles",
-        options: {
-          gpuAcceleration: false
-        }
-      }]
-    }
-  }), children);
+    middleware: defaultMiddleware,
+    whileElementsMounted: _reactDom.autoUpdate
+  });
+  const tooltipStyle = {
+    position: strategy,
+    top: y ?? 0,
+    left: x ?? 0
+  };
+  const handleTargetRef = (0, _react.useCallback)(node => {
+    reference(target || node);
+    targetInternalRef.current = node;
+    preserveRef(children.ref, node);
+  }, [reference, children, target]);
+  const handleFloatingRef = (0, _react.useCallback)(node => {
+    floating(node);
+    preserveRef(ref, node);
+  }, [floating, ref]);
+  const staticSide = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+  }[currentPlacement.split("-")[0]];
+  const {
+    x: arrowX,
+    y: arrowY
+  } = middlewareData.arrow || {};
+  const arrowStyle = {
+    left: arrowX,
+    top: arrowY,
+    [staticSide]: "-6px"
+  };
+  const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => _tooltip2.TOOLTIP_POSITIONS.includes(placement));
+  !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(children, {
+    ref: handleTargetRef
+  }), showTooltip ? /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
+    "data-element": "tooltip",
+    role: "tooltip",
+    tabIndex: -1,
+    type: type,
+    size: size,
+    id: id
+  }, (0, _tags.default)("tooltip", rest), {
+    ref: handleFloatingRef,
+    bgColor: bgColor,
+    fontColor: fontColor,
+    style: tooltipStyle,
+    "data-placement": currentPlacement
+  }), /*#__PURE__*/_react.default.createElement(_tooltipPointer.default, {
+    type: type,
+    ref: arrowReference,
+    "data-element": "tooltip-pointer",
+    bgColor: bgColor,
+    style: arrowStyle
+  }), message)) : null);
 });
 
 exports.Tooltip = Tooltip;

package/lib/components/tooltip/tooltip.style.d.ts

@@ -1,7 +1,3 @@
-import { Placement } from "tippy.js";
 import { TooltipProps } from "./tooltip.component";
-interface StyledTooltipProps extends Omit<TooltipProps, "children" | "message" | "position"> {
-    position: Placement;
-}
-declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, StyledTooltipProps, never>;
+declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, Pick<TooltipProps, "type" | "size" | "bgColor" | "fontColor">, never>;
 export default StyledTooltip;