@zendeskgarden/react-chrome 9.12.3 → 9.12.4

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

@@ -8,13 +8,12 @@ import styled, { css } from 'styled-components';
 import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { getHeaderItemSize } from '../utils.js';
 
-const COMPONENT_ID = 'chrome.base_header_item';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    $maxY,
-    $isRound
-  } = _ref;
+const COMPONENT_ID$n = 'chrome.base_header_item';
+const sizeStyles$b = ({
+  theme,
+  $maxY,
+  $isRound
+}) => {
   const margin = `0 ${theme.space.base * 3}px`;
   const size = getHeaderItemSize(theme);
   const height = $maxY ? '100%' : size;
@@ -31,11 +30,11 @@ const sizeStyles = _ref => {
   return css(["margin:", ";border-radius:", ";padding:", ";min-width:", ";height:", ";line-height:", ";font-size:inherit;"], margin, borderRadius, padding, size, height, lineHeight);
 };
 const StyledBaseHeaderItem = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
-})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;border:none;background:transparent;text-decoration:none;white-space:nowrap;color:inherit;", ";", ";"], props => props.$maxX && '1', props => props.$maxX ? 'start' : 'center', sizeStyles, componentStyles);
+})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;border:none;background:transparent;text-decoration:none;white-space:nowrap;color:inherit;", ";", ";"], props => props.$maxX && '1', props => props.$maxX ? 'start' : 'center', sizeStyles$b, componentStyles);
 
 export { StyledBaseHeaderItem };

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

@@ -9,12 +9,11 @@ import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledLogoHeaderItem } from './StyledLogoHeaderItem.js';
 import { getHeaderHeight } from '../utils.js';
 
-const COMPONENT_ID = 'chrome.header';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isStandalone
-  } = _ref;
+const COMPONENT_ID$k = 'chrome.header';
+const colorStyles$7 = ({
+  theme,
+  $isStandalone
+}) => {
   const backgroundColor = getColor({
     theme,
     variable: 'background.default'
@@ -34,10 +33,9 @@ const colorStyles = _ref => {
   });
   return css(["border-bottom-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const sizeStyles$9 = ({
+  theme
+}) => {
   const border = theme.borders.sm;
   const padding = `0 ${theme.space.base}px`;
   const fontSize = theme.fontSizes.md;
@@ -45,11 +43,11 @@ const sizeStyles = _ref2 => {
   return css(["box-sizing:border-box;border-bottom:", ";padding:", ";height:", ";font-size:", ";"], border, padding, height, fontSize);
 };
 const StyledHeader = styled.header.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
-})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.$isStandalone && 'relative', sizeStyles, colorStyles, StyledLogoHeaderItem, props => props.$isStandalone && 'inline-flex', componentStyles);
+})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.$isStandalone && 'relative', sizeStyles$9, colorStyles$7, StyledLogoHeaderItem, props => props.$isStandalone && 'inline-flex', componentStyles);
 
 export { StyledHeader };

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

@@ -12,12 +12,11 @@ import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
 import { StyledHeaderItemText } from './StyledHeaderItemText.js';
 import { getHeaderItemSize } from '../utils.js';
 
-const COMPONENT_ID = 'chrome.header_item';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $maxY
-  } = _ref;
+const COMPONENT_ID$j = 'chrome.header_item';
+const colorStyles$6 = ({
+  theme,
+  $maxY
+}) => {
   const options = {
     theme,
     variable: 'foreground.subtle'
@@ -45,22 +44,21 @@ const colorStyles = _ref => {
     inset: $maxY
   }), StyledHeaderItemIcon, StyledHeaderItemText, hoverColor, StyledHeaderItemIcon, StyledHeaderItemText, activeColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isRound
-  } = _ref2;
+const sizeStyles$8 = ({
+  theme,
+  $isRound
+}) => {
   const iconBorderRadius = $isRound ? '100px' : undefined;
   const imageBorderRadius = math(`${theme.borderRadii.md} - 1`);
   const imageSize = math(`${getHeaderItemSize(theme)} - ${theme.space.base * 2}`);
   return css(["img{margin:0;border-radius:", ";width:", ";height:", ";}", "{border-radius:", ";}"], imageBorderRadius, imageSize, imageSize, StyledHeaderItemIcon, iconBorderRadius);
 };
 const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
