@zendeskgarden/react-accordions 9.4.0 → 9.5.0

package/dist/esm/styled/accordion/StyledAccordion.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 = 'accordions.accordion';
 const StyledAccordion = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";"], componentStyles);
 
 export { StyledAccordion };

package/dist/esm/styled/accordion/StyledButton.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.button';
 const colorStyles = _ref => {
@@ -24,10 +24,10 @@ const colorStyles = _ref => {
 };
 const StyledButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
-})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.$isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.$isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', componentStyles);
 
 export { COMPONENT_ID, StyledButton };

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

@@ -5,13 +5,13 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { focusStyles, componentStyles } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton.js';
 
 const COMPONENT_ID = 'accordions.header';
 const StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -19,6 +19,6 @@ const StyledHeader = styled.div.attrs({
   theme: props.theme,
   inset: true,
   selector: `&:has(${StyledButton}:focus-visible)`
-}), props => retrieveComponentStyles(COMPONENT_ID, props));
+}), componentStyles);
 
 export { StyledHeader };

package/dist/esm/styled/accordion/StyledInnerPanel.js

@@ -5,16 +5,16 @@
 * 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 { StyledPanel } from './StyledPanel.js';
 
 const COMPONENT_ID = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
-})(["overflow:hidden;line-height:inherit;font-size:inherit;", "[aria-hidden='true'] > &{transition:", ";visibility:hidden;}", "[aria-hidden='false'] > &{visibility:visible;}", ";"], StyledPanel, props => props.$isAnimated && 'visibility 0s 0.25s', StyledPanel, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["overflow:hidden;line-height:inherit;font-size:inherit;", "[aria-hidden='true'] > &{transition:", ";visibility:hidden;}", "[aria-hidden='false'] > &{visibility:visible;}", ";"], StyledPanel, props => props.$isAnimated && 'visibility 0s 0.25s', StyledPanel, componentStyles);
 
 export { StyledInnerPanel };

