@zendeskgarden/react-accordions 9.0.0-next.8 → 9.0.0-next.9

package/dist/esm/elements/accordion/components/Header.js

@@ -82,10 +82,10 @@ const HeaderComponent = forwardRef((props, ref) => {
     onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false)),
     ...other
   })), children, React__default.createElement(StyledRotateIcon, {
-    isCompact: isCompact,
-    isHovered: isHovered,
-    isRotated: isExpanded,
-    isCollapsible: isCollapsible,
+    $isCompact: isCompact,
+    $isHovered: isHovered,
+    $isRotated: isExpanded,
+    $isCollapsible: isCollapsible,
     onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
     onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false))
   }, React__default.createElement(SvgChevronDownStroke, null))));

package/dist/esm/elements/timeline/components/Content.js

@@ -41,7 +41,7 @@ const ContentComponent = forwardRef((props, ref) => {
     surfaceColor
   } = useTimelineItemContext();
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledSeparator, null, React__default.createElement(StyledItemIcon, {
-    surfaceColor: surfaceColor
+    $surfaceColor: surfaceColor
   }, icon || React__default.createElement(SvgCircleFullStroke, null))), React__default.createElement(StyledTimelineContent, Object.assign({
     ref: ref
   }, props)));

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'accordions.accordion';
 const StyledAccordion = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"

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

@@ -18,7 +18,7 @@ const colorStyles = props => {
 };
 const StyledButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"

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

@@ -11,7 +11,7 @@ import { StyledButton } from './StyledButton.js';
 const COMPONENT_ID = 'accordions.header';
 const StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"

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

@@ -11,7 +11,7 @@ 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.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"

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

@@ -40,7 +40,7 @@ const sizeStyles = props => {
 };
 const StyledPanel = styled.section.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"

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

