npm - @zendeskgarden/react-chrome - Versions diffs - 9.0.0-next.6 → 9.0.0-next.7 - Mend

@zendeskgarden/react-chrome 9.0.0-next.6 → 9.0.0-next.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs.js +80 -98
package/dist/index.esm.js +81 -98
package/dist/typings/index.d.ts +0 -1
package/dist/typings/styled/index.d.ts +0 -1
package/package.json +4 -4
package/dist/typings/elements/body/Sidebar.d.ts +0 -11
package/dist/typings/styled/body/StyledSidebar.d.ts +0 -10

package/dist/index.cjs.js CHANGED Viewed

@@ -61,39 +61,39 @@ function _extends$3() {
 const PLACEMENT = ['end', 'start'];
 const PRODUCTS = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
-const COMPONENT_ID$A = 'chrome.chrome';
+const COMPONENT_ID$z = 'chrome.chrome';
 const StyledChrome = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$z,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
-})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props));
+})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props));
 StyledChrome.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$z = 'chrome.header_item_icon';
+const COMPONENT_ID$y = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$y,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
-})(["transition:transform 0.25s ease-in-out;margin:0 3px;width:", ";min-width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props));
+})(["transition:transform 0.25s ease-in-out;margin:0 3px;width:", ";min-width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props));
 StyledHeaderItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$y = 'chrome.base_header_item';
+const COMPONENT_ID$x = 'chrome.base_header_item';
 const getHeaderItemSize = props => `${props.theme.space.base * 7.5}px`;
 const sizeStyles$4 = props => {
   const size = props.theme.space.base * 7.5;
   return styled.css(["padding:0 3px;min-width:", "px;height:", ";line-height:", ";"], size, props.maxY ? '100%' : `${size}px`, reactTheming.getLineHeight(size, props.theme.fontSizes.md));
 };
 const StyledBaseHeaderItem = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$x,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -105,25 +105,25 @@ const StyledBaseHeaderItem = styled__default.default.button.attrs({
     return '0';
   }
   return props.theme.borderRadii.md;
-}, sizeStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props));
+}, sizeStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props));
 StyledBaseHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$x = 'chrome.header_item_text';
+const COMPONENT_ID$w = '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.6'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
-})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props));
+})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props));
 StyledHeaderItemText.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$w = 'chrome.nav';
+const COMPONENT_ID$v = 'chrome.nav';
 const colorStyles$6 = props => {
   const shade = props.isDark || props.isLight ? 600 : 700;
   const backgroundColor = reactTheming.getColorV8(props.hue, shade, props.theme);
@@ -137,17 +137,17 @@ const getExpandedNavWidth = () => {
   return `200px`;
 };
 const StyledNav = styled__default.default.nav.attrs({
-  'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
-})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;width:", ";font-size:", ";", ";", ";"], props => props.isExpanded ? getExpandedNavWidth : getNavWidth, props => props.theme.fontSizes.md, props => colorStyles$6(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props));
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;width:", ";font-size:", ";", ";", ";"], props => props.isExpanded ? getExpandedNavWidth : getNavWidth, props => props.theme.fontSizes.md, props => colorStyles$6(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$v = 'chrome.header_item';
+const COMPONENT_ID$u = 'chrome.header_item';
 const retrieveProductColor$1 = props => {
   switch (props.product) {
     case 'chat':
@@ -169,18 +169,18 @@ const retrieveProductColor$1 = props => {
   }
 };
 const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.6',
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.0.0-next.7',
   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.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));
