@zendeskgarden/react-modals 8.47.0 → 8.48.1

package/dist/index.esm.js

@@ -6,7 +6,7 @@
  */
 
 import * as React from 'react';
-import React__default, { createContext, useContext, useRef, useEffect, useMemo, useState, forwardRef } from 'react';
+import React__default, { createContext, useContext, forwardRef, useRef, useEffect, useMemo, useState } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 import styled, { keyframes, css, ThemeContext } from 'styled-components';
 import PropTypes from 'prop-types';
@@ -22,14 +22,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -37,19 +32,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -283,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -313,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -340,7 +328,7 @@ var colorStyles = function colorStyles(props) {
 };
 var StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -366,7 +354,7 @@ StyledClose.defaultProps = {
 var COMPONENT_ID$g = 'modals.footer';
 var StyledFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -384,7 +372,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -404,7 +392,7 @@ StyledFooterItem.defaultProps = {
 var COMPONENT_ID$e = 'modals.header';
 var StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -429,37 +417,35 @@ StyledHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _g, _circle;
 
-var _ref$1 = /*#__PURE__*/React.createElement("g", {
-  fill: "none",
-  stroke: "currentColor"
-}, /*#__PURE__*/React.createElement("circle", {
-  cx: 7.5,
-  cy: 8.5,
-  r: 7
-}), /*#__PURE__*/React.createElement("path", {
-  strokeLinecap: "round",
-  d: "M7.5 4.5V9"
-}));
-
-var _ref2 = /*#__PURE__*/React.createElement("circle", {
-  cx: 7.5,
-  cy: 12,
-  r: 1,
-  fill: "currentColor"
-});
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
-function SvgAlertErrorStroke(props) {
+var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$1, _ref2);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 7.5,
+    cy: 8.5,
+    r: 7
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "M7.5 4.5V9"
+  }))), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 7.5,
+    cy: 12,
+    r: 1,
+    fill: "currentColor"
+  })));
+};
 
 var StyledDangerIcon = styled(SvgAlertErrorStroke).withConfig({
   displayName: "StyledDangerIcon",
@@ -493,7 +479,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -533,7 +519,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -627,7 +613,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.47.0',
+    'data-garden-version': '8.48.1',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -658,7 +644,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTooltipModalTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -678,7 +664,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -700,7 +686,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -716,7 +702,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -730,7 +716,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -764,7 +750,7 @@ var boxShadow = function boxShadow(props) {
 };
 var StyledDrawerModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
@@ -790,7 +776,7 @@ StyledDrawerModal.defaultProps = {
 var COMPONENT_ID$4 = 'modals.drawer_modal.header';
 var StyledDrawerModalHeader = styled(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledDrawerModalHeader",
   componentId: "sc-1u04rqw-0"
@@ -806,7 +792,7 @@ StyledDrawerModalHeader.defaultProps = {
 var COMPONENT_ID$3 = 'modals.drawer_modal.close';
 var StyledDrawerModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledDrawerModalClose",
   componentId: "sc-hrnaom-0"
@@ -826,7 +812,7 @@ StyledDrawerModalClose.defaultProps = {
 var COMPONENT_ID$2 = 'modals.drawer_modal.body';
 var StyledDrawerModalBody = styled(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
@@ -842,7 +828,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
@@ -860,7 +846,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.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
@@ -893,7 +879,7 @@ var isOverflowing = function isOverflowing(element) {
   var marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
   return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
 };
-var Modal = React__default.forwardRef(function (_ref, ref) {
+var Modal = forwardRef(function (_ref, ref) {
   var backdropProps = _ref.backdropProps,
       children = _ref.children,
       onClose = _ref.onClose,
@@ -1010,24 +996,24 @@ var Body$2 = React__default.forwardRef(function (props, ref) {
 });
 Body$2.displayName = 'Body';
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path;
 
-var _ref = /*#__PURE__*/React.createElement("path", {
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M3 13L13 3m0 10L3 3"
-});
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function SvgXStroke(props) {
+var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 13L13 3m0 10L3 3"
+  })));
+};
 
 var Close$2 = React__default.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
@@ -1038,7 +1024,7 @@ var Close$2 = React__default.forwardRef(function (props, ref) {
 });
 Close$2.displayName = 'Close';
 
-var Footer = React__default.forwardRef(function (props, ref) {
+var Footer$2 = React__default.forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       isLarge = _useModalContext.isLarge;
   return React__default.createElement(StyledFooter, _extends$2({
@@ -1046,16 +1032,16 @@ var Footer = React__default.forwardRef(function (props, ref) {
     isLarge: isLarge
   }, props));
 });
-Footer.displayName = 'Footer';
+Footer$2.displayName = 'Footer';
 
-var FooterItem = React__default.forwardRef(function (props, ref) {
+var FooterItem$2 = React__default.forwardRef(function (props, ref) {
   return React__default.createElement(StyledFooterItem, _extends$2({
     ref: ref
   }, props));
 });
-FooterItem.displayName = 'FooterItem';
+FooterItem$2.displayName = 'FooterItem';
 
-var Header$1 = React__default.forwardRef(function (props, ref) {
+var Header$1 = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getTitleProps = _useModalContext.getTitleProps;
   return React__default.createElement(StyledHeader, _extends$2({
@@ -1073,35 +1059,54 @@ var useTooltipModalContext = function useTooltipModalContext() {
   return context;
 };
 
-var Title = React__default.forwardRef(function (props, ref) {
+var TitleComponent = forwardRef(function (props, ref) {
   var _useTooltipModalConte = useTooltipModalContext(),
       getTitleProps = _useTooltipModalConte.getTitleProps;
   return React__default.createElement(StyledTooltipModalTitle, _extends$2({
     ref: ref
   }, getTitleProps(props)), props.children);
 });
-Title.displayName = 'TooltipModal.Title';
+TitleComponent.displayName = 'TooltipModal.Title';
+var Title = TitleComponent;
 
-var Body$1 = React__default.forwardRef(function (props, ref) {
+var BodyComponent$1 = forwardRef(function (props, ref) {
   var _useTooltipModalConte = useTooltipModalContext(),
       getContentProps = _useTooltipModalConte.getContentProps;
   return React__default.createElement(StyledTooltipModalBody, _extends$2({
     ref: ref
   }, getContentProps(props)));
 });
-Body$1.displayName = 'TooltipModal.Body';
+BodyComponent$1.displayName = 'TooltipModal.Body';
+var Body$1 = BodyComponent$1;
 
-var Close$1 = React__default.forwardRef(function (props, ref) {
+var CloseComponent$1 = forwardRef(function (props, ref) {
   var _useTooltipModalConte = useTooltipModalContext(),
       getCloseProps = _useTooltipModalConte.getCloseProps;
   return React__default.createElement(StyledTooltipModalClose, _extends$2({
     ref: ref
   }, getCloseProps(props)), React__default.createElement(SvgXStroke, null));
 });
-Close$1.displayName = 'TooltipModal.Close';
+CloseComponent$1.displayName = 'TooltipModal.Close';
+var Close$1 = CloseComponent$1;
+
+var FooterComponent$1 = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledTooltipModalFooter, _extends$2({
+    ref: ref
+  }, props));
+});
+FooterComponent$1.displayName = 'TooltipModal.Footer';
+var Footer$1 = FooterComponent$1;
+
+var FooterItemComponent$1 = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledTooltipModalFooterItem, _extends$2({
+    ref: ref
+  }, props));
+});
+FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
+var FooterItem$1 = FooterItemComponent$1;
 
 var _excluded$1 = ["referenceElement", "popperModifiers", "placement", "onClose", "hasArrow", "isAnimated", "zIndex", "style", "backdropProps", "focusOnMount", "restoreFocus", "id"];
-var TooltipModal = React__default.forwardRef(function (_ref, ref) {
+var TooltipModalComponent = React__default.forwardRef(function (_ref, ref) {
   var referenceElement = _ref.referenceElement,
       popperModifiers = _ref.popperModifiers,
       placement = _ref.placement,
@@ -1190,19 +1195,15 @@ var TooltipModal = React__default.forwardRef(function (_ref, ref) {
     }, modalProps)))));
   });
 });
-TooltipModal.Title = Title;
-TooltipModal.Body = Body$1;
-TooltipModal.Close = Close$1;
-TooltipModal.Footer = StyledTooltipModalFooter;
-TooltipModal.FooterItem = StyledTooltipModalFooterItem;
-TooltipModal.defaultProps = {
+TooltipModalComponent.displayName = 'TooltipModal';
+TooltipModalComponent.defaultProps = {
   placement: 'auto',
   isAnimated: true,
   hasArrow: true,
   focusOnMount: true,
   restoreFocus: true
 };
-TooltipModal.propTypes = {
+TooltipModalComponent.propTypes = {
   referenceElement: PropTypes.any,
   popperModifiers: PropTypes.any,
   placement: PropTypes.any,
@@ -1215,36 +1216,61 @@ TooltipModal.propTypes = {
   restoreFocus: PropTypes.bool,
   id: PropTypes.string
 };
+var TooltipModal = TooltipModalComponent;
+TooltipModal.Body = Body$1;
+TooltipModal.Close = Close$1;
+TooltipModal.Footer = Footer$1;
+TooltipModal.FooterItem = FooterItem$1;
+TooltipModal.Title = Title;
 
-var Header = React__default.forwardRef(function (props, ref) {
+var HeaderComponent = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getTitleProps = _useModalContext.getTitleProps;
   return React__default.createElement(StyledDrawerModalHeader, _extends$2({
     ref: ref
   }, getTitleProps(props)));
 });
-Header.displayName = 'DrawerModal.Header';
+HeaderComponent.displayName = 'DrawerModal.Header';
+var Header = HeaderComponent;
 
-var Body = React__default.forwardRef(function (props, ref) {
+var BodyComponent = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getContentProps = _useModalContext.getContentProps;
   return React__default.createElement(StyledDrawerModalBody, _extends$2({
     ref: ref
   }, getContentProps(props)), props.children);
 });
-Body.displayName = 'DrawerModal.Body';
+BodyComponent.displayName = 'DrawerModal.Body';
+var Body = BodyComponent;
 
-var Close = React__default.forwardRef(function (props, ref) {
+var CloseComponent = forwardRef(function (props, ref) {
   var _useModalContext = useModalContext(),
       getCloseProps = _useModalContext.getCloseProps;
   return React__default.createElement(StyledDrawerModalClose, _extends$2({
     ref: ref
   }, getCloseProps(props)), React__default.createElement(SvgXStroke, null));
 });
-Close.displayName = 'DrawerModal.Close';
+CloseComponent.displayName = 'DrawerModal.Close';
+var Close = CloseComponent;
+
+var FooterComponent = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledDrawerModalFooter, _extends$2({
+    ref: ref
+  }, props));
+});
+FooterComponent.displayName = 'DrawerModal.Footer';
+var Footer = FooterComponent;
+
+var FooterItemComponent = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledDrawerModalFooterItem, _extends$2({
+    ref: ref
+  }, props));
+});
+FooterItemComponent.displayName = 'DrawerModal.FooterItem';
+var FooterItem = FooterItemComponent;
 
 var _excluded = ["id", "isOpen", "onClose", "backdropProps", "appendToNode", "focusOnMount", "restoreFocus"];
-var DrawerModal = forwardRef(function (_ref, ref) {
+var DrawerModalComponent = forwardRef(function (_ref, ref) {
   var id = _ref.id,
       isOpen = _ref.isOpen,
       onClose = _ref.onClose,
@@ -1326,13 +1352,8 @@ var DrawerModal = forwardRef(function (_ref, ref) {
     isAnimated: true
   }, backdropProps)), React__default.createElement(StyledDrawerModal, modalProps)))), rootNode);
 });
-DrawerModal.Header = Header;
-DrawerModal.Body = Body;
-DrawerModal.Close = Close;
-DrawerModal.Footer = StyledDrawerModalFooter;
-DrawerModal.FooterItem = StyledDrawerModalFooterItem;
-DrawerModal.displayName = 'DrawerModal';
-DrawerModal.propTypes = {
+DrawerModalComponent.displayName = 'DrawerModal';
+DrawerModalComponent.propTypes = {
   backdropProps: PropTypes.object,
   focusOnMount: PropTypes.bool,
   restoreFocus: PropTypes.bool,
@@ -1341,5 +1362,11 @@ DrawerModal.propTypes = {
   id: PropTypes.string,
   isOpen: PropTypes.bool
 };
+var DrawerModal = DrawerModalComponent;
+DrawerModal.Body = Body;
+DrawerModal.Close = Close;
+DrawerModal.Footer = Footer;
+DrawerModal.FooterItem = FooterItem;
+DrawerModal.Header = Header;
 
-export { Body$2 as Body, Close$2 as Close, DrawerModal, Footer, FooterItem, Header$1 as Header, Modal, TooltipModal };
+export { Body$2 as Body, Close$2 as Close, DrawerModal, Footer$2 as Footer, FooterItem$2 as FooterItem, Header$1 as Header, Modal, TooltipModal };

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

@@ -4,18 +4,12 @@
  * 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 { RefAttributes, HTMLAttributes, PropsWithoutRef, ForwardRefExoticComponent } from 'react';
-import { StyledDrawerModalFooter, StyledDrawerModalFooterItem } from '../../styled';
+import React, { HTMLAttributes } from 'react';
 import { Header } from './Header';
 import { Body } from './Body';
 import { Close } from './Close';
-interface IStaticDrawerModalExport<T, P> extends ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {
-    Header: typeof Header;
-    Body: typeof Body;
-    Close: typeof Close;
-    Footer: typeof StyledDrawerModalFooter;
-    FooterItem: typeof StyledDrawerModalFooterItem;
-}
+import { Footer } from './Footer';
+import { FooterItem } from './FooterItem';
 export interface IDrawerModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Opens the modal
@@ -31,10 +25,6 @@ export interface IDrawerModalProps extends HTMLAttributes<HTMLDivElement> {
      * @param {Object} event The DOM event that triggered the close action
      */
     onClose?: (event: KeyboardEvent | MouseEvent) => void;
-    /**
-     * Sets the root ID. A unique ID is created if none is provided.
-     */
-    id?: string;
     /**
      * Defines the DOM element that the modal will attatch to
      */
@@ -51,5 +41,10 @@ export interface IDrawerModalProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const DrawerModal: IStaticDrawerModalExport<HTMLDivElement, IDrawerModalProps>;
-export {};
+export declare const DrawerModal: React.ForwardRefExoticComponent<IDrawerModalProps & React.RefAttributes<HTMLDivElement>> & {
+    Body: typeof Body;
+    Close: typeof Close;
+    Footer: typeof Footer;
+    FooterItem: typeof FooterItem;
+    Header: typeof Header;
+};

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

@@ -0,0 +1,11 @@
+/**
+ * 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 React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+/**
+ * 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 React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLSpanElement>
+ */
+export declare const FooterItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -4,9 +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.
  */
-import React from 'react';
-import { IStyledHeaderProps } from '../styled';
+import React, { HTMLAttributes } from 'react';
+export interface IHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Applies danger styling
+     */
+    isDanger?: boolean;
+}
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Header: React.ForwardRefExoticComponent<IStyledHeaderProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Header: React.ForwardRefExoticComponent<IHeaderProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -24,10 +24,6 @@ export interface IModalProps extends HTMLAttributes<HTMLDivElement> {
      * Animates the modal
      */
     isAnimated?: boolean;
-    /**
-     * Sets the root ID. A unique ID is created if none is provided.
-     */
-    id?: string;
     /**
      * Defines the DOM element that the modal will attatch to
      */

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

@@ -0,0 +1,11 @@
+/**
+ * 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 React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+/**
+ * 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 React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLSpanElement>
+ */
+export declare const FooterItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;