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

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

@@ -46,5 +46,6 @@ const HeaderItemIcon = _ref => {
   } = _ref;
   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/NavItem.js

@@ -85,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

@@ -46,5 +46,6 @@ const NavItemIcon = _ref => {
   } = _ref;
   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.20'}`), [id, seed]);
+  const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.22'}`), [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.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"

package/dist/esm/styled/StyledSkipNav.js

@@ -55,7 +55,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledSkipNav = styled.a.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"

package/dist/esm/styled/StyledSkipNavIcon.js

@@ -19,7 +19,7 @@ const sizeStyles = _ref => {
 };
 const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"

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

@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden
 const COMPONENT_ID = 'chrome.body';
 const StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"

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

@@ -22,7 +22,7 @@ const sizeStyles = _ref => {
 };
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"

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

@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden
 const COMPONENT_ID = 'chrome.main';
 const StyledMain = styled.main.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"

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

@@ -34,7 +34,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"

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.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"

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

@@ -32,7 +32,7 @@ const sizeStyles = _ref => {
 };
 const StyledBaseHeaderItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"

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

@@ -46,7 +46,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"

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

@@ -57,7 +57,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"

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

@@ -18,7 +18,7 @@ const sizeStyles = _ref => {
 };
 const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"

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

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.header_item_text';
 const StyledHeaderItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"

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

@@ -11,7 +11,7 @@ import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
 const COMPONENT_ID = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20',
+  'data-garden-version': '9.0.0-next.22',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",

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

@@ -42,7 +42,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20',
+  'data-garden-version': '9.0.0-next.22',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",

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

@@ -21,7 +21,7 @@ const sizeStyles = _ref => {
 };
 const StyledBaseNavItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"

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

@@ -11,7 +11,7 @@ import { StyledBaseNavItem } from './StyledBaseNavItem.js';
 const COMPONENT_ID = 'chrome.brandmark_nav_list_item';
 const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
   componentId: "sc-8kynd4-0"

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

@@ -25,7 +25,7 @@ const colorStyles = _ref => {
 };
 const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"

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

@@ -42,7 +42,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"

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

@@ -81,7 +81,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledNavButton = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20',
+  'data-garden-version': '9.0.0-next.22',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavButton",

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

@@ -17,7 +17,7 @@ const sizeStyles = _ref => {
 };
 const StyledNavItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"

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

@@ -27,7 +27,7 @@ const sizeStyles = _ref => {
 };
 const StyledNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.nav_list';
 const StyledNavList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNavList",
   componentId: "sc-1s0nkfb-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.nav_list_item';
 const StyledNavListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNavListItem",
   componentId: "sc-18cj2v7-0"

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

@@ -44,7 +44,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.sheet_body';
 const StyledSheetBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"

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

@@ -19,7 +19,7 @@ const positionStyles = _ref => {
 };
 const StyledSheetClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"

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

@@ -10,7 +10,7 @@ import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from
 const COMPONENT_ID = 'chrome.sheet_description';
 const StyledSheetDescription = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"

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

@@ -29,7 +29,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.sheet_footer_item';
 const StyledSheetFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"

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

@@ -33,7 +33,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"

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

@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden
 const COMPONENT_ID = 'chrome.sheet_title';
 const StyledSheetTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"

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

@@ -28,7 +28,7 @@ const transformStyles = _ref => {
 };
 const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"

package/dist/index.cjs.js

@@ -47,7 +47,7 @@ const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'];
 const COMPONENT_ID$w = 'chrome.chrome';
 const StyledChrome = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -113,7 +113,7 @@ const sizeStyles$g = _ref2 => {
 };
 const StyledSkipNav = styled__default.default.a.attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
@@ -149,7 +149,7 @@ const sizeStyles$f = _ref => {
 };
 const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
