@zendeskgarden/react-chrome 9.0.0-next.16 → 9.0.0-next.17

package/dist/index.cjs.js

@@ -11,6 +11,7 @@ var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
+var reactButtons = require('@zendeskgarden/react-buttons');
 var reactUid = require('react-uid');
 var reactMergeRefs = require('react-merge-refs');
 var activeElement = require('dom-helpers/activeElement');
@@ -46,7 +47,7 @@ const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'];
 const COMPONENT_ID$w = 'chrome.chrome';
 const StyledChrome = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -55,178 +56,75 @@ StyledChrome.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$v = 'chrome.header_item_icon';
-const StyledHeaderItemIcon = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.16'
-}).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$v, props));
-StyledHeaderItemIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$u = 'chrome.base_header_item';
-const getHeaderItemSize = props => `${props.theme.space.base * 7.5}px`;
-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$u,
-  'data-garden-version': '9.0.0-next.16'
-}).withConfig({
-  displayName: "StyledBaseHeaderItem",
-  componentId: "sc-1qua7h6-0"
-})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;margin:", ";border:none;border-radius:", ";background:transparent;text-decoration:none;white-space:nowrap;color:inherit;font-size:inherit;", " ", ";"], props => props.maxX && '1', props => props.maxX ? 'start' : 'center', props => `0 ${props.theme.space.base * 3}px`, props => {
-  if (props.isRound) {
-    return '100%';
-  }
-  if (props.maxY) {
-    return '0';
-  }
-  return props.theme.borderRadii.md;
-}, sizeStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
-StyledBaseHeaderItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-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$t,
-  'data-garden-version': '9.0.0-next.16'
-}).withConfig({
-  displayName: "StyledHeaderItemText",
-  componentId: "sc-goz7la-0"
-})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
-StyledHeaderItemText.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$s = 'chrome.nav';
-const colorStyles$4 = props => {
-  const shade = props.isDark || props.isLight ? 600 : 700;
-  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);
-};
-const getNavWidth = props => {
-  return `${props.theme.space.base * 15}px`;
-};
-const getExpandedNavWidth = () => {
-  return `200px`;
-};
-const StyledNav = styled__default.default.nav.attrs({
-  'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.16'
-}).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$4(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
-StyledNav.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$r = 'chrome.header_item';
-const retrieveProductColor$1 = props => {
-  switch (props.product) {
-    case 'chat':
-      return reactTheming.PALETTE.product.chat;
-    case 'explore':
-      return reactTheming.PALETTE.product.explore;
-    case 'guide':
-      return reactTheming.PALETTE.product.guide;
-    case 'support':
-      return reactTheming.PALETTE.product.support;
-    case 'talk':
-      return reactTheming.PALETTE.product.talk;
-    default:
-      return 'inherit';
-  }
-};
-const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.16',
-  as: 'div'
-}).withConfig({
-  displayName: "StyledLogoHeaderItem",
-  componentId: "sc-1n1d1yv-0"
-})(["display:none;order:0;margin-right:", ";margin-left:", ";border-", ":", ";border-radius:0;padding:0;width:", ";height:100%;overflow:hidden;fill:", ";text-decoration:none;color:", ";", "{", "}", "{margin:0;width:", ";height:", ";}", ";"], props => props.theme.rtl ? `-${props.theme.space.base}px` : 'auto', props => props.theme.rtl ? 'auto' : `-${props.theme.space.base}px`, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => reactTheming.getColorV8('chromeHue', 700, props.theme), props => retrieveProductColor$1(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
-StyledLogoHeaderItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$q = 'chrome.base_nav_item';
-const getNavItemHeight = props => {
-  return `${props.theme.space.base * 13}px`;
-};
-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.div.attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.16'
-}).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;", ""], props => sizeStyles$2(props));
-StyledBaseNavItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$p = 'chrome.header';
-const getHeaderHeight = props => {
-  return getNavItemHeight(props);
-};
-const StyledHeader = styled__default.default.header.attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.16'
-}).withConfig({
-  displayName: "StyledHeader",
-  componentId: "sc-1cexpz-0"
-})(["display:flex;position:", ";align-items:center;justify-content:flex-end;box-sizing:border-box;border-bottom:", ";box-shadow:", ";background-color:", ";padding:0 ", "px;height:", ";color:", ";font-size:", ";", " ", ";"], props => props.isStandalone && 'relative', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', reactTheming.getColorV8('chromeHue', 600, props.theme, 0.15)), props => 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$p, props));
-StyledHeader.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
+const getFooterHeight = theme => `${theme.space.base * 20}px`;
+const getHeaderHeight = theme => `${theme.space.base * 13}px`;
+const getHeaderItemSize = theme => `${theme.space.base * 7.5}px`;
+const getNavItemHeight = theme => getHeaderHeight(theme);
+const getNavWidth = theme => `${theme.space.base * 15}px`;
+const getNavWidthExpanded = () => `200px`;
+const getProductColor = function (product) {
+  let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inherit';
+  return product ? reactTheming.PALETTE.product[product] || fallback : fallback;
 };
 
-const COMPONENT_ID$o = 'chrome.skipnav';
+const COMPONENT_ID$v = '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$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({
+const colorStyles$a = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const boxShadowColor = reactTheming.getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 1200,
+    dark: {
+      transparency: theme.opacity[800]
+    },
+    light: {
+      transparency: theme.opacity[200]
+    }
+  });
+  const boxShadow = theme.shadows.lg(`${theme.space.base * 4}px`, `${theme.space.base * 6}px`, boxShadowColor);
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.primary'
+  });
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}", ""], borderColor, boxShadow, backgroundColor, foregroundColor, foregroundColor, reactTheming.focusStyles({
     theme,
     inset: true,
     boxShadow
   }));
 };
