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

package/dist/esm/elements/Chrome.js

@@ -8,7 +8,7 @@ import React__default, { useContext, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
 import { readableColor } from 'polished';
-import { getColorV8, useDocument } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColor, useDocument } from '@zendeskgarden/react-theming';
 import { ChromeContext } from '../utils/useChromeContext.js';
 import { StyledChrome } from '../styled/StyledChrome.js';
 import '../styled/StyledSkipNav.js';
@@ -50,22 +50,23 @@ const Chrome = React__default.forwardRef((_ref, ref) => {
     isFluid,
     ...props
   } = _ref;
-  const theme = useContext(ThemeContext);
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
   const isLightMemoized = useMemo(() => {
     if (hue) {
-      const backgroundColor = getColorV8(hue, 600, theme);
+      const backgroundColor = getColor({
+        theme,
+        hue
+      });
       const LIGHT_COLOR = 'white';
       return 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 = useMemo(() => ({
     hue: hue || 'chromeHue',
-    isLight,
-    isDark
-  }), [hue, isLight, isDark]);
+    isLight
+  }), [hue, isLight]);
   const environment = useDocument(theme);
   useEffect(() => {
     if (environment && !isFluid) {

package/dist/esm/elements/header/HeaderItemIcon.js

@@ -4,7 +4,7 @@
 * 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 React__default, { Children, isValidElement, cloneElement } from 'react';
+import React__default from 'react';
 import '../../styled/StyledChrome.js';
 import '../../styled/StyledSkipNav.js';
 import '../../styled/StyledSkipNavIcon.js';
@@ -44,23 +44,7 @@ const HeaderItemIcon = _ref => {
     children,
     ...props
   } = _ref;
-  const element = Children.only(children);
-  if ( isValidElement(element)) {
-    const Icon = _ref2 => {
-      let {
-        theme,
-        ...iconProps
-      } = _ref2;
-      return cloneElement(element, {
-        ...props,
-        ...iconProps
-      });
-    };
-    return React__default.createElement(StyledHeaderItemIcon, Object.assign({
-      as: Icon
-    }, props));
-  }
-  return null;
+  return React__default.createElement(StyledHeaderItemIcon, props, children);
 };
 
 export { HeaderItemIcon };

package/dist/esm/elements/nav/Nav.js

@@ -5,6 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import React__default, { useMemo } from 'react';
+import { ThemeProvider } from 'styled-components';
 import PropTypes from 'prop-types';
 import { useChromeContext } from '../../utils/useChromeContext.js';
 import { NavContext } from '../../utils/useNavContext.js';
@@ -49,21 +50,26 @@ import { NavList } from './NavList.js';
 const NavComponent = React__default.forwardRef((props, ref) => {
   const {
     hue,
-    isLight,
-    isDark
+    isLight
   } = useChromeContext();
   const navContextValue = useMemo(() => ({
     isExpanded: !!props.isExpanded
   }), [props.isExpanded]);
-  return React__default.createElement(NavContext.Provider, {
+  return React__default.createElement(ThemeProvider, {
+    theme: parentTheme => ({
+      ...parentTheme,
+      colors: {
+        ...parentTheme.colors,
+        base: isLight ? 'light' : 'dark'
+      }
+    })
+  }, React__default.createElement(NavContext.Provider, {
     value: navContextValue
   }, React__default.createElement(StyledNav, Object.assign({
     ref: ref
   }, props, {
-    hue: hue,
-    isLight: isLight,
-    isDark: isDark
-  })));
+    hue: hue
+  }))));
 });
 NavComponent.displayName = 'Nav';
 NavComponent.propTypes = {

package/dist/esm/elements/nav/NavItem.js

@@ -49,27 +49,23 @@ const NavItem = React__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__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__default.createElement(StyledBrandmarkNavItem, Object.assign({
@@ -81,9 +77,7 @@ const NavItem = React__default.forwardRef((_ref, ref) => {
       ref: ref,
       isExpanded: isExpanded,
       hue: hue,
-      isDark: isDark,
-      isLight: isLight,
-      "aria-current": ariaCurrent
+      "aria-current": isCurrent || undefined
     }, other));
   }
   if (hasList) {

package/dist/esm/elements/nav/NavItemIcon.js

@@ -4,7 +4,7 @@
 * 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 React__default, { Children, isValidElement, cloneElement } from 'react';
+import React__default from 'react';
 import '../../styled/StyledChrome.js';
 import '../../styled/StyledSkipNav.js';
 import '../../styled/StyledSkipNavIcon.js';
@@ -44,23 +44,7 @@ const NavItemIcon = _ref => {
     children,
     ...props
   } = _ref;
-  const element = Children.only(children);
-  if ( isValidElement(element)) {
-    const Icon = _ref2 => {
-      let {
-        theme,
-        ...iconProps
-      } = _ref2;
-      return cloneElement(element, {
-        ...props,
-        ...iconProps
-      });
-    };
-    return React__default.createElement(StyledNavItemIcon, Object.assign({
-      as: Icon
-    }, props));
-  }
-  return null;
+  return React__default.createElement(StyledNavItemIcon, props, children);
 };
 
 export { NavItemIcon };

package/dist/esm/elements/sheet/Sheet.js

@@ -67,7 +67,7 @@ const SheetComponent = React__default.forwardRef((_ref, ref) => {
   const sheetRef = useRef(null);
   const seed = useUIDSeed();
   const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
-  const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.16'}`), [id, seed]);
+  const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.18'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = useMemo(() => ({

package/dist/esm/styled/StyledChrome.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.chrome';
 const StyledChrome = 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: "StyledChrome",
   componentId: "sc-1uqm6u6-0"

package/dist/esm/styled/StyledSkipNav.js

@@ -6,39 +6,67 @@
 */
 import styled, { keyframes, css } from 'styled-components';
 import { math } from 'polished';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
-import { getHeaderHeight } from './header/StyledHeader.js';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { getHeaderHeight } from './utils.js';
 
 const COMPONENT_ID = 'chrome.skipnav';
 const animationStyles = () => {
   const animationName = keyframes(["0%{transform:translate(-50%,-50%);}"]);
   return 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 = theme => {
-  const color = getColorV8('primaryHue', 600, theme);
-  const borderColor = getColorV8('neutralHue', 300, theme);
-  const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, getColorV8('chromeHue', 600, theme, 0.15));
-  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}", ""], borderColor, boxShadow, getColorV8('background', 600 , theme), color, color, focusStyles({
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const boxShadowColor = 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 = getColor({
+    theme,
+    variable: 'foreground.primary'
+  });
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}", ""], borderColor, boxShadow, backgroundColor, foregroundColor, foregroundColor, focusStyles({
     theme,
     inset: true,
     boxShadow
   }));
 };
-const sizeStyles = props => {
-  const top = 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 = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const top = 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 = getLineHeight(padding, fontSize);
-  return css(["top:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, padding, props.theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
+  return css(["top:", ";border:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, border, padding, theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
 };
 const StyledSkipNav = styled.a.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, 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, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSkipNav.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledSkipNavIcon.js

@@ -6,21 +6,27 @@
 */
 import styled, { css } from 'styled-components';
 import SvgLinkStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.skipnav_icon';
-const sizeStyles = theme => {
+const sizeStyles = _ref => {
+  let {
+    theme
+  } = _ref;
   const margin = `${theme.space.base * 2}px`;
   const size = theme.iconSizes.md;
   return css(["margin-", ":", ";width:", ";height:", ";"], theme.rtl ? 'left' : 'right', margin, size, size);
 };
 const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
-})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => getColorV8('neutralHue', 600, props.theme), props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transform:", ";color:", ";", ";", ";"], p => p.theme.rtl && 'scaleX(-1)', p => getColor({
+  theme: p.theme,
+  variable: 'foreground.subtle'
+}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSkipNavIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/body/StyledBody.js

@@ -5,16 +5,19 @@
 * 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 { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.body';
 const StyledBody = 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: "StyledBody",
   componentId: "sc-c7h9kv-0"
-})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColorV8('neutralHue', 100, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColor({
+  theme: props.theme,
+  variable: 'background.default'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledBody.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/body/StyledContent.js

@@ -4,20 +4,32 @@
 * 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, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { getHeaderHeight } from '../header/StyledHeader.js';
-import { getFooterHeight } from '../footer/StyledFooter.js';
+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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
-})(["display:flex;height:", ";line-height:", ";color:", ";font-size:", ";&:focus{outline:none;}", ";"], props => props.hasFooter ? `calc(100% - ${math(`${getHeaderHeight(props)} + ${getFooterHeight(props)}`)})` : `calc(100% - ${getHeaderHeight(props)})`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;color:", ";", ";&:focus{outline:none;}", ";"], props => getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledContent.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/body/StyledMain.js

@@ -5,16 +5,19 @@
 * 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 { 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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
-})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => getColorV8('background', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["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
 };

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

@@ -4,22 +4,43 @@
 * 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 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 getFooterHeight = props => {
-  return `${props.theme.space.base * 20}px`;
+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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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));
+})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledFooter, getFooterHeight };
+export { StyledFooter };

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.footer_item';
 const StyledFooterItem = 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: "StyledFooterItem",
   componentId: "sc-1cktm85-0"

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

@@ -6,30 +6,39 @@
 */
 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 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 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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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));
+})(["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, getHeaderItemSize };
+export { StyledBaseHeaderItem };

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

@@ -4,28 +4,62 @@
 * 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledLogoHeaderItem } from './StyledLogoHeaderItem.js';
-import { getNavItemHeight } from '../nav/StyledBaseNavItem.js';
+import { getHeaderHeight } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.header';
-const getHeaderHeight = props => {
-  return getNavItemHeight(props);
+const colorStyles = _ref => {
+  let {
+    theme,
+    isStandalone
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const boxShadowColor = 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 = 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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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));
+})(["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, getHeaderHeight };
+export { StyledHeader };