@zendeskgarden/react-modals 8.49.0 → 8.49.1

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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1',
     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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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;
   }
@@ -1047,7 +1063,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 +1096,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';
 
@@ -1255,10 +1281,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 +1304,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 +1349,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 +1397,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;
   }

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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1',
     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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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.1'
 }).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;
   }
@@ -1017,7 +1033,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 +1066,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';
 
@@ -1225,10 +1251,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 +1274,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 +1319,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 +1367,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;
   }

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/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.1",
   "description": "Components relating to modals in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.4",
-    "@zendeskgarden/react-theming": "^8.49.0",
+    "@zendeskgarden/react-theming": "^8.49.1",
     "@zendeskgarden/svg-icons": "6.30.2"
   },
   "keywords": [
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9c2b7501c2b0100f23fa3715a4d3b0d413645d99"
+  "gitHead": "40c9f918b5517480f73fc0ed4a47ffde212b28b6"
 }