@zendeskgarden/react-tooltips 9.0.0-next.7 → 9.0.0-next.8

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,137 @@
+/**
+* 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 '../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';
+import { useFloating, platform, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
+import { DEFAULT_THEME, getFloatingPlacements } from '@zendeskgarden/react-theming';
+import { toSize } from './utils.js';
+import { Paragraph } from './Paragraph.js';
+import { Title } from './Title.js';
+
+const PLACEMENT_DEFAULT = 'top';
+const TooltipComponent = _ref => {
+  let {
+    id,
+    delayMS,
+    isInitialVisible,
+    content,
+    refKey,
+    placement: _placement,
+    children,
+    hasArrow,
+    size,
+    type,
+    appendToNode,
+    zIndex,
+    isVisible: externalIsVisible,
+    onFocus,
+    onBlur,
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const {
+    isVisible,
+    getTooltipProps,
+    getTriggerProps,
+    openTooltip,
+    closeTooltip
+  } = useTooltip({
+    id,
+    delayMilliseconds: delayMS,
+    isVisible: isInitialVisible
+  });
+  const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
+  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
+    }
+  } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    placement: floatingPlacement,
+    middleware: _placement === 'auto' ? [autoPlacement()] : undefined
+  });
+  useEffect(() => {
+    let cleanup;
+    if (controlledIsVisible && refs.reference.current && refs.floating.current) {
+      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [controlledIsVisible, refs.reference, refs.floating, update]);
+  const Child = React.Children.only(children);
+  const Node = React.createElement(StyledTooltipWrapper, {
+    ref: floatingRef,
+    style: {
+      transform
+    },
+    zIndex: zIndex,
+    "aria-hidden": !controlledIsVisible
+  }, React.createElement(StyledTooltip, getTooltipProps({
+    hasArrow,
+    placement,
+    size: toSize(size, type),
+    onFocus: composeEventHandlers(onFocus, openTooltip),
+    onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
+    'aria-hidden': !controlledIsVisible,
+    type,
+    ...props
+  }), content));
+  return React.createElement(React.Fragment, null, cloneElement(Child, getTriggerProps({
+    ...Child.props,
+    [refKey]: mergeRefs([triggerRef, Child.ref ? Child.ref : null])
+  })), appendToNode ? createPortal(Node, appendToNode) : Node);
+};
+TooltipComponent.displayName = 'Tooltip';
+TooltipComponent.propTypes = {
+  appendToNode: PropTypes.any,
+  hasArrow: PropTypes.bool,
+  delayMS: PropTypes.number,
+  id: PropTypes.string,
+  content: PropTypes.node.isRequired,
+  placement: PropTypes.oneOf(PLACEMENT),
+  size: PropTypes.oneOf(SIZE),
+  type: PropTypes.oneOf(TYPE),
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  isInitialVisible: PropTypes.bool,
+  refKey: PropTypes.string
+};
+TooltipComponent.defaultProps = {
+  hasArrow: true,
+  type: 'dark',
+  placement: PLACEMENT_DEFAULT,
+  delayMS: 500,
+  refKey: 'ref'
+};
+const Tooltip = TooltipComponent;
+Tooltip.Paragraph = Paragraph;
+Tooltip.Title = Title;
+
+export { PLACEMENT_DEFAULT, Tooltip, TooltipComponent };

package/dist/esm/elements/utils.js

@@ -0,0 +1,15 @@
+/**
+* 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 toSize = (size, type) => {
+  let retVal = size;
+  if (retVal === undefined) {
+    retVal = type === 'dark' ? 'small' : 'large';
+  }
+  return retVal;
+};
+
+export { toSize };

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 { Paragraph } from './elements/Paragraph.js';
+export { Title } from './elements/Title.js';
+export { Tooltip } from './elements/Tooltip.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': '9.0.0-next.8'
+}).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': '9.0.0-next.8'
+}).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,109 @@
+/**
+* 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, getArrowPosition, getColorV8 } from '@zendeskgarden/react-theming';
+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(theme, 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': '9.0.0-next.8'
+}).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"
+})(["position:absolute;top:0;left: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,13 @@
+/**
+* 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 { PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
+
+const PLACEMENT = ['auto', ...PLACEMENT$1];
+const SIZE = ['small', 'medium', 'large', 'extra-large'];
+const TYPE = ['light', 'dark'];
+
+export { PLACEMENT, SIZE, TYPE };

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');
@@ -23,25 +22,10 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-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 COMPONENT_ID$2 = 'tooltip.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -53,7 +37,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': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -150,7 +134,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -167,12 +151,12 @@ StyledTooltipWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-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": "9.0.0-next.7",
+  "version": "9.0.0-next.8",
   "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-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.1.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.7"
+    "@zendeskgarden/react-theming": "^9.0.0-next.8"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
+  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
 }

package/dist/index.esm.js

@@ -1,296 +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, { forwardRef, useContext, useRef, useEffect, cloneElement } from 'react';
-import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getArrowPosition, getColorV8, PLACEMENT as PLACEMENT$1, getFloatingPlacements } from '@zendeskgarden/react-theming';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-import { mergeRefs } from 'react-merge-refs';
-import { useTooltip } from '@zendeskgarden/container-tooltip';
-import { getControlledValue, composeEventHandlers } from '@zendeskgarden/container-utilities';
-import { useFloating, platform, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
-
-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 COMPONENT_ID$2 = 'tooltip.paragraph';
-const StyledParagraph = styled.p.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.7'
-}).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': '9.0.0-next.7'
-}).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(theme, 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': '9.0.0-next.7'
-}).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"
-})(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
-StyledTooltipWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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';
-
-const PLACEMENT = ['auto', ...PLACEMENT$1];
-const SIZE = ['small', 'medium', 'large', 'extra-large'];
-const TYPE = ['light', 'dark'];
-
-const toSize = (size, type) => {
-  let retVal = size;
-  if (retVal === undefined) {
-    retVal = type === 'dark' ? 'small' : 'large';
-  }
-  return retVal;
-};
-
-const PLACEMENT_DEFAULT = 'top';
-const TooltipComponent = _ref => {
-  let {
-    id,
-    delayMS,
-    isInitialVisible,
-    content,
-    refKey,
-    placement: _placement,
-    children,
-    hasArrow,
-    size,
-    type,
-    appendToNode,
-    zIndex,
-    isVisible: externalIsVisible,
-    onFocus,
-    onBlur,
-    ...props
-  } = _ref;
-  const theme = useContext(ThemeContext) || DEFAULT_THEME;
-  const triggerRef = useRef(null);
-  const floatingRef = useRef(null);
-  const {
-    isVisible,
-    getTooltipProps,
-    getTriggerProps,
-    openTooltip,
-    closeTooltip
-  } = useTooltip({
-    id,
-    delayMilliseconds: delayMS,
-    isVisible: isInitialVisible
-  });
-  const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
-  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
-  const {
-    refs,
-    placement,
-    update,
-    floatingStyles: {
-      transform
-    }
-  } = useFloating({
-    platform: {
-      ...platform,
-      isRTL: () => theme.rtl
-    },
-    elements: {
-      reference: triggerRef?.current,
-      floating: floatingRef?.current
-    },
-    placement: floatingPlacement,
-    middleware: _placement === 'auto' ? [autoPlacement()] : undefined
-  });
-  useEffect(() => {
-    let cleanup;
-    if (controlledIsVisible && refs.reference.current && refs.floating.current) {
-      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
-        elementResize: typeof ResizeObserver === 'function'
-      });
-    }
-    return () => cleanup && cleanup();
-  }, [controlledIsVisible, refs.reference, refs.floating, update]);
-  const Child = React.Children.only(children);
-  const Node = React.createElement(StyledTooltipWrapper, {
-    ref: floatingRef,
-    style: {
-      transform
-    },
-    zIndex: zIndex,
-    "aria-hidden": !controlledIsVisible
-  }, React.createElement(StyledTooltip, getTooltipProps({
-    hasArrow,
-    placement,
-    size: toSize(size, type),
-    onFocus: composeEventHandlers(onFocus, openTooltip),
-    onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
-    'aria-hidden': !controlledIsVisible,
-    type,
-    ...props
-  }), content));
-  return React.createElement(React.Fragment, null, cloneElement(Child, getTriggerProps({
-    ...Child.props,
-    [refKey]: mergeRefs([triggerRef, Child.ref ? Child.ref : null])
-  })), appendToNode ? createPortal(Node, appendToNode) : Node);
-};
-TooltipComponent.displayName = 'Tooltip';
-TooltipComponent.propTypes = {
-  appendToNode: PropTypes.any,
-  hasArrow: PropTypes.bool,
-  delayMS: PropTypes.number,
-  id: PropTypes.string,
-  content: PropTypes.node.isRequired,
-  placement: PropTypes.oneOf(PLACEMENT),
-  size: PropTypes.oneOf(SIZE),
-  type: PropTypes.oneOf(TYPE),
-  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  isInitialVisible: PropTypes.bool,
-  refKey: PropTypes.string
-};
-TooltipComponent.defaultProps = {
-  hasArrow: true,
-  type: 'dark',
-  placement: PLACEMENT_DEFAULT,
-  delayMS: 500,
-  refKey: 'ref'
-};
-const Tooltip = TooltipComponent;
-Tooltip.Paragraph = Paragraph;
-Tooltip.Title = Title;
-
-export { Paragraph, Title, Tooltip };