@zendeskgarden/react-modals 9.0.0-next.9 → 9.1.0

package/dist/index.cjs.js

@@ -18,6 +18,7 @@ var ownerDocument = require('dom-helpers/ownerDocument');
 var ownerWindow = require('dom-helpers/ownerWindow');
 var css = require('dom-helpers/css');
 var getScrollbarSize = require('dom-helpers/scrollbarSize');
+var reactButtons = require('@zendeskgarden/react-buttons');
 var reactTransitionGroup = require('react-transition-group');
 var reactDom = require('@floating-ui/react-dom');
 var activeElement = require('dom-helpers/activeElement');
@@ -63,14 +64,26 @@ const animationStyles$1 = props => {
 };
 const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
-})(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', props => reactTheming.getColorV8('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
-StyledBackdrop.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    theme,
+    hue: 'neutralHue',
+    transparency: theme.opacity[1000],
+    light: {
+      shade: 900
+    },
+    dark: {
+      shade: 1200
+    }
+  });
+}, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledBackdrop.propTypes = {
   isCentered: PropTypes__default.default.bool,
   isAnimated: PropTypes__default.default.bool
@@ -79,80 +92,81 @@ StyledBackdrop.propTypes = {
 const COMPONENT_ID$i = 'modals.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
-})(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
-StyledBody.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 
 const COMPONENT_ID$h = 'modals.close';
-const colorStyles = props => {
-  const backgroundColor = 'primaryHue';
-  const foregroundColor = 'neutralHue';
-  return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], reactTheming.getColorV8(foregroundColor, 600, props.theme), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.08), reactTheming.getColorV8(foregroundColor, 700, props.theme), reactTheming.focusStyles({
-    theme: props.theme,
-    color: {
-      hue: backgroundColor
-    }
-  }), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.2), reactTheming.getColorV8(foregroundColor, 800, props.theme));
-};
 const BASE_MULTIPLIERS$1 = {
   top: 2.5,
   side: 6.5,
   size: 10
 };
-const StyledClose = styled__default.default.button.attrs({
+const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
-})(["display:block;position:absolute;top:", "px;", ":", ";transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", " & > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS$1.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS$1.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS$1.size, props => props.theme.space.base * BASE_MULTIPLIERS$1.size, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
-StyledClose.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["position:absolute;top:", "px;", ":", ";", ";"], props => props.theme.space.base * BASE_MULTIPLIERS$1.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS$1.side}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 
 const COMPONENT_ID$g = 'modals.footer';
 const StyledFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 200, props.theme)}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
-StyledFooter.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${reactTheming.getColor({
+  theme: props.theme,
+  variable: 'border.default'
+})}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 
 const COMPONENT_ID$f = 'modals.footer_item';
 const StyledFooterItem = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
 })(["display:flex;margin-", ":", "px;min-width:0;&:first-child{margin-", ":0;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 5, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
-StyledFooterItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$e = 'modals.header';
+const colorStyles$2 = _ref => {
+  let {
+    isDanger,
+    theme
+  } = _ref;
+  const bottomBorderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.subtle'
+  });
+  const color = reactTheming.getColor({
+    theme,
+    variable: isDanger ? 'foreground.danger' : 'foreground.default'
+  });
+  return styled.css(["border-bottom-color:", ";color:", ";"], bottomBorderColor, color);
+};
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
-})(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", "  line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, reactTheming.getColorV8('neutralHue', 200), props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? reactTheming.getColorV8('dangerHue', 600, props.theme) : reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
-StyledHeader.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:block;position:", ";margin:0;border-bottom:", ";padding:", ";", "  line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 
 var _g, _circle;
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -183,9 +197,6 @@ const StyledDangerIcon = styled__default.default(SvgAlertErrorStroke).withConfig
   displayName: "StyledDangerIcon",
   componentId: "sc-1kwbb39-0"
 })(["position:absolute;top:", "px;", ":", ";"], props => props.theme.space.base * 5.5, props => props.theme.rtl ? 'right' : 'left', props => `${props.theme.space.base * 4}px`);
-StyledDangerIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$d = 'modals.modal';
 const animationName = styled.keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
@@ -195,48 +206,50 @@ const animationStyles = props => {
   }
   return '';
 };
