@zendeskgarden/react-chrome 8.45.0 → 8.47.2

package/dist/index.esm.js

@@ -6,27 +6,24 @@
  */
 
 import * as React from 'react';
-import React__default, { useContext, useMemo, useEffect, Children, useRef, useState } from 'react';
+import React__default, { useContext, useMemo, useEffect, Children, 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';
 import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, PALETTE, useDocument } from '@zendeskgarden/react-theming';
 import { useAccordion } from '@zendeskgarden/container-accordion';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
+import { useUIDSeed } from 'react-uid';
+import mergeRefs from 'react-merge-refs';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -34,19 +31,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -67,8 +57,8 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+function _extends$3() {
+  _extends$3 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -82,7 +72,7 @@ function _extends$2() {
     return target;
   };
 
-  return _extends$2.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -187,10 +177,10 @@ var useChromeContext = function useChromeContext() {
   return useContext(ChromeContext);
 };
 
-var COMPONENT_ID$r = 'chrome.chrome';
+var COMPONENT_ID$A = 'chrome.chrome';
 var StyledChrome = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$A,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -199,16 +189,16 @@ var StyledChrome = styled.div.attrs({
 }, function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$r, props);
+  return retrieveComponentStyles(COMPONENT_ID$A, props);
 });
 StyledChrome.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$q = 'chrome.header_item_icon';
+var COMPONENT_ID$z = 'chrome.header_item_icon';
 var StyledHeaderItemIcon = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$z,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -219,13 +209,13 @@ var StyledHeaderItemIcon = styled.div.attrs({
 }, function (props) {
   return props.theme.iconSizes.md;
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$q, props);
+  return retrieveComponentStyles(COMPONENT_ID$z, props);
 });
 StyledHeaderItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$p = 'chrome.base_header_item';
+var COMPONENT_ID$y = 'chrome.base_header_item';
 var getHeaderItemSize = function getHeaderItemSize(props) {
   return "".concat(props.theme.space.base * 7.5, "px");
 };
@@ -234,8 +224,8 @@ var sizeStyles$4 = function sizeStyles(props) {
   return css(["padding:0 3px;min-width:", "px;height:", ";line-height:", ";"], size, props.maxY ? '100%' : "".concat(size, "px"), getLineHeight(size, props.theme.fontSizes.md));
 };
 var StyledBaseHeaderItem = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$y,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -254,31 +244,31 @@ var StyledBaseHeaderItem = styled.button.attrs({
   }
   return props.theme.borderRadii.md;
 }, sizeStyles$4, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$p, props);
+  return retrieveComponentStyles(COMPONENT_ID$y, props);
 });
 StyledBaseHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$o = 'chrome.header_item_text';
+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$o,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$x,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
 })(["margin:0 3px;", " ", ";"], function (props) {
   return props.isClipped && clippedStyling;
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$o, props);
+  return retrieveComponentStyles(COMPONENT_ID$x, props);
 });
 StyledHeaderItemText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$n = 'chrome.nav';
-var colorStyles$5 = function colorStyles(props) {
+var COMPONENT_ID$w = 'chrome.nav';
+var colorStyles$6 = function colorStyles(props) {
   var shade = props.isDark || props.isLight ? 600 : 700;
   var backgroundColor = getColor(props.hue, shade, props.theme);
   var foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
@@ -291,8 +281,8 @@ var getExpandedNavWidth = function getExpandedNavWidth() {
   return "200px";
 };
 var StyledNav = styled.nav.attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -301,15 +291,15 @@ var StyledNav = styled.nav.attrs({
 }, function (props) {
   return props.theme.fontSizes.md;
 }, function (props) {
-  return colorStyles$5(props);
+  return colorStyles$6(props);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$n, props);
+  return retrieveComponentStyles(COMPONENT_ID$w, props);
 });
 StyledNav.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$m = 'chrome.header_item';
+var COMPONENT_ID$v = 'chrome.header_item';
 var retrieveProductColor$1 = function retrieveProductColor(props) {
   switch (props.product) {
     case 'chat':
@@ -331,8 +321,8 @@ var retrieveProductColor$1 = function retrieveProductColor(props) {
   }
 };
 var StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.45.0',
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '8.47.2',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
@@ -356,13 +346,13 @@ var StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
 }, function (props) {
   return props.theme.iconSizes.lg;
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$m, props);
+  return retrieveComponentStyles(COMPONENT_ID$v, props);
 });
 StyledLogoHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$l = 'chrome.base_nav_item';
+var COMPONENT_ID$u = 'chrome.base_nav_item';
 var getNavItemHeight = function getNavItemHeight(props) {
   return "".concat(props.theme.space.base * 13, "px");
 };
@@ -372,8 +362,8 @@ var sizeStyles$3 = function sizeStyles(props) {
   return css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, getNavItemHeight);
 };
 var StyledBaseNavItem = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -384,13 +374,13 @@ StyledBaseNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$k = 'chrome.header';
+var COMPONENT_ID$t = 'chrome.header';
 var getHeaderHeight = function getHeaderHeight(props) {
   return getNavItemHeight(props);
 };
 var StyledHeader = styled.header.attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