-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`;
-  const fontSize = props.theme.fontSizes.md;
+const sizeStyles$g = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const top = polished.math(`${getHeaderHeight(theme)} / 2`);
+  const border = theme.borders.sm;
+  const padding = `${theme.space.base * 5}px`;
+  const paddingStart = `${theme.space.base * 4}px`;
+  const fontSize = theme.fontSizes.md;
   const lineHeight = reactTheming.getLineHeight(padding, fontSize);
-  return styled.css(["top:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, padding, props.theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
+  return styled.css(["top:", ";border:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, border, padding, theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
 };
 const StyledSkipNav = styled__default.default.a.attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.0.0-next.17'
 }).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$1(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles$3(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
+})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";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.borderRadii.md, sizeStyles$g, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledSkipNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -247,175 +145,465 @@ var SvgLinkStroke = function SvgLinkStroke(props) {
   })));
 };
 
-const COMPONENT_ID$n = 'chrome.skipnav_icon';
-const sizeStyles = theme => {
+const COMPONENT_ID$u = 'chrome.skipnav_icon';
+const sizeStyles$f = _ref => {
+  let {
+    theme
+  } = _ref;
   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$n,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
-})(["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));
+})(["transform:", ";color:", ";", ";", ";"], p => p.theme.rtl && 'scaleX(-1)', p => reactTheming.getColor({
+  theme: p.theme,
+  variable: 'foreground.subtle'
+}), sizeStyles$f, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
 StyledSkipNavIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$m = 'chrome.body';
+const COMPONENT_ID$t = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
-})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColorV8('neutralHue', 100, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColor({
+  theme: props.theme,
+  variable: 'background.default'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
 StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-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$l,
-  'data-garden-version': '9.0.0-next.16'
-}).withConfig({
-  displayName: "StyledFooter",
-  componentId: "sc-v7lib2-0"
-})(["display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-top:", ";background-color:", ";padding:0 ", "px;height:", ";", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => 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$s = 'chrome.content';
+const sizeStyles$e = _ref => {
+  let {
+    theme,
+    hasFooter
+  } = _ref;
+  const fontSize = theme.fontSizes.md;
+  const height = hasFooter ? `calc(100% - ${polished.math(`${getHeaderHeight(theme)} + ${getFooterHeight(theme)}`)})` : `calc(100% - ${getHeaderHeight(theme)})`;
+  const lineHeight = reactTheming.getLineHeight(theme.lineHeights.md, theme.fontSizes.md);
+  return styled.css(["height:", ";line-height:", ";font-size:", ";"], height, lineHeight, fontSize);
 };
-
-const COMPONENT_ID$k = 'chrome.content';
 const StyledContent = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.0.0-next.17'
 }).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 => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
+})(["display:flex;color:", ";", ";&:focus{outline:none;}", ";"], props => reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), sizeStyles$e, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$j = 'chrome.main';
+const COMPONENT_ID$r = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
-})(["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));
+})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => reactTheming.getColor({
+  theme: props.theme,
+  variable: 'background.default'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledMain.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$i = 'chrome.footer_item';
+const COMPONENT_ID$q = 'chrome.footer';
+const colorStyles$9 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  return styled.css(["border-top-color:", ";background-color:", ";"], borderColor, backgroundColor);
+};
+const sizeStyles$d = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const border = theme.borders.sm;
+  const padding = `0 ${theme.space.base * 9}px`;
+  const height = getFooterHeight(theme);
+  return styled.css(["box-sizing:border-box;border-top:", ";padding:", ";height:", ";"], border, padding, height);
+};
+const StyledFooter = styled__default.default.footer.attrs({
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.0.0-next.17'
+}).withConfig({
+  displayName: "StyledFooter",
+  componentId: "sc-v7lib2-0"
+})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles$d, colorStyles$9, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
+StyledFooter.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$p = 'chrome.footer_item';
 const StyledFooterItem = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
-})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
+})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledFooterItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-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 COMPONENT_ID$o = 'chrome.header_item_icon';
+const sizeStyles$c = _ref => {
+  let {
+    theme
+  } = _ref;
+  const margin = `0 ${theme.space.base * 0.75}px`;
+  const size = theme.iconSizes.md;
+  return styled.css(["margin:", ";width:", ";min-width:", ";height:", ";"], margin, size, size, size);
+};
+const StyledHeaderItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.0.0-next.17'
+}).withConfig({
+  displayName: "StyledHeaderItemIcon",
+  componentId: "sc-1jhhp6z-0"
+})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles$c, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
+StyledHeaderItemIcon.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$n = 'chrome.base_header_item';
+const sizeStyles$b = _ref => {
+  let {
+    theme,
+    maxY,
+    isRound
+  } = _ref;
+  const margin = `0 ${theme.space.base * 3}px`;
+  const size = getHeaderItemSize(theme);
+  const height = maxY ? '100%' : size;
+  const lineHeight = reactTheming.getLineHeight(size, theme.fontSizes.md);
+  const padding = `0 ${theme.space.base * 0.75}px`;
+  let borderRadius;
+  if (isRound) {
+    borderRadius = '100%';
+  } else if (maxY) {
+    borderRadius = '0';
+  } else {
+    borderRadius = theme.borderRadii.md;
+  }
+  return styled.css(["margin:", ";border-radius:", ";padding:", ";min-width:", ";height:", ";line-height:", ";font-size:inherit;"], margin, borderRadius, padding, size, height, lineHeight);
+};
+const StyledBaseHeaderItem = styled__default.default.button.attrs({
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.0.0-next.17'
+}).withConfig({
+  displayName: "StyledBaseHeaderItem",
+  componentId: "sc-1qua7h6-0"
+})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;border:none;background:transparent;text-decoration:none;white-space:nowrap;color:inherit;", ";", ";"], props => props.maxX && '1', props => props.maxX ? 'start' : 'center', sizeStyles$b, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
+StyledBaseHeaderItem.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$m = 'chrome.header_item_text';
+const StyledHeaderItemText = styled__default.default.span.attrs({
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.0.0-next.17'
+}).withConfig({
+  displayName: "StyledHeaderItemText",
+  componentId: "sc-goz7la-0"
+})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.isClipped && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
+StyledHeaderItemText.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$l = 'chrome.header_item';
+const colorStyles$8 = _ref => {
+  let {
+    theme,
+    product
+  } = _ref;
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const fill = reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const color = getProductColor(product, fill );
+  return styled.css(["border-", "-color:", ";color:", ";fill:", ";"], theme.rtl ? 'left' : 'right', borderColor, color, fill);
+};
+const sizeStyles$a = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const border = theme.borders.sm;
+  const iconSize = theme.iconSizes.lg;
+  const marginRight = theme.rtl ? `-${theme.space.base}px` : 'auto';
+  const marginLeft = theme.rtl ? 'auto' : `-${theme.space.base}px`;
+  const width = getNavWidth(theme);
+  return styled.css(["margin-right:", ";margin-left:", ";border-", ":", ";width:", ";height:100%;", "{margin:0;width:", ";height:", ";}"], marginRight, marginLeft, theme.rtl ? 'left' : 'right', border, width, StyledHeaderItemIcon, iconSize, iconSize);
+};
+const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.0.0-next.17',
+  as: 'div'
+}).withConfig({
+  displayName: "StyledLogoHeaderItem",
+  componentId: "sc-1n1d1yv-0"
+})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles$a, colorStyles$8, StyledHeaderItemText, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+StyledLogoHeaderItem.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$k = 'chrome.header';
+const colorStyles$7 = _ref => {
+  let {
+    theme,
+    isStandalone
+  } = _ref;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const boxShadowColor = reactTheming.getColor({
+    hue: 'neutralHue',
+    shade: 1200,
+    light: {
+      transparency: theme.opacity[200]
+    },
+    dark: {
+      transparency: theme.opacity[1100]
+    },
+    theme
+  });
+  const boxShadow = isStandalone ? theme.shadows.lg('0', `${theme.space.base * 2}px`, boxShadowColor) : undefined;
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.subtle'
+  });
+  return styled.css(["border-bottom-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
+};
+const sizeStyles$9 = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const border = theme.borders.sm;
+  const padding = `0 ${theme.space.base}px`;
+  const fontSize = theme.fontSizes.md;
+  const height = getHeaderHeight(theme);
+  return styled.css(["box-sizing:border-box;border-bottom:", ";padding:", ";height:", ";font-size:", ";"], border, padding, height, fontSize);
+};
+const StyledHeader = styled__default.default.header.attrs({
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.0.0-next.17'
+}).withConfig({
+  displayName: "StyledHeader",
+  componentId: "sc-1cexpz-0"
+})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.isStandalone && 'relative', sizeStyles$9, colorStyles$7, StyledLogoHeaderItem, props => props.isStandalone && 'inline-flex', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
+StyledHeader.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$j = 'chrome.header_item';
+const colorStyles$6 = _ref => {
+  let {
+    theme,
+    maxY
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'foreground.subtle'
+  };
+  const hoverColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
+  return styled.css(["&:hover,&:focus{color:inherit;}", ";&:hover ", ",&:hover ", "{color:", ";}&:active ", ",&:active ", "{color:", ";}"], reactTheming.focusStyles({
+    theme,
+    inset: maxY
+  }), StyledHeaderItemIcon, StyledHeaderItemText, hoverColor, StyledHeaderItemIcon, StyledHeaderItemText, activeColor);
+};
+const sizeStyles$8 = _ref2 => {
+  let {
+    theme,
+    isRound
+  } = _ref2;
+  const iconBorderRadius = isRound ? '100px' : undefined;
+  const imageBorderRadius = polished.math(`${theme.borderRadii.md} - 1`);
+  const imageSize = polished.math(`${getHeaderItemSize(theme)} - ${theme.space.base * 2}`);
+  return styled.css(["img{margin:0;border-radius:", ";width:", ";height:", ";}", "{border-radius:", ";}"], imageBorderRadius, imageSize, imageSize, StyledHeaderItemIcon, iconBorderRadius);
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
-})(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &:focus-visible:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", ";"], props => reactTheming.focusStyles({
-  theme: props.theme,
-  inset: props.maxY
-}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.getColorV8('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
-    ${StyledHeaderItemIcon} {
-      border-radius: 100px;
-    }
-  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles$8, colorStyles$6, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$g = 'chrome.header_item_wrapper';
+const COMPONENT_ID$i = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.16',
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.0.0-next.17',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
   componentId: "sc-1uieu55-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledHeaderItemWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$f = 'chrome.nav_list';
+const COMPONENT_ID$h = 'chrome.nav';
+const colorStyles$5 = _ref => {
+  let {
+    theme,
+    hue
+  } = _ref;
+  const shade = hue === 'chromeHue' ? 900 : undefined;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    hue,
+    shade
+  });
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    dark: {
+      hue: 'white'
+    },
+    light: {
+      hue: 'black'
+    }
+  });
+  return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
+};
+const sizeStyles$7 = _ref2 => {
+  let {
+    theme,
+    isExpanded
+  } = _ref2;
+  const fontSize = theme.fontSizes.md;
+  const width = isExpanded ? getNavWidthExpanded() : getNavWidth(theme);
+  return styled.css(["width:", ";font-size:", ";"], width, fontSize);
+};
+const StyledNav = styled__default.default.nav.attrs({
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.0.0-next.17'
+}).withConfig({
+  displayName: "StyledNav",
+  componentId: "sc-6j462r-0"
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles$5, sizeStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+StyledNav.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$g = 'chrome.nav_list';
 const StyledNavList = styled__default.default.ul.attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.0.0-next.17'
 }).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));
+})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledNavList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$e = 'chrome.nav_list_item';
+const COMPONENT_ID$f = 'chrome.nav_list_item';
 const StyledNavListItem = styled__default.default.li.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.0.0-next.17'
 }).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));
+})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, 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 'explore':
-      return reactTheming.PALETTE.product.explore;
-    case 'guide':
-      return reactTheming.PALETTE.product.guide;
-    case 'support':
-      return reactTheming.PALETTE.product.support;
-    case 'talk':
-      return reactTheming.PALETTE.product.talk;
-    default:
-      return 'inherit';
-  }
+const COMPONENT_ID$e = 'chrome.base_nav_item';
+const sizeStyles$6 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const minHeight = getNavItemHeight(theme);
+  const verticalPadding = polished.math(`(${minHeight} - ${theme.iconSizes.lg}) / 2`);
+  const horizontalPadding = polished.math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`);
+  return styled.css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, minHeight);
+};
+const StyledBaseNavItem = styled__default.default.div.attrs({
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.0.0-next.17'
+}).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;", ";"], sizeStyles$6);
+StyledBaseNavItem.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
 };