@@ -164,7 +164,7 @@ StyledSkipNavIcon.defaultProps = {
 const COMPONENT_ID$t = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
@@ -189,7 +189,7 @@ const sizeStyles$e = _ref => {
 };
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -204,7 +204,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$r = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
@@ -242,7 +242,7 @@ const sizeStyles$d = _ref2 => {
 };
 const StyledFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
@@ -254,7 +254,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$p = 'chrome.footer_item';
 const StyledFooterItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -274,7 +274,7 @@ const sizeStyles$c = _ref => {
 };
 const StyledHeaderItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -307,7 +307,7 @@ const sizeStyles$b = _ref => {
 };
 const StyledBaseHeaderItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -319,7 +319,7 @@ StyledBaseHeaderItem.defaultProps = {
 const COMPONENT_ID$m = 'chrome.header_item_text';
 const StyledHeaderItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
@@ -358,7 +358,7 @@ const sizeStyles$a = _ref2 => {
 };
 const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.20',
+  'data-garden-version': '9.0.0-next.22',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
@@ -405,7 +405,7 @@ const sizeStyles$9 = _ref2 => {
 };
 const StyledHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
@@ -459,7 +459,7 @@ const sizeStyles$8 = _ref2 => {
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
@@ -471,7 +471,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$i = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.20',
+  'data-garden-version': '9.0.0-next.22',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -515,7 +515,7 @@ const sizeStyles$7 = _ref2 => {
 };
 const StyledNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -527,7 +527,7 @@ StyledNav.defaultProps = {
 const COMPONENT_ID$g = 'chrome.nav_list';
 const StyledNavList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNavList",
   componentId: "sc-1s0nkfb-0"
@@ -539,7 +539,7 @@ StyledNavList.defaultProps = {
 const COMPONENT_ID$f = 'chrome.nav_list_item';
 const StyledNavListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNavListItem",
   componentId: "sc-18cj2v7-0"
@@ -560,7 +560,7 @@ const sizeStyles$6 = _ref => {
 };
 const StyledBaseNavItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -585,7 +585,7 @@ const colorStyles$4 = _ref => {
 };
 const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"
@@ -597,7 +597,7 @@ StyledLogoNavItem.defaultProps = {
 const COMPONENT_ID$c = 'chrome.brandmark_nav_list_item';
 const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
   componentId: "sc-8kynd4-0"
@@ -616,7 +616,7 @@ const sizeStyles$5 = _ref => {
 };
 const StyledNavItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -695,7 +695,7 @@ const sizeStyles$4 = _ref2 => {
 };
 const StyledNavButton = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.20',
+  'data-garden-version': '9.0.0-next.22',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavButton",
@@ -722,7 +722,7 @@ const sizeStyles$3 = _ref => {
 };
 const StyledNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -768,7 +768,7 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -798,7 +798,7 @@ const transformStyles = _ref => {
 };
 const StyledSheetWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -810,7 +810,7 @@ StyledSheetWrapper.defaultProps = {
 const COMPONENT_ID$6 = 'chrome.sheet_title';
 const StyledSheetTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -825,7 +825,7 @@ StyledSheetTitle.defaultProps = {
 const COMPONENT_ID$5 = 'chrome.sheet_description';
 const StyledSheetDescription = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -840,7 +840,7 @@ StyledSheetDescription.defaultProps = {
 const COMPONENT_ID$4 = 'chrome.sheet_body';
 const StyledSheetBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -860,7 +860,7 @@ const positionStyles = _ref => {
 };
 const StyledSheetClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -891,7 +891,7 @@ const sizeStyles$1 = _ref2 => {
 };
 const StyledSheetFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
@@ -903,7 +903,7 @@ StyledSheetFooter.defaultProps = {
 const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
 const StyledSheetFooterItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -938,7 +938,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheetHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
@@ -963,7 +963,7 @@ const HeaderItem = React__namespace.default.forwardRef((_ref, ref) => {
     ref: ref
   }, other));
 });
-HeaderItem.displayName = 'HeaderItem';
+HeaderItem.displayName = 'Header.Item';
 HeaderItem.propTypes = {
   maxX: PropTypes__default.default.bool,
   maxY: PropTypes__default.default.bool,
@@ -979,11 +979,12 @@ const HeaderItemIcon = _ref => {
   } = _ref;
   return React__namespace.default.createElement(StyledHeaderItemIcon, props, children);
 };
+HeaderItemIcon.displayName = 'Header.ItemIcon';
 
 const HeaderItemText = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeaderItemText, Object.assign({
   ref: ref
 }, props)));
-HeaderItemText.displayName = 'HeaderItemText';
+HeaderItemText.displayName = 'Header.ItemText';
 HeaderItemText.propTypes = {
   isClipped: PropTypes__default.default.bool
 };
@@ -991,12 +992,12 @@ HeaderItemText.propTypes = {
 const HeaderItemWrapper = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeaderItemWrapper, Object.assign({
   ref: ref
 }, props)));
-HeaderItemWrapper.displayName = 'HeaderItemWrapper';
+HeaderItemWrapper.displayName = 'Header.ItemWrapper';
 
 const FooterItem$1 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledFooterItem, Object.assign({
   ref: ref
 }, props)));
-FooterItem$1.displayName = 'FooterItem';
+FooterItem$1.displayName = 'Footer.Item';
 
 const NavContext = React__namespace.default.createContext({
   isExpanded: false
@@ -1058,7 +1059,7 @@ const NavItem = React__namespace.default.forwardRef((_ref, ref) => {
   }
   return retVal;
 });
-NavItem.displayName = 'NavItem';
+NavItem.displayName = 'Nav.Item';
 NavItem.propTypes = {
   product: PropTypes__default.default.oneOf(PRODUCTS),
   hasLogo: PropTypes__default.default.bool,
@@ -1072,6 +1073,7 @@ const NavItemIcon = _ref => {
   } = _ref;
   return React__namespace.default.createElement(StyledNavItemIcon, props, children);
 };
+NavItemIcon.displayName = 'Nav.ItemIcon';
 
 const NavItemText = React__namespace.default.forwardRef((props, ref) => {
   const {
@@ -1082,7 +1084,7 @@ const NavItemText = React__namespace.default.forwardRef((props, ref) => {
     isExpanded: isExpanded
   }, props));
 });
-NavItemText.displayName = 'NavItemText';
+NavItemText.displayName = 'Nav.ItemText';
 NavItemText.propTypes = {
   isWrapped: PropTypes__default.default.bool
 };
@@ -1238,7 +1240,7 @@ const NavList = React__namespace.default.forwardRef((props, ref) => {
     ref: ref
   }, props)));
 });
