@zendeskgarden/react-chrome 9.3.0 → 9.5.0

package/dist/esm/styled/StyledChrome.js

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.chrome';
 const StyledChrome = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).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, 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', componentStyles);
 
 export { StyledChrome };

package/dist/esm/styled/StyledSkipNav.js

@@ -6,7 +6,7 @@
 */
 import styled, { keyframes, css } from 'styled-components';
 import { math } from 'polished';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { getHeaderHeight } from './utils.js';
 
 const COMPONENT_ID = 'chrome.skipnav';
@@ -55,10 +55,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledSkipNav = styled.a.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, 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, SELECTOR_FOCUS_VISIBLE, colorStyles, componentStyles);
 
 export { StyledSkipNav };

package/dist/esm/styled/StyledSkipNavIcon.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import SvgLinkStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js';
-import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.skipnav_icon';
 const sizeStyles = _ref => {
@@ -19,13 +19,13 @@ const sizeStyles = _ref => {
 };
 const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
 })(["transform:", ";color:", ";", ";", ";"], p => p.theme.rtl && 'scaleX(-1)', p => getColor({
   theme: p.theme,
   variable: 'foreground.subtle'
-}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+}), sizeStyles, componentStyles);
 
 export { StyledSkipNavIcon };

package/dist/esm/styled/body/StyledBody.js

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.body';
 const StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
 })(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColor({
   theme: props.theme,
   variable: 'background.default'
-}), props => retrieveComponentStyles(COMPONENT_ID, props));
+}), componentStyles);
 
 export { StyledBody };

package/dist/esm/styled/body/StyledContent.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getColor, retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { getColor, componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { getHeaderHeight, getFooterHeight } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.content';
@@ -22,13 +22,13 @@ const sizeStyles = _ref => {
 };
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
 })(["display:flex;color-scheme:only ", ";color:", ";", ";&:focus{outline:none;}", ";"], p => p.theme.colors.base, props => getColor({
   theme: props.theme,
   variable: 'foreground.default'
-}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+}), sizeStyles, componentStyles);
 
 export { StyledContent };

package/dist/esm/styled/body/StyledMain.js

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.main';
 const StyledMain = styled.main.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
 })(["flex:1;order:1;background-color:", ";overflow:auto;&:focus{outline:none;}", ";"], props => getColor({
   theme: props.theme,
   variable: 'background.default'
-}), props => retrieveComponentStyles(COMPONENT_ID, props));
+}), componentStyles);
 
 export { StyledMain };

package/dist/esm/styled/footer/StyledFooter.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { getFooterHeight } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.footer';
@@ -34,10 +34,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
-})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
 
 export { StyledFooter };

package/dist/esm/styled/footer/StyledFooterItem.js

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.footer_item';
 const StyledFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
-})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, componentStyles);
 
 export { StyledFooterItem };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { getHeaderItemSize } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.base_header_item';
@@ -32,10 +32,10 @@ const sizeStyles = _ref => {
 };
 const StyledBaseHeaderItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, props => retrieveComponentStyles(COMPONENT_ID, 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, componentStyles);
 
 export { StyledBaseHeaderItem };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledLogoHeaderItem } from './StyledLogoHeaderItem.js';
 import { getHeaderHeight } from '../utils.js';
 
@@ -46,10 +46,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).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', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.$isStandalone && 'relative', sizeStyles, colorStyles, StyledLogoHeaderItem, props => props.$isStandalone && 'inline-flex', componentStyles);
 
 export { StyledHeader };

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

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
 import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
 import { StyledHeaderItemText } from './StyledHeaderItemText.js';
@@ -57,10 +57,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["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);
 
 export { StyledHeaderItem };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.header_item_icon';
 const sizeStyles = _ref => {
@@ -18,10 +18,10 @@ const sizeStyles = _ref => {
 };
 const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
-})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles, componentStyles);
 
 export { StyledHeaderItemIcon };

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

@@ -6,15 +6,15 @@
 */
 import styled from 'styled-components';
 import { hideVisually } from 'polished';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.header_item_text';
 const StyledHeaderItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
-})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.$isClipped && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.$isClipped && hideVisually(), componentStyles);
 
 export { StyledHeaderItemText };

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