+})(["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$u, props));
 StyledLogoHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$u = 'chrome.base_nav_item';
+const COMPONENT_ID$t = 'chrome.base_nav_item';
 const getNavItemHeight = props => {
   return `${props.theme.space.base * 13}px`;
 };
@@ -190,8 +190,8 @@ const sizeStyles$3 = props => {
   return styled.css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, getNavItemHeight);
 };
 const StyledBaseNavItem = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -200,13 +200,13 @@ StyledBaseNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$t = 'chrome.header';
+const COMPONENT_ID$s = 'chrome.header';
 const getHeaderHeight = props => {
   return getNavItemHeight(props);
 };
 const StyledHeader = styled__default.default.header.attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
@@ -214,12 +214,12 @@ const StyledHeader = styled__default.default.header.attrs({
     ${StyledLogoHeaderItem} {
       display: inline-flex;
     }
-  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
+  `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$s = 'chrome.skipnav';
+const COMPONENT_ID$r = 'chrome.skipnav';
 const animationStyles = () => {
   const animationName = styled.keyframes(["0%{transform:translate(-50%,-50%);}"]);
   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);
@@ -243,12 +243,12 @@ const sizeStyles$2 = props => {
   return styled.css(["top:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, padding, props.theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
 };
 const StyledSkipNav = styled__default.default.a.attrs({
-  'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
-})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles$5(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
+})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles$5(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledSkipNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -269,90 +269,78 @@ var SvgLinkStroke = function SvgLinkStroke(props) {
   })));
 };
-const COMPONENT_ID$r = 'chrome.skipnav_icon';
+const COMPONENT_ID$q = 'chrome.skipnav_icon';
 const sizeStyles$1 = theme => {
   const margin = `${theme.space.base * 2}px`;
   const size = theme.iconSizes.md;
   return styled.css(["margin-", ":", ";width:", ";height:", ";"], theme.rtl ? 'left' : 'right', margin, size, size);
 };
 const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
-})(["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));
+})(["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$q, props));
 StyledSkipNavIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$q = 'chrome.body';
+const COMPONENT_ID$p = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
-})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColorV8('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$p, props));
 StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$p = 'chrome.footer';
+const COMPONENT_ID$o = 'chrome.footer';
 const getFooterHeight = props => {
   return `${props.theme.space.base * 20}px`;
 };
 const StyledFooter = styled__default.default.footer.attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.0.0-next.7'
 }).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.getColorV8('neutralHue', 300, props.theme)}`, props => reactTheming.getColorV8('background', 600 , props.theme), 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 => reactTheming.getColorV8('background', 600 , props.theme), props => props.theme.space.base * 9, getFooterHeight, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
 StyledFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$o = 'chrome.content';
+const COMPONENT_ID$n = 'chrome.content';
 const StyledContent = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
-})(["display:flex;height:", ";line-height:", ";color:", ";font-size:", ";&:focus{outline:none;}", ";"], props => props.hasFooter ? `calc(100% - ${polished.math(`${getHeaderHeight(props)} + ${getFooterHeight(props)}`)})` : `calc(100% - ${getHeaderHeight(props)})`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
+})(["display:flex;height:", ";line-height:", ";color:", ";font-size:", ";&:focus{outline:none;}", ";"], props => props.hasFooter ? `calc(100% - ${polished.math(`${getHeaderHeight(props)} + ${getFooterHeight(props)}`)})` : `calc(100% - ${getHeaderHeight(props)})`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const COMPONENT_ID$n = 'chrome.main';
+const COMPONENT_ID$m = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
-})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => reactTheming.getColorV8('background', 600 , props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
+})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => reactTheming.getColorV8('background', 600 , props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledMain.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-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.6'
-}).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.getColorV8('neutralHue', 300, props.theme)}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
-StyledSidebar.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -368,11 +356,11 @@ const imgStyles = props => {
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).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({
+})(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &: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.getColorV8('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
@@ -387,7 +375,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.6',
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -425,7 +413,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.6',
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -438,7 +426,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.6',
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -451,7 +439,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -497,7 +485,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.6',
+  'data-garden-version': '9.0.0-next.7',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
@@ -514,7 +502,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -567,7 +555,7 @@ const getSubNavItemHeight = props => {
 };
 const StyledSubNavItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
@@ -590,7 +578,7 @@ const colorStyles$1 = props => {
 };
 const StyledSubNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -608,7 +596,7 @@ const sizeStyles = props => {
 };
 const StyledSubNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -620,7 +608,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.6',
+  'data-garden-version': '9.0.0-next.7',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -667,7 +655,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 const StyledSubNavItemIconWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -680,7 +668,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -711,7 +699,7 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -723,7 +711,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -750,7 +738,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -762,7 +750,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -774,7 +762,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -798,7 +786,7 @@ const colorStyles = props => {
 };
 const StyledSheetClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -810,7 +798,7 @@ 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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
@@ -822,7 +810,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -834,7 +822,7 @@ 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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
@@ -1206,11 +1194,6 @@ const Main = React__namespace.default.forwardRef((props, ref) => React__namespac
 }, props)));
 Main.displayName = 'Main';
-const Sidebar = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledSidebar, _extends$3({
-  ref: ref
-}, props)));
-Sidebar.displayName = 'Sidebar';
 const HeaderComponent = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeader, _extends$3({
   ref: ref
 }, props)));
@@ -1438,7 +1421,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.6'}`), [id, seed]);
+  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.7'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = React.useMemo(() => ({
@@ -1514,7 +1497,6 @@ exports.NavItemIcon = NavItemIcon;
 exports.NavItemText = NavItemText;
 exports.PRODUCTS = PRODUCTS;
 exports.Sheet = Sheet;
