@zendeskgarden/react-chrome 8.47.2 → 8.48.0

package/dist/index.esm.js

@@ -6,7 +6,7 @@
  */
 
 import * as React from 'react';
-import React__default, { useContext, useMemo, useEffect, Children, useRef, useState, createContext, forwardRef } from 'react';
+import React__default, { useContext, useMemo, useEffect, Children, isValidElement, cloneElement, useRef, useState, createContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, keyframes, ThemeContext } from 'styled-components';
 import { math, rgba, readableColor } from 'polished';
@@ -180,7 +180,7 @@ var useChromeContext = function useChromeContext() {
 var COMPONENT_ID$A = 'chrome.chrome';
 var StyledChrome = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -198,7 +198,7 @@ StyledChrome.defaultProps = {
 var COMPONENT_ID$z = 'chrome.header_item_icon';
 var StyledHeaderItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -225,7 +225,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 };
 var StyledBaseHeaderItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -254,7 +254,7 @@ var COMPONENT_ID$x = 'chrome.header_item_text';
 var clippedStyling = css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 var StyledHeaderItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
@@ -282,7 +282,7 @@ var getExpandedNavWidth = function getExpandedNavWidth() {
 };
 var StyledNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -322,7 +322,7 @@ var retrieveProductColor$1 = function retrieveProductColor(props) {
 };
 var StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
@@ -363,7 +363,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledBaseNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -380,7 +380,7 @@ var getHeaderHeight = function getHeaderHeight(props) {
 };
 var StyledHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
@@ -428,7 +428,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledSkipNav = styled.a.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
@@ -477,7 +477,7 @@ var sizeStyles$1 = function sizeStyles(theme) {
 };
 var StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
@@ -497,7 +497,7 @@ StyledSkipNavIcon.defaultProps = {
 var COMPONENT_ID$q = 'chrome.body';
 var StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
@@ -516,7 +516,7 @@ var getFooterHeight = function getFooterHeight(props) {
 };
 var StyledFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
@@ -536,7 +536,7 @@ StyledFooter.defaultProps = {
 var COMPONENT_ID$o = 'chrome.content';
 var StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -558,7 +558,7 @@ StyledContent.defaultProps = {
 var COMPONENT_ID$n = 'chrome.main';
 var StyledMain = styled.main.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
@@ -574,7 +574,7 @@ StyledMain.defaultProps = {
 var COMPONENT_ID$m = 'chrome.sidebar';
 var StyledSidebar = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSidebar",
   componentId: "sc-1q77fuw-0"
@@ -592,7 +592,7 @@ StyledSidebar.defaultProps = {
 var COMPONENT_ID$l = 'chrome.footer_item';
 var StyledFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -612,7 +612,7 @@ var imgStyles = function imgStyles(props) {
 };
 var StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
@@ -638,7 +638,7 @@ StyledHeaderItem.defaultProps = {
 var COMPONENT_ID$j = 'chrome.header_item_wrapper';
 var StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -678,7 +678,7 @@ var colorStyles$4 = function colorStyles(props) {
 };
 var StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -693,7 +693,7 @@ StyledLogoNavItem.defaultProps = {
 var COMPONENT_ID$h = 'chrome.brandmark_nav_item';
 var StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -706,7 +706,7 @@ StyledBrandmarkNavItem.defaultProps = {
 var COMPONENT_ID$g = 'chrome.nav_item_icon';
 var StyledNavItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -746,7 +746,7 @@ var colorStyles$3 = function colorStyles(props) {
 };
 var StyledNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
@@ -771,7 +771,7 @@ StyledNavItem.defaultProps = {
 var COMPONENT_ID$e = 'chrome.nav_item_text';
 var StyledNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -814,7 +814,7 @@ var getSubNavItemHeight = function getSubNavItemHeight(props) {
 };
 var StyledSubNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
@@ -849,7 +849,7 @@ var colorStyles$1 = function colorStyles(props) {
 };
 var StyledSubNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -875,7 +875,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledSubNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -893,7 +893,7 @@ StyledSubNavItemText.defaultProps = {
 var COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
 var StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -951,7 +951,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 var StyledSubNavItemIconWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -977,7 +977,7 @@ var PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
 var hiddenStyling = css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
 var StyledSubNavPanel = styled.div.attrs({
   'data-garden-id': PANEL_COMPONENT_ID,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -1014,7 +1014,7 @@ var borderStyle = function borderStyle(_ref) {
 };
 var StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -1038,7 +1038,7 @@ StyledSheet.defaultProps = {
 var COMPONENT_ID$7 = 'chrome.sheet_wrapper';
 var StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -1071,7 +1071,7 @@ StyledSheetWrapper.defaultProps = {
 var COMPONENT_ID$6 = 'chrome.sheet_title';
 var StyledSheetTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -1091,7 +1091,7 @@ StyledSheetTitle.defaultProps = {
 var COMPONENT_ID$5 = 'chrome.sheet_description';
 var StyledSheetDescription = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -1109,7 +1109,7 @@ StyledSheetDescription.defaultProps = {
 var COMPONENT_ID$4 = 'chrome.sheet_body';
 var StyledSheetBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -1123,6 +1123,11 @@ StyledSheetBody.defaultProps = {
 };
 
 var COMPONENT_ID$3 = 'chrome.sheet_close';
+var baseMultipliers = {
+  top: 2.5,
+  side: 2,
+  size: 10
+};
 var colorStyles = function colorStyles(props) {
   var backgroundColor = 'primaryHue';
   var foregroundColor = 'neutralHue';
@@ -1130,20 +1135,20 @@ var colorStyles = function colorStyles(props) {
 };
 var StyledSheetClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
 })(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;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%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:focus{outline:none;}", ";& > svg{vertical-align:middle;}", ";"], function (props) {
-  return props.theme.space.base * 2.5;
+  return props.theme.space.base * baseMultipliers.top;
 }, function (props) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
-  return "".concat(props.theme.space.base * 2, "px");
+  return "".concat(props.theme.space.base * baseMultipliers.side, "px");
 }, function (props) {
-  return props.theme.space.base * 10;
+  return props.theme.space.base * baseMultipliers.size;
 }, function (props) {
-  return props.theme.space.base * 10;
+  return props.theme.space.base * baseMultipliers.size;
 }, function (props) {
   return colorStyles(props);
 }, function (props) {
@@ -1156,7 +1161,7 @@ StyledSheetClose.defaultProps = {
 var COMPONENT_ID$2 = 'chrome.sheet_footer';
 var StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
@@ -1176,7 +1181,7 @@ StyledSheetFooter.defaultProps = {
 var COMPONENT_ID$1 = 'chrome.sheet_footer_item';
 var StyledSheetFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -1192,14 +1197,17 @@ StyledSheetFooterItem.defaultProps = {
 var COMPONENT_ID = 'chrome.sheet_header';
 var StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["border-bottom:", ";padding:", "px;", ";"], function (props) {
+})(["border-bottom:", ";padding:", "px;", " ", ";"], function (props) {
   return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 300, props.theme), "}");
 }, 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 * (baseMultipliers.size + baseMultipliers.side + 2), "px;");
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID, props);
 });
@@ -1285,7 +1293,7 @@ var useBodyContext = function useBodyContext() {
 };
 
 var _excluded$8 = ["hasFooter"];
-var Body = React__default.forwardRef(function (_ref, ref) {
+var Body$1 = React__default.forwardRef(function (_ref, ref) {
   var hasFooter = _ref.hasFooter,
       props = _objectWithoutProperties(_ref, _excluded$8);
   var bodyContextValue = useMemo(function () {
@@ -1299,8 +1307,8 @@ var Body = React__default.forwardRef(function (_ref, ref) {
     ref: ref
   }, props)));
 });
-Body.displayName = 'Body';
-Body.propTypes = {
+Body$1.displayName = 'Body';
+Body$1.propTypes = {
   hasFooter: PropTypes.bool
 };
 
@@ -1328,13 +1336,13 @@ var Sidebar = React__default.forwardRef(function (props, ref) {
 });
 Sidebar.displayName = 'Sidebar';
 
-var Header = React__default.forwardRef(function (props, ref) {
+var Header$1 = React__default.forwardRef(function (props, ref) {
   return React__default.createElement(StyledHeader, _extends$3({
     ref: ref
   }, props));
 });
-Header.displayName = 'Header';
-Header.propTypes = {
+Header$1.displayName = 'Header';
+Header$1.propTypes = {
   isStandalone: PropTypes.bool
 };
 
@@ -1364,16 +1372,23 @@ HeaderItem.propTypes = {
   hasLogo: PropTypes.bool
 };
 
-var _excluded$6 = ["children"];
+var _excluded$6 = ["children"],
+    _excluded2$1 = ["theme"];
 var HeaderItemIcon = function HeaderItemIcon(_ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$6);
-  var Element = function Element(elementProps) {
-    return React__default.cloneElement(Children.only(children), _objectSpread2(_objectSpread2({}, elementProps), props));
-  };
-  return React__default.createElement(StyledHeaderItemIcon, _extends$3({
-    as: Element
-  }, props));
+  var element = Children.only(children);
+  if ( isValidElement(element)) {
+    var Icon = function Icon(_ref2) {
+      _ref2.theme;
+          var iconProps = _objectWithoutProperties(_ref2, _excluded2$1);
+      return cloneElement(element, _objectSpread2(_objectSpread2({}, props), iconProps));
+    };
+    return React__default.createElement(StyledHeaderItemIcon, _extends$3({
+      as: Icon
+    }, props));
+  }
+  return null;
 };
 
 var HeaderItemText = React__default.forwardRef(function (props, ref) {
@@ -1393,19 +1408,19 @@ var HeaderItemWrapper = React__default.forwardRef(function (props, ref) {
 });
 HeaderItemWrapper.displayName = 'HeaderItemWrapper';
 
-var Footer = React__default.forwardRef(function (props, ref) {
+var Footer$1 = React__default.forwardRef(function (props, ref) {
   return React__default.createElement(StyledFooter, _extends$3({
     ref: ref
   }, props));
 });
-Footer.displayName = 'Footer';
+Footer$1.displayName = 'Footer';
 
-var FooterItem = React__default.forwardRef(function (props, ref) {
+var FooterItem$1 = React__default.forwardRef(function (props, ref) {
   return React__default.createElement(StyledFooterItem, _extends$3({
     ref: ref
   }, props));
 });
-FooterItem.displayName = 'FooterItem';
+FooterItem$1.displayName = 'FooterItem';
 
 var NavContext = React__default.createContext({
   isExpanded: false
@@ -1481,16 +1496,23 @@ NavItem.propTypes = {
   isCurrent: PropTypes.bool
 };
 
-var _excluded$4 = ["children"];
+var _excluded$4 = ["children"],
+    _excluded2 = ["theme"];
 var NavItemIcon = function NavItemIcon(_ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$4);
-  var Element = function Element(elementProps) {
-    return React__default.cloneElement(Children.only(children), _objectSpread2(_objectSpread2({}, elementProps), props));
-  };
-  return React__default.createElement(StyledNavItemIcon, _extends$3({
-    as: Element
-  }, props));
+  var element = Children.only(children);
+  if ( isValidElement(element)) {
+    var Icon = function Icon(_ref2) {
+      _ref2.theme;
+          var iconProps = _objectWithoutProperties(_ref2, _excluded2);
+      return cloneElement(element, _objectSpread2(_objectSpread2({}, props), iconProps));
+    };
+    return React__default.createElement(StyledNavItemIcon, _extends$3({
+      as: Icon
+    }, props));
+  }
+  return null;
 };
 
 var NavItemText = React__default.forwardRef(function (props, ref) {
@@ -1603,7 +1625,9 @@ CollapsibleSubNavItem.propTypes = {
 };
 CollapsibleSubNavItem.displayName = 'CollapsibleSubNavItem';
 
-var SheetContext = createContext({});
+var SheetContext = createContext({
+  setCloseButtonPresent: function setCloseButtonPresent() {}
+});
 var useSheetContext = function useSheetContext() {
   return useContext(SheetContext);
 };
@@ -1656,6 +1680,7 @@ var SheetTitle = forwardRef(function (_ref, ref) {
   }, props));
 });
 SheetTitle.displayName = 'Sheet.Title';
+var Title = SheetTitle;
 
 var _excluded$1 = ["id"];
 var SheetDescription = forwardRef(function (_ref, ref) {
@@ -1669,13 +1694,18 @@ var SheetDescription = forwardRef(function (_ref, ref) {
   }, props));
 });
 SheetDescription.displayName = 'Sheet.Description';
+var Description = SheetDescription;
 
 var SheetHeader = forwardRef(function (props, ref) {
+  var _useSheetContext = useSheetContext(),
+      isCloseButtonPresent = _useSheetContext.isCloseButtonPresent;
   return React__default.createElement(StyledSheetHeader, _extends$3({
-    ref: ref
+    ref: ref,
+    isCloseButtonPresent: isCloseButtonPresent
   }, props));
 });
 SheetHeader.displayName = 'Sheet.Header';
+var Header = SheetHeader;
 
 var SheetBody = forwardRef(function (props, ref) {
   return React__default.createElement(StyledSheetBody, _extends$3({
@@ -1683,6 +1713,7 @@ var SheetBody = forwardRef(function (props, ref) {
   }, props));
 });
 SheetBody.displayName = 'Sheet.Body';
+var Body = SheetBody;
 
 var SheetFooter = forwardRef(function (props, ref) {
   return React__default.createElement(StyledSheetFooter, _extends$3({
@@ -1690,6 +1721,7 @@ var SheetFooter = forwardRef(function (props, ref) {
   }, props));
 });
 SheetFooter.displayName = 'Sheet.Footer';
+var Footer = SheetFooter;
 
 var SheetFooterItem = forwardRef(function (props, ref) {
   return React__default.createElement(StyledSheetFooterItem, _extends$3({
@@ -1697,6 +1729,7 @@ var SheetFooterItem = forwardRef(function (props, ref) {
   }, props));
 });
 SheetFooterItem.displayName = 'Sheet.FooterItem';
+var FooterItem = SheetFooterItem;
 
 var _path;
 
@@ -1718,15 +1751,24 @@ var SvgXStroke = function SvgXStroke(props) {
 };
 
 var SheetClose = forwardRef(function (props, ref) {
+  var _useSheetContext = useSheetContext(),
+      setCloseButtonPresent = _useSheetContext.setCloseButtonPresent;
+  useEffect(function () {
+    setCloseButtonPresent(true);
+    return function () {
+      return setCloseButtonPresent(false);
+    };
+  }, [setCloseButtonPresent]);
   return React__default.createElement(StyledSheetClose, _extends$3({
     "aria-label": "Close Sheet",
     ref: ref
   }, props), React__default.createElement(SvgXStroke, null));
 });
 SheetClose.displayName = 'Sheet.Close';
+var Close = SheetClose;
 
 var _excluded = ["id", "isOpen", "isAnimated", "focusOnMount", "restoreFocus", "placement", "size", "children"];
-var Sheet = React__default.forwardRef(function (_ref, ref) {
+var SheetComponent = React__default.forwardRef(function (_ref, ref) {
   var id = _ref.id,
       isOpen = _ref.isOpen,
       isAnimated = _ref.isAnimated,
@@ -1738,17 +1780,23 @@ var Sheet = React__default.forwardRef(function (_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
   var sheetRef = useRef(null);
   var seed = useUIDSeed();
-  var _useState = useState(id || seed("sheet_".concat('8.47.2'))),
-      _useState2 = _slicedToArray(_useState, 1),
-      idPrefix = _useState2[0];
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCloseButtonPresent = _useState2[0],
+      setCloseButtonPresent = _useState2[1];
+  var _useState3 = useState(id || seed("sheet_".concat('8.48.0'))),
+      _useState4 = _slicedToArray(_useState3, 1),
+      idPrefix = _useState4[0];
   var titleId = "".concat(idPrefix, "--title");
   var descriptionId = "".concat(idPrefix, "--description");
   var sheetContext = useMemo(function () {
     return {
       titleId: titleId,
-      descriptionId: descriptionId
+      descriptionId: descriptionId,
+      isCloseButtonPresent: isCloseButtonPresent,
+      setCloseButtonPresent: setCloseButtonPresent
     };
-  }, [titleId, descriptionId]);
+  }, [titleId, descriptionId, isCloseButtonPresent]);
   useFocusableMount({
     targetRef: sheetRef,
     isMounted: isOpen,
@@ -1774,15 +1822,8 @@ var Sheet = React__default.forwardRef(function (_ref, ref) {
     size: size
   }, children)));
 });
-Sheet.Title = SheetTitle;
-Sheet.Description = SheetDescription;
-Sheet.Header = SheetHeader;
-Sheet.Body = SheetBody;
-Sheet.Footer = SheetFooter;
-Sheet.FooterItem = SheetFooterItem;
-Sheet.Close = SheetClose;
-Sheet.displayName = 'Sheet';
-Sheet.propTypes = {
+SheetComponent.displayName = 'Sheet';
+SheetComponent.propTypes = {
   id: PropTypes.string,
   isOpen: PropTypes.bool,
   isAnimated: PropTypes.bool,
@@ -1791,10 +1832,18 @@ Sheet.propTypes = {
   placement: PropTypes.oneOf(['start', 'end']),
   size: PropTypes.string
 };
-Sheet.defaultProps = {
+SheetComponent.defaultProps = {
   isAnimated: true,
   placement: 'end',
   size: '380px'
 };
+var Sheet = SheetComponent;
+Sheet.Body = Body;
+Sheet.Close = Close;
+Sheet.Description = Description;
+Sheet.Footer = Footer;
+Sheet.FooterItem = FooterItem;
+Sheet.Header = Header;
+Sheet.Title = Title;
 
-export { Body, Chrome, CollapsibleSubNavItem, Content, Footer, FooterItem, Header, HeaderItem, HeaderItemIcon, HeaderItemText, HeaderItemWrapper, Main, Nav, NavItem, NavItemIcon, NavItemText, PRODUCTS, Sheet, Sidebar, SkipNav, SubNav, SubNavItem, SubNavItemText };
+export { Body$1 as Body, Chrome, CollapsibleSubNavItem, Content, Footer$1 as Footer, FooterItem$1 as FooterItem, Header$1 as Header, HeaderItem, HeaderItemIcon, HeaderItemText, HeaderItemWrapper, Main, Nav, NavItem, NavItemIcon, NavItemText, PRODUCTS, Sheet, Sidebar, SkipNav, SubNav, SubNavItem, SubNavItemText };

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

@@ -14,5 +14,4 @@ export interface IChromeProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const Chrome: React.ForwardRefExoticComponent<IChromeProps & React.RefAttributes<HTMLDivElement>>;
-export default Chrome;
+export declare const Chrome: React.ForwardRefExoticComponent<IChromeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { AnchorHTMLAttributes } from 'react';
-interface ISkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface ISkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /** Sets the ID of the element to navigate to */
     targetId: string;
     /** Sets the `z-index` of the element */
@@ -15,4 +15,3 @@ interface ISkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  * @extends AnchorHTMLAttributes<HTMLAnchorElement>
  */
 export declare const SkipNav: React.ForwardRefExoticComponent<ISkipNavProps & React.RefAttributes<HTMLAnchorElement>>;
-export {};