-})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles, colorStyles, StyledHeaderItemIcon, StyledHeaderItemText, componentStyles);
+})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles$8, colorStyles$6, StyledHeaderItemIcon, StyledHeaderItemText, componentStyles);
 
 export { StyledHeaderItem };

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

@@ -7,21 +7,20 @@
 import styled, { css } from 'styled-components';
 import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'chrome.header_item_icon';
-const sizeStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$o = 'chrome.header_item_icon';
+const sizeStyles$c = ({
+  theme
+}) => {
   const margin = `0 ${theme.space.base * 0.75}px`;
   const size = theme.iconSizes.md;
   return css(["margin:", ";width:", ";min-width:", ";height:", ";"], margin, size, size, size);
 };
 const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
-})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles, componentStyles);
+})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles$c, componentStyles);
 
 export { StyledHeaderItemIcon };

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

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { hideVisually } from 'polished';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'chrome.header_item_text';
+const COMPONENT_ID$m = 'chrome.header_item_text';
 const StyledHeaderItemText = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"

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

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
 
-const COMPONENT_ID = 'chrome.header_item_wrapper';
+const COMPONENT_ID$i = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.12.4',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",

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

@@ -10,14 +10,13 @@ import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
 import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
 import { StyledHeaderItemText } from './StyledHeaderItemText.js';
-import { getProductColor, getNavWidth } from '../utils.js';
+import { getNavWidth, getProductColor } from '../utils.js';
 
-const COMPONENT_ID = 'chrome.header_item';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $product
-  } = _ref;
+const COMPONENT_ID$l = 'chrome.header_item';
+const colorStyles$8 = ({
+  theme,
+  $product
+}) => {
   const borderColor = getColor({
     theme,
     variable: 'border.default'
@@ -29,10 +28,9 @@ const colorStyles = _ref => {
   const color = getProductColor($product, fill );
   return css(["border-", "-color:", ";color:", ";fill:", ";"], theme.rtl ? 'left' : 'right', borderColor, color, fill);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const sizeStyles$a = ({
+  theme
+}) => {
   const border = theme.borders.sm;
   const iconSize = theme.iconSizes.lg;
   const marginRight = theme.rtl ? `-${theme.space.base}px` : 'auto';
@@ -41,12 +39,12 @@ const sizeStyles = _ref2 => {
   return css(["margin-right:", ";margin-left:", ";border-", ":", ";width:", ";height:100%;", "{margin:0;width:", ";height:", ";}"], marginRight, marginLeft, theme.rtl ? 'left' : 'right', border, width, StyledHeaderItemIcon, iconSize, iconSize);
 };
 const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.12.4',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
   componentId: "sc-1n1d1yv-0"
-})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles, colorStyles, StyledHeaderItemText, hideVisually(), componentStyles);
+})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles$a, colorStyles$8, StyledHeaderItemText, hideVisually(), componentStyles);
 
 export { StyledLogoHeaderItem };

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

@@ -8,22 +8,21 @@ import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { getNavItemHeight, getNavWidth } from '../utils.js';
 
