@zendeskgarden/react-chrome 9.0.0-next.0 → 9.0.0-next.10

package/dist/index.cjs.js

@@ -1,19 +1,16 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 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 containerAccordion = require('@zendeskgarden/container-accordion');
-var containerUtilities = require('@zendeskgarden/container-utilities');
+var polished = require('polished');
 var reactUid = require('react-uid');
 var reactMergeRefs = require('react-merge-refs');
 var activeElement = require('dom-helpers/activeElement');
@@ -43,61 +40,42 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var activeElement__default = /*#__PURE__*/_interopDefault(activeElement);
 
-function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$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', 'explore', 'guide', 'support', 'talk'];
 
-const COMPONENT_ID$A = 'chrome.chrome';
+const COMPONENT_ID$w = 'chrome.chrome';
 const StyledChrome = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '9.0.0-next.10'
 }).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$w, props));
 StyledChrome.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$z = 'chrome.header_item_icon';
+const COMPONENT_ID$v = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.0.0-next.10'
 }).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$v, props));
 StyledHeaderItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$y = 'chrome.base_header_item';
+const COMPONENT_ID$u = 'chrome.base_header_item';
 const getHeaderItemSize = props => `${props.theme.space.base * 7.5}px`;
-const sizeStyles$4 = props => {
+const sizeStyles$3 = 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.0'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -109,28 +87,28 @@ const StyledBaseHeaderItem = styled__default.default.button.attrs({
     return '0';
   }
   return props.theme.borderRadii.md;
-}, sizeStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props));
+}, sizeStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
 StyledBaseHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$x = 'chrome.header_item_text';
+const COMPONENT_ID$t = '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.0'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.0.0-next.10'
 }).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$t, props));
 StyledHeaderItemText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$w = 'chrome.nav';
