@zendeskgarden/react-chrome 9.0.0-next.9 → 9.0.0

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

@@ -5,61 +5,87 @@
 * 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, 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,
+    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 ,
+    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.9',
+  'data-garden-version': '9.0.0',
   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
-};
+})(["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));
 
 export { StyledNavButton };

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

@@ -4,19 +4,23 @@
 * 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 } 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.9'
+  'data-garden-version': '9.0.0'
 }).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
-};
+})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledNavItemIcon };

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

@@ -4,31 +4,33 @@
 * 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, 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.9'
+  'data-garden-version': '9.0.0'
 }).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
-};
+})(["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));
 
 export { StyledNavItemText };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } 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.9'
+  'data-garden-version': '9.0.0'
 }).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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } 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.9'
+  'data-garden-version': '9.0.0'
 }).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

@@ -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 } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet';
-const borderStyle = _ref => {
+const colorStyles = _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];
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = isOpen ? getColor({
+    theme,
+    variable: 'border.default'
+  }) : 'transparent';
+  return css(["border-color:", ";background-color:", ";"], borderColor, backgroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isOpen,
+    placement,
+    size
+  } = _ref2;
+  const width = isOpen ? size : 0;
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
+  const border = isOpen ? theme.borders.sm : 'none';
+  let borderProperty;
+  if (placement === 'start') {
+    borderProperty = `border-${theme.rtl ? 'left' : 'right'}`;
+  } else {
+    borderProperty = `border-${theme.rtl ? 'right' : 'left'}`;
   }
-  return `border${borderSide}: ${theme.borders.sm} ${borderColor};`;
+  return css(["box-sizing:border-box;width:", ";height:100%;", ":", ";line-height:", ";font-size:", ";"], width, borderProperty, border, lineHeight, fontSize);
 };
 const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).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
-};
+})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheet };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } 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.9'
+  'data-garden-version': '9.0.0'
 }).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
-};
+})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheetBody };

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

@@ -5,30 +5,24 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { IconButton } from '@zendeskgarden/react-buttons';
 
 const COMPONENT_ID = 'chrome.sheet_close';
-const BASE_MULTIPLIERS = {
-  top: 2.5,
-  side: 2,
-  size: 10
+const positionStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const top = `${theme.space.base * 2.5}px`;
+  const position = `${theme.space.base * 2}px`;
+  return css(["top:", ";", ":", ";"], top, theme.rtl ? 'left' : 'right', position);
 };
-const colorStyles = props => {
-  const backgroundColor = 'primaryHue';
-  const foregroundColor = 'neutralHue';
-  return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColorV8(foregroundColor, 600, props.theme), getColorV8(backgroundColor, 600, props.theme, 0.08), getColorV8(foregroundColor, 700, props.theme), focusStyles({
-    theme: props.theme
-  }), getColorV8(backgroundColor, 600, props.theme, 0.2), getColorV8(foregroundColor, 800, props.theme));
-};
-const StyledSheetClose = styled.button.attrs({
+const StyledSheetClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
-})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", ";& > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSheetClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["position:absolute;", ";", ";"], positionStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
-export { BASE_MULTIPLIERS, StyledSheetClose };
+export { StyledSheetClose };

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

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_description';
 const StyledSheetDescription = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
-})(["line-height:", ";color:", ";", ";"], props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSheetDescription.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["line-height:", ";color:", ";", ";"], p => getLineHeight(p.theme.space.base * 4, p.theme.fontSizes.md), p => getColor({
+  theme: p.theme,
+  variable: 'foreground.subtle'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheetDescription };

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

@@ -4,19 +4,35 @@
 * 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, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_footer';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.subtle'
+  });
+  return css(["border-top-color:", ";"], borderColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const border = theme.borders.sm;
+  const padding = `${theme.space.base * (isCompact ? 2.5 : 5)}px`;
+  return css(["border-top:", ";padding:", ";"], border, padding);
+};
 const StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
-})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";border-top:", ";padding:", "px;", ";"], props => props.isCompact ? 'center' : 'flex-end', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSheetFooter.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.isCompact ? 'center' : 'flex-end', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheetFooter };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_footer_item';
 const StyledSheetFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
 })(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSheetFooterItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledSheetFooterItem };

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

@@ -4,20 +4,39 @@
 * 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 { BASE_MULTIPLIERS } from './StyledSheetClose.js';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_header';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.subtle'
+  });
+  return css(["border-bottom-color:", ";"], borderColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCloseButtonPresent
+  } = _ref2;
+  const border = theme.borders.sm;
+  let padding = `${theme.space.base * 5}px`;
+  if (isCloseButtonPresent) {
+    const paddingSide = `${theme.space.base * 14}px`;
+    padding = theme.rtl ? `${padding} ${padding} ${padding} ${paddingSide}` : `${padding} ${paddingSide} ${padding} ${padding}`;
+  }
+  return css(["border-bottom:", ";padding:", ";"], border, padding);
+};
 const StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSheetHeader.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheetHeader };

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

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_title';
 const StyledSheetTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
-})(["line-height:", ";color:", ";font-weight:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSheetTitle.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["color:", ";font-weight:", ";", ";"], p => getColor({
+  theme: p.theme,
+  variable: 'foreground.default'
+}), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheetTitle };

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

@@ -4,34 +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 { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_wrapper';
+const transformStyles = _ref => {
+  let {
+    theme,
+    isAnimated,
+    isOpen,
+    placement
+  } = _ref;
+  const transition = isAnimated ? 'transform 250ms ease-in-out' : undefined;
+  let transform;
+  if (isOpen) {
+    transform = 'translateX(0)';
+  } else if (placement === 'start') {
+    transform = `translateX(${theme.rtl ? 100 : -100}%)`;
+  } else {
+    transform = `translateX(${theme.rtl ? -100 : 100}%)`;
+  }
+  return css(["transform:", ";transition:", ";"], transform, transition);
+};
 const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
-})(["display:flex;position:relative;flex-direction:column;transform:", ";transition:", ";min-width:", ";", ";"], props => {
-  const translateValues = [-100, 100];
-  let translation = 'translateX(0%)';
-  if (props.isOpen) {
-    return translation;
-  }
-  if (props.theme.rtl) {
-    translateValues.reverse();
-  }
-  if (props.placement === 'end') {
-    translation = `translateX(${translateValues[1]}%)`;
-  } else if (props.placement === 'start') {
-    translation = `translateX(${translateValues[0]}%)`;
-  }
-  return translation;
-}, props => props.isAnimated && 'transform 250ms ease-in-out', props => props.size, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSheetWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.size, transformStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheetWrapper };

package/dist/esm/styled/utils.js

@@ -0,0 +1,20 @@
+/**
+* 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 { PALETTE } from '@zendeskgarden/react-theming';
+
+const getFooterHeight = theme => `${theme.space.base * 20}px`;
+const getHeaderHeight = theme => `${theme.space.base * 13}px`;
+const getHeaderItemSize = theme => `${theme.space.base * 7.5}px`;
+const getNavItemHeight = theme => getHeaderHeight(theme);
+const getNavWidth = theme => `${theme.space.base * 15}px`;
+const getNavWidthExpanded = () => `200px`;
+const getProductColor = function (product) {
+  let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inherit';
+  return product ? PALETTE.product[product] || fallback : fallback;
+};
+
+export { getFooterHeight, getHeaderHeight, getHeaderItemSize, getNavItemHeight, getNavWidth, getNavWidthExpanded, getProductColor };