@@ -411,18 +401,18 @@ var StyledHeader = styled.header.attrs({
 }, function (props) {
   return props.isStandalone && "\n    ".concat(StyledLogoHeaderItem, " {\n      display: inline-flex;\n    }\n  ");
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$k, props);
+  return retrieveComponentStyles(COMPONENT_ID$t, props);
 });
 StyledHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$j = 'chrome.skipnav';
+var COMPONENT_ID$s = 'chrome.skipnav';
 var animationStyles = function animationStyles() {
   var animationName = keyframes(["0%{transform:translate(-50%,-50%);}"]);
   return css(["transition:opacity 0.2s ease-out,clip 0s linear 0.2s;opacity:0;clip:rect(0,0,0,0);&:focus{transition:opacity 0.2s ease-in-out;animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";opacity:1;clip:rect(0,150vw,100vh,-50vw);}"], animationName);
 };
-var colorStyles$4 = function colorStyles(theme) {
+var colorStyles$5 = function colorStyles(theme) {
   var color = getColor('primaryHue', 600, theme);
   var borderColor = getColor('neutralHue', 300, theme);
   var boxShadow = theme.shadows.lg("".concat(theme.space.base * 5, "px"), "".concat(theme.space.base * 7, "px"), getColor('chromeHue', 600, theme, 0.15));
@@ -437,8 +427,8 @@ var sizeStyles$2 = function sizeStyles(props) {
   return css(["top:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, padding, props.theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
 };
 var StyledSkipNav = styled.a.attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
@@ -453,41 +443,41 @@ var StyledSkipNav = styled.a.attrs({
 }, function (props) {
   return sizeStyles$2(props);
 }, function (props) {
-  return colorStyles$4(props.theme);
+  return colorStyles$5(props.theme);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$j, props);
+  return retrieveComponentStyles(COMPONENT_ID$s, props);
 });
 StyledSkipNav.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$2;
 
-var _ref$1 = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"
-});
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 
-function SvgLinkStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+var SvgLinkStroke = function SvgLinkStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$1);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"
+  })));
+};
 
-var COMPONENT_ID$i = 'chrome.skipnav_icon';
+var COMPONENT_ID$r = 'chrome.skipnav_icon';
 var sizeStyles$1 = function sizeStyles(theme) {
   var margin = "".concat(theme.space.base * 2, "px");
   var size = theme.iconSizes.md;
   return css(["margin-", ":", ";width:", ";height:", ";"], theme.rtl ? 'left' : 'right', margin, size, size);
 };
 var StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
@@ -498,35 +488,35 @@ var StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
 }, function (props) {
   return sizeStyles$1(props.theme);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$i, props);
+  return retrieveComponentStyles(COMPONENT_ID$r, props);
 });
 StyledSkipNavIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$h = 'chrome.body';
+var COMPONENT_ID$q = 'chrome.body';
 var StyledBody = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
 })(["flex:1;order:1;background-color:", ";min-width:0;", ";"], function (props) {
   return getColor('neutralHue', 100, props.theme);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$h, props);
+  return retrieveComponentStyles(COMPONENT_ID$q, props);
 });
 StyledBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$g = 'chrome.footer';
+var COMPONENT_ID$p = 'chrome.footer';
 var getFooterHeight = function getFooterHeight(props) {
   return "".concat(props.theme.space.base * 20, "px");
 };
 var StyledFooter = styled.footer.attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
@@ -537,16 +527,16 @@ var StyledFooter = styled.footer.attrs({
 }, function (props) {
   return props.theme.space.base * 9;
 }, getFooterHeight, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$g, props);
+  return retrieveComponentStyles(COMPONENT_ID$p, props);
 });
 StyledFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$f = 'chrome.content';
+var COMPONENT_ID$o = 'chrome.content';
 var StyledContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -559,32 +549,32 @@ var StyledContent = styled.div.attrs({
 }, function (props) {
   return props.theme.fontSizes.md;
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$f, props);
+  return retrieveComponentStyles(COMPONENT_ID$o, props);
 });
 StyledContent.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$e = 'chrome.main';
+var COMPONENT_ID$n = 'chrome.main';
 var StyledMain = styled.main.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
 })(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], function (props) {
   return props.theme.colors.background;
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$e, props);
+  return retrieveComponentStyles(COMPONENT_ID$n, props);
 });
 StyledMain.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$d = 'chrome.sidebar';
+var COMPONENT_ID$m = 'chrome.sidebar';
 var StyledSidebar = styled.aside.attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledSidebar",
   componentId: "sc-1q77fuw-0"
@@ -593,36 +583,36 @@ var StyledSidebar = styled.aside.attrs({
 }, function (props) {
   return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 300, props.theme));
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$d, props);
+  return retrieveComponentStyles(COMPONENT_ID$m, props);
 });
 StyledSidebar.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$c = 'chrome.footer_item';
+var COMPONENT_ID$l = 'chrome.footer_item';
 var StyledFooterItem = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
 })(["margin:", ";", ";"], function (props) {
   return "0 ".concat(props.theme.space.base, "px");
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$c, props);
+  return retrieveComponentStyles(COMPONENT_ID$l, props);
 });
 StyledFooterItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$b = 'chrome.header_item';
+var COMPONENT_ID$k = 'chrome.header_item';
 var imgStyles = function imgStyles(props) {
   var size = math("".concat(getHeaderItemSize(props), " - ").concat(props.theme.space.base * 2));
   return css(["img{margin:0;border-radius:", ";width:", ";height:", ";}"], math("".concat(props.theme.borderRadii.md, " - 1")), size, size);
 };
 var StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
@@ -639,28 +629,28 @@ StyledHeaderItemText, function (props) {
 }, imgStyles, function (props) {
   return props.isRound && "\n    ".concat(StyledHeaderItemIcon, " {\n      border-radius: 100px;\n    }\n  ");
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$b, props);
+  return retrieveComponentStyles(COMPONENT_ID$k, props);
 });
 StyledHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$a = 'chrome.header_item_wrapper';
+var COMPONENT_ID$j = 'chrome.header_item_wrapper';
 var StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.45.0',
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '8.47.2',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
   componentId: "sc-1uieu55-0"
 })(["", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$a, props);
+  return retrieveComponentStyles(COMPONENT_ID$j, props);
 });
 StyledHeaderItemWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$9 = 'chrome.logo_nav_item';
+var COMPONENT_ID$i = 'chrome.logo_nav_item';
 var retrieveProductColor = function retrieveProductColor(product) {
   switch (product) {
     case 'chat':
@@ -681,29 +671,29 @@ var retrieveProductColor = function retrieveProductColor(product) {
       return 'inherit';
   }
 };
-var colorStyles$3 = function colorStyles(props) {
+var colorStyles$4 = function colorStyles(props) {
   var fillColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
   var color = props.isLight || props.isDark ? fillColor : retrieveProductColor(props.product);
   return css(["color:", ";fill:", ";"], color, fillColor);
 };
 var StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.45.0',
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '8.47.2',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"
 })(["order:0;opacity:1;cursor:default;", ";"], function (props) {
-  return colorStyles$3(props);
+  return colorStyles$4(props);
 });
 StyledLogoNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$8 = 'chrome.brandmark_nav_item';
+var COMPONENT_ID$h = 'chrome.brandmark_nav_item';
 var StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.45.0',
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '8.47.2',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -713,10 +703,10 @@ StyledBrandmarkNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$7 = 'chrome.nav_item_icon';
+var COMPONENT_ID$g = 'chrome.nav_item_icon';
 var StyledNavItemIcon = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -727,14 +717,14 @@ var StyledNavItemIcon = styled.div.attrs({
 }, function (props) {
   return props.theme.iconSizes.lg;
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$7, props);
+  return retrieveComponentStyles(COMPONENT_ID$g, props);
 });
 StyledNavItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$6 = 'chrome.nav_item';
-var colorStyles$2 = function colorStyles(props) {
+var COMPONENT_ID$f = 'chrome.nav_item';
+var colorStyles$3 = function colorStyles(props) {
   var BLACK = props.theme.palette.black;
   var WHITE = props.theme.palette.white;
   var currentColor;
@@ -755,8 +745,8 @@ var colorStyles$2 = function colorStyles(props) {
   return css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}&[data-garden-focus-visible]{opacity:1;box-shadow:inset ", ";}&:active{background-color:", ";}"], props.isCurrent ? 1 : 0.6, currentColor, hoverColor, props.theme.shadows.md(focusColor), activeColor);
 };
 var StyledNavItem = styled(StyledBaseNavItem).attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.45.0',
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '8.47.2',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
@@ -768,20 +758,20 @@ var StyledNavItem = styled(StyledBaseNavItem).attrs({
 }, function (props) {
   return props.isExpanded && 'inherit';
 }, function (props) {
-  return colorStyles$2(props);
+  return colorStyles$3(props);
 }, function (props) {
   return props.isExpanded && "\n    ".concat(StyledNavItemIcon, " {\n      margin: 0 ").concat(math("(".concat(getNavWidth(props), " - ").concat(props.theme.iconSizes.lg, ") / 4")), ";\n    }\n  ");
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$6, props);
+  return retrieveComponentStyles(COMPONENT_ID$f, props);
 });
 StyledNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'chrome.nav_item_text';
+var COMPONENT_ID$e = 'chrome.nav_item_text';
 var StyledNavItemText = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -794,14 +784,14 @@ var StyledNavItemText = styled.span.attrs({
 }, function (props) {
   return props.isExpanded && "\n    ".concat(StyledNavItem, " > && {\n      position: static;\n      flex: 1;\n      clip: auto;\n      width: auto;\n      height: auto;\n      text-overflow: ellipsis;\n    }\n  ");
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
+  return retrieveComponentStyles(COMPONENT_ID$e, props);
 });
 StyledNavItemText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'chrome.subnav_item';
