@zendeskgarden/react-modals 9.0.0-next.6 → 9.0.0-next.8

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js

@@ -0,0 +1,26 @@
+/**
+* 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 * as React from 'react';
+
+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); }
+var SvgXStroke = function SvgXStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 13L13 3m0 10L3 3"
+  })));
+};
+
+export { SvgXStroke as default };

package/dist/esm/styled/StyledBackdrop.js

@@ -0,0 +1,34 @@
+/**
+* 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 PropTypes from 'prop-types';
+import styled, { keyframes, css } from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.backdrop';
+const animationName = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
+const animationStyles = props => {
+  if (props.isAnimated) {
+    return css(["animation:", " 0.15s ease-in;"], animationName);
+  }
+  return '';
+};
+const StyledBackdrop = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 => getColorV8('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBackdrop.defaultProps = {
+  theme: DEFAULT_THEME
+};
+StyledBackdrop.propTypes = {
+  isCentered: PropTypes.bool,
+  isAnimated: PropTypes.bool
+};
+
+export { StyledBackdrop };

package/dist/esm/styled/StyledBody.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 { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.body';
+const StyledBody = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBody.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBody };

package/dist/esm/styled/StyledClose.js

@@ -0,0 +1,37 @@
+/**
+* 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, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.close';
+const colorStyles = props => {
+  const backgroundColor = 'primaryHue';
+  const foregroundColor = 'neutralHue';
+  return 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:", ";}"], getColorV8(foregroundColor, 600, props.theme), getColorV8(backgroundColor, 600, props.theme, 0.08), getColorV8(foregroundColor, 700, props.theme), focusStyles({
+    theme: props.theme,
+    color: {
+      hue: backgroundColor
+    }
+  }), getColorV8(backgroundColor, 600, props.theme, 0.2), getColorV8(foregroundColor, 800, props.theme));
+};
+const BASE_MULTIPLIERS = {
+  top: 2.5,
+  side: 6.5,
+  size: 10
+};
+const StyledClose = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { BASE_MULTIPLIERS, StyledClose };

package/dist/esm/styled/StyledDangerIcon.js

@@ -0,0 +1,19 @@
+/**
+* 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';
+import SvgAlertErrorStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
+
+const StyledDangerIcon = styled(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: DEFAULT_THEME
+};
+
+export { StyledDangerIcon };

package/dist/esm/styled/StyledDrawer.js

@@ -0,0 +1,36 @@
+/**
+* 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 { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.drawer_modal';
+const DRAWER_WIDTH = 380;
+const boxShadow = props => {
+  const {
+    theme
+  } = props;
+  const {
+    space,
+    shadows
+  } = theme;
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const color = getColorV8('neutralHue', 800, theme, 0.35);
+  return shadows.lg(offsetY, blurRadius, color);
+};
+const StyledDrawer = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 => 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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDrawer.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDrawer };

package/dist/esm/styled/StyledDrawerBody.js

@@ -0,0 +1,23 @@
+/**
+* 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';
+import { StyledBody } from './StyledBody.js';
+
+const COMPONENT_ID = 'modals.drawer_modal.body';
+const StyledDrawerBody = styled(StyledBody).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledDrawerBody",
+  componentId: "sc-13qufyn-0"
+})(["padding:", "px;", ";"], props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDrawerBody.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDrawerBody };

package/dist/esm/styled/StyledDrawerClose.js

@@ -0,0 +1,28 @@
+/**
+* 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';
+import { StyledClose, BASE_MULTIPLIERS as BASE_MULTIPLIERS$1 } from './StyledClose.js';
+
+const COMPONENT_ID = 'modals.drawer_modal.close';
+const BASE_MULTIPLIERS = {
+  top: BASE_MULTIPLIERS$1.top,
+  side: 2,
+  size: BASE_MULTIPLIERS$1.size
+};
+const StyledDrawerClose = styled(StyledClose).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledDrawerClose",
+  componentId: "sc-1a0xt3x-0"
+})(["", ":", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDrawerClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { BASE_MULTIPLIERS, StyledDrawerClose };

package/dist/esm/styled/StyledDrawerFooter.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 { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.drawer_modal.footer';
+const StyledDrawerFooter = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDrawerFooter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDrawerFooter };

package/dist/esm/styled/StyledDrawerFooterItem.js

@@ -0,0 +1,23 @@
+/**
+* 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';
+import { StyledFooterItem } from './StyledFooterItem.js';
+
+const COMPONENT_ID = 'modals.drawer_modal.footer_item';
+const StyledDrawerFooterItem = styled(StyledFooterItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledDrawerFooterItem",
+  componentId: "sc-m2yul4-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDrawerFooterItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDrawerFooterItem };

package/dist/esm/styled/StyledDrawerHeader.js

@@ -0,0 +1,24 @@
+/**
+* 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';
+import { StyledHeader } from './StyledHeader.js';
+import { BASE_MULTIPLIERS } from './StyledDrawerClose.js';
+
+const COMPONENT_ID = 'modals.drawer_modal.header';
+const StyledDrawerHeader = styled(StyledHeader).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDrawerHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDrawerHeader };

package/dist/esm/styled/StyledFooter.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 { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.footer';
+const StyledFooter = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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} ${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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFooter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFooter };

package/dist/esm/styled/StyledFooterItem.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 = 'modals.footer_item';
+const StyledFooterItem = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFooterItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFooterItem };

package/dist/esm/styled/StyledHeader.js

@@ -0,0 +1,23 @@
+/**
+* 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 { getColorV8, getLineHeight, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { BASE_MULTIPLIERS } from './StyledClose.js';
+
+const COMPONENT_ID = 'modals.header';
+const StyledHeader = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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, 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.size + BASE_MULTIPLIERS.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? getColorV8('dangerHue', 600, props.theme) : getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeader };

package/dist/esm/styled/StyledModal.js

@@ -0,0 +1,50 @@
+/**
+* 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 PropTypes from 'prop-types';
+import styled, { keyframes, css } from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, mediaQuery } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.modal';
+const animationName = keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
+const animationStyles = props => {
+  if (props.isAnimated) {
+    return css(["animation:", " 0.3s ease-in;"], animationName);
+  }
+  return '';
+};
+const boxShadow = props => {
+  const {
+    theme
+  } = props;
+  const {
+    space,
+    shadows
+  } = theme;
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const color = getColorV8('neutralHue', 800, theme, 0.35);
+  return shadows.lg(offsetY, blurRadius, color);
+};
+const sizeStyles = props => {
+  return css(["", "{width:", ";}"], mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme), props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
+};
+const StyledModal = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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, props => getColorV8('background', 600 , props.theme), props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles, 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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledModal.propTypes = {
+  isLarge: PropTypes.bool,
+  isAnimated: PropTypes.bool
+};
+StyledModal.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledModal };

package/dist/esm/styled/StyledTooltipModal.js

@@ -0,0 +1,33 @@
+/**
+* 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 { arrowStyles, getArrowPosition, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_modal';
+const StyledTooltipModal = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
+  displayName: "StyledTooltipModal",
+  componentId: "sc-42ubfr-0"
+})(["padding:", "px;width:400px;", ";", ";"], props => props.theme.space.base * 5, props => {
+  const computedArrowStyles = arrowStyles(getArrowPosition(props.theme, props.placement), {
+    size: `${props.theme.space.base * 2}px`,
+    inset: '1px',
+    animationModifier: '.is-animated'
+  });
+  if (props.isAnimated) {
+    return props.hasArrow && props.transitionState === 'entered' && computedArrowStyles;
+  }
+  return props.hasArrow && computedArrowStyles;
+}, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModal.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModal };

package/dist/esm/styled/StyledTooltipModalBackdrop.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 = 'modals.tooltip_modal.backdrop';
+const StyledTooltipModalBackdrop = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTooltipModalBackdrop",
+  componentId: "sc-1yaomgq-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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModalBackdrop.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalBackdrop };

package/dist/esm/styled/StyledTooltipModalBody.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 { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_modal.body';
+const StyledTooltipModalBody = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModalBody.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalBody };

package/dist/esm/styled/StyledTooltipModalClose.js

@@ -0,0 +1,23 @@
+/**
+* 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';
+import { StyledClose } from './StyledClose.js';
+
+const COMPONENT_ID = 'modals.tooltip_modal.close';
+const StyledTooltipModalClose = styled(StyledClose).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModalClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalClose };

package/dist/esm/styled/StyledTooltipModalFooter.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 = 'modals.tooltip_modal.footer';
+const StyledTooltipModalFooter = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModalFooter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalFooter };

package/dist/esm/styled/StyledTooltipModalFooterItem.js

@@ -0,0 +1,23 @@
+/**
+* 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';
+import { StyledFooterItem } from './StyledFooterItem.js';
+
+const COMPONENT_ID = 'modals.tooltip_modal.footer_item';
+const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTooltipModalFooterItem",
+  componentId: "sc-1nahj6p-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModalFooterItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalFooterItem };

package/dist/esm/styled/StyledTooltipModalTitle.js

@@ -0,0 +1,28 @@
+/**
+* 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 { getColorV8, retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_modal.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: ${getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
+  font-size: ${props.theme.fontSizes.md};
+`;
+const StyledTooltipModalTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTooltipModalTitle",
+  componentId: "sc-11xjgjs-0"
+})(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModalTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalTitle };

package/dist/esm/styled/StyledTooltipWrapper.js

@@ -0,0 +1,25 @@
+/**
+* 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 { menuStyles, getMenuPosition, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledTooltipWrapper = styled.div.attrs(props => ({
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
+  displayName: "StyledTooltipWrapper",
+  componentId: "sc-1xk05kf-0"
+})(["top:0;left:0;", ";"], props => menuStyles(getMenuPosition(props.placement), {
+  theme: props.theme,
+  hidden: false,
+  zIndex: props.zIndex,
+  animationModifier: '.is-animated'
+}));
+StyledTooltipWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipWrapper };