@zendeskgarden/react-modals 8.57.1 → 8.59.0

package/dist/index.esm.js

@@ -17,175 +17,21 @@ import mergeRefs from 'react-merge-refs';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    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;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 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);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 function isDocument(element) {
   return 'nodeType' in element && element.nodeType === document.DOCUMENT_NODE;
 }
@@ -266,29 +112,15 @@ function scrollbarSize(recalc) {
   return size;
 }
 
-var COMPONENT_ID$j = 'modals.backdrop';
-var animationName$1 = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
-var StyledBackdrop = styled.div.attrs({
+const COMPONENT_ID$j = 'modals.backdrop';
+const animationName$1 = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
+const StyledBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
-})(["display:flex;position:fixed;top:0;right:0;bottom:0;left:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";animation:", ";", ";"], function (props) {
-  return props.isCentered && 'center';
-}, function (props) {
-  return props.isCentered && 'center';
-}, function (props) {
-  return getColor('neutralHue', 800, props.theme, 0.85);
-}, function (props) {
-  return props.theme.fonts.system;
-}, function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return props.isAnimated && css(["", " 0.15s ease-in"], animationName$1);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$j, props);
-});
+})(["display:flex;position:fixed;top:0;right:0;bottom:0;left:0;align-items:", ";justify-content:", ";z-index:400;background-color:", ";overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";animation:", ";", ";"], props => props.isCentered && 'center', props => props.isCentered && 'center', props => getColor('neutralHue', 800, props.theme, 0.85), props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.isAnimated && css(["", " 0.15s ease-in"], animationName$1), props => retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledBackdrop.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -297,128 +129,72 @@ StyledBackdrop.propTypes = {
   isAnimated: PropTypes.bool
 };
 
-var COMPONENT_ID$i = 'modals.body';
-var StyledBody = styled.div.attrs({
+const COMPONENT_ID$i = 'modals.body';
+const StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
-})(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";color:", ";font-size:", ";", ";"], function (props) {
-  return "".concat(props.theme.space.base * 5, "px ").concat(props.theme.space.base * 10, "px");
-}, function (props) {
-  return getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$i, props);
-});
+})(["display:block;margin:0;padding:", ";height:100%;overflow:auto;line-height:", ";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), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$h = 'modals.close';
-var colorStyles = function colorStyles(props) {
-  var backgroundColor = 'primaryHue';
-  var foregroundColor = 'neutralHue';
+const COMPONENT_ID$h = 'modals.close';
+const colorStyles = props => {
+  const backgroundColor = 'primaryHue';
+  const 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 = {
+const BASE_MULTIPLIERS$1 = {
   top: 2.5,
   side: 6.5,
   size: 10
 };
-var StyledClose = styled.button.attrs({
+const StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).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 * BASE_MULTIPLIERS$1.top;
-}, function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return "".concat(props.theme.space.base * BASE_MULTIPLIERS$1.side, "px");
-}, function (props) {
-  return props.theme.space.base * BASE_MULTIPLIERS$1.size;
-}, function (props) {
-  return props.theme.space.base * BASE_MULTIPLIERS$1.size;
-}, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$h, props);
-});
+})(["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;}", ";"], 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`, props => props.theme.space.base * BASE_MULTIPLIERS$1.size, props => props.theme.space.base * BASE_MULTIPLIERS$1.size, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$g = 'modals.footer';
-var StyledFooter = styled.div.attrs({
+const COMPONENT_ID$g = 'modals.footer';
+const StyledFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], function (props) {
-  return props.isLarge && "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 200, props.theme));
-}, function (props) {
-  return props.isLarge ? "".concat(props.theme.space.base * 8, "px ").concat(props.theme.space.base * 10, "px") : "".concat(props.theme.space.base * 5, "px ").concat(props.theme.space.base * 10, "px ").concat(props.theme.space.base * 8, "px");
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$g, props);
-});
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;border-top:", ";padding:", ";", ";"], props => props.isLarge && `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$f = 'modals.footer_item';
-var StyledFooterItem = styled.span.attrs({
+const COMPONENT_ID$f = 'modals.footer_item';
+const StyledFooterItem = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
-})(["display:flex;margin-", ":", "px;min-width:0;&:first-child{margin-", ":0;}", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$f, props);
-});
+})(["display:flex;margin-", ":", "px;min-width:0;&:first-child{margin-", ":0;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 5, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledFooterItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$e = 'modals.header';
-var StyledHeader = styled.div.attrs({
+const COMPONENT_ID$e = 'modals.header';
+const StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
-})(["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) {
-  return props.isDanger ? getColor('dangerHue', 600, props.theme) : props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$e, props);
-});
+})(["display:block;position:", ";margin:0;border-bottom:", " ", ";padding:", ";", "  line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, getColor('neutralHue', 200), props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.isDanger ? getColor('dangerHue', 600, props.theme) : props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -434,7 +210,8 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -453,65 +230,39 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   })));
 };
 
-var StyledDangerIcon = styled(SvgAlertErrorStroke).withConfig({
+const StyledDangerIcon = styled(SvgAlertErrorStroke).withConfig({
   displayName: "StyledDangerIcon",
   componentId: "sc-1kwbb39-0"
-})(["position:absolute;top:", "px;", ":", ";"], function (props) {
-  return props.theme.space.base * 5.5;
-}, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return "".concat(props.theme.space.base * 4, "px");
-});
+})(["position:absolute;top:", "px;", ":", ";"], props => props.theme.space.base * 5.5, props => props.theme.rtl ? 'right' : 'left', props => `${props.theme.space.base * 4}px`);
 StyledDangerIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$d = 'modals.modal';
-var animationName = keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
-var boxShadow$1 = function boxShadow(props) {
-  var theme = props.theme;
-  var space = theme.space,
-      shadows = theme.shadows;
-  var offsetY = "".concat(space.base * 5, "px");
-  var blurRadius = "".concat(space.base * 7, "px");
-  var color = getColor('neutralHue', 800, theme, 0.35);
+const COMPONENT_ID$d = 'modals.modal';
+const animationName = keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
+const boxShadow$1 = props => {
+  const {
+    theme
+  } = props;
+  const {
+    space,
+    shadows
+  } = theme;
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const color = getColor('neutralHue', 800, theme, 0.35);
   return shadows.lg(offsetY, blurRadius, color);
 };
-var sizeStyles$1 = function sizeStyles(props) {
+const sizeStyles$1 = props => {
   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({
+const StyledModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
-})(["display:flex;position:fixed;flex-direction:column;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);animation:", ";animation-delay:0.01s;overflow:auto;direction:", ";", " &:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], function (props) {
-  return props.isCentered ? '0' : "".concat(props.theme.space.base * 12, "px");
-}, function (props) {
-  return props.theme.borderRadii.md;
-}, boxShadow$1, function (props) {
-  return props.theme.colors.background;
-}, function (props) {
-  return props.theme.space.base * 24;
-}, function (props) {
-  return props.isAnimated && css(["", " 0.3s ease-in-out"], animationName);
-}, function (props) {
-  return props.theme.rtl && 'rtl';
-}, sizeStyles$1, function (props) {
-  return props.theme.space.base * 6;
-}, function (props) {
-  return props.theme.space.base * 6;
-}, function (props) {
-  return props.isCentered && '50%';
-}, function (props) {
-  return props.isCentered && '50%';
-}, function (props) {
-  return props.isCentered && 'translate(50%, 50%)';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$d, props);
-});
+})(["display:flex;position:fixed;flex-direction:column;margin:", ";border-radius:", ";box-shadow:", ";background-color:", ";min-height:60px;max-height:calc(100vh - ", "px);animation:", ";animation-delay:0.01s;overflow:auto;direction:", ";", " &:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borderRadii.md, boxShadow$1, props => props.theme.colors.background, props => props.theme.space.base * 24, props => props.isAnimated && css(["", " 0.3s ease-in-out"], animationName), props => props.theme.rtl && 'rtl', sizeStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledModal.propTypes = {
   isLarge: PropTypes.bool,
   isAnimated: PropTypes.bool
@@ -520,26 +271,20 @@ StyledModal.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
-var StyledTooltipModalBackdrop = styled.div.attrs({
+const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
+const StyledTooltipModalBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
-})(["position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;overflow:hidden;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-tooltip-modal-transition-exit-active{pointer-events:none;}&.garden-tooltip-modal-transition-exit-active div{transition:opacity 200ms;opacity:0;}", ";"], function (props) {
-  return props.theme.fonts.system;
-}, function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$c, props);
-});
+})(["position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;overflow:hidden;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-tooltip-modal-transition-exit-active{pointer-events:none;}&.garden-tooltip-modal-transition-exit-active div{transition:opacity 200ms;opacity:0;}", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledTooltipModalBackdrop.defaultProps = {
   theme: DEFAULT_THEME
 };
 
 function getPopperPlacement(gardenPlacement) {
-  var gardenToPopperMapping = {
+  const gardenToPopperMapping = {
     auto: 'auto',
     top: 'top',
     'top-start': 'top-start',
@@ -557,7 +302,7 @@ function getPopperPlacement(gardenPlacement) {
   return gardenToPopperMapping[gardenPlacement];
 }
 function getRtlPopperPlacement(gardenPlacement) {
-  var rtlPlacementMappings = {
+  const rtlPlacementMappings = {
     left: 'right',
     'left-start': 'right-start',
     'left-end': 'right-end',
@@ -569,11 +314,11 @@ function getRtlPopperPlacement(gardenPlacement) {
     'bottom-start': 'bottom-end',
     'bottom-end': 'bottom-start'
   };
-  var popperPlacement = getPopperPlacement(gardenPlacement);
+  const popperPlacement = getPopperPlacement(gardenPlacement);
   return rtlPlacementMappings[popperPlacement] || popperPlacement;
 }
 function getArrowPosition(popperPlacement) {
-  var arrowPositionMappings = {
+  const arrowPositionMappings = {
     top: 'bottom',
     'top-start': 'bottom-left',
     'top-end': 'bottom-right',
@@ -593,41 +338,33 @@ function getMenuPosition(popperPlacement) {
   return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
 }
 
-var StyledTooltipWrapper = styled.div.attrs(function (props) {
-  return {
-    className: props.isAnimated && 'is-animated'
-  };
-}).withConfig({
+const StyledTooltipWrapper = styled.div.attrs(props => ({
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
   displayName: "StyledTooltipWrapper",
   componentId: "sc-1xk05kf-0"
-})(["", ";"], function (props) {
-  return menuStyles(getMenuPosition(props.placement), {
-    theme: props.theme,
-    hidden: false,
-    margin: '0',
-    zIndex: props.zIndex,
-    animationModifier: '.is-animated'
-  });
-});
+})(["", ";"], props => menuStyles(getMenuPosition(props.placement), {
+  theme: props.theme,
+  hidden: false,
+  margin: '0',
+  zIndex: props.zIndex,
+  animationModifier: '.is-animated'
+}));
 StyledTooltipWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-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.57.1',
-    className: props.isAnimated && 'is-animated'
-  };
-}).withConfig({
+const COMPONENT_ID$b = 'modals.tooltip_modal';
+const StyledTooltipModal = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '8.59.0',
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-42ubfr-0"
-})(["padding:", "px;width:400px;", ";", ";"], function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  var computedArrowStyles = arrowStyles(getArrowPosition(props.placement), {
-    size: "".concat(props.theme.space.base * 2, "px"),
+})(["padding:", "px;width:400px;", ";", ";"], props => props.theme.space.base * 5, props => {
+  const computedArrowStyles = arrowStyles(getArrowPosition(props.placement), {
+    size: `${props.theme.space.base * 2}px`,
     inset: '1px',
     animationModifier: '.is-animated'
   });
@@ -635,314 +372,244 @@ var StyledTooltipModal = styled.div.attrs(function (props) {
     return props.hasArrow && props.transitionState === 'entered' && computedArrowStyles;
   }
   return props.hasArrow && computedArrowStyles;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$b, props);
-});
+}, props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledTooltipModal.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$a = 'modals.tooltip_modal.title';
-var sizeStyles = function sizeStyles(props) {
-  return "\n  /* stylelint-disable-next-line property-no-unknown */\n  padding-".concat(props.theme.rtl ? 'left' : 'right', ": ").concat(props.theme.space.base * 8, "px;\n  line-height: ").concat(getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), ";\n  font-size: ").concat(props.theme.fontSizes.md, ";\n");
-};
-var StyledTooltipModalTitle = styled.div.attrs({
+const COMPONENT_ID$a = '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$a,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
-})(["margin:0;color:", ";font-weight:", ";", ";", ";"], function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$a, props);
-});
+})(["margin:0;color:", ";font-weight:", ";", ";", ";"], props => props.theme.colors.foreground, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledTooltipModalTitle.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$9 = 'modals.tooltip_modal.body';
-var StyledTooltipModalBody = styled.div.attrs({
+const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
+const StyledTooltipModalBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
-})(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], function (props) {
-  return props.theme.space.base * 1.5;
-}, function (props) {
-  return getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$9, props);
-});
+})(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledTooltipModalBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
-var StyledTooltipModalFooter = styled.div.attrs({
+const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
+const StyledTooltipModalFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], function (p) {
-  return p.theme.space.base * 5;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$8, props);
-});
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledTooltipModalFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
-var StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
+const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
+const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
-})(["", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$7, props);
-});
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledTooltipModalFooterItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$6 = 'modals.tooltip_modal.close';
-var StyledTooltipModalClose = styled(StyledClose).attrs({
+const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
+const StyledTooltipModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
-})(["top:", "px;", ":", ";width:", "px;height:", "px;", ";"], function (props) {
-  return props.theme.space.base * 3.5;
-}, function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return "".concat(props.theme.space.base * 3, "px");
-}, function (props) {
-  return props.theme.space.base * 8;
-}, function (props) {
-  return props.theme.space.base * 8;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["top:", "px;", ":", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => props.theme.space.base * 8, props => props.theme.space.base * 8, props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledTooltipModalClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'modals.drawer_modal';
-var DRAWER_WIDTH = 380;
-var boxShadow = function boxShadow(props) {
-  var theme = props.theme;
-  var space = theme.space,
-      shadows = theme.shadows;
-  var offsetY = "".concat(space.base * 5, "px");
-  var blurRadius = "".concat(space.base * 7, "px");
-  var color = getColor('neutralHue', 800, theme, 0.35);
+const COMPONENT_ID$5 = 'modals.drawer_modal';
+const DRAWER_WIDTH = 380;
+const boxShadow = props => {
+  const {
+    theme
+  } = props;
+  const {
+    space,
+    shadows
+  } = theme;
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const color = getColor('neutralHue', 800, theme, 0.35);
   return shadows.lg(offsetY, blurRadius, color);
 };
-var StyledDrawerModal = styled.div.attrs({
+const StyledDrawerModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledDrawerModal",
   componentId: "sc-i1sake-0"
-})(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, boxShadow, function (props) {
-  return props.theme.colors.background;
-}, DRAWER_WIDTH, function (props) {
-  return props.theme.fonts.system;
-}, function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH;
-}, function (props) {
-  return props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => props.theme.colors.background, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledDrawerModal.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'modals.drawer_modal.close';
-var BASE_MULTIPLIERS = {
+const COMPONENT_ID$4 = 'modals.drawer_modal.close';
+const BASE_MULTIPLIERS = {
   top: BASE_MULTIPLIERS$1.top,
   side: 2,
   size: BASE_MULTIPLIERS$1.size
 };
-var StyledDrawerModalClose = styled(StyledClose).attrs({
+const StyledDrawerModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   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);
-});
+})(["", ":", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledDrawerModalClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'modals.drawer_modal.header';
-var StyledDrawerModalHeader = styled(StyledHeader).attrs({
+const COMPONENT_ID$3 = 'modals.drawer_modal.header';
+const StyledDrawerModalHeader = styled(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledDrawerModalHeader",
   componentId: "sc-1u04rqw-0"
-})(["padding:", "px;", "  ", ";"], function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  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);
-});
+})(["padding:", "px;", "  ", ";"], props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledDrawerModalHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'modals.drawer_modal.body';
-var StyledDrawerModalBody = styled(StyledBody).attrs({
+const COMPONENT_ID$2 = 'modals.drawer_modal.body';
+const StyledDrawerModalBody = styled(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledDrawerModalBody",
   componentId: "sc-yafe2y-0"
-})(["padding:", "px;", ";"], function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["padding:", "px;", ";"], props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledDrawerModalBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'modals.drawer_modal.footer';
-var StyledDrawerModalFooter = styled.div.attrs({
+const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
+const StyledDrawerModalFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooter",
   componentId: "sc-17if4ka-0"
-})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], function (props) {
-  return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 200, props.theme));
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledDrawerModalFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'modals.drawer_modal.footer_item';
-var StyledDrawerModalFooterItem = styled(StyledFooterItem).attrs({
+const COMPONENT_ID = 'modals.drawer_modal.footer_item';
+const StyledDrawerModalFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledDrawerModalFooterItem",
   componentId: "sc-1vbl885-0"
-})(["", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledDrawerModalFooterItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var ModalsContext = createContext(undefined);
-var useModalContext = function useModalContext() {
-  var context = useContext(ModalsContext);
+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;
 };
 
-var _excluded$2 = ["backdropProps", "children", "onClose", "isLarge", "isCentered", "isAnimated", "id", "appendToNode", "focusOnMount", "restoreFocus"];
-var isOverflowing = function isOverflowing(element) {
-  var doc = ownerDocument(element);
-  var win = ownerWindow(doc);
-  var isBody = element && element.tagName.toLowerCase() === 'body';
+const isOverflowing = element => {
+  const doc = ownerDocument(element);
+  const win = ownerWindow(doc);
+  const isBody = element && element.tagName.toLowerCase() === 'body';
   if (!isWindow(doc) && !isBody) {
     return element.scrollHeight > element.clientHeight;
   }
-  var style = win.getComputedStyle(doc.body);
-  var marginLeft = parseInt(style.getPropertyValue('margin-left'), 10);
-  var marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
+  const style = win.getComputedStyle(doc.body);
+  const marginLeft = parseInt(style.getPropertyValue('margin-left'), 10);
+  const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
   return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
 };
-var Modal = forwardRef(function (_ref, ref) {
-  var backdropProps = _ref.backdropProps,
-      children = _ref.children,
-      onClose = _ref.onClose,
-      isLarge = _ref.isLarge,
-      isCentered = _ref.isCentered,
-      isAnimated = _ref.isAnimated,
-      id = _ref.id,
-      appendToNode = _ref.appendToNode,
-      focusOnMount = _ref.focusOnMount,
-      restoreFocus = _ref.restoreFocus,
-      modalProps = _objectWithoutProperties(_ref, _excluded$2);
-  var theme = useContext(ThemeContext);
-  var modalRef = useRef(null);
-  var environment = useDocument(theme);
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isCloseButtonPresent = _useState2[0],
-      setIsCloseButtonPresent = _useState2[1];
-  var _useModal = useModal({
+const Modal = forwardRef((_ref, ref) => {
+  let {
+    backdropProps,
+    children,
+    onClose,
+    isLarge,
+    isCentered,
+    isAnimated,
+    id,
+    appendToNode,
+    focusOnMount,
+    restoreFocus,
+    ...modalProps
+  } = _ref;
+  const theme = useContext(ThemeContext);
+  const modalRef = useRef(null);
+  const environment = useDocument(theme);
+  const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
+  const {
+    getBackdropProps,
+    getModalProps,
+    getTitleProps,
+    getContentProps,
+    getCloseProps
+  } = useModal({
     idPrefix: id,
-    onClose: onClose,
-    modalRef: modalRef,
-    focusOnMount: focusOnMount,
-    restoreFocus: restoreFocus
-  }),
-      getBackdropProps = _useModal.getBackdropProps,
-      getModalProps = _useModal.getModalProps,
-      getTitleProps = _useModal.getTitleProps,
-      getContentProps = _useModal.getContentProps,
-      getCloseProps = _useModal.getCloseProps;
+    onClose,
+    modalRef,
+    focusOnMount,
+    restoreFocus
+  });
   useFocusVisible({
     scope: modalRef,
     relativeDocument: environment
   });
-  useEffect(function () {
+  useEffect(() => {
     if (!environment) {
       return undefined;
     }
-    var htmlElement = environment.querySelector('html');
-    var bodyElement = environment.querySelector('body');
-    var previousHtmlOverflow;
-    var previousBodyPaddingRight;
+    const htmlElement = environment.querySelector('html');
+    const bodyElement = environment.querySelector('body');
+    let previousHtmlOverflow;
+    let previousBodyPaddingRight;
     if (bodyElement) {
       if (isOverflowing(bodyElement)) {
-        var scrollbarSize$1 = scrollbarSize();
-        var bodyPaddingRight = parseInt(style(bodyElement, 'paddingRight') || '0', 10);
+        const scrollbarSize$1 = scrollbarSize();
+        const bodyPaddingRight = parseInt(style(bodyElement, 'paddingRight') || '0', 10);
         previousBodyPaddingRight = bodyElement.style.paddingRight;
-        bodyElement.style.paddingRight = "".concat(bodyPaddingRight + scrollbarSize$1, "px");
+        bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize$1}px`;
       }
       if (htmlElement) {
         previousHtmlOverflow = htmlElement.style.overflow;
         htmlElement.style.overflow = 'hidden';
       }
-      return function () {
+      return () => {
         if (htmlElement) {
           htmlElement.style.overflow = previousHtmlOverflow;
         }
@@ -951,7 +618,7 @@ var Modal = forwardRef(function (_ref, ref) {
     }
     return undefined;
   }, [environment]);
-  var rootNode = useMemo(function () {
+  const rootNode = useMemo(() => {
     if (appendToNode) {
       return appendToNode;
     }
@@ -960,16 +627,14 @@ var Modal = forwardRef(function (_ref, ref) {
     }
     return undefined;
   }, [appendToNode, environment]);
-  var value = useMemo(function () {
-    return {
-      isLarge: isLarge,
-      isCloseButtonPresent: isCloseButtonPresent,
-      getTitleProps: getTitleProps,
-      getContentProps: getContentProps,
-      getCloseProps: getCloseProps,
-      setIsCloseButtonPresent: setIsCloseButtonPresent
-    };
-  }, [isLarge, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
+  const value = useMemo(() => ({
+    isLarge,
+    isCloseButtonPresent,
+    getTitleProps,
+    getContentProps,
+    getCloseProps,
+    setIsCloseButtonPresent
+  }), [isLarge, isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
   if (!rootNode) {
     return null;
   }
@@ -1002,9 +667,10 @@ Modal.defaultProps = {
   isCentered: true
 };
 
-var Body$2 = forwardRef(function (props, ref) {
-  var _useModalContext = useModalContext(),
-      getContentProps = _useModalContext.getContentProps;
+const Body$2 = forwardRef((props, ref) => {
+  const {
+    getContentProps
+  } = useModalContext();
   return React__default.createElement(StyledBody, _extends$2({}, getContentProps(props), {
     ref: ref
   }));
@@ -1022,7 +688,8 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -1030,28 +697,29 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-var Close$2 = forwardRef(function (props, ref) {
-  var _useModalContext = useModalContext(),
-      getCloseProps = _useModalContext.getCloseProps,
-      setIsCloseButtonPresent = _useModalContext.setIsCloseButtonPresent;
-  useEffect(function () {
+const Close$2 = forwardRef((props, ref) => {
+  const {
+    getCloseProps,
+    setIsCloseButtonPresent
+  } = useModalContext();
+  useEffect(() => {
     setIsCloseButtonPresent(true);
-    return function () {
-      return setIsCloseButtonPresent(false);
-    };
+    return () => setIsCloseButtonPresent(false);
   });
-  var ariaLabel = useText(Close$2, props, 'aria-label', 'Close modal');
-  return React__default.createElement(StyledClose, _extends$2({}, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
+  const ariaLabel = useText(Close$2, props, 'aria-label', 'Close modal');
+  return React__default.createElement(StyledClose, _extends$2({}, getCloseProps({
+    ...props,
     'aria-label': ariaLabel
-  })), {
+  }), {
     ref: ref
   }), React__default.createElement(SvgXStroke, null));
 });
 Close$2.displayName = 'Close';
 
-var Footer$2 = React__default.forwardRef(function (props, ref) {
-  var _useModalContext = useModalContext(),
-      isLarge = _useModalContext.isLarge;
+const Footer$2 = React__default.forwardRef((props, ref) => {
+  const {
+    isLarge
+  } = useModalContext();
   return React__default.createElement(StyledFooter, _extends$2({
     ref: ref,
     isLarge: isLarge
@@ -1059,141 +727,164 @@ var Footer$2 = React__default.forwardRef(function (props, ref) {
 });
 Footer$2.displayName = 'Footer';
 
-var FooterItem$2 = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledFooterItem, _extends$2({
-    ref: ref
-  }, props));
-});
+const FooterItem$2 = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, _extends$2({
+  ref: ref
+}, props)));
 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({}, getTitleProps(props), {
+const Header$1 = forwardRef((_ref, ref) => {
+  let {
+    children,
+    isDanger,
+    tag,
+    ...other
+  } = _ref;
+  const {
+    isCloseButtonPresent,
+    getTitleProps
+  } = useModalContext();
+  return React__default.createElement(StyledHeader, _extends$2({}, getTitleProps(other), {
+    as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
-  }), props.isDanger && React__default.createElement(StyledDangerIcon, null), props.children);
+  }), isDanger && React__default.createElement(StyledDangerIcon, null), children);
 });
 Header$1.displayName = 'Header';
+Header$1.propTypes = {
+  isDanger: PropTypes.bool,
+  tag: PropTypes.any
+};
+Header$1.defaultProps = {
+  tag: 'div'
+};
 
-var TooltipModalContext = createContext(undefined);
-var useTooltipModalContext = function useTooltipModalContext() {
-  var context = useContext(TooltipModalContext);
+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;
 };
 
-var TitleComponent = forwardRef(function (props, ref) {
-  var _useTooltipModalConte = useTooltipModalContext(),
-      getTitleProps = _useTooltipModalConte.getTitleProps;
-  return React__default.createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(props), {
+const TitleComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    tag,
+    ...other
+  } = _ref;
+  const {
+    getTitleProps
+  } = useTooltipModalContext();
+  return React__default.createElement(StyledTooltipModalTitle, _extends$2({}, getTitleProps(other), {
+    as: tag,
     ref: ref
-  }), props.children);
+  }), children);
 });
 TitleComponent.displayName = 'TooltipModal.Title';
-var Title = TitleComponent;
+TitleComponent.propTypes = {
+  tag: PropTypes.any
+};
+TitleComponent.defaultProps = {
+  tag: 'div'
+};
+const Title = TitleComponent;
 
-var BodyComponent$1 = forwardRef(function (props, ref) {
-  var _useTooltipModalConte = useTooltipModalContext(),
-      getContentProps = _useTooltipModalConte.getContentProps;
+const BodyComponent$1 = forwardRef((props, ref) => {
+  const {
+    getContentProps
+  } = useTooltipModalContext();
   return React__default.createElement(StyledTooltipModalBody, _extends$2({}, getContentProps(props), {
     ref: ref
   }));
 });
 BodyComponent$1.displayName = 'TooltipModal.Body';
-var Body$1 = BodyComponent$1;
-
-var CloseComponent$1 = forwardRef(function (props, ref) {
-  var _useTooltipModalConte = useTooltipModalContext(),
-      getCloseProps = _useTooltipModalConte.getCloseProps;
-  var ariaLabel = useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
-  return React__default.createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
+const Body$1 = BodyComponent$1;
+
+const CloseComponent$1 = forwardRef((props, ref) => {
+  const {
+    getCloseProps
+  } = useTooltipModalContext();
+  const ariaLabel = useText(CloseComponent$1, props, 'aria-label', 'Close tooltip');
+  return React__default.createElement(StyledTooltipModalClose, _extends$2({}, getCloseProps({
+    ...props,
     'aria-label': ariaLabel
-  })), {
+  }), {
     ref: ref
   }), React__default.createElement(SvgXStroke, null));
 });
 CloseComponent$1.displayName = 'TooltipModal.Close';
-var Close$1 = CloseComponent$1;
+const Close$1 = CloseComponent$1;
 
-var FooterComponent$1 = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledTooltipModalFooter, _extends$2({
-    ref: ref
-  }, props));
-});
+const FooterComponent$1 = forwardRef((props, ref) => React__default.createElement(StyledTooltipModalFooter, _extends$2({
+  ref: ref
+}, props)));
 FooterComponent$1.displayName = 'TooltipModal.Footer';
-var Footer$1 = FooterComponent$1;
+const Footer$1 = FooterComponent$1;
 
-var FooterItemComponent$1 = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledTooltipModalFooterItem, _extends$2({
-    ref: ref
-  }, props));
-});
+const FooterItemComponent$1 = forwardRef((props, ref) => 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", "backdropProps", "focusOnMount", "restoreFocus", "id"];
-var TooltipModalComponent = React__default.forwardRef(function (_ref, ref) {
-  var referenceElement = _ref.referenceElement,
-      popperModifiers = _ref.popperModifiers,
-      placement = _ref.placement,
-      onClose = _ref.onClose,
-      hasArrow = _ref.hasArrow,
-      isAnimated = _ref.isAnimated,
-      zIndex = _ref.zIndex,
-      backdropProps = _ref.backdropProps,
-      focusOnMount = _ref.focusOnMount,
-      restoreFocus = _ref.restoreFocus,
-      id = _ref.id,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-  var theme = useContext(ThemeContext);
-  var previousReferenceElementRef = useRef();
-  var modalRef = useRef(null);
-  var transitionRef = useRef(null);
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      popperElement = _useState2[0],
-      setPopperElement = _useState2[1];
-  var _useModal = useModal({
+const FooterItem$1 = FooterItemComponent$1;
+
+const TooltipModalComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    referenceElement,
+    popperModifiers,
+    placement,
+    onClose,
+    hasArrow,
+    isAnimated,
+    zIndex,
+    backdropProps,
+    focusOnMount,
+    restoreFocus,
+    id,
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext);
+  const previousReferenceElementRef = useRef();
+  const modalRef = useRef(null);
+  const transitionRef = useRef(null);
+  const [popperElement, setPopperElement] = useState();
+  const {
+    getTitleProps,
+    getCloseProps,
+    getContentProps,
+    getBackdropProps,
+    getModalProps
+  } = useModal({
     idPrefix: id,
-    onClose: onClose,
-    modalRef: modalRef,
-    focusOnMount: focusOnMount,
+    onClose,
+    modalRef,
+    focusOnMount,
     restoreFocus: false
-  }),
-      getTitleProps = _useModal.getTitleProps,
-      getCloseProps = _useModal.getCloseProps,
-      getContentProps = _useModal.getContentProps,
-      getBackdropProps = _useModal.getBackdropProps,
-      getModalProps = _useModal.getModalProps;
-  useEffect(function () {
+  });
+  useEffect(() => {
     if (!referenceElement && previousReferenceElementRef.current && restoreFocus) {
       previousReferenceElementRef.current.focus();
     }
     previousReferenceElementRef.current = referenceElement;
   }, [referenceElement, restoreFocus]);
-  var popperPlacement = useMemo(function () {
-    return theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  }, [placement, theme.rtl]);
-  var _usePopper = usePopper(referenceElement, popperElement, {
+  const popperPlacement = useMemo(() => theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement), [placement, theme.rtl]);
+  const {
+    styles,
+    attributes,
+    state
+  } = usePopper(referenceElement, popperElement, {
     placement: popperPlacement,
     modifiers: [{
       name: 'offset',
       options: {
         offset: [0, theme.space.base * 3]
       }
-    }].concat(_toConsumableArray(popperModifiers || []))
-  }),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes,
-      state = _usePopper.state;
-  var value = {
-    getTitleProps: getTitleProps,
-    getContentProps: getContentProps,
-    getCloseProps: getCloseProps
+    }, ...(popperModifiers || [])]
+  });
+  const value = {
+    getTitleProps,
+    getContentProps,
+    getCloseProps
   };
   return React__default.createElement(CSSTransition, {
     unmountOnExit: true,
@@ -1201,7 +892,7 @@ var TooltipModalComponent = React__default.forwardRef(function (_ref, ref) {
     in: Boolean(referenceElement),
     classNames: isAnimated ? 'garden-tooltip-modal-transition' : '',
     nodeRef: transitionRef
-  }, function (transitionState) {
+  }, transitionState => {
     return React__default.createElement(TooltipModalContext.Provider, {
       value: value
     }, React__default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
@@ -1242,123 +933,131 @@ TooltipModalComponent.propTypes = {
   focusOnMount: PropTypes.bool,
   restoreFocus: PropTypes.bool
 };
-var TooltipModal = TooltipModalComponent;
+const TooltipModal = TooltipModalComponent;
 TooltipModal.Body = Body$1;
 TooltipModal.Close = Close$1;
 TooltipModal.Footer = Footer$1;
 TooltipModal.FooterItem = FooterItem$1;
 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({}, getTitleProps(props), {
+const HeaderComponent = forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
+  const {
+    isCloseButtonPresent,
+    getTitleProps
+  } = useModalContext();
+  return React__default.createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(other), {
+    as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
   }));
 });
 HeaderComponent.displayName = 'DrawerModal.Header';
-var Header = HeaderComponent;
+HeaderComponent.propTypes = {
+  tag: PropTypes.any
+};
+HeaderComponent.defaultProps = {
+  tag: 'div'
+};
+const Header = HeaderComponent;
 
-var BodyComponent = forwardRef(function (props, ref) {
-  var _useModalContext = useModalContext(),
-      getContentProps = _useModalContext.getContentProps;
+const BodyComponent = forwardRef((props, ref) => {
+  const {
+    getContentProps
+  } = useModalContext();
   return React__default.createElement(StyledDrawerModalBody, _extends$2({}, getContentProps(props), {
     ref: ref
   }), props.children);
 });
 BodyComponent.displayName = 'DrawerModal.Body';
-var Body = BodyComponent;
-
-var CloseComponent = forwardRef(function (props, ref) {
-  var _useModalContext = useModalContext(),
-      getCloseProps = _useModalContext.getCloseProps,
-      setIsCloseButtonPresent = _useModalContext.setIsCloseButtonPresent;
-  useEffect(function () {
+const Body = BodyComponent;
+
+const CloseComponent = forwardRef((props, ref) => {
+  const {
+    getCloseProps,
+    setIsCloseButtonPresent
+  } = useModalContext();
+  useEffect(() => {
     setIsCloseButtonPresent(true);
-    return function () {
-      return setIsCloseButtonPresent(false);
-    };
+    return () => setIsCloseButtonPresent(false);
   });
-  var ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__default.createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps(_objectSpread2(_objectSpread2({}, props), {}, {
+  const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close drawer');
+  return React__default.createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps({
+    ...props,
     'aria-label': ariaLabel
-  })), {
+  }), {
     ref: ref
   }), React__default.createElement(SvgXStroke, null));
 });
 CloseComponent.displayName = 'DrawerModal.Close';
-var Close = CloseComponent;
+const Close = CloseComponent;
 
-var FooterComponent = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledDrawerModalFooter, _extends$2({
-    ref: ref
-  }, props));
-});
+const FooterComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerModalFooter, _extends$2({
+  ref: ref
+}, props)));
 FooterComponent.displayName = 'DrawerModal.Footer';
-var Footer = FooterComponent;
+const Footer = FooterComponent;
 
-var FooterItemComponent = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledDrawerModalFooterItem, _extends$2({
-    ref: ref
-  }, props));
-});
+const FooterItemComponent = forwardRef((props, ref) => 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 DrawerModalComponent = forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-      isOpen = _ref.isOpen,
-      onClose = _ref.onClose,
-      backdropProps = _ref.backdropProps,
-      appendToNode = _ref.appendToNode,
-      focusOnMount = _ref.focusOnMount,
-      restoreFocus = _ref.restoreFocus,
-      props = _objectWithoutProperties(_ref, _excluded);
-  var modalRef = useRef(null);
-  var transitionRef = useRef(null);
-  var theme = useContext(ThemeContext);
-  var environment = useDocument(theme);
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isCloseButtonPresent = _useState2[0],
-      setIsCloseButtonPresent = _useState2[1];
+const FooterItem = FooterItemComponent;
+
+const DrawerModalComponent = forwardRef((_ref, ref) => {
+  let {
+    id,
+    isOpen,
+    onClose,
+    backdropProps,
+    appendToNode,
+    focusOnMount,
+    restoreFocus,
+    ...props
+  } = _ref;
+  const modalRef = useRef(null);
+  const transitionRef = useRef(null);
+  const theme = useContext(ThemeContext);
+  const environment = useDocument(theme);
+  const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
   useFocusVisible({
     scope: modalRef,
     relativeDocument: modalRef.current
   });
-  var _useModal = useModal({
+  const {
+    getTitleProps,
+    getCloseProps,
+    getContentProps,
+    getBackdropProps,
+    getModalProps
+  } = useModal({
     idPrefix: id,
-    modalRef: modalRef,
-    focusOnMount: focusOnMount,
-    restoreFocus: restoreFocus,
-    environment: environment,
-    onClose: onClose
-  }),
-      getTitleProps = _useModal.getTitleProps,
-      getCloseProps = _useModal.getCloseProps,
-      getContentProps = _useModal.getContentProps,
-      getBackdropProps = _useModal.getBackdropProps,
-      getModalProps = _useModal.getModalProps;
-  useEffect(function () {
+    modalRef,
+    focusOnMount,
+    restoreFocus,
+    environment,
+    onClose
+  });
+  useEffect(() => {
     if (!environment) {
       return undefined;
     }
-    var htmlElement = environment.querySelector('html');
-    var previousHtmlOverflow;
+    const htmlElement = environment.querySelector('html');
+    let previousHtmlOverflow;
     if (htmlElement && isOpen) {
       previousHtmlOverflow = htmlElement.style.overflow;
       htmlElement.style.overflow = 'hidden';
     }
-    return function () {
+    return () => {
       if (htmlElement && isOpen) {
         htmlElement.style.overflow = previousHtmlOverflow;
       }
     };
   }, [environment, isOpen]);
-  var rootNode = useMemo(function () {
+  const rootNode = useMemo(() => {
     if (appendToNode) {
       return appendToNode;
     }
@@ -1367,15 +1066,13 @@ var DrawerModalComponent = forwardRef(function (_ref, ref) {
     }
     return undefined;
   }, [appendToNode, environment]);
-  var value = useMemo(function () {
-    return {
-      isCloseButtonPresent: isCloseButtonPresent,
-      getTitleProps: getTitleProps,
-      getContentProps: getContentProps,
-      getCloseProps: getCloseProps,
-      setIsCloseButtonPresent: setIsCloseButtonPresent
-    };
-  }, [isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
+  const value = useMemo(() => ({
+    isCloseButtonPresent,
+    getTitleProps,
+    getContentProps,
+    getCloseProps,
+    setIsCloseButtonPresent
+  }), [isCloseButtonPresent, getTitleProps, getContentProps, getCloseProps]);
   if (!rootNode) {
     return null;
   }
@@ -1402,13 +1099,13 @@ DrawerModalComponent.propTypes = {
   appendToNode: PropTypes.any,
   isOpen: PropTypes.bool
 };
-var DrawerModal = DrawerModalComponent;
+const DrawerModal = DrawerModalComponent;
 DrawerModal.Body = Body;
 DrawerModal.Close = Close;
 DrawerModal.Footer = Footer;
 DrawerModal.FooterItem = FooterItem;
 DrawerModal.Header = Header;
 
-var PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+const PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
 
 export { Body$2 as Body, Close$2 as Close, DrawerModal, Footer$2 as Footer, FooterItem$2 as FooterItem, Header$1 as Header, Modal, PLACEMENT, TooltipModal };