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

package/dist/esm/styled/body/StyledContent.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 { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+import { getHeaderHeight, getFooterHeight } from '../utils.js';
+
+const COMPONENT_ID = 'chrome.content';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    hasFooter
+  } = _ref;
+  const fontSize = theme.fontSizes.md;
+  const height = hasFooter ? `calc(100% - ${math(`${getHeaderHeight(theme)} + ${getFooterHeight(theme)}`)})` : `calc(100% - ${getHeaderHeight(theme)})`;
+  const lineHeight = getLineHeight(theme.lineHeights.md, theme.fontSizes.md);
+  return css(["height:", ";line-height:", ";font-size:", ";"], height, lineHeight, fontSize);
+};
+const StyledContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledContent",
+  componentId: "sc-qcuzxn-0"
+})(["display:flex;color-scheme:only ", ";color:", ";", ";&:focus{outline:none;}", ";"], p => p.theme.colors.base, props => getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledContent };

package/dist/esm/styled/body/StyledMain.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 { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.main';
+const StyledMain = styled.main.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledMain",
+  componentId: "sc-t61cre-0"
+})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => getColor({
+  theme: props.theme,
+  variable: 'background.default'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledMain.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMain };

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

@@ -0,0 +1,46 @@
+/**
+* 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, getColor } from '@zendeskgarden/react-theming';
+import { getFooterHeight } from '../utils.js';
+
+const COMPONENT_ID = 'chrome.footer';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  return css(["border-top-color:", ";background-color:", ";"], borderColor, backgroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const border = theme.borders.sm;
+  const padding = `0 ${theme.space.base * 9}px`;
+  const height = getFooterHeight(theme);
+  return css(["box-sizing:border-box;border-top:", ";padding:", ";height:", ";"], border, padding, height);
+};
+const StyledFooter = styled.footer.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledFooter",
+  componentId: "sc-v7lib2-0"
+})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFooter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFooter };

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.20'
+}).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,44 @@
+/**
+* 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';
+import { getHeaderItemSize } from '../utils.js';
+
+const COMPONENT_ID = 'chrome.base_header_item';
+const sizeStyles = _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 = 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 css(["margin:", ";border-radius:", ";padding:", ";min-width:", ";height:", ";line-height:", ";font-size:inherit;"], margin, borderRadius, padding, size, height, lineHeight);
+};
+const StyledBaseHeaderItem = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).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, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBaseHeaderItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBaseHeaderItem };

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

@@ -0,0 +1,58 @@
+/**
+* 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, getColor } from '@zendeskgarden/react-theming';
+import { StyledLogoHeaderItem } from './StyledLogoHeaderItem.js';
+import { getHeaderHeight } from '../utils.js';
+
+const COMPONENT_ID = 'chrome.header';
+const colorStyles = _ref => {
+  let {
+    theme,
+    isStandalone
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const boxShadowColor = getColor({
+    variable: 'shadow.small',
+    theme
+  });
+  const boxShadow = isStandalone ? theme.shadows.lg('0', `${theme.space.base * 2}px`, boxShadowColor) : undefined;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.subtle'
+  });
+  return css(["border-bottom-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
+};
+const sizeStyles = _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 css(["box-sizing:border-box;border-bottom:", ";padding:", ";height:", ";font-size:", ";"], border, padding, height, fontSize);
+};
+const StyledHeader = styled.header.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledHeader",
+  componentId: "sc-1cexpz-0"
+})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.isStandalone && 'relative', sizeStyles, colorStyles, StyledLogoHeaderItem, props => props.isStandalone && 'inline-flex', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeader };

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

@@ -0,0 +1,69 @@
+/**
+* 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 { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
+import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
+import { StyledHeaderItemText } from './StyledHeaderItemText.js';
+import { getHeaderItemSize } from '../utils.js';
+
+const COMPONENT_ID = 'chrome.header_item';
+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.20'
+}).withConfig({
+  displayName: "StyledHeaderItem",
+  componentId: "sc-14sft6n-0"
+})(["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
+};
+
+export { StyledHeaderItem };

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

@@ -0,0 +1,30 @@
+/**
+* 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 { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.header_item_icon';
+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.20'
+}).withConfig({
+  displayName: "StyledHeaderItemIcon",
+  componentId: "sc-1jhhp6z-0"
+})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles, 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 from 'styled-components';
+import { hideVisually } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.header_item_text';
+const StyledHeaderItemText = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledHeaderItemText",
+  componentId: "sc-goz7la-0"
+})(["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 };

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.20',
+  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,55 @@
+/**
+* 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 { hideVisually } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
+import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
+import { StyledHeaderItemText } from './StyledHeaderItemText.js';
+import { getProductColor, getNavWidth } from '../utils.js';
+
+const COMPONENT_ID = 'chrome.header_item';
+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.20',
+  as: 'div'
+}).withConfig({
+  displayName: "StyledLogoHeaderItem",
+  componentId: "sc-1n1d1yv-0"
+})(["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
+};
+
+export { StyledLogoHeaderItem };

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

@@ -0,0 +1,33 @@
+/**
+* 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 { getNavItemHeight, getNavWidth } from '../utils.js';
+
+const COMPONENT_ID = 'chrome.base_nav_item';
+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.20'
+}).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);
+StyledBaseNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBaseNavItem };

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.20'
+}).withConfig({
+  displayName: "StyledBrandmarkNavItem",
+  componentId: "sc-8kynd4-0"
+})(["order:1;opacity:", ";margin-top:auto;min-height:0;"], props => props.theme.opacity[400]);
+StyledBrandmarkNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBrandmarkNavItem };

package/dist/esm/styled/nav/StyledLogoNavItem.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 { 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 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.20'
+}).withConfig({
+  displayName: "StyledLogoNavItem",
+  componentId: "sc-saaydx-0"
+})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], colorStyles);
+StyledLogoNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLogoNavItem };

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

@@ -0,0 +1,54 @@
+/**
+* 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, getColor } from '@zendeskgarden/react-theming';
+import { getNavWidthExpanded, getNavWidth } from '../utils.js';
+
+const COMPONENT_ID = 'chrome.nav';
+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 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.20'
+}).withConfig({
+  displayName: "StyledNav",
+  componentId: "sc-6j462r-0"
+})(["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 };