@zendeskgarden/react-tooltips 8.75.0 → 8.76.0

package/dist/esm/elements/Paragraph.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import { StyledParagraph } from '../styled/StyledParagraph.js';
+import '../styled/StyledTitle.js';
+import '../styled/StyledTooltip.js';
+import '../styled/StyledTooltipWrapper.js';
+
+const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, Object.assign({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Paragraph';
+
+export { Paragraph };

package/dist/esm/elements/Title.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import '../styled/StyledParagraph.js';
+import { StyledTitle } from '../styled/StyledTitle.js';
+import '../styled/StyledTooltip.js';
+import '../styled/StyledTooltipWrapper.js';
+
+const Title = forwardRef((props, ref) => React.createElement(StyledTitle, Object.assign({
+  ref: ref
+}, props)));
+Title.displayName = 'Title';
+
+export { Title };

package/dist/esm/elements/Tooltip.js

@@ -0,0 +1,154 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { useContext, useRef, useEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import mergeRefs from 'react-merge-refs';
+import { useTooltip } from '@zendeskgarden/container-tooltip';
+import { getControlledValue, composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { Manager, Reference, Popper } from 'react-popper';
+import { getRtlPopperPlacement, getPopperPlacement } from '../utils/gardenPlacements.js';
+import '../styled/StyledParagraph.js';
+import '../styled/StyledTitle.js';
+import { StyledTooltip } from '../styled/StyledTooltip.js';
+import { StyledTooltipWrapper } from '../styled/StyledTooltipWrapper.js';
+import { PLACEMENT, SIZE, TYPE } from '../types/index.js';
+
+const Tooltip = _ref => {
+  let {
+    id,
+    delayMS,
+    isInitialVisible,
+    content,
+    refKey,
+    placement,
+    eventsEnabled,
+    popperModifiers,
+    children,
+    hasArrow,
+    size,
+    type,
+    appendToNode,
+    zIndex,
+    isVisible: externalIsVisible,
+    ...otherProps
+  } = _ref;
+  const {
+    rtl
+  } = useContext(ThemeContext);
+  const scheduleUpdateRef = useRef();
+  const {
+    isVisible,
+    getTooltipProps,
+    getTriggerProps,
+    openTooltip,
+    closeTooltip
+  } = useTooltip({
+    id,
+    delayMilliseconds: delayMS,
+    isVisible: isInitialVisible
+  });
+  const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
+  useEffect(() => {
+    if (controlledIsVisible && scheduleUpdateRef.current) {
+      scheduleUpdateRef.current();
+    }
+  }, [controlledIsVisible, content]);
+  const popperPlacement = rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
+  const singleChild = React.Children.only(children);
+  const modifiers = {
+    preventOverflow: {
+      boundariesElement: 'window'
+    },
+    ...popperModifiers
+  };
+  return React.createElement(Manager, null, React.createElement(Reference, null, _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return cloneElement(singleChild, getTriggerProps({
+      ...singleChild.props,
+      [refKey]: mergeRefs([ref, singleChild.ref ? singleChild.ref : null])
+    }));
+  }), React.createElement(Popper, {
+    placement: popperPlacement,
+    eventsEnabled: controlledIsVisible && eventsEnabled,
+    modifiers: modifiers
+  }, _ref3 => {
+    let {
+      ref,
+      style,
+      scheduleUpdate,
+      placement: currentPlacement
+    } = _ref3;
+    scheduleUpdateRef.current = scheduleUpdate;
+    const {
+      onFocus,
+      onBlur,
+      ...otherTooltipProps
+    } = otherProps;
+    let computedSize = size;
+    if (computedSize === undefined) {
+      if (type === 'dark') {
+        computedSize = 'small';
+      } else {
+        computedSize = 'large';
+      }
+    }
+    const tooltipProps = {
+      hasArrow,
+      placement: currentPlacement,
+      size: computedSize,
+      onFocus: composeEventHandlers(onFocus, () => {
+        openTooltip();
+      }),
+      onBlur: composeEventHandlers(onBlur, () => {
+        closeTooltip(0);
+      }),
+      'aria-hidden': !controlledIsVisible,
+      type,
+      ...otherTooltipProps
+    };
+    const tooltip = React.createElement(StyledTooltipWrapper, {
+      ref: controlledIsVisible ? ref : null,
+      style: style,
+      zIndex: zIndex,
+      "aria-hidden": !controlledIsVisible
+    }, React.createElement(StyledTooltip, getTooltipProps(tooltipProps), content));
+    if (appendToNode) {
+      return createPortal(tooltip, appendToNode);
+    }
+    return tooltip;
+  }));
+};
+Tooltip.displayName = 'Tooltip';
+Tooltip.propTypes = {
+  appendToNode: PropTypes.any,
+  hasArrow: PropTypes.bool,
+  delayMS: PropTypes.number,
+  eventsEnabled: PropTypes.bool,
+  id: PropTypes.string,
+  content: PropTypes.node.isRequired,
+  placement: PropTypes.oneOf(PLACEMENT),
+  popperModifiers: PropTypes.any,
+  size: PropTypes.oneOf(SIZE),
+  type: PropTypes.oneOf(TYPE),
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  isInitialVisible: PropTypes.bool,
+  refKey: PropTypes.string
+};
+Tooltip.defaultProps = {
+  hasArrow: true,
+  eventsEnabled: true,
+  type: 'dark',
+  placement: 'top',
+  delayMS: 500,
+  refKey: 'ref'
+};
+
+export { Tooltip };

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+export { Tooltip } from './elements/Tooltip.js';
+export { Paragraph } from './elements/Paragraph.js';
+export { Title } from './elements/Title.js';

package/dist/esm/styled/StyledParagraph.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tooltip.paragraph';
+const StyledParagraph = styled.p.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledParagraph",
+  componentId: "sc-wuqkfc-0"
+})(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledParagraph.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledParagraph };

package/dist/esm/styled/StyledTitle.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tooltip.title';
+const StyledTitle = styled.strong.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledTitle",
+  componentId: "sc-vnjcvz-0"
+})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTitle };

package/dist/esm/styled/StyledTooltip.js

@@ -0,0 +1,110 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getColorV8 } from '@zendeskgarden/react-theming';
+import { getArrowPosition } from '../utils/gardenPlacements.js';
+import { StyledParagraph } from './StyledParagraph.js';
+import { StyledTitle } from './StyledTitle.js';
+
+const COMPONENT_ID = 'tooltip.tooltip';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    size,
+    type,
+    placement,
+    hasArrow
+  } = _ref;
+  let margin = `${theme.space.base * 1.5}px`;
+  let borderRadius = theme.borderRadii.sm;
+  let padding = '0 1em';
+  let maxWidth;
+  let overflowWrap;
+  let whiteSpace = 'nowrap';
+  let lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
+  let fontSize = theme.fontSizes.sm;
+  let titleDisplay;
+  let paragraphMarginTop;
+  let wordWrap;
+  if (size !== 'small') {
+    borderRadius = theme.borderRadii.md;
+    overflowWrap = 'break-word';
+    whiteSpace = 'normal';
+    wordWrap = 'break-word';
+  }
+  if (size === 'extra-large') {
+    padding = `${theme.space.base * 10}px`;
+    maxWidth = `460px`;
+    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
+    paragraphMarginTop = `${theme.space.base * 2.5}px`;
+  } else if (size === 'large') {
+    padding = `${theme.space.base * 5}px`;
+    maxWidth = `270px`;
+    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
+    paragraphMarginTop = `${theme.space.base * 2}px`;
+  } else if (size === 'medium') {
+    padding = '1em';
+    maxWidth = `140px`;
+    lineHeight = getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
+  }
+  if (size === 'extra-large' || size === 'large') {
+    fontSize = theme.fontSizes.md;
+    titleDisplay = 'block';
+  }
+  let arrowSize;
+  let arrowInset;
+  if (hasArrow) {
+    if (size === 'small' || size === 'medium') {
+      arrowSize = margin;
+      arrowInset = type === 'dark' ? '1px' : '0';
+    } else {
+      arrowInset = type === 'dark' ? '2px' : '1px';
+      if (size === 'large') {
+        margin = `${theme.space.base * 2}px`;
+        arrowSize = margin;
+      } else if (size === 'extra-large') {
+        margin = `${theme.space.base * 3}px`;
+        arrowSize = `${theme.space.base * 2.5}px`;
+      }
+    }
+  }
+  return css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && arrowStyles(getArrowPosition(placement), {
+    size: arrowSize,
+    inset: arrowInset
+  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
+};
+const colorStyles = _ref2 => {
+  let {
+    theme,
+    type
+  } = _ref2;
+  let border;
+  let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
+  let backgroundColor = getColorV8('chromeHue', 700, theme);
+  let color = getColorV8('background', 600 , theme);
+  let titleColor;
+  if (type === 'light') {
+    boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColorV8('chromeHue', 600, theme, 0.15));
+    border = `${theme.borders.sm} ${getColorV8('neutralHue', 300, theme)}`;
+    backgroundColor = getColorV8('background', 600 , theme);
+    color = getColorV8('neutralHue', 700, theme);
+    titleColor = getColorV8('foreground', 600 , theme);
+  }
+  return css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
+};
+const StyledTooltip = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledTooltip",
+  componentId: "sc-gzzjq4-0"
+})(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltip.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltip };

package/dist/esm/styled/StyledTooltipWrapper.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledTooltipWrapper = styled.div.withConfig({
+  displayName: "StyledTooltipWrapper",
+  componentId: "sc-1b7q9q6-0"
+})(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
+StyledTooltipWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipWrapper };

package/dist/esm/types/index.js

@@ -0,0 +1,12 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
+const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+const SIZE = ['small', 'medium', 'large', 'extra-large'];
+const TYPE = ['light', 'dark'];
+
+export { PLACEMENT, SIZE, TYPE };

package/dist/esm/utils/gardenPlacements.js

@@ -0,0 +1,59 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+function getPopperPlacement(gardenPlacement) {
+  const gardenToPopperMapping = {
+    auto: 'auto',
+    top: 'top',
+    'top-start': 'top-start',
+    'top-end': 'top-end',
+    bottom: 'bottom',
+    'bottom-start': 'bottom-start',
+    'bottom-end': 'bottom-end',
+    end: 'right',
+    'end-top': 'right-start',
+    'end-bottom': 'right-end',
+    start: 'left',
+    'start-top': 'left-start',
+    'start-bottom': 'left-end'
+  };
+  return gardenToPopperMapping[gardenPlacement];
+}
+function getRtlPopperPlacement(gardenPlacement) {
+  const rtlPlacementMappings = {
+    left: 'right',
+    'left-start': 'right-start',
+    'left-end': 'right-end',
+    'top-start': 'top-end',
+    'top-end': 'top-start',
+    right: 'left',
+    'right-start': 'left-start',
+    'right-end': 'left-end',
+    'bottom-start': 'bottom-end',
+    'bottom-end': 'bottom-start'
+  };
+  const popperPlacement = getPopperPlacement(gardenPlacement);
+  return rtlPlacementMappings[popperPlacement] || popperPlacement;
+}
+function getArrowPosition(popperPlacement) {
+  const arrowPositionMappings = {
+    top: 'bottom',
+    'top-start': 'bottom-left',
+    'top-end': 'bottom-right',
+    right: 'left',
+    'right-start': 'left-top',
+    'right-end': 'left-bottom',
+    bottom: 'top',
+    'bottom-start': 'top-left',
+    'bottom-end': 'top-right',
+    left: 'right',
+    'left-start': 'right-top',
+    'left-end': 'right-bottom'
+  };
+  return arrowPositionMappings[popperPlacement] || 'top';
+}
+
+export { getArrowPosition, getPopperPlacement, getRtlPopperPlacement };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -79,7 +78,7 @@ function getArrowPosition(popperPlacement) {
 const COMPONENT_ID$2 = 'tooltip.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -91,7 +90,7 @@ StyledParagraph.defaultProps = {
 const COMPONENT_ID$1 = 'tooltip.title';
 const StyledTitle = styled__default.default.strong.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -188,7 +187,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -342,27 +341,12 @@ Tooltip.defaultProps = {
   refKey: 'ref'
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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);
-}
-
-const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, _extends({
+const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
 Paragraph.displayName = 'Paragraph';
 
-const Title = React.forwardRef((props, ref) => React__default.default.createElement(StyledTitle, _extends({
+const Title = React.forwardRef((props, ref) => React__default.default.createElement(StyledTitle, Object.assign({
   ref: ref
 }, props)));
 Title.displayName = 'Title';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tooltips",
-  "version": "8.75.0",
+  "version": "8.76.0",
   "description": "Collection of components and render prop containers relating to Tooltips in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -29,13 +29,13 @@
     "react-popper": "^1.3.4"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.1.0",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.75.0"
+    "@zendeskgarden/react-theming": "^8.76.0"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "56a54793a611efc223b8e36262d428365613c853"
+  "gitHead": "3e52650c39fd1085a2e97b40a43eed7bc1e21937"
 }

package/dist/index.esm.js

@@ -1,361 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import React, { useContext, useRef, useEffect, cloneElement, forwardRef } from 'react';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-import styled, { css, ThemeContext } from 'styled-components';
-import mergeRefs from 'react-merge-refs';
-import { useTooltip } from '@zendeskgarden/container-tooltip';
-import { getControlledValue, composeEventHandlers } from '@zendeskgarden/container-utilities';
-import { Manager, Reference, Popper } from 'react-popper';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getColorV8 } from '@zendeskgarden/react-theming';
-
-function getPopperPlacement(gardenPlacement) {
-  const gardenToPopperMapping = {
-    auto: 'auto',
-    top: 'top',
-    'top-start': 'top-start',
-    'top-end': 'top-end',
-    bottom: 'bottom',
-    'bottom-start': 'bottom-start',
-    'bottom-end': 'bottom-end',
-    end: 'right',
-    'end-top': 'right-start',
-    'end-bottom': 'right-end',
-    start: 'left',
-    'start-top': 'left-start',
-    'start-bottom': 'left-end'
-  };
-  return gardenToPopperMapping[gardenPlacement];
-}
-function getRtlPopperPlacement(gardenPlacement) {
-  const rtlPlacementMappings = {
-    left: 'right',
-    'left-start': 'right-start',
-    'left-end': 'right-end',
-    'top-start': 'top-end',
-    'top-end': 'top-start',
-    right: 'left',
-    'right-start': 'left-start',
-    'right-end': 'left-end',
-    'bottom-start': 'bottom-end',
-    'bottom-end': 'bottom-start'
-  };
-  const popperPlacement = getPopperPlacement(gardenPlacement);
-  return rtlPlacementMappings[popperPlacement] || popperPlacement;
-}
-function getArrowPosition(popperPlacement) {
-  const arrowPositionMappings = {
-    top: 'bottom',
-    'top-start': 'bottom-left',
-    'top-end': 'bottom-right',
-    right: 'left',
-    'right-start': 'left-top',
-    'right-end': 'left-bottom',
-    bottom: 'top',
-    'bottom-start': 'top-left',
-    'bottom-end': 'top-right',
-    left: 'right',
-    'left-start': 'right-top',
-    'left-end': 'right-bottom'
-  };
-  return arrowPositionMappings[popperPlacement] || 'top';
-}
-
-const COMPONENT_ID$2 = 'tooltip.paragraph';
-const StyledParagraph = styled.p.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.75.0'
-}).withConfig({
-  displayName: "StyledParagraph",
-  componentId: "sc-wuqkfc-0"
-})(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledParagraph.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'tooltip.title';
-const StyledTitle = styled.strong.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.75.0'
-}).withConfig({
-  displayName: "StyledTitle",
-  componentId: "sc-vnjcvz-0"
-})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledTitle.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'tooltip.tooltip';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    size,
-    type,
-    placement,
-    hasArrow
-  } = _ref;
-  let margin = `${theme.space.base * 1.5}px`;
-  let borderRadius = theme.borderRadii.sm;
-  let padding = '0 1em';
-  let maxWidth;
-  let overflowWrap;
-  let whiteSpace = 'nowrap';
-  let lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
-  let fontSize = theme.fontSizes.sm;
-  let titleDisplay;
-  let paragraphMarginTop;
-  let wordWrap;
-  if (size !== 'small') {
-    borderRadius = theme.borderRadii.md;
-    overflowWrap = 'break-word';
-    whiteSpace = 'normal';
-    wordWrap = 'break-word';
-  }
-  if (size === 'extra-large') {
-    padding = `${theme.space.base * 10}px`;
-    maxWidth = `460px`;
-    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-    paragraphMarginTop = `${theme.space.base * 2.5}px`;
-  } else if (size === 'large') {
-    padding = `${theme.space.base * 5}px`;
-    maxWidth = `270px`;
-    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-    paragraphMarginTop = `${theme.space.base * 2}px`;
-  } else if (size === 'medium') {
-    padding = '1em';
-    maxWidth = `140px`;
-    lineHeight = getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
-  }
-  if (size === 'extra-large' || size === 'large') {
-    fontSize = theme.fontSizes.md;
-    titleDisplay = 'block';
-  }
-  let arrowSize;
-  let arrowInset;
-  if (hasArrow) {
-    if (size === 'small' || size === 'medium') {
-      arrowSize = margin;
-      arrowInset = type === 'dark' ? '1px' : '0';
-    } else {
-      arrowInset = type === 'dark' ? '2px' : '1px';
-      if (size === 'large') {
-        margin = `${theme.space.base * 2}px`;
-        arrowSize = margin;
-      } else if (size === 'extra-large') {
-        margin = `${theme.space.base * 3}px`;
-        arrowSize = `${theme.space.base * 2.5}px`;
-      }
-    }
-  }
-  return css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && arrowStyles(getArrowPosition(placement), {
-    size: arrowSize,
-    inset: arrowInset
-  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
-};
-const colorStyles = _ref2 => {
-  let {
-    theme,
-    type
-  } = _ref2;
-  let border;
-  let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
-  let backgroundColor = getColorV8('chromeHue', 700, theme);
-  let color = getColorV8('background', 600 , theme);
-  let titleColor;
-  if (type === 'light') {
-    boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColorV8('chromeHue', 600, theme, 0.15));
-    border = `${theme.borders.sm} ${getColorV8('neutralHue', 300, theme)}`;
-    backgroundColor = getColorV8('background', 600 , theme);
-    color = getColorV8('neutralHue', 700, theme);
-    titleColor = getColorV8('foreground', 600 , theme);
-  }
-  return css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
-};
-const StyledTooltip = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.75.0'
-}).withConfig({
-  displayName: "StyledTooltip",
-  componentId: "sc-gzzjq4-0"
-})(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTooltip.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const StyledTooltipWrapper = styled.div.withConfig({
-  displayName: "StyledTooltipWrapper",
-  componentId: "sc-1b7q9q6-0"
-})(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
-StyledTooltipWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
-const SIZE = ['small', 'medium', 'large', 'extra-large'];
-const TYPE = ['light', 'dark'];
-
-const Tooltip = _ref => {
-  let {
-    id,
-    delayMS,
-    isInitialVisible,
-    content,
-    refKey,
-    placement,
-    eventsEnabled,
-    popperModifiers,
-    children,
-    hasArrow,
-    size,
-    type,
-    appendToNode,
-    zIndex,
-    isVisible: externalIsVisible,
-    ...otherProps
-  } = _ref;
-  const {
-    rtl
-  } = useContext(ThemeContext);
-  const scheduleUpdateRef = useRef();
-  const {
-    isVisible,
-    getTooltipProps,
-    getTriggerProps,
-    openTooltip,
-    closeTooltip
-  } = useTooltip({
-    id,
-    delayMilliseconds: delayMS,
-    isVisible: isInitialVisible
-  });
-  const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
-  useEffect(() => {
-    if (controlledIsVisible && scheduleUpdateRef.current) {
-      scheduleUpdateRef.current();
-    }
-  }, [controlledIsVisible, content]);
-  const popperPlacement = rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  const singleChild = React.Children.only(children);
-  const modifiers = {
-    preventOverflow: {
-      boundariesElement: 'window'
-    },
-    ...popperModifiers
-  };
-  return React.createElement(Manager, null, React.createElement(Reference, null, _ref2 => {
-    let {
-      ref
-    } = _ref2;
-    return cloneElement(singleChild, getTriggerProps({
-      ...singleChild.props,
-      [refKey]: mergeRefs([ref, singleChild.ref ? singleChild.ref : null])
-    }));
-  }), React.createElement(Popper, {
-    placement: popperPlacement,
-    eventsEnabled: controlledIsVisible && eventsEnabled,
-    modifiers: modifiers
-  }, _ref3 => {
-    let {
-      ref,
-      style,
-      scheduleUpdate,
-      placement: currentPlacement
-    } = _ref3;
-    scheduleUpdateRef.current = scheduleUpdate;
-    const {
-      onFocus,
-      onBlur,
-      ...otherTooltipProps
-    } = otherProps;
-    let computedSize = size;
-    if (computedSize === undefined) {
-      if (type === 'dark') {
-        computedSize = 'small';
-      } else {
-        computedSize = 'large';
-      }
-    }
-    const tooltipProps = {
-      hasArrow,
-      placement: currentPlacement,
-      size: computedSize,
-      onFocus: composeEventHandlers(onFocus, () => {
-        openTooltip();
-      }),
-      onBlur: composeEventHandlers(onBlur, () => {
-        closeTooltip(0);
-      }),
-      'aria-hidden': !controlledIsVisible,
-      type,
-      ...otherTooltipProps
-    };
-    const tooltip = React.createElement(StyledTooltipWrapper, {
-      ref: controlledIsVisible ? ref : null,
-      style: style,
-      zIndex: zIndex,
-      "aria-hidden": !controlledIsVisible
-    }, React.createElement(StyledTooltip, getTooltipProps(tooltipProps), content));
-    if (appendToNode) {
-      return createPortal(tooltip, appendToNode);
-    }
-    return tooltip;
-  }));
-};
-Tooltip.displayName = 'Tooltip';
-Tooltip.propTypes = {
-  appendToNode: PropTypes.any,
-  hasArrow: PropTypes.bool,
-  delayMS: PropTypes.number,
-  eventsEnabled: PropTypes.bool,
-  id: PropTypes.string,
-  content: PropTypes.node.isRequired,
-  placement: PropTypes.oneOf(PLACEMENT),
-  popperModifiers: PropTypes.any,
-  size: PropTypes.oneOf(SIZE),
-  type: PropTypes.oneOf(TYPE),
-  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  isInitialVisible: PropTypes.bool,
-  refKey: PropTypes.string
-};
-Tooltip.defaultProps = {
-  hasArrow: true,
-  eventsEnabled: true,
-  type: 'dark',
-  placement: 'top',
-  delayMS: 500,
-  refKey: 'ref'
-};
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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);
-}
-
-const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, _extends({
-  ref: ref
-}, props)));
-Paragraph.displayName = 'Paragraph';
-
-const Title = forwardRef((props, ref) => React.createElement(StyledTitle, _extends({
-  ref: ref
-}, props)));
-Title.displayName = 'Title';
-
-export { Paragraph, Title, Tooltip };