@zendeskgarden/react-chrome 9.0.0-next.4 → 9.0.0-next.5

package/dist/index.cjs.js

@@ -64,7 +64,7 @@ const PRODUCTS = ['chat', 'connect', 'explore', 'guide', 'message', 'support', '
 const COMPONENT_ID$A = 'chrome.chrome';
 const StyledChrome = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -76,7 +76,7 @@ StyledChrome.defaultProps = {
 const COMPONENT_ID$z = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -93,7 +93,7 @@ const sizeStyles$4 = props => {
 };
 const StyledBaseHeaderItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -114,7 +114,7 @@ const COMPONENT_ID$x = 'chrome.header_item_text';
 const clippedStyling = styled.css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledHeaderItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
@@ -126,7 +126,7 @@ StyledHeaderItemText.defaultProps = {
 const COMPONENT_ID$w = 'chrome.nav';
 const colorStyles$6 = props => {
   const shade = props.isDark || props.isLight ? 600 : 700;
-  const backgroundColor = reactTheming.getColor(props.hue, shade, props.theme);
+  const backgroundColor = reactTheming.getColorV8(props.hue, shade, props.theme);
   const foregroundColor = props.isLight ? props.theme.palette.black : props.theme.palette.white;
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
@@ -138,7 +138,7 @@ const getExpandedNavWidth = () => {
 };
 const StyledNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -170,12 +170,12 @@ const retrieveProductColor$1 = props => {
 };
 const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
   componentId: "sc-1n1d1yv-0"
-})(["display:none;order:0;margin-right:", ";margin-left:", ";border-", ":", ";border-radius:0;padding:0;width:", ";height:100%;overflow:hidden;fill:", ";text-decoration:none;color:", ";", "{", "}", "{margin:0;width:", ";height:", ";}", ";"], props => props.theme.rtl ? `-${props.theme.space.base}px` : 'auto', props => props.theme.rtl ? 'auto' : `-${props.theme.space.base}px`, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => reactTheming.getColor('chromeHue', 700, props.theme), props => retrieveProductColor$1(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
+})(["display:none;order:0;margin-right:", ";margin-left:", ";border-", ":", ";border-radius:0;padding:0;width:", ";height:100%;overflow:hidden;fill:", ";text-decoration:none;color:", ";", "{", "}", "{margin:0;width:", ";height:", ";}", ";"], props => props.theme.rtl ? `-${props.theme.space.base}px` : 'auto', props => props.theme.rtl ? 'auto' : `-${props.theme.space.base}px`, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => reactTheming.getColorV8('chromeHue', 700, props.theme), props => retrieveProductColor$1(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledLogoHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -191,7 +191,7 @@ const sizeStyles$3 = props => {
 };
 const StyledBaseNavItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -206,11 +206,11 @@ const getHeaderHeight = props => {
 };
 const StyledHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
-})(["display:flex;position:", ";align-items:center;justify-content:flex-end;box-sizing:border-box;border-bottom:", ";box-shadow:", ";background-color:", ";padding:0 ", "px;height:", ";color:", ";font-size:", ";", " ", ";"], props => props.isStandalone && 'relative', props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', reactTheming.getColor('chromeHue', 600, props.theme, 0.15)), props => props.theme.colors.background, props => props.theme.space.base, getHeaderHeight, props => reactTheming.getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isStandalone && `
+})(["display:flex;position:", ";align-items:center;justify-content:flex-end;box-sizing:border-box;border-bottom:", ";box-shadow:", ";background-color:", ";padding:0 ", "px;height:", ";color:", ";font-size:", ";", " ", ";"], props => props.isStandalone && 'relative', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', reactTheming.getColorV8('chromeHue', 600, props.theme, 0.15)), props => props.theme.colors.background, props => props.theme.space.base, getHeaderHeight, props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isStandalone && `
     ${StyledLogoHeaderItem} {
       display: inline-flex;
     }
@@ -225,9 +225,9 @@ const animationStyles = () => {
   return styled.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$5 = theme => {
-  const color = reactTheming.getColor('primaryHue', 600, theme);
-  const borderColor = reactTheming.getColor('neutralHue', 300, theme);
-  const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
+  const color = reactTheming.getColorV8('primaryHue', 600, theme);
+  const borderColor = reactTheming.getColorV8('neutralHue', 300, theme);
+  const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
   return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}", ""], borderColor, boxShadow, theme.colors.background, color, color, reactTheming.focusStyles({
     theme,
     inset: true,
@@ -244,7 +244,7 @@ const sizeStyles$2 = props => {
 };
 const StyledSkipNav = styled__default.default.a.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
@@ -277,11 +277,11 @@ const sizeStyles$1 = theme => {
 };
 const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
-})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => reactTheming.getColor('neutralHue', 600, props.theme), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
+})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledSkipNavIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -289,11 +289,11 @@ StyledSkipNavIcon.defaultProps = {
 const COMPONENT_ID$q = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
-})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColor('neutralHue', 100, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColorV8('neutralHue', 100, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
 StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -304,11 +304,11 @@ const getFooterHeight = props => {
 };
 const StyledFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).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} ${reactTheming.getColor('neutralHue', 300, props.theme)}`, props => props.theme.colors.background, props => props.theme.space.base * 9, getFooterHeight, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
+})(["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} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => props.theme.colors.background, props => props.theme.space.base * 9, getFooterHeight, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -316,7 +316,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$o = 'chrome.content';
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -328,7 +328,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$n = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
@@ -340,11 +340,11 @@ StyledMain.defaultProps = {
 const COMPONENT_ID$m = 'chrome.sidebar';
 const StyledSidebar = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSidebar",
   componentId: "sc-1q77fuw-0"
-})(["flex-shrink:0;order:0;box-sizing:border-box;border-", ":", ";width:330px;overflow:auto;&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 300, props.theme)}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
+})(["flex-shrink:0;order:0;box-sizing:border-box;border-", ":", ";width:330px;overflow:auto;&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledSidebar.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -352,7 +352,7 @@ StyledSidebar.defaultProps = {
 const COMPONENT_ID$l = 'chrome.footer_item';
 const StyledFooterItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -368,14 +368,14 @@ const imgStyles = props => {
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
 })(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &:focus-visible:active,&[data-garden-focus-visible]:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", ";"], props => reactTheming.focusStyles({
   theme: props.theme,
   inset: props.maxY
-}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.getColor('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
+}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.getColorV8('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
     ${StyledHeaderItemIcon} {
       border-radius: 100px;
     }
@@ -387,7 +387,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$j = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -425,7 +425,7 @@ const colorStyles$4 = props => {
 };
 const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -438,7 +438,7 @@ StyledLogoNavItem.defaultProps = {
 const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
 const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -451,7 +451,7 @@ StyledBrandmarkNavItem.defaultProps = {
 const COMPONENT_ID$g = 'chrome.nav_item_icon';
 const StyledNavItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -479,7 +479,7 @@ const colorStyles$3 = props => {
     } else if (isDark) {
       currentColor = polished.rgba(LIGHT, 0.4);
     } else {
-      currentColor = reactTheming.getColor(hue, 500, theme);
+      currentColor = reactTheming.getColorV8(hue, 500, theme);
     }
   } else {
     hoverColor = polished.rgba(isLight ? LIGHT : DARK, 0.1);
@@ -497,7 +497,7 @@ const colorStyles$3 = props => {
 };
 const StyledNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
@@ -514,7 +514,7 @@ StyledNavItem.defaultProps = {
 const COMPONENT_ID$e = 'chrome.nav_item_text';
 const StyledNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -567,7 +567,7 @@ const getSubNavItemHeight = props => {
 };
 const StyledSubNavItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
@@ -584,13 +584,13 @@ const colorStyles$1 = props => {
   } else {
     shade = props.isDark ? 700 : 800;
   }
-  const backgroundColor = reactTheming.getColor(props.hue, shade, props.theme);
+  const backgroundColor = reactTheming.getColorV8(props.hue, shade, props.theme);
   const foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledSubNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -608,7 +608,7 @@ const sizeStyles = props => {
 };
 const StyledSubNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -620,7 +620,7 @@ StyledSubNavItemText.defaultProps = {
 const COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
 const StyledSubNavItemHeader = styled__default.default(StyledSubNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -667,7 +667,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 const StyledSubNavItemIconWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -680,7 +680,7 @@ const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
 const hiddenStyling = styled.css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
 const StyledSubNavPanel = styled__default.default.div.attrs({
   'data-garden-id': PANEL_COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -696,7 +696,7 @@ const borderStyle = _ref => {
     placement,
     isOpen
   } = _ref;
-  const borderColor = isOpen ? reactTheming.getColor('neutralHue', 300, theme) : 'transparent';
+  const borderColor = isOpen ? reactTheming.getColorV8('neutralHue', 300, theme) : 'transparent';
   const borderSides = ['-left', '-right'];
   let borderSide = '';
   if (theme.rtl) {
@@ -711,7 +711,7 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -723,7 +723,7 @@ StyledSheet.defaultProps = {
 const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
 const StyledSheetWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -750,7 +750,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.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -762,11 +762,11 @@ 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.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
-})(["line-height:", ";color:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["line-height:", ";color:", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledSheetDescription.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -774,7 +774,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.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -792,13 +792,13 @@ const BASE_MULTIPLIERS = {
 const colorStyles = props => {
   const backgroundColor = 'primaryHue';
   const foregroundColor = 'neutralHue';
-  return styled.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:", ";}"], reactTheming.getColor(foregroundColor, 600, props.theme), reactTheming.getColor(backgroundColor, 600, props.theme, 0.08), reactTheming.getColor(foregroundColor, 700, props.theme), reactTheming.focusStyles({
+  return styled.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:", ";}"], reactTheming.getColorV8(foregroundColor, 600, props.theme), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.08), reactTheming.getColorV8(foregroundColor, 700, props.theme), reactTheming.focusStyles({
     theme: props.theme
-  }), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, props.theme));
+  }), reactTheming.getColorV8(backgroundColor, 600, props.theme, 0.2), reactTheming.getColorV8(foregroundColor, 800, props.theme));
 };
 const StyledSheetClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -810,11 +810,11 @@ StyledSheetClose.defaultProps = {
 const COMPONENT_ID$2 = 'chrome.sheet_footer';
 const StyledSheetFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).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} ${reactTheming.getColor('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["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} ${reactTheming.getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledSheetFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -822,7 +822,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.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -834,11 +834,11 @@ StyledSheetFooterItem.defaultProps = {
 const COMPONENT_ID = 'chrome.sheet_header';
 const StyledSheetHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${reactTheming.getColor('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 => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${reactTheming.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledSheetHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -1111,7 +1111,7 @@ const Chrome = React__namespace.default.forwardRef((_ref, ref) => {
   const theme = React.useContext(styled.ThemeContext);
   const isLightMemoized = React.useMemo(() => {
     if (hue) {
-      const backgroundColor = reactTheming.getColor(hue, 600, theme);
+      const backgroundColor = reactTheming.getColorV8(hue, 600, theme);
       const LIGHT_COLOR = 'white';
       return polished.readableColor(backgroundColor, LIGHT_COLOR, undefined, false ) === LIGHT_COLOR;
     }
@@ -1429,7 +1429,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.4'}`), [id, seed]);
+  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.5'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = React.useMemo(() => ({

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, useContext, createRef, useState, useEffect, useMemo, createContext, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, keyframes, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, PALETTE, SELECTOR_FOCUS_VISIBLE, focusStyles, useDocument } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColorV8, PALETTE, SELECTOR_FOCUS_VISIBLE, focusStyles, useDocument } from '@zendeskgarden/react-theming';
 import { math, rgba, readableColor } from 'polished';
 import { useAccordion } from '@zendeskgarden/container-accordion';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
