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

package/dist/esm/styled/header/StyledHeaderItem.js

@@ -6,30 +6,62 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { focusStyles, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
-import { StyledBaseHeaderItem, getHeaderItemSize } from './StyledBaseHeaderItem.js';
+import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
 import { StyledHeaderItemText } from './StyledHeaderItemText.js';
+import { getHeaderItemSize } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.header_item';
-const imgStyles = props => {
-  const size = math(`${getHeaderItemSize(props)} - ${props.theme.space.base * 2}`);
-  return css(["img{margin:0;border-radius:", ";width:", ";height:", ";}"], math(`${props.theme.borderRadii.md} - 1`), size, size);
+const colorStyles = _ref => {
+  let {
+    theme,
+    maxY
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'foreground.subtle'
+  };
+  const hoverColor = getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeColor = getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
+  return css(["&:hover,&:focus{color:inherit;}", ";&:hover ", ",&:hover ", "{color:", ";}&:active ", ",&:active ", "{color:", ";}"], focusStyles({
+    theme,
+    inset: maxY
+  }), StyledHeaderItemIcon, StyledHeaderItemText, hoverColor, StyledHeaderItemIcon, StyledHeaderItemText, activeColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isRound
+  } = _ref2;
+  const iconBorderRadius = isRound ? '100px' : undefined;
+  const imageBorderRadius = math(`${theme.borderRadii.md} - 1`);
+  const imageSize = math(`${getHeaderItemSize(theme)} - ${theme.space.base * 2}`);
+  return css(["img{margin:0;border-radius:", ";width:", ";height:", ";}", "{border-radius:", ";}"], imageBorderRadius, imageSize, imageSize, StyledHeaderItemIcon, iconBorderRadius);
 };
 const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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 => focusStyles({
-  theme: props.theme,
-  inset: props.maxY
-}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => getColorV8('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
-    ${StyledHeaderItemIcon} {
-      border-radius: 100px;
-    }
-  `, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles, colorStyles, StyledHeaderItemIcon, StyledHeaderItemText, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/header/StyledHeaderItemIcon.js

@@ -4,17 +4,25 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.header_item_icon';
-const StyledHeaderItemIcon = styled.div.attrs({
+const sizeStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const margin = `0 ${theme.space.base * 0.75}px`;
+  const size = theme.iconSizes.md;
+  return css(["margin:", ";width:", ";min-width:", ";height:", ";"], margin, size, size, size);
+};
+const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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 => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeaderItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/header/StyledHeaderItemText.js

@@ -4,20 +4,20 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
+import { hideVisually } from 'polished';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.header_item_text';
-const clippedStyling = css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledHeaderItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
-})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.isClipped && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeaderItemText.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledHeaderItemText, clippedStyling };
+export { StyledHeaderItemText };

package/dist/esm/styled/header/StyledHeaderItemWrapper.js

@@ -11,7 +11,7 @@ import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
 const COMPONENT_ID = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16',
+  'data-garden-version': '9.0.0-next.18',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",

package/dist/esm/styled/header/StyledLogoHeaderItem.js

@@ -4,38 +4,50 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { hideVisually } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
 import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
-import { StyledHeaderItemText, clippedStyling } from './StyledHeaderItemText.js';
-import { getNavWidth } from '../nav/StyledNav.js';
+import { StyledHeaderItemText } from './StyledHeaderItemText.js';
+import { getProductColor, getNavWidth } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.header_item';
-const retrieveProductColor = props => {
-  switch (props.product) {
-    case 'chat':
-      return PALETTE.product.chat;
-    case 'explore':
-      return PALETTE.product.explore;
-    case 'guide':
-      return PALETTE.product.guide;
-    case 'support':
-      return PALETTE.product.support;
-    case 'talk':
-      return PALETTE.product.talk;
-    default:
-      return 'inherit';
-  }
+const colorStyles = _ref => {
+  let {
+    theme,
+    product
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const fill = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const color = getProductColor(product, fill );
+  return css(["border-", "-color:", ";color:", ";fill:", ";"], theme.rtl ? 'left' : 'right', borderColor, color, fill);
+};
+const sizeStyles = _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 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(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16',
+  'data-garden-version': '9.0.0-next.18',
   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} ${getColorV8('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => getColorV8('chromeHue', 700, props.theme), props => retrieveProductColor(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles, colorStyles, StyledHeaderItemText, hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledLogoHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/nav/StyledBaseNavItem.js

@@ -7,26 +7,27 @@
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { getNavWidth } from './StyledNav.js';
+import { getNavItemHeight, getNavWidth } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.base_nav_item';
-const getNavItemHeight = props => {
-  return `${props.theme.space.base * 13}px`;
-};
-const sizeStyles = props => {
-  const verticalPadding = math(`(${getNavItemHeight(props)} - ${props.theme.iconSizes.lg}) / 2`);
-  const horizontalPadding = math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`);
-  return css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, getNavItemHeight);
+const sizeStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const minHeight = getNavItemHeight(theme);
+  const verticalPadding = math(`(${minHeight} - ${theme.iconSizes.lg}) / 2`);
+  const horizontalPadding = math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`);
+  return css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, minHeight);
 };
 const StyledBaseNavItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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(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;", ";"], sizeStyles);
 StyledBaseNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledBaseNavItem, getNavItemHeight };
+export { StyledBaseNavItem };

package/dist/esm/styled/nav/StyledBrandmarkNavItem.js

@@ -11,11 +11,11 @@ import { StyledBaseNavItem } from './StyledBaseNavItem.js';
 const COMPONENT_ID = 'chrome.brandmark_nav_list_item';
 const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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: DEFAULT_THEME
 };

package/dist/esm/styled/nav/StyledLogoNavItem.js

@@ -5,38 +5,31 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledBaseNavItem } from './StyledBaseNavItem.js';
+import { getProductColor } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.logo_nav_list_item';
-const retrieveProductColor = product => {
-  switch (product) {
-    case 'chat':
-      return PALETTE.product.chat;
-    case 'explore':
-      return PALETTE.product.explore;
-    case 'guide':
-      return PALETTE.product.guide;
-    case 'support':
-      return PALETTE.product.support;
-    case 'talk':
-      return PALETTE.product.talk;
-    default:
-      return 'inherit';
-  }
-};
-const colorStyles = 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 colorStyles = _ref => {
+  let {
+    theme,
+    hue,
+    product
+  } = _ref;
+  const fillColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const color = hue === 'chromeHue' ? getProductColor(product) : fillColor;
   return css(["color:", ";fill:", ";"], color, fillColor);
 };
 const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"
-})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], props => colorStyles(props));
+})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], colorStyles);
 StyledLogoNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/nav/StyledNav.js

@@ -5,30 +5,50 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { getNavWidthExpanded, getNavWidth } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.nav';
-const colorStyles = props => {
-  const shade = props.isDark || props.isLight ? 600 : 700;
-  const backgroundColor = getColorV8(props.hue, shade, props.theme);
-  const foregroundColor = props.isLight ? props.theme.palette.black : props.theme.palette.white;
+const colorStyles = _ref => {
+  let {
+    theme,
+    hue
+  } = _ref;
+  const shade = hue === 'chromeHue' ? 900 : undefined;
+  const backgroundColor = getColor({
+    theme,
+    hue,
+    shade
+  });
+  const foregroundColor = getColor({
+    theme,
+    dark: {
+      hue: 'white'
+    },
+    light: {
+      hue: 'black'
+    }
+  });
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
-const getNavWidth = props => {
-  return `${props.theme.space.base * 15}px`;
-};
-const getExpandedNavWidth = () => {
-  return `200px`;
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isExpanded
+  } = _ref2;
+  const fontSize = theme.fontSizes.md;
+  const width = isExpanded ? getNavWidthExpanded() : getNavWidth(theme);
+  return css(["width:", ";font-size:", ";"], width, fontSize);
 };
 const StyledNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledNav.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledNav, getExpandedNavWidth, getNavWidth };
+export { StyledNav };

package/dist/esm/styled/nav/StyledNavButton.js

@@ -5,59 +5,88 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { math, rgba } from 'polished';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledBaseNavItem } from './StyledBaseNavItem.js';
 import { StyledNavItemIcon } from './StyledNavItemIcon.js';
-import { getNavWidth } from './StyledNav.js';
+import { getNavWidth } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.nav_button';
-const colorStyles = props => {
-  const {
+const colorStyles = _ref => {
+  let {
+    theme,
+    hue
+  } = _ref;
+  const activeBackgroundColor = getColor({
+    theme,
+    dark: {
+      hue: 'white'
+    },
+    light: {
+      hue: 'black'
+    },
+    transparency: theme.opacity[100]
+  });
+  const currentBackgroundColor = hue === 'chromeHue' ? 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 = rgba(DARK, 0.4);
-    } else if (isDark) {
-      currentColor = rgba(LIGHT, 0.4);
-    } else {
-      currentColor = getColorV8(hue, 500, theme);
+    shade: 700
+  }) : getColor({
+    theme,
+    dark: {
+      hue: 'white'
+    },
+    light: {
+      hue: 'black'
+    },
+    transparency: theme.opacity[500]
+  });
+  const focusOutlineColor = getColor({
+    theme,
+    dark: {
+      hue: 'white'
+    },
+    light: {
+      hue: 'black'
     }
-  } else {
-    hoverColor = rgba(isLight ? LIGHT : DARK, 0.1);
-  }
-  const activeColor = rgba(isLight ? DARK : LIGHT, 0.1);
-  const focusColor = isLight ? DARK : LIGHT;
-  return css(["opacity:", ";outline-color:transparent;background-color:", ";&:hover{opacity:1;background-color:", ";}", " &:active{background-color:", ";}"], isCurrent ? 1 : 0.6, currentColor, hoverColor, focusStyles({
+  });
+  const focusOutlineOffset = `-${theme.borderWidths.md}`;
+  const hoverBackgroundColor = getColor({
     theme,
-    condition: false ,
+    dark: {
+      hue: 'black'
+    },
+    light: {
+      hue: 'white'
+    },
+    transparency: theme.opacity[100]
+  });
+  return 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, focusStyles({
+    theme,
+    condition: false,
     styles: {
       opacity: 1,
-      outlineColor: focusColor
+      outlineColor: focusOutlineColor,
+      outlineOffset: focusOutlineOffset
     }
-  }), activeColor);
+  }), activeBackgroundColor, currentBackgroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isExpanded
+  } = _ref2;
+  const iconMargin = isExpanded ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
+  return css(["margin:0;border:none;box-sizing:border-box;min-width:0;font-size:inherit;", "{margin:", ";}"], StyledNavItemIcon, iconMargin);
 };
 const StyledNavButton = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16',
+  'data-garden-version': '9.0.0-next.18',
   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, SELECTOR_FOCUS_VISIBLE, props => math(`${props.theme.borderWidths.md} - 1`), props => props.theme.borderWidths.md, props => props.isExpanded && `
-    ${StyledNavItemIcon} {
-      margin: 0 ${math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`)};
-    }
-  `, props => retrieveComponentStyles(COMPONENT_ID, 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, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledNavButton.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/nav/StyledNavItemIcon.js

@@ -4,17 +4,24 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.nav_item_icon';
-const StyledNavItemIcon = styled.div.attrs({
+const sizeStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const size = theme.iconSizes.lg;
+  return css(["width:", ";height:", ";"], size, size);
+};
+const StyledNavItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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 => retrieveComponentStyles(COMPONENT_ID, props));
+})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledNavItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/nav/StyledNavItemText.js

@@ -4,29 +4,34 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledNavButton } from './StyledNavButton.js';
-import { getNavWidth } from './StyledNav.js';
+import { getNavWidth } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.nav_item_text';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    isExpanded,
+    isWrapped
+  } = _ref;
+  const clip = isExpanded ? 'auto' : undefined;
+  const lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
+  const margin = isExpanded ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
+  const width = isExpanded ? 'auto' : undefined;
+  const height = isExpanded ? 'auto' : undefined;
+  const whiteSpace = isWrapped ? undefined : 'nowrap';
+  return 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.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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 ${math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`)}`, props => 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 => retrieveComponentStyles(COMPONENT_ID, 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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledNavItemText.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/nav/StyledNavList.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.nav_list';
 const StyledNavList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledNavList",
   componentId: "sc-1s0nkfb-0"

package/dist/esm/styled/nav/StyledNavListItem.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.nav_list_item';
 const StyledNavListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledNavListItem",
   componentId: "sc-18cj2v7-0"