@zendeskgarden/react-chrome 9.0.0 → 9.1.0

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

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

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

@@ -16,7 +16,7 @@ const COMPONENT_ID = 'chrome.header_item';
 const colorStyles = _ref => {
   let {
     theme,
-    product
+    $product
   } = _ref;
   const borderColor = getColor({
     theme,
@@ -26,7 +26,7 @@ const colorStyles = _ref => {
     theme,
     variable: 'foreground.default'
   });
-  const color = getProductColor(product, fill );
+  const color = getProductColor($product, fill );
   return css(["border-", "-color:", ";color:", ";fill:", ";"], theme.rtl ? 'left' : 'right', borderColor, color, fill);
 };
 const sizeStyles = _ref2 => {
@@ -42,7 +42,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",

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

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

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

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

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

@@ -13,19 +13,19 @@ const COMPONENT_ID = 'chrome.logo_nav_list_item';
 const colorStyles = _ref => {
   let {
     theme,
-    hue,
-    product
+    $hue,
+    $product
   } = _ref;
   const fillColor = getColor({
     theme,
     variable: 'foreground.default'
   });
-  const color = hue === 'chromeHue' ? getProductColor(product) : fillColor;
+  const color = $hue === 'chromeHue' ? getProductColor($product) : fillColor;
   return css(["color:", ";fill:", ";"], color, fillColor);
 };
 const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"

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

@@ -12,12 +12,12 @@ const COMPONENT_ID = 'chrome.nav';
 const colorStyles = _ref => {
   let {
     theme,
-    hue
+    $hue
   } = _ref;
-  const shade = hue === 'chromeHue' ? 900 : undefined;
+  const shade = $hue === 'chromeHue' ? 900 : undefined;
   const backgroundColor = getColor({
     theme,
-    hue,
+    hue: $hue,
     shade
   });
   const foregroundColor = getColor({
@@ -34,15 +34,15 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isExpanded
+    $isExpanded
   } = _ref2;
   const fontSize = theme.fontSizes.md;
-  const width = isExpanded ? getNavWidthExpanded() : getNavWidth(theme);
+  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.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"

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

@@ -15,7 +15,7 @@ const COMPONENT_ID = 'chrome.nav_button';
 const colorStyles = _ref => {
   let {
     theme,
-    hue
+    $hue
   } = _ref;
   const activeBackgroundColor = getColor({
     theme,
@@ -27,9 +27,9 @@ const colorStyles = _ref => {
     },
     transparency: theme.opacity[100]
   });
-  const currentBackgroundColor = hue === 'chromeHue' ? getColor({
+  const currentBackgroundColor = $hue === 'chromeHue' ? getColor({
     theme,
-    hue,
+    hue: $hue,
     shade: 700
   }) : getColor({
     theme,
@@ -74,18 +74,18 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isExpanded
+    $isExpanded
   } = _ref2;
-  const iconMargin = isExpanded ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
+  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.0.0',
+  'data-garden-version': '9.1.0',
   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, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["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, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledNavButton };

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

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

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

@@ -14,23 +14,23 @@ const COMPONENT_ID = 'chrome.nav_item_text';
 const sizeStyles = _ref => {
   let {
     theme,
-    isExpanded,
-    isWrapped
+    $isExpanded,
+    $isWrapped
   } = _ref;
-  const clip = isExpanded ? 'auto' : undefined;
+  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;
-  const width = isExpanded ? 'auto' : undefined;
-  const height = isExpanded ? 'auto' : undefined;
-  const whiteSpace = isWrapped ? undefined : 'nowrap';
+  const margin = $isExpanded ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
+  const width = $isExpanded ? 'auto' : undefined;
+  const height = $isExpanded ? 'auto' : undefined;
+  const whiteSpace = $isWrapped ? undefined : 'nowrap';
   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.0.0'
+  'data-garden-version': '9.1.0'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["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, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledNavItemText };

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

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

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

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

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

@@ -11,13 +11,13 @@ const COMPONENT_ID = 'chrome.sheet';
 const colorStyles = _ref => {
   let {
     theme,
-    isOpen
+    $isOpen
   } = _ref;
   const backgroundColor = getColor({
     theme,
     variable: 'background.default'
   });
-  const borderColor = isOpen ? getColor({
+  const borderColor = $isOpen ? getColor({
     theme,
     variable: 'border.default'
   }) : 'transparent';
@@ -26,16 +26,16 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isOpen,
-    placement,
-    size
+    $isOpen,
+    $placement,
+    $size
   } = _ref2;
-  const width = isOpen ? size : 0;
+  const width = $isOpen ? $size : 0;
   const fontSize = theme.fontSizes.md;
   const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
-  const border = isOpen ? theme.borders.sm : 'none';
+  const border = $isOpen ? theme.borders.sm : 'none';
   let borderProperty;
-  if (placement === 'start') {
+  if ($placement === 'start') {
     borderProperty = `border-${theme.rtl ? 'left' : 'right'}`;
   } else {
     borderProperty = `border-${theme.rtl ? 'right' : 'left'}`;
@@ -44,10 +44,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.$isAnimated && 'width 250ms ease-in-out', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheet };

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

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

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

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

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

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

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

@@ -21,18 +21,18 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isCompact
+    $isCompact
   } = _ref2;
   const border = theme.borders.sm;
-  const padding = `${theme.space.base * (isCompact ? 2.5 : 5)}px`;
+  const padding = `${theme.space.base * ($isCompact ? 2.5 : 5)}px`;
   return css(["border-top:", ";padding:", ";"], border, padding);
 };
 const StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
-})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.isCompact ? 'center' : 'flex-end', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.$isCompact ? 'center' : 'flex-end', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheetFooter };

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

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

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

@@ -21,11 +21,11 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isCloseButtonPresent
+    $isCloseButtonPresent
   } = _ref2;
   const border = theme.borders.sm;
   let padding = `${theme.space.base * 5}px`;
-  if (isCloseButtonPresent) {
+  if ($isCloseButtonPresent) {
     const paddingSide = `${theme.space.base * 14}px`;
     padding = theme.rtl ? `${padding} ${padding} ${padding} ${paddingSide}` : `${padding} ${paddingSide} ${padding} ${padding}`;
   }
@@ -33,7 +33,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"

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

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

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

@@ -11,15 +11,15 @@ const COMPONENT_ID = 'chrome.sheet_wrapper';
 const transformStyles = _ref => {
   let {
     theme,
-    isAnimated,
-    isOpen,
-    placement
+    $isAnimated,
+    $isOpen,
+    $placement
   } = _ref;
-  const transition = isAnimated ? 'transform 250ms ease-in-out' : undefined;
+  const transition = $isAnimated ? 'transform 250ms ease-in-out' : undefined;
   let transform;
-  if (isOpen) {
+  if ($isOpen) {
     transform = 'translateX(0)';
-  } else if (placement === 'start') {
+  } else if ($placement === 'start') {
     transform = `translateX(${theme.rtl ? 100 : -100}%)`;
   } else {
     transform = `translateX(${theme.rtl ? -100 : 100}%)`;
@@ -28,10 +28,10 @@ const transformStyles = _ref => {
 };
 const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
-})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.size, transformStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.$size, transformStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheetWrapper };