@zendeskgarden/react-modals 8.75.0 → 8.76.0

package/dist/esm/styled/StyledTooltipModalTitle.js

@@ -0,0 +1,28 @@
+/**
+* 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 styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'modals.tooltip_modal.title';
+const sizeStyles = props => `
+  /* stylelint-disable-next-line property-no-unknown */
+  padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * 8}px;
+  line-height: ${getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
+  font-size: ${props.theme.fontSizes.md};
+`;
+const StyledTooltipModalTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledTooltipModalTitle",
+  componentId: "sc-11xjgjs-0"
+})(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModalTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModalTitle };

package/dist/esm/styled/StyledTooltipWrapper.js

@@ -0,0 +1,27 @@
+/**
+* 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 styled from 'styled-components';
+import { menuStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getMenuPosition } from '../utils/gardenPlacements.js';
+
+const StyledTooltipWrapper = styled.div.attrs(props => ({
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
+  displayName: "StyledTooltipWrapper",
+  componentId: "sc-1xk05kf-0"
+})(["", ";"], props => menuStyles(getMenuPosition(props.placement), {
+  theme: props.theme,
+  hidden: false,
+  margin: '0',
+  zIndex: props.zIndex,
+  animationModifier: '.is-animated'
+}));
+StyledTooltipWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipWrapper };

package/dist/esm/types/index.js

@@ -0,0 +1,9 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+
+export { PLACEMENT };

package/dist/esm/utils/gardenPlacements.js

@@ -0,0 +1,62 @@
+/**
+* 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.
+*/
+function getPopperPlacement(gardenPlacement) {
+  const gardenToPopperMapping = {
+    auto: 'auto',
+    top: 'top',
+    'top-start': 'top-start',
+    'top-end': 'top-end',
+    bottom: 'bottom',
+    'bottom-start': 'bottom-start',
+    'bottom-end': 'bottom-end',
+    end: 'right',
+    'end-top': 'right-start',
+    'end-bottom': 'right-end',
+    start: 'left',
+    'start-top': 'left-start',
+    'start-bottom': 'left-end'
+  };
+  return gardenToPopperMapping[gardenPlacement];
+}
+function getRtlPopperPlacement(gardenPlacement) {
+  const rtlPlacementMappings = {
+    left: 'right',
+    'left-start': 'right-start',
+    'left-end': 'right-end',
+    'top-start': 'top-end',
+    'top-end': 'top-start',
+    right: 'left',
+    'right-start': 'left-start',
+    'right-end': 'left-end',
+    'bottom-start': 'bottom-end',
+    'bottom-end': 'bottom-start'
+  };
+  const popperPlacement = getPopperPlacement(gardenPlacement);
+  return rtlPlacementMappings[popperPlacement] || popperPlacement;
+}
+function getArrowPosition(popperPlacement) {
+  const arrowPositionMappings = {
+    top: 'bottom',
+    'top-start': 'bottom-left',
+    'top-end': 'bottom-right',
+    right: 'left',
+    'right-start': 'left-top',
+    'right-end': 'left-bottom',
+    bottom: 'top',
+    'bottom-start': 'top-left',
+    'bottom-end': 'top-right',
+    left: 'right',
+    'left-start': 'right-top',
+    'left-end': 'right-bottom'
+  };
+  return arrowPositionMappings[popperPlacement] || 'top';
+}
+function getMenuPosition(popperPlacement) {
+  return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
+}
+
+export { getArrowPosition, getMenuPosition, getPopperPlacement, getRtlPopperPlacement };

package/dist/esm/utils/useModalContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+const ModalsContext = createContext(undefined);
+const useModalContext = () => {
+  const context = useContext(ModalsContext);
+  if (context === undefined) {
+    throw new Error('useModalContext must be used within a ModalsContext.Provider');
+  }
+  return context;
+};
+
+export { ModalsContext, useModalContext };

package/dist/esm/utils/useTooltipModalContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+const TooltipModalContext = createContext(undefined);
+const useTooltipModalContext = () => {
+  const context = useContext(TooltipModalContext);
+  if (context === undefined) {
+    throw new Error('Element must be used within a TooltipModal component.');
+  }
+  return context;
+};
+
+export { TooltipModalContext, useTooltipModalContext };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -56,21 +55,6 @@ var css__default = /*#__PURE__*/_interopDefault(css);
 var getScrollbarSize__default = /*#__PURE__*/_interopDefault(getScrollbarSize);
 var activeElement__default = /*#__PURE__*/_interopDefault(activeElement);
 
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
-}
-
 const COMPONENT_ID$j = 'modals.backdrop';
 const animationName$1 = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
 const animationStyles$1 = props => {
@@ -81,7 +65,7 @@ const animationStyles$1 = props => {
 };
 const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -97,7 +81,7 @@ StyledBackdrop.propTypes = {
 const COMPONENT_ID$i = 'modals.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -122,7 +106,7 @@ const BASE_MULTIPLIERS$1 = {
 };
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -134,7 +118,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$g = 'modals.footer';
 const StyledFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -146,7 +130,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$f = 'modals.footer_item';
 const StyledFooterItem = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -158,7 +142,7 @@ StyledFooterItem.defaultProps = {
 const COMPONENT_ID$e = 'modals.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -229,7 +213,7 @@ const sizeStyles$1 = props => {
 };
 const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -245,7 +229,7 @@ StyledModal.defaultProps = {
 const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -328,7 +312,7 @@ StyledTooltipWrapper.defaultProps = {
 const COMPONENT_ID$b = 'modals.tooltip_modal';
 const StyledTooltipModal = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.75.0',
+  'data-garden-version': '8.76.0',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipModal",
@@ -357,7 +341,7 @@ const sizeStyles = props => `
 `;
 const StyledTooltipModalTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -369,7 +353,7 @@ StyledTooltipModalTitle.defaultProps = {
 const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 const StyledTooltipModalBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -381,7 +365,7 @@ StyledTooltipModalBody.defaultProps = {
 const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 const StyledTooltipModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -393,7 +377,7 @@ StyledTooltipModalFooter.defaultProps = {
 const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -405,7 +389,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -431,7 +415,7 @@ const boxShadow = props => {
 };
 const StyledDrawerModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -448,7 +432,7 @@ const BASE_MULTIPLIERS = {
 };
 const StyledDrawerModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledDrawerModalClose",
   componentId: "sc-hrnaom-0"
@@ -460,7 +444,7 @@ StyledDrawerModalClose.defaultProps = {
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
 const StyledDrawerModalHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledDrawerModalHeader",
   componentId: "sc-1u04rqw-0"
@@ -472,7 +456,7 @@ StyledDrawerModalHeader.defaultProps = {
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
 const StyledDrawerModalBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -484,7 +468,7 @@ StyledDrawerModalBody.defaultProps = {
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
 const StyledDrawerModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -496,7 +480,7 @@ StyledDrawerModalFooter.defaultProps = {
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
 const StyledDrawerModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -628,10 +612,10 @@ const Modal = React.forwardRef((_ref, ref) => {
   }
   return ReactDOM.createPortal( React__namespace.default.createElement(ModalsContext.Provider, {
     value: value
-  }, React__namespace.default.createElement(StyledBackdrop, _extends$2({
+  }, React__namespace.default.createElement(StyledBackdrop, Object.assign({
     isCentered: isCentered,
     isAnimated: isAnimated
-  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledModal, _extends$2({
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledModal, Object.assign({
     isCentered: isCentered,
     isAnimated: isAnimated,
     isLarge: isLarge
@@ -659,7 +643,7 @@ const Body$2 = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__namespace.default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }));
 });
@@ -692,7 +676,7 @@ const Close$2 = React.forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = reactTheming.useText(Close$2, props, 'aria-label', 'Close modal');
-  return React__namespace.default.createElement(StyledClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
@@ -705,14 +689,14 @@ const Footer$2 = React__namespace.default.forwardRef((props, ref) => {
   const {
     isLarge
   } = useModalContext();
-  return React__namespace.default.createElement(StyledFooter, _extends$2({
+  return React__namespace.default.createElement(StyledFooter, Object.assign({
     ref: ref,
     isLarge: isLarge
   }, props));
 });
 Footer$2.displayName = 'Footer';
 
-const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, _extends$2({
+const FooterItem$2 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, Object.assign({
   ref: ref
 }, props)));
 FooterItem$2.displayName = 'FooterItem';
@@ -739,7 +723,7 @@ const Header$1 = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasHeader, setHasHeader]);
-  return React__namespace.default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledHeader, Object.assign({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
@@ -784,7 +768,7 @@ const TitleComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasTitle, setHasTitle]);
-  return React__namespace.default.createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledTooltipModalTitle, Object.assign({}, getTitleProps(other), {
     as: tag,
     ref: ref
   }), children);
@@ -802,7 +786,7 @@ const BodyComponent$1 = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useTooltipModalContext();
-  return React__namespace.default.createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledTooltipModalBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }));
 });
@@ -814,7 +798,7 @@ const CloseComponent$1 = React.forwardRef((props, ref) => {
     getCloseProps
   } = useTooltipModalContext();
   const ariaLabel = reactTheming.useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
-  return React__namespace.default.createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledTooltipModalClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
@@ -824,13 +808,13 @@ const CloseComponent$1 = React.forwardRef((props, ref) => {
 CloseComponent$1.displayName = 'TooltipModal.Close';
 const Close$1 = CloseComponent$1;
 
-const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooter, _extends$2({
+const FooterComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooter, Object.assign({
   ref: ref
 }, props)));
 FooterComponent$1.displayName = 'TooltipModal.Footer';
 const Footer$1 = FooterComponent$1;
 
-const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooterItem, _extends$2({
+const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledTooltipModalFooterItem, Object.assign({
   ref: ref
 }, props)));
 FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
@@ -922,15 +906,15 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
   }, transitionState => {
     return React__namespace.default.createElement(TooltipModalContext.Provider, {
       value: value
-    }, React__namespace.default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
+    }, React__namespace.default.createElement(StyledTooltipModalBackdrop, Object.assign({}, getBackdropProps(), backdropProps, {
       ref: transitionRef
-    }), React__namespace.default.createElement(StyledTooltipWrapper, _extends$2({
+    }), React__namespace.default.createElement(StyledTooltipWrapper, Object.assign({
       ref: setPopperElement,
       style: styles.popper,
       placement: state ? state.placement : undefined,
       zIndex: zIndex,
       isAnimated: isAnimated
-    }, attributes.popper), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
+    }, attributes.popper), React__namespace.default.createElement(StyledTooltipModal, Object.assign({
       transitionState: transitionState,
       placement: state ? state.placement : 'top',
       hasArrow: hasArrow,
@@ -989,7 +973,7 @@ const HeaderComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasHeader, setHasHeader]);
-  return React__namespace.default.createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(other), {
+  return React__namespace.default.createElement(StyledDrawerModalHeader, Object.assign({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
@@ -1008,7 +992,7 @@ const BodyComponent = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__namespace.default.createElement(StyledDrawerModalBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledDrawerModalBody, Object.assign({}, getContentProps(props), {
     ref: ref
   }), props.children);
 });
@@ -1025,7 +1009,7 @@ const CloseComponent = React.forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__namespace.default.createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledDrawerModalClose, Object.assign({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
@@ -1035,13 +1019,13 @@ const CloseComponent = React.forwardRef((props, ref) => {
 CloseComponent.displayName = 'DrawerModal.Close';
 const Close = CloseComponent;
 
-const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooter, _extends$2({
+const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooter, Object.assign({
   ref: ref
 }, props)));
 FooterComponent.displayName = 'DrawerModal.Footer';
 const Footer = FooterComponent;
 
-const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooterItem, _extends$2({
+const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooterItem, Object.assign({
   ref: ref
 }, props)));
 FooterItemComponent.displayName = 'DrawerModal.FooterItem';
@@ -1162,9 +1146,9 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
     unmountOnExit: true,
     classNames: "garden-drawer-transition",
     nodeRef: transitionRef
-  }, React__namespace.default.createElement(StyledBackdrop, _extends$2({
+  }, React__namespace.default.createElement(StyledBackdrop, Object.assign({
     isAnimated: true
-  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawerModal, _extends$2({}, modalProps, ariaProps, props, {
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawerModal, Object.assign({}, modalProps, ariaProps, props, {
     ref: mergeRefs__default.default([ref, modalRef, transitionRef])
   }))))), rootNode);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-modals",
-  "version": "8.75.0",
+  "version": "8.76.0",
   "description": "Components relating to modals in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -32,14 +32,14 @@
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.10",
-    "@zendeskgarden/react-theming": "^8.75.0",
+    "@zendeskgarden/react-theming": "^8.76.0",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "56a54793a611efc223b8e36262d428365613c853"
+  "gitHead": "3e52650c39fd1085a2e97b40a43eed7bc1e21937"
 }