package/dist/esm/styled/accordion/StyledPanel.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.panel';
 const colorStyles = _ref => {
@@ -43,11 +43,11 @@ const sizeStyles = props => {
 };
 const StyledPanel = styled.section.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
-})(["display:grid;transition:", ";overflow:hidden;", " ", " ", ";"], props => props.$isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:grid;transition:", ";overflow:hidden;", " ", " ", ";"], props => props.$isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out', sizeStyles, colorStyles, componentStyles);
 StyledPanel.defaultProps = {
   $isAnimated: true,
   theme: DEFAULT_THEME

package/dist/esm/styled/accordion/StyledRotateIcon.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.rotate_icon';
 const colorStyles = _ref => {
@@ -24,10 +24,10 @@ const colorStyles = _ref => {
 };
 const StyledRotateIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:", ";width:", ";min-width:", ";height:", ";vertical-align:middle;", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => props.$isCompact ? `${props.theme.space.base * 1.5}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:", ";width:", ";min-width:", ";height:", ";vertical-align:middle;", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => props.$isCompact ? `${props.theme.space.base * 1.5}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, colorStyles, componentStyles);
 
 export { StyledRotateIcon };

package/dist/esm/styled/accordion/StyledSection.js

@@ -5,16 +5,16 @@
 * 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 { StyledPanel } from './StyledPanel.js';
 
 const COMPONENT_ID = 'accordions.section';
 const StyledSection = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
-})(["&:last-child ", "{border:none;}", ";"], StyledPanel, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["&:last-child ", "{border:none;}", ";"], StyledPanel, componentStyles);
 
 export { StyledSection };

package/dist/esm/styled/stepper/StyledContent.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 = 'accordions.step_content';
 const sizeStyles = props => {
@@ -23,10 +23,10 @@ const sizeStyles = props => {
 };
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
-})(["display:grid;grid-template-rows:", "fr;transition:grid-template-rows 0.25s ease-in-out;word-break:break-word;", " ", ";"], props => props.$isActive ? 1 : 0, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:grid;grid-template-rows:", "fr;transition:grid-template-rows 0.25s ease-in-out;word-break:break-word;", " ", ";"], props => props.$isActive ? 1 : 0, sizeStyles, componentStyles);
 
 export { StyledContent };

package/dist/esm/styled/stepper/StyledIcon.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_icon';
 const StyledIconFlexContainer = styled.div.withConfig({
@@ -46,10 +46,10 @@ const colorStyles = _ref => {
 };
 const StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
-})(["display:flex;align-items:center;justify-content:center;transition:background 0.25s ease-in-out,color 0.25s ease-in-out;border-radius:100%;", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;align-items:center;justify-content:center;transition:background 0.25s ease-in-out,color 0.25s ease-in-out;border-radius:100%;", " ", " ", ";"], sizeStyles, colorStyles, componentStyles);
 
 export { StyledIcon, StyledIconFlexContainer };

package/dist/esm/styled/stepper/StyledInnerContent.js

@@ -5,12 +5,12 @@
 * 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 = 'accordions.step_inner_content';
 const StyledInnerContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -22,6 +22,6 @@ const StyledInnerContent = styled.div.attrs({
     theme,
     variable: 'foreground.default'
   });
-}, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+}, props => props.theme.fontSizes.md, componentStyles);
 
 export { StyledInnerContent };

package/dist/esm/styled/stepper/StyledLabel.js

@@ -5,12 +5,12 @@
 * 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 = 'accordions.step_label';
 const StyledLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -23,6 +23,6 @@ const StyledLabel = styled.div.attrs({
     theme,
     variable: $isActive ? 'foreground.default' : 'foreground.subtle'
   });
-}, props => props.theme.fontSizes.md, props => props.$isActive && 600, props => retrieveComponentStyles(COMPONENT_ID, props));
+}, props => props.theme.fontSizes.md, props => props.$isActive && 600, componentStyles);
 
 export { StyledLabel };

package/dist/esm/styled/stepper/StyledLabelText.js

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 const COMPONENT_ID = 'accordions.step_label_text';
 const StyledLabelText = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"

package/dist/esm/styled/stepper/StyledLine.js

@@ -10,7 +10,7 @@ import { getColor } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'accordions.step_line';
 const StyledLine = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"

package/dist/esm/styled/stepper/StyledStep.js

@@ -5,14 +5,14 @@
 * 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';
 import { StyledContent } from './StyledContent.js';
 import { StyledLine } from './StyledLine.js';
 
 const COMPONENT_ID = 'accordions.step';
 const StyledStep = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -24,6 +24,6 @@ const StyledStep = styled.li.attrs({
     theme,
     variable: 'border.default'
   });
-}, props => retrieveComponentStyles(COMPONENT_ID, props));
+}, componentStyles);
 
 export { StyledStep };

package/dist/esm/styled/stepper/StyledStepper.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 = 'accordions.stepper';
 const StyledStepper = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
-})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.$isHorizontal && 'flex', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.$isHorizontal && 'flex', componentStyles);
 
 export { StyledStepper };

package/dist/esm/styled/timeline/StyledContent.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 = 'timeline.content';
 const StyledTimelineContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
-})(["flex:1;padding:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex:1;padding:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, componentStyles);
 
 export { StyledTimelineContent };

package/dist/esm/styled/timeline/StyledItem.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-theming';
 import { StyledSeparator } from './StyledSeparator.js';
 import { StyledTimelineContent } from './StyledContent.js';
 import { StyledOppositeContent } from './StyledOppositeContent.js';
@@ -13,7 +13,7 @@ import { StyledOppositeContent } from './StyledOppositeContent.js';
 const COMPONENT_ID = 'timeline.item';
 const StyledTimelineItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -25,6 +25,6 @@ const StyledTimelineItem = styled.li.attrs({
     theme,
     variable: 'foreground.default'
   });
-}, props => props.theme.fontSizes.md, StyledSeparator, props => !props.$hasOppositeContent && props.$isAlternate && css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => props.$isAlternate && css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), props => retrieveComponentStyles(COMPONENT_ID, props));
+}, props => props.theme.fontSizes.md, StyledSeparator, props => !props.$hasOppositeContent && props.$isAlternate && css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => props.$isAlternate && css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), componentStyles);
 
 export { StyledTimelineItem };

package/dist/esm/styled/timeline/StyledItemIcon.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.icon';
 const colorStyles = _ref => {
@@ -34,10 +34,10 @@ const colorStyles = _ref => {
 };
 const StyledItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
-})(["z-index:1;box-sizing:content-box;padding:", "px 0;width:", ";height:", ";", " ", ";"], props => props.theme.space.base, props => math(`${props.theme.iconSizes.sm} + 1`), props => math(`${props.theme.iconSizes.sm} + 1`), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["z-index:1;box-sizing:content-box;padding:", "px 0;width:", ";height:", ";", " ", ";"], props => props.theme.space.base, props => math(`${props.theme.iconSizes.sm} + 1`), props => math(`${props.theme.iconSizes.sm} + 1`), colorStyles, componentStyles);
 
 export { StyledItemIcon };

package/dist/esm/styled/timeline/StyledOppositeContent.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 = 'timeline.opposite.content';
 const StyledOppositeContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
-})(["flex:1;padding:", ";text-align:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => props.theme.rtl ? 'left' : 'right', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex:1;padding:", ";text-align:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => props.theme.rtl ? 'left' : 'right', componentStyles);
 
 export { StyledOppositeContent };

package/dist/esm/styled/timeline/StyledSeparator.js

@@ -5,12 +5,12 @@
 * 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 = 'timeline.content.separator';
 const StyledSeparator = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -22,6 +22,6 @@ const StyledSeparator = styled.div.attrs({
     theme,
     variable: 'border.emphasis'
   })}`;
-}, props => retrieveComponentStyles(COMPONENT_ID, props));
+}, componentStyles);
 
 export { StyledSeparator };