-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);
+
+const COMPONENT_ID$d = 'chrome.logo_nav_list_item';
+const colorStyles$4 = _ref => {
+  let {
+    theme,
+    hue,
+    product
+  } = _ref;
+  const fillColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const color = hue === 'chromeHue' ? getProductColor(product) : fillColor;
   return styled.css(["color:", ";fill:", ";"], color, fillColor);
 };
 const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"
-})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], props => colorStyles$2(props));
+})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], colorStyles$4);
 StyledLogoNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -423,153 +611,212 @@ StyledLogoNavItem.defaultProps = {
 const COMPONENT_ID$c = 'chrome.brandmark_nav_list_item';
 const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
   componentId: "sc-8kynd4-0"
-})(["order:1;opacity:0.3;margin-top:auto;min-height:0;"]);
+})(["order:1;opacity:", ";margin-top:auto;min-height:0;"], props => props.theme.opacity[400]);
 StyledBrandmarkNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$b = 'chrome.nav_item_icon';
-const StyledNavItemIcon = styled__default.default.div.attrs({
+const sizeStyles$5 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const size = theme.iconSizes.lg;
+  return styled.css(["width:", ";height:", ";"], size, size);
+};
+const StyledNavItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).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$b, props));
+})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledNavItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$a = 'chrome.nav_button';
-const colorStyles$1 = props => {
-  const {
+const colorStyles$3 = _ref => {
+  let {
+    theme,
+    hue
+  } = _ref;
+  const activeBackgroundColor = reactTheming.getColor({
+    theme,
+    dark: {
+      hue: 'white'
+    },
+    light: {
+      hue: 'black'
+    },
+    transparency: theme.opacity[100]
+  });
+  const currentBackgroundColor = hue === 'chromeHue' ? reactTheming.getColor({
     theme,
     hue,
-    isLight,
-    isDark,
-    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.4);
-    } else if (isDark) {
-      currentColor = polished.rgba(LIGHT, 0.4);
-    } else {
-      currentColor = reactTheming.getColorV8(hue, 500, theme);
+    shade: 700
+  }) : reactTheming.getColor({
+    theme,
+    dark: {
+      hue: 'white'
+    },
+    light: {
+      hue: 'black'
+    },
+    transparency: theme.opacity[500]
+  });
+  const focusOutlineColor = reactTheming.getColor({
+    theme,
+    dark: {
+      hue: 'white'
+    },
+    light: {
+      hue: 'black'
     }
-  } else {
-    hoverColor = polished.rgba(isLight ? LIGHT : DARK, 0.1);
-  }
-  const activeColor = polished.rgba(isLight ? DARK : LIGHT, 0.1);
-  const focusColor = isLight ? DARK : LIGHT;
-  return styled.css(["opacity:", ";outline-color:transparent;background-color:", ";&:hover{opacity:1;background-color:", ";}", " &:active{background-color:", ";}"], isCurrent ? 1 : 0.6, currentColor, hoverColor, reactTheming.focusStyles({
+  });
+  const focusOutlineOffset = `-${theme.borderWidths.md}`;
+  const hoverBackgroundColor = reactTheming.getColor({
+    theme,
+    dark: {
+      hue: 'black'
+    },
+    light: {
+      hue: 'white'
+    },
+    transparency: theme.opacity[100]
+  });
+  return styled.css(["opacity:", ";outline-color:transparent;background-color:transparent;color:inherit;&:hover{opacity:1;background-color:", ";}&:hover,&:focus{color:inherit;}", " &:active{background-color:", ";}&[aria-current='true']{opacity:1;background-color:", ";}"], theme.opacity[700], hoverBackgroundColor, reactTheming.focusStyles({
     theme,
-    condition: false ,
+    condition: false,
     styles: {
       opacity: 1,
-      outlineColor: focusColor
+      outlineColor: focusOutlineColor,
+      outlineOffset: focusOutlineOffset
     }
-  }), activeColor);
+  }), activeBackgroundColor, currentBackgroundColor);
+};
+const sizeStyles$4 = _ref2 => {
+  let {
+    theme,
+    isExpanded
+  } = _ref2;
+  const iconMargin = isExpanded ? `0 ${polished.math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
+  return styled.css(["margin:0;border:none;box-sizing:border-box;min-width:0;font-size:inherit;", "{margin:", ";}"], StyledNavItemIcon, iconMargin);
 };
 const StyledNavButton = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.16',
+  'data-garden-version': '9.0.0-next.17',
   as: 'button'
 }).withConfig({
   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$a, props));
+})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.isExpanded && 'start', props => props.isExpanded && 'inherit', sizeStyles$4, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledNavButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$9 = 'chrome.nav_item_text';
+const sizeStyles$3 = _ref => {
+  let {
+    theme,
+    isExpanded,
+    isWrapped
+  } = _ref;
+  const clip = isExpanded ? 'auto' : undefined;
+  const lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
+  const margin = isExpanded ? `0 ${polished.math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
+  const width = isExpanded ? 'auto' : undefined;
+  const height = isExpanded ? 'auto' : undefined;
+  const whiteSpace = isWrapped ? undefined : 'nowrap';
+  return styled.css(["clip:rect(1px,1px,1px,1px);margin:", ";width:1px;height:1px;line-height:", ";white-space:", ";", " > &&{clip:", ";width:", ";height:", ";}"], margin, lineHeight, whiteSpace, StyledNavButton, clip, width, height);
+};
 const StyledNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).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 && `
-    ${StyledNavButton} > && {
-      position: static;
-      flex: 1;
-      clip: auto;
-      width: auto;
-      height: auto;
-      text-overflow: ellipsis;
-    }
-  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.isExpanded ? 'static' : undefined, props => props.isExpanded ? 1 : undefined, props => props.isExpanded ? 'ellipsis' : undefined, sizeStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledNavItemText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$8 = 'chrome.sheet';
-const borderStyle = _ref => {
+const colorStyles$2 = _ref => {
   let {
     theme,
-    placement,
     isOpen
   } = _ref;
-  const borderColor = isOpen ? reactTheming.getColorV8('neutralHue', 300, theme) : 'transparent';
-  const borderSides = ['-left', '-right'];
-  let borderSide = '';
-  if (theme.rtl) {
-    borderSides.reverse();
-  }
-  if (placement === 'end') {
-    borderSide = borderSides[0];
-  } else if (placement === 'start') {
-    borderSide = borderSides[1];
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = isOpen ? reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  }) : 'transparent';
+  return styled.css(["border-color:", ";background-color:", ";"], borderColor, backgroundColor);
+};
+const sizeStyles$2 = _ref2 => {
+  let {
+    theme,
+    isOpen,
+    placement,
+    size
+  } = _ref2;
+  const width = isOpen ? size : 0;
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = reactTheming.getLineHeight(theme.space.base * 5, fontSize);
+  const border = isOpen ? theme.borders.sm : 'none';
+  let borderProperty;
+  if (placement === 'start') {
+    borderProperty = `border-${theme.rtl ? 'left' : 'right'}`;
+  } else {
+    borderProperty = `border-${theme.rtl ? 'right' : 'left'}`;
   }
-  return `border${borderSide}: ${theme.borders.sm} ${borderColor};`;
+  return styled.css(["box-sizing:border-box;width:", ";height:100%;", ":", ";line-height:", ";font-size:", ";"], width, borderProperty, border, lineHeight, fontSize);
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).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 => 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));
+})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', sizeStyles$2, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledSheet.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
+const transformStyles = _ref => {
+  let {
+    theme,
+    isAnimated,
+    isOpen,
+    placement
+  } = _ref;
+  const transition = isAnimated ? 'transform 250ms ease-in-out' : undefined;
+  let transform;
+  if (isOpen) {
+    transform = 'translateX(0)';
+  } else if (placement === 'start') {
+    transform = `translateX(${theme.rtl ? 100 : -100}%)`;
+  } else {
+    transform = `translateX(${theme.rtl ? -100 : 100}%)`;
+  }
+  return styled.css(["transform:", ";transition:", ";"], transform, transition);
+};
 const StyledSheetWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
-})(["display:flex;position:relative;flex-direction:column;transform:", ";transition:", ";min-width:", ";", ";"], props => {
-  const translateValues = [-100, 100];
-  let translation = 'translateX(0%)';
-  if (props.isOpen) {
-    return translation;
-  }
-  if (props.theme.rtl) {
-    translateValues.reverse();
-  }
-  if (props.placement === 'end') {
-    translation = `translateX(${translateValues[1]}%)`;
-  } else if (props.placement === 'start') {
-    translation = `translateX(${translateValues[0]}%)`;
-  }
-  return translation;
-}, props => props.isAnimated && 'transform 250ms ease-in-out', props => props.size, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.size, transformStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledSheetWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -577,11 +824,14 @@ 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.16'
+  'data-garden-version': '9.0.0-next.17'
 }).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 => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["color:", ";font-weight:", ";", ";"], p => reactTheming.getColor({
+  theme: p.theme,
+  variable: 'foreground.default'
+}), props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledSheetTitle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -589,11 +839,14 @@ 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.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
-})(["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));
+})(["line-height:", ";color:", ";", ";"], p => reactTheming.getLineHeight(p.theme.space.base * 4, p.theme.fontSizes.md), p => reactTheming.getColor({
+  theme: p.theme,
+  variable: 'foreground.subtle'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledSheetDescription.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -601,7 +854,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.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -611,37 +864,52 @@ StyledSheetBody.defaultProps = {
 };
 
 const COMPONENT_ID$3 = 'chrome.sheet_close';
-const BASE_MULTIPLIERS = {
-  top: 2.5,
-  side: 2,
-  size: 10
-};
-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.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.getColorV8(backgroundColor, 600, props.theme, 0.2), reactTheming.getColorV8(foregroundColor, 800, props.theme));
-};
-const StyledSheetClose = styled__default.default.button.attrs({
+const positionStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const top = `${theme.space.base * 2.5}px`;
+  const position = `${theme.space.base * 2}px`;
+  return styled.css(["top:", ";", ":", ";"], top, theme.rtl ? 'left' : 'right', position);
+};
+const StyledSheetClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
-})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", ";& > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["position:absolute;", ";", ";"], positionStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledSheetClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$2 = 'chrome.sheet_footer';
+const colorStyles$1 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.subtle'
+  });
+  return styled.css(["border-top-color:", ";"], borderColor);
+};
+const sizeStyles$1 = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const border = theme.borders.sm;
+  const padding = `${theme.space.base * (isCompact ? 2.5 : 5)}px`;
+  return styled.css(["border-top:", ";padding:", ";"], border, padding);
+};
 const StyledSheetFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).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.getColorV8('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:", ";", ";", ";", ";"], props => props.isCompact ? 'center' : 'flex-end', sizeStyles$1, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledSheetFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -649,7 +917,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.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -659,13 +927,36 @@ StyledSheetFooterItem.defaultProps = {
 };
 
 const COMPONENT_ID = 'chrome.sheet_header';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.subtle'
+  });
+  return styled.css(["border-bottom-color:", ";"], borderColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCloseButtonPresent
+  } = _ref2;
+  const border = theme.borders.sm;
+  let padding = `${theme.space.base * 5}px`;
+  if (isCloseButtonPresent) {
+    const paddingSide = `${theme.space.base * 14}px`;
+    padding = theme.rtl ? `${padding} ${padding} ${padding} ${paddingSide}` : `${padding} ${paddingSide} ${padding} ${padding}`;
+  }
+  return styled.css(["border-bottom:", ";padding:", ";"], border, padding);
+};
 const StyledSheetHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["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));
+})(["", ";", ";", ";"], sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledSheetHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -700,23 +991,7 @@ const HeaderItemIcon = _ref => {
     children,
     ...props
   } = _ref;
-  const element = React.Children.only(children);
-  if ( React.isValidElement(element)) {
-    const Icon = _ref2 => {
-      let {
-        theme,
-        ...iconProps
-      } = _ref2;
-      return React.cloneElement(element, {
-        ...props,
-        ...iconProps
-      });
-    };
-    return React__namespace.default.createElement(StyledHeaderItemIcon, Object.assign({
-      as: Icon
-    }, props));
-  }
-  return null;
+  return React__namespace.default.createElement(StyledHeaderItemIcon, props, children);
 };
 
 const HeaderItemText = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeaderItemText, Object.assign({
@@ -761,27 +1036,23 @@ const NavItem = React__namespace.default.forwardRef((_ref, ref) => {
     hasLogo,
     hasBrandmark,
     product,
+    isCurrent,
     ...other
   } = _ref;
   const {
-    hue,
-    isLight,
-    isDark
+    hue
   } = useChromeContext();
   const {
     isExpanded
   } = useNavContext();
   const navListContext = useNavListContext();
-  const ariaCurrent = other.isCurrent || undefined;
   const hasList = navListContext?.hasList;
   let retVal;
   if (hasLogo) {
     retVal = React__namespace.default.createElement(StyledLogoNavItem, Object.assign({
       ref: ref,
-      isDark: isDark,
-      isLight: isLight,
-      product: product,
-      "aria-current": ariaCurrent
+      hue: hue,
+      product: product
     }, other));
   } else if (hasBrandmark) {
     retVal = React__namespace.default.createElement(StyledBrandmarkNavItem, Object.assign({
@@ -793,9 +1064,7 @@ const NavItem = React__namespace.default.forwardRef((_ref, ref) => {
       ref: ref,
       isExpanded: isExpanded,
       hue: hue,
-      isDark: isDark,
-      isLight: isLight,
-      "aria-current": ariaCurrent
+      "aria-current": isCurrent || undefined
     }, other));
   }
   if (hasList) {
@@ -815,23 +1084,7 @@ const NavItemIcon = _ref => {
     children,
     ...props
   } = _ref;
-  const element = React.Children.only(children);
-  if ( React.isValidElement(element)) {
-    const Icon = _ref2 => {
-      let {
-        theme,
-        ...iconProps
-      } = _ref2;
-      return React.cloneElement(element, {
-        ...props,
-        ...iconProps
-      });
-    };
-    return React__namespace.default.createElement(StyledNavItemIcon, Object.assign({
-      as: Icon
-    }, props));
-  }
-  return null;
+  return React__namespace.default.createElement(StyledNavItemIcon, props, children);
 };
 
 const NavItemText = React__namespace.default.forwardRef((props, ref) => {
@@ -854,22 +1107,23 @@ const Chrome = React__namespace.default.forwardRef((_ref, ref) => {
     isFluid,
     ...props
   } = _ref;
-  const theme = React.useContext(styled.ThemeContext);
+  const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
   const isLightMemoized = React.useMemo(() => {
     if (hue) {
-      const backgroundColor = reactTheming.getColorV8(hue, 600, theme);
+      const backgroundColor = reactTheming.getColor({
+        theme,
+        hue
+      });
       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 isLight = hue ? isLightMemoized : undefined;
   const chromeContextValue = React.useMemo(() => ({
     hue: hue || 'chromeHue',
-    isLight,
-    isDark
-  }), [hue, isLight, isDark]);
+    isLight
+  }), [hue, isLight]);
   const environment = reactTheming.useDocument(theme);
   React.useEffect(() => {
     if (environment && !isFluid) {
@@ -1003,21 +1257,26 @@ NavList.displayName = 'Nav';
 const NavComponent = React__namespace.default.forwardRef((props, ref) => {
   const {
     hue,
-    isLight,
-    isDark
+    isLight
   } = useChromeContext();
   const navContextValue = React.useMemo(() => ({
     isExpanded: !!props.isExpanded
   }), [props.isExpanded]);
-  return React__namespace.default.createElement(NavContext.Provider, {
+  return React__namespace.default.createElement(styled.ThemeProvider, {
+    theme: parentTheme => ({
+      ...parentTheme,
+      colors: {
+        ...parentTheme.colors,
+        base: isLight ? 'light' : 'dark'
+      }
+    })
+  }, React__namespace.default.createElement(NavContext.Provider, {
     value: navContextValue
   }, React__namespace.default.createElement(StyledNav, Object.assign({
     ref: ref
   }, props, {
-    hue: hue,
-    isLight: isLight,
-    isDark: isDark
-  })));
+    hue: hue
+  }))));
 });
 NavComponent.displayName = 'Nav';
 NavComponent.propTypes = {
@@ -1173,7 +1432,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.16'}`), [id, seed]);
+  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.17'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = React.useMemo(() => ({