@@ -4,37 +4,25 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import { cloneElement, Children } from 'react';
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.rotate_icon';
 const colorStyles = props => {
-  const showColor = props.isCollapsible || !props.isRotated;
+  const showColor = props.$isCollapsible || !props.$isRotated;
   let color = getColorV8('neutralHue', 600, props.theme);
-  if (showColor && props.isHovered) {
+  if (showColor && props.$isHovered) {
     color = getColorV8('primaryHue', 600, props.theme);
   }
   return css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
 };
-const StyledRotateIcon = styled(
-_ref => {
-  let {
-    children,
-    isRotated,
-    isHovered,
-    isCompact,
-    isCollapsible,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).attrs({
+const StyledRotateIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledRotateIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -11,7 +11,7 @@ import { StyledPanel } from './StyledPanel.js';
 const COMPONENT_ID = 'accordions.section';
 const StyledSection = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"

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

@@ -23,7 +23,7 @@ const sizeStyles = props => {
 };
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"

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

@@ -22,7 +22,7 @@ const colorStyles = props => {
 };
 const StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"

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

@@ -10,7 +10,7 @@ import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } fro
 const COMPONENT_ID = 'accordions.step_inner_content';
 const StyledInnerContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"

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

@@ -10,7 +10,7 @@ import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } fro
 const COMPONENT_ID = 'accordions.step_label';
 const StyledLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"

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

@@ -10,7 +10,7 @@ import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'accordions.step_label_text';
 const StyledLabelText = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"

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

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

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

@@ -12,7 +12,7 @@ import { StyledLine } from './StyledLine.js';
 const COMPONENT_ID = 'accordions.step';
 const StyledStep = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'accordions.stepper';
 const StyledStepper = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'timeline.content';
 const StyledTimelineContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"

package/dist/esm/styled/timeline/StyledItem.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.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"

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

@@ -4,26 +4,18 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import { cloneElement, Children } from 'react';
 import styled from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.icon';
-const StyledItemIcon = styled(_ref => {
-  let {
-    surfaceColor,
-    children,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).attrs({
+const StyledItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
-})(["z-index:1;box-sizing:content-box;background-color:", ";padding:", "px 0;width:", ";height:", ";color:", ";", ";"], props => props.surfaceColor || getColorV8('background', 600 , props.theme), props => props.theme.space.base, props => math(`${props.theme.iconSizes.sm} + 1`), props => math(`${props.theme.iconSizes.sm} + 1`), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["z-index:1;box-sizing:content-box;background-color:", ";padding:", "px 0;width:", ";height:", ";color:", ";", ";"], props => props.$surfaceColor || getColorV8('background', 600 , props.theme), props => props.theme.space.base, props => math(`${props.theme.iconSizes.sm} + 1`), props => math(`${props.theme.iconSizes.sm} + 1`), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'timeline.opposite.content';
 const StyledOppositeContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"

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

@@ -10,7 +10,7 @@ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgard
 const COMPONENT_ID = 'timeline.content.separator';
 const StyledSeparator = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'timeline';
 const StyledTimeline = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"

package/dist/index.cjs.js

@@ -54,7 +54,7 @@ const sizeStyles$2 = props => {
 };
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
@@ -66,7 +66,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$j = 'accordions.step_line';
 const StyledLine = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -78,7 +78,7 @@ StyledLine.defaultProps = {
 const COMPONENT_ID$i = 'accordions.step';
 const StyledStep = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -90,7 +90,7 @@ StyledStep.defaultProps = {
 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.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -102,7 +102,7 @@ StyledInnerContent.defaultProps = {
 const COMPONENT_ID$g = 'accordions.stepper';
 const StyledStepper = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -126,7 +126,7 @@ const colorStyles$3 = props => {
 };
 const StyledIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
@@ -141,7 +141,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID$e = 'accordions.step_label';
 const StyledLabel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -153,7 +153,7 @@ StyledLabel.defaultProps = {
 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.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -165,7 +165,7 @@ StyledLabelText.defaultProps = {
 const COMPONENT_ID$c = 'accordions.accordion';
 const StyledAccordion = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -207,7 +207,7 @@ const sizeStyles = props => {
 };
 const StyledPanel = styled__default.default.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
@@ -220,7 +220,7 @@ 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.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -240,7 +240,7 @@ const colorStyles$1 = props => {
 };
 const StyledButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
@@ -252,7 +252,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$8 = 'accordions.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -268,7 +268,7 @@ StyledHeader.defaultProps = {
 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.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
@@ -279,31 +279,20 @@ StyledInnerPanel.defaultProps = {
 
 const COMPONENT_ID$6 = 'accordions.rotate_icon';
 const colorStyles = props => {
-  const showColor = props.isCollapsible || !props.isRotated;
+  const showColor = props.$isCollapsible || !props.$isRotated;
   let color = reactTheming.getColorV8('neutralHue', 600, props.theme);
-  if (showColor && props.isHovered) {
+  if (showColor && props.$isHovered) {
     color = reactTheming.getColorV8('primaryHue', 600, props.theme);
   }
   return styled.css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
 };
-const StyledRotateIcon = styled__default.default(
-_ref => {
-  let {
-    children,
-    isRotated,
-    isHovered,
-    isCompact,
-    isCollapsible,
-    ...props
-  } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledRotateIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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 => 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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledRotateIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -311,7 +300,7 @@ StyledRotateIcon.defaultProps = {
 const COMPONENT_ID$5 = 'timeline';
 const StyledTimeline = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -323,7 +312,7 @@ StyledTimeline.defaultProps = {
 const COMPONENT_ID$4 = 'timeline.content.separator';
 const StyledSeparator = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -335,7 +324,7 @@ StyledSeparator.defaultProps = {
 const COMPONENT_ID$3 = 'timeline.content';
 const StyledTimelineContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -347,7 +336,7 @@ StyledTimelineContent.defaultProps = {
 const COMPONENT_ID$2 = 'timeline.opposite.content';
 const StyledOppositeContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -359,7 +348,7 @@ StyledOppositeContent.defaultProps = {
 const COMPONENT_ID$1 = 'timeline.item';
 const StyledTimelineItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -369,20 +358,13 @@ StyledTimelineItem.defaultProps = {
 };
 
 const COMPONENT_ID = 'timeline.icon';
-const StyledItemIcon = styled__default.default(_ref => {
-  let {
-    surfaceColor,
-    children,
-    ...props
-  } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
-})(["z-index:1;box-sizing:content-box;background-color:", ";padding:", "px 0;width:", ";height:", ";color:", ";", ";"], props => props.surfaceColor || reactTheming.getColorV8('background', 600 , props.theme), props => props.theme.space.base, props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["z-index:1;box-sizing:content-box;background-color:", ";padding:", "px 0;width:", ";height:", ";color:", ";", ";"], props => props.$surfaceColor || reactTheming.getColorV8('background', 600 , props.theme), props => props.theme.space.base, props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => polished.math(`${props.theme.iconSizes.sm} + 1`), props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -518,10 +500,10 @@ const HeaderComponent = React.forwardRef((props, ref) => {
     onMouseOut: containerUtilities.composeEventHandlers(onMouseOut, () => setIsHovered(false)),
     ...other
   })), children, React__namespace.default.createElement(StyledRotateIcon, {
-    isCompact: isCompact,
-    isHovered: isHovered,
-    isRotated: isExpanded,
-    isCollapsible: isCollapsible,
+    $isCompact: isCompact,
+    $isHovered: isHovered,
+    $isRotated: isExpanded,
+    $isCollapsible: isCollapsible,
     onMouseOver: containerUtilities.composeEventHandlers(onMouseOver, () => setIsHovered(true)),
     onMouseOut: containerUtilities.composeEventHandlers(onMouseOut, () => setIsHovered(false))
   }, React__namespace.default.createElement(SvgChevronDownStroke, null))));
@@ -842,7 +824,7 @@ const ContentComponent = React.forwardRef((props, ref) => {
     surfaceColor
   } = useTimelineItemContext();
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledSeparator, null, React__namespace.default.createElement(StyledItemIcon, {
-    surfaceColor: surfaceColor
+    $surfaceColor: surfaceColor
   }, icon || React__namespace.default.createElement(SvgCircleFullStroke, null))), React__namespace.default.createElement(StyledTimelineContent, Object.assign({
     ref: ref
   }, props)));

package/dist/typings/styled/accordion/StyledRotateIcon.d.ts

@@ -7,9 +7,12 @@
 /// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
 interface IStyledRotateIcon {
-    isCompact?: boolean;
+    $isCompact?: boolean;
+    $isRotated?: boolean;
+    $isHovered?: boolean;
+    $isCollapsible?: boolean;
 }
-export declare const StyledRotateIcon: import("styled-components").StyledComponent<({ children, isRotated, isHovered, isCompact, isCollapsible, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+export declare const StyledRotateIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledRotateIcon, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/timeline/StyledItemIcon.d.ts

@@ -6,12 +6,12 @@
  */
 /// <reference types="react" />
 interface IStyledItemIcon {
-    surfaceColor?: string;
+    $surfaceColor?: string;
 }
 /**
  * 1. Odd sizing allows the timeline line to center respective of the circle icon.
  */
-export declare const StyledItemIcon: import("styled-components").StyledComponent<({ surfaceColor, children, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
+export declare const StyledItemIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledItemIcon, "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-accordions",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Components related to accordions in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.8",
+    "@zendeskgarden/react-theming": "^9.0.0-next.9",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
+  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
 }