package/dist/esm/styled/timeline/StyledTimeline.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 = 'timeline';
 const StyledTimeline = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
-})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["margin:0;padding:0;list-style:none;", ";"], componentStyles);
 
 export { StyledTimeline };

package/dist/index.cjs.js

@@ -54,16 +54,16 @@ const sizeStyles$2 = props => {
 };
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
-})(["display:grid;grid-template-rows:", "fr;transition:grid-template-rows 0.25s ease-in-out;word-break:break-word;", " ", ";"], props => props.$isActive ? 1 : 0, sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
+})(["display:grid;grid-template-rows:", "fr;transition:grid-template-rows 0.25s ease-in-out;word-break:break-word;", " ", ";"], props => props.$isActive ? 1 : 0, sizeStyles$2, reactTheming.componentStyles);
 
 const COMPONENT_ID$j = 'accordions.step_line';
 const StyledLine = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -80,7 +80,7 @@ const StyledLine = styled__default.default.div.attrs({
 const COMPONENT_ID$i = 'accordions.step';
 const StyledStep = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -92,12 +92,12 @@ const StyledStep = styled__default.default.li.attrs({
     theme,
     variable: 'border.default'
   });
-}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
+}, reactTheming.componentStyles);
 
 const COMPONENT_ID$h = 'accordions.step_inner_content';
 const StyledInnerContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -109,16 +109,16 @@ const StyledInnerContent = styled__default.default.div.attrs({
     theme,
     variable: 'foreground.default'
   });
-}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+}, props => props.theme.fontSizes.md, reactTheming.componentStyles);
 
 const COMPONENT_ID$g = 'accordions.stepper';
 const StyledStepper = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
-})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.$isHorizontal && 'flex', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["display:", ";margin:0;padding:0;list-style:none;", ";"], props => props.$isHorizontal && 'flex', reactTheming.componentStyles);
 
 const COMPONENT_ID$f = 'accordions.step_icon';
 const StyledIconFlexContainer = styled__default.default.div.withConfig({
@@ -159,16 +159,16 @@ const colorStyles$4 = _ref => {
 };
 const StyledIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
-})(["display:flex;align-items:center;justify-content:center;transition:background 0.25s ease-in-out,color 0.25s ease-in-out;border-radius:100%;", " ", " ", ";"], sizeStyles$1, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["display:flex;align-items:center;justify-content:center;transition:background 0.25s ease-in-out,color 0.25s ease-in-out;border-radius:100%;", " ", " ", ";"], sizeStyles$1, colorStyles$4, reactTheming.componentStyles);
 
 const COMPONENT_ID$e = 'accordions.step_label';
 const StyledLabel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -181,12 +181,12 @@ const StyledLabel = styled__default.default.div.attrs({
     theme,
     variable: $isActive ? 'foreground.default' : 'foreground.subtle'
   });
-}, props => props.theme.fontSizes.md, props => props.$isActive && 600, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+}, props => props.theme.fontSizes.md, props => props.$isActive && 600, reactTheming.componentStyles);
 
 const COMPONENT_ID$d = 'accordions.step_label_text';
 const StyledLabelText = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -195,11 +195,11 @@ const StyledLabelText = styled__default.default.div.attrs({
 const COMPONENT_ID$c = 'accordions.accordion';
 const StyledAccordion = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$b = 'accordions.panel';
 const colorStyles$3 = _ref => {
@@ -237,11 +237,11 @@ const sizeStyles = props => {
 };
 const StyledPanel = styled__default.default.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
-})(["display:grid;transition:", ";overflow:hidden;", " ", " ", ";"], props => props.$isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out', sizeStyles, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["display:grid;transition:", ";overflow:hidden;", " ", " ", ";"], props => props.$isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out', sizeStyles, colorStyles$3, reactTheming.componentStyles);
 StyledPanel.defaultProps = {
   $isAnimated: true,
   theme: reactTheming.DEFAULT_THEME
@@ -250,11 +250,11 @@ StyledPanel.defaultProps = {
 const COMPONENT_ID$a = 'accordions.section';
 const StyledSection = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
-})(["&:last-child ", "{border:none;}", ";"], StyledPanel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
+})(["&:last-child ", "{border:none;}", ";"], StyledPanel, reactTheming.componentStyles);
 
 const COMPONENT_ID$9 = 'accordions.button';
 const colorStyles$2 = _ref => {
@@ -273,16 +273,16 @@ const colorStyles$2 = _ref => {
 };
 const StyledButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
-})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.$isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$2, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:", ";width:100%;text-align:", ";line-height:", ";font-family:inherit;font-size:", ";font-weight:", ";", " &::-moz-focus-inner{border:0;}&:hover{cursor:", ";}", ";"], props => props.$isCompact ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$2, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', reactTheming.componentStyles);
 
 const COMPONENT_ID$8 = 'accordions.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -290,16 +290,16 @@ const StyledHeader = styled__default.default.div.attrs({
   theme: props.theme,
   inset: true,
   selector: `&:has(${StyledButton}:focus-visible)`
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+}), reactTheming.componentStyles);
 
 const COMPONENT_ID$7 = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
