@zendeskgarden/react-modals 8.49.0 → 8.49.3

package/dist/index.cjs.js

@@ -301,7 +301,7 @@ var COMPONENT_ID$j = 'modals.backdrop';
 var animationName$1 = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 var StyledBackdrop = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -331,7 +331,7 @@ StyledBackdrop.propTypes = {
 var COMPONENT_ID$i = 'modals.body';
 var StyledBody = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -356,22 +356,27 @@ var colorStyles = function colorStyles(props) {
   var foregroundColor = 'neutralHue';
   return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&: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), props.theme.shadows.md(reactTheming.getColor(backgroundColor, 600, props.theme, 0.35)), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, props.theme));
 };
+var BASE_MULTIPLIERS$1 = {
+  top: 2.5,
+  side: 6.5,
+  size: 10
+};
 var StyledClose = styled__default["default"].button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).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;}&:focus{outline:none;}", " & > svg{vertical-align:middle;}", ";"], function (props) {
-  return props.theme.space.base * 2.5;
+  return props.theme.space.base * BASE_MULTIPLIERS$1.top;
 }, function (props) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
-  return "".concat(props.theme.space.base * 6.5, "px");
+  return "".concat(props.theme.space.base * BASE_MULTIPLIERS$1.side, "px");
 }, function (props) {
-  return props.theme.space.base * 10;
+  return props.theme.space.base * BASE_MULTIPLIERS$1.size;
 }, function (props) {
-  return props.theme.space.base * 10;
+  return props.theme.space.base * BASE_MULTIPLIERS$1.size;
 }, function (props) {
   return colorStyles(props);
 }, function (props) {
@@ -384,7 +389,7 @@ StyledClose.defaultProps = {
 var COMPONENT_ID$g = 'modals.footer';
 var StyledFooter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -402,7 +407,7 @@ StyledFooter.defaultProps = {
 var COMPONENT_ID$f = 'modals.footer_item';
 var StyledFooterItem = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -422,16 +427,18 @@ StyledFooterItem.defaultProps = {
 var COMPONENT_ID$e = 'modals.header';
 var StyledHeader = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
-})(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], function (props) {
+})(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", "  line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], function (props) {
   return props.isDanger && 'relative';
 }, function (props) {
   return props.theme.borders.sm;
 }, reactTheming.getColor('neutralHue', 200), function (props) {
   return "".concat(props.theme.space.base * 5, "px ").concat(props.theme.space.base * 10, "px");
+}, function (props) {
+  return props.isCloseButtonPresent && "padding-".concat(props.theme.rtl ? 'left' : 'right', ": ").concat(props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2), "px;");
 }, function (props) {
   return reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md);
 }, function (props) {
@@ -503,13 +510,11 @@ var boxShadow$1 = function boxShadow(props) {
   return shadows.lg(offsetY, blurRadius, color);
 };
 var sizeStyles$1 = function sizeStyles(props) {
-  var defaultWidth = 544;
-  var largeWidth = 800;
-  return styled.css(["width:", ";@media (max-width:", "){", ":", "px;}"], props.isLarge ? "".concat(largeWidth, "px") : "".concat(defaultWidth, "px"), props.isLarge ? "".concat(largeWidth - 1, "px") : props.theme.breakpoints.md, props.theme.rtl ? 'right' : 'left', props.theme.space.base * 6);
+  return styled.css(["", "{width:", ";}"], reactTheming.mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme), props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
 };
 var StyledModal = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -549,7 +554,7 @@ StyledModal.defaultProps = {
 var COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 var StyledTooltipModalBackdrop = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -643,7 +648,7 @@ var COMPONENT_ID$b = 'modals.tooltip_modal';
 var StyledTooltipModal = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$b,
-    'data-garden-version': '8.49.0',
+    'data-garden-version': '8.49.3',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -674,7 +679,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTooltipModalTitle = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -694,7 +699,7 @@ StyledTooltipModalTitle.defaultProps = {
 var COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 var StyledTooltipModalBody = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -716,7 +721,7 @@ StyledTooltipModalBody.defaultProps = {
 var COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 var StyledTooltipModalFooter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -732,7 +737,7 @@ StyledTooltipModalFooter.defaultProps = {
 var COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 var StyledTooltipModalFooterItem = styled__default["default"](StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -746,7 +751,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 var COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 var StyledTooltipModalClose = styled__default["default"](StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -780,7 +785,7 @@ var boxShadow = function boxShadow(props) {
 };
 var StyledDrawerModal = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -803,46 +808,51 @@ StyledDrawerModal.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'modals.drawer_modal.header';
-var StyledDrawerModalHeader = styled__default["default"](StyledHeader).attrs({
+var COMPONENT_ID$4 = 'modals.drawer_modal.close';
+var BASE_MULTIPLIERS = {
+  top: BASE_MULTIPLIERS$1.top,
+  side: 2,
+  size: BASE_MULTIPLIERS$1.size
+};
+var StyledDrawerModalClose = styled__default["default"](StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
-  displayName: "StyledDrawerModalHeader",
-  componentId: "sc-1u04rqw-0"
-})(["padding:", "px;", ";"], function (props) {
-  return props.theme.space.base * 5;
+  displayName: "StyledDrawerModalClose",
+  componentId: "sc-hrnaom-0"
+})(["", ":", ";", ";"], function (props) {
+  return props.theme.rtl ? 'left' : 'right';
+}, function (props) {
+  return "".concat(props.theme.space.base * BASE_MULTIPLIERS.side, "px");
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
 });
-StyledDrawerModalHeader.defaultProps = {
+StyledDrawerModalClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'modals.drawer_modal.close';
-var StyledDrawerModalClose = styled__default["default"](StyledClose).attrs({
+var COMPONENT_ID$3 = 'modals.drawer_modal.header';
+var StyledDrawerModalHeader = styled__default["default"](StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
-  displayName: "StyledDrawerModalClose",
-  componentId: "sc-hrnaom-0"
-})(["top:", "px;width:", "px;height:", "px;", ";"], function (props) {
-  return props.theme.space.base * 3.5;
-}, function (props) {
-  return props.theme.space.base * 8;
+  displayName: "StyledDrawerModalHeader",
+  componentId: "sc-1u04rqw-0"
+})(["padding:", "px;", "  ", ";"], function (props) {
+  return props.theme.space.base * 5;
 }, function (props) {
-  return props.theme.space.base * 8;
+  return props.isCloseButtonPresent && "padding-".concat(props.theme.rtl ? 'left' : 'right', ": ").concat(props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2), "px;");
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
 });
-StyledDrawerModalClose.defaultProps = {
+StyledDrawerModalHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 var COMPONENT_ID$2 = 'modals.drawer_modal.body';
 var StyledDrawerModalBody = styled__default["default"](StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -858,7 +868,7 @@ StyledDrawerModalBody.defaultProps = {
 var COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 var StyledDrawerModalFooter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -876,7 +886,7 @@ StyledDrawerModalFooter.defaultProps = {
 var COMPONENT_ID = 'modals.drawer_modal.footer_item';
 var StyledDrawerModalFooterItem = styled__default["default"](StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -924,6 +934,10 @@ var Modal = React.forwardRef(function (_ref, ref) {
   var theme = React.useContext(styled.ThemeContext);
   var modalRef = React.useRef(null);
   var environment = reactTheming.useDocument(theme);
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCloseButtonPresent = _useState2[0],
+      setCloseButtonPresent = _useState2[1];
   var _useModal = containerModal.useModal({
     id: id,
     onClose: onClose,
@@ -980,11 +994,13 @@ var Modal = React.forwardRef(function (_ref, ref) {
   var value = React.useMemo(function () {
     return {
       isLarge: isLarge,
+      isCloseButtonPresent: isCloseButtonPresent,
       getTitleProps: getTitleProps,
       getContentProps: getContentProps,
-      getCloseProps: getCloseProps
+      getCloseProps: getCloseProps,
+      setCloseButtonPresent: setCloseButtonPresent
     };
-  }, [isLarge, getTitleProps, getContentProps, getCloseProps]);
+  }, [isLarge, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
   if (!rootNode) {
     return null;
   }
@@ -1009,8 +1025,7 @@ Modal.propTypes = {
   focusOnMount: PropTypes__default["default"].bool,
   restoreFocus: PropTypes__default["default"].bool,
   onClose: PropTypes__default["default"].func,
-  appendToNode: PropTypes__default["default"].any,
-  id: PropTypes__default["default"].string
+  appendToNode: PropTypes__default["default"].any
 };
 Modal.defaultProps = {
   isAnimated: true,
@@ -1047,7 +1062,14 @@ var SvgXStroke = function SvgXStroke(props) {
 
 var Close$2 = React__default["default"].forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
-      getCloseProps = _useModalContext.getCloseProps;
+      getCloseProps = _useModalContext.getCloseProps,
+      setCloseButtonPresent = _useModalContext.setCloseButtonPresent;
+  React.useEffect(function () {
+    setCloseButtonPresent(true);
+    return function () {
+      return setCloseButtonPresent(false);
+    };
+  });
   return React__default["default"].createElement(StyledClose, _extends$2({
     ref: ref
   }, getCloseProps(props)), React__default["default"].createElement(SvgXStroke, null));
@@ -1073,10 +1095,13 @@ FooterItem$2.displayName = 'FooterItem';
 
 var Header$1 = React.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
+      isCloseButtonPresent = _useModalContext.isCloseButtonPresent,
       getTitleProps = _useModalContext.getTitleProps;
   return React__default["default"].createElement(StyledHeader, _extends$2({
     ref: ref
-  }, getTitleProps(props)), props.isDanger && React__default["default"].createElement(StyledDangerIcon, null), props.children);
+  }, getTitleProps(props), {
+    isCloseButtonPresent: isCloseButtonPresent
+  }), props.isDanger && React__default["default"].createElement(StyledDangerIcon, null), props.children);
 });
 Header$1.displayName = 'Header';
 
@@ -1243,8 +1268,7 @@ TooltipModalComponent.propTypes = {
   onClose: PropTypes__default["default"].func,
   backdropProps: PropTypes__default["default"].any,
   focusOnMount: PropTypes__default["default"].bool,
-  restoreFocus: PropTypes__default["default"].bool,
-  id: PropTypes__default["default"].string
+  restoreFocus: PropTypes__default["default"].bool
 };
 var TooltipModal = TooltipModalComponent;
 TooltipModal.Body = Body$1;
@@ -1255,10 +1279,13 @@ TooltipModal.Title = Title;
 
 var HeaderComponent = React.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
+      isCloseButtonPresent = _useModalContext.isCloseButtonPresent,
       getTitleProps = _useModalContext.getTitleProps;
   return React__default["default"].createElement(StyledDrawerModalHeader, _extends$2({
     ref: ref
-  }, getTitleProps(props)));
+  }, getTitleProps(props), {
+    isCloseButtonPresent: isCloseButtonPresent
+  }));
 });
 HeaderComponent.displayName = 'DrawerModal.Header';
 var Header = HeaderComponent;
@@ -1275,7 +1302,14 @@ var Body = BodyComponent;
 
 var CloseComponent = React.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
-      getCloseProps = _useModalContext.getCloseProps;
+      getCloseProps = _useModalContext.getCloseProps,
+      setCloseButtonPresent = _useModalContext.setCloseButtonPresent;
+  React.useEffect(function () {
+    setCloseButtonPresent(true);
+    return function () {
+      return setCloseButtonPresent(false);
+    };
+  });
   return React__default["default"].createElement(StyledDrawerModalClose, _extends$2({
     ref: ref
   }, getCloseProps(props)), React__default["default"].createElement(SvgXStroke, null));
@@ -1313,6 +1347,10 @@ var DrawerModalComponent = React.forwardRef(function (_ref, ref) {
   var transitionRef = React.useRef(null);
   var theme = React.useContext(styled.ThemeContext);
   var environment = reactTheming.useDocument(theme);
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCloseButtonPresent = _useState2[0],
+      setCloseButtonPresent = _useState2[1];
   containerFocusvisible.useFocusVisible({
     scope: modalRef,
     relativeDocument: modalRef.current
@@ -1357,11 +1395,13 @@ var DrawerModalComponent = React.forwardRef(function (_ref, ref) {
   }, [appendToNode, environment]);
   var value = React.useMemo(function () {
     return {
+      isCloseButtonPresent: isCloseButtonPresent,
       getTitleProps: getTitleProps,
       getContentProps: getContentProps,
-      getCloseProps: getCloseProps
+      getCloseProps: getCloseProps,
+      setCloseButtonPresent: setCloseButtonPresent
     };
-  }, [getTitleProps, getContentProps, getCloseProps]);
+  }, [isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
   if (!rootNode) {
     return null;
   }
@@ -1389,7 +1429,6 @@ DrawerModalComponent.propTypes = {
   restoreFocus: PropTypes__default["default"].bool,
   onClose: PropTypes__default["default"].func,
   appendToNode: PropTypes__default["default"].any,
-  id: PropTypes__default["default"].string,
   isOpen: PropTypes__default["default"].bool
 };
 var DrawerModal = DrawerModalComponent;
@@ -1399,6 +1438,8 @@ DrawerModal.Footer = Footer;
 DrawerModal.FooterItem = FooterItem;
 DrawerModal.Header = Header;
 
+var PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+
 exports.Body = Body$2;
 exports.Close = Close$2;
 exports.DrawerModal = DrawerModal;
@@ -1406,4 +1447,5 @@ exports.Footer = Footer$2;
 exports.FooterItem = FooterItem$2;
 exports.Header = Header$1;
 exports.Modal = Modal;
+exports.PLACEMENT = PLACEMENT;
 exports.TooltipModal = TooltipModal;

package/dist/index.esm.js

@@ -6,11 +6,11 @@
  */
 
 import * as React from 'react';
-import React__default, { createContext, useContext, forwardRef, useRef, useEffect, useMemo, useState } from 'react';
+import React__default, { createContext, useContext, forwardRef, useRef, useState, useEffect, useMemo } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 import styled, { keyframes, css, ThemeContext } from 'styled-components';
 import PropTypes from 'prop-types';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, menuStyles, arrowStyles, useDocument } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, mediaQuery, menuStyles, arrowStyles, useDocument } from '@zendeskgarden/react-theming';
 import { useModal } from '@zendeskgarden/container-modal';
 import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
 import mergeRefs from 'react-merge-refs';
@@ -271,7 +271,7 @@ var COMPONENT_ID$j = 'modals.backdrop';
 var animationName$1 = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 var StyledBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -301,7 +301,7 @@ StyledBackdrop.propTypes = {
 var COMPONENT_ID$i = 'modals.body';
 var StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -326,22 +326,27 @@ var colorStyles = function colorStyles(props) {
   var foregroundColor = 'neutralHue';
   return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColor(foregroundColor, 600, props.theme), getColor(backgroundColor, 600, props.theme, 0.08), getColor(foregroundColor, 700, props.theme), props.theme.shadows.md(getColor(backgroundColor, 600, props.theme, 0.35)), getColor(backgroundColor, 600, props.theme, 0.2), getColor(foregroundColor, 800, props.theme));
 };
+var BASE_MULTIPLIERS$1 = {
+  top: 2.5,
+  side: 6.5,
+  size: 10
+};
 var StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).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;}&:focus{outline:none;}", " & > svg{vertical-align:middle;}", ";"], function (props) {
-  return props.theme.space.base * 2.5;
+  return props.theme.space.base * BASE_MULTIPLIERS$1.top;
 }, function (props) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
-  return "".concat(props.theme.space.base * 6.5, "px");
+  return "".concat(props.theme.space.base * BASE_MULTIPLIERS$1.side, "px");
 }, function (props) {
-  return props.theme.space.base * 10;
+  return props.theme.space.base * BASE_MULTIPLIERS$1.size;
 }, function (props) {
-  return props.theme.space.base * 10;
+  return props.theme.space.base * BASE_MULTIPLIERS$1.size;
 }, function (props) {
   return colorStyles(props);
 }, function (props) {
@@ -354,7 +359,7 @@ StyledClose.defaultProps = {
 var COMPONENT_ID$g = 'modals.footer';
 var StyledFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -372,7 +377,7 @@ StyledFooter.defaultProps = {
 var COMPONENT_ID$f = 'modals.footer_item';
 var StyledFooterItem = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -392,16 +397,18 @@ StyledFooterItem.defaultProps = {
 var COMPONENT_ID$e = 'modals.header';
 var StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
-})(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], function (props) {
+})(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", "  line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], function (props) {
   return props.isDanger && 'relative';
 }, function (props) {
   return props.theme.borders.sm;
 }, getColor('neutralHue', 200), function (props) {
   return "".concat(props.theme.space.base * 5, "px ").concat(props.theme.space.base * 10, "px");
+}, function (props) {
+  return props.isCloseButtonPresent && "padding-".concat(props.theme.rtl ? 'left' : 'right', ": ").concat(props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2), "px;");
 }, function (props) {
   return getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md);
 }, function (props) {
@@ -473,13 +480,11 @@ var boxShadow$1 = function boxShadow(props) {
   return shadows.lg(offsetY, blurRadius, color);
 };
 var sizeStyles$1 = function sizeStyles(props) {
-  var defaultWidth = 544;
-  var largeWidth = 800;
-  return css(["width:", ";@media (max-width:", "){", ":", "px;}"], props.isLarge ? "".concat(largeWidth, "px") : "".concat(defaultWidth, "px"), props.isLarge ? "".concat(largeWidth - 1, "px") : props.theme.breakpoints.md, props.theme.rtl ? 'right' : 'left', props.theme.space.base * 6);
+  return css(["", "{width:", ";}"], mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme), props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm);
 };
 var StyledModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -519,7 +524,7 @@ StyledModal.defaultProps = {
 var COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 var StyledTooltipModalBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -613,7 +618,7 @@ var COMPONENT_ID$b = 'modals.tooltip_modal';
 var StyledTooltipModal = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$b,
-    'data-garden-version': '8.49.0',
+    'data-garden-version': '8.49.3',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -644,7 +649,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTooltipModalTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -664,7 +669,7 @@ StyledTooltipModalTitle.defaultProps = {
 var COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 var StyledTooltipModalBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -686,7 +691,7 @@ StyledTooltipModalBody.defaultProps = {
 var COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 var StyledTooltipModalFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -702,7 +707,7 @@ StyledTooltipModalFooter.defaultProps = {
 var COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 var StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -716,7 +721,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 var COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 var StyledTooltipModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -750,7 +755,7 @@ var boxShadow = function boxShadow(props) {
 };
 var StyledDrawerModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -773,46 +778,51 @@ StyledDrawerModal.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'modals.drawer_modal.header';
-var StyledDrawerModalHeader = styled(StyledHeader).attrs({
+var COMPONENT_ID$4 = 'modals.drawer_modal.close';
+var BASE_MULTIPLIERS = {
+  top: BASE_MULTIPLIERS$1.top,
+  side: 2,
+  size: BASE_MULTIPLIERS$1.size
+};
+var StyledDrawerModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
-  displayName: "StyledDrawerModalHeader",
-  componentId: "sc-1u04rqw-0"
-})(["padding:", "px;", ";"], function (props) {
-  return props.theme.space.base * 5;
+  displayName: "StyledDrawerModalClose",
+  componentId: "sc-hrnaom-0"
+})(["", ":", ";", ";"], function (props) {
+  return props.theme.rtl ? 'left' : 'right';
+}, function (props) {
+  return "".concat(props.theme.space.base * BASE_MULTIPLIERS.side, "px");
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$4, props);
 });
-StyledDrawerModalHeader.defaultProps = {
+StyledDrawerModalClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'modals.drawer_modal.close';
-var StyledDrawerModalClose = styled(StyledClose).attrs({
+var COMPONENT_ID$3 = 'modals.drawer_modal.header';
+var StyledDrawerModalHeader = styled(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
-  displayName: "StyledDrawerModalClose",
-  componentId: "sc-hrnaom-0"
-})(["top:", "px;width:", "px;height:", "px;", ";"], function (props) {
-  return props.theme.space.base * 3.5;
-}, function (props) {
-  return props.theme.space.base * 8;
+  displayName: "StyledDrawerModalHeader",
+  componentId: "sc-1u04rqw-0"
+})(["padding:", "px;", "  ", ";"], function (props) {
+  return props.theme.space.base * 5;
 }, function (props) {
-  return props.theme.space.base * 8;
+  return props.isCloseButtonPresent && "padding-".concat(props.theme.rtl ? 'left' : 'right', ": ").concat(props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2), "px;");
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$3, props);
 });
-StyledDrawerModalClose.defaultProps = {
+StyledDrawerModalHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
 
 var COMPONENT_ID$2 = 'modals.drawer_modal.body';
 var StyledDrawerModalBody = styled(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -828,7 +838,7 @@ StyledDrawerModalBody.defaultProps = {
 var COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 var StyledDrawerModalFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -846,7 +856,7 @@ StyledDrawerModalFooter.defaultProps = {
 var COMPONENT_ID = 'modals.drawer_modal.footer_item';
 var StyledDrawerModalFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.49.0'
+  'data-garden-version': '8.49.3'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -894,6 +904,10 @@ var Modal = forwardRef(function (_ref, ref) {
   var theme = useContext(ThemeContext);
   var modalRef = useRef(null);
   var environment = useDocument(theme);
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCloseButtonPresent = _useState2[0],
+      setCloseButtonPresent = _useState2[1];
   var _useModal = useModal({
     id: id,
     onClose: onClose,
@@ -950,11 +964,13 @@ var Modal = forwardRef(function (_ref, ref) {
   var value = useMemo(function () {
     return {
       isLarge: isLarge,
+      isCloseButtonPresent: isCloseButtonPresent,
       getTitleProps: getTitleProps,
       getContentProps: getContentProps,
-      getCloseProps: getCloseProps
+      getCloseProps: getCloseProps,
+      setCloseButtonPresent: setCloseButtonPresent
     };
-  }, [isLarge, getTitleProps, getContentProps, getCloseProps]);
+  }, [isLarge, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
   if (!rootNode) {
     return null;
   }
@@ -979,8 +995,7 @@ Modal.propTypes = {
   focusOnMount: PropTypes.bool,
   restoreFocus: PropTypes.bool,
   onClose: PropTypes.func,
-  appendToNode: PropTypes.any,
-  id: PropTypes.string
+  appendToNode: PropTypes.any
 };
 Modal.defaultProps = {
   isAnimated: true,
@@ -1017,7 +1032,14 @@ var SvgXStroke = function SvgXStroke(props) {
 
 var Close$2 = React__default.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
-      getCloseProps = _useModalContext.getCloseProps;
+      getCloseProps = _useModalContext.getCloseProps,
+      setCloseButtonPresent = _useModalContext.setCloseButtonPresent;
+  useEffect(function () {
+    setCloseButtonPresent(true);
+    return function () {
+      return setCloseButtonPresent(false);
+    };
+  });
   return React__default.createElement(StyledClose, _extends$2({
     ref: ref
   }, getCloseProps(props)), React__default.createElement(SvgXStroke, null));
@@ -1043,10 +1065,13 @@ FooterItem$2.displayName = 'FooterItem';
 
 var Header$1 = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
+      isCloseButtonPresent = _useModalContext.isCloseButtonPresent,
       getTitleProps = _useModalContext.getTitleProps;
   return React__default.createElement(StyledHeader, _extends$2({
     ref: ref
-  }, getTitleProps(props)), props.isDanger && React__default.createElement(StyledDangerIcon, null), props.children);
+  }, getTitleProps(props), {
+    isCloseButtonPresent: isCloseButtonPresent
+  }), props.isDanger && React__default.createElement(StyledDangerIcon, null), props.children);
 });
 Header$1.displayName = 'Header';
 
@@ -1213,8 +1238,7 @@ TooltipModalComponent.propTypes = {
   onClose: PropTypes.func,
   backdropProps: PropTypes.any,
   focusOnMount: PropTypes.bool,
-  restoreFocus: PropTypes.bool,
-  id: PropTypes.string
+  restoreFocus: PropTypes.bool
 };
 var TooltipModal = TooltipModalComponent;
 TooltipModal.Body = Body$1;
@@ -1225,10 +1249,13 @@ TooltipModal.Title = Title;
 
 var HeaderComponent = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
+      isCloseButtonPresent = _useModalContext.isCloseButtonPresent,
       getTitleProps = _useModalContext.getTitleProps;
   return React__default.createElement(StyledDrawerModalHeader, _extends$2({
     ref: ref
-  }, getTitleProps(props)));
+  }, getTitleProps(props), {
+    isCloseButtonPresent: isCloseButtonPresent
+  }));
 });
 HeaderComponent.displayName = 'DrawerModal.Header';
 var Header = HeaderComponent;
@@ -1245,7 +1272,14 @@ var Body = BodyComponent;
 
 var CloseComponent = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
-      getCloseProps = _useModalContext.getCloseProps;
+      getCloseProps = _useModalContext.getCloseProps,
+      setCloseButtonPresent = _useModalContext.setCloseButtonPresent;
+  useEffect(function () {
+    setCloseButtonPresent(true);
+    return function () {
+      return setCloseButtonPresent(false);
+    };
+  });
   return React__default.createElement(StyledDrawerModalClose, _extends$2({
     ref: ref
   }, getCloseProps(props)), React__default.createElement(SvgXStroke, null));
@@ -1283,6 +1317,10 @@ var DrawerModalComponent = forwardRef(function (_ref, ref) {
   var transitionRef = useRef(null);
   var theme = useContext(ThemeContext);
   var environment = useDocument(theme);
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCloseButtonPresent = _useState2[0],
+      setCloseButtonPresent = _useState2[1];
   useFocusVisible({
     scope: modalRef,
     relativeDocument: modalRef.current
@@ -1327,11 +1365,13 @@ var DrawerModalComponent = forwardRef(function (_ref, ref) {
   }, [appendToNode, environment]);
   var value = useMemo(function () {
     return {
+      isCloseButtonPresent: isCloseButtonPresent,
       getTitleProps: getTitleProps,
       getContentProps: getContentProps,
-      getCloseProps: getCloseProps
+      getCloseProps: getCloseProps,
+      setCloseButtonPresent: setCloseButtonPresent
     };
-  }, [getTitleProps, getContentProps, getCloseProps]);
+  }, [isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
   if (!rootNode) {
     return null;
   }
@@ -1359,7 +1399,6 @@ DrawerModalComponent.propTypes = {
   restoreFocus: PropTypes.bool,
   onClose: PropTypes.func,
   appendToNode: PropTypes.any,
-  id: PropTypes.string,
   isOpen: PropTypes.bool
 };
 var DrawerModal = DrawerModalComponent;
@@ -1369,4 +1408,6 @@ DrawerModal.Footer = Footer;
 DrawerModal.FooterItem = FooterItem;
 DrawerModal.Header = Header;
 
-export { Body$2 as Body, Close$2 as Close, DrawerModal, Footer$2 as Footer, FooterItem$2 as FooterItem, Header$1 as Header, Modal, TooltipModal };
+var PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+
+export { Body$2 as Body, Close$2 as Close, DrawerModal, Footer$2 as Footer, FooterItem$2 as FooterItem, Header$1 as Header, Modal, PLACEMENT, TooltipModal };

package/dist/typings/elements/DrawerModal/DrawerModal.d.ts

@@ -4,40 +4,13 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
+import React from 'react';
+import { IDrawerModalProps } from '../../types';
 import { Header } from './Header';
 import { Body } from './Body';
 import { Close } from './Close';
 import { Footer } from './Footer';
 import { FooterItem } from './FooterItem';
-export interface IDrawerModalProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Opens the modal
-     */
-    isOpen?: boolean;
-    /**
-     * Passes HTML attributes to the backdrop element
-     */
-    backdropProps?: any;
-    /**
-     * Handles close actions. Can be triggered from the backdrop and from the close icon.
-     *
-     * @param {Object} event The DOM event that triggered the close action
-     */
-    onClose?: (event: KeyboardEvent | MouseEvent) => void;
-    /**
-     * Defines the DOM element that the modal will attatch to
-     */
-    appendToNode?: Element;
-    /**
-     * Directs keyboard focus to the modal on mount
-     */
-    focusOnMount?: boolean;
-    /**
-     * Returns keyboard focus to the element that triggered the modal
-     */
-    restoreFocus?: boolean;
-}
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

package/dist/typings/elements/Header.d.ts

@@ -4,13 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
-export interface IHeaderProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Applies danger styling
-     */
-    isDanger?: boolean;
-}
+import React from 'react';
+import { IHeaderProps } from '../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

package/dist/typings/elements/Modal.d.ts

@@ -4,43 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
-export interface IModalProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Passes HTML attributes to the backdrop element
-     */
-    backdropProps?: HTMLAttributes<HTMLDivElement>;
-    /**
-     * Handles close actions. Can be triggered from the backdrop and from the close icon.
-     *
-     * @param {Object} event The DOM event that triggered the close action
-     */
-    onClose?: (event: KeyboardEvent | MouseEvent) => void;
-    /**
-     * Centers the modal on the backdrop
-     */
-    isCentered?: boolean;
-    /**
-     * Animates the modal
-     */
-    isAnimated?: boolean;
-    /**
-     * Defines the DOM element that the modal will attatch to
-     */
-    appendToNode?: Element;
-    /**
-     * Applies large styling
-     */
-    isLarge?: boolean;
-    /**
-     * Directs keyboard focus to the modal on mount
-     */
-    focusOnMount?: boolean;
-    /**
-     * Returns keyboard focus to the element that triggered the modal
-     */
-    restoreFocus?: boolean;
-}
+import React from 'react';
+import { IModalProps } from '../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

package/dist/typings/elements/TooltipModal/TooltipModal.d.ts

@@ -4,58 +4,13 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
-import { Modifier } from 'react-popper';
-import { GARDEN_PLACEMENT } from '../../utils/gardenPlacements';
+import React from 'react';
+import { ITooltipModalProps } from '../../types';
 import { Title } from './Title';
 import { Body } from './Body';
 import { Close } from './Close';
 import { Footer } from './Footer';
 import { FooterItem } from './FooterItem';
-export interface ITooltipModalProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Positions the modal relative to the provided `HTMLElement`
-     */
-    referenceElement?: HTMLElement | null;
-    /**
-     * Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic
-     */
-    popperModifiers?: Partial<Modifier<any, any>>[];
-    /**
-     * Adjusts the placement of the tooltip
-     **/
-    placement?: GARDEN_PLACEMENT;
-    /**
-     * Adds an arrow to the tooltop
-     */
-    hasArrow?: boolean;
-    /**
-     * Animates the tooltop
-     */
-    isAnimated?: boolean;
-    /**
-     * Sets the `z-index` of the tooltip
-     */
-    zIndex?: number;
-    /**
-     * Handles close actions. Can be triggered from the backdrop and from the close icon.
-     *
-     * @param {Object} event The DOM event that triggered the close action
-     */
-    onClose?: (event: KeyboardEvent | MouseEvent) => void;
-    /**
-     * Passes HTML attributes to the backdrop element
-     */
-    backdropProps?: any;
-    /**
-     * Directs keyboard focus to the modal on mount
-     */
-    focusOnMount?: boolean;
-    /**
-     * Returns keyboard focus to the element that triggered the modal
-     */
-    restoreFocus?: boolean;
-}
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

package/dist/typings/index.d.ts

@@ -5,14 +5,12 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 export { Modal } from './elements/Modal';
-export type { IModalProps } from './elements/Modal';
 export { Body } from './elements/Body';
 export { Close } from './elements/Close';
 export { Footer } from './elements/Footer';
 export { FooterItem } from './elements/FooterItem';
 export { Header } from './elements/Header';
 export { TooltipModal } from './elements/TooltipModal/TooltipModal';
-export type { ITooltipModalProps } from './elements/TooltipModal/TooltipModal';
 export { DrawerModal } from './elements/DrawerModal/DrawerModal';
-export type { IDrawerModalProps } from './elements/DrawerModal/DrawerModal';
-export type { GARDEN_PLACEMENT } from './utils/gardenPlacements';
+export { PLACEMENT } from './types';
+export type { IModalProps, IDrawerModalProps, ITooltipModalProps, Placement as GARDEN_PLACEMENT } from './types';

package/dist/typings/styled/StyledClose.d.ts

@@ -5,6 +5,11 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
+export declare const BASE_MULTIPLIERS: {
+    top: number;
+    side: number;
+    size: number;
+};
 /**
  * 1. Remove dotted outline from Firefox on focus.
  */

package/dist/typings/styled/StyledDrawerModalClose.d.ts

@@ -4,6 +4,11 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+export declare const BASE_MULTIPLIERS: {
+    top: number;
+    side: number;
+    size: number;
+};
 export declare const StyledDrawerModalClose: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;

package/dist/typings/styled/StyledDrawerModalHeader.d.ts

@@ -4,6 +4,10 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+/**
+ * 1. the padding added to the Header is based on the close button size and spacing,
+ *    with additional padding (+ 2) between the Header content and Close button
+ */
 export declare const StyledDrawerModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("./StyledHeader").IStyledHeaderProps & {
     'data-garden-id': string;
     'data-garden-version': string;

package/dist/typings/styled/StyledHeader.d.ts

@@ -6,5 +6,10 @@
  */
 export interface IStyledHeaderProps {
     isDanger?: boolean;
+    isCloseButtonPresent?: boolean;
 }
+/**
+ * 1. the padding added to the Header is based on the close button size and spacing,
+ *    with additional padding (+ 2) between the Header content and Close button
+ */
 export declare const StyledHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStyledHeaderProps, never>;

package/dist/typings/styled/StyledTooltipModal.d.ts

@@ -5,13 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { Placement } from '@popperjs/core';
-export interface IStyledTooltipModalProps {
-    hasArrow?: boolean;
-    /**
-     * All valid [Popper.JS Placements](https://popper.js.org/popper-documentation.html#Popper.placements)
-     */
+import { TransitionStatus } from 'react-transition-group';
+import { ITooltipModalProps } from '../types';
+export interface IStyledTooltipModalProps extends Pick<ITooltipModalProps, 'hasArrow' | 'isAnimated'> {
     placement: Placement;
-    isAnimated?: boolean;
-    transitionState?: string;
+    transitionState?: TransitionStatus;
 }
 export declare const StyledTooltipModal: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStyledTooltipModalProps, never>;

package/dist/typings/styled/StyledTooltipWrapper.d.ts

@@ -5,9 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { Placement } from '@popperjs/core';
-interface IStyledTooltipWrapperProps {
-    isAnimated?: boolean;
-    zIndex?: number;
+import { ITooltipModalProps } from '../types';
+interface IStyledTooltipWrapperProps extends Pick<ITooltipModalProps, 'isAnimated' | 'zIndex'> {
     placement?: Placement;
 }
 export declare const StyledTooltipWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStyledTooltipWrapperProps, never>;

package/dist/typings/styled/index.d.ts

@@ -5,7 +5,6 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 export { StyledBackdrop } from './StyledBackdrop';
-export type { IStyledBackdropProps } from './StyledBackdrop';
 export { StyledBody } from './StyledBody';
 export { StyledClose } from './StyledClose';
 export { StyledFooter } from './StyledFooter';
@@ -13,7 +12,6 @@ export { StyledFooterItem } from './StyledFooterItem';
 export { StyledHeader } from './StyledHeader';
 export { StyledDangerIcon } from './StyledDangerIcon';
 export { StyledModal } from './StyledModal';
-export type { IStyledModalProps } from './StyledModal';
 export { StyledTooltipModalBackdrop } from './StyledTooltipModalBackdrop';
 export { StyledTooltipWrapper } from './StyledTooltipWrapper';
 export { StyledTooltipModal } from './StyledTooltipModal';

package/dist/typings/types/index.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
+import { Modifier } from 'react-popper';
+export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
+export declare type Placement = typeof PLACEMENT[number];
+export interface IModalProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Passes HTML attributes to the backdrop element
+     */
+    backdropProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Handles close actions. Can be triggered from the backdrop and from the close icon.
+     *
+     * @param {Object} event The DOM event that triggered the close action
+     */
+    onClose?: (event: KeyboardEvent | MouseEvent) => void;
+    /**
+     * Centers the modal on the backdrop
+     */
+    isCentered?: boolean;
+    /**
+     * Animates the modal
+     */
+    isAnimated?: boolean;
+    /**
+     * Defines the DOM element that the modal will attatch to
+     */
+    appendToNode?: Element;
+    /**
+     * Applies large styling
+     */
+    isLarge?: boolean;
+    /**
+     * Directs keyboard focus to the modal on mount
+     */
+    focusOnMount?: boolean;
+    /**
+     * Returns keyboard focus to the element that triggered the modal
+     */
+    restoreFocus?: boolean;
+}
+export interface IHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Applies danger styling
+     */
+    isDanger?: boolean;
+}
+export interface IDrawerModalProps extends Omit<IModalProps, 'isAnimated' | 'isCentered' | 'isLarge'> {
+    /**
+     * Opens the modal
+     */
+    isOpen?: boolean;
+}
+export interface ITooltipModalProps extends Omit<IModalProps, 'appendToNode' | 'isCentered' | 'isLarge'> {
+    /**
+     * Positions the modal relative to the provided `HTMLElement`
+     */
+    referenceElement?: HTMLElement | null;
+    /**
+     * Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic
+     */
+    popperModifiers?: Partial<Modifier<any, any>>[];
+    /**
+     * Adjusts the placement of the tooltip
+     **/
+    placement?: Placement;
+    /**
+     * Adds an arrow to the tooltop
+     */
+    hasArrow?: boolean;
+    /**
+     * Sets the `z-index` of the tooltip
+     */
+    zIndex?: number;
+}

package/dist/typings/utils/gardenPlacements.d.ts

@@ -4,26 +4,25 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { ARROW_POSITION, MENU_POSITION } from '@zendeskgarden/react-theming';
 import { Placement } from '@popperjs/core';
-export declare type GARDEN_PLACEMENT = 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'end' | 'end-top' | 'end-bottom' | 'start' | 'start-top' | 'start-bottom';
+import { Placement as GardenPlacement } from '../types';
 /**
  * Convert Garden RTL aware placement to Popper.JS valid placement
  * @param {String} gardenPlacement
  */
-export declare function getPopperPlacement(gardenPlacement: GARDEN_PLACEMENT): Placement;
+export declare function getPopperPlacement(gardenPlacement: GardenPlacement): Placement;
 /**
  * Convert Garden RTL aware placement to RTL equivalent Popper.JS placement
  * @param {String} gardenPlacement
  */
-export declare function getRtlPopperPlacement(gardenPlacement: GARDEN_PLACEMENT): Placement;
+export declare function getRtlPopperPlacement(gardenPlacement: GardenPlacement): Placement;
 /**
  * Convert Popper.JS placement to corresponding arrow position
  * @param {String} popperPlacement
  */
-export declare function getArrowPosition(popperPlacement: Placement): ARROW_POSITION;
+export declare function getArrowPosition(popperPlacement: Placement): "top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom";
 /**
  * Convert Popper.JS placement to corresponding menu position
  * @param {String} popperPlacement
  */
-export declare function getMenuPosition(popperPlacement?: Placement): MENU_POSITION;
+export declare function getMenuPosition(popperPlacement?: Placement): "top" | "right" | "bottom" | "left";

package/dist/typings/utils/useModalContext.d.ts

@@ -7,9 +7,11 @@
 import { HTMLAttributes } from 'react';
 export interface IModalContext {
     isLarge?: boolean;
+    isCloseButtonPresent?: boolean;
     getTitleProps: <T>(options?: T) => T & HTMLAttributes<HTMLDivElement>;
     getContentProps: <T>(options?: T) => T & HTMLAttributes<HTMLDivElement>;
     getCloseProps: <T>(options?: T) => T & HTMLAttributes<HTMLButtonElement>;
+    setCloseButtonPresent: (isPresent: boolean) => void;
 }
 export declare const ModalsContext: import("react").Context<IModalContext | undefined>;
 export declare const useModalContext: () => IModalContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-modals",
-  "version": "8.49.0",
+  "version": "8.49.3",
   "description": "Components relating to modals in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.4",
-    "@zendeskgarden/react-theming": "^8.49.0",
-    "@zendeskgarden/svg-icons": "6.30.2"
+    "@zendeskgarden/react-theming": "^8.49.3",
+    "@zendeskgarden/svg-icons": "6.31.1"
   },
   "keywords": [
     "components",
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9c2b7501c2b0100f23fa3715a4d3b0d413645d99"
+  "gitHead": "983322364971c051ca6ce478770edfc3310e4c4b"
 }