@zendeskgarden/react-chrome 9.0.0-next.2 → 9.0.0-next.4

package/dist/index.cjs.js

@@ -10,8 +10,8 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var styled = require('styled-components');
-var polished = require('polished');
 var reactTheming = require('@zendeskgarden/react-theming');
+var polished = require('polished');
 var containerAccordion = require('@zendeskgarden/container-accordion');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactUid = require('react-uid');
@@ -58,17 +58,13 @@ function _extends$3() {
   return _extends$3.apply(this, arguments);
 }
 
-const ChromeContext = React__namespace.default.createContext({
-  hue: 'chromeHue'
-});
-const useChromeContext = () => {
-  return React.useContext(ChromeContext);
-};
+const PLACEMENT = ['end', 'start'];
+const PRODUCTS = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
 
 const COMPONENT_ID$A = 'chrome.chrome';
 const StyledChrome = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -80,7 +76,7 @@ StyledChrome.defaultProps = {
 const COMPONENT_ID$z = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -97,7 +93,7 @@ const sizeStyles$4 = props => {
 };
 const StyledBaseHeaderItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -118,7 +114,7 @@ const COMPONENT_ID$x = '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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
@@ -142,7 +138,7 @@ const getExpandedNavWidth = () => {
 };
 const StyledNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -174,7 +170,7 @@ const retrieveProductColor$1 = props => {
 };
 const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
@@ -195,7 +191,7 @@ const sizeStyles$3 = props => {
 };
 const StyledBaseNavItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -210,7 +206,7 @@ const getHeaderHeight = props => {
 };
 const StyledHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
@@ -248,7 +244,7 @@ const sizeStyles$2 = props => {
 };
 const StyledSkipNav = styled__default.default.a.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
@@ -281,7 +277,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
@@ -293,7 +289,7 @@ StyledSkipNavIcon.defaultProps = {
 const COMPONENT_ID$q = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
@@ -308,7 +304,7 @@ const getFooterHeight = props => {
 };
 const StyledFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
@@ -320,7 +316,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$o = 'chrome.content';
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -332,7 +328,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$n = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
@@ -344,7 +340,7 @@ StyledMain.defaultProps = {
 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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSidebar",
   componentId: "sc-1q77fuw-0"
@@ -356,7 +352,7 @@ StyledSidebar.defaultProps = {
 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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -372,7 +368,7 @@ const imgStyles = props => {
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
@@ -391,7 +387,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.2',
+  'data-garden-version': '9.0.0-next.4',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -429,7 +425,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.2',
+  'data-garden-version': '9.0.0-next.4',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -442,7 +438,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.2',
+  'data-garden-version': '9.0.0-next.4',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -455,7 +451,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -501,7 +497,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.2',
+  'data-garden-version': '9.0.0-next.4',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
@@ -518,7 +514,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -571,7 +567,7 @@ const getSubNavItemHeight = props => {
 };
 const StyledSubNavItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
@@ -594,7 +590,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -612,7 +608,7 @@ const sizeStyles = props => {
 };
 const StyledSubNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -624,7 +620,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.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -671,7 +667,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 const StyledSubNavItemIconWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -684,7 +680,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -715,7 +711,7 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -727,7 +723,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -754,7 +750,7 @@ 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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -766,7 +762,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -778,7 +774,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -802,7 +798,7 @@ const colorStyles = props => {
 };
 const StyledSheetClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -814,7 +810,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
@@ -826,7 +822,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -838,7 +834,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.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
@@ -847,133 +843,6 @@ StyledSheetHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const Chrome = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    hue,
-    isFluid,
-    ...props
-  } = _ref;
-  const theme = React.useContext(styled.ThemeContext);
-  const isLightMemoized = React.useMemo(() => {
-    if (hue) {
-      const backgroundColor = reactTheming.getColor(hue, 600, theme);
-      const LIGHT_COLOR = 'white';
-      return polished.readableColor(backgroundColor, LIGHT_COLOR, undefined, false ) === LIGHT_COLOR;
-    }
-    return false;
-  }, [hue, theme]);
-  const isLight = hue ? isLightMemoized : false;
-  const isDark = hue ? !isLightMemoized : false;
-  const chromeContextValue = React.useMemo(() => ({
-    hue: hue || 'chromeHue',
-    isLight,
-    isDark
-  }), [hue, isLight, isDark]);
-  const environment = reactTheming.useDocument(theme);
-  React.useEffect(() => {
-    if (environment && !isFluid) {
-      const htmlElement = environment.querySelector('html');
-      if (htmlElement) {
-        const defaultHtmlPosition = htmlElement.style.position;
-        htmlElement.style.position = 'fixed';
-        return () => {
-          htmlElement.style.position = defaultHtmlPosition;
-        };
-      }
-    }
-    return undefined;
-  }, [environment, isFluid]);
-  return React__namespace.default.createElement(ChromeContext.Provider, {
-    value: chromeContextValue
-  }, React__namespace.default.createElement(StyledChrome, _extends$3({
-    ref: ref
-  }, props)));
-});
-Chrome.displayName = 'Chrome';
-Chrome.propTypes = {
-  hue: PropTypes__default.default.string
-};
-
-const SkipNav = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    targetId,
-    zIndex,
-    children,
-    ...props
-  } = _ref;
-  return React__namespace.default.createElement(StyledSkipNav, _extends$3({
-    href: `#${targetId}`,
-    zIndex: zIndex,
-    ref: ref
-  }, props), React__namespace.default.createElement(StyledSkipNavIcon, null), children);
-});
-SkipNav.displayName = 'SkipNav';
-SkipNav.propTypes = {
-  targetId: PropTypes__default.default.string.isRequired,
-  zIndex: PropTypes__default.default.number
-};
-SkipNav.defaultProps = {
-  zIndex: 1
-};
-
-const BodyContext = React__namespace.default.createContext({
-  hasFooter: true
-});
-const useBodyContext = () => {
-  return React.useContext(BodyContext);
-};
-
-const Body$1 = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    hasFooter,
-    ...props
-  } = _ref;
-  const bodyContextValue = React.useMemo(() => ({
-    hasFooter: !!hasFooter
-  }), [hasFooter]);
-  return React__namespace.default.createElement(BodyContext.Provider, {
-    value: bodyContextValue
-  }, React__namespace.default.createElement(StyledBody, _extends$3({
-    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();
-  return React__namespace.default.createElement(StyledContent, _extends$3({
-    ref: ref,
-    hasFooter: hasFooter
-  }, props));
-});
-Content.displayName = 'Content';
-
-const Main = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledMain, _extends$3({
-  ref: ref
-}, 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 Header$1 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeader, _extends$3({
-  ref: ref
-}, props)));
-Header$1.displayName = 'Header';
-Header$1.propTypes = {
-  isStandalone: PropTypes__default.default.bool
-};
-
-const PLACEMENT = ['end', 'start'];
-const PRODUCT = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
-
 const HeaderItem = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     hasLogo,
@@ -995,7 +864,7 @@ HeaderItem.propTypes = {
   maxX: PropTypes__default.default.bool,
   maxY: PropTypes__default.default.bool,
   isRound: PropTypes__default.default.bool,
-  product: PropTypes__default.default.oneOf(PRODUCT),
+  product: PropTypes__default.default.oneOf(PRODUCTS),
   hasLogo: PropTypes__default.default.bool
 };
 
@@ -1036,11 +905,6 @@ const HeaderItemWrapper = React__namespace.default.forwardRef((props, ref) => Re
 }, props)));
 HeaderItemWrapper.displayName = 'HeaderItemWrapper';
 
-const Footer$1 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooter, _extends$3({
-  ref: ref
-}, props)));
-Footer$1.displayName = 'Footer';
-
 const FooterItem$1 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, _extends$3({
   ref: ref
 }, props)));
@@ -1053,28 +917,11 @@ const useNavContext = () => {
   return React.useContext(NavContext);
 };
 
-const Nav = React__namespace.default.forwardRef((props, ref) => {
-  const {
-    hue,
-    isLight,
-    isDark
-  } = useChromeContext();
-  const navContextValue = React.useMemo(() => ({
-    isExpanded: !!props.isExpanded
-  }), [props.isExpanded]);
-  return React__namespace.default.createElement(NavContext.Provider, {
-    value: navContextValue
-  }, React__namespace.default.createElement(StyledNav, _extends$3({
-    ref: ref
-  }, props, {
-    hue: hue,
-    isLight: isLight,
-    isDark: isDark
-  })));
+const ChromeContext = React__namespace.default.createContext({
+  hue: 'chromeHue'
 });
-Nav.displayName = 'Nav';
-Nav.propTypes = {
-  isExpanded: PropTypes__default.default.bool
+const useChromeContext = () => {
+  return React.useContext(ChromeContext);
 };
 
 const NavItem = React__namespace.default.forwardRef((_ref, ref) => {
@@ -1119,7 +966,7 @@ const NavItem = React__namespace.default.forwardRef((_ref, ref) => {
 });
 NavItem.displayName = 'NavItem';
 NavItem.propTypes = {
-  product: PropTypes__default.default.oneOf(PRODUCT),
+  product: PropTypes__default.default.oneOf(PRODUCTS),
   hasLogo: PropTypes__default.default.bool,
   hasBrandmark: PropTypes__default.default.bool
 };
@@ -1162,21 +1009,6 @@ NavItemText.propTypes = {
   isWrapped: PropTypes__default.default.bool
 };
 
-const SubNav = React__namespace.default.forwardRef((props, ref) => {
-  const {
-    hue,
-    isLight,
-    isDark
-  } = useChromeContext();
-  return React__namespace.default.createElement(StyledSubNav, _extends$3({
-    ref: ref,
-    hue: hue,
-    isLight: isLight,
-    isDark: isDark
-  }, props));
-});
-SubNav.displayName = 'SubNav';
-
 const SubNavItem = React__namespace.default.forwardRef((props, ref) => {
   const {
     isDark,
@@ -1270,6 +1102,189 @@ CollapsibleSubNavItem.propTypes = {
 };
 CollapsibleSubNavItem.displayName = 'CollapsibleSubNavItem';
 
+const Chrome = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    hue,
+    isFluid,
+    ...props
+  } = _ref;
+  const theme = React.useContext(styled.ThemeContext);
+  const isLightMemoized = React.useMemo(() => {
+    if (hue) {
+      const backgroundColor = reactTheming.getColor(hue, 600, theme);
+      const LIGHT_COLOR = 'white';
+      return polished.readableColor(backgroundColor, LIGHT_COLOR, undefined, false ) === LIGHT_COLOR;
+    }
+    return false;
+  }, [hue, theme]);
+  const isLight = hue ? isLightMemoized : false;
+  const isDark = hue ? !isLightMemoized : false;
+  const chromeContextValue = React.useMemo(() => ({
+    hue: hue || 'chromeHue',
+    isLight,
+    isDark
+  }), [hue, isLight, isDark]);
+  const environment = reactTheming.useDocument(theme);
+  React.useEffect(() => {
+    if (environment && !isFluid) {
+      const htmlElement = environment.querySelector('html');
+      if (htmlElement) {
+        const defaultHtmlPosition = htmlElement.style.position;
+        htmlElement.style.position = 'fixed';
+        return () => {
+          htmlElement.style.position = defaultHtmlPosition;
+        };
+      }
+    }
+    return undefined;
+  }, [environment, isFluid]);
+  return React__namespace.default.createElement(ChromeContext.Provider, {
+    value: chromeContextValue
+  }, React__namespace.default.createElement(StyledChrome, _extends$3({
+    ref: ref
+  }, props)));
+});
+Chrome.displayName = 'Chrome';
+Chrome.propTypes = {
+  hue: PropTypes__default.default.string
+};
+
+const SkipNav = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    targetId,
+    zIndex,
+    children,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledSkipNav, _extends$3({
+    href: `#${targetId}`,
+    zIndex: zIndex,
+    ref: ref
+  }, props), React__namespace.default.createElement(StyledSkipNavIcon, null), children);
+});
+SkipNav.displayName = 'SkipNav';
+SkipNav.propTypes = {
+  targetId: PropTypes__default.default.string.isRequired,
+  zIndex: PropTypes__default.default.number
+};
+SkipNav.defaultProps = {
+  zIndex: 1
+};
+
+const BodyContext = React__namespace.default.createContext({
+  hasFooter: true
+});
+const useBodyContext = () => {
+  return React.useContext(BodyContext);
+};
+
+const Body$1 = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    hasFooter,
+    ...props
+  } = _ref;
+  const bodyContextValue = React.useMemo(() => ({
+    hasFooter: !!hasFooter
+  }), [hasFooter]);
+  return React__namespace.default.createElement(BodyContext.Provider, {
+    value: bodyContextValue
+  }, React__namespace.default.createElement(StyledBody, _extends$3({
+    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();
+  return React__namespace.default.createElement(StyledContent, _extends$3({
+    ref: ref,
+    hasFooter: hasFooter
+  }, props));
+});
+Content.displayName = 'Content';
+
+const Main = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledMain, _extends$3({
+  ref: ref
+}, 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)));
+HeaderComponent.displayName = 'Header';
+HeaderComponent.propTypes = {
+  isStandalone: PropTypes__default.default.bool
+};
+const Header$1 = HeaderComponent;
+Header$1.Item = HeaderItem;
+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)));
+FooterComponent.displayName = 'Footer';
+const Footer$1 = FooterComponent;
+Footer$1.Item = FooterItem$1;
+
+const NavComponent = React__namespace.default.forwardRef((props, ref) => {
+  const {
+    hue,
+    isLight,
+    isDark
+  } = useChromeContext();
+  const navContextValue = React.useMemo(() => ({
+    isExpanded: !!props.isExpanded
+  }), [props.isExpanded]);
+  return React__namespace.default.createElement(NavContext.Provider, {
+    value: navContextValue
+  }, React__namespace.default.createElement(StyledNav, _extends$3({
+    ref: ref
+  }, props, {
+    hue: hue,
+    isLight: isLight,
+    isDark: isDark
+  })));
+});
+NavComponent.displayName = 'Nav';
+NavComponent.propTypes = {
+  isExpanded: PropTypes__default.default.bool
+};
+const Nav = NavComponent;
+Nav.Item = NavItem;
+Nav.ItemIcon = NavItemIcon;
+Nav.ItemText = NavItemText;
+
+const SubNavComponent = React__namespace.default.forwardRef((props, ref) => {
+  const {
+    hue,
+    isLight,
+    isDark
+  } = useChromeContext();
+  return React__namespace.default.createElement(StyledSubNav, _extends$3({
+    ref: ref,
+    hue: hue,
+    isLight: isLight,
+    isDark: isDark
+  }, props));
+});
+SubNavComponent.displayName = 'SubNav';
+const SubNav = SubNavComponent;
+SubNav.Item = SubNavItem;
+SubNav.ItemText = SubNavItemText;
+SubNav.CollapsibleItem = CollapsibleSubNavItem;
+
 const SheetContext = React.createContext({
   setIsCloseButtonPresent() {}
 });
@@ -1414,7 +1429,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.2'}`), [id, seed]);
+  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.4'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = React.useMemo(() => ({
@@ -1488,7 +1503,7 @@ exports.Nav = Nav;
 exports.NavItem = NavItem;
 exports.NavItemIcon = NavItemIcon;
 exports.NavItemText = NavItemText;
-exports.PRODUCTS = PRODUCT;
+exports.PRODUCTS = PRODUCTS;
 exports.Sheet = Sheet;
 exports.Sidebar = Sidebar;
 exports.SkipNav = SkipNav;