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

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,13 +12,13 @@ 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 reactButtons = require('@zendeskgarden/react-buttons');
 var reactTransitionGroup = require('react-transition-group');
 var reactDom = require('@floating-ui/react-dom');
 var activeElement = require('dom-helpers/activeElement');
@@ -55,21 +54,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 +64,26 @@ const animationStyles$1 = props => {
 };
 const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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', _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    theme,
+    hue: 'neutralHue',
+    transparency: theme.opacity[1000],
+    light: {
+      shade: 900
+    },
+    dark: {
+      shade: 1200
+    }
+  });
+}, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledBackdrop.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -96,36 +95,36 @@ 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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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-scheme:only ", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 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({
-    theme: props.theme,
-    hue: backgroundColor
-  }), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, props.theme));
-};
 const BASE_MULTIPLIERS$1 = {
   top: 2.5,
   side: 6.5,
   size: 10
 };
-const StyledClose = styled__default.default.button.attrs({
+const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
-})(["display:block;position:absolute;top:", "px;", ":", ";transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", " & > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS$1.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS$1.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS$1.size, props => props.theme.space.base * BASE_MULTIPLIERS$1.size, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+})(["position:absolute;top:", "px;", ":", ";", ";"], props => props.theme.space.base * BASE_MULTIPLIERS$1.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS$1.side}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -133,11 +132,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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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 +144,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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -155,19 +154,34 @@ StyledFooterItem.defaultProps = {
 };
 
 const COMPONENT_ID$e = 'modals.header';
+const colorStyles$2 = _ref => {
+  let {
+    isDanger,
+    theme
+  } = _ref;
+  const bottomBorderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.subtle'
+  });
+  const color = reactTheming.getColor({
+    theme,
+    variable: isDanger ? 'foreground.danger' : 'foreground.default'
+  });
+  return styled.css(["border-bottom-color:", ";color:", ";"], bottomBorderColor, color);
+};
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledHeader.defaultProps = {
   theme: reactTheming.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); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -210,29 +224,37 @@ const animationStyles = props => {
   }
   return '';
 };
-const boxShadow$1 = props => {
-  const {
+const colorStyles$1 = _ref => {
+  let {
     theme
-  } = props;
-  const {
-    space,
-    shadows
-  } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
-  return shadows.lg(offsetY, blurRadius, color);
+  } = _ref;
+  const offsetY = `${theme.space.base * 5}px`;
+  const blurRadius = `${theme.space.base * 7}px`;
+  const shadowColor = reactTheming.getColor({
+    variable: 'shadow.large',
+    theme
+  });
+  const shadow = theme.shadows.lg(offsetY, blurRadius, shadowColor);
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
 };
 const sizeStyles$1 = props => {
   return styled.css(["", "{width:", ";}"], reactTheming.mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme), props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
 };
 const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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:", ";border-radius:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, colorStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledModal.propTypes = {
   isLarge: PropTypes__default.default.bool,
   isAnimated: PropTypes__default.default.bool
@@ -244,7 +266,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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -271,7 +293,7 @@ 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.2',
+  'data-garden-version': '9.0.0-next.20',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipModal",
@@ -300,11 +322,19 @@ const sizeStyles = props => `
 `;
 const StyledTooltipModalTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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:", ";", ";", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    variable: 'foreground.default',
+    theme
+  });
+}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledTooltipModalTitle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -312,11 +342,19 @@ 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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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-scheme:only ", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, _ref => {
+  let {
+    theme
+  } = _ref;
+  return reactTheming.getColor({
+    variable: 'foreground.default',
+    theme
+  });
+}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledTooltipModalBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -324,7 +362,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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -336,7 +374,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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -348,37 +386,45 @@ 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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
-})(["top:", "px;", ":", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => props.theme.space.base * 8, props => props.theme.space.base * 8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["top:", "px;", ":", ";", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledTooltipModalClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$5 = 'modals.drawer_modal';
 const DRAWER_WIDTH = 380;
-const boxShadow = props => {
-  const {
+const colorStyles = _ref => {
+  let {
     theme
-  } = props;
-  const {
-    space,
-    shadows
-  } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
-  return shadows.lg(offsetY, blurRadius, color);
+  } = _ref;
+  const offsetY = `${theme.space.base * 5}px`;
+  const blurRadius = `${theme.space.base * 7}px`;
+  const shadowColor = reactTheming.getColor({
+    variable: 'shadow.large',
+    theme
+  });
+  const shadow = theme.shadows.lg(offsetY, blurRadius, shadowColor);
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
 };
 const StyledDrawer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;", ":", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", " ", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.rtl ? 'border-right' : 'border-left', props => props.theme.borders.sm, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledDrawer.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -391,7 +437,7 @@ const BASE_MULTIPLIERS = {
 };
 const StyledDrawerClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledDrawerClose",
   componentId: "sc-1a0xt3x-0"
@@ -403,7 +449,7 @@ StyledDrawerClose.defaultProps = {
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
 const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledDrawerHeader",
   componentId: "sc-y4mgkj-0"
@@ -415,11 +461,11 @@ StyledDrawerHeader.defaultProps = {
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
 const StyledDrawerBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledDrawerBody",
   componentId: "sc-13qufyn-0"
-})(["padding:", "px;", ";"], props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledDrawerBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -427,11 +473,19 @@ StyledDrawerBody.defaultProps = {
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 const StyledDrawerFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledDrawerFooter",
   componentId: "sc-kc7e6p-0"
-})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return `${theme.borders.sm} ${reactTheming.getColor({
+    theme,
+    variable: 'border.subtle'
+  })}`;
+}, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledDrawerFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -439,7 +493,7 @@ StyledDrawerFooter.defaultProps = {
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
 const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledDrawerFooterItem",
   componentId: "sc-m2yul4-0"
@@ -457,6 +511,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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgXStroke = function SvgXStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    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);
@@ -469,7 +622,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,
@@ -501,10 +654,6 @@ const Modal = React.forwardRef((_ref, ref) => {
     focusOnMount,
     restoreFocus
   });
-  containerFocusvisible.useFocusVisible({
-    scope: modalRef,
-    relativeDocument: environment
-  });
   React.useEffect(() => {
     if (!environment) {
       return undefined;
@@ -562,7 +711,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)
   };
@@ -571,10 +720,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
@@ -582,8 +731,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,
@@ -593,109 +742,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 = () => {
@@ -727,7 +783,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);
@@ -745,7 +801,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
   }));
 });
