@zendeskgarden/react-modals 9.0.0-next.2 → 9.0.0-next.21

package/dist/index.esm.js

@@ -1,1115 +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 * as React from 'react';
-import React__default, { createContext, useContext, forwardRef, useRef, useState, useEffect, useMemo } from 'react';
-import ReactDOM, { createPortal } from 'react-dom';
-import styled, { keyframes, css, ThemeContext } from 'styled-components';
-import PropTypes from 'prop-types';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, focusStyles, mediaQuery, menuStyles, getMenuPosition, arrowStyles, getArrowPosition, useDocument, useText, getFloatingPlacements, PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
-import { useModal } from '@zendeskgarden/container-modal';
-import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
-import { mergeRefs } from 'react-merge-refs';
-import isWindow from 'dom-helpers/isWindow';
-import ownerDocument from 'dom-helpers/ownerDocument';
-import ownerWindow from 'dom-helpers/ownerWindow';
-import css$1 from 'dom-helpers/css';
-import getScrollbarSize from 'dom-helpers/scrollbarSize';
-import { CSSTransition } from 'react-transition-group';
-import { useFloating, offset, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
-import activeElement from 'dom-helpers/activeElement';
-
-function _extends$2() {
-  _extends$2 = 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$2.apply(this, arguments);
-}
-
-const COMPONENT_ID$j = 'modals.backdrop';
-const animationName$1 = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
-const animationStyles$1 = props => {
-  if (props.isAnimated) {
-    return css(["animation:", " 0.15s ease-in;"], animationName$1);
-  }
-  return '';
-};
-const StyledBackdrop = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.2'
-}).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 => getColor('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => retrieveComponentStyles(COMPONENT_ID$j, props));
-StyledBackdrop.defaultProps = {
-  theme: DEFAULT_THEME
-};
-StyledBackdrop.propTypes = {
-  isCentered: PropTypes.bool,
-  isAnimated: PropTypes.bool
-};
-
-const COMPONENT_ID$i = 'modals.body';
-const StyledBody = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.2'
-}).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 => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$i, props));
-StyledBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$h = '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:", ";}"], getColor(foregroundColor, 600, props.theme), getColor(backgroundColor, 600, props.theme, 0.08), getColor(foregroundColor, 700, props.theme), focusStyles({
-    theme: props.theme,
-    hue: backgroundColor
-  }), getColor(backgroundColor, 600, props.theme, 0.2), getColor(foregroundColor, 800, props.theme));
-};
-const BASE_MULTIPLIERS$1 = {
-  top: 2.5,
-  side: 6.5,
-  size: 10
-};
-const StyledClose = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.2'
-}).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 => retrieveComponentStyles(COMPONENT_ID$h, props));
-StyledClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$g = 'modals.footer';
-const StyledFooter = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.2'
-}).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} ${getColor('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$g, props));
-StyledFooter.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$f = 'modals.footer_item';
-const StyledFooterItem = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.2'
-}).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$f, props));
-StyledFooterItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$e = 'modals.header';
-const StyledHeader = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.2'
-}).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, getColor('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 => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? getColor('dangerHue', 600, props.theme) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$e, props));
-StyledHeader.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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); }
-var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: 7.5,
-    cy: 8.5,
-    r: 7
-  }), /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    d: "M7.5 4.5V9"
-  }))), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
-    cx: 7.5,
-    cy: 12,
-    r: 1,
-    fill: "currentColor"
-  })));
-};
-
-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
-};
-
-const COMPONENT_ID$d = '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$1 = props => {
-  const {
-    theme
-  } = props;
-  const {
-    space,
-    shadows
-  } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = getColor('neutralHue', 800, theme, 0.35);
-  return shadows.lg(offsetY, blurRadius, color);
-};
-const sizeStyles$1 = 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$d,
-  'data-garden-version': '9.0.0-next.2'
-}).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 => props.theme.colors.background, 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 => retrieveComponentStyles(COMPONENT_ID$d, props));
-StyledModal.propTypes = {
-  isLarge: PropTypes.bool,
-  isAnimated: PropTypes.bool
-};
-StyledModal.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
-const StyledTooltipModalBackdrop = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.2'
-}).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$c, props));
-StyledTooltipModalBackdrop.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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
-};
-
-const COMPONENT_ID$b = 'modals.tooltip_modal';
-const StyledTooltipModal = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.2',
-  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$b, props));
-StyledTooltipModal.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$a = '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$a,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTooltipModalTitle",
-  componentId: "sc-11xjgjs-0"
-})(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => props.theme.colors.foreground, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledTooltipModalTitle.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
-const StyledTooltipModalBody = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
-}).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 => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledTooltipModalBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
-const StyledTooltipModalFooter = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.2'
-}).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$8, props));
-StyledTooltipModalFooter.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
-const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTooltipModalFooterItem",
-  componentId: "sc-1nahj6p-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledTooltipModalFooterItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
-const StyledTooltipModalClose = styled(StyledClose).attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.2'
-}).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$6, props));
-StyledTooltipModalClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = '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 = getColor('neutralHue', 800, theme, 0.35);
-  return shadows.lg(offsetY, blurRadius, color);
-};
-const StyledDrawer = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.2'
-}).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 => props.theme.colors.background, 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$5, props));
-StyledDrawer.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$4 = '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$4,
-  'data-garden-version': '9.0.0-next.2'
-}).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$4, props));
-StyledDrawerClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'modals.drawer_modal.header';
-const StyledDrawerHeader = styled(StyledHeader).attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
-}).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$3, props));
-StyledDrawerHeader.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'modals.drawer_modal.body';
-const StyledDrawerBody = styled(StyledBody).attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledDrawerBody",
-  componentId: "sc-13qufyn-0"
-})(["padding:", "px;", ";"], props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledDrawerBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
-const StyledDrawerFooter = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
-}).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} ${getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledDrawerFooter.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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.2'
-}).withConfig({
-  displayName: "StyledDrawerFooterItem",
-  componentId: "sc-m2yul4-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledDrawerFooterItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const ModalsContext = createContext(undefined);
-const useModalContext = () => {
-  const context = useContext(ModalsContext);
-  if (context === undefined) {
-    throw new Error('useModalContext must be used within a ModalsContext.Provider');
-  }
-  return context;
-};
-
-const isOverflowing = element => {
-  const doc = ownerDocument(element);
-  const win = ownerWindow(doc);
-  const isBody = element && element.tagName.toLowerCase() === 'body';
-  if (!isWindow(doc) && !isBody) {
-    return element.scrollHeight > element.clientHeight;
-  }
-  const style = win.getComputedStyle(doc.body);
-  const marginLeft = parseInt(style.getPropertyValue('margin-left'), 10);
-  const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
-  return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
-};
-const Modal = forwardRef((_ref, ref) => {
-  let {
-    backdropProps,
-    children,
-    onClose,
-    isLarge,
-    isCentered,
-    isAnimated,
-    id,
-    appendToNode,
-    focusOnMount,
-    restoreFocus,
-    ...modalProps
-  } = _ref;
-  const theme = useContext(ThemeContext);
-  const modalRef = useRef(null);
-  const environment = useDocument(theme);
-  const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
-  const [hasHeader, setHasHeader] = useState(false);
-  const {
-    getBackdropProps,
-    getModalProps,
-    getTitleProps,
-    getContentProps,
-    getCloseProps
-  } = useModal({
-    idPrefix: id,
-    onClose,
-    modalRef,
-    focusOnMount,
-    restoreFocus
-  });
-  useFocusVisible({
-    scope: modalRef,
-    relativeDocument: environment
-  });
-  useEffect(() => {
-    if (!environment) {
-      return undefined;
-    }
-    const htmlElement = environment.querySelector('html');
-    const bodyElement = environment.querySelector('body');
-    let previousHtmlOverflow;
-    let previousBodyPaddingRight;
-    if (bodyElement) {
-      if (isOverflowing(bodyElement)) {
-        const scrollbarSize = getScrollbarSize();
-        const bodyPaddingRight = parseInt(css$1(bodyElement, 'paddingRight') || '0', 10);
-        previousBodyPaddingRight = bodyElement.style.paddingRight;
-        bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize}px`;
-      }
-      if (htmlElement) {
-        previousHtmlOverflow = htmlElement.style.overflow;
-        htmlElement.style.overflow = 'hidden';
-      }
-      return () => {
-        if (htmlElement) {
-          htmlElement.style.overflow = previousHtmlOverflow;
-        }
-        bodyElement.style.paddingRight = previousBodyPaddingRight;
-      };
-    }
-    return undefined;
-  }, [environment]);
-  const rootNode = useMemo(() => {
-    if (appendToNode) {
-      return appendToNode;
-    }
-    if (environment) {
-      return environment.body;
-    }
-    return undefined;
-  }, [appendToNode, environment]);
-  const value = useMemo(() => ({
-    isLarge,
-    isCloseButtonPresent,
-    hasHeader,
-    setHasHeader,
-    getTitleProps,
-    getContentProps,
-    getCloseProps,
-    setIsCloseButtonPresent
-  }), [isLarge, hasHeader, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
-  const modalContainerProps = getModalProps({
-    'aria-describedby': undefined,
-    ...(hasHeader ? {} : {
-      'aria-labelledby': undefined
-    })
-  });
-  const attribute = hasHeader ? 'aria-labelledby' : 'aria-label';
-  const defaultValue = hasHeader ? modalContainerProps['aria-labelledby'] : 'Modal dialog';
-  const labelValue = hasHeader ? modalContainerProps['aria-labelledby'] : modalProps['aria-label'];
-  const ariaProps = {
-    [attribute]: useText(Modal, {
-      [attribute]: labelValue
-    }, attribute, defaultValue)
-  };
-  if (!rootNode) {
-    return null;
-  }
-  return createPortal( React__default.createElement(ModalsContext.Provider, {
-    value: value
-  }, React__default.createElement(StyledBackdrop, _extends$2({
-    isCentered: isCentered,
-    isAnimated: isAnimated
-  }, getBackdropProps(backdropProps)), React__default.createElement(StyledModal, _extends$2({
-    isCentered: isCentered,
-    isAnimated: isAnimated,
-    isLarge: isLarge
-  }, modalContainerProps, ariaProps, modalProps, {
-    ref: mergeRefs([ref, modalRef])
-  }), children))), rootNode);
-});
-Modal.displayName = 'Modal';
-Modal.propTypes = {
-  backdropProps: PropTypes.object,
-  isLarge: PropTypes.bool,
-  isAnimated: PropTypes.bool,
-  isCentered: PropTypes.bool,
-  focusOnMount: PropTypes.bool,
-  restoreFocus: PropTypes.bool,
-  onClose: PropTypes.func,
-  appendToNode: PropTypes.any
-};
-Modal.defaultProps = {
-  isAnimated: true,
-  isCentered: true
-};
-
-const Body$2 = forwardRef((props, ref) => {
-  const {
-    getContentProps
-  } = useModalContext();
-  return React__default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
-    ref: ref
-  }));
-});
-Body$2.displayName = '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); }
-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"
-  })));
-};
-
-const Close$2 = forwardRef((props, ref) => {
-  const {
-    getCloseProps,
-    setIsCloseButtonPresent
-  } = useModalContext();
-  useEffect(() => {
-    setIsCloseButtonPresent(true);
-    return () => setIsCloseButtonPresent(false);
-  });
-  const ariaLabel = useText(Close$2, props, 'aria-label', 'Close modal');
-  return React__default.createElement(StyledClose, _extends$2({}, getCloseProps({
-    ...props,
-    'aria-label': ariaLabel
-  }), {
-    ref: ref
-  }), React__default.createElement(SvgXStroke, null));
-});
-Close$2.displayName = 'Close';
-
-const Footer$2 = React__default.forwardRef((props, ref) => {
-  const {
-    isLarge
-  } = useModalContext();
-  return React__default.createElement(StyledFooter, _extends$2({
-    ref: ref,
-    isLarge: isLarge
-  }, props));
-});
-Footer$2.displayName = 'Footer';
-
-const FooterItem$2 = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, _extends$2({
-  ref: ref
-}, props)));
-FooterItem$2.displayName = 'FooterItem';
-
-const Header$1 = forwardRef((_ref, ref) => {
-  let {
-    children,
-    tag,
-    ...other
-  } = _ref;
-  const {
-    isCloseButtonPresent,
-    hasHeader,
-    setHasHeader,
-    getTitleProps
-  } = useModalContext();
-  useEffect(() => {
-    if (!hasHeader && setHasHeader) {
-      setHasHeader(true);
-    }
-    return () => {
-      if (hasHeader && setHasHeader) {
-        setHasHeader(false);
-      }
-    };
-  }, [hasHeader, setHasHeader]);
-  return React__default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
-    as: tag,
-    isCloseButtonPresent: isCloseButtonPresent,
-    ref: ref
-  }), other.isDanger && React__default.createElement(StyledDangerIcon, null), children);
-});
-Header$1.displayName = 'Header';
-Header$1.propTypes = {
-  isDanger: PropTypes.bool,
-  tag: PropTypes.any
-};
-Header$1.defaultProps = {
-  tag: 'div'
-};
-
-const TooltipModalContext = createContext(undefined);
-const useTooltipModalContext = () => {
-  const context = useContext(TooltipModalContext);
-  if (context === undefined) {
-    throw new Error('Element must be used within a TooltipModal component.');
-  }
-  return context;
-};
-
-const TitleComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    tag,
-    ...other
-  } = _ref;
-  const {
-    getTitleProps,
-    hasTitle,
-    setHasTitle
-  } = useTooltipModalContext();
-  useEffect(() => {
-    if (!hasTitle && setHasTitle) {
-      setHasTitle(true);
-    }
-    return () => {
-      if (hasTitle && setHasTitle) {
-        setHasTitle(false);
-      }
-    };
-  }, [hasTitle, setHasTitle]);
-  return React__default.createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(other), {
-    as: tag,
-    ref: ref
-  }), children);
-});
-TitleComponent.displayName = 'TooltipModal.Title';
-TitleComponent.propTypes = {
-  tag: PropTypes.any
-};
-TitleComponent.defaultProps = {
-  tag: 'div'
-};
-const Title = TitleComponent;
-
-const BodyComponent$1 = forwardRef((props, ref) => {
-  const {
-    getContentProps
-  } = useTooltipModalContext();
-  return React__default.createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
-    ref: ref
-  }));
-});
-BodyComponent$1.displayName = 'TooltipModal.Body';
-const Body$1 = BodyComponent$1;
-
-const CloseComponent$1 = forwardRef((props, ref) => {
-  const {
-    getCloseProps
-  } = useTooltipModalContext();
-  const ariaLabel = useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
-  return React__default.createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps({
-    ...props,
-    'aria-label': ariaLabel
-  }), {
-    ref: ref
-  }), React__default.createElement(SvgXStroke, null));
-});
-CloseComponent$1.displayName = 'TooltipModal.Close';
-const Close$1 = CloseComponent$1;
-
-const FooterComponent$1 = forwardRef((props, ref) => React__default.createElement(StyledTooltipModalFooter, _extends$2({
-  ref: ref
-}, props)));
-FooterComponent$1.displayName = 'TooltipModal.Footer';
-const Footer$1 = FooterComponent$1;
-
-const FooterItemComponent$1 = forwardRef((props, ref) => React__default.createElement(StyledTooltipModalFooterItem, _extends$2({
-  ref: ref
-}, props)));
-FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
-const FooterItem$1 = FooterItemComponent$1;
-
-const PLACEMENT_DEFAULT = 'top';
-const TooltipModalComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    appendToNode,
-    referenceElement,
-    placement: _placement,
-    onClose,
-    hasArrow,
-    isAnimated,
-    zIndex,
-    backdropProps,
-    focusOnMount,
-    restoreFocus,
-    id,
-    ...props
-  } = _ref;
-  const theme = useContext(ThemeContext) || DEFAULT_THEME;
-  const previousReferenceElementRef = useRef();
-  const modalRef = useRef(null);
-  const transitionRef = useRef(null);
-  const [floatingElement, setFloatingElement] = useState();
-  const [hasTitle, setHasTitle] = useState(false);
-  const {
-    getTitleProps,
-    getCloseProps,
-    getContentProps,
-    getBackdropProps,
-    getModalProps
-  } = useModal({
-    idPrefix: id,
-    onClose,
-    modalRef,
-    focusOnMount,
-    restoreFocus: false
-  });
-  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
-  const {
-    refs,
-    placement,
-    update,
-    floatingStyles: {
-      transform
-    }
-  } = useFloating({
-    elements: {
-      reference: referenceElement,
-      floating: floatingElement
-    },
-    placement: floatingPlacement,
-    middleware: [offset(theme.space.base * 3), _placement === 'auto' ? autoPlacement() : undefined]
-  });
-  useEffect(() => {
-    let cleanup;
-    if (referenceElement && floatingElement && refs.reference.current && refs.floating.current) {
-      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
-        elementResize: typeof ResizeObserver === 'function'
-      });
-    }
-    return () => cleanup && cleanup();
-  }, [referenceElement, floatingElement, refs.reference, refs.floating, update]);
-  useEffect(() => {
-    if (!referenceElement && previousReferenceElementRef.current && restoreFocus) {
-      previousReferenceElementRef.current.focus();
-    }
-    previousReferenceElementRef.current = referenceElement;
-  }, [referenceElement, restoreFocus]);
-  const modalProps = getModalProps({
-    'aria-describedby': undefined,
-    ...(hasTitle ? {} : {
-      'aria-labelledby': undefined
-    })
-  });
-  const attribute = hasTitle ? 'aria-labelledby' : 'aria-label';
-  const defaultValue = hasTitle ? modalProps['aria-labelledby'] : 'Modal dialog';
-  const labelValue = hasTitle ? modalProps['aria-labelledby'] : props['aria-label'];
-  const ariaProps = {
-    [attribute]: useText(TooltipModalComponent, {
-      [attribute]: labelValue
-    }, attribute, defaultValue)
-  };
-  const value = {
-    hasTitle,
-    setHasTitle,
-    getTitleProps,
-    getContentProps,
-    getCloseProps
-  };
-  const Node = React__default.createElement(CSSTransition, {
-    unmountOnExit: true,
-    timeout: isAnimated ? 200 : 0,
-    in: Boolean(referenceElement),
-    classNames: isAnimated ? 'garden-tooltip-modal-transition' : '',
-    nodeRef: transitionRef
-  }, transitionState => {
-    return React__default.createElement(TooltipModalContext.Provider, {
-      value: value
-    }, React__default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
-      ref: transitionRef
-    }), React__default.createElement(StyledTooltipWrapper, {
-      ref: setFloatingElement,
-      style: {
-        transform
-      },
-      placement: placement,
-      zIndex: zIndex,
-      isAnimated: isAnimated
-    }, React__default.createElement(StyledTooltipModal, _extends$2({
-      transitionState: transitionState,
-      placement: placement,
-      hasArrow: hasArrow,
-      isAnimated: isAnimated
-    }, modalProps, ariaProps, props, {
-      ref: mergeRefs([modalRef, ref])
-    })))));
-  });
-  return appendToNode ? createPortal(Node, appendToNode) : Node;
-});
-TooltipModalComponent.displayName = 'TooltipModal';
-TooltipModalComponent.defaultProps = {
-  placement: 'auto',
-  hasArrow: true,
-  focusOnMount: true,
-  restoreFocus: true
-};
-TooltipModalComponent.propTypes = {
-  appendToNode: PropTypes.any,
-  referenceElement: PropTypes.any,
-  placement: PropTypes.any,
-  isAnimated: PropTypes.bool,
-  hasArrow: PropTypes.bool,
-  zIndex: PropTypes.number,
-  onClose: PropTypes.func,
-  backdropProps: PropTypes.any,
-  focusOnMount: PropTypes.bool,
-  restoreFocus: PropTypes.bool
-};
-const TooltipModal = TooltipModalComponent;
-TooltipModal.Body = Body$1;
-TooltipModal.Close = Close$1;
-TooltipModal.Footer = Footer$1;
-TooltipModal.FooterItem = FooterItem$1;
-TooltipModal.Title = Title;
-
-const HeaderComponent = forwardRef((_ref, ref) => {
-  let {
-    tag,
-    ...other
-  } = _ref;
-  const {
-    isCloseButtonPresent,
-    hasHeader,
-    setHasHeader,
-    getTitleProps
-  } = useModalContext();
-  useEffect(() => {
-    if (!hasHeader && setHasHeader) {
-      setHasHeader(true);
-    }
-    return () => {
-      if (hasHeader && setHasHeader) {
-        setHasHeader(false);
-      }
-    };
-  }, [hasHeader, setHasHeader]);
-  return React__default.createElement(StyledDrawerHeader, _extends$2({}, getTitleProps(other), {
-    as: tag,
-    isCloseButtonPresent: isCloseButtonPresent,
-    ref: ref
-  }));
-});
-HeaderComponent.displayName = 'Drawer.Header';
-HeaderComponent.propTypes = {
-  tag: PropTypes.any
-};
-HeaderComponent.defaultProps = {
-  tag: 'div'
-};
-const Header = HeaderComponent;
-
-const BodyComponent = forwardRef((props, ref) => {
-  const {
-    getContentProps
-  } = useModalContext();
-  return React__default.createElement(StyledDrawerBody, _extends$2({}, getContentProps(props), {
-    ref: ref
-  }), props.children);
-});
-BodyComponent.displayName = 'Drawer.Body';
-const Body = BodyComponent;
-
-const CloseComponent = forwardRef((props, ref) => {
-  const {
-    getCloseProps,
-    setIsCloseButtonPresent
-  } = useModalContext();
-  useEffect(() => {
-    setIsCloseButtonPresent(true);
-    return () => setIsCloseButtonPresent(false);
-  });
-  const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__default.createElement(StyledDrawerClose, _extends$2({}, getCloseProps({
-    ...props,
-    'aria-label': ariaLabel
-  }), {
-    ref: ref
-  }), React__default.createElement(SvgXStroke, null));
-});
-CloseComponent.displayName = 'Drawer.Close';
-const Close = CloseComponent;
-
-const FooterComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerFooter, _extends$2({
-  ref: ref
-}, props)));
-FooterComponent.displayName = 'Drawer.Footer';
-const Footer = FooterComponent;
-
-const FooterItemComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerFooterItem, _extends$2({
-  ref: ref
-}, props)));
-FooterItemComponent.displayName = 'Drawer.FooterItem';
-const FooterItem = FooterItemComponent;
-
-const DrawerComponent = forwardRef((_ref, ref) => {
-  let {
-    id,
-    isOpen,
-    onClose,
-    backdropProps,
-    appendToNode,
-    focusOnMount,
-    restoreFocus,
-    ...props
-  } = _ref;
-  const modalRef = useRef(null);
-  const transitionRef = useRef(null);
-  const triggerRef = useRef(null);
-  const theme = useContext(ThemeContext);
-  const environment = useDocument(theme);
-  const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
-  const [hasHeader, setHasHeader] = useState(false);
-  useFocusVisible({
-    scope: modalRef,
-    relativeDocument: modalRef.current
-  });
-  const {
-    getTitleProps,
-    getCloseProps,
-    getContentProps,
-    getBackdropProps,
-    getModalProps
-  } = useModal({
-    idPrefix: id,
-    modalRef,
-    focusOnMount: false ,
-    restoreFocus: false ,
-    environment,
-    onClose
-  });
-  useEffect(() => {
-    if (environment) {
-      if (isOpen && modalRef.current) {
-        if (restoreFocus) {
-          triggerRef.current = activeElement(environment);
-        }
-        if (focusOnMount) {
-          modalRef.current.focus();
-        }
-      }
-      if (!isOpen && triggerRef.current) {
-        triggerRef.current.focus();
-      }
-    }
-    return () => {
-      if (!(restoreFocus && isOpen)) {
-        triggerRef.current = null;
-      }
-    };
-  }, [environment, restoreFocus, focusOnMount, isOpen]);
-  useEffect(() => {
-    if (!environment) {
-      return undefined;
-    }
-    const htmlElement = environment.querySelector('html');
-    let previousHtmlOverflow;
-    if (htmlElement && isOpen) {
-      previousHtmlOverflow = htmlElement.style.overflow;
-      htmlElement.style.overflow = 'hidden';
-    }
-    return () => {
-      if (htmlElement && isOpen) {
-        htmlElement.style.overflow = previousHtmlOverflow;
-      }
-    };
-  }, [environment, isOpen]);
-  const rootNode = useMemo(() => {
-    if (appendToNode) {
-      return appendToNode;
-    }
-    if (environment) {
-      return environment.body;
-    }
-    return undefined;
-  }, [appendToNode, environment]);
-  const value = useMemo(() => ({
-    isCloseButtonPresent,
-    hasHeader,
-    setHasHeader,
-    getTitleProps,
-    getContentProps,
-    getCloseProps,
-    setIsCloseButtonPresent
-  }), [isCloseButtonPresent, hasHeader, getTitleProps, getContentProps, getCloseProps]);
-  const modalProps = getModalProps({
-    'aria-describedby': undefined,
-    ...(hasHeader ? {} : {
-      'aria-labelledby': undefined
-    })
-  });
-  const attribute = hasHeader ? 'aria-labelledby' : 'aria-label';
-  const defaultValue = hasHeader ? modalProps['aria-labelledby'] : 'Modal dialog';
-  const labelValue = hasHeader ? modalProps['aria-labelledby'] : props['aria-label'];
-  const ariaProps = {
-    [attribute]: useText(DrawerComponent, {
-      [attribute]: labelValue
-    }, attribute, defaultValue)
-  };
-  if (!rootNode) {
-    return null;
-  }
-  return ReactDOM.createPortal( React__default.createElement(ModalsContext.Provider, {
-    value: value
-  }, React__default.createElement(CSSTransition, {
-    in: isOpen,
-    timeout: 250,
-    unmountOnExit: true,
-    classNames: "garden-drawer-transition",
-    nodeRef: transitionRef
-  }, React__default.createElement(StyledBackdrop, _extends$2({
-    isAnimated: true
-  }, getBackdropProps(backdropProps)), React__default.createElement(StyledDrawer, _extends$2({}, modalProps, ariaProps, props, {
-    ref: mergeRefs([ref, modalRef, transitionRef])
-  }))))), rootNode);
-});
-DrawerComponent.displayName = 'Drawer';
-DrawerComponent.propTypes = {
-  backdropProps: PropTypes.object,
-  focusOnMount: PropTypes.bool,
-  restoreFocus: PropTypes.bool,
-  onClose: PropTypes.func,
-  appendToNode: PropTypes.any,
-  isOpen: PropTypes.bool
-};
-DrawerComponent.defaultProps = {
-  focusOnMount: true ,
-  restoreFocus: true
-};
-const Drawer = DrawerComponent;
-Drawer.Body = Body;
-Drawer.Close = Close;
-Drawer.Footer = Footer;
-Drawer.FooterItem = FooterItem;
-Drawer.Header = Header;
-
-const PLACEMENT = ['auto', ...PLACEMENT$1];
-
-export { Body$2 as Body, Close$2 as Close, Drawer, Footer$2 as Footer, FooterItem$2 as FooterItem, Header$1 as Header, Modal, PLACEMENT, TooltipModal };