-const boxShadow$1 = props => {
-  const {
+const colorStyles$1 = _ref => {
+  let {
     theme
-  } = props;
-  const {
-    space,
-    shadows
-  } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = reactTheming.getColorV8('neutralHue', 800, theme, 0.35);
-  return shadows.lg(offsetY, blurRadius, color);
+  } = _ref;
+  const offsetY = `${theme.space.base * 5}px`;
+  const blurRadius = `${theme.space.base * 7}px`;
+  const shadowColor = reactTheming.getColor({
+    variable: 'shadow.large',
+    theme
+  });
+  const shadow = theme.shadows.lg(offsetY, blurRadius, shadowColor);
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
 };
-const sizeStyles$1 = props => {
+const sizeStyles$2 = props => {
   return styled.css(["", "{width:", ";}"], reactTheming.mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme), props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
 };
 const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
-})(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => reactTheming.getColorV8('background', 600 , props.theme), props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border:", ";border-radius:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$2, colorStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledModal.propTypes = {
   isLarge: PropTypes__default.default.bool,
   isAnimated: PropTypes__default.default.bool
 };
-StyledModal.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
-const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
-const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
+const COMPONENT_ID$c = 'modals.tooltip_dialog.backdrop';
+const StyledTooltipDialogBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
-  displayName: "StyledTooltipModalBackdrop",
-  componentId: "sc-1yaomgq-0"
+  displayName: "StyledTooltipDialogBackdrop",
+  componentId: "sc-zrk625-0"
 })(["position:fixed;inset:0;z-index:400;overflow:hidden;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-tooltip-modal-transition-exit-active{pointer-events:none;}&.garden-tooltip-modal-transition-exit-active div{transition:opacity 200ms;opacity:0;}", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
-StyledTooltipModalBackdrop.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
   className: props.isAnimated && 'is-animated'
@@ -249,19 +262,33 @@ const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
   zIndex: props.zIndex,
   animationModifier: '.is-animated'
 }));
-StyledTooltipWrapper.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
-const COMPONENT_ID$b = 'modals.tooltip_modal';
-const StyledTooltipModal = styled__default.default.div.attrs(props => ({
+const COMPONENT_ID$b = 'modals.tooltip_dialog.close';
+const StyledTooltipDialogClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.1.0'
+}).withConfig({
+  displayName: "StyledTooltipDialogClose",
+  componentId: "sc-18xlgfi-0"
+})(["top:", "px;", ":", ";", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+
+const COMPONENT_ID$a = 'modals.tooltip_dialog';
+const sizeStyles$1 = props => `
+  padding: ${props.theme.space.base * 5}px;
+  width: 400px;
+  
+  &:has(${StyledTooltipDialogClose}) > :first-child {
+    padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
+  }
+`;
+const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.1.0',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
-  displayName: "StyledTooltipModal",
-  componentId: "sc-42ubfr-0"
-})(["padding:", "px;width:400px;", ";", ";"], props => props.theme.space.base * 5, props => {
+  displayName: "StyledTooltipDialog",
+  componentId: "sc-iv3db-0"
+})(["", ";", " ", ";"], props => {
   const computedArrowStyles = reactTheming.arrowStyles(reactTheming.getArrowPosition(props.theme, props.placement), {
     size: `${props.theme.space.base * 2}px`,
     inset: '1px',
@@ -271,102 +298,95 @@ const StyledTooltipModal = styled__default.default.div.attrs(props => ({
     return props.hasArrow && props.transitionState === 'entered' && computedArrowStyles;
   }
   return props.hasArrow && computedArrowStyles;
-}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledTooltipModal.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+}, sizeStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 
-const COMPONENT_ID$a = 'modals.tooltip_modal.title';
+const COMPONENT_ID$9 = 'modals.tooltip_dialog.title';
 const sizeStyles = props => `
   /* stylelint-disable-next-line property-no-unknown */
-  padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
   line-height: ${reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
   font-size: ${props.theme.fontSizes.md};
 `;
-const StyledTooltipModalTitle = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.9'
-}).withConfig({
-  displayName: "StyledTooltipModalTitle",
-  componentId: "sc-11xjgjs-0"
-})(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledTooltipModalTitle.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
-const StyledTooltipModalBody = styled__default.default.div.attrs({
+const StyledTooltipDialogTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
-  displayName: "StyledTooltipModalBody",
-  componentId: "sc-195dkzj-0"
-})(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledTooltipModalBody.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+  displayName: "StyledTooltipDialogTitle",
+  componentId: "sc-1rceixg-0"
+})(["margin:0;color:", ";font-weight:", ";", ";", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    variable: 'foreground.default',
+    theme
+  });
+}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 
-const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
-const StyledTooltipModalFooter = styled__default.default.div.attrs({
+const COMPONENT_ID$8 = 'modals.tooltip_dialog.body';
+const StyledTooltipDialogBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
-  displayName: "StyledTooltipModalFooter",
-  componentId: "sc-fm36a9-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledTooltipModalFooter.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+  displayName: "StyledTooltipDialogBody",
+  componentId: "sc-132lcoq-0"
+})(["display:block;margin:0;padding-top:", "px;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    variable: 'foreground.default',
+    theme
+  });
+}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 
-const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
-const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
+const COMPONENT_ID$7 = 'modals.tooltip_dialog.footer';
+const StyledTooltipDialogFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
-  displayName: "StyledTooltipModalFooterItem",
-  componentId: "sc-1nahj6p-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledTooltipModalFooterItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+  displayName: "StyledTooltipDialogFooter",
+  componentId: "sc-kjomsm-0"
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 
-const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
-const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
+const COMPONENT_ID$6 = 'modals.tooltip_dialog.footer_item';
+const StyledTooltipDialogFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
-  displayName: "StyledTooltipModalClose",
-  componentId: "sc-1h2ke3q-0"
-})(["top:", "px;", ":", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => props.theme.space.base * 8, props => props.theme.space.base * 8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledTooltipModalClose.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+  displayName: "StyledTooltipDialogFooterItem",
+  componentId: "sc-u2rmo8-0"
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 
 const COMPONENT_ID$5 = 'modals.drawer_modal';
 const DRAWER_WIDTH = 380;
-const boxShadow = props => {
-  const {
+const colorStyles = _ref => {
+  let {
     theme
-  } = props;
-  const {
-    space,
-    shadows
-  } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = reactTheming.getColorV8('neutralHue', 800, theme, 0.35);
-  return shadows.lg(offsetY, blurRadius, color);
+  } = _ref;
+  const offsetY = `${theme.space.base * 5}px`;
+  const blurRadius = `${theme.space.base * 7}px`;
+  const shadowColor = reactTheming.getColor({
+    variable: 'shadow.large',
+    theme
+  });
+  const shadow = theme.shadows.lg(offsetY, blurRadius, shadowColor);
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
 };
 const StyledDrawer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledDrawer",
   componentId: "sc-zp66t3-0"
-})(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => reactTheming.getColorV8('background', 600 , props.theme), DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledDrawer.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;", ":", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", " ", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.rtl ? 'border-right' : 'border-left', props => props.theme.borders.sm, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 
 const COMPONENT_ID$4 = 'modals.drawer_modal.close';
 const BASE_MULTIPLIERS = {
@@ -376,62 +396,55 @@ const BASE_MULTIPLIERS = {
 };
 const StyledDrawerClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledDrawerClose",
   componentId: "sc-1a0xt3x-0"
 })(["", ":", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledDrawerClose.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
 const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledDrawerHeader",
   componentId: "sc-y4mgkj-0"
 })(["padding:", "px;", "  ", ";"], props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledDrawerHeader.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
 const StyledDrawerBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledDrawerBody",
   componentId: "sc-13qufyn-0"
-})(["padding:", "px;", ";"], props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledDrawerBody.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 const StyledDrawerFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledDrawerFooter",
   componentId: "sc-kc7e6p-0"
-})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledDrawerFooter.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return `${theme.borders.sm} ${reactTheming.getColor({
+    theme,
+    variable: 'border.subtle'
+  })}`;
+}, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
 const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledDrawerFooterItem",
   componentId: "sc-m2yul4-0"
 })(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledDrawerFooterItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const ModalsContext = React.createContext(undefined);
 const useModalContext = () => {
@@ -450,10 +463,10 @@ const Body$2 = React.forwardRef((props, ref) => {
     ref: ref
   }));
 });
-Body$2.displayName = 'Body';
+Body$2.displayName = 'Modal.Body';
 
 var _path;
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -486,7 +499,7 @@ const Close$2 = React.forwardRef((props, ref) => {
     ref: ref
   }), React__namespace.default.createElement(SvgXStroke, null));
 });
-Close$2.displayName = 'Close';
+Close$2.displayName = 'Modal.Close';
 
 const Footer$2 = React__namespace.default.forwardRef((props, ref) => {
   const {
@@ -497,12 +510,12 @@ const Footer$2 = React__namespace.default.forwardRef((props, ref) => {
     isLarge: isLarge
   }, props));
 });
-Footer$2.displayName = 'Footer';
+Footer$2.displayName = 'Modal.Footer';
 
 const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, Object.assign({
   ref: ref
 }, props)));
-FooterItem$2.displayName = 'FooterItem';
+FooterItem$2.displayName = 'Modal.FooterItem';
 
 const Header$1 = React.forwardRef((_ref, ref) => {
   let {
@@ -530,9 +543,9 @@ const Header$1 = React.forwardRef((_ref, ref) => {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
-  }), other.isDanger && React__namespace.default.createElement(StyledDangerIcon, null), children);
+  }), !!other.isDanger && React__namespace.default.createElement(StyledDangerIcon, null), children);
 });
-Header$1.displayName = 'Header';
+Header$1.displayName = 'Modal.Header';
 Header$1.propTypes = {
   isDanger: PropTypes__default.default.bool,
   tag: PropTypes__default.default.any
@@ -649,7 +662,7 @@ const ModalComponent = React.forwardRef((_ref, ref) => {
   if (!rootNode) {
     return null;
   }
-  return ReactDOM.createPortal( React__namespace.default.createElement(ModalsContext.Provider, {
+  return ReactDOM.createPortal(React__namespace.default.createElement(ModalsContext.Provider, {
     value: value
   }, React__namespace.default.createElement(StyledBackdrop, Object.assign({
     isCentered: isCentered,
@@ -684,11 +697,11 @@ Modal.Footer = Footer$2;
 Modal.FooterItem = FooterItem$2;
 Modal.Header = Header$1;
 
-const TooltipModalContext = React.createContext(undefined);
-const useTooltipModalContext = () => {
-  const context = React.useContext(TooltipModalContext);
+const TooltipDialogContext = React.createContext(undefined);
+const useTooltipDialogContext = () => {
+  const context = React.useContext(TooltipDialogContext);
   if (context === undefined) {
-    throw new Error('Element must be used within a TooltipModal component.');
+    throw new Error('Element must be used within a TooltipDialog component.');
   }
   return context;
 };
@@ -703,7 +716,7 @@ const TitleComponent = React.forwardRef((_ref, ref) => {
     getTitleProps,
     hasTitle,
     setHasTitle
-  } = useTooltipModalContext();
+  } = useTooltipDialogContext();
   React.useEffect(() => {
     if (!hasTitle && setHasTitle) {
       setHasTitle(true);
@@ -714,12 +727,12 @@ const TitleComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasTitle, setHasTitle]);
-  return React__namespace.default.createElement(StyledTooltipModalTitle, Object.assign({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledTooltipDialogTitle, Object.assign({}, getTitleProps(other), {
     as: tag,
     ref: ref
   }), children);
 });
-TitleComponent.displayName = 'TooltipModal.Title';
+TitleComponent.displayName = 'TooltipDialog.Title';
 TitleComponent.propTypes = {
   tag: PropTypes__default.default.any
 };
@@ -731,47 +744,49 @@ const Title = TitleComponent;
 const BodyComponent$1 = React.forwardRef((props, ref) => {
   const {
     getContentProps
-  } = useTooltipModalContext();
-  return React__namespace.default.createElement(StyledTooltipModalBody, Object.assign({}, getContentProps(props), {
+  } = useTooltipDialogContext();
+  return React__namespace.default.createElement(StyledTooltipDialogBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }));
 });
-BodyComponent$1.displayName = 'TooltipModal.Body';
+BodyComponent$1.displayName = 'TooltipDialog.Body';
 const Body$1 = BodyComponent$1;
 
 const CloseComponent$1 = React.forwardRef((props, ref) => {
   const {
     getCloseProps
-  } = useTooltipModalContext();
+  } = useTooltipDialogContext();
   const ariaLabel = reactTheming.useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
-  return React__namespace.default.createElement(StyledTooltipModalClose, Object.assign({}, getCloseProps({
+  return React__namespace.default.createElement(StyledTooltipDialogClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
-    ref: ref
+    ref: ref,
+    size: "small"
   }), React__namespace.default.createElement(SvgXStroke, null));
 });
-CloseComponent$1.displayName = 'TooltipModal.Close';
+CloseComponent$1.displayName = 'TooltipDialog.Close';
 const Close$1 = CloseComponent$1;
 
-const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooter, Object.assign({
+const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipDialogFooter, Object.assign({
   ref: ref
 }, props)));
-FooterComponent$1.displayName = 'TooltipModal.Footer';
+FooterComponent$1.displayName = 'TooltipDialog.Footer';
 const Footer$1 = FooterComponent$1;
 
-const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooterItem, Object.assign({
+const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipDialogFooterItem, Object.assign({
   ref: ref
 }, props)));
-FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
+FooterItemComponent$1.displayName = 'TooltipDialog.FooterItem';
 const FooterItem$1 = FooterItemComponent$1;
 
 const PLACEMENT_DEFAULT = 'top';
-const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) => {
+const TooltipDialogComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     appendToNode,
     referenceElement,
     placement: _placement,
+    offset: _offset,
     onClose,
     hasArrow,
     isAnimated,
@@ -819,7 +834,7 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
       floating: floatingElement
     },
     placement: floatingPlacement,
-    middleware: [reactDom.offset(theme.space.base * 3), _placement === 'auto' ? reactDom.autoPlacement() : undefined]
+    middleware: [reactDom.offset(_offset === undefined ? theme.space.base * 3 : _offset), _placement === 'auto' ? reactDom.autoPlacement() : undefined]
   });
   React.useEffect(() => {
     let cleanup;
@@ -846,7 +861,7 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
   const defaultValue = hasTitle ? modalProps['aria-labelledby'] : 'Modal dialog';
   const labelValue = hasTitle ? modalProps['aria-labelledby'] : props['aria-label'];
   const ariaProps = {
-    [attribute]: reactTheming.useText(TooltipModalComponent, {
+    [attribute]: reactTheming.useText(TooltipDialogComponent, {
       [attribute]: labelValue
     }, attribute, defaultValue)
   };
@@ -864,9 +879,9 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
     classNames: isAnimated ? 'garden-tooltip-modal-transition' : '',
     nodeRef: transitionRef
   }, transitionState => {
-    return React__namespace.default.createElement(TooltipModalContext.Provider, {
+    return React__namespace.default.createElement(TooltipDialogContext.Provider, {
       value: value
-    }, React__namespace.default.createElement(StyledTooltipModalBackdrop, Object.assign({}, getBackdropProps(), backdropProps, {
+    }, React__namespace.default.createElement(StyledTooltipDialogBackdrop, Object.assign({}, getBackdropProps(), backdropProps, {
       ref: transitionRef
     }), React__namespace.default.createElement(StyledTooltipWrapper, {
       ref: setFloatingElement,
@@ -876,7 +891,7 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
       placement: placement,
       zIndex: zIndex,
       isAnimated: isAnimated
-    }, React__namespace.default.createElement(StyledTooltipModal, Object.assign({
+    }, React__namespace.default.createElement(StyledTooltipDialog, Object.assign({
       transitionState: transitionState,
       placement: placement,
       hasArrow: hasArrow,
@@ -887,14 +902,14 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
   });
   return appendToNode ? ReactDOM.createPortal(Node, appendToNode) : Node;
 });
-TooltipModalComponent.displayName = 'TooltipModal';
-TooltipModalComponent.defaultProps = {
+TooltipDialogComponent.displayName = 'TooltipDialog';
+TooltipDialogComponent.defaultProps = {
   placement: 'auto',
   hasArrow: true,
   focusOnMount: true,
   restoreFocus: true
 };
-TooltipModalComponent.propTypes = {
+TooltipDialogComponent.propTypes = {
   appendToNode: PropTypes__default.default.any,
   referenceElement: PropTypes__default.default.any,
   placement: PropTypes__default.default.any,
@@ -906,12 +921,12 @@ TooltipModalComponent.propTypes = {
   focusOnMount: PropTypes__default.default.bool,
   restoreFocus: PropTypes__default.default.bool
 };
-const TooltipModal = TooltipModalComponent;
-TooltipModal.Body = Body$1;
-TooltipModal.Close = Close$1;
-TooltipModal.Footer = Footer$1;
-TooltipModal.FooterItem = FooterItem$1;
-TooltipModal.Title = Title;
+const TooltipDialog = TooltipDialogComponent;
+TooltipDialog.Body = Body$1;
+TooltipDialog.Close = Close$1;
+TooltipDialog.Footer = Footer$1;
+TooltipDialog.FooterItem = FooterItem$1;
+TooltipDialog.Title = Title;
 
 const HeaderComponent = React.forwardRef((_ref, ref) => {
   let {
@@ -1095,7 +1110,7 @@ const DrawerComponent = React.forwardRef((_ref, ref) => {
   if (!rootNode) {
     return null;
   }
-  return ReactDOM__default.default.createPortal( React__namespace.default.createElement(ModalsContext.Provider, {
+  return ReactDOM__default.default.createPortal(React__namespace.default.createElement(ModalsContext.Provider, {
     value: value
   }, React__namespace.default.createElement(reactTransitionGroup.CSSTransition, {
     in: isOpen,
@@ -1139,4 +1154,4 @@ exports.FooterItem = FooterItem$2;
 exports.Header = Header$1;
 exports.Modal = Modal;
 exports.PLACEMENT = PLACEMENT;
-exports.TooltipModal = TooltipModal;
+exports.TooltipDialog = TooltipDialog;