-const COMPONENT_ID = 'chrome.base_nav_item';
-const sizeStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$e = 'chrome.base_nav_item';
+const sizeStyles$6 = ({
+  theme
+}) => {
   const minHeight = getNavItemHeight(theme);
   const verticalPadding = math(`(${minHeight} - ${theme.iconSizes.lg}) / 2`);
   const horizontalPadding = math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`);
   return css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, minHeight);
 };
 const StyledBaseNavItem = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:outline-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;", ";"], sizeStyles);
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:outline-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;", ";"], sizeStyles$6);
 
 export { StyledBaseNavItem };

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { StyledBaseNavItem } from './StyledBaseNavItem.js';
 
-const COMPONENT_ID = 'chrome.brandmark_nav_list_item';
+const COMPONENT_ID$c = 'chrome.brandmark_nav_list_item';
 const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
   componentId: "sc-8kynd4-0"

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

@@ -9,13 +9,12 @@ import { getColor } from '@zendeskgarden/react-theming';
 import { StyledBaseNavItem } from './StyledBaseNavItem.js';
 import { getProductColor } from '../utils.js';
 
-const COMPONENT_ID = 'chrome.logo_nav_list_item';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $hue,
-    $product
-  } = _ref;
+const COMPONENT_ID$d = 'chrome.logo_nav_list_item';
+const colorStyles$4 = ({
+  theme,
+  $hue,
+  $product
+}) => {
   const fillColor = getColor({
     theme,
     variable: 'foreground.default'
@@ -24,11 +23,11 @@ const colorStyles = _ref => {
   return css(["color:", ";fill:", ";"], color, fillColor);
 };
 const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"
-})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], colorStyles);
+})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], colorStyles$4);
 
 export { StyledLogoNavItem };

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

@@ -8,12 +8,11 @@ import styled, { css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { getNavWidthExpanded, getNavWidth } from '../utils.js';
 
-const COMPONENT_ID = 'chrome.nav';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $hue
-  } = _ref;
+const COMPONENT_ID$h = 'chrome.nav';
+const colorStyles$5 = ({
+  theme,
+  $hue
+}) => {
   const shade = $hue === 'chromeHue' ? 900 : undefined;
   const backgroundColor = getColor({
     theme,
@@ -31,21 +30,20 @@ const colorStyles = _ref => {
   });
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isExpanded
-  } = _ref2;
+const sizeStyles$7 = ({
+  theme,
+  $isExpanded
+}) => {
   const fontSize = theme.fontSizes.md;
   const width = $isExpanded ? getNavWidthExpanded() : getNavWidth(theme);
   return css(["width:", ";font-size:", ";"], width, fontSize);
 };
 const StyledNav = styled.nav.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
-})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles, sizeStyles, componentStyles);
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles$5, sizeStyles$7, componentStyles);
 
 export { StyledNav };

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

@@ -11,12 +11,11 @@ import { StyledBaseNavItem } from './StyledBaseNavItem.js';
 import { StyledNavItemIcon } from './StyledNavItemIcon.js';
 import { getNavWidth } from '../utils.js';
 
-const COMPONENT_ID = 'chrome.nav_button';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $hue
-  } = _ref;
+const COMPONENT_ID$a = 'chrome.nav_button';
+const colorStyles$3 = ({
+  theme,
+  $hue
+}) => {
   const activeBackgroundColor = getColor({
     theme,
     dark: {
@@ -71,21 +70,20 @@ const colorStyles = _ref => {
     }
   }), activeBackgroundColor, currentBackgroundColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isExpanded
-  } = _ref2;
+const sizeStyles$4 = ({
+  theme,
+  $isExpanded
+}) => {
   const iconMargin = $isExpanded ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
   return css(["margin:0;border:none;box-sizing:border-box;min-width:0;font-size:inherit;", "{margin:", ";}"], StyledNavItemIcon, iconMargin);
 };
 const StyledNavButton = styled(StyledBaseNavItem).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.12.4',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavButton",
   componentId: "sc-f5ux3-0"
-})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.$isExpanded && 'start', props => props.$isExpanded && 'inherit', sizeStyles, colorStyles, componentStyles);
+})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.$isExpanded && 'start', props => props.$isExpanded && 'inherit', sizeStyles$4, colorStyles$3, componentStyles);
 
 export { StyledNavButton };

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

@@ -7,20 +7,19 @@
 import styled, { css } from 'styled-components';
 import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'chrome.nav_item_icon';
-const sizeStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$b = 'chrome.nav_item_icon';
+const sizeStyles$5 = ({
+  theme
+}) => {
   const size = theme.iconSizes.lg;
   return css(["width:", ";height:", ";"], size, size);
 };
 const StyledNavItemIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
-})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles, componentStyles);
+})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles$5, componentStyles);
 
 export { StyledNavItemIcon };

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

@@ -10,13 +10,12 @@ import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledNavButton } from './StyledNavButton.js';
 import { getNavWidth } from '../utils.js';
 
-const COMPONENT_ID = 'chrome.nav_item_text';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    $isExpanded,
-    $isWrapped
-  } = _ref;
+const COMPONENT_ID$9 = 'chrome.nav_item_text';
+const sizeStyles$3 = ({
+  theme,
+  $isExpanded,
+  $isWrapped
+}) => {
   const clip = $isExpanded ? 'auto' : undefined;
   const lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
   const margin = $isExpanded ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
@@ -26,11 +25,11 @@ const sizeStyles = _ref => {
   return css(["clip:rect(1px,1px,1px,1px);margin:", ";width:1px;height:1px;line-height:", ";white-space:", ";", " > &&{clip:", ";width:", ";height:", ";}"], margin, lineHeight, whiteSpace, StyledNavButton, clip, width, height);
 };
 const StyledNavItemText = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
-})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.$isExpanded ? 'static' : undefined, props => props.$isExpanded ? 1 : undefined, props => props.$isExpanded ? 'ellipsis' : undefined, sizeStyles, componentStyles);
+})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.$isExpanded ? 'static' : undefined, props => props.$isExpanded ? 1 : undefined, props => props.$isExpanded ? 'ellipsis' : undefined, sizeStyles$3, componentStyles);
 
 export { StyledNavItemText };

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'chrome.nav_list';
+const COMPONENT_ID$g = 'chrome.nav_list';
 const StyledNavList = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledNavList",
   componentId: "sc-1s0nkfb-0"

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'chrome.nav_list_item';
+const COMPONENT_ID$f = 'chrome.nav_list_item';
 const StyledNavListItem = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledNavListItem",
   componentId: "sc-18cj2v7-0"

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

@@ -5,14 +5,13 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { componentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'chrome.sheet';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isOpen
-  } = _ref;
+const COMPONENT_ID$8 = 'chrome.sheet';
+const colorStyles$2 = ({
+  theme,
+  $isOpen
+}) => {
   const backgroundColor = getColor({
     theme,
     variable: 'background.default'
@@ -23,13 +22,12 @@ const colorStyles = _ref => {
   }) : 'transparent';
   return css(["border-color:", ";background-color:", ";"], borderColor, backgroundColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isOpen,
-    $placement,
-    $size
-  } = _ref2;
+const sizeStyles$2 = ({
+  theme,
+  $isOpen,
+  $placement,
+  $size
+}) => {
   const width = $isOpen ? $size : 0;
   const fontSize = theme.fontSizes.md;
   const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
@@ -43,11 +41,11 @@ const sizeStyles = _ref2 => {
   return css(["box-sizing:border-box;width:", ";height:100%;", ":", ";line-height:", ";font-size:", ";"], width, borderProperty, border, lineHeight, fontSize);
 };
 const StyledSheet = styled.aside.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
-})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.$isAnimated && 'width 250ms ease-in-out', sizeStyles, colorStyles, componentStyles);
+})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.$isAnimated && 'width 250ms ease-in-out', sizeStyles$2, colorStyles$2, componentStyles);
 
 export { StyledSheet };

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'chrome.sheet_body';
+const COMPONENT_ID$4 = 'chrome.sheet_body';
 const StyledSheetBody = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"

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

@@ -8,18 +8,17 @@ import styled, { css } from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { IconButton } from '@zendeskgarden/react-buttons';
 
-const COMPONENT_ID = 'chrome.sheet_close';
-const positionStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$3 = 'chrome.sheet_close';
+const positionStyles = ({
+  theme
+}) => {
   const top = `${theme.space.base * 2.5}px`;
   const position = `${theme.space.base * 2}px`;
   return css(["top:", ";", ":", ";"], top, theme.rtl ? 'left' : 'right', position);
 };
 const StyledSheetClose = styled(IconButton).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'chrome.sheet_description';
+const COMPONENT_ID$5 = 'chrome.sheet_description';
 const StyledSheetDescription = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"