@@ -38,7 +38,7 @@ const PRODUCTS = ['chat', 'connect', 'explore', 'guide', 'message', 'support', '
 const COMPONENT_ID$A = 'chrome.chrome';
 const StyledChrome = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -50,7 +50,7 @@ StyledChrome.defaultProps = {
 const COMPONENT_ID$z = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -67,7 +67,7 @@ const sizeStyles$4 = props => {
 };
 const StyledBaseHeaderItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -88,7 +88,7 @@ const COMPONENT_ID$x = 'chrome.header_item_text';
 const clippedStyling = css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledHeaderItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
@@ -100,7 +100,7 @@ StyledHeaderItemText.defaultProps = {
 const COMPONENT_ID$w = 'chrome.nav';
 const colorStyles$6 = props => {
   const shade = props.isDark || props.isLight ? 600 : 700;
-  const backgroundColor = getColor(props.hue, shade, props.theme);
+  const backgroundColor = getColorV8(props.hue, shade, props.theme);
   const foregroundColor = props.isLight ? props.theme.palette.black : props.theme.palette.white;
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
@@ -112,7 +112,7 @@ const getExpandedNavWidth = () => {
 };
 const StyledNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -144,12 +144,12 @@ const retrieveProductColor$1 = props => {
 };
 const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
   componentId: "sc-1n1d1yv-0"
-})(["display:none;order:0;margin-right:", ";margin-left:", ";border-", ":", ";border-radius:0;padding:0;width:", ";height:100%;overflow:hidden;fill:", ";text-decoration:none;color:", ";", "{", "}", "{margin:0;width:", ";height:", ";}", ";"], props => props.theme.rtl ? `-${props.theme.space.base}px` : 'auto', props => props.theme.rtl ? 'auto' : `-${props.theme.space.base}px`, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${getColor('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => getColor('chromeHue', 700, props.theme), props => retrieveProductColor$1(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => retrieveComponentStyles(COMPONENT_ID$v, props));
+})(["display:none;order:0;margin-right:", ";margin-left:", ";border-", ":", ";border-radius:0;padding:0;width:", ";height:100%;overflow:hidden;fill:", ";text-decoration:none;color:", ";", "{", "}", "{margin:0;width:", ";height:", ";}", ";"], props => props.theme.rtl ? `-${props.theme.space.base}px` : 'auto', props => props.theme.rtl ? 'auto' : `-${props.theme.space.base}px`, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`, props => getNavWidth(props), props => getColorV8('chromeHue', 700, props.theme), props => retrieveProductColor$1(props), StyledHeaderItemText, clippedStyling, StyledHeaderItemIcon, props => props.theme.iconSizes.lg, props => props.theme.iconSizes.lg, props => retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledLogoHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -165,7 +165,7 @@ const sizeStyles$3 = props => {
 };
 const StyledBaseNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -180,11 +180,11 @@ const getHeaderHeight = props => {
 };
 const StyledHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
-})(["display:flex;position:", ";align-items:center;justify-content:flex-end;box-sizing:border-box;border-bottom:", ";box-shadow:", ";background-color:", ";padding:0 ", "px;height:", ";color:", ";font-size:", ";", " ", ";"], props => props.isStandalone && 'relative', props => `${props.theme.borders.sm} ${getColor('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', getColor('chromeHue', 600, props.theme, 0.15)), props => props.theme.colors.background, props => props.theme.space.base, getHeaderHeight, props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isStandalone && `
+})(["display:flex;position:", ";align-items:center;justify-content:flex-end;box-sizing:border-box;border-bottom:", ";box-shadow:", ";background-color:", ";padding:0 ", "px;height:", ";color:", ";font-size:", ";", " ", ";"], props => props.isStandalone && 'relative', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`, props => props.isStandalone && props.theme.shadows.lg('0', '10px', getColorV8('chromeHue', 600, props.theme, 0.15)), props => props.theme.colors.background, props => props.theme.space.base, getHeaderHeight, props => getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isStandalone && `
     ${StyledLogoHeaderItem} {
       display: inline-flex;
     }
@@ -199,9 +199,9 @@ const animationStyles = () => {
   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$5 = theme => {
-  const color = getColor('primaryHue', 600, theme);
-  const borderColor = getColor('neutralHue', 300, theme);
-  const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, getColor('chromeHue', 600, theme, 0.15));
+  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, theme.colors.background, color, color, focusStyles({
     theme,
     inset: true,
@@ -218,7 +218,7 @@ const sizeStyles$2 = props => {
 };
 const StyledSkipNav = styled.a.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
@@ -251,11 +251,11 @@ const sizeStyles$1 = theme => {
 };
 const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
-})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => getColor('neutralHue', 600, props.theme), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$r, props));
+})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => getColorV8('neutralHue', 600, props.theme), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledSkipNavIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -263,11 +263,11 @@ StyledSkipNavIcon.defaultProps = {
 const COMPONENT_ID$q = 'chrome.body';
 const StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
-})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColor('neutralHue', 100, props.theme), props => retrieveComponentStyles(COMPONENT_ID$q, props));
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColorV8('neutralHue', 100, props.theme), props => retrieveComponentStyles(COMPONENT_ID$q, props));
 StyledBody.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -278,11 +278,11 @@ const getFooterHeight = props => {
 };
 const StyledFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).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} ${getColor('neutralHue', 300, props.theme)}`, props => props.theme.colors.background, props => props.theme.space.base * 9, getFooterHeight, props => retrieveComponentStyles(COMPONENT_ID$p, props));
+})(["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 => props.theme.colors.background, props => props.theme.space.base * 9, getFooterHeight, props => retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -290,7 +290,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$o = 'chrome.content';
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -302,7 +302,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$n = 'chrome.main';
 const StyledMain = styled.main.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
@@ -314,11 +314,11 @@ StyledMain.defaultProps = {
 const COMPONENT_ID$m = 'chrome.sidebar';
 const StyledSidebar = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSidebar",
   componentId: "sc-1q77fuw-0"
-})(["flex-shrink:0;order:0;box-sizing:border-box;border-", ":", ";width:330px;overflow:auto;&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${getColor('neutralHue', 300, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$m, props));
+})(["flex-shrink:0;order:0;box-sizing:border-box;border-", ":", ";width:330px;overflow:auto;&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledSidebar.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -326,7 +326,7 @@ StyledSidebar.defaultProps = {
 const COMPONENT_ID$l = 'chrome.footer_item';
 const StyledFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -342,14 +342,14 @@ const imgStyles = props => {
 };
 const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
 })(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &:focus-visible:active,&[data-garden-focus-visible]:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", ";"], props => focusStyles({
   theme: props.theme,
   inset: props.maxY
-}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => getColor('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
+}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => getColorV8('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
     ${StyledHeaderItemIcon} {
       border-radius: 100px;
     }
@@ -361,7 +361,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$j = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -399,7 +399,7 @@ const colorStyles$4 = props => {
 };
 const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -412,7 +412,7 @@ StyledLogoNavItem.defaultProps = {
 const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
 const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -425,7 +425,7 @@ StyledBrandmarkNavItem.defaultProps = {
 const COMPONENT_ID$g = 'chrome.nav_item_icon';
 const StyledNavItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -453,7 +453,7 @@ const colorStyles$3 = props => {
     } else if (isDark) {
       currentColor = rgba(LIGHT, 0.4);
     } else {
-      currentColor = getColor(hue, 500, theme);
+      currentColor = getColorV8(hue, 500, theme);
     }
   } else {
     hoverColor = rgba(isLight ? LIGHT : DARK, 0.1);
@@ -471,7 +471,7 @@ const colorStyles$3 = props => {
 };
 const StyledNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
@@ -488,7 +488,7 @@ StyledNavItem.defaultProps = {
 const COMPONENT_ID$e = 'chrome.nav_item_text';
 const StyledNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -541,7 +541,7 @@ const getSubNavItemHeight = props => {
 };
 const StyledSubNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
@@ -558,13 +558,13 @@ const colorStyles$1 = props => {
   } else {
     shade = props.isDark ? 700 : 800;
   }
-  const backgroundColor = getColor(props.hue, shade, props.theme);
+  const backgroundColor = getColorV8(props.hue, shade, props.theme);
   const foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledSubNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -582,7 +582,7 @@ const sizeStyles = props => {
 };
 const StyledSubNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -594,7 +594,7 @@ StyledSubNavItemText.defaultProps = {
 const COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
 const StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -641,7 +641,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 const StyledSubNavItemIconWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -654,7 +654,7 @@ const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
 const hiddenStyling = css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
 const StyledSubNavPanel = styled.div.attrs({
   'data-garden-id': PANEL_COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -670,7 +670,7 @@ const borderStyle = _ref => {
     placement,
     isOpen
   } = _ref;
-  const borderColor = isOpen ? getColor('neutralHue', 300, theme) : 'transparent';
+  const borderColor = isOpen ? getColorV8('neutralHue', 300, theme) : 'transparent';
   const borderSides = ['-left', '-right'];
   let borderSide = '';
   if (theme.rtl) {
@@ -685,7 +685,7 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -697,7 +697,7 @@ StyledSheet.defaultProps = {
 const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
 const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -724,7 +724,7 @@ StyledSheetWrapper.defaultProps = {
 const COMPONENT_ID$6 = 'chrome.sheet_title';
 const StyledSheetTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -736,11 +736,11 @@ StyledSheetTitle.defaultProps = {
 const COMPONENT_ID$5 = 'chrome.sheet_description';
 const StyledSheetDescription = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
-})(["line-height:", ";color:", ";", ";"], props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["line-height:", ";color:", ";", ";"], props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledSheetDescription.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -748,7 +748,7 @@ StyledSheetDescription.defaultProps = {
 const COMPONENT_ID$4 = 'chrome.sheet_body';
 const StyledSheetBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -766,13 +766,13 @@ const BASE_MULTIPLIERS = {
 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:", ";}"], getColor(foregroundColor, 600, props.theme), getColor(backgroundColor, 600, props.theme, 0.08), getColor(foregroundColor, 700, props.theme), focusStyles({
+  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
-  }), getColor(backgroundColor, 600, props.theme, 0.2), getColor(foregroundColor, 800, props.theme));
+  }), getColorV8(backgroundColor, 600, props.theme, 0.2), getColorV8(foregroundColor, 800, props.theme));
 };
 const StyledSheetClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -784,11 +784,11 @@ StyledSheetClose.defaultProps = {
 const COMPONENT_ID$2 = 'chrome.sheet_footer';
 const StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).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} ${getColor('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["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$2, props));
 StyledSheetFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -796,7 +796,7 @@ StyledSheetFooter.defaultProps = {
 const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
 const StyledSheetFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -808,11 +808,11 @@ StyledSheetFooterItem.defaultProps = {
 const COMPONENT_ID = 'chrome.sheet_header';
 const StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${getColor('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));
+})(["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
 };
@@ -1085,7 +1085,7 @@ const Chrome = React__default.forwardRef((_ref, ref) => {
   const theme = useContext(ThemeContext);
   const isLightMemoized = useMemo(() => {
     if (hue) {
-      const backgroundColor = getColor(hue, 600, theme);
+      const backgroundColor = getColorV8(hue, 600, theme);
       const LIGHT_COLOR = 'white';
       return readableColor(backgroundColor, LIGHT_COLOR, undefined, false ) === LIGHT_COLOR;
     }
@@ -1403,7 +1403,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.4'}`), [id, seed]);
+  const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.5'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = useMemo(() => ({

package/dist/typings/elements/footer/FooterItem.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Footer.Item` instead
+ *
  * @extends HTMLAttributes<HTMLElement>
  */
 export declare const FooterItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeaderItemProps } from '../../types';
 /**
+ * @deprecated use `Header.Item` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const HeaderItem: React.ForwardRefExoticComponent<IHeaderItemProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -6,6 +6,8 @@
  */
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
 /**
+ * @deprecated use `Header.ItemIcon` instead
+ *
  * @extends HTMLAttributes<HTMLElement>
  */
 export declare const HeaderItemIcon: ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => React.JSX.Element | null;

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

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeaderItemTextProps } from '../../types';
 /**
+ * @deprecated use `Header.ItemText` instead
+ *
  * @extends HTMLAttributes<HTMLSpanElement>
  */
 export declare const HeaderItemText: React.ForwardRefExoticComponent<IHeaderItemTextProps & React.RefAttributes<HTMLElement>>;

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

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeaderItemWrapperProps } from '../../types';
 /**
+ * @deprecated use `Header.ItemWrapper` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const HeaderItemWrapper: React.ForwardRefExoticComponent<IHeaderItemWrapperProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -7,6 +7,8 @@
 import React from 'react';
 import { INavItemProps } from '../../types';
 /**
+ * @deprecated use `Nav.Item` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const NavItem: React.ForwardRefExoticComponent<INavItemProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -6,6 +6,8 @@
  */
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
 /**
+ * @deprecated use `Nav.ItemIcon` instead
+ *
  * @extends HTMLAttributes<HTMLElement>
  */
 export declare const NavItemIcon: ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => React.JSX.Element | null;

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

@@ -7,6 +7,8 @@
 import React from 'react';
 import { INavItemTextProps } from '../../types';
 /**
+ * @deprecated use `Nav.ItemText` instead
+ *
  * @extends HTMLAttributes<HTMLSpanElement>
  */
 export declare const NavItemText: React.ForwardRefExoticComponent<INavItemTextProps & React.RefAttributes<HTMLElement>>;

package/dist/typings/elements/subnav/CollapsibleSubNavItem.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ICollapsibleSubNavItemProps } from '../../types';
 /**
+ * @deprecated use `SubNav.CollapsibleItem` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const CollapsibleSubNavItem: React.ForwardRefExoticComponent<ICollapsibleSubNavItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/subnav/SubNavItem.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ISubNavItemProps } from '../../types';
 /**
+ * @deprecated use `SubNav.Item` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const SubNavItem: React.ForwardRefExoticComponent<ISubNavItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/subnav/SubNavItemText.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ISubNavItemTextProps } from '../../types';
 /**
+ * @deprecated use `SubNav.ItemText` instead
+ *
  * @extends HTMLAttributes<HTMLSpanElement>
  */
 export declare const SubNavItemText: React.ForwardRefExoticComponent<ISubNavItemTextProps & React.RefAttributes<HTMLElement>>;

package/dist/typings/index.d.ts

@@ -4,27 +4,16 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/** @deprecated use `Header.Item` instead */
 export { HeaderItem } from './elements/header/HeaderItem';
-/** @deprecated use `Header.ItemIcon` instead */
 export { HeaderItemIcon } from './elements/header/HeaderItemIcon';
-/** @deprecated use `Header.ItemText` instead */
 export { HeaderItemText } from './elements/header/HeaderItemText';
-/** @deprecated use `Header.ItemWrapper` instead */
 export { HeaderItemWrapper } from './elements/header/HeaderItemWrapper';
-/** @deprecated use `Footer.Item` instead */
 export { FooterItem } from './elements/footer/FooterItem';
-/** @deprecated use `Nav.Item` instead */
 export { NavItem } from './elements/nav/NavItem';
-/** @deprecated use `Nav.ItemIcon` instead */
 export { NavItemIcon } from './elements/nav/NavItemIcon';
-/** @deprecated use `Nav.ItemText` instead */
 export { NavItemText } from './elements/nav/NavItemText';
-/** @deprecated use `SubNav.Item` instead */
 export { SubNavItem } from './elements/subnav/SubNavItem';
-/** @deprecated use `SubNav.ItemText` instead */
 export { SubNavItemText } from './elements/subnav/SubNavItemText';
-/** @deprecated use `SubNav.CollapsibleItem` instead */
 export { CollapsibleSubNavItem } from './elements/subnav/CollapsibleSubNavItem';
 export { Chrome } from './elements/Chrome';
 export { SkipNav } from './elements/SkipNav';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-chrome",
-  "version": "9.0.0-next.4",
+  "version": "9.0.0-next.5",
   "description": "Components relating to Chrome within the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -32,10 +32,10 @@
     "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.4",
+    "@zendeskgarden/react-theming": "^9.0.0-next.5",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
+  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
 }