@@ -5,17 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 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.3.0',
+  'data-garden-version': '9.5.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
   componentId: "sc-1uieu55-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";"], componentStyles);
 
 export { StyledHeaderItemWrapper };

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

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { hideVisually } from 'polished';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
 import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
 import { StyledHeaderItemText } from './StyledHeaderItemText.js';
@@ -42,11 +42,11 @@ const sizeStyles = _ref2 => {
 };
 const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0',
+  'data-garden-version': '9.5.0',
   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(), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles, colorStyles, StyledHeaderItemText, hideVisually(), componentStyles);
 
 export { 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.3.0'
+  'data-garden-version': '9.5.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.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
   componentId: "sc-8kynd4-0"

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

@@ -25,7 +25,7 @@ const colorStyles = _ref => {
 };
 const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledLogoNavItem",
   componentId: "sc-saaydx-0"

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { getNavWidthExpanded, getNavWidth } from '../utils.js';
 
 const COMPONENT_ID = 'chrome.nav';
@@ -42,10 +42,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
-})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles, sizeStyles, componentStyles);
 
 export { StyledNav };

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

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledBaseNavItem } from './StyledBaseNavItem.js';
 import { StyledNavItemIcon } from './StyledNavItemIcon.js';
 import { getNavWidth } from '../utils.js';
@@ -81,11 +81,11 @@ const sizeStyles = _ref2 => {
 };
 const StyledNavButton = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0',
+  'data-garden-version': '9.5.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, componentStyles);
 
 export { StyledNavButton };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.nav_item_icon';
 const sizeStyles = _ref => {
@@ -17,10 +17,10 @@ const sizeStyles = _ref => {
 };
 const StyledNavItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
-})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles, componentStyles);
 
 export { StyledNavItemIcon };

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

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledNavButton } from './StyledNavButton.js';
 import { getNavWidth } from '../utils.js';
 
@@ -27,10 +27,10 @@ const sizeStyles = _ref => {
 };
 const StyledNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, componentStyles);
 
 export { StyledNavItemText };

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

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.nav_list';
 const StyledNavList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledNavList",
   componentId: "sc-1s0nkfb-0"
-})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], componentStyles);
 
 export { StyledNavList };

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

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } 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.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledNavListItem",
   componentId: "sc-18cj2v7-0"
-})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], componentStyles);
 
 export { StyledNavListItem };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet';
 const colorStyles = _ref => {
@@ -44,10 +44,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, componentStyles);
 
 export { StyledSheet };

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

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_body';
 const StyledSheetBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
-})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, componentStyles);
 
 export { StyledSheetBody };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 import { IconButton } from '@zendeskgarden/react-buttons';
 
 const COMPONENT_ID = 'chrome.sheet_close';
@@ -19,10 +19,10 @@ const positionStyles = _ref => {
 };
 const StyledSheetClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
-})(["position:absolute;", ";", ";"], positionStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;", ";", ";"], positionStyles, componentStyles);
 
 export { StyledSheetClose };

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

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_description';
 const StyledSheetDescription = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
 })(["line-height:", ";color:", ";", ";"], p => getLineHeight(p.theme.space.base * 4, p.theme.fontSizes.md), p => getColor({
   theme: p.theme,
   variable: 'foreground.subtle'
-}), props => retrieveComponentStyles(COMPONENT_ID, props));
+}), componentStyles);
 
 export { StyledSheetDescription };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_footer';
 const colorStyles = _ref => {
@@ -29,10 +29,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, componentStyles);
 
 export { StyledSheetFooter };

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

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } 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.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
-})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, componentStyles);
 
 export { StyledSheetFooterItem };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_header';
 const colorStyles = _ref => {
@@ -33,10 +33,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
 
 export { StyledSheetHeader };

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

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_title';
 const StyledSheetTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
 })(["color:", ";font-weight:", ";", ";"], p => getColor({
   theme: p.theme,
   variable: 'foreground.default'
-}), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+}), props => props.theme.fontWeights.semibold, componentStyles);
 
 export { StyledSheetTitle };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_wrapper';
 const transformStyles = _ref => {
@@ -28,10 +28,10 @@ const transformStyles = _ref => {
 };
 const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, componentStyles);
 
 export { StyledSheetWrapper };

package/dist/index.cjs.js

@@ -47,11 +47,11 @@ 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.3.0'
+  'data-garden-version': '9.5.0'
 }).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$w, 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', reactTheming.componentStyles);
 
 const getFooterHeight = theme => `${theme.space.base * 20}px`;
 const getHeaderHeight = theme => `${theme.space.base * 13}px`;
@@ -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.3.0'
+  'data-garden-version': '9.5.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, reactTheming.componentStyles);
 
 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,26 +143,26 @@ const sizeStyles$f = _ref => {
 };
 const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
 })(["transform:", ";color:", ";", ";", ";"], p => p.theme.rtl && 'scaleX(-1)', p => reactTheming.getColor({
   theme: p.theme,
   variable: 'foreground.subtle'
-}), sizeStyles$f, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
+}), sizeStyles$f, reactTheming.componentStyles);
 
 const COMPONENT_ID$t = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
 })(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColor({
   theme: props.theme,
   variable: 'background.default'
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
+}), reactTheming.componentStyles);
 
 const COMPONENT_ID$s = 'chrome.content';
 const sizeStyles$e = _ref => {
@@ -177,26 +177,26 @@ const sizeStyles$e = _ref => {
 };
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
 })(["display:flex;color-scheme:only ", ";color:", ";", ";&:focus{outline:none;}", ";"], p => p.theme.colors.base, props => reactTheming.getColor({
   theme: props.theme,
   variable: 'foreground.default'
-}), sizeStyles$e, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
+}), sizeStyles$e, reactTheming.componentStyles);
 
 const COMPONENT_ID$r = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
 })(["flex:1;order:1;background-color:", ";overflow:auto;&:focus{outline:none;}", ";"], props => reactTheming.getColor({
   theme: props.theme,
   variable: 'background.default'
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
+}), reactTheming.componentStyles);
 
 const COMPONENT_ID$q = 'chrome.footer';
 const colorStyles$9 = _ref => {
@@ -224,20 +224,20 @@ const sizeStyles$d = _ref2 => {
 };
 const StyledFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
-})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles$d, colorStyles$9, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
+})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles$d, colorStyles$9, reactTheming.componentStyles);
 
 const COMPONENT_ID$p = 'chrome.footer_item';
 const StyledFooterItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
-})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
+})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, reactTheming.componentStyles);
 
 const COMPONENT_ID$o = 'chrome.header_item_icon';
 const sizeStyles$c = _ref => {
@@ -250,11 +250,11 @@ const sizeStyles$c = _ref => {
 };
 const StyledHeaderItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
-})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles$c, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
+})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles$c, reactTheming.componentStyles);
 
 const COMPONENT_ID$n = 'chrome.base_header_item';
 const sizeStyles$b = _ref => {
@@ -280,20 +280,20 @@ const sizeStyles$b = _ref => {
 };
 const StyledBaseHeaderItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, reactTheming.componentStyles);
 
 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.3.0'
+  'data-garden-version': '9.5.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(), reactTheming.componentStyles);
 
 const COMPONENT_ID$l = 'chrome.header_item';
 const colorStyles$8 = _ref => {
@@ -325,12 +325,12 @@ const sizeStyles$a = _ref2 => {
 };
 const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.3.0',
+  'data-garden-version': '9.5.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
   componentId: "sc-1n1d1yv-0"
-})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles$a, colorStyles$8, StyledHeaderItemText, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles$a, colorStyles$8, StyledHeaderItemText, polished.hideVisually(), reactTheming.componentStyles);
 
 const COMPONENT_ID$k = 'chrome.header';
 const colorStyles$7 = _ref => {
@@ -369,11 +369,11 @@ const sizeStyles$9 = _ref2 => {
 };
 const StyledHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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', reactTheming.componentStyles);
 
 const COMPONENT_ID$j = 'chrome.header_item';
 const colorStyles$6 = _ref => {
@@ -420,21 +420,21 @@ const sizeStyles$8 = _ref2 => {
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).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$8, colorStyles$6, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
+})(["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, reactTheming.componentStyles);
 
 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.3.0',
+  'data-garden-version': '9.5.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
   componentId: "sc-1uieu55-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
+})(["", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$h = 'chrome.nav';
 const colorStyles$5 = _ref => {
@@ -470,29 +470,29 @@ const sizeStyles$7 = _ref2 => {
 };
 const StyledNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
-})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles$5, sizeStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles$5, sizeStyles$7, reactTheming.componentStyles);
 
 const COMPONENT_ID$g = 'chrome.nav_list';
 const StyledNavList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledNavList",
   componentId: "sc-1s0nkfb-0"