-exports.Sidebar = Sidebar;
 exports.SkipNav = SkipNav;
 exports.SubNav = SubNav;
 exports.SubNavItem = SubNavItem;

package/dist/index.esm.js CHANGED Viewed

@@ -35,39 +35,39 @@ function _extends$3() {
 const PLACEMENT = ['end', 'start'];
 const PRODUCTS = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
-const COMPONENT_ID$A = 'chrome.chrome';
+const COMPONENT_ID$z = 'chrome.chrome';
 const StyledChrome = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$z,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
-})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$A, props));
+})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$z, props));
 StyledChrome.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$z = 'chrome.header_item_icon';
+const COMPONENT_ID$y = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$y,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
-})(["transition:transform 0.25s ease-in-out;margin:0 3px;width:", ";min-width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$z, props));
+})(["transition:transform 0.25s ease-in-out;margin:0 3px;width:", ";min-width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$y, props));
 StyledHeaderItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$y = 'chrome.base_header_item';
+const COMPONENT_ID$x = 'chrome.base_header_item';
 const getHeaderItemSize = props => `${props.theme.space.base * 7.5}px`;
 const sizeStyles$4 = props => {
   const size = props.theme.space.base * 7.5;
   return css(["padding:0 3px;min-width:", "px;height:", ";line-height:", ";"], size, props.maxY ? '100%' : `${size}px`, getLineHeight(size, props.theme.fontSizes.md));
 };
 const StyledBaseHeaderItem = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$x,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -79,25 +79,25 @@ const StyledBaseHeaderItem = styled.button.attrs({
     return '0';
   }
   return props.theme.borderRadii.md;
-}, sizeStyles$4, props => retrieveComponentStyles(COMPONENT_ID$y, props));
+}, sizeStyles$4, props => retrieveComponentStyles(COMPONENT_ID$x, props));
 StyledBaseHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$x = 'chrome.header_item_text';
+const COMPONENT_ID$w = '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.6'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
-})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => retrieveComponentStyles(COMPONENT_ID$x, props));
+})(["margin:0 3px;", " ", ";"], props => props.isClipped && clippedStyling, props => retrieveComponentStyles(COMPONENT_ID$w, props));
 StyledHeaderItemText.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$w = 'chrome.nav';
+const COMPONENT_ID$v = 'chrome.nav';
 const colorStyles$6 = props => {
   const shade = props.isDark || props.isLight ? 600 : 700;
   const backgroundColor = getColorV8(props.hue, shade, props.theme);
@@ -111,17 +111,17 @@ const getExpandedNavWidth = () => {
   return `200px`;
 };
 const StyledNav = styled.nav.attrs({
-  'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
-})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;width:", ";font-size:", ";", ";", ";"], props => props.isExpanded ? getExpandedNavWidth : getNavWidth, props => props.theme.fontSizes.md, props => colorStyles$6(props), props => retrieveComponentStyles(COMPONENT_ID$w, props));
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;width:", ";font-size:", ";", ";", ";"], props => props.isExpanded ? getExpandedNavWidth : getNavWidth, props => props.theme.fontSizes.md, props => colorStyles$6(props), props => retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledNav.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$v = 'chrome.header_item';
+const COMPONENT_ID$u = 'chrome.header_item';
 const retrieveProductColor$1 = props => {
   switch (props.product) {
     case 'chat':
@@ -143,18 +143,18 @@ const retrieveProductColor$1 = props => {
   }
 };
 const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.6',
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.0.0-next.7',
   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} ${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));
