@zendeskgarden/react-chrome 9.0.0-next.6 → 9.0.0-next.8

package/dist/esm/styled/footer/StyledFooter.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.footer';
+const getFooterHeight = props => {
+  return `${props.theme.space.base * 20}px`;
+};
+const StyledFooter = styled.footer.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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} ${getColorV8('neutralHue', 300, props.theme)}`, props => getColorV8('background', 600 , props.theme), props => props.theme.space.base * 9, getFooterHeight, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFooter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFooter, getFooterHeight };

package/dist/esm/styled/footer/StyledFooterItem.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.footer_item';
+const StyledFooterItem = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledFooterItem",
+  componentId: "sc-1cktm85-0"
+})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFooterItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFooterItem };

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

@@ -0,0 +1,35 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.base_header_item';
+const getHeaderItemSize = props => `${props.theme.space.base * 7.5}px`;
+const sizeStyles = props => {
+  const size = props.theme.space.base * 7.5;
+  return css(["padding:0 3px;min-width:", "px;height:", ";line-height:", ";"], size, props.maxY ? '100%' : `${size}px`, getLineHeight(size, props.theme.fontSizes.md));
+};
+const StyledBaseHeaderItem = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBaseHeaderItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBaseHeaderItem, getHeaderItemSize };

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

@@ -0,0 +1,31 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledLogoHeaderItem } from './StyledLogoHeaderItem.js';
+import { getNavItemHeight } from '../nav/StyledBaseNavItem.js';
+
+const COMPONENT_ID = 'chrome.header';
+const getHeaderHeight = props => {
+  return getNavItemHeight(props);
+};
+const StyledHeader = styled.header.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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} ${getColorV8('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', getColorV8('chromeHue', 600, props.theme, 0.15)), props => getColorV8('background', 600 , props.theme), props => props.theme.space.base, getHeaderHeight, props => getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isStandalone && `
+    ${StyledLogoHeaderItem} {
+      display: inline-flex;
+    }
+  `, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeader, getHeaderHeight };

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

@@ -0,0 +1,37 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { focusStyles, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
+import { StyledBaseHeaderItem, getHeaderItemSize } from './StyledBaseHeaderItem.js';
+import { StyledHeaderItemText } from './StyledHeaderItemText.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 StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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));
+StyledHeaderItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderItem };

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

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.header_item_icon';
+const StyledHeaderItemIcon = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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));
+StyledHeaderItemIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderItemIcon };

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

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+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.8'
+}).withConfig({
+  displayName: "StyledHeaderItemText",
+  componentId: "sc-goz7la-0"
+})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderItemText.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderItemText, clippedStyling };

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

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+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.8',
+  as: 'div'
+}).withConfig({
+  displayName: "StyledHeaderItemWrapper",
+  componentId: "sc-1uieu55-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderItemWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderItemWrapper };

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

@@ -0,0 +1,47 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, PALETTE } 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';
+
+const COMPONENT_ID = 'chrome.header_item';
+const retrieveProductColor = props => {
+  switch (props.product) {
+    case 'chat':
+      return PALETTE.product.chat;
+    case 'connect':
+      return PALETTE.product.connect;
+    case 'explore':
+      return PALETTE.product.explore;
+    case 'guide':
+      return PALETTE.product.guide;
+    case 'message':
+      return PALETTE.product.message;
+    case 'support':
+      return PALETTE.product.support;
+    case 'talk':
+      return PALETTE.product.talk;
+    default:
+      return 'inherit';
+  }
+};
+const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  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));
+StyledLogoHeaderItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLogoHeaderItem };

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

@@ -0,0 +1,32 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getNavWidth } from './StyledNav.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 StyledBaseNavItem = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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));
+StyledBaseNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBaseNavItem, getNavItemHeight };

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

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+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.8'
+}).withConfig({
+  displayName: "StyledBrandmarkNavItem",
+  componentId: "sc-8kynd4-0"
+})(["order:1;opacity:0.3;margin-top:auto;min-height:0;"]);
+StyledBrandmarkNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBrandmarkNavItem };

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

@@ -0,0 +1,48 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
+import { StyledBaseNavItem } from './StyledBaseNavItem.js';
+
+const COMPONENT_ID = 'chrome.logo_nav_list_item';
+const retrieveProductColor = product => {
+  switch (product) {
+    case 'chat':
+      return PALETTE.product.chat;
+    case 'connect':
+      return PALETTE.product.connect;
+    case 'explore':
+      return PALETTE.product.explore;
+    case 'guide':
+      return PALETTE.product.guide;
+    case 'message':
+      return PALETTE.product.message;
+    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);
+  return css(["color:", ";fill:", ";"], color, fillColor);
+};
+const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledLogoNavItem",
+  componentId: "sc-saaydx-0"
+})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], props => colorStyles(props));
+StyledLogoNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLogoNavItem };

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

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+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;
+  return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
+};
+const getNavWidth = props => {
+  return `${props.theme.space.base * 15}px`;
+};
+const getExpandedNavWidth = () => {
+  return `200px`;
+};
+const StyledNav = styled.nav.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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));
+StyledNav.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNav, getExpandedNavWidth, getNavWidth };

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

@@ -0,0 +1,65 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+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 { StyledBaseNavItem } from './StyledBaseNavItem.js';
+import { StyledNavItemIcon } from './StyledNavItemIcon.js';
+import { getNavWidth } from './StyledNav.js';
+
+const COMPONENT_ID = 'chrome.nav_button';
+const colorStyles = props => {
+  const {
+    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);
+    }
+  } 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({
+    theme,
+    condition: false ,
+    styles: {
+      opacity: 1,
+      outlineColor: focusColor
+    }
+  }), activeColor);
+};
+const StyledNavButton = styled(StyledBaseNavItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  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));
+StyledNavButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavButton };

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

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.nav_item_icon';
+const StyledNavItemIcon = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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));
+StyledNavItemIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavItemIcon };

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

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { math } from 'polished';
+import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledNavButton } from './StyledNavButton.js';
+import { getNavWidth } from './StyledNav.js';
+
+const COMPONENT_ID = 'chrome.nav_item_text';
+const StyledNavItemText = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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));
+StyledNavItemText.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavItemText };

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

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.nav_list';
+const StyledNavList = styled.ul.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledNavList",
+  componentId: "sc-1s0nkfb-0"
+})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNavList.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavList };

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

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.nav_list_item';
+const StyledNavListItem = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledNavListItem",
+  componentId: "sc-18cj2v7-0"
+})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNavListItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavListItem };

package/dist/esm/styled/sheet/StyledSheet.js

@@ -0,0 +1,41 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet';
+const borderStyle = _ref => {
+  let {
+    theme,
+    placement,
+    isOpen
+  } = _ref;
+  const borderColor = isOpen ? 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];
+  }
+  return `border${borderSide}: ${theme.borders.sm} ${borderColor};`;
+};
+const StyledSheet = styled.aside.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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 => getColorV8('background', 600 , props.theme), props => props.isOpen ? props.size : '0px', props => props.theme.fontSizes.md, props => borderStyle(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheet.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheet };

package/dist/esm/styled/sheet/StyledSheetBody.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_body';
+const StyledSheetBody = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledSheetBody",
+  componentId: "sc-bt4eoj-0"
+})(["flex:1;overflow-y:auto;padding:", "px;", ";"], props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetBody.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetBody };