@zendeskgarden/react-chrome 9.0.0-next.5 → 9.0.0-next.7

package/dist/index.cjs.js

@@ -61,39 +61,39 @@ function _extends$3() {
 const PLACEMENT = ['end', 'start'];
 const PRODUCTS = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
 
-const COMPONENT_ID$A = 'chrome.chrome';
+const COMPONENT_ID$z = 'chrome.chrome';
 const StyledChrome = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$z,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
-})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props));
+})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props));
 StyledChrome.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$z = 'chrome.header_item_icon';
+const COMPONENT_ID$y = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$y,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
-})(["transition:transform 0.25s ease-in-out;margin:0 3px;width:", ";min-width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props));
+})(["transition:transform 0.25s ease-in-out;margin:0 3px;width:", ";min-width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props));
 StyledHeaderItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$y = 'chrome.base_header_item';
+const COMPONENT_ID$x = 'chrome.base_header_item';
 const getHeaderItemSize = props => `${props.theme.space.base * 7.5}px`;
 const sizeStyles$4 = props => {
   const size = props.theme.space.base * 7.5;
   return styled.css(["padding:0 3px;min-width:", "px;height:", ";line-height:", ";"], size, props.maxY ? '100%' : `${size}px`, reactTheming.getLineHeight(size, props.theme.fontSizes.md));
 };
 const StyledBaseHeaderItem = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$x,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -105,25 +105,25 @@ const StyledBaseHeaderItem = styled__default.default.button.attrs({
     return '0';
   }
   return props.theme.borderRadii.md;
-}, sizeStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props));
+}, sizeStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props));
 StyledBaseHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$x = 'chrome.header_item_text';
+const COMPONENT_ID$w = 'chrome.header_item_text';
 const clippedStyling = styled.css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledHeaderItemText = styled__default.default.span.attrs({
-  'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
-})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props));
+})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props));
 StyledHeaderItemText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$w = 'chrome.nav';