-})(["overflow:hidden;line-height:inherit;font-size:inherit;", "[aria-hidden='true'] > &{transition:", ";visibility:hidden;}", "[aria-hidden='false'] > &{visibility:visible;}", ";"], StyledPanel, props => props.$isAnimated && 'visibility 0s 0.25s', StyledPanel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["overflow:hidden;line-height:inherit;font-size:inherit;", "[aria-hidden='true'] > &{transition:", ";visibility:hidden;}", "[aria-hidden='false'] > &{visibility:visible;}", ";"], StyledPanel, props => props.$isAnimated && 'visibility 0s 0.25s', StyledPanel, reactTheming.componentStyles);
 
 const COMPONENT_ID$6 = 'accordions.rotate_icon';
 const colorStyles$1 = _ref => {
@@ -318,25 +318,25 @@ const colorStyles$1 = _ref => {
 };
 const StyledRotateIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:", ";width:", ";min-width:", ";height:", ";vertical-align:middle;", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => props.$isCompact ? `${props.theme.space.base * 1.5}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:", ";width:", ";min-width:", ";height:", ";vertical-align:middle;", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => props.$isCompact ? `${props.theme.space.base * 1.5}px ${props.theme.space.base * 3}px` : `${props.theme.space.base * 5}px`, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, colorStyles$1, reactTheming.componentStyles);
 
 const COMPONENT_ID$5 = 'timeline';
 const StyledTimeline = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
-})(["margin:0;padding:0;list-style:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["margin:0;padding:0;list-style:none;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$4 = 'timeline.content.separator';
 const StyledSeparator = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -348,30 +348,30 @@ const StyledSeparator = styled__default.default.div.attrs({
     theme,
     variable: 'border.emphasis'
   })}`;
-}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+}, reactTheming.componentStyles);
 
 const COMPONENT_ID$3 = 'timeline.content';
 const StyledTimelineContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
-})(["flex:1;padding:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["flex:1;padding:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'timeline.opposite.content';
 const StyledOppositeContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
-})(["flex:1;padding:", ";text-align:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => props.theme.rtl ? 'left' : 'right', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["flex:1;padding:", ";text-align:", ";", ";"], props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`, props => props.theme.rtl ? 'left' : 'right', reactTheming.componentStyles);
 
 const COMPONENT_ID$1 = 'timeline.item';
 const StyledTimelineItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -383,7 +383,7 @@ const StyledTimelineItem = styled__default.default.li.attrs({
     theme,
     variable: 'foreground.default'
   });
-}, props => props.theme.fontSizes.md, StyledSeparator, props => !props.$hasOppositeContent && props.$isAlternate && styled.css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => props.$isAlternate && styled.css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+}, props => props.theme.fontSizes.md, StyledSeparator, props => !props.$hasOppositeContent && props.$isAlternate && styled.css(["&::before{flex:1;padding:", "px;content:'';}"], props.theme.space.base * 4), props => props.$isAlternate && styled.css(["&:nth-child(even){flex-direction:row-reverse;", "{text-align:", ";}", "{text-align:", ";}}"], StyledOppositeContent, props.theme.rtl ? 'right' : 'left', StyledTimelineContent, props.theme.rtl ? 'left' : 'right'), reactTheming.componentStyles);
 
 const COMPONENT_ID = 'timeline.icon';
 const colorStyles = _ref => {
@@ -411,11 +411,11 @@ const colorStyles = _ref => {
 };
 const StyledItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
-})(["z-index:1;box-sizing:content-box;padding:", "px 0;width:", ";height:", ";", " ", ";"], props => props.theme.space.base, props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => polished.math(`${props.theme.iconSizes.sm} + 1`), colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["z-index:1;box-sizing:content-box;padding:", "px 0;width:", ";height:", ";", " ", ";"], props => props.theme.space.base, props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => polished.math(`${props.theme.iconSizes.sm} + 1`), colorStyles, reactTheming.componentStyles);
 
 const StepperContext = React.createContext(undefined);
 const useStepperContext = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-accordions",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "description": "Components related to accordions in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,8 +33,8 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.4.0",
-    "@zendeskgarden/svg-icons": "7.3.0"
+    "@zendeskgarden/react-theming": "^9.5.0",
+    "@zendeskgarden/svg-icons": "7.5.0"
   },
   "keywords": [
     "accordions",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "02e3f240b6f0c776fdae785254d6fe90cbfc37e4"
+  "gitHead": "43546784a9aa985332ddcc6dd09209a11e2c03ff"
 }