@zendeskgarden/react-chrome 9.0.0-next.9 → 9.1.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/SkipNav.js

@@ -49,7 +49,7 @@ const SkipNav = React__default.forwardRef((_ref, ref) => {
   } = _ref;
   return React__default.createElement(StyledSkipNav, Object.assign({
     href: `#${targetId}`,
-    zIndex: zIndex,
+    $zIndex: zIndex,
     ref: ref
   }, props), React__default.createElement(StyledSkipNavIcon, null), children);
 });

package/dist/esm/elements/body/Content.js

@@ -46,7 +46,7 @@ const Content = React__default.forwardRef((props, ref) => {
   } = useBodyContext() || {};
   return React__default.createElement(StyledContent, Object.assign({
     ref: ref,
-    hasFooter: hasFooter
+    $hasFooter: hasFooter
   }, props));
 });
 Content.displayName = 'Content';

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/Header.js

@@ -44,9 +44,16 @@ import { HeaderItemIcon } from './HeaderItemIcon.js';
 import { HeaderItemText } from './HeaderItemText.js';
 import { HeaderItemWrapper } from './HeaderItemWrapper.js';
 
-const HeaderComponent = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeader, Object.assign({
-  ref: ref
-}, props)));
+const HeaderComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    isStandalone,
+    ...other
+  } = _ref;
+  return React__default.createElement(StyledHeader, Object.assign({
+    ref: ref,
+    $isStandalone: isStandalone
+  }, other));
+});
 HeaderComponent.displayName = 'Header';
 HeaderComponent.propTypes = {
   isStandalone: PropTypes.bool

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

@@ -44,20 +44,29 @@ import '../../styled/sheet/StyledSheetHeader.js';
 const HeaderItem = React__default.forwardRef((_ref, ref) => {
   let {
     hasLogo,
+    isRound,
+    maxX,
+    maxY,
     product,
     ...other
   } = _ref;
   if (hasLogo) {
     return React__default.createElement(StyledLogoHeaderItem, Object.assign({
       ref: ref,
-      product: product
+      $isRound: isRound,
+      $maxX: maxX,
+      $maxY: maxY,
+      $product: product
     }, other));
   }
   return React__default.createElement(StyledHeaderItem, Object.assign({
-    ref: ref
+    ref: ref,
+    $isRound: isRound,
+    $maxX: maxX,
+    $maxY: maxY
   }, 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

@@ -40,10 +40,17 @@ import '../../styled/sheet/StyledSheetFooter.js';
 import '../../styled/sheet/StyledSheetFooterItem.js';
 import '../../styled/sheet/StyledSheetHeader.js';
 
-const HeaderItemText = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeaderItemText, Object.assign({
-  ref: ref
-}, props)));
-HeaderItemText.displayName = 'HeaderItemText';
+const HeaderItemText = React__default.forwardRef((_ref, ref) => {
+  let {
+    isClipped,
+    ...other
+  } = _ref;
+  return React__default.createElement(StyledHeaderItemText, Object.assign({
+    ref: ref,
+    $isClipped: isClipped
+  }, other));
+});
+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';
@@ -46,24 +47,33 @@ import { NavItemIcon } from './NavItemIcon.js';
 import { NavItemText } from './NavItemText.js';
 import { NavList } from './NavList.js';
 
-const NavComponent = React__default.forwardRef((props, ref) => {
+const NavComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    isExpanded,
+    ...other
+  } = _ref;
   const {
     hue,
-    isLight,
-    isDark
+    isLight
   } = useChromeContext();
   const navContextValue = useMemo(() => ({
-    isExpanded: !!props.isExpanded
-  }), [props.isExpanded]);
-  return React__default.createElement(NavContext.Provider, {
+    isExpanded: !!isExpanded
+  }), [isExpanded]);
+  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
-  })));
+    ref: ref,
+    $isExpanded: isExpanded,
+    $hue: hue
+  }, other))));
 });
 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({
@@ -79,11 +75,9 @@ const NavItem = React__default.forwardRef((_ref, ref) => {
     retVal = React__default.createElement(StyledNavButton, Object.assign({
       tabIndex: 0,
       ref: ref,
-      isExpanded: isExpanded,
-      hue: hue,
-      isDark: isDark,
-      isLight: isLight,
-      "aria-current": ariaCurrent
+      $isExpanded: isExpanded,
+      $hue: hue,
+      "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

@@ -41,16 +41,21 @@ import '../../styled/sheet/StyledSheetFooterItem.js';
 import '../../styled/sheet/StyledSheetHeader.js';
 import { useNavContext } from '../../utils/useNavContext.js';
 
-const NavItemText = React__default.forwardRef((props, ref) => {
+const NavItemText = React__default.forwardRef((_ref, ref) => {
+  let {
+    isWrapped,
+    ...other
+  } = _ref;
   const {
     isExpanded
   } = useNavContext();
   return React__default.createElement(StyledNavItemText, Object.assign({
     ref: ref,
-    isExpanded: isExpanded
-  }, props));
+    $isExpanded: isExpanded,
+    $isWrapped: isWrapped
+  }, other));
 });
-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.1.0'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = useMemo(() => ({
@@ -85,20 +85,21 @@ const SheetComponent = React__default.forwardRef((_ref, ref) => {
   return React__default.createElement(SheetContext.Provider, {
     value: sheetContext
   }, React__default.createElement(StyledSheet, Object.assign({
-    isOpen: isOpen,
-    isAnimated: isAnimated,
-    placement: placement,
-    size: size,
+    inert: isOpen ? undefined : '',
+    $isOpen: isOpen,
+    $isAnimated: isAnimated,
+    $placement: placement,
+    $size: size,
     tabIndex: -1,
     id: idPrefix,
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId,
     ref: mergeRefs([sheetRef, ref])
   }, props), React__default.createElement(StyledSheetWrapper, {
-    isOpen: isOpen,
-    isAnimated: isAnimated,
-    placement: placement,
-    size: size
+    $isOpen: isOpen,
+    $isAnimated: isAnimated,
+    $placement: placement,
+    $size: size
   }, children)));
 });
 SheetComponent.displayName = 'Sheet';

package/dist/esm/elements/sheet/components/Footer.js

@@ -39,10 +39,15 @@ import { StyledSheetFooter } from '../../../styled/sheet/StyledSheetFooter.js';
 import '../../../styled/sheet/StyledSheetFooterItem.js';
 import '../../../styled/sheet/StyledSheetHeader.js';
 
-const SheetFooter = forwardRef((props, ref) => {
+const SheetFooter = forwardRef((_ref, ref) => {
+  let {
+    isCompact,
+    ...other
+  } = _ref;
   return React__default.createElement(StyledSheetFooter, Object.assign({
-    ref: ref
-  }, props));
+    ref: ref,
+    $isCompact: isCompact
+  }, other));
 });
 SheetFooter.displayName = 'Sheet.Footer';
 const Footer = SheetFooter;

package/dist/esm/elements/sheet/components/Header.js

@@ -46,7 +46,7 @@ const SheetHeader = forwardRef((props, ref) => {
   } = useSheetContext();
   return React__default.createElement(StyledSheetHeader, Object.assign({
     ref: ref,
-    isCloseButtonPresent: isCloseButtonPresent
+    $isCloseButtonPresent: isCloseButtonPresent
   }, props));
 });
 SheetHeader.displayName = 'Sheet.Header';

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.1.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.1.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.1.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.1.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 };