-NavList.displayName = 'Nav';
+NavList.displayName = 'Nav.List';
 
 const NavComponent = React__namespace.default.forwardRef((props, ref) => {
   const {
@@ -1418,7 +1420,7 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
   const sheetRef = React.useRef(null);
   const seed = reactUid.useUIDSeed();
   const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
-  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.20'}`), [id, seed]);
+  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.22'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = React.useMemo(() => ({

package/dist/typings/elements/header/HeaderItemIcon.d.ts

@@ -10,4 +10,7 @@ import React, { PropsWithChildren, SVGAttributes } from 'react';
  *
  * @extends SVGAttributes<SVGElement>
  */
-export declare const HeaderItemIcon: ({ children, ...props }: PropsWithChildren<SVGAttributes<SVGElement>>) => React.JSX.Element;
+export declare const HeaderItemIcon: {
+    ({ children, ...props }: PropsWithChildren<SVGAttributes<SVGElement>>): React.JSX.Element;
+    displayName: string;
+};

package/dist/typings/elements/nav/NavItemIcon.d.ts

@@ -10,4 +10,7 @@ import React, { SVGAttributes, PropsWithChildren } from 'react';
  *
  * @extends SVGAttributes<SVGElement>
  */
-export declare const NavItemIcon: ({ children, ...props }: PropsWithChildren<SVGAttributes<SVGElement>>) => React.JSX.Element;
+export declare const NavItemIcon: {
+    ({ children, ...props }: PropsWithChildren<SVGAttributes<SVGElement>>): React.JSX.Element;
+    displayName: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-chrome",
-  "version": "9.0.0-next.20",
+  "version": "9.0.0-next.22",
   "description": "Components relating to Chrome within the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/react-buttons": "^9.0.0-next.20",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.22",
     "dom-helpers": "^5.2.1",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
@@ -34,7 +34,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.20",
+    "@zendeskgarden/react-theming": "^9.0.0-next.22",
     "@zendeskgarden/svg-icons": "7.1.1"
   },
   "keywords": [
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
+  "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
 }