-const colorStyles$6 = props => {
+const COMPONENT_ID$s = 'chrome.nav';
+const colorStyles$4 = props => {
   const shade = props.isDark || props.isLight ? 600 : 700;
-  const backgroundColor = reactTheming.getColor(props.hue, shade, props.theme);
+  const backgroundColor = reactTheming.getColorV8(props.hue, shade, props.theme);
   const foregroundColor = props.isLight ? props.theme.palette.black : props.theme.palette.white;
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
@@ -141,29 +119,25 @@ const getExpandedNavWidth = () => {
   return `200px`;
 };
 const StyledNav = styled__default.default.nav.attrs({
-  'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.0.0-next.10'
 }).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$4(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$v = 'chrome.header_item';
+const COMPONENT_ID$r = 'chrome.header_item';
 const retrieveProductColor$1 = props => {
   switch (props.product) {
     case 'chat':
       return reactTheming.PALETTE.product.chat;
-    case 'connect':
-      return reactTheming.PALETTE.product.connect;
     case 'explore':
       return reactTheming.PALETTE.product.explore;
     case 'guide':
       return reactTheming.PALETTE.product.guide;
-    case 'message':
-      return reactTheming.PALETTE.product.message;
     case 'support':
       return reactTheming.PALETTE.product.support;
     case 'talk':
@@ -173,72 +147,72 @@ const retrieveProductColor$1 = props => {
   }
 };
 const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.0',
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.0.0-next.10',
   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.getColor('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => reactTheming.getColor('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$r, props));
 StyledLogoHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$u = 'chrome.base_nav_item';
+const COMPONENT_ID$q = 'chrome.base_nav_item';
 const getNavItemHeight = props => {
   return `${props.theme.space.base * 13}px`;
 };
-const sizeStyles$3 = props => {
+const sizeStyles$2 = props => {
   const verticalPadding = polished.math(`(${getNavItemHeight(props)} - ${props.theme.iconSizes.lg}) / 2`);
   const horizontalPadding = polished.math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`);
   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.0'
+const StyledBaseNavItem = styled__default.default.div.attrs({
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:outline-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;border:none;box-sizing:border-box;background:transparent;text-decoration:none;color:inherit;font-size:inherit;", ""], props => sizeStyles$3(props));
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:outline-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;", ""], props => sizeStyles$2(props));
 StyledBaseNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$t = 'chrome.header';
+const COMPONENT_ID$p = '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.0'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.0.0-next.10'
 }).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.getColor('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', reactTheming.getColor('chromeHue', 600, props.theme, 0.15)), props => props.theme.colors.background, props => props.theme.space.base, getHeaderHeight, props => reactTheming.getColor('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$p, props));
 StyledHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$s = 'chrome.skipnav';
+const COMPONENT_ID$o = '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);
 };
-const colorStyles$5 = theme => {
-  const color = reactTheming.getColor('primaryHue', 600, theme);
-  const borderColor = reactTheming.getColor('neutralHue', 300, theme);
-  const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, reactTheming.getColor('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({
+const colorStyles$3 = 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, reactTheming.getColorV8('background', 600 , theme), color, color, reactTheming.focusStyles({
     theme,
     inset: true,
     boxShadow
   }));
 };
-const sizeStyles$2 = props => {
+const sizeStyles$1 = props => {
   const top = polished.math(`${getHeaderHeight(props)} / 2`);
   const padding = `${props.theme.space.base * 5}px`;
   const paddingStart = `${props.theme.space.base * 4}px`;
@@ -247,173 +221,181 @@ 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.0'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.0.0-next.10'
 }).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$1(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles$3(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
 StyledSkipNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var _path$1;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgLinkStroke = function SvgLinkStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.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"
   })));
 };
 
-const COMPONENT_ID$r = 'chrome.skipnav_icon';
-const sizeStyles$1 = theme => {
+const COMPONENT_ID$n = 'chrome.skipnav_icon';
+const sizeStyles = 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.0'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
-})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => reactTheming.getColor('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(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledSkipNavIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$q = 'chrome.body';
+const COMPONENT_ID$m = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
-})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColor('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$m, props));
 StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$p = 'chrome.footer';
+const COMPONENT_ID$l = '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.0'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.0.0-next.10'
 }).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.getColor('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$l, props));
 StyledFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$o = 'chrome.content';
+const COMPONENT_ID$k = 'chrome.content';
 const StyledContent = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.0.0-next.10'
 }).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$k, props));
 StyledContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$n = 'chrome.main';
+const COMPONENT_ID$j = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.0.0-next.10'
 }).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$j, 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.0'
-}).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.getColor('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 COMPONENT_ID$i = 'chrome.footer_item';
 const StyledFooterItem = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
-})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledFooterItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$k = 'chrome.header_item';
+const COMPONENT_ID$h = 'chrome.header_item';
 const imgStyles = props => {
   const size = polished.math(`${getHeaderItemSize(props)} - ${props.theme.space.base * 2}`);
   return styled.css(["img{margin:0;border-radius:", ";width:", ";height:", ";}"], polished.math(`${props.theme.borderRadii.md} - 1`), size, size);
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.0.0-next.10'
 }).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.getColor('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
+}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.getColorV8('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
     ${StyledHeaderItemIcon} {
       border-radius: 100px;
     }
-  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
+  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$j = 'chrome.header_item_wrapper';
+const COMPONENT_ID$g = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.0',
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.0.0-next.10',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
   componentId: "sc-1uieu55-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledHeaderItemWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$i = 'chrome.logo_nav_item';
+const COMPONENT_ID$f = 'chrome.nav_list';
+const StyledNavList = styled__default.default.ul.attrs({
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.0.0-next.10'
+}).withConfig({
+  displayName: "StyledNavList",
+  componentId: "sc-1s0nkfb-0"
+})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
+StyledNavList.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$e = 'chrome.nav_list_item';
+const StyledNavListItem = styled__default.default.li.attrs({
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.0.0-next.10'
+}).withConfig({
+  displayName: "StyledNavListItem",
+  componentId: "sc-18cj2v7-0"
+})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+StyledNavListItem.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$d = 'chrome.logo_nav_list_item';
 const retrieveProductColor = product => {
   switch (product) {
     case 'chat':
       return reactTheming.PALETTE.product.chat;
-    case 'connect':
-      return reactTheming.PALETTE.product.connect;
     case 'explore':
       return reactTheming.PALETTE.product.explore;
     case 'guide':
       return reactTheming.PALETTE.product.guide;
-    case 'message':
-      return reactTheming.PALETTE.product.message;
     case 'support':
       return reactTheming.PALETTE.product.support;
     case 'talk':
@@ -422,50 +404,48 @@ const retrieveProductColor = product => {
       return 'inherit';
   }
 };
-const colorStyles$4 = props => {
+const colorStyles$2 = props => {
   const fillColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
   const color = props.isLight || props.isDark ? fillColor : retrieveProductColor(props.product);
   return styled.css(["color:", ";fill:", ";"], color, fillColor);
 };
 const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.0',
-  as: 'div'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"
-})(["order:0;opacity:1;cursor:default;", ";"], props => colorStyles$4(props));
+})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], props => colorStyles$2(props));
 StyledLogoNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
+const COMPONENT_ID$c = 'chrome.brandmark_nav_list_item';
 const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.0',
-  as: 'div'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
   componentId: "sc-8kynd4-0"
-})(["order:1;opacity:0.3;margin-top:auto;"]);
+})(["order:1;opacity:0.3;margin-top:auto;min-height:0;"]);
 StyledBrandmarkNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$g = 'chrome.nav_item_icon';
+const COMPONENT_ID$b = 'chrome.nav_item_icon';
 const StyledNavItemIcon = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
-})(["align-self:flex-start;order:0;border-radius:", ";width:", ";height:", ";", ";"], props => props.theme.borderRadii.md, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["align-self:flex-start;order:0;border-radius:", ";width:", ";height:", ";", ";"], props => props.theme.borderRadii.md, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledNavItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$f = 'chrome.nav_item';
-const colorStyles$3 = props => {
+const COMPONENT_ID$a = 'chrome.nav_button';
+const colorStyles$1 = props => {
   const {
     theme,
     hue,
@@ -483,7 +463,7 @@ const colorStyles$3 = props => {
     } else if (isDark) {
       currentColor = polished.rgba(LIGHT, 0.4);
     } else {
-      currentColor = reactTheming.getColor(hue, 500, theme);
+      currentColor = reactTheming.getColorV8(hue, 500, theme);
     }
   } else {
     hoverColor = polished.rgba(isLight ? LIGHT : DARK, 0.1);
@@ -499,31 +479,31 @@ const colorStyles$3 = props => {
     }
   }), activeColor);
 };
-const StyledNavItem = styled__default.default(StyledBaseNavItem).attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.0',
+const StyledNavButton = styled__default.default(StyledBaseNavItem).attrs({
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.0.0-next.10',
   as: 'button'
 }).withConfig({
-  displayName: "StyledNavItem",
-  componentId: "sc-gs8mjz-0"
-})(["justify-content:", ";order:1;margin:0;cursor:", ";text-align:", ";&:hover,&:focus{text-decoration:none;color:inherit;}", ";&:focus-visible:hover,&:focus-visible:active,", "{outline:", " solid;outline-offset:-", ";}", " ", ";"], props => props.isExpanded && 'start', props => props.isCurrent ? 'default' : 'pointer', props => props.isExpanded && 'inherit', colorStyles$3, reactTheming.SELECTOR_FOCUS_VISIBLE, props => polished.math(`${props.theme.borderWidths.md} - 1`), props => props.theme.borderWidths.md, props => props.isExpanded && `
+  displayName: "StyledNavButton",
+  componentId: "sc-f5ux3-0"
+})(["flex:1;justify-content:", ";margin:0;border:none;box-sizing:border-box;background:transparent;cursor:", ";min-width:0;text-align:", ";text-decoration:none;color:inherit;font-size:inherit;&:hover,&:focus{text-decoration:none;color:inherit;}", ";&:focus-visible:hover,&:focus-visible:active,", "{outline:", " solid;outline-offset:-", ";}", " ", ";"], props => props.isExpanded && 'start', props => props.isCurrent ? 'default' : 'pointer', props => props.isExpanded && 'inherit', colorStyles$1, reactTheming.SELECTOR_FOCUS_VISIBLE, props => polished.math(`${props.theme.borderWidths.md} - 1`), props => props.theme.borderWidths.md, props => props.isExpanded && `
     ${StyledNavItemIcon} {
       margin: 0 ${polished.math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`)};
     }
-  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
-StyledNavItem.defaultProps = {
+  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
+StyledNavButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$e = 'chrome.nav_item_text';
+const COMPONENT_ID$9 = 'chrome.nav_item_text';
 const StyledNavItemText = styled__default.default.span.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
 })(["position:absolute;order:1;clip:rect(1px,1px,1px,1px);margin:", ";width:1px;height:1px;overflow:hidden;line-height:", ";white-space:", ";", " ", ";"], props => props.isExpanded && `0 ${polished.math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`)}`, props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isWrapped ? 'normal' : 'nowrap', props => props.isExpanded && `