-})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], reactTheming.componentStyles);
 
 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.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledNavListItem",
   componentId: "sc-18cj2v7-0"
-})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$e = 'chrome.base_nav_item';
 const sizeStyles$6 = _ref => {
@@ -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.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -528,7 +528,7 @@ const colorStyles$4 = _ref => {
 };
 const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
   componentId: "sc-8kynd4-0"
@@ -553,11 +553,11 @@ const sizeStyles$5 = _ref => {
 };
 const StyledNavItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
-})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles$5, reactTheming.componentStyles);
 
 const COMPONENT_ID$a = 'chrome.nav_button';
 const colorStyles$3 = _ref => {
@@ -629,12 +629,12 @@ const sizeStyles$4 = _ref2 => {
 };
 const StyledNavButton = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.3.0',
+  'data-garden-version': '9.5.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, reactTheming.componentStyles);
 
 const COMPONENT_ID$9 = 'chrome.nav_item_text';
 const sizeStyles$3 = _ref => {
@@ -653,11 +653,11 @@ const sizeStyles$3 = _ref => {
 };
 const StyledNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, reactTheming.componentStyles);
 
 const COMPONENT_ID$8 = 'chrome.sheet';
 const colorStyles$2 = _ref => {
@@ -696,11 +696,11 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, reactTheming.componentStyles);
 
 const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
 const transformStyles = _ref => {
@@ -723,44 +723,44 @@ const transformStyles = _ref => {
 };
 const StyledSheetWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, reactTheming.componentStyles);
 
 const COMPONENT_ID$6 = 'chrome.sheet_title';
 const StyledSheetTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
 })(["color:", ";font-weight:", ";", ";"], p => reactTheming.getColor({
   theme: p.theme,
   variable: 'foreground.default'
-}), props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+}), props => props.theme.fontWeights.semibold, reactTheming.componentStyles);
 
 const COMPONENT_ID$5 = 'chrome.sheet_description';
 const StyledSheetDescription = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
 })(["line-height:", ";color:", ";", ";"], p => reactTheming.getLineHeight(p.theme.space.base * 4, p.theme.fontSizes.md), p => reactTheming.getColor({
   theme: p.theme,
   variable: 'foreground.subtle'
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+}), reactTheming.componentStyles);
 
 const COMPONENT_ID$4 = 'chrome.sheet_body';
 const StyledSheetBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
-})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, reactTheming.componentStyles);
 
 const COMPONENT_ID$3 = 'chrome.sheet_close';
 const positionStyles = _ref => {
@@ -773,11 +773,11 @@ const positionStyles = _ref => {
 };
 const StyledSheetClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
-})(["position:absolute;", ";", ";"], positionStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["position:absolute;", ";", ";"], positionStyles, reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'chrome.sheet_footer';
 const colorStyles$1 = _ref => {
@@ -801,20 +801,20 @@ const sizeStyles$1 = _ref2 => {
 };
 const StyledSheetFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.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, reactTheming.componentStyles);
 
 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.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
-})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, reactTheming.componentStyles);
 
 const COMPONENT_ID = 'chrome.sheet_header';
 const colorStyles = _ref => {
@@ -842,11 +842,11 @@ const sizeStyles = _ref2 => {
 };
 const StyledSheetHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.3.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["", ";", ";", ";"], sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";", ";", ";"], sizeStyles, colorStyles, reactTheming.componentStyles);
 
 const HeaderItem = React__namespace.default.forwardRef((_ref, ref) => {
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-chrome",
-  "version": "9.3.0",
+  "version": "9.5.0",
   "description": "Components relating to Chrome within the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.3.0",
+    "@zendeskgarden/react-buttons": "^9.5.0",
     "dom-helpers": "^5.2.1",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
@@ -35,8 +35,8 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.3.0",
-    "@zendeskgarden/svg-icons": "7.3.0"
+    "@zendeskgarden/react-theming": "^9.5.0",
+    "@zendeskgarden/svg-icons": "7.5.0"
   },
   "keywords": [
     "components",
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "fa6461e0d9fae27956980056006e8013daedc6b9"
+  "gitHead": "43546784a9aa985332ddcc6dd09209a11e2c03ff"
 }