-var colorStyles$1 = function colorStyles(props) {
+var COMPONENT_ID$d = 'chrome.subnav_item';
+var colorStyles$2 = function colorStyles(props) {
   var BLACK = props.theme.palette.black;
   var WHITE = props.theme.palette.white;
   var currentColor;
@@ -823,8 +813,8 @@ var getSubNavItemHeight = function getSubNavItemHeight(props) {
   return "".concat(props.theme.space.base * 7.5, "px");
 };
 var StyledSubNavItem = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
@@ -837,16 +827,16 @@ var StyledSubNavItem = styled.button.attrs({
 }, function (props) {
   return "0 ".concat(props.theme.space.base * 2, "px");
 }, getSubNavItemHeight, function (props) {
-  return colorStyles$1(props);
+  return colorStyles$2(props);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
+  return retrieveComponentStyles(COMPONENT_ID$d, props);
 });
 StyledSubNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'chrome.subnav';
-var colorStyles = function colorStyles(props) {
+var COMPONENT_ID$c = 'chrome.subnav';
+var colorStyles$1 = function colorStyles(props) {
   var shade;
   if (props.isLight) {
     shade = 500;
@@ -858,8 +848,8 @@ var colorStyles = function colorStyles(props) {
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 var StyledSubNav = styled.nav.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -868,7 +858,7 @@ var StyledSubNav = styled.nav.attrs({
 }, function (props) {
   return props.theme.fontSizes.md;
 }, function (props) {
-  return colorStyles(props);
+  return colorStyles$1(props);
 }, StyledSubNavItem, function (props) {
   return retrieveComponentStyles('chrome.subnav', props);
 });
@@ -876,7 +866,7 @@ StyledSubNav.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'chrome.subnav_item_text';
+var COMPONENT_ID$b = 'chrome.subnav_item_text';
 var sizeStyles = function sizeStyles(props) {
   var baseLineHeight = props.theme.space.base * 5;
   var verticalMargin = math("(".concat(getSubNavItemHeight(props), " - ").concat(baseLineHeight, ") / 2"));
@@ -884,8 +874,8 @@ var sizeStyles = function sizeStyles(props) {
   return css(["margin:", " 0;line-height:", ";"], verticalMargin, lineHeight);
 };
 var StyledSubNavItemText = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -894,16 +884,16 @@ var StyledSubNavItemText = styled.span.attrs({
 }, function (props) {
   return sizeStyles(props);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
+  return retrieveComponentStyles(COMPONENT_ID$b, props);
 });
 StyledSubNavItemText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'chrome.collapsible_sub_nav_item';
+var COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
 var StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.45.0',
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '8.47.2',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -913,37 +903,37 @@ var StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
 }, function (props) {
   return props.theme.space.base * 7;
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
+  return retrieveComponentStyles(COMPONENT_ID$a, props);
 });
 StyledSubNavItemHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path$1;
 
-var _ref = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"
-});
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
-function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
-    viewBox: "0 0 12 12",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"
+  })));
+};
 
-var _excluded$8 = ["theme", "isExpanded"];
-var COMPONENT_ID = 'chrome.collapsible_sub_nav_item_icon';
+var _excluded$b = ["theme", "isExpanded"];
+var COMPONENT_ID$9 = 'chrome.collapsible_sub_nav_item_icon';
 var FilteredChevronDownStrokeIcon = React__default.forwardRef(function (_ref, ref) {
   _ref.theme;
       _ref.isExpanded;
-      var validProps = _objectWithoutProperties(_ref, _excluded$8);
-  return React__default.createElement(SvgChevronDownStroke, _extends$2({
+      var validProps = _objectWithoutProperties(_ref, _excluded$b);
+  return React__default.createElement(SvgChevronDownStroke, _extends$3({
     ref: ref
   }, validProps));
 });
@@ -960,8 +950,8 @@ StyledSubNavItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 var StyledSubNavItemIconWrapper = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.45.0'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -977,7 +967,7 @@ var StyledSubNavItemIconWrapper = styled.div.attrs({
   }
   return undefined;
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
+  return retrieveComponentStyles(COMPONENT_ID$9, props);
 });
 StyledSubNavItemIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