+})(["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$u, props));
 StyledLogoHeaderItem.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$u = 'chrome.base_nav_item';
+const COMPONENT_ID$t = 'chrome.base_nav_item';
 const getNavItemHeight = props => {
   return `${props.theme.space.base * 13}px`;
 };
@@ -164,8 +164,8 @@ const sizeStyles$3 = props => {
   return css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, getNavItemHeight);
 };
 const StyledBaseNavItem = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -174,13 +174,13 @@ StyledBaseNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$t = 'chrome.header';
+const COMPONENT_ID$s = 'chrome.header';
 const getHeaderHeight = props => {
   return getNavItemHeight(props);
 };
 const StyledHeader = styled.header.attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
@@ -188,12 +188,12 @@ const StyledHeader = styled.header.attrs({
     ${StyledLogoHeaderItem} {
       display: inline-flex;
     }
-  `, props => retrieveComponentStyles(COMPONENT_ID$t, props));
+  `, props => retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$s = 'chrome.skipnav';
+const COMPONENT_ID$r = 'chrome.skipnav';
 const animationStyles = () => {
   const animationName = keyframes(["0%{transform:translate(-50%,-50%);}"]);
   return css(["transition:opacity 0.2s ease-out,clip 0s linear 0.2s;opacity:0;clip:rect(0,0,0,0);&:focus{transition:opacity 0.2s ease-in-out;animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";opacity:1;clip:rect(0,150vw,100vh,-50vw);}"], animationName);
@@ -217,12 +217,12 @@ const sizeStyles$2 = props => {
   return css(["top:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, padding, props.theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
 };
 const StyledSkipNav = styled.a.attrs({
-  'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
-})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles$5(props.theme), props => retrieveComponentStyles(COMPONENT_ID$s, props));
+})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles$5(props.theme), props => retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledSkipNav.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -243,90 +243,78 @@ var SvgLinkStroke = function SvgLinkStroke(props) {
   })));
 };
-const COMPONENT_ID$r = 'chrome.skipnav_icon';
+const COMPONENT_ID$q = 'chrome.skipnav_icon';
 const sizeStyles$1 = theme => {
   const margin = `${theme.space.base * 2}px`;
   const size = theme.iconSizes.md;
   return css(["margin-", ":", ";width:", ";height:", ";"], theme.rtl ? 'left' : 'right', margin, size, size);
 };
 const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
-})(["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));
+})(["transform:", ";color:", ";", ";", ";"], props => props.theme.rtl && 'scaleX(-1)', props => getColorV8('neutralHue', 600, props.theme), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$q, props));
 StyledSkipNavIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$q = 'chrome.body';
+const COMPONENT_ID$p = 'chrome.body';
 const StyledBody = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
-})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColorV8('neutralHue', 100, props.theme), props => retrieveComponentStyles(COMPONENT_ID$q, props));
+})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColorV8('neutralHue', 100, props.theme), props => retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledBody.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$p = 'chrome.footer';
+const COMPONENT_ID$o = 'chrome.footer';
 const getFooterHeight = props => {
   return `${props.theme.space.base * 20}px`;
 };
 const StyledFooter = styled.footer.attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
-})(["display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-top:", ";background-color:", ";padding:0 ", "px;height:", ";", ";"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`, props => getColorV8('background', 600 , props.theme), props => props.theme.space.base * 9, getFooterHeight, props => retrieveComponentStyles(COMPONENT_ID$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 => getColorV8('background', 600 , props.theme), props => props.theme.space.base * 9, getFooterHeight, props => retrieveComponentStyles(COMPONENT_ID$o, props));
 StyledFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$o = 'chrome.content';
+const COMPONENT_ID$n = 'chrome.content';
 const StyledContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
-})(["display:flex;height:", ";line-height:", ";color:", ";font-size:", ";&:focus{outline:none;}", ";"], props => props.hasFooter ? `calc(100% - ${math(`${getHeaderHeight(props)} + ${getFooterHeight(props)}`)})` : `calc(100% - ${getHeaderHeight(props)})`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$o, props));
+})(["display:flex;height:", ";line-height:", ";color:", ";font-size:", ";&:focus{outline:none;}", ";"], props => props.hasFooter ? `calc(100% - ${math(`${getHeaderHeight(props)} + ${getFooterHeight(props)}`)})` : `calc(100% - ${getHeaderHeight(props)})`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledContent.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$n = 'chrome.main';
+const COMPONENT_ID$m = 'chrome.main';
 const StyledMain = styled.main.attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
-})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => getColorV8('background', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID$n, props));
+})(["flex:1;order:1;background-color:", ";overflow:auto;:focus{outline:none;}", ";"], props => getColorV8('background', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledMain.defaultProps = {
   theme: DEFAULT_THEME
 };
-const COMPONENT_ID$m = 'chrome.sidebar';
-const StyledSidebar = styled.aside.attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.6'
-}).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} ${getColorV8('neutralHue', 300, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$m, props));
-StyledSidebar.defaultProps = {
-  theme: DEFAULT_THEME
-};
 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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -342,11 +330,11 @@ const imgStyles = props => {
 };
 const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).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({
+})(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &:focus-visible:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", ";"], props => focusStyles({
   theme: props.theme,
   inset: props.maxY
 }), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => getColorV8('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
@@ -361,7 +349,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.6',
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -399,7 +387,7 @@ const colorStyles$4 = props => {
 };
 const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.6',
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -412,7 +400,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.6',
+  'data-garden-version': '9.0.0-next.7',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -425,7 +413,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -471,7 +459,7 @@ const colorStyles$3 = props => {
 };
 const StyledNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.6',
+  'data-garden-version': '9.0.0-next.7',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
@@ -488,7 +476,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -541,7 +529,7 @@ const getSubNavItemHeight = props => {
 };
 const StyledSubNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
@@ -564,7 +552,7 @@ const colorStyles$1 = props => {
 };
 const StyledSubNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -582,7 +570,7 @@ const sizeStyles = props => {
 };
 const StyledSubNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -594,7 +582,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.6',
+  'data-garden-version': '9.0.0-next.7',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -641,7 +629,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 const StyledSubNavItemIconWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -654,7 +642,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -685,7 +673,7 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -697,7 +685,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -724,7 +712,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -736,7 +724,7 @@ 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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -748,7 +736,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -772,7 +760,7 @@ const colorStyles = props => {
 };
 const StyledSheetClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -784,7 +772,7 @@ 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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
@@ -796,7 +784,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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -808,7 +796,7 @@ 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.6'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
@@ -1180,11 +1168,6 @@ const Main = React__default.forwardRef((props, ref) => React__default.createElem
 }, props)));
 Main.displayName = 'Main';
-const Sidebar = React__default.forwardRef((props, ref) => React__default.createElement(StyledSidebar, _extends$3({
-  ref: ref
-}, props)));
-Sidebar.displayName = 'Sidebar';
 const HeaderComponent = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeader, _extends$3({
   ref: ref
 }, props)));
@@ -1412,7 +1395,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.6'}`), [id, seed]);
+  const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.7'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = useMemo(() => ({
@@ -1470,4 +1453,4 @@ Sheet.FooterItem = FooterItem;
 Sheet.Header = Header;
 Sheet.Title = Title;
