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

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/footer/FooterItem.js

@@ -42,6 +42,6 @@ import '../../styled/sheet/StyledSheetHeader.js';
 const FooterItem = React__default.forwardRef((props, ref) => React__default.createElement(StyledFooterItem, Object.assign({
   ref: ref
 }, props)));
-FooterItem.displayName = 'FooterItem';
+FooterItem.displayName = 'Footer.Item';
 
 export { FooterItem };

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

@@ -57,7 +57,7 @@ const HeaderItem = React__default.forwardRef((_ref, ref) => {
     ref: ref
   }, other));
 });
-HeaderItem.displayName = 'HeaderItem';
+HeaderItem.displayName = 'Header.Item';
 HeaderItem.propTypes = {
   maxX: PropTypes.bool,
   maxY: PropTypes.bool,

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,8 @@ 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);
 };
+HeaderItemIcon.displayName = 'Header.ItemIcon';
 
 export { HeaderItemIcon };

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

@@ -43,7 +43,7 @@ import '../../styled/sheet/StyledSheetHeader.js';
 const HeaderItemText = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeaderItemText, Object.assign({
   ref: ref
 }, props)));
-HeaderItemText.displayName = 'HeaderItemText';
+HeaderItemText.displayName = 'Header.ItemText';
 HeaderItemText.propTypes = {
   isClipped: PropTypes.bool
 };

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

@@ -42,6 +42,6 @@ import '../../styled/sheet/StyledSheetHeader.js';
 const HeaderItemWrapper = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeaderItemWrapper, Object.assign({
   ref: ref
 }, props)));
-HeaderItemWrapper.displayName = 'HeaderItemWrapper';
+HeaderItemWrapper.displayName = 'Header.ItemWrapper';
 
 export { HeaderItemWrapper };

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) {
@@ -91,7 +85,7 @@ const NavItem = React__default.forwardRef((_ref, ref) => {
   }
   return retVal;
 });
-NavItem.displayName = 'NavItem';
+NavItem.displayName = 'Nav.Item';
 NavItem.propTypes = {
   product: PropTypes.oneOf(PRODUCTS),
   hasLogo: PropTypes.bool,

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,8 @@ 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);
 };
+NavItemIcon.displayName = 'Nav.ItemIcon';
 
 export { NavItemIcon };

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

@@ -50,7 +50,7 @@ const NavItemText = React__default.forwardRef((props, ref) => {
     isExpanded: isExpanded
   }, props));
 });
-NavItemText.displayName = 'NavItemText';
+NavItemText.displayName = 'Nav.ItemText';
 NavItemText.propTypes = {
   isWrapped: PropTypes.bool
 };

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

@@ -50,6 +50,6 @@ const NavList = React__default.forwardRef((props, ref) => {
     ref: ref
   }, props)));
 });
-NavList.displayName = 'Nav';
+NavList.displayName = 'Nav.List';
 
 export { NavList };

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.9'}`), [id, seed]);
+  const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = useMemo(() => ({
@@ -85,6 +85,7 @@ const SheetComponent = React__default.forwardRef((_ref, ref) => {
   return React__default.createElement(SheetContext.Provider, {
     value: sheetContext
   }, React__default.createElement(StyledSheet, Object.assign({
+    inert: isOpen ? undefined : '',
     isOpen: isOpen,
     isAnimated: isAnimated,
     placement: placement,

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgLinkStroke = function SvgLinkStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/styled/StyledChrome.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.chrome';
 const StyledChrome = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
 })(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledChrome.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledChrome };

package/dist/esm/styled/StyledSkipNav.js

@@ -6,41 +6,59 @@
 */
 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, 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({
+    variable: 'shadow.medium',
+    theme
+  });
+  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.9'
+  'data-garden-version': '9.0.0'
 }).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));
-StyledSkipNav.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["", ";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));
 
 export { StyledSkipNav };

package/dist/esm/styled/StyledSkipNavIcon.js

@@ -6,23 +6,26 @@
 */
 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 } 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.9'
+  'data-garden-version': '9.0.0'
 }).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));
-StyledSkipNavIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["transform:", ";color:", ";", ";", ";"], p => p.theme.rtl && 'scaleX(-1)', p => getColor({
+  theme: p.theme,
+  variable: 'foreground.subtle'
+}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSkipNavIcon };

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

@@ -5,18 +5,18 @@
 * 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 } 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.9'
+  'data-garden-version': '9.0.0'
 }).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));
-StyledBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColor({
+  theme: props.theme,
+  variable: 'background.default'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledBody };

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

@@ -4,22 +4,31 @@
 * 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, 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.9'
+  'data-garden-version': '9.0.0'
 }).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));
-StyledContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledContent };

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

@@ -5,18 +5,18 @@
 * 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 } 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.9'
+  'data-garden-version': '9.0.0'
 }).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));
-StyledMain.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => getColor({
+  theme: props.theme,
+  variable: 'background.default'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledMain };

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

@@ -4,22 +4,40 @@
 * 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';
+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.9'
+  'data-garden-version': '9.0.0'
 }).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
-};
+})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
-export { StyledFooter, getFooterHeight };
+export { StyledFooter };

package/dist/esm/styled/footer/StyledFooterItem.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.footer_item';
 const StyledFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).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 };