-    ${StyledNavItem} > && {
+    ${StyledNavButton} > && {
       position: static;
       flex: 1;
       clip: auto;
@@ -531,168 +511,11 @@ const StyledNavItemText = styled__default.default.span.attrs({
       height: auto;
       text-overflow: ellipsis;
     }
-  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledNavItemText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$d = 'chrome.subnav_item';
-const colorStyles$2 = props => {
-  const {
-    theme,
-    isLight,
-    isCurrent
-  } = props;
-  const DARK = theme.palette.black;
-  const LIGHT = theme.palette.white;
-  let currentColor;
-  let hoverColor;
-  if (isCurrent) {
-    if (isLight) {
-      currentColor = polished.rgba(DARK, 0.1);
-    } else {
-      currentColor = polished.rgba(LIGHT, 0.1);
-    }
-  } else {
-    hoverColor = polished.rgba(isLight ? LIGHT : DARK, 0.1);
-  }
-  const activeColor = polished.rgba(isLight ? DARK : LIGHT, 0.03);
-  return styled.css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}", " &:not([data-garden-header='true']):active{background-color:", ";}"], isCurrent ? '1' : '0.6', currentColor, hoverColor, reactTheming.focusStyles({
-    theme,
-    hue: isLight ? DARK : LIGHT,
-    spacerWidth: null,
-    styles: {
-      opacity: 1
-    }
-  }), activeColor);
-};
-const getSubNavItemHeight = props => {
-  return `${props.theme.space.base * 7.5}px`;
-};
-const StyledSubNavItem = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.0'
-}).withConfig({
-  displayName: "StyledSubNavItem",
-  componentId: "sc-1yg9dpx-0"
-})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;margin:", "px 0 0;border:none;border-radius:", ";box-sizing:border-box;background:transparent;cursor:", ";padding:", ";width:100%;min-height:", ";text-align:inherit;font-size:inherit;&,&:hover,&:focus{text-decoration:none;color:inherit;}", ";", ";"], props => props.theme.space.base * 2, props => props.theme.borderRadii.md, props => props.isCurrent ? 'default' : 'pointer', props => `0 ${props.theme.space.base * 2}px`, getSubNavItemHeight, props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
-StyledSubNavItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$c = 'chrome.subnav';
-const colorStyles$1 = props => {
-  let shade;
-  if (props.isLight) {
-    shade = 500;
-  } else {
-    shade = props.isDark ? 700 : 800;
-  }
-  const backgroundColor = reactTheming.getColor(props.hue, shade, props.theme);
-  const foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
-  return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
-};
-const StyledSubNav = styled__default.default.nav.attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.0'
-}).withConfig({
-  displayName: "StyledSubNav",
-  componentId: "sc-19hjou6-0"
-})(["flex-direction:column;order:0;padding:", ";min-width:220px;overflow:auto;font-size:", ";", ";& > ", ":first-child{margin-top:0;}", ";"], props => `${props.theme.space.base * 6}px ${props.theme.space.base * 5}px`, props => props.theme.fontSizes.md, props => colorStyles$1(props), StyledSubNavItem, props => reactTheming.retrieveComponentStyles('chrome.subnav', props));
-StyledSubNav.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$b = 'chrome.subnav_item_text';
-const sizeStyles = props => {
-  const baseLineHeight = props.theme.space.base * 5;
-  const verticalMargin = polished.math(`(${getSubNavItemHeight(props)} - ${baseLineHeight}) / 2`);
-  const lineHeight = reactTheming.getLineHeight(baseLineHeight, props.theme.fontSizes.md);
-  return styled.css(["margin:", " 0;line-height:", ";"], verticalMargin, lineHeight);
-};
-const StyledSubNavItemText = styled__default.default.span.attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.0'
-}).withConfig({
-  displayName: "StyledSubNavItemText",
-  componentId: "sc-1hy0pn7-0"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:", ";", " ", ";"], props => props.isWrapped ? 'normal' : 'nowrap', props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledSubNavItemText.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-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.0',
-  'data-garden-header': 'true'
-}).withConfig({
-  displayName: "StyledSubNavItemHeader",
-  componentId: "sc-1vniter-0"
-})(["position:relative;padding-", ":", "px;", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledSubNavItemHeader.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.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"
-  })));
-};
-
-const COMPONENT_ID$9 = 'chrome.collapsible_sub_nav_item_icon';
-const FilteredChevronDownStrokeIcon = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    theme,
-    isExpanded,
-    ...validProps
-  } = _ref;
-  return React__namespace.default.createElement(SvgChevronDownStroke, _extends$3({
-    ref: ref
-  }, validProps));
-});
-FilteredChevronDownStrokeIcon.displayName = 'FilteredChevronDownStrokeIcon';
-const StyledSubNavItemIcon = styled__default.default(FilteredChevronDownStrokeIcon).withConfig({
-  displayName: "StyledSubNavItemIcon",
-  componentId: "sc-1d02hho-0"
-})(["width:", ";height:", ";"], props => props.theme.iconSizes.sm, props => props.theme.iconSizes.sm);
-StyledSubNavItemIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-const StyledSubNavItemIconWrapper = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.0'
-}).withConfig({
-  displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
-  componentId: "sc-1d02hho-1"
-})(["display:flex;position:absolute;top:0;right:", ";left:", ";align-items:center;justify-content:center;width:", "px;height:", ";", "{transform:", ";transition:transform 0.25s ease-in-out;}", ";"], props => props.theme.rtl ? 'auto' : 0, props => props.theme.rtl && 0, props => props.theme.space.base * 7, getSubNavItemHeight, StyledSubNavItemIcon, props => props.isExpanded && `rotate(${props.theme.rtl ? '-' : ''}180deg)`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledSubNavItemIconWrapper.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-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.0'
-}).withConfig({
-  displayName: "StyledSubNavPanel",
-  componentId: "sc-1jv3rpv-0"
-})(["transition:max-height 0.25s cubic-bezier(0.15,0.85,0.35,1.2),0.25s visibility 0s linear;height:auto;max-height:100%;", " ", "{padding-", ":", ";}", ";"], props => props.isHidden && hiddenStyling, StyledSubNavItem, props => props.theme.rtl ? 'right' : 'left', props => `${props.theme.space.base * 5}px`, props => reactTheming.retrieveComponentStyles(PANEL_COMPONENT_ID, props));
-StyledSubNavPanel.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
 const COMPONENT_ID$8 = 'chrome.sheet';
 const borderStyle = _ref => {
   let {
@@ -700,7 +523,7 @@ const borderStyle = _ref => {
     placement,
     isOpen
   } = _ref;
-  const borderColor = isOpen ? reactTheming.getColor('neutralHue', 300, theme) : 'transparent';
+  const borderColor = isOpen ? reactTheming.getColorV8('neutralHue', 300, theme) : 'transparent';
   const borderSides = ['-left', '-right'];
   let borderSide = '';
   if (theme.rtl) {
@@ -715,11 +538,11 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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
 };
@@ -727,7 +550,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -754,11 +577,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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
 };
@@ -766,11 +589,11 @@ 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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
-})(["line-height:", ";color:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["line-height:", ";color:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledSheetDescription.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -778,7 +601,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -796,13 +619,13 @@ const BASE_MULTIPLIERS = {
 const colorStyles = props => {
   const backgroundColor = 'primaryHue';
   const foregroundColor = 'neutralHue';
-  return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], reactTheming.getColor(foregroundColor, 600, props.theme), reactTheming.getColor(backgroundColor, 600, props.theme, 0.08), reactTheming.getColor(foregroundColor, 700, props.theme), reactTheming.focusStyles({
+  return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], reactTheming.getColorV8(foregroundColor, 600, props.theme), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.08), reactTheming.getColorV8(foregroundColor, 700, props.theme), reactTheming.focusStyles({
     theme: props.theme
-  }), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, props.theme));
+  }), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.2), reactTheming.getColorV8(foregroundColor, 800, props.theme));
 };
 const StyledSheetClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -814,11 +637,11 @@ 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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
