@zendeskgarden/react-chrome 9.0.0 → 9.1.0

package/dist/index.cjs.js

@@ -47,7 +47,7 @@ const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'];
 const COMPONENT_ID$w = 'chrome.chrome';
 const StyledChrome = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -110,11 +110,11 @@ const sizeStyles$g = _ref2 => {
 };
 const StyledSkipNav = styled__default.default.a.attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).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-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.borderRadii.md, sizeStyles$g, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
+})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";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.borderRadii.md, sizeStyles$g, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
 
 var _path$1;
 function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
@@ -143,7 +143,7 @@ const sizeStyles$f = _ref => {
 };
 const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
@@ -155,7 +155,7 @@ const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
 const COMPONENT_ID$t = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
@@ -168,16 +168,16 @@ const COMPONENT_ID$s = 'chrome.content';
 const sizeStyles$e = _ref => {
   let {
     theme,
-    hasFooter
+    $hasFooter
   } = _ref;
   const fontSize = theme.fontSizes.md;
-  const height = hasFooter ? `calc(100% - ${polished.math(`${getHeaderHeight(theme)} + ${getFooterHeight(theme)}`)})` : `calc(100% - ${getHeaderHeight(theme)})`;
+  const height = $hasFooter ? `calc(100% - ${polished.math(`${getHeaderHeight(theme)} + ${getFooterHeight(theme)}`)})` : `calc(100% - ${getHeaderHeight(theme)})`;
   const lineHeight = reactTheming.getLineHeight(theme.lineHeights.md, theme.fontSizes.md);
   return styled.css(["height:", ";line-height:", ";font-size:", ";"], height, lineHeight, fontSize);
 };
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -189,7 +189,7 @@ const StyledContent = styled__default.default.div.attrs({
 const COMPONENT_ID$r = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
@@ -224,7 +224,7 @@ const sizeStyles$d = _ref2 => {
 };
 const StyledFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
@@ -233,7 +233,7 @@ const StyledFooter = styled__default.default.footer.attrs({
 const COMPONENT_ID$p = 'chrome.footer_item';
 const StyledFooterItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -250,7 +250,7 @@ const sizeStyles$c = _ref => {
 };
 const StyledHeaderItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -260,18 +260,18 @@ const COMPONENT_ID$n = 'chrome.base_header_item';
 const sizeStyles$b = _ref => {
   let {
     theme,
-    maxY,
-    isRound
+    $maxY,
+    $isRound
   } = _ref;
   const margin = `0 ${theme.space.base * 3}px`;
   const size = getHeaderItemSize(theme);
-  const height = maxY ? '100%' : size;
+  const height = $maxY ? '100%' : size;
   const lineHeight = reactTheming.getLineHeight(size, theme.fontSizes.md);
   const padding = `0 ${theme.space.base * 0.75}px`;
   let borderRadius;
-  if (isRound) {
+  if ($isRound) {
     borderRadius = '100%';
-  } else if (maxY) {
+  } else if ($maxY) {
     borderRadius = '0';
   } else {
     borderRadius = theme.borderRadii.md;
@@ -280,26 +280,26 @@ const sizeStyles$b = _ref => {
 };
 const StyledBaseHeaderItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).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$b, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
+})(["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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
 
 const COMPONENT_ID$m = 'chrome.header_item_text';
 const StyledHeaderItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
-})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.isClipped && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
+})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.$isClipped && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 
 const COMPONENT_ID$l = 'chrome.header_item';
 const colorStyles$8 = _ref => {
   let {
     theme,
-    product
+    $product
   } = _ref;
   const borderColor = reactTheming.getColor({
     theme,
@@ -309,7 +309,7 @@ const colorStyles$8 = _ref => {
     theme,
     variable: 'foreground.default'
   });
-  const color = getProductColor(product, fill );
+  const color = getProductColor($product, fill );
   return styled.css(["border-", "-color:", ";color:", ";fill:", ";"], theme.rtl ? 'left' : 'right', borderColor, color, fill);
 };
 const sizeStyles$a = _ref2 => {
@@ -325,7 +325,7 @@ const sizeStyles$a = _ref2 => {
 };
 const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
@@ -336,7 +336,7 @@ const COMPONENT_ID$k = 'chrome.header';
 const colorStyles$7 = _ref => {
   let {
     theme,
-    isStandalone
+    $isStandalone
   } = _ref;
   const backgroundColor = reactTheming.getColor({
     theme,
@@ -350,7 +350,7 @@ const colorStyles$7 = _ref => {
     variable: 'shadow.small',
     theme
   });
-  const boxShadow = isStandalone ? theme.shadows.lg('0', `${theme.space.base * 2}px`, boxShadowColor) : undefined;
+  const boxShadow = $isStandalone ? theme.shadows.lg('0', `${theme.space.base * 2}px`, boxShadowColor) : undefined;
   const foregroundColor = reactTheming.getColor({
     theme,
     variable: 'foreground.subtle'
@@ -369,17 +369,17 @@ const sizeStyles$9 = _ref2 => {
 };
 const StyledHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
-})(["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', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
+})(["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', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 
 const COMPONENT_ID$j = 'chrome.header_item';
 const colorStyles$6 = _ref => {
   let {
     theme,
-    maxY
+    $maxY
   } = _ref;
   const options = {
     theme,
@@ -405,22 +405,22 @@ const colorStyles$6 = _ref => {
   });
   return styled.css(["&:hover,&:focus{color:inherit;}", ";&:hover ", ",&:hover ", "{color:", ";}&:active ", ",&:active ", "{color:", ";}"], reactTheming.focusStyles({
     theme,
-    inset: maxY
+    inset: $maxY
   }), StyledHeaderItemIcon, StyledHeaderItemText, hoverColor, StyledHeaderItemIcon, StyledHeaderItemText, activeColor);
 };
 const sizeStyles$8 = _ref2 => {
   let {
     theme,
-    isRound
+    $isRound
   } = _ref2;
-  const iconBorderRadius = isRound ? '100px' : undefined;
+  const iconBorderRadius = $isRound ? '100px' : undefined;
   const imageBorderRadius = polished.math(`${theme.borderRadii.md} - 1`);
   const imageSize = polished.math(`${getHeaderItemSize(theme)} - ${theme.space.base * 2}`);
   return styled.css(["img{margin:0;border-radius:", ";width:", ";height:", ";}", "{border-radius:", ";}"], imageBorderRadius, imageSize, imageSize, StyledHeaderItemIcon, iconBorderRadius);
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
@@ -429,7 +429,7 @@ const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
 const COMPONENT_ID$i = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -440,12 +440,12 @@ const COMPONENT_ID$h = 'chrome.nav';
 const colorStyles$5 = _ref => {
   let {
     theme,
-    hue
+    $hue
   } = _ref;
-  const shade = hue === 'chromeHue' ? 900 : undefined;
+  const shade = $hue === 'chromeHue' ? 900 : undefined;
   const backgroundColor = reactTheming.getColor({
     theme,
-    hue,
+    hue: $hue,
     shade
   });
   const foregroundColor = reactTheming.getColor({
@@ -462,15 +462,15 @@ const colorStyles$5 = _ref => {
 const sizeStyles$7 = _ref2 => {
   let {
     theme,
-    isExpanded
+    $isExpanded
   } = _ref2;
   const fontSize = theme.fontSizes.md;
-  const width = isExpanded ? getNavWidthExpanded() : getNavWidth(theme);
+  const width = $isExpanded ? getNavWidthExpanded() : getNavWidth(theme);
   return styled.css(["width:", ";font-size:", ";"], width, fontSize);
 };
 const StyledNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -479,7 +479,7 @@ const StyledNav = styled__default.default.nav.attrs({
 const COMPONENT_ID$g = 'chrome.nav_list';
 const StyledNavList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledNavList",
   componentId: "sc-1s0nkfb-0"
@@ -488,7 +488,7 @@ const StyledNavList = styled__default.default.ul.attrs({
 const COMPONENT_ID$f = 'chrome.nav_list_item';
 const StyledNavListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledNavListItem",
   componentId: "sc-18cj2v7-0"
@@ -506,7 +506,7 @@ const sizeStyles$6 = _ref => {
 };
 const StyledBaseNavItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -516,19 +516,19 @@ const COMPONENT_ID$d = 'chrome.logo_nav_list_item';
 const colorStyles$4 = _ref => {
   let {
     theme,
-    hue,
-    product
+    $hue,
+    $product
   } = _ref;
   const fillColor = reactTheming.getColor({
     theme,
     variable: 'foreground.default'
   });
-  const color = hue === 'chromeHue' ? getProductColor(product) : fillColor;
+  const color = $hue === 'chromeHue' ? getProductColor($product) : fillColor;
   return styled.css(["color:", ";fill:", ";"], color, fillColor);
 };
 const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"
@@ -537,7 +537,7 @@ const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
 const COMPONENT_ID$c = 'chrome.brandmark_nav_list_item';
 const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
   componentId: "sc-8kynd4-0"
@@ -553,7 +553,7 @@ const sizeStyles$5 = _ref => {
 };
 const StyledNavItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -563,7 +563,7 @@ const COMPONENT_ID$a = 'chrome.nav_button';
 const colorStyles$3 = _ref => {
   let {
     theme,
-    hue
+    $hue
   } = _ref;
   const activeBackgroundColor = reactTheming.getColor({
     theme,
@@ -575,9 +575,9 @@ const colorStyles$3 = _ref => {
     },
     transparency: theme.opacity[100]
   });
-  const currentBackgroundColor = hue === 'chromeHue' ? reactTheming.getColor({
+  const currentBackgroundColor = $hue === 'chromeHue' ? reactTheming.getColor({
     theme,
-    hue,
+    hue: $hue,
     shade: 700
   }) : reactTheming.getColor({
     theme,
@@ -622,54 +622,54 @@ const colorStyles$3 = _ref => {
 const sizeStyles$4 = _ref2 => {
   let {
     theme,
-    isExpanded
+    $isExpanded
   } = _ref2;
-  const iconMargin = isExpanded ? `0 ${polished.math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
+  const iconMargin = $isExpanded ? `0 ${polished.math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
   return styled.css(["margin:0;border:none;box-sizing:border-box;min-width:0;font-size:inherit;", "{margin:", ";}"], StyledNavItemIcon, iconMargin);
 };
 const StyledNavButton = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  '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$4, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, 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$4, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 
 const COMPONENT_ID$9 = 'chrome.nav_item_text';
 const sizeStyles$3 = _ref => {
   let {
     theme,
-    isExpanded,
-    isWrapped
+    $isExpanded,
+    $isWrapped
   } = _ref;
-  const clip = isExpanded ? 'auto' : undefined;
+  const clip = $isExpanded ? 'auto' : undefined;
   const lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-  const margin = isExpanded ? `0 ${polished.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 ${polished.math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
+  const width = $isExpanded ? 'auto' : undefined;
+  const height = $isExpanded ? 'auto' : undefined;
+  const whiteSpace = $isWrapped ? undefined : 'nowrap';
   return styled.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__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  '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$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, 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$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 
 const COMPONENT_ID$8 = 'chrome.sheet';
 const colorStyles$2 = _ref => {
   let {
     theme,
-    isOpen
+    $isOpen
   } = _ref;
   const backgroundColor = reactTheming.getColor({
     theme,
     variable: 'background.default'
   });
-  const borderColor = isOpen ? reactTheming.getColor({
+  const borderColor = $isOpen ? reactTheming.getColor({
     theme,
     variable: 'border.default'
   }) : 'transparent';
@@ -678,16 +678,16 @@ const colorStyles$2 = _ref => {
 const sizeStyles$2 = _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 = reactTheming.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'}`;
@@ -696,25 +696,25 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  '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$2, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.$isAnimated && 'width 250ms ease-in-out', sizeStyles$2, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 
 const COMPONENT_ID$7 = '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}%)`;
@@ -723,16 +723,16 @@ const transformStyles = _ref => {
 };
 const StyledSheetWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  '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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.$size, transformStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 
 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'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -744,7 +744,7 @@ const StyledSheetTitle = styled__default.default.div.attrs({
 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'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -756,7 +756,7 @@ const StyledSheetDescription = styled__default.default.div.attrs({
 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'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -773,7 +773,7 @@ const positionStyles = _ref => {
 };
 const StyledSheetClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -793,24 +793,24 @@ const colorStyles$1 = _ref => {
 const sizeStyles$1 = _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 styled.css(["border-top:", ";padding:", ";"], border, padding);
 };
 const StyledSheetFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  '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$1, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.$isCompact ? 'center' : 'flex-end', sizeStyles$1, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 
 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'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -830,11 +830,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}`;
   }
@@ -842,7 +842,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheetHeader = styled__default.default.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"
@@ -851,17 +851,26 @@ const StyledSheetHeader = styled__default.default.header.attrs({
 const HeaderItem = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     hasLogo,
+    isRound,
+    maxX,
+    maxY,
     product,
     ...other
   } = _ref;
   if (hasLogo) {
     return React__namespace.default.createElement(StyledLogoHeaderItem, Object.assign({
       ref: ref,
-      product: product
+      $isRound: isRound,
+      $maxX: maxX,
+      $maxY: maxY,
+      $product: product
     }, other));
   }
   return React__namespace.default.createElement(StyledHeaderItem, Object.assign({
-    ref: ref
+    ref: ref,
+    $isRound: isRound,
+    $maxX: maxX,
+    $maxY: maxY
   }, other));
 });
 HeaderItem.displayName = 'Header.Item';
@@ -882,9 +891,16 @@ const HeaderItemIcon = _ref => {
 };
 HeaderItemIcon.displayName = 'Header.ItemIcon';
 
-const HeaderItemText = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeaderItemText, Object.assign({
-  ref: ref
-}, props)));
+const HeaderItemText = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    isClipped,
+    ...other
+  } = _ref;
+  return React__namespace.default.createElement(StyledHeaderItemText, Object.assign({
+    ref: ref,
+    $isClipped: isClipped
+  }, other));
+});
 HeaderItemText.displayName = 'Header.ItemText';
 HeaderItemText.propTypes = {
   isClipped: PropTypes__default.default.bool
@@ -939,8 +955,8 @@ const NavItem = React__namespace.default.forwardRef((_ref, ref) => {
   if (hasLogo) {
     retVal = React__namespace.default.createElement(StyledLogoNavItem, Object.assign({
       ref: ref,
-      hue: hue,
-      product: product
+      $hue: hue,
+      $product: product
     }, other));
   } else if (hasBrandmark) {
     retVal = React__namespace.default.createElement(StyledBrandmarkNavItem, Object.assign({
@@ -950,8 +966,8 @@ const NavItem = React__namespace.default.forwardRef((_ref, ref) => {
     retVal = React__namespace.default.createElement(StyledNavButton, Object.assign({
       tabIndex: 0,
       ref: ref,
-      isExpanded: isExpanded,
-      hue: hue,
+      $isExpanded: isExpanded,
+      $hue: hue,
       "aria-current": isCurrent || undefined
     }, other));
   }
@@ -976,14 +992,19 @@ const NavItemIcon = _ref => {
 };
 NavItemIcon.displayName = 'Nav.ItemIcon';
 
-const NavItemText = React__namespace.default.forwardRef((props, ref) => {
+const NavItemText = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    isWrapped,
+    ...other
+  } = _ref;
   const {
     isExpanded
   } = useNavContext();
   return React__namespace.default.createElement(StyledNavItemText, Object.assign({
     ref: ref,
-    isExpanded: isExpanded
-  }, props));
+    $isExpanded: isExpanded,
+    $isWrapped: isWrapped
+  }, other));
 });
 NavItemText.displayName = 'Nav.ItemText';
 NavItemText.propTypes = {
@@ -1047,7 +1068,7 @@ const SkipNav = React__namespace.default.forwardRef((_ref, ref) => {
   } = _ref;
   return React__namespace.default.createElement(StyledSkipNav, Object.assign({
     href: `#${targetId}`,
-    zIndex: zIndex,
+    $zIndex: zIndex,
     ref: ref
   }, props), React__namespace.default.createElement(StyledSkipNavIcon, null), children);
 });
@@ -1085,7 +1106,7 @@ const Content = React__namespace.default.forwardRef((props, ref) => {
   } = useBodyContext() || {};
   return React__namespace.default.createElement(StyledContent, Object.assign({
     ref: ref,
-    hasFooter: hasFooter
+    $hasFooter: hasFooter
   }, props));
 });
 Content.displayName = 'Content';
@@ -1095,9 +1116,16 @@ const Main = React__namespace.default.forwardRef((props, ref) => React__namespac
 }, props)));
 Main.displayName = 'Main';
 
-const HeaderComponent = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledHeader, Object.assign({
-  ref: ref
-}, props)));
+const HeaderComponent = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    isStandalone,
+    ...other
+  } = _ref;
+  return React__namespace.default.createElement(StyledHeader, Object.assign({
+    ref: ref,
+    $isStandalone: isStandalone
+  }, other));
+});
 HeaderComponent.displayName = 'Header';
 HeaderComponent.propTypes = {
   isStandalone: PropTypes__default.default.bool
@@ -1143,14 +1171,18 @@ const NavList = React__namespace.default.forwardRef((props, ref) => {
 });
 NavList.displayName = 'Nav.List';
 
-const NavComponent = React__namespace.default.forwardRef((props, ref) => {
+const NavComponent = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    isExpanded,
+    ...other
+  } = _ref;
   const {
     hue,
     isLight
   } = useChromeContext();
   const navContextValue = React.useMemo(() => ({
-    isExpanded: !!props.isExpanded
-  }), [props.isExpanded]);
+    isExpanded: !!isExpanded
+  }), [isExpanded]);
   return React__namespace.default.createElement(styled.ThemeProvider, {
     theme: parentTheme => ({
       ...parentTheme,
@@ -1162,10 +1194,10 @@ const NavComponent = React__namespace.default.forwardRef((props, ref) => {
   }, React__namespace.default.createElement(NavContext.Provider, {
     value: navContextValue
   }, React__namespace.default.createElement(StyledNav, Object.assign({
-    ref: ref
-  }, props, {
-    hue: hue
-  }))));
+    ref: ref,
+    $isExpanded: isExpanded,
+    $hue: hue
+  }, other))));
 });
 NavComponent.displayName = 'Nav';
 NavComponent.propTypes = {
@@ -1243,7 +1275,7 @@ const SheetHeader = React.forwardRef((props, ref) => {
   } = useSheetContext();
   return React__namespace.default.createElement(StyledSheetHeader, Object.assign({
     ref: ref,
-    isCloseButtonPresent: isCloseButtonPresent
+    $isCloseButtonPresent: isCloseButtonPresent
   }, props));
 });
 SheetHeader.displayName = 'Sheet.Header';
@@ -1257,10 +1289,15 @@ const SheetBody = React.forwardRef((props, ref) => {
 SheetBody.displayName = 'Sheet.Body';
 const Body = SheetBody;
 
-const SheetFooter = React.forwardRef((props, ref) => {
+const SheetFooter = React.forwardRef((_ref, ref) => {
+  let {
+    isCompact,
+    ...other
+  } = _ref;
   return React__namespace.default.createElement(StyledSheetFooter, Object.assign({
-    ref: ref
-  }, props));
+    ref: ref,
+    $isCompact: isCompact
+  }, other));
 });
 SheetFooter.displayName = 'Sheet.Footer';
 const Footer = SheetFooter;
@@ -1321,7 +1358,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'}`), [id, seed]);
+  const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.1.0'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = React.useMemo(() => ({
@@ -1340,20 +1377,20 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
     value: sheetContext
   }, React__namespace.default.createElement(StyledSheet, Object.assign({
     inert: isOpen ? undefined : '',
-    isOpen: isOpen,
-    isAnimated: isAnimated,
-    placement: placement,
-    size: size,
+    $isOpen: isOpen,
+    $isAnimated: isAnimated,
+    $placement: placement,
+    $size: size,
     tabIndex: -1,
     id: idPrefix,
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId,
     ref: reactMergeRefs.mergeRefs([sheetRef, ref])
   }, props), React__namespace.default.createElement(StyledSheetWrapper, {
-    isOpen: isOpen,
-    isAnimated: isAnimated,
-    placement: placement,
-    size: size
+    $isOpen: isOpen,
+    $isAnimated: isAnimated,
+    $placement: placement,
+    $size: size
   }, children)));
 });
 SheetComponent.displayName = 'Sheet';