+const COMPONENT_ID$v = 'chrome.nav';
 const colorStyles$6 = props => {
   const shade = props.isDark || props.isLight ? 600 : 700;
   const backgroundColor = reactTheming.getColorV8(props.hue, shade, props.theme);
@@ -137,17 +137,17 @@ const getExpandedNavWidth = () => {
   return `200px`;
 };
 const StyledNav = styled__default.default.nav.attrs({
-  'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
-})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;width:", ";font-size:", ";", ";", ";"], props => props.isExpanded ? getExpandedNavWidth : getNavWidth, props => props.theme.fontSizes.md, props => colorStyles$6(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props));
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;width:", ";font-size:", ";", ";", ";"], props => props.isExpanded ? getExpandedNavWidth : getNavWidth, props => props.theme.fontSizes.md, props => colorStyles$6(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$v = 'chrome.header_item';
+const COMPONENT_ID$u = 'chrome.header_item';
 const retrieveProductColor$1 = props => {
   switch (props.product) {
     case 'chat':
@@ -169,18 +169,18 @@ const retrieveProductColor$1 = props => {
   }
 };
 const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
   componentId: "sc-1n1d1yv-0"
-})(["display:none;order:0;margin-right:", ";margin-left:", ";border-", ":", ";border-radius:0;padding:0;width:", ";height:100%;overflow:hidden;fill:", ";text-decoration:none;color:", ";", "{", "}", "{margin:0;width:", ";height:", ";}", ";"], props => props.theme.rtl ? `-${props.theme.space.base}px` : 'auto', props => props.theme.rtl ? 'auto' : `-${props.theme.space.base}px`, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => reactTheming.getColorV8('chromeHue', 700, props.theme), props => retrieveProductColor$1(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
+})(["display:none;order:0;margin-right:", ";margin-left:", ";border-", ":", ";border-radius:0;padding:0;width:", ";height:100%;overflow:hidden;fill:", ";text-decoration:none;color:", ";", "{", "}", "{margin:0;width:", ";height:", ";}", ";"], props => props.theme.rtl ? `-${props.theme.space.base}px` : 'auto', props => props.theme.rtl ? 'auto' : `-${props.theme.space.base}px`, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => reactTheming.getColorV8('chromeHue', 700, props.theme), props => retrieveProductColor$1(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
 StyledLogoHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$u = 'chrome.base_nav_item';
+const COMPONENT_ID$t = 'chrome.base_nav_item';
 const getNavItemHeight = props => {
   return `${props.theme.space.base * 13}px`;
 };
@@ -190,8 +190,8 @@ const sizeStyles$3 = props => {
   return styled.css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, getNavItemHeight);
 };
 const StyledBaseNavItem = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -200,26 +200,26 @@ StyledBaseNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$t = 'chrome.header';
+const COMPONENT_ID$s = 'chrome.header';
 const getHeaderHeight = props => {
   return getNavItemHeight(props);
 };
 const StyledHeader = styled__default.default.header.attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
-})(["display:flex;position:", ";align-items:center;justify-content:flex-end;box-sizing:border-box;border-bottom:", ";box-shadow:", ";background-color:", ";padding:0 ", "px;height:", ";color:", ";font-size:", ";", " ", ";"], props => props.isStandalone && 'relative', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', reactTheming.getColorV8('chromeHue', 600, props.theme, 0.15)), props => props.theme.colors.background, props => props.theme.space.base, getHeaderHeight, props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isStandalone && `
+})(["display:flex;position:", ";align-items:center;justify-content:flex-end;box-sizing:border-box;border-bottom:", ";box-shadow:", ";background-color:", ";padding:0 ", "px;height:", ";color:", ";font-size:", ";", " ", ";"], props => props.isStandalone && 'relative', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', reactTheming.getColorV8('chromeHue', 600, props.theme, 0.15)), props => reactTheming.getColorV8('background', 600 , props.theme), props => props.theme.space.base, getHeaderHeight, props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isStandalone && `
     ${StyledLogoHeaderItem} {
       display: inline-flex;
     }
-  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
+  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$s = 'chrome.skipnav';
+const COMPONENT_ID$r = 'chrome.skipnav';
 const animationStyles = () => {
   const animationName = styled.keyframes(["0%{transform:translate(-50%,-50%);}"]);
   return styled.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);
@@ -228,7 +228,7 @@ const colorStyles$5 = theme => {
   const color = reactTheming.getColorV8('primaryHue', 600, theme);
   const borderColor = reactTheming.getColorV8('neutralHue', 300, theme);
   const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
-  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}", ""], borderColor, boxShadow, theme.colors.background, color, color, reactTheming.focusStyles({
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}", ""], borderColor, boxShadow, reactTheming.getColorV8('background', 600 , theme), color, color, reactTheming.focusStyles({
     theme,
     inset: true,
     boxShadow
@@ -243,12 +243,12 @@ const sizeStyles$2 = props => {
   return styled.css(["top:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, padding, props.theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
 };
 const StyledSkipNav = styled__default.default.a.attrs({
-  'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
-})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles$5(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
+})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles$5(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledSkipNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -269,90 +269,78 @@ var SvgLinkStroke = function SvgLinkStroke(props) {
   })));
 };
 
-const COMPONENT_ID$r = 'chrome.skipnav_icon';
+const COMPONENT_ID$q = 'chrome.skipnav_icon';
 const sizeStyles$1 = theme => {
   const margin = `${theme.space.base * 2}px`;
   const size = theme.iconSizes.md;
   return styled.css(["margin-", ":", ";width:", ";height:", ";"], theme.rtl ? 'left' : 'right', margin, size, size);
 };
 const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
-})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
+})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
 StyledSkipNavIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$q = 'chrome.body';
+const COMPONENT_ID$p = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
-})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColorV8('neutralHue', 100, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColorV8('neutralHue', 100, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$p = 'chrome.footer';
+const COMPONENT_ID$o = 'chrome.footer';
 const getFooterHeight = props => {
   return `${props.theme.space.base * 20}px`;
 };
 const StyledFooter = styled__default.default.footer.attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
-})(["display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-top:", ";background-color:", ";padding:0 ", "px;height:", ";", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => props.theme.colors.background, props => props.theme.space.base * 9, getFooterHeight, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
+})(["display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-top:", ";background-color:", ";padding:0 ", "px;height:", ";", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => reactTheming.getColorV8('background', 600 , props.theme), props => props.theme.space.base * 9, getFooterHeight, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
 StyledFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$o = 'chrome.content';
+const COMPONENT_ID$n = 'chrome.content';
 const StyledContent = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
-})(["display:flex;height:", ";line-height:", ";color:", ";font-size:", ";&:focus{outline:none;}", ";"], props => props.hasFooter ? `calc(100% - ${polished.math(`${getHeaderHeight(props)} + ${getFooterHeight(props)}`)})` : `calc(100% - ${getHeaderHeight(props)})`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
+})(["display:flex;height:", ";line-height:", ";color:", ";font-size:", ";&:focus{outline:none;}", ";"], props => props.hasFooter ? `calc(100% - ${polished.math(`${getHeaderHeight(props)} + ${getFooterHeight(props)}`)})` : `calc(100% - ${getHeaderHeight(props)})`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$n = 'chrome.main';
+const COMPONENT_ID$m = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
-})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => props.theme.colors.background, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
+})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => reactTheming.getColorV8('background', 600 , props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledMain.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$m = 'chrome.sidebar';
-const StyledSidebar = styled__default.default.aside.attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.5'
-}).withConfig({
-  displayName: "StyledSidebar",
-  componentId: "sc-1q77fuw-0"
-})(["flex-shrink:0;order:0;box-sizing:border-box;border-", ":", ";width:330px;overflow:auto;&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
-StyledSidebar.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
 const COMPONENT_ID$l = 'chrome.footer_item';
 const StyledFooterItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -368,11 +356,11 @@ const imgStyles = props => {
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
-})(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &:focus-visible:active,&[data-garden-focus-visible]:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", ";"], props => reactTheming.focusStyles({
+})(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &:focus-visible:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", ";"], props => reactTheming.focusStyles({
   theme: props.theme,
   inset: props.maxY
 }), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.getColorV8('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
@@ -387,7 +375,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$j = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -425,7 +413,7 @@ const colorStyles$4 = props => {
 };
 const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -438,7 +426,7 @@ StyledLogoNavItem.defaultProps = {
 const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
 const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -451,7 +439,7 @@ StyledBrandmarkNavItem.defaultProps = {
 const COMPONENT_ID$g = 'chrome.nav_item_icon';
 const StyledNavItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -497,7 +485,7 @@ const colorStyles$3 = props => {
 };
 const StyledNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
@@ -514,7 +502,7 @@ StyledNavItem.defaultProps = {
 const COMPONENT_ID$e = 'chrome.nav_item_text';
 const StyledNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -567,7 +555,7 @@ const getSubNavItemHeight = props => {
 };
 const StyledSubNavItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
@@ -590,7 +578,7 @@ const colorStyles$1 = props => {
 };
 const StyledSubNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -608,7 +596,7 @@ const sizeStyles = props => {
 };
 const StyledSubNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -620,7 +608,7 @@ StyledSubNavItemText.defaultProps = {
 const COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
 const StyledSubNavItemHeader = styled__default.default(StyledSubNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -667,7 +655,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 const StyledSubNavItemIconWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -680,7 +668,7 @@ const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
 const hiddenStyling = styled.css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
 const StyledSubNavPanel = styled__default.default.div.attrs({
   'data-garden-id': PANEL_COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -711,11 +699,11 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
-})(["display:flex;order:1;transition:", ";background-color:", ";width:", ";height:100%;overflow:hidden;font-size:", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', props => props.theme.colors.background, props => props.isOpen ? props.size : '0px', props => props.theme.fontSizes.md, props => borderStyle(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["display:flex;order:1;transition:", ";background-color:", ";width:", ";height:100%;overflow:hidden;font-size:", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', props => reactTheming.getColorV8('background', 600 , props.theme), props => props.isOpen ? props.size : '0px', props => props.theme.fontSizes.md, props => borderStyle(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledSheet.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -723,7 +711,7 @@ StyledSheet.defaultProps = {
 const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
 const StyledSheetWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -750,11 +738,11 @@ StyledSheetWrapper.defaultProps = {
 const COMPONENT_ID$6 = 'chrome.sheet_title';
 const StyledSheetTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
-})(["line-height:", ";color:", ";font-weight:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["line-height:", ";color:", ";font-weight:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledSheetTitle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -762,7 +750,7 @@ StyledSheetTitle.defaultProps = {
 const COMPONENT_ID$5 = 'chrome.sheet_description';
 const StyledSheetDescription = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -774,7 +762,7 @@ StyledSheetDescription.defaultProps = {
 const COMPONENT_ID$4 = 'chrome.sheet_body';
 const StyledSheetBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -798,7 +786,7 @@ const colorStyles = props => {
 };
 const StyledSheetClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -810,7 +798,7 @@ StyledSheetClose.defaultProps = {
 const COMPONENT_ID$2 = 'chrome.sheet_footer';
 const StyledSheetFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
@@ -822,7 +810,7 @@ StyledSheetFooter.defaultProps = {
 const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
 const StyledSheetFooterItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -834,7 +822,7 @@ StyledSheetFooterItem.defaultProps = {
 const COMPONENT_ID = 'chrome.sheet_header';
 const StyledSheetHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
@@ -1171,21 +1159,17 @@ SkipNav.defaultProps = {
   zIndex: 1
 };
 
-const BodyContext = React__namespace.default.createContext({
-  hasFooter: true
-});
+const BodyContext = React__namespace.default.createContext(undefined);
 const useBodyContext = () => {
   return React.useContext(BodyContext);
 };
 
-const Body$1 = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    hasFooter,
-    ...props
-  } = _ref;
+const Body$1 = React__namespace.default.forwardRef((props, ref) => {
+  const [hasFooter, setHasFooter] = React.useState(false);
   const bodyContextValue = React.useMemo(() => ({
-    hasFooter: !!hasFooter
-  }), [hasFooter]);
+    hasFooter,
+    setHasFooter
+  }), [hasFooter, setHasFooter]);
   return React__namespace.default.createElement(BodyContext.Provider, {
     value: bodyContextValue
   }, React__namespace.default.createElement(StyledBody, _extends$3({
@@ -1193,14 +1177,11 @@ const Body$1 = React__namespace.default.forwardRef((_ref, ref) => {
   }, props)));
 });
 Body$1.displayName = 'Body';
-Body$1.propTypes = {
-  hasFooter: PropTypes__default.default.bool
-};
 
 const Content = React__namespace.default.forwardRef((props, ref) => {
   const {
     hasFooter
-  } = useBodyContext();
+  } = useBodyContext() || {};
   return React__namespace.default.createElement(StyledContent, _extends$3({
     ref: ref,
     hasFooter: hasFooter
@@ -1213,11 +1194,6 @@ const Main = React__namespace.default.forwardRef((props, ref) => React__namespac
 }, props)));
 Main.displayName = 'Main';
 
-const Sidebar = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledSidebar, _extends$3({
-  ref: ref
-}, props)));
-Sidebar.displayName = 'Sidebar';
-
 const HeaderComponent = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeader, _extends$3({
   ref: ref
 }, props)));
@@ -1231,9 +1207,25 @@ Header$1.ItemIcon = HeaderItemIcon;
 Header$1.ItemText = HeaderItemText;
 Header$1.ItemWrapper = HeaderItemWrapper;
 
-const FooterComponent = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooter, _extends$3({
-  ref: ref
-}, props)));
+const FooterComponent = React__namespace.default.forwardRef((props, ref) => {
+  const {
+    hasFooter,
+    setHasFooter
+  } = useBodyContext() || {};
+  React.useEffect(() => {
+    if (!hasFooter && setHasFooter) {
+      setHasFooter(true);
+    }
+    return () => {
+      if (hasFooter && setHasFooter) {
+        setHasFooter(false);
+      }
+    };
+  }, [hasFooter, setHasFooter]);
+  return React__namespace.default.createElement(StyledFooter, _extends$3({
+    ref: ref
+  }, props));
+});
 FooterComponent.displayName = 'Footer';
 const Footer$1 = FooterComponent;
 Footer$1.Item = FooterItem$1;
@@ -1429,7 +1421,7 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
   const sheetRef = React.useRef(null);
   const seed = reactUid.useUIDSeed();
   const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
-  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.5'}`), [id, seed]);
+  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.7'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = React.useMemo(() => ({
@@ -1505,7 +1497,6 @@ exports.NavItemIcon = NavItemIcon;
 exports.NavItemText = NavItemText;
 exports.PRODUCTS = PRODUCTS;
 exports.Sheet = Sheet;
-exports.Sidebar = Sidebar;
 exports.SkipNav = SkipNav;
 exports.SubNav = SubNav;
 exports.SubNavItem = SubNavItem;