-export { Body$1 as Body, Chrome, CollapsibleSubNavItem, Content, Footer$1 as Footer, FooterItem$1 as FooterItem, Header$1 as Header, HeaderItem, HeaderItemIcon, HeaderItemText, HeaderItemWrapper, Main, Nav, NavItem, NavItemIcon, NavItemText, PRODUCTS, Sheet, Sidebar, SkipNav, SubNav, SubNavItem, SubNavItemText };
+export { Body$1 as Body, Chrome, CollapsibleSubNavItem, Content, Footer$1 as Footer, FooterItem$1 as FooterItem, Header$1 as Header, HeaderItem, HeaderItemIcon, HeaderItemText, HeaderItemWrapper, Main, Nav, NavItem, NavItemIcon, NavItemText, PRODUCTS, Sheet, SkipNav, SubNav, SubNavItem, SubNavItemText };

package/dist/typings/index.d.ts CHANGED Viewed

@@ -20,7 +20,6 @@ export { SkipNav } from './elements/SkipNav';
 export { Body } from './elements/body/Body';
 export { Content } from './elements/body/Content';
 export { Main } from './elements/body/Main';
-export { Sidebar } from './elements/body/Sidebar';
 export { Header } from './elements/header/Header';
 export { Footer } from './elements/footer/Footer';
 export { Nav } from './elements/nav/Nav';

package/dist/typings/styled/index.d.ts CHANGED Viewed

@@ -10,7 +10,6 @@ export { StyledSkipNavIcon } from './StyledSkipNavIcon';
 export { StyledBody } from './body/StyledBody';
 export { StyledContent } from './body/StyledContent';
 export { StyledMain } from './body/StyledMain';
-export { StyledSidebar } from './body/StyledSidebar';
 export { StyledFooter } from './footer/StyledFooter';
 export { StyledFooterItem } from './footer/StyledFooterItem';
 export { StyledHeader } from './header/StyledHeader';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-chrome",
-  "version": "9.0.0-next.6",
+  "version": "9.0.0-next.7",
   "description": "Components relating to Chrome within the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -29,13 +29,13 @@
     "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^9.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.6",
+    "@zendeskgarden/react-theming": "^9.0.0-next.7",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
+  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
 }

package/dist/typings/elements/body/Sidebar.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-import React from 'react';
-/**
- * @extends HTMLAttributes<HTMLElement>
- */
-export declare const Sidebar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;

package/dist/typings/styled/body/StyledSidebar.d.ts DELETED Viewed

@@ -1,10 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-export declare const StyledSidebar: import("styled-components").StyledComponent<"aside", import("styled-components").DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-}, "data-garden-id" | "data-garden-version">;