@@ -757,23 +813,24 @@ 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
   }), {
-    ref: ref
+    ref: ref,
+    size: "small"
   }), React__namespace.default.createElement(SvgXStroke, null));
 });
 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';
@@ -823,6 +880,10 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
       transform
     }
   } = reactDom.useFloating({
+    platform: {
+      ...reactDom.platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: referenceElement,
       floating: floatingElement
@@ -875,7 +936,7 @@ 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, {
       ref: setFloatingElement,
@@ -885,7 +946,7 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
       placement: placement,
       zIndex: zIndex,
       isAnimated: isAnimated
-    }, React__namespace.default.createElement(StyledTooltipModal, _extends$2({
+    }, React__namespace.default.createElement(StyledTooltipModal, Object.assign({
       transitionState: transitionState,
       placement: placement,
       hasArrow: hasArrow,
@@ -943,7 +1004,7 @@ const HeaderComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasHeader, setHasHeader]);
-  return React__namespace.default.createElement(StyledDrawerHeader, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledDrawerHeader, Object.assign({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
@@ -962,7 +1023,7 @@ const BodyComponent = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__namespace.default.createElement(StyledDrawerBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledDrawerBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }), props.children);
 });
@@ -979,7 +1040,7 @@ const CloseComponent = React.forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__namespace.default.createElement(StyledDrawerClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledDrawerClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
@@ -989,13 +1050,13 @@ const CloseComponent = React.forwardRef((props, ref) => {
 CloseComponent.displayName = 'Drawer.Close';
 const Close = CloseComponent;
 
-const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooter, _extends$2({
+const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooter, Object.assign({
   ref: ref
 }, props)));
 FooterComponent.displayName = 'Drawer.Footer';
 const Footer = FooterComponent;
 
-const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooterItem, _extends$2({
+const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooterItem, Object.assign({
   ref: ref
 }, props)));
 FooterItemComponent.displayName = 'Drawer.FooterItem';
@@ -1019,10 +1080,6 @@ const DrawerComponent = 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,
@@ -1116,9 +1173,9 @@ const DrawerComponent = 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(StyledDrawer, _extends$2({}, modalProps, ariaProps, props, {
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawer, Object.assign({}, modalProps, ariaProps, props, {
     ref: reactMergeRefs.mergeRefs([ref, modalRef, transitionRef])
   }))))), rootNode);
 });