@zendeskgarden/react-modals 9.12.2 → 9.12.4

package/dist/esm/elements/Body.js

@@ -29,7 +29,7 @@ import '../styled/StyledDrawerFooter.js';
 import '../styled/StyledDrawerFooterItem.js';
 import { useModalContext } from '../utils/useModalContext.js';
 
-const Body = forwardRef((props, ref) => {
+const Body$2 = forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
@@ -37,6 +37,6 @@ const Body = forwardRef((props, ref) => {
     ref: ref
   }));
 });
-Body.displayName = 'Modal.Body';
+Body$2.displayName = 'Modal.Body';
 
-export { Body };
+export { Body$2 as Body };

package/dist/esm/elements/Close.js

@@ -31,7 +31,7 @@ import { useText } from '@zendeskgarden/react-theming';
 import { useModalContext } from '../utils/useModalContext.js';
 import SvgXStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
 
-const Close = forwardRef((props, ref) => {
+const Close$2 = forwardRef((props, ref) => {
   const {
     getCloseProps,
     setIsCloseButtonPresent
@@ -40,7 +40,7 @@ const Close = forwardRef((props, ref) => {
     setIsCloseButtonPresent(true);
     return () => setIsCloseButtonPresent(false);
   });
-  const ariaLabel = useText(Close, props, 'aria-label', 'Close modal', props['aria-describedby'] === undefined );
+  const ariaLabel = useText(Close$2, props, 'aria-label', 'Close modal', props['aria-describedby'] === undefined );
   return React__default.createElement(StyledClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
@@ -48,6 +48,6 @@ const Close = forwardRef((props, ref) => {
     ref: ref
   }), React__default.createElement(SvgXStroke, null));
 });
-Close.displayName = 'Modal.Close';
+Close$2.displayName = 'Modal.Close';
 
-export { Close };
+export { Close$2 as Close };

package/dist/esm/elements/Drawer/Drawer.js

@@ -42,17 +42,16 @@ import { Close } from './Close.js';
 import { Footer } from './Footer.js';
 import { FooterItem } from './FooterItem.js';
 
-const DrawerComponent = forwardRef((_ref, ref) => {
-  let {
-    id,
-    isOpen,
-    onClose,
-    backdropProps,
-    appendToNode,
-    focusOnMount = true,
-    restoreFocus = true,
-    ...props
-  } = _ref;
+const DrawerComponent = forwardRef(({
+  id,
+  isOpen,
+  onClose,
+  backdropProps,
+  appendToNode,
+  focusOnMount = true,
+  restoreFocus = true,
+  ...props
+}, ref) => {
   const modalRef = useRef(null);
   const transitionRef = useRef(null);
   const triggerRef = useRef(null);
@@ -60,6 +59,9 @@ const DrawerComponent = forwardRef((_ref, ref) => {
   const environment = useDocument(theme);
   const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
   const [hasHeader, setHasHeader] = useState(false);
+  const handleClose = event => {
+    isOpen && onClose?.(event);
+  };
   const {
     getTitleProps,
     getCloseProps,
@@ -72,7 +74,7 @@ const DrawerComponent = forwardRef((_ref, ref) => {
     focusOnMount: false ,
     restoreFocus: false ,
     environment,
-    onClose
+    onClose: handleClose
   });
   useEffect(() => {
     if (environment) {

package/dist/esm/elements/Drawer/Header.js

@@ -30,11 +30,10 @@ import '../../styled/StyledDrawerBody.js';
 import '../../styled/StyledDrawerFooter.js';
 import '../../styled/StyledDrawerFooterItem.js';
 
-const HeaderComponent = forwardRef((_ref, ref) => {
-  let {
-    tag = 'div',
-    ...other
-  } = _ref;
+const HeaderComponent = forwardRef(({
+  tag = 'div',
+  ...other
+}, ref) => {
   const {
     isCloseButtonPresent,
     hasHeader,

package/dist/esm/elements/Footer.js

@@ -29,7 +29,7 @@ import '../styled/StyledDrawerFooter.js';
 import '../styled/StyledDrawerFooterItem.js';
 import { useModalContext } from '../utils/useModalContext.js';
 
-const Footer = React__default.forwardRef((props, ref) => {
+const Footer$2 = React__default.forwardRef((props, ref) => {
   const {
     isLarge
   } = useModalContext();
@@ -38,6 +38,6 @@ const Footer = React__default.forwardRef((props, ref) => {
     $isLarge: isLarge
   }, props));
 });
-Footer.displayName = 'Modal.Footer';
+Footer$2.displayName = 'Modal.Footer';
 
-export { Footer };
+export { Footer$2 as Footer };

package/dist/esm/elements/FooterItem.js

@@ -28,9 +28,9 @@ import '../styled/StyledDrawerBody.js';
 import '../styled/StyledDrawerFooter.js';
 import '../styled/StyledDrawerFooterItem.js';
 
-const FooterItem = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, Object.assign({
+const FooterItem$2 = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, Object.assign({
   ref: ref
 }, props)));
-FooterItem.displayName = 'Modal.FooterItem';
+FooterItem$2.displayName = 'Modal.FooterItem';
 
-export { FooterItem };
+export { FooterItem$2 as FooterItem };

package/dist/esm/elements/Header.js

@@ -30,13 +30,12 @@ import '../styled/StyledDrawerBody.js';
 import '../styled/StyledDrawerFooter.js';
 import '../styled/StyledDrawerFooterItem.js';
 
-const Header = forwardRef((_ref, ref) => {
-  let {
-    children,
-    isDanger,
-    tag = 'div',
-    ...other
-  } = _ref;
+const Header$1 = forwardRef(({
+  children,
+  isDanger,
+  tag = 'div',
+  ...other
+}, ref) => {
   const {
     isCloseButtonPresent,
     hasHeader,
@@ -60,10 +59,10 @@ const Header = forwardRef((_ref, ref) => {
     ref: ref
   }), !!isDanger && React__default.createElement(StyledDangerIcon, null), children);
 });
-Header.displayName = 'Modal.Header';
-Header.propTypes = {
+Header$1.displayName = 'Modal.Header';
+Header$1.propTypes = {
   isDanger: PropTypes.bool,
   tag: PropTypes.any
 };
 
-export { Header };
+export { Header$1 as Header };

package/dist/esm/elements/Modal.js

@@ -57,20 +57,19 @@ const isOverflowing = element => {
   const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
   return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
 };
-const ModalComponent = forwardRef((_ref, ref) => {
-  let {
-    backdropProps,
-    children,
-    onClose,
-    isLarge,
-    isCentered = true,
-    isAnimated = true,
-    id,
-    appendToNode,
-    focusOnMount,
-    restoreFocus,
-    ...modalProps
-  } = _ref;
+const ModalComponent = forwardRef(({
+  backdropProps,
+  children,
+  onClose,
+  isLarge,
+  isCentered = true,
+  isAnimated = true,
+  id,
+  appendToNode,
+  focusOnMount,
+  restoreFocus,
+  ...modalProps
+}, ref) => {
   const theme = useContext(ThemeContext);
   const modalRef = useRef(null);
   const environment = useDocument(theme);
@@ -87,7 +86,8 @@ const ModalComponent = forwardRef((_ref, ref) => {
     onClose,
     modalRef,
     focusOnMount,
-    restoreFocus
+    restoreFocus,
+    environment
   });
   useEffect(() => {
     if (!environment) {

package/dist/esm/elements/TooltipDialog/Body.js

@@ -29,7 +29,7 @@ import '../../styled/StyledDrawerFooter.js';
 import '../../styled/StyledDrawerFooterItem.js';
 import { useTooltipDialogContext } from '../../utils/useTooltipDialogContext.js';
 
-const BodyComponent = forwardRef((props, ref) => {
+const BodyComponent$1 = forwardRef((props, ref) => {
   const {
     getContentProps
   } = useTooltipDialogContext();
@@ -37,7 +37,7 @@ const BodyComponent = forwardRef((props, ref) => {
     ref: ref
   }));
 });
-BodyComponent.displayName = 'TooltipDialog.Body';
-const Body = BodyComponent;
+BodyComponent$1.displayName = 'TooltipDialog.Body';
+const Body$1 = BodyComponent$1;
 
-export { Body };
+export { Body$1 as Body };

package/dist/esm/elements/TooltipDialog/Close.js

@@ -31,11 +31,11 @@ import { useText } from '@zendeskgarden/react-theming';
 import { useTooltipDialogContext } from '../../utils/useTooltipDialogContext.js';
 import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
 
-const CloseComponent = forwardRef((props, ref) => {
+const CloseComponent$1 = forwardRef((props, ref) => {
   const {
     getCloseProps
   } = useTooltipDialogContext();
-  const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close tooltip', props['aria-describedby'] === undefined );
+  const ariaLabel = useText(CloseComponent$1, props, 'aria-label', 'Close tooltip', props['aria-describedby'] === undefined );
   return React__default.createElement(StyledTooltipDialogClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
@@ -44,7 +44,7 @@ const CloseComponent = forwardRef((props, ref) => {
     size: "small"
   }), React__default.createElement(SvgXStroke, null));
 });
-CloseComponent.displayName = 'TooltipDialog.Close';
-const Close = CloseComponent;
+CloseComponent$1.displayName = 'TooltipDialog.Close';
+const Close$1 = CloseComponent$1;
 
-export { Close };
+export { Close$1 as Close };

package/dist/esm/elements/TooltipDialog/Footer.js

@@ -28,10 +28,10 @@ import '../../styled/StyledDrawerBody.js';
 import '../../styled/StyledDrawerFooter.js';
 import '../../styled/StyledDrawerFooterItem.js';
 
-const FooterComponent = forwardRef((props, ref) => React__default.createElement(StyledTooltipDialogFooter, Object.assign({
+const FooterComponent$1 = forwardRef((props, ref) => React__default.createElement(StyledTooltipDialogFooter, Object.assign({
   ref: ref
 }, props)));
-FooterComponent.displayName = 'TooltipDialog.Footer';
-const Footer = FooterComponent;
+FooterComponent$1.displayName = 'TooltipDialog.Footer';
+const Footer$1 = FooterComponent$1;
 
-export { Footer };
+export { Footer$1 as Footer };

package/dist/esm/elements/TooltipDialog/FooterItem.js

@@ -28,10 +28,10 @@ import '../../styled/StyledDrawerBody.js';
 import '../../styled/StyledDrawerFooter.js';
 import '../../styled/StyledDrawerFooterItem.js';
 
-const FooterItemComponent = forwardRef((props, ref) => React__default.createElement(StyledTooltipDialogFooterItem, Object.assign({
+const FooterItemComponent$1 = forwardRef((props, ref) => React__default.createElement(StyledTooltipDialogFooterItem, Object.assign({
   ref: ref
 }, props)));
-FooterItemComponent.displayName = 'TooltipDialog.FooterItem';
-const FooterItem = FooterItemComponent;
+FooterItemComponent$1.displayName = 'TooltipDialog.FooterItem';
+const FooterItem$1 = FooterItemComponent$1;
 
-export { FooterItem };
+export { FooterItem$1 as FooterItem };

package/dist/esm/elements/TooltipDialog/Title.js

@@ -30,12 +30,11 @@ import '../../styled/StyledDrawerBody.js';
 import '../../styled/StyledDrawerFooter.js';
 import '../../styled/StyledDrawerFooterItem.js';
 
-const TitleComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    tag = 'div',
-    ...other
-  } = _ref;
+const TitleComponent = forwardRef(({
+  children,
+  tag = 'div',
+  ...other
+}, ref) => {
   const {
     getTitleProps,
     hasTitle,

package/dist/esm/elements/TooltipDialog/TooltipDialog.js

@@ -8,7 +8,7 @@ import React__default, { useContext, useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
 import { CSSTransition } from 'react-transition-group';
-import { useFloating, platform, offset, autoPlacement, flip, autoUpdate } from '@floating-ui/react-dom';
+import { useFloating, offset, autoPlacement, flip, platform, autoUpdate } from '@floating-ui/react-dom';
 import { useModal } from '@zendeskgarden/container-modal';
 import { mergeRefs } from 'react-merge-refs';
 import { TooltipDialogContext } from '../../utils/useTooltipDialogContext.js';
@@ -40,34 +40,37 @@ import { Body } from './Body.js';
 import { Close } from './Close.js';
 import { Footer } from './Footer.js';
 import { FooterItem } from './FooterItem.js';
-import { DEFAULT_THEME, getFloatingPlacements, useText } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, useDocument, getFloatingPlacements, useText } from '@zendeskgarden/react-theming';
 import { createPortal } from 'react-dom';
 
 const PLACEMENT_DEFAULT = 'top';
-const TooltipDialogComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    appendToNode,
-    referenceElement,
-    placement: _placement = 'auto',
-    fallbackPlacements: _fallbackPlacements,
-    offset: _offset,
-    onClose,
-    hasArrow = true,
-    keepMounted,
-    isAnimated,
-    zIndex,
-    backdropProps,
-    focusOnMount = true,
-    restoreFocus = true,
-    id,
-    ...props
-  } = _ref;
+const TooltipDialogComponent = React__default.forwardRef(({
+  appendToNode,
+  referenceElement,
+  placement: _placement = 'auto',
+  fallbackPlacements: _fallbackPlacements,
+  offset: _offset,
+  onClose,
+  hasArrow = true,
+  keepMounted,
+  isAnimated,
+  zIndex,
+  backdropProps,
+  focusOnMount = true,
+  restoreFocus = true,
+  id,
+  ...props
+}, ref) => {
   const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const environment = useDocument(theme);
   const previousReferenceElementRef = useRef();
   const modalRef = useRef(null);
   const transitionRef = useRef(null);
   const [floatingElement, setFloatingElement] = useState();
   const [hasTitle, setHasTitle] = useState(false);
+  const handleClose = event => {
+    referenceElement && onClose?.(event);
+  };
   const {
     getTitleProps,
     getCloseProps,
@@ -76,10 +79,11 @@ const TooltipDialogComponent = React__default.forwardRef((_ref, ref) => {
     getModalProps
   } = useModal({
     idPrefix: id,
-    onClose,
+    onClose: handleClose,
     modalRef,
     focusOnMount,
-    restoreFocus: false
+    restoreFocus: false,
+    environment
   });
   const [floatingPlacement, fallbackPlacements] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
   const {

package/dist/esm/node_modules/@babel/runtime/helpers/esm/extends.js

@@ -4,14 +4,14 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends.apply(null, arguments);
+  }, _extends$1.apply(null, arguments);
 }
 
-export { _extends as default };
+export { _extends$1 as default };

package/dist/esm/node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js

@@ -24,9 +24,9 @@ function _wrapNativeSuper(t) {
     return Wrapper.prototype = Object.create(t.prototype, {
       constructor: {
         value: Wrapper,
-        enumerable: !1,
-        writable: !0,
-        configurable: !0
+        enumerable: false,
+        writable: true,
+        configurable: true
       }
     }), _setPrototypeOf(Wrapper, t);
   }, _wrapNativeSuper(t);

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js

@@ -7,9 +7,9 @@
 import * as React from 'react';
 
 var _g, _circle;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,

package/dist/esm/node_modules/polished/dist/polished.esm.js

@@ -505,17 +505,13 @@ function hslToHex(hue, saturation, lightness) {
   return hslToRgb(hue, saturation, lightness, convertToHex);
 }
 function hsl(value, saturation, lightness) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {
-    return hslToHex(value, saturation, lightness);
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
+  if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
     return hslToHex(value.hue, value.saturation, value.lightness);
   }
   throw new PolishedError(1);
 }
 function hsla(value, saturation, lightness, alpha) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {
-    return "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
+  if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
     return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
   }
   throw new PolishedError(2);
@@ -529,12 +525,7 @@ function rgb(value, green, blue) {
   throw new PolishedError(6);
 }
 function rgba(firstValue, secondValue, thirdValue, fourthValue) {
-  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
-    var rgbValue = parseToRgb(firstValue);
-    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
-  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
-    return "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
-  } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
+  if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
     return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
   }
   throw new PolishedError(7);

package/dist/esm/styled/StyledBackdrop.js

@@ -8,36 +8,33 @@ import PropTypes from 'prop-types';
 import styled, { keyframes, css } from 'styled-components';
 import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'modals.backdrop';
-const animationName = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
-const animationStyles = props => {
+const COMPONENT_ID$j = 'modals.backdrop';
+const animationName$1 = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
+const animationStyles$1 = props => {
   if (props.$isAnimated) {
-    return css(["animation:", " 0.15s ease-in;"], animationName);
+    return css(["animation:", " 0.15s ease-in;"], animationName$1);
   }
   return '';
 };
 const StyledBackdrop = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
-})(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.$isCentered && 'center', props => props.$isCentered && 'center', _ref => {
-  let {
-    theme
-  } = _ref;
-  return getColor({
-    theme,
-    hue: 'neutralHue',
-    transparency: theme.opacity[1000],
-    light: {
-      shade: 900
-    },
-    dark: {
-      shade: 1200
-    }
-  });
-}, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles, componentStyles);
+})(["display:flex;position:fixed;inset:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";", ";", ";"], props => props.$isCentered && 'center', props => props.$isCentered && 'center', ({
+  theme
+}) => getColor({
+  theme,
+  hue: 'neutralHue',
+  transparency: theme.opacity[1000],
+  light: {
+    shade: 900
+  },
+  dark: {
+    shade: 1200
+  }
+}), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, componentStyles);
 StyledBackdrop.propTypes = {
   $isCentered: PropTypes.bool,
   $isAnimated: PropTypes.bool

package/dist/esm/styled/StyledBody.js

@@ -7,21 +7,18 @@
 import styled from 'styled-components';
 import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'modals.body';
+const COMPONENT_ID$i = 'modals.body';
 const StyledBody = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
-})(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, _ref => {
-  let {
-    theme
-  } = _ref;
-  return getColor({
-    theme,
-    variable: 'foreground.default'
-  });
-}, props => props.theme.fontSizes.md, componentStyles);
+})(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color-scheme:only ", ";color:", ";font-size:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), p => p.theme.colors.base, ({
+  theme
+}) => getColor({
+  theme,
+  variable: 'foreground.default'
+}), props => props.theme.fontSizes.md, componentStyles);
 
 export { StyledBody };

package/dist/esm/styled/StyledClose.js

@@ -8,18 +8,18 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { IconButton } from '@zendeskgarden/react-buttons';
 
-const COMPONENT_ID = 'modals.close';
-const BASE_MULTIPLIERS = {
+const COMPONENT_ID$h = 'modals.close';
+const BASE_MULTIPLIERS$1 = {
   top: 2.5,
   side: 6.5,
   size: 10
 };
 const StyledClose = styled(IconButton).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
-})(["position:absolute;top:", "px;", ":", ";", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, componentStyles);
+})(["position:absolute;top:", "px;", ":", ";", ";"], props => props.theme.space.base * BASE_MULTIPLIERS$1.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS$1.side}px`, componentStyles);
 
-export { BASE_MULTIPLIERS, StyledClose };
+export { BASE_MULTIPLIERS$1 as BASE_MULTIPLIERS, StyledClose };

package/dist/esm/styled/StyledDrawer.js

@@ -7,12 +7,11 @@
 import styled, { css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'modals.drawer_modal';
+const COMPONENT_ID$5 = 'modals.drawer_modal';
 const DRAWER_WIDTH = 380;
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles = ({
+  theme
+}) => {
   const offsetY = `${theme.space.base * 5}px`;
   const blurRadius = `${theme.space.base * 7}px`;
   const shadowColor = getColor({
@@ -31,8 +30,8 @@ const colorStyles = _ref => {
   return css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
 };
 const StyledDrawer = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDrawer",
   componentId: "sc-zp66t3-0"

package/dist/esm/styled/StyledDrawerBody.js

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledBody } from './StyledBody.js';
 
-const COMPONENT_ID = 'modals.drawer_modal.body';
+const COMPONENT_ID$2 = 'modals.drawer_modal.body';
 const StyledDrawerBody = styled(StyledBody).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDrawerBody",
   componentId: "sc-13qufyn-0"