@@ -987,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.45.0'
+  'data-garden-version': '8.47.2'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -1004,11 +994,224 @@ StyledSubNavPanel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$7 = ["hue", "isFluid"];
+var COMPONENT_ID$8 = 'chrome.sheet';
+var borderStyle = function borderStyle(_ref) {
+  var theme = _ref.theme,
+      placement = _ref.placement,
+      isOpen = _ref.isOpen;
+  var borderColor = isOpen ? getColor('neutralHue', 300, theme) : 'transparent';
+  var borderSides = ['-left', '-right'];
+  var borderSide = '';
+  if (theme.rtl) {
+    borderSides.reverse();
+  }
+  if (placement === 'end') {
+    borderSide = borderSides[0];
+  } else if (placement === 'start') {
+    borderSide = borderSides[1];
+  }
+  return "border".concat(borderSide, ": ").concat(theme.borders.sm, " ").concat(borderColor, ";");
+};
+var StyledSheet = styled.aside.attrs({
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '8.47.2'
+}).withConfig({
+  displayName: "StyledSheet",
+  componentId: "sc-dx8ijk-0"
+})(["display:flex;order:1;transition:", ";background-color:", ";width:", ";height:100%;overflow:hidden;font-size:", ";&:focus{outline:none;}", ";", ";"], function (props) {
+  return props.isAnimated && 'width 250ms ease-in-out';
+}, function (props) {
+  return props.theme.colors.background;
+}, function (props) {
+  return props.isOpen ? props.size : '0px';
+}, function (props) {
+  return props.theme.fontSizes.md;
+}, function (props) {
+  return borderStyle(props);
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$8, props);
+});
+StyledSheet.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID$7 = 'chrome.sheet_wrapper';
+var StyledSheetWrapper = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '8.47.2'
+}).withConfig({
+  displayName: "StyledSheetWrapper",
+  componentId: "sc-f6x9zb-0"
+})(["display:flex;position:relative;flex-direction:column;transform:", ";transition:", ";min-width:", ";", ";"], function (props) {
+  var translateValues = [-100, 100];
+  var translation = 'translateX(0%)';
+  if (props.isOpen) {
+    return translation;
+  }
+  if (props.theme.rtl) {
+    translateValues.reverse();
+  }
+  if (props.placement === 'end') {
+    translation = "translateX(".concat(translateValues[1], "%)");
+  } else if (props.placement === 'start') {
+    translation = "translateX(".concat(translateValues[0], "%)");
+  }
+  return translation;
+}, function (props) {
+  return props.isAnimated && 'transform 250ms ease-in-out';
+}, function (props) {
+  return props.size;
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$7, props);
+});
+StyledSheetWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID$6 = 'chrome.sheet_title';
+var StyledSheetTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.47.2'
+}).withConfig({
+  displayName: "StyledSheetTitle",
+  componentId: "sc-1gogk75-0"
+})(["line-height:", ";color:", ";font-weight:", ";", ";"], function (props) {
+  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
+}, function (props) {
+  return props.theme.colors.foreground;
+}, function (props) {
+  return props.theme.fontWeights.semibold;
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$6, props);
+});
+StyledSheetTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID$5 = 'chrome.sheet_description';
+var StyledSheetDescription = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.47.2'
+}).withConfig({
+  displayName: "StyledSheetDescription",
+  componentId: "sc-1puglb6-0"
+})(["line-height:", ";color:", ";", ";"], function (props) {
+  return getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md);
+}, function (props) {
+  return getColor('neutralHue', 600, props.theme);
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$5, props);
+});
+StyledSheetDescription.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID$4 = 'chrome.sheet_body';
+var StyledSheetBody = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '8.47.2'
+}).withConfig({
+  displayName: "StyledSheetBody",
+  componentId: "sc-bt4eoj-0"
+})(["flex:1;overflow-y:auto;padding:", "px;", ";"], function (props) {
+  return props.theme.space.base * 5;
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$4, props);
+});
+StyledSheetBody.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID$3 = 'chrome.sheet_close';
+var colorStyles = function colorStyles(props) {
+  var backgroundColor = 'primaryHue';
+  var 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 StyledSheetClose = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.47.2'
+}).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;
+}, function (props) {
+  return props.theme.rtl ? 'left' : 'right';
+}, function (props) {
+  return "".concat(props.theme.space.base * 2, "px");
+}, function (props) {
+  return props.theme.space.base * 10;
+}, function (props) {
+  return props.theme.space.base * 10;
+}, function (props) {
+  return colorStyles(props);
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$3, props);
+});
+StyledSheetClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID$2 = 'chrome.sheet_footer';
+var StyledSheetFooter = styled.footer.attrs({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.47.2'
+}).withConfig({
+  displayName: "StyledSheetFooter",
+  componentId: "sc-2cktos-0"
+})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";border-top:", ";padding:", "px;", ";"], function (props) {
+  return props.isCompact ? 'center' : 'flex-end';
+}, function (props) {
+  return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 300, props.theme), "}");
+}, function (props) {
+  return props.theme.space.base * (props.isCompact ? 2.5 : 5);
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$2, props);
+});
+StyledSheetFooter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+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'
+}).withConfig({
+  displayName: "StyledSheetFooterItem",
+  componentId: "sc-r9ixh-0"
+})(["", " ", ";"], function (props) {
+  return "margin-".concat(props.theme.rtl ? 'right' : 'left', ": ").concat(props.theme.space.base * 5, "px;");
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$1, props);
+});
+StyledSheetFooterItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID = 'chrome.sheet_header';
+var StyledSheetHeader = styled.header.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.47.2'
+}).withConfig({
+  displayName: "StyledSheetHeader",
+  componentId: "sc-o2ry8i-0"
+})(["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 retrieveComponentStyles(COMPONENT_ID, props);
+});
+StyledSheetHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var _excluded$a = ["hue", "isFluid"];
 var Chrome = React__default.forwardRef(function (_ref, ref) {
   var hue = _ref.hue,
       isFluid = _ref.isFluid,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$a);
   var theme = useContext(ThemeContext);
   var isLightMemoized = useMemo(function () {
     if (hue) {
@@ -1044,7 +1247,7 @@ var Chrome = React__default.forwardRef(function (_ref, ref) {
   }, [environment, isFluid]);
   return React__default.createElement(ChromeContext.Provider, {
     value: chromeContextValue
-  }, React__default.createElement(StyledChrome, _extends$2({
+  }, React__default.createElement(StyledChrome, _extends$3({
     ref: ref
   }, props)));
 });
@@ -1053,13 +1256,13 @@ Chrome.propTypes = {
   hue: PropTypes.string
 };
 
-var _excluded$6 = ["targetId", "zIndex", "children"];
+var _excluded$9 = ["targetId", "zIndex", "children"];
 var SkipNav = React__default.forwardRef(function (_ref, ref) {
   var targetId = _ref.targetId,
       zIndex = _ref.zIndex,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$6);
-  return React__default.createElement(StyledSkipNav, _extends$2({
+      props = _objectWithoutProperties(_ref, _excluded$9);
+  return React__default.createElement(StyledSkipNav, _extends$3({
     href: "#".concat(targetId),
     zIndex: zIndex,
     ref: ref
@@ -1081,10 +1284,10 @@ var useBodyContext = function useBodyContext() {
   return useContext(BodyContext);
 };
 
-var _excluded$5 = ["hasFooter"];
+var _excluded$8 = ["hasFooter"];
 var Body = React__default.forwardRef(function (_ref, ref) {
   var hasFooter = _ref.hasFooter,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$8);
   var bodyContextValue = useMemo(function () {
     return {
       hasFooter: !!hasFooter
@@ -1092,7 +1295,7 @@ var Body = React__default.forwardRef(function (_ref, ref) {
   }, [hasFooter]);
   return React__default.createElement(BodyContext.Provider, {
     value: bodyContextValue
-  }, React__default.createElement(StyledBody, _extends$2({
+  }, React__default.createElement(StyledBody, _extends$3({
     ref: ref
   }, props)));
 });
@@ -1104,7 +1307,7 @@ Body.propTypes = {
 var Content = React__default.forwardRef(function (props, ref) {
   var _useBodyContext = useBodyContext(),
       hasFooter = _useBodyContext.hasFooter;
-  return React__default.createElement(StyledContent, _extends$2({
+  return React__default.createElement(StyledContent, _extends$3({
     ref: ref,
     hasFooter: hasFooter
   }, props));
@@ -1112,21 +1315,21 @@ var Content = React__default.forwardRef(function (props, ref) {
 Content.displayName = 'Content';
 
 var Main = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledMain, _extends$2({
+  return React__default.createElement(StyledMain, _extends$3({
     ref: ref
   }, props));
 });
 Main.displayName = 'Main';
 
 var Sidebar = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledSidebar, _extends$2({
+  return React__default.createElement(StyledSidebar, _extends$3({
     ref: ref
   }, props));
 });
 Sidebar.displayName = 'Sidebar';
 
 var Header = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledHeader, _extends$2({
+  return React__default.createElement(StyledHeader, _extends$3({
     ref: ref
   }, props));
 });
@@ -1137,18 +1340,18 @@ Header.propTypes = {
 
 var PRODUCTS = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
 
-var _excluded$4 = ["hasLogo", "product"];
+var _excluded$7 = ["hasLogo", "product"];
 var HeaderItem = React__default.forwardRef(function (_ref, ref) {
   var hasLogo = _ref.hasLogo,
       product = _ref.product,
-      other = _objectWithoutProperties(_ref, _excluded$4);
+      other = _objectWithoutProperties(_ref, _excluded$7);
   if (hasLogo) {
-    return React__default.createElement(StyledLogoHeaderItem, _extends$2({
+    return React__default.createElement(StyledLogoHeaderItem, _extends$3({
       ref: ref,
       product: product
     }, other));
   }
-  return React__default.createElement(StyledHeaderItem, _extends$2({
+  return React__default.createElement(StyledHeaderItem, _extends$3({
     ref: ref
   }, other));
 });
@@ -1161,20 +1364,20 @@ HeaderItem.propTypes = {
   hasLogo: PropTypes.bool
 };
 
-var _excluded$3 = ["children"];
+var _excluded$6 = ["children"];
 var HeaderItemIcon = function HeaderItemIcon(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      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$2({
+  return React__default.createElement(StyledHeaderItemIcon, _extends$3({
     as: Element
   }, props));
 };
 
 var HeaderItemText = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledHeaderItemText, _extends$2({
+  return React__default.createElement(StyledHeaderItemText, _extends$3({
     ref: ref
   }, props));
 });
@@ -1184,21 +1387,21 @@ HeaderItemText.propTypes = {
 };
 
 var HeaderItemWrapper = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledHeaderItemWrapper, _extends$2({
+  return React__default.createElement(StyledHeaderItemWrapper, _extends$3({
     ref: ref
   }, props));
 });
 HeaderItemWrapper.displayName = 'HeaderItemWrapper';
 
 var Footer = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledFooter, _extends$2({
+  return React__default.createElement(StyledFooter, _extends$3({
     ref: ref
   }, props));
 });
 Footer.displayName = 'Footer';
 
 var FooterItem = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledFooterItem, _extends$2({
+  return React__default.createElement(StyledFooterItem, _extends$3({
     ref: ref
   }, props));
 });
@@ -1223,7 +1426,7 @@ var Nav = React__default.forwardRef(function (props, ref) {
   }, [props.isExpanded]);
   return React__default.createElement(NavContext.Provider, {
     value: navContextValue
-  }, React__default.createElement(StyledNav, _extends$2({
+  }, React__default.createElement(StyledNav, _extends$3({
     ref: ref
   }, props, {
     hue: hue,
@@ -1236,12 +1439,12 @@ Nav.propTypes = {
   isExpanded: PropTypes.bool
 };
 
-var _excluded$2 = ["hasLogo", "hasBrandmark", "product"];
+var _excluded$5 = ["hasLogo", "hasBrandmark", "product"];
 var NavItem = React__default.forwardRef(function (_ref, ref) {
   var hasLogo = _ref.hasLogo,
       hasBrandmark = _ref.hasBrandmark,
       product = _ref.product,
-      other = _objectWithoutProperties(_ref, _excluded$2);
+      other = _objectWithoutProperties(_ref, _excluded$5);
   var _useChromeContext = useChromeContext(),
       hue = _useChromeContext.hue,
       isLight = _useChromeContext.isLight,
@@ -1249,7 +1452,7 @@ var NavItem = React__default.forwardRef(function (_ref, ref) {
   var _useNavContext = useNavContext(),
       isExpanded = _useNavContext.isExpanded;
   if (hasLogo) {
-    return React__default.createElement(StyledLogoNavItem, _extends$2({
+    return React__default.createElement(StyledLogoNavItem, _extends$3({
       ref: ref,
       isDark: isDark,
       isLight: isLight,
@@ -1257,11 +1460,11 @@ var NavItem = React__default.forwardRef(function (_ref, ref) {
     }, other));
   }
   if (hasBrandmark) {
-    return React__default.createElement(StyledBrandmarkNavItem, _extends$2({
+    return React__default.createElement(StyledBrandmarkNavItem, _extends$3({
       ref: ref
     }, other));
   }
-  return React__default.createElement(StyledNavItem, _extends$2({
+  return React__default.createElement(StyledNavItem, _extends$3({
     tabIndex: 0,
     ref: ref,
     isExpanded: isExpanded,
@@ -1278,14 +1481,14 @@ NavItem.propTypes = {
   isCurrent: PropTypes.bool
 };
 
-var _excluded$1 = ["children"];
+var _excluded$4 = ["children"];
 var NavItemIcon = function NavItemIcon(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+      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$2({
+  return React__default.createElement(StyledNavItemIcon, _extends$3({
     as: Element
   }, props));
 };
@@ -1293,7 +1496,7 @@ var NavItemIcon = function NavItemIcon(_ref) {
 var NavItemText = React__default.forwardRef(function (props, ref) {
   var _useNavContext = useNavContext(),
       isExpanded = _useNavContext.isExpanded;
-  return React__default.createElement(StyledNavItemText, _extends$2({
+  return React__default.createElement(StyledNavItemText, _extends$3({
     ref: ref,
     isExpanded: isExpanded
   }, props));
@@ -1308,7 +1511,7 @@ var SubNav = React__default.forwardRef(function (props, ref) {
       hue = _useChromeContext.hue,
       isLight = _useChromeContext.isLight,
       isDark = _useChromeContext.isDark;
-  return React__default.createElement(StyledSubNav, _extends$2({
+  return React__default.createElement(StyledSubNav, _extends$3({
     ref: ref,
     hue: hue,
     isLight: isLight,
@@ -1321,7 +1524,7 @@ var SubNavItem = React__default.forwardRef(function (props, ref) {
   var _useChromeContext = useChromeContext(),
       isDark = _useChromeContext.isDark,
       isLight = _useChromeContext.isLight;
-  return React__default.createElement(StyledSubNavItem, _extends$2({
+  return React__default.createElement(StyledSubNavItem, _extends$3({
     ref: ref,
     isDark: isDark,
     isLight: isLight
@@ -1333,7 +1536,7 @@ SubNavItem.propTypes = {
 };
 
 var SubNavItemText = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledSubNavItemText, _extends$2({
+  return React__default.createElement(StyledSubNavItemText, _extends$3({
     ref: ref
   }, props));
 });
@@ -1342,13 +1545,13 @@ SubNavItemText.propTypes = {
   isWrapped: PropTypes.bool
 };
 
-var _excluded = ["header", "children", "isExpanded", "onChange"];
+var _excluded$3 = ["header", "children", "isExpanded", "onChange"];
 var CollapsibleSubNavItem = React__default.forwardRef(function (_ref, ref) {
   var header = _ref.header,
       children = _ref.children,
       controlledExpanded = _ref.isExpanded,
       _onChange = _ref.onChange,
-      other = _objectWithoutProperties(_ref, _excluded);
+      other = _objectWithoutProperties(_ref, _excluded$3);
   var panelRef = useRef();
   var _useState = useState(controlledExpanded),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1398,5 +1601,200 @@ CollapsibleSubNavItem.propTypes = {
   onChange: PropTypes.func,
   children: PropTypes.node
 };
+CollapsibleSubNavItem.displayName = 'CollapsibleSubNavItem';
+
+var SheetContext = createContext({});
+var useSheetContext = function useSheetContext() {
+  return useContext(SheetContext);
+};
+
+function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+}
+
+function activeElement(doc) {
+  if (doc === void 0) {
+    doc = ownerDocument();
+  }
+  try {
+    var active = doc.activeElement;
+    if (!active || !active.nodeName) return null;
+    return active;
+  } catch (e) {
+    return doc.body;
+  }
+}
+
+function useFocusableMount(_ref) {
+  var isMounted = _ref.isMounted,
+      focusOnMount = _ref.focusOnMount,
+      restoreFocus = _ref.restoreFocus,
+      targetRef = _ref.targetRef;
+  var triggerRef = useRef();
+  useEffect(function () {
+    if (isMounted && focusOnMount && targetRef.current) {
+      triggerRef.current = activeElement();
+      targetRef.current.focus();
+    }
+  }, [isMounted, focusOnMount, targetRef]);
+  useEffect(function () {
+    if (!isMounted && restoreFocus && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [isMounted, restoreFocus, triggerRef]);
+}
+
+var _excluded$2 = ["id"];
+var SheetTitle = forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      props = _objectWithoutProperties(_ref, _excluded$2);
+  var _useSheetContext = useSheetContext(),
+      titleId = _useSheetContext.titleId;
+  return React__default.createElement(StyledSheetTitle, _extends$3({
+    id: id || titleId,
+    ref: ref
+  }, props));
+});
+SheetTitle.displayName = 'Sheet.Title';
+
+var _excluded$1 = ["id"];
+var SheetDescription = forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+  var _useSheetContext = useSheetContext(),
+      descriptionId = _useSheetContext.descriptionId;
+  return React__default.createElement(StyledSheetDescription, _extends$3({
+    id: id || descriptionId,
+    ref: ref
+  }, props));
+});
+SheetDescription.displayName = 'Sheet.Description';
+
+var SheetHeader = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledSheetHeader, _extends$3({
+    ref: ref
+  }, props));
+});
+SheetHeader.displayName = 'Sheet.Header';
+
+var SheetBody = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledSheetBody, _extends$3({
+    ref: ref
+  }, props));
+});
+SheetBody.displayName = 'Sheet.Body';
+
+var SheetFooter = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledSheetFooter, _extends$3({
+    ref: ref
+  }, props));
+});
+SheetFooter.displayName = 'Sheet.Footer';
+
+var SheetFooterItem = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledSheetFooterItem, _extends$3({
+    ref: ref
+  }, props));
+});
+SheetFooterItem.displayName = 'Sheet.FooterItem';
+
+var _path;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var SvgXStroke = function SvgXStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 13L13 3m0 10L3 3"
+  })));
+};
 
-export { Body, Chrome, CollapsibleSubNavItem, Content, Footer, FooterItem, Header, HeaderItem, HeaderItemIcon, HeaderItemText, HeaderItemWrapper, Main, Nav, NavItem, NavItemIcon, NavItemText, Sidebar, SkipNav, SubNav, SubNavItem, SubNavItemText };
+var SheetClose = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledSheetClose, _extends$3({
+    "aria-label": "Close Sheet",
+    ref: ref
+  }, props), React__default.createElement(SvgXStroke, null));
+});
+SheetClose.displayName = 'Sheet.Close';
+
+var _excluded = ["id", "isOpen", "isAnimated", "focusOnMount", "restoreFocus", "placement", "size", "children"];
+var Sheet = React__default.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      isOpen = _ref.isOpen,
+      isAnimated = _ref.isAnimated,
+      focusOnMount = _ref.focusOnMount,
+      restoreFocus = _ref.restoreFocus,
+      placement = _ref.placement,
+      size = _ref.size,
+      children = _ref.children,
+      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 titleId = "".concat(idPrefix, "--title");
+  var descriptionId = "".concat(idPrefix, "--description");
+  var sheetContext = useMemo(function () {
+    return {
+      titleId: titleId,
+      descriptionId: descriptionId
+    };
+  }, [titleId, descriptionId]);
+  useFocusableMount({
+    targetRef: sheetRef,
+    isMounted: isOpen,
+    focusOnMount: focusOnMount,
+    restoreFocus: restoreFocus
+  });
+  return React__default.createElement(SheetContext.Provider, {
+    value: sheetContext
+  }, React__default.createElement(StyledSheet, _extends$3({
+    isOpen: isOpen,
+    isAnimated: isAnimated,
+    placement: placement,
+    size: size,
+    tabIndex: -1,
+    id: idPrefix,
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
+    ref: mergeRefs([sheetRef, ref])
+  }, props), React__default.createElement(StyledSheetWrapper, {
+    isOpen: isOpen,
+    isAnimated: isAnimated,
+    placement: placement,
+    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 = {
+  id: PropTypes.string,
+  isOpen: PropTypes.bool,
+  isAnimated: PropTypes.bool,
+  focusOnMount: PropTypes.bool,
+  restoreFocus: PropTypes.bool,
+  placement: PropTypes.oneOf(['start', 'end']),
+  size: PropTypes.string
+};
+Sheet.defaultProps = {
+  isAnimated: true,
+  placement: 'end',
+  size: '380px'
+};
+
+export { Body, Chrome, CollapsibleSubNavItem, Content, Footer, FooterItem, Header, HeaderItem, HeaderItemIcon, HeaderItemText, HeaderItemWrapper, Main, Nav, NavItem, NavItemIcon, NavItemText, PRODUCTS, Sheet, Sidebar, SkipNav, SubNav, SubNavItem, SubNavItemText };