@zendeskgarden/react-modals 9.0.0-next.0 → 9.0.0-next.10

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -13,15 +12,14 @@ var styled = require('styled-components');
 var PropTypes = require('prop-types');
 var reactTheming = require('@zendeskgarden/react-theming');
 var containerModal = require('@zendeskgarden/container-modal');
-var containerFocusvisible = require('@zendeskgarden/container-focusvisible');
 var reactMergeRefs = require('react-merge-refs');
 var isWindow = require('dom-helpers/isWindow');
 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 reactPopper = require('react-popper');
 var reactTransitionGroup = require('react-transition-group');
+var reactDom = require('@floating-ui/react-dom');
 var activeElement = require('dom-helpers/activeElement');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -55,21 +53,6 @@ var css__default = /*#__PURE__*/_interopDefault(css);
 var getScrollbarSize__default = /*#__PURE__*/_interopDefault(getScrollbarSize);
 var activeElement__default = /*#__PURE__*/_interopDefault(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 = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 const animationStyles$1 = props => {
@@ -80,11 +63,11 @@ const animationStyles$1 = props => {
 };
 const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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.getColor('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));
+})(["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
 };
@@ -96,11 +79,11 @@ 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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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 => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
+})(["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
 };
@@ -109,10 +92,12 @@ 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.getColor(foregroundColor, 600, props.theme), reactTheming.getColor(backgroundColor, 600, props.theme, 0.08), reactTheming.getColor(foregroundColor, 700, props.theme), reactTheming.focusStyles({
+  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,
-    hue: backgroundColor
-  }), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, 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,
@@ -121,7 +106,7 @@ const BASE_MULTIPLIERS$1 = {
 };
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -133,11 +118,11 @@ StyledClose.defaultProps = {
 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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["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
 };
@@ -145,7 +130,7 @@ StyledFooter.defaultProps = {
 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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -157,11 +142,11 @@ StyledFooterItem.defaultProps = {
 const COMPONENT_ID$e = 'modals.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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.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 => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? reactTheming.getColor('dangerHue', 600, props.theme) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+})(["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
 };
@@ -220,7 +205,7 @@ const boxShadow$1 = props => {
   } = theme;
   const offsetY = `${space.base * 5}px`;
   const blurRadius = `${space.base * 7}px`;
-  const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
+  const color = reactTheming.getColorV8('neutralHue', 800, theme, 0.35);
   return shadows.lg(offsetY, blurRadius, color);
 };
 const sizeStyles$1 = props => {
@@ -228,11 +213,11 @@ const sizeStyles$1 = props => {
 };
 const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["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));
 StyledModal.propTypes = {
   isLarge: PropTypes__default.default.bool,
   isAnimated: PropTypes__default.default.bool
@@ -244,7 +229,7 @@ StyledModal.defaultProps = {
 const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -253,70 +238,14 @@ StyledTooltipModalBackdrop.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function getPopperPlacement(gardenPlacement) {
-  const gardenToPopperMapping = {
-    auto: 'auto',
-    top: 'top',
-    'top-start': 'top-start',
-    'top-end': 'top-end',
-    bottom: 'bottom',
-    'bottom-start': 'bottom-start',
-    'bottom-end': 'bottom-end',
-    end: 'right',
-    'end-top': 'right-start',
-    'end-bottom': 'right-end',
-    start: 'left',
-    'start-top': 'left-start',
-    'start-bottom': 'left-end'
-  };
-  return gardenToPopperMapping[gardenPlacement];
-}
-function getRtlPopperPlacement(gardenPlacement) {
-  const rtlPlacementMappings = {
-    left: 'right',
-    'left-start': 'right-start',
-    'left-end': 'right-end',
-    'top-start': 'top-end',
-    'top-end': 'top-start',
-    right: 'left',
-    'right-start': 'left-start',
-    'right-end': 'left-end',
-    'bottom-start': 'bottom-end',
-    'bottom-end': 'bottom-start'
-  };
-  const popperPlacement = getPopperPlacement(gardenPlacement);
-  return rtlPlacementMappings[popperPlacement] || popperPlacement;
-}
-function getArrowPosition(popperPlacement) {
-  const arrowPositionMappings = {
-    top: 'bottom',
-    'top-start': 'bottom-left',
-    'top-end': 'bottom-right',
-    right: 'left',
-    'right-start': 'left-top',
-    'right-end': 'left-bottom',
-    bottom: 'top',
-    'bottom-start': 'top-left',
-    'bottom-end': 'top-right',
-    left: 'right',
-    'left-start': 'right-top',
-    'left-end': 'right-bottom'
-  };
-  return arrowPositionMappings[popperPlacement] || 'top';
-}
-function getMenuPosition(popperPlacement) {
-  return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
-}
-
 const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipWrapper",
   componentId: "sc-1xk05kf-0"
-})(["", ";"], props => reactTheming.menuStyles(getMenuPosition(props.placement), {
+})(["top:0;left:0;", ";"], props => reactTheming.menuStyles(reactTheming.getMenuPosition(props.placement), {
   theme: props.theme,
   hidden: false,
-  margin: '0',
   zIndex: props.zIndex,
   animationModifier: '.is-animated'
 }));
@@ -327,13 +256,13 @@ StyledTooltipWrapper.defaultProps = {
 const COMPONENT_ID$b = 'modals.tooltip_modal';
 const StyledTooltipModal = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.0',
+  'data-garden-version': '9.0.0-next.10',
   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 = reactTheming.arrowStyles(getArrowPosition(props.placement), {
+  const computedArrowStyles = reactTheming.arrowStyles(reactTheming.getArrowPosition(props.theme, props.placement), {
     size: `${props.theme.space.base * 2}px`,
     inset: '1px',
     animationModifier: '.is-animated'
@@ -356,11 +285,11 @@ const sizeStyles = props => `
 `;
 const StyledTooltipModalTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
+})(["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
 };
@@ -368,11 +297,11 @@ StyledTooltipModalTitle.defaultProps = {
 const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 const StyledTooltipModalBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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 => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["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
 };
@@ -380,7 +309,7 @@ StyledTooltipModalBody.defaultProps = {
 const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 const StyledTooltipModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -392,7 +321,7 @@ StyledTooltipModalFooter.defaultProps = {
 const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -404,7 +333,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -425,17 +354,17 @@ const boxShadow = props => {
   } = theme;
   const offsetY = `${space.base * 5}px`;
   const blurRadius = `${space.base * 7}px`;
-  const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
+  const color = reactTheming.getColorV8('neutralHue', 800, theme, 0.35);
   return shadows.lg(offsetY, blurRadius, color);
 };
-const StyledDrawerModal = styled__default.default.div.attrs({
+const StyledDrawer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
-  displayName: "StyledDrawerModal",
-  componentId: "sc-i1sake-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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledDrawerModal.defaultProps = {
+  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
 };
 
@@ -445,62 +374,62 @@ const BASE_MULTIPLIERS = {
   side: 2,
   size: BASE_MULTIPLIERS$1.size
 };
-const StyledDrawerModalClose = styled__default.default(StyledClose).attrs({
+const StyledDrawerClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
-  displayName: "StyledDrawerModalClose",
-  componentId: "sc-hrnaom-0"
+  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));
-StyledDrawerModalClose.defaultProps = {
+StyledDrawerClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
-const StyledDrawerModalHeader = styled__default.default(StyledHeader).attrs({
+const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
-  displayName: "StyledDrawerModalHeader",
-  componentId: "sc-1u04rqw-0"
+  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));
-StyledDrawerModalHeader.defaultProps = {
+StyledDrawerHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
-const StyledDrawerModalBody = styled__default.default(StyledBody).attrs({
+const StyledDrawerBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
-  displayName: "StyledDrawerModalBody",
-  componentId: "sc-yafe2y-0"
+  displayName: "StyledDrawerBody",
+  componentId: "sc-13qufyn-0"
 })(["padding:", "px;", ";"], props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledDrawerModalBody.defaultProps = {
+StyledDrawerBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
-const StyledDrawerModalFooter = styled__default.default.div.attrs({
+const StyledDrawerFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
-  displayName: "StyledDrawerModalFooter",
-  componentId: "sc-17if4ka-0"
-})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledDrawerModalFooter.defaultProps = {
+  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
 };
 
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
-const StyledDrawerModalFooterItem = styled__default.default(StyledFooterItem).attrs({
+const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
-  displayName: "StyledDrawerModalFooterItem",
-  componentId: "sc-1vbl885-0"
+  displayName: "StyledDrawerFooterItem",
+  componentId: "sc-m2yul4-0"
 })(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledDrawerModalFooterItem.defaultProps = {
+StyledDrawerFooterItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -513,6 +442,105 @@ const useModalContext = () => {
   return context;
 };
 
+const Body$2 = React.forwardRef((props, ref) => {
+  const {
+    getContentProps
+  } = useModalContext();
+  return React__namespace.default.createElement(StyledBody, Object.assign({}, 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__namespace.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__namespace.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 13L13 3m0 10L3 3"
+  })));
+};
+
+const Close$2 = React.forwardRef((props, ref) => {
+  const {
+    getCloseProps,
+    setIsCloseButtonPresent
+  } = useModalContext();
+  React.useEffect(() => {
+    setIsCloseButtonPresent(true);
+    return () => setIsCloseButtonPresent(false);
+  });
+  const ariaLabel = reactTheming.useText(Close$2, props, 'aria-label', 'Close modal');
+  return React__namespace.default.createElement(StyledClose, Object.assign({}, getCloseProps({
+    ...props,
+    'aria-label': ariaLabel
+  }), {
+    ref: ref
+  }), React__namespace.default.createElement(SvgXStroke, null));
+});
+Close$2.displayName = 'Close';
+
+const Footer$2 = React__namespace.default.forwardRef((props, ref) => {
+  const {
+    isLarge
+  } = useModalContext();
+  return React__namespace.default.createElement(StyledFooter, Object.assign({
+    ref: ref,
+    isLarge: isLarge
+  }, props));
+});
+Footer$2.displayName = 'Footer';
+
+const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, Object.assign({
+  ref: ref
+}, props)));
+FooterItem$2.displayName = 'FooterItem';
+
+const Header$1 = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    tag,
+    ...other
+  } = _ref;
+  const {
+    isCloseButtonPresent,
+    hasHeader,
+    setHasHeader,
+    getTitleProps
+  } = useModalContext();
+  React.useEffect(() => {
+    if (!hasHeader && setHasHeader) {
+      setHasHeader(true);
+    }
+    return () => {
+      if (hasHeader && setHasHeader) {
+        setHasHeader(false);
+      }
+    };
+  }, [hasHeader, setHasHeader]);
+  return React__namespace.default.createElement(StyledHeader, Object.assign({}, getTitleProps(other), {
+    as: tag,
+    isCloseButtonPresent: isCloseButtonPresent,
+    ref: ref
+  }), other.isDanger && React__namespace.default.createElement(StyledDangerIcon, null), children);
+});
+Header$1.displayName = 'Header';
+Header$1.propTypes = {
+  isDanger: PropTypes__default.default.bool,
+  tag: PropTypes__default.default.any
+};
+Header$1.defaultProps = {
+  tag: 'div'
+};
+
 const isOverflowing = element => {
   const doc = ownerDocument__default.default(element);
   const win = ownerWindow__default.default(doc);
@@ -525,7 +553,7 @@ const isOverflowing = element => {
   const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
   return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
 };
-const Modal = React.forwardRef((_ref, ref) => {
+const ModalComponent = React.forwardRef((_ref, ref) => {
   let {
     backdropProps,
     children,
@@ -557,10 +585,6 @@ const Modal = React.forwardRef((_ref, ref) => {
     focusOnMount,
     restoreFocus
   });
-  containerFocusvisible.useFocusVisible({
-    scope: modalRef,
-    relativeDocument: environment
-  });
   React.useEffect(() => {
     if (!environment) {
       return undefined;
@@ -618,7 +642,7 @@ const Modal = React.forwardRef((_ref, ref) => {
   const defaultValue = hasHeader ? modalContainerProps['aria-labelledby'] : 'Modal dialog';
   const labelValue = hasHeader ? modalContainerProps['aria-labelledby'] : modalProps['aria-label'];
   const ariaProps = {
-    [attribute]: reactTheming.useText(Modal, {
+    [attribute]: reactTheming.useText(ModalComponent, {
       [attribute]: labelValue
     }, attribute, defaultValue)
   };
@@ -627,10 +651,10 @@ const Modal = React.forwardRef((_ref, ref) => {
   }
   return ReactDOM.createPortal( React__namespace.default.createElement(ModalsContext.Provider, {
     value: value
-  }, React__namespace.default.createElement(StyledBackdrop, _extends$2({
+  }, React__namespace.default.createElement(StyledBackdrop, Object.assign({
     isCentered: isCentered,
     isAnimated: isAnimated
-  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledModal, _extends$2({
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledModal, Object.assign({
     isCentered: isCentered,
     isAnimated: isAnimated,
     isLarge: isLarge
@@ -638,8 +662,8 @@ const Modal = React.forwardRef((_ref, ref) => {
     ref: reactMergeRefs.mergeRefs([ref, modalRef])
   }), children))), rootNode);
 });
-Modal.displayName = 'Modal';
-Modal.propTypes = {
+ModalComponent.displayName = 'Modal';
+ModalComponent.propTypes = {
   backdropProps: PropTypes__default.default.object,
   isLarge: PropTypes__default.default.bool,
   isAnimated: PropTypes__default.default.bool,
@@ -649,109 +673,16 @@ Modal.propTypes = {
   onClose: PropTypes__default.default.func,
   appendToNode: PropTypes__default.default.any
 };
-Modal.defaultProps = {
+ModalComponent.defaultProps = {
   isAnimated: true,
   isCentered: true
 };
-
-const Body$2 = React.forwardRef((props, ref) => {
-  const {
-    getContentProps
-  } = useModalContext();
-  return React__namespace.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__namespace.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__namespace.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3 13L13 3m0 10L3 3"
-  })));
-};
-
-const Close$2 = React.forwardRef((props, ref) => {
-  const {
-    getCloseProps,
-    setIsCloseButtonPresent
-  } = useModalContext();
-  React.useEffect(() => {
-    setIsCloseButtonPresent(true);
-    return () => setIsCloseButtonPresent(false);
-  });
-  const ariaLabel = reactTheming.useText(Close$2, props, 'aria-label', 'Close modal');
-  return React__namespace.default.createElement(StyledClose, _extends$2({}, getCloseProps({
-    ...props,
-    'aria-label': ariaLabel
-  }), {
-    ref: ref
-  }), React__namespace.default.createElement(SvgXStroke, null));
-});
-Close$2.displayName = 'Close';
-
-const Footer$2 = React__namespace.default.forwardRef((props, ref) => {
-  const {
-    isLarge
-  } = useModalContext();
-  return React__namespace.default.createElement(StyledFooter, _extends$2({
-    ref: ref,
-    isLarge: isLarge
-  }, props));
-});
-Footer$2.displayName = 'Footer';
-
-const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, _extends$2({
-  ref: ref
-}, props)));
-FooterItem$2.displayName = 'FooterItem';
-
-const Header$1 = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    tag,
-    ...other
-  } = _ref;
-  const {
-    isCloseButtonPresent,
-    hasHeader,
-    setHasHeader,
-    getTitleProps
-  } = useModalContext();
-  React.useEffect(() => {
-    if (!hasHeader && setHasHeader) {
-      setHasHeader(true);
-    }
-    return () => {
-      if (hasHeader && setHasHeader) {
-        setHasHeader(false);
-      }
-    };
-  }, [hasHeader, setHasHeader]);
-  return React__namespace.default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
-    as: tag,
-    isCloseButtonPresent: isCloseButtonPresent,
-    ref: ref
-  }), other.isDanger && React__namespace.default.createElement(StyledDangerIcon, null), children);
-});
-Header$1.displayName = 'Header';
-Header$1.propTypes = {
-  isDanger: PropTypes__default.default.bool,
-  tag: PropTypes__default.default.any
-};
-Header$1.defaultProps = {
-  tag: 'div'
-};
+const Modal = ModalComponent;
+Modal.Body = Body$2;
+Modal.Close = Close$2;
+Modal.Footer = Footer$2;
+Modal.FooterItem = FooterItem$2;
+Modal.Header = Header$1;
 
 const TooltipModalContext = React.createContext(undefined);
 const useTooltipModalContext = () => {
@@ -783,7 +714,7 @@ const TitleComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasTitle, setHasTitle]);
-  return React__namespace.default.createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledTooltipModalTitle, Object.assign({}, getTitleProps(other), {
     as: tag,
     ref: ref
   }), children);
@@ -801,7 +732,7 @@ const BodyComponent$1 = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useTooltipModalContext();
-  return React__namespace.default.createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledTooltipModalBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }));
 });
@@ -813,7 +744,7 @@ const CloseComponent$1 = React.forwardRef((props, ref) => {
     getCloseProps
   } = useTooltipModalContext();
   const ariaLabel = reactTheming.useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
-  return React__namespace.default.createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledTooltipModalClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
@@ -823,24 +754,24 @@ const CloseComponent$1 = React.forwardRef((props, ref) => {
 CloseComponent$1.displayName = 'TooltipModal.Close';
 const Close$1 = CloseComponent$1;
 
-const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooter, _extends$2({
+const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooter, Object.assign({
   ref: ref
 }, props)));
 FooterComponent$1.displayName = 'TooltipModal.Footer';
 const Footer$1 = FooterComponent$1;
 
-const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooterItem, _extends$2({
+const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooterItem, Object.assign({
   ref: ref
 }, props)));
 FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
 const FooterItem$1 = FooterItemComponent$1;
 
+const PLACEMENT_DEFAULT = 'top';
 const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     appendToNode,
     referenceElement,
-    popperModifiers,
-    placement,
+    placement: _placement,
     onClose,
     hasArrow,
     isAnimated,
@@ -851,11 +782,11 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
     id,
     ...props
   } = _ref;
-  const theme = React.useContext(styled.ThemeContext);
+  const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
   const previousReferenceElementRef = React.useRef();
   const modalRef = React.useRef(null);
   const transitionRef = React.useRef(null);
-  const [popperElement, setPopperElement] = React.useState();
+  const [floatingElement, setFloatingElement] = React.useState();
   const [hasTitle, setHasTitle] = React.useState(false);
   const {
     getTitleProps,
@@ -870,27 +801,41 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
     focusOnMount,
     restoreFocus: false
   });
+  const [floatingPlacement] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
+    }
+  } = reactDom.useFloating({
+    platform: {
+      ...reactDom.platform,
+      isRTL: () => theme.rtl
+    },
+    elements: {
+      reference: referenceElement,
+      floating: floatingElement
+    },
+    placement: floatingPlacement,
+    middleware: [reactDom.offset(theme.space.base * 3), _placement === 'auto' ? reactDom.autoPlacement() : undefined]
+  });
+  React.useEffect(() => {
+    let cleanup;
+    if (referenceElement && floatingElement && refs.reference.current && refs.floating.current) {
+      cleanup = reactDom.autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [referenceElement, floatingElement, refs.reference, refs.floating, update]);
   React.useEffect(() => {
     if (!referenceElement && previousReferenceElementRef.current && restoreFocus) {
       previousReferenceElementRef.current.focus();
     }
     previousReferenceElementRef.current = referenceElement;
   }, [referenceElement, restoreFocus]);
-  const popperPlacement = React.useMemo(() => theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement), [placement, theme.rtl]);
-  const {
-    styles,
-    attributes,
-    state
-  } = reactPopper.usePopper(referenceElement, popperElement, {
-    placement: popperPlacement,
-    modifiers: [{
-      name: 'offset',
-      options: {
-        offset: [0, theme.space.base * 3]
-      }
-    },
-    ...(popperModifiers || [])]
-  });
   const modalProps = getModalProps({
     'aria-describedby': undefined,
     ...(hasTitle ? {} : {
@@ -921,17 +866,19 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
   }, transitionState => {
     return React__namespace.default.createElement(TooltipModalContext.Provider, {
       value: value
-    }, React__namespace.default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
+    }, React__namespace.default.createElement(StyledTooltipModalBackdrop, Object.assign({}, getBackdropProps(), backdropProps, {
       ref: transitionRef
-    }), React__namespace.default.createElement(StyledTooltipWrapper, _extends$2({
-      ref: setPopperElement,
-      style: styles.popper,
-      placement: state ? state.placement : undefined,
+    }), React__namespace.default.createElement(StyledTooltipWrapper, {
+      ref: setFloatingElement,
+      style: {
+        transform
+      },
+      placement: placement,
       zIndex: zIndex,
       isAnimated: isAnimated
-    }, attributes.popper), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
+    }, React__namespace.default.createElement(StyledTooltipModal, Object.assign({
       transitionState: transitionState,
-      placement: state ? state.placement : 'top',
+      placement: placement,
       hasArrow: hasArrow,
       isAnimated: isAnimated
     }, modalProps, ariaProps, props, {
@@ -950,7 +897,6 @@ TooltipModalComponent.defaultProps = {
 TooltipModalComponent.propTypes = {
   appendToNode: PropTypes__default.default.any,
   referenceElement: PropTypes__default.default.any,
-  popperModifiers: PropTypes__default.default.any,
   placement: PropTypes__default.default.any,
   isAnimated: PropTypes__default.default.bool,
   hasArrow: PropTypes__default.default.bool,
@@ -988,13 +934,13 @@ const HeaderComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasHeader, setHasHeader]);
-  return React__namespace.default.createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledDrawerHeader, Object.assign({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
   }));
 });
-HeaderComponent.displayName = 'DrawerModal.Header';
+HeaderComponent.displayName = 'Drawer.Header';
 HeaderComponent.propTypes = {
   tag: PropTypes__default.default.any
 };
@@ -1007,11 +953,11 @@ const BodyComponent = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__namespace.default.createElement(StyledDrawerModalBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledDrawerBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }), props.children);
 });
-BodyComponent.displayName = 'DrawerModal.Body';
+BodyComponent.displayName = 'Drawer.Body';
 const Body = BodyComponent;
 
 const CloseComponent = React.forwardRef((props, ref) => {
@@ -1024,29 +970,29 @@ const CloseComponent = React.forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__namespace.default.createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledDrawerClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
     ref: ref
   }), React__namespace.default.createElement(SvgXStroke, null));
 });
-CloseComponent.displayName = 'DrawerModal.Close';
+CloseComponent.displayName = 'Drawer.Close';
 const Close = CloseComponent;
 
-const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooter, _extends$2({
+const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooter, Object.assign({
   ref: ref
 }, props)));
-FooterComponent.displayName = 'DrawerModal.Footer';
+FooterComponent.displayName = 'Drawer.Footer';
 const Footer = FooterComponent;
 
-const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooterItem, _extends$2({
+const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooterItem, Object.assign({
   ref: ref
 }, props)));
-FooterItemComponent.displayName = 'DrawerModal.FooterItem';
+FooterItemComponent.displayName = 'Drawer.FooterItem';
 const FooterItem = FooterItemComponent;
 
-const DrawerModalComponent = React.forwardRef((_ref, ref) => {
+const DrawerComponent = React.forwardRef((_ref, ref) => {
   let {
     id,
     isOpen,
@@ -1064,10 +1010,6 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
   const environment = reactTheming.useDocument(theme);
   const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
   const [hasHeader, setHasHeader] = React.useState(false);
-  containerFocusvisible.useFocusVisible({
-    scope: modalRef,
-    relativeDocument: modalRef.current
-  });
   const {
     getTitleProps,
     getCloseProps,
@@ -1146,7 +1088,7 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
   const defaultValue = hasHeader ? modalProps['aria-labelledby'] : 'Modal dialog';
   const labelValue = hasHeader ? modalProps['aria-labelledby'] : props['aria-label'];
   const ariaProps = {
-    [attribute]: reactTheming.useText(DrawerModalComponent, {
+    [attribute]: reactTheming.useText(DrawerComponent, {
       [attribute]: labelValue
     }, attribute, defaultValue)
   };
@@ -1161,14 +1103,14 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
     unmountOnExit: true,
     classNames: "garden-drawer-transition",
     nodeRef: transitionRef
-  }, React__namespace.default.createElement(StyledBackdrop, _extends$2({
+  }, React__namespace.default.createElement(StyledBackdrop, Object.assign({
     isAnimated: true
-  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawerModal, _extends$2({}, modalProps, ariaProps, props, {
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawer, Object.assign({}, modalProps, ariaProps, props, {
     ref: reactMergeRefs.mergeRefs([ref, modalRef, transitionRef])
   }))))), rootNode);
 });
-DrawerModalComponent.displayName = 'DrawerModal';
-DrawerModalComponent.propTypes = {
+DrawerComponent.displayName = 'Drawer';
+DrawerComponent.propTypes = {
   backdropProps: PropTypes__default.default.object,
   focusOnMount: PropTypes__default.default.bool,
   restoreFocus: PropTypes__default.default.bool,
@@ -1176,22 +1118,22 @@ DrawerModalComponent.propTypes = {
   appendToNode: PropTypes__default.default.any,
   isOpen: PropTypes__default.default.bool
 };
-DrawerModalComponent.defaultProps = {
+DrawerComponent.defaultProps = {
   focusOnMount: true ,
   restoreFocus: true
 };
-const DrawerModal = DrawerModalComponent;
-DrawerModal.Body = Body;
-DrawerModal.Close = Close;
-DrawerModal.Footer = Footer;
-DrawerModal.FooterItem = FooterItem;
-DrawerModal.Header = Header;
+const Drawer = DrawerComponent;
+Drawer.Body = Body;
+Drawer.Close = Close;
+Drawer.Footer = Footer;
+Drawer.FooterItem = FooterItem;
+Drawer.Header = Header;
 
-const PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 
 exports.Body = Body$2;
 exports.Close = Close$2;
-exports.DrawerModal = DrawerModal;
+exports.Drawer = Drawer;
 exports.Footer = Footer$2;
 exports.FooterItem = FooterItem$2;
 exports.Header = Header$1;