-})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";border-top:", ";padding:", "px;", ";"], props => props.isCompact ? 'center' : 'flex-end', props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";border-top:", ";padding:", "px;", ";"], props => props.isCompact ? 'center' : 'flex-end', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledSheetFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -826,7 +649,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -838,142 +661,15 @@ 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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 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,
@@ -981,12 +677,12 @@ const HeaderItem = React__namespace.default.forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   if (hasLogo) {
-    return React__namespace.default.createElement(StyledLogoHeaderItem, _extends$3({
+    return React__namespace.default.createElement(StyledLogoHeaderItem, Object.assign({
       ref: ref,
       product: product
     }, other));
   }
-  return React__namespace.default.createElement(StyledHeaderItem, _extends$3({
+  return React__namespace.default.createElement(StyledHeaderItem, Object.assign({
     ref: ref
   }, other));
 });
@@ -995,7 +691,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
 };
 
@@ -1016,14 +712,14 @@ const HeaderItemIcon = _ref => {
         ...iconProps
       });
     };
-    return React__namespace.default.createElement(StyledHeaderItemIcon, _extends$3({
+    return React__namespace.default.createElement(StyledHeaderItemIcon, Object.assign({
       as: Icon
     }, props));
   }
   return null;
 };
 
-const HeaderItemText = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeaderItemText, _extends$3({
+const HeaderItemText = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeaderItemText, Object.assign({
   ref: ref
 }, props)));
 HeaderItemText.displayName = 'HeaderItemText';
@@ -1031,17 +727,12 @@ HeaderItemText.propTypes = {
   isClipped: PropTypes__default.default.bool
 };
 
-const HeaderItemWrapper = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeaderItemWrapper, _extends$3({
+const HeaderItemWrapper = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeaderItemWrapper, Object.assign({
   ref: ref
 }, 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({
+const FooterItem$1 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, Object.assign({
   ref: ref
 }, props)));
 FooterItem$1.displayName = 'FooterItem';
@@ -1053,28 +744,16 @@ 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 NavListContext = React__namespace.default.createContext(undefined);
+const useNavListContext = () => {
+  return React.useContext(NavListContext);
 };
 
 const NavItem = React__namespace.default.forwardRef((_ref, ref) => {
@@ -1092,34 +771,41 @@ const NavItem = React__namespace.default.forwardRef((_ref, ref) => {
   const {
     isExpanded
   } = useNavContext();
+  const navListContext = useNavListContext();
   const ariaCurrent = other.isCurrent || undefined;
+  const hasList = navListContext?.hasList;
+  let retVal;
   if (hasLogo) {
-    return React__namespace.default.createElement(StyledLogoNavItem, _extends$3({
+    retVal = React__namespace.default.createElement(StyledLogoNavItem, Object.assign({
       ref: ref,
       isDark: isDark,
       isLight: isLight,
       product: product,
       "aria-current": ariaCurrent
     }, other));
-  }
-  if (hasBrandmark) {
-    return React__namespace.default.createElement(StyledBrandmarkNavItem, _extends$3({
+  } else if (hasBrandmark) {
+    retVal = React__namespace.default.createElement(StyledBrandmarkNavItem, Object.assign({
       ref: ref
     }, other));
+  } else {
+    retVal = React__namespace.default.createElement(StyledNavButton, Object.assign({
+      tabIndex: 0,
+      ref: ref,
+      isExpanded: isExpanded,
+      hue: hue,
+      isDark: isDark,
+      isLight: isLight,
+      "aria-current": ariaCurrent
+    }, other));
   }
-  return React__namespace.default.createElement(StyledNavItem, _extends$3({
-    tabIndex: 0,
-    ref: ref,
-    isExpanded: isExpanded,
-    hue: hue,
-    isDark: isDark,
-    isLight: isLight,
-    "aria-current": ariaCurrent
-  }, other));
+  if (hasList) {
+    retVal = React__namespace.default.createElement(StyledNavListItem, null, retVal);
+  }
+  return retVal;
 });
 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
 };
@@ -1141,7 +827,7 @@ const NavItemIcon = _ref => {
         ...iconProps
       });
     };
-    return React__namespace.default.createElement(StyledNavItemIcon, _extends$3({
+    return React__namespace.default.createElement(StyledNavItemIcon, Object.assign({
       as: Icon
     }, props));
   }
@@ -1152,7 +838,7 @@ const NavItemText = React__namespace.default.forwardRef((props, ref) => {
   const {
     isExpanded
   } = useNavContext();
-  return React__namespace.default.createElement(StyledNavItemText, _extends$3({
+  return React__namespace.default.createElement(StyledNavItemText, Object.assign({
     ref: ref,
     isExpanded: isExpanded
   }, props));
@@ -1162,113 +848,186 @@ NavItemText.propTypes = {
   isWrapped: PropTypes__default.default.bool
 };
 
-const SubNav = React__namespace.default.forwardRef((props, ref) => {
-  const {
+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.getColorV8(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
-  } = useChromeContext();
-  return React__namespace.default.createElement(StyledSubNav, _extends$3({
-    ref: ref,
-    hue: hue,
-    isLight: isLight,
-    isDark: isDark
-  }, props));
+  }), [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, Object.assign({
+    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, Object.assign({
+    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(undefined);
+const useBodyContext = () => {
+  return React.useContext(BodyContext);
+};
+
+const Body$1 = React__namespace.default.forwardRef((props, ref) => {
+  const [hasFooter, setHasFooter] = React.useState(false);
+  const bodyContextValue = React.useMemo(() => ({
+    hasFooter,
+    setHasFooter
+  }), [hasFooter, setHasFooter]);
+  return React__namespace.default.createElement(BodyContext.Provider, {
+    value: bodyContextValue
+  }, React__namespace.default.createElement(StyledBody, Object.assign({
+    ref: ref
+  }, props)));
 });
-SubNav.displayName = 'SubNav';
+Body$1.displayName = 'Body';
 
-const SubNavItem = React__namespace.default.forwardRef((props, ref) => {
+const Content = React__namespace.default.forwardRef((props, ref) => {
   const {
-    isDark,
-    isLight
-  } = useChromeContext();
-  return React__namespace.default.createElement(StyledSubNavItem, _extends$3({
+    hasFooter
+  } = useBodyContext() || {};
+  return React__namespace.default.createElement(StyledContent, Object.assign({
     ref: ref,
-    isDark: isDark,
-    isLight: isLight
+    hasFooter: hasFooter
   }, props));
 });
-SubNavItem.displayName = 'SubNavItem';
-SubNavItem.propTypes = {
-  isCurrent: PropTypes__default.default.bool
-};
+Content.displayName = 'Content';
 
-const SubNavItemText = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledSubNavItemText, _extends$3({
+const Main = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledMain, Object.assign({
   ref: ref
 }, props)));
-SubNavItemText.displayName = 'SubNavItemText';
-SubNavItemText.propTypes = {
-  isWrapped: PropTypes__default.default.bool
+Main.displayName = 'Main';
+
+const HeaderComponent = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeader, Object.assign({
+  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 CollapsibleSubNavItem = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    header,
-    children,
-    isExpanded: controlledExpanded,
-    onChange,
-    ...other
-  } = _ref;
-  const {
-    isDark,
-    isLight
-  } = useChromeContext();
-  const panelRef = React.createRef();
-  const [internalExpanded, setInternalExpanded] = React.useState(controlledExpanded);
-  const expanded = containerUtilities.getControlledValue(controlledExpanded, internalExpanded);
-  const value = 0;
-  const expandedSections = expanded ? [value] : [];
+const FooterComponent = React__namespace.default.forwardRef((props, ref) => {
   const {
-    getHeaderProps,
-    getTriggerProps,
-    getPanelProps
-  } = containerAccordion.useAccordion({
-    sections: [value],
-    expandedSections,
-    onChange: () => {
-      const isExpanded = expandedSections.length === 0;
-      if (onChange) {
-        onChange(isExpanded);
-      } else {
-        setInternalExpanded(isExpanded);
-      }
-    }
-  });
+    hasFooter,
+    setHasFooter
+  } = useBodyContext() || {};
   React.useEffect(() => {
-    if (expanded && panelRef.current) {
-      panelRef.current.style.maxHeight = `${panelRef.current.scrollHeight}px`;
+    if (!hasFooter && setHasFooter) {
+      setHasFooter(true);
     }
-  }, [expanded, children, panelRef]);
-  return React__namespace.default.createElement("div", {
+    return () => {
+      if (hasFooter && setHasFooter) {
+        setHasFooter(false);
+      }
+    };
+  }, [hasFooter, setHasFooter]);
+  return React__namespace.default.createElement(StyledFooter, Object.assign({
+    ref: ref
+  }, props));
+});
+FooterComponent.displayName = 'Footer';
+const Footer$1 = FooterComponent;
+Footer$1.Item = FooterItem$1;
+
+const NavList = React__namespace.default.forwardRef((props, ref) => {
+  const contextValue = React.useMemo(() => ({
+    hasList: true
+  }), []);
+  return React__namespace.default.createElement(NavListContext.Provider, {
+    value: contextValue
+  }, React__namespace.default.createElement(StyledNavList, Object.assign({
     ref: ref
-  }, React__namespace.default.createElement("div", getHeaderProps({
-    'aria-level': 2
-  }), React__namespace.default.createElement(StyledSubNavItemHeader, _extends$3({
-    isDark: isDark,
+  }, props)));
+});
+NavList.displayName = 'Nav';
+
+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, Object.assign({
+    ref: ref
+  }, props, {
+    hue: hue,
     isLight: isLight,
-    isExpanded: expanded
-  }, getTriggerProps({
-    ...other,
-    role: null,
-    tabIndex: null,
-    value
-  }), {
-    type: "button"
-  }), React__namespace.default.createElement(React__namespace.default.Fragment, null, header, React__namespace.default.createElement(StyledSubNavItemIconWrapper, {
-    isExpanded: expanded
-  }, React__namespace.default.createElement(StyledSubNavItemIcon, null))))), React__namespace.default.createElement(StyledSubNavPanel, _extends$3({
-    isHidden: !expanded
-  }, getPanelProps({
-    ref: panelRef,
-    value
-  })), children));
+    isDark: isDark
+  })));
 });
-CollapsibleSubNavItem.propTypes = {
-  header: PropTypes__default.default.any,
-  isExpanded: PropTypes__default.default.bool,
-  onChange: PropTypes__default.default.func
+NavComponent.displayName = 'Nav';
+NavComponent.propTypes = {
+  isExpanded: PropTypes__default.default.bool
 };
-CollapsibleSubNavItem.displayName = 'CollapsibleSubNavItem';
+const Nav = NavComponent;
+Nav.List = NavList;
+Nav.Item = NavItem;
+Nav.ItemIcon = NavItemIcon;
+Nav.ItemText = NavItemText;
 
 const SheetContext = React.createContext({
   setIsCloseButtonPresent() {}
@@ -1306,7 +1065,7 @@ const SheetTitle = React.forwardRef((_ref, ref) => {
   const {
     titleId
   } = useSheetContext();
-  return React__namespace.default.createElement(StyledSheetTitle, _extends$3({
+  return React__namespace.default.createElement(StyledSheetTitle, Object.assign({
     id: id || titleId,
     ref: ref
   }, props));
@@ -1322,7 +1081,7 @@ const SheetDescription = React.forwardRef((_ref, ref) => {
   const {
     descriptionId
   } = useSheetContext();
-  return React__namespace.default.createElement(StyledSheetDescription, _extends$3({
+  return React__namespace.default.createElement(StyledSheetDescription, Object.assign({
     id: id || descriptionId,
     ref: ref
   }, props));
@@ -1334,7 +1093,7 @@ const SheetHeader = React.forwardRef((props, ref) => {
   const {
     isCloseButtonPresent
   } = useSheetContext();
-  return React__namespace.default.createElement(StyledSheetHeader, _extends$3({
+  return React__namespace.default.createElement(StyledSheetHeader, Object.assign({
     ref: ref,
     isCloseButtonPresent: isCloseButtonPresent
   }, props));
@@ -1343,7 +1102,7 @@ SheetHeader.displayName = 'Sheet.Header';
 const Header = SheetHeader;
 
 const SheetBody = React.forwardRef((props, ref) => {
-  return React__namespace.default.createElement(StyledSheetBody, _extends$3({
+  return React__namespace.default.createElement(StyledSheetBody, Object.assign({
     ref: ref
   }, props));
 });
@@ -1351,7 +1110,7 @@ SheetBody.displayName = 'Sheet.Body';
 const Body = SheetBody;
 
 const SheetFooter = React.forwardRef((props, ref) => {
-  return React__namespace.default.createElement(StyledSheetFooter, _extends$3({
+  return React__namespace.default.createElement(StyledSheetFooter, Object.assign({
     ref: ref
   }, props));
 });
@@ -1359,7 +1118,7 @@ SheetFooter.displayName = 'Sheet.Footer';
 const Footer = SheetFooter;
 
 const SheetFooterItem = React.forwardRef((props, ref) => {
-  return React__namespace.default.createElement(StyledSheetFooterItem, _extends$3({
+  return React__namespace.default.createElement(StyledSheetFooterItem, Object.assign({
     ref: ref
   }, props));
 });
@@ -1391,7 +1150,7 @@ const SheetClose = React.forwardRef((props, ref) => {
     setIsCloseButtonPresent(true);
     return () => setIsCloseButtonPresent(false);
   }, [setIsCloseButtonPresent]);
-  return React__namespace.default.createElement(StyledSheetClose, _extends$3({
+  return React__namespace.default.createElement(StyledSheetClose, Object.assign({
     "aria-label": "Close Sheet",
     ref: ref
   }, props), React__namespace.default.createElement(SvgXStroke, null));
@@ -1414,7 +1173,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.0'}`), [id, seed]);
+  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.10'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = React.useMemo(() => ({
@@ -1431,7 +1190,7 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
   });
   return React__namespace.default.createElement(SheetContext.Provider, {
     value: sheetContext
-  }, React__namespace.default.createElement(StyledSheet, _extends$3({
+  }, React__namespace.default.createElement(StyledSheet, Object.assign({
     isOpen: isOpen,
     isAnimated: isAnimated,
     placement: placement,
@@ -1474,7 +1233,6 @@ Sheet.Title = Title;
 
 exports.Body = Body$1;
 exports.Chrome = Chrome;
-exports.CollapsibleSubNavItem = CollapsibleSubNavItem;
 exports.Content = Content;
 exports.Footer = Footer$1;
 exports.FooterItem = FooterItem$1;
@@ -1488,10 +1246,6 @@ 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;
-exports.SubNav = SubNav;
-exports.SubNavItem = SubNavItem;
-exports.SubNavItemText = SubNavItemText;