@zendeskgarden/react-accordions 9.0.0-next.16 → 9.0.0-next.18

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

@@ -71,8 +71,8 @@ const HeaderComponent = forwardRef((props, ref) => {
   return React__default.createElement(HeaderContext.Provider, {
     value: value
   }, React__default.createElement(StyledHeader, Object.assign({
-    isCollapsible: isCollapsible,
-    isExpanded: isExpanded
+    $isCollapsible: isCollapsible,
+    $isExpanded: isExpanded
   }, getHeaderProps({
     ref,
     'aria-level': ariaLevel,

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

@@ -48,10 +48,10 @@ const LabelComponent = forwardRef((props, ref) => {
   } = useHeaderContext();
   return React__default.createElement(StyledButton, Object.assign({
     ref: ref,
-    isCompact: isCompact,
-    isHovered: isHovered,
-    isExpanded: isExpanded,
-    isCollapsible: isCollapsible
+    $isCompact: isCompact,
+    $isHovered: isHovered,
+    $isExpanded: isExpanded,
+    $isCollapsible: isCollapsible
   }, otherTriggerProps, props));
 });
 LabelComponent.displayName = 'Accordion.Label';

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

@@ -51,17 +51,17 @@ const PanelComponent = forwardRef((_ref, ref) => {
   const isExpanded = expandedSections.includes(sectionValue);
   return React__default.createElement(StyledPanel, Object.assign({
     inert: isExpanded ? undefined : '',
-    isAnimated: isAnimated,
-    isBare: isBare,
-    isCompact: isCompact,
-    isExpanded: isExpanded
+    $isAnimated: isAnimated,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isExpanded: isExpanded
   }, getPanelProps({
     role: role === undefined ? null : 'region',
     ref,
     value: sectionValue,
     ...props
   })), React__default.createElement(StyledInnerPanel, {
-    isAnimated: isAnimated
+    $isAnimated: isAnimated
   }, children));
 });
 PanelComponent.displayName = 'Accordion.Panel';

package/dist/esm/elements/stepper/Stepper.js

@@ -53,7 +53,7 @@ const StepperComponent = forwardRef((_ref, ref) => {
     value: stepperContext
   }, React__default.createElement(StyledStepper, Object.assign({
     ref: ref,
-    isHorizontal: isHorizontal
+    $isHorizontal: isHorizontal
   }, props), useMemo(() => Children.toArray(children).filter(isValidElement).map((child, index) => React__default.createElement(StepContext.Provider, {
     key: index
     ,

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

@@ -41,7 +41,7 @@ const ContentComponent = forwardRef((props, ref) => {
   } = useStepContext();
   return isHorizontal === false ? React__default.createElement(StyledContent, Object.assign({
     ref: ref,
-    isActive: isActive
+    $isActive: isActive
   }, props), React__default.createElement(StyledInnerContent, {
     "aria-hidden": !isActive
   }, props.children)) : null;

package/dist/esm/elements/stepper/components/Label.js

@@ -53,16 +53,16 @@ const LabelComponent = forwardRef((_ref, ref) => {
   const numericStep = currentStepIndex + 1;
   const stepIcon = icon || numericStep;
   const styledIcon = React__default.createElement(StyledIcon, {
-    isActive: isActive,
-    isHorizontal: isHorizontal
+    $isActive: isActive,
+    $isHorizontal: isHorizontal
   }, isCompleted ? React__default.createElement(SvgCheckSmStroke, iconProps) : stepIcon);
   return React__default.createElement(StyledLabel, Object.assign({
     ref: ref,
-    isActive: isActive,
-    isHorizontal: isHorizontal
+    $isActive: isActive,
+    $isHorizontal: isHorizontal
   }, other), isHorizontal ? React__default.createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__default.createElement(StyledLabelText, {
-    isHidden: isHidden,
-    isHorizontal: isHorizontal
+    $isHidden: isHidden,
+    $isHorizontal: isHorizontal
   }, children));
 });
 LabelComponent.displayName = 'Stepper.Label';

package/dist/esm/elements/stepper/components/Step.js

@@ -44,7 +44,7 @@ const StepComponent = forwardRef((_ref, ref) => {
   } = useStepperContext();
   return React__default.createElement(StyledStep, Object.assign({
     ref: ref,
-    isHorizontal: isHorizontal
+    $isHorizontal: isHorizontal
   }, props), isHorizontal && React__default.createElement(StyledLine, null), children);
 });
 StepComponent.displayName = 'Stepper.Step';

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

@@ -60,8 +60,8 @@ const ItemComponent = forwardRef((_ref, ref) => {
     value: value
   }, React__default.createElement(StyledTimelineItem, Object.assign({
     ref: ref,
-    isAlternate: isAlternate,
-    hasOppositeContent: hasOppositeContent
+    $isAlternate: isAlternate,
+    $hasOppositeContent: hasOppositeContent
   }, props)));
 });
 ItemComponent.displayName = 'Timeline.Item';

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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"

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

@@ -5,24 +5,30 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.button';
-const colorStyles = props => {
-  const showColor = props.isCollapsible || !props.isExpanded;
-  let color = getColorV8('foreground', 600 , props.theme);
-  if (showColor && props.isHovered) {
-    color = getColorV8('primaryHue', 600, props.theme);
-  }
+const colorStyles = _ref => {
+  let {
+    $isCollapsible,
+    $isExpanded,
+    $isHovered,
+    theme
+  } = _ref;
+  const showColor = $isCollapsible || !$isExpanded;
+  const color = getColor({
+    theme,
+    variable: showColor && $isHovered ? 'foreground.primary' : 'foreground.default'
+  });
   return css(["color:", ";&:hover{cursor:", ";color:", ";}"], color, showColor && 'pointer', showColor && color);
 };
 const StyledButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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', props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -11,11 +11,11 @@ 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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
-})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out;font-size:", ";&:hover{cursor:", ";}", " ", ";"], props => props.theme.fontSizes.md, props => (props.isCollapsible || !props.isExpanded) && 'pointer', props => focusStyles({
+})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out;font-size:", ";&:hover{cursor:", ";}", " ", ";"], props => props.theme.fontSizes.md, props => (props.$isCollapsible || !props.$isExpanded) && 'pointer', props => focusStyles({
   theme: props.theme,
   inset: true,
   selector: `&:has(${StyledButton}:focus-visible)`

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

@@ -11,11 +11,11 @@ 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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledInnerPanel.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -5,21 +5,24 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.panel';
-const colorStyles = props => {
-  const {
+const colorStyles = _ref => {
+  let {
     theme,
-    isBare
-  } = props;
-  return css(["border-bottom-color:", ";"], isBare ? 'transparent' : getColorV8('neutralHue', 300, theme));
+    $isBare
+  } = _ref;
+  return css(["border-bottom-color:", ";"], $isBare ? 'transparent' : getColor({
+    theme,
+    variable: 'border.default'
+  }));
 };
 const sizeStyles = props => {
   const {
     theme,
-    isCompact,
-    isExpanded
+    $isCompact,
+    $isExpanded
   } = props;
   const {
     base
@@ -27,26 +30,26 @@ const sizeStyles = props => {
   let paddingTop = base * 2;
   let paddingHorizontal = base * 5;
   let paddingBottom = base * 8;
-  if (isCompact) {
+  if ($isCompact) {
     paddingTop = base * 2;
     paddingHorizontal = base * 3;
     paddingBottom = base * 4;
   }
-  if (isExpanded === false) {
+  if ($isExpanded === false) {
     paddingTop = 0;
     paddingBottom = 0;
   }
-  return css(["grid-template-rows:", "fr;border-bottom:", ";padding:", "px ", "px ", "px;line-height:", ";font-size:", ";"], isExpanded ? 1 : 0, theme.borders.sm, paddingTop, paddingHorizontal, paddingBottom, getLineHeight(base * 5, theme.fontSizes.md), theme.fontSizes.md);
+  return css(["grid-template-rows:", "fr;border-bottom:", ";padding:", "px ", "px ", "px;line-height:", ";font-size:", ";"], $isExpanded ? 1 : 0, theme.borders.sm, paddingTop, paddingHorizontal, paddingBottom, getLineHeight(base * 5, theme.fontSizes.md), theme.fontSizes.md);
 };
 const StyledPanel = styled.section.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledPanel.defaultProps = {
-  isAnimated: true,
+  $isAnimated: true,
   theme: DEFAULT_THEME
 };
 

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

@@ -5,20 +5,26 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.rotate_icon';
-const colorStyles = props => {
-  const showColor = props.$isCollapsible || !props.$isRotated;
-  let color = getColorV8('neutralHue', 600, props.theme);
-  if (showColor && props.$isHovered) {
-    color = getColorV8('primaryHue', 600, props.theme);
-  }
+const colorStyles = _ref => {
+  let {
+    $isCollapsible,
+    $isHovered,
+    $isRotated,
+    theme
+  } = _ref;
+  const showColor = $isCollapsible || !$isRotated;
+  const color = getColor({
+    theme,
+    variable: showColor && $isHovered ? 'foreground.primary' : 'foreground.subtle'
+  });
   return css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
 };
 const StyledRotateIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"

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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"

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

@@ -13,7 +13,7 @@ const sizeStyles = props => {
     rtl,
     space
   } = props.theme;
-  const paddingBottom = props.isActive ? space.base * 8 : space.base * 6;
+  const paddingBottom = props.$isActive ? space.base * 8 : space.base * 6;
   const paddingRight = rtl ? space.base * 6 : space.base * 5;
   const paddingLeft = rtl ? space.base * 5 : space.base * 6;
   const marginRight = rtl ? space.base * 3 : '0';
@@ -23,11 +23,11 @@ const sizeStyles = props => {
 };
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledContent.defaultProps = {
   theme: DEFAULT_THEME
 };

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, DEFAULT_THEME, getLineHeight, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_icon';
 const StyledIconFlexContainer = styled.div.withConfig({
@@ -15,14 +15,38 @@ const StyledIconFlexContainer = styled.div.withConfig({
 const sizeStyles = props => {
   const size = `${props.theme.space.base * 6}px`;
   const fontSize = props.theme.fontSizes.sm;
-  return css(["margin-bottom:", ";margin-", ":", ";width:", ";min-width:", ";height:", ";min-height:", ";line-height:", ";font-size:", ";"], props.isHorizontal && `${props.theme.space.base * 2}px`, props.theme.rtl ? 'left' : 'right', !props.isHorizontal && `${props.theme.space.base * 3}px`, size, size, size, size, getLineHeight(size, fontSize), fontSize);
+  return css(["margin-bottom:", ";margin-", ":", ";width:", ";min-width:", ";height:", ";min-height:", ";line-height:", ";font-size:", ";"], props.$isHorizontal && `${props.theme.space.base * 2}px`, props.theme.rtl ? 'left' : 'right', !props.$isHorizontal && `${props.theme.space.base * 3}px`, size, size, size, size, getLineHeight(size, fontSize), fontSize);
 };
-const colorStyles = props => {
-  return css(["background:", ";color:", ";"], props.isActive ? getColorV8('neutralHue', 600, props.theme) : getColorV8('neutralHue', 200, props.theme), props.isActive ? getColorV8('background', 600 , props.theme) : getColorV8('foreground', 600 , props.theme));
+const colorStyles = _ref => {
+  let {
+    $isActive,
+    theme
+  } = _ref;
+  const foregroundColor = getColor({
+    theme,
+    variable: $isActive ? 'foreground.onEmphasis' : 'foreground.default'
+  });
+  const backgroundColor = $isActive ? getColor({
+    theme,
+    variable: 'background.emphasis',
+    dark: {
+      offset: -300
+    }
+  }) : getColor({
+    theme,
+    variable: 'background.subtle',
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 100
+    }
+  });
+  return css(["background:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"

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

@@ -5,16 +5,24 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } 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.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
-})(["overflow:hidden;line-height:", ";color:", ";font-size:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["overflow:hidden;line-height:", ";color:", ";font-size:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), _ref => {
+  let {
+    theme
+  } = _ref;
+  return getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+}, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledInnerContent.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -5,16 +5,25 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_label';
 const StyledLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
-})(["display:", ";align-items:", ";transition:color 0.25s ease-in-out,font-weight 0.25s ease-in-out;text-align:", ";line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => !props.isHorizontal && 'flex', props => !props.isHorizontal && 'center', props => props.isHorizontal && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isActive ? getColorV8('foreground', 600 , props.theme) : getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => props.isActive && 600, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:", ";align-items:", ";transition:color 0.25s ease-in-out,font-weight 0.25s ease-in-out;text-align:", ";line-height:", ";color:", ";font-size:", ";font-weight:", ";", ";"], props => !props.$isHorizontal && 'flex', props => !props.$isHorizontal && 'center', props => props.$isHorizontal && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), _ref => {
+  let {
+    $isActive,
+    theme
+  } = _ref;
+  return getColor({
+    theme,
+    variable: $isActive ? 'foreground.default' : 'foreground.subtle'
+  });
+}, props => props.theme.fontSizes.md, props => props.$isActive && 600, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledLabel.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -10,11 +10,11 @@ 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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
-})(["display:", ";padding:", ";word-wrap:", ";"], props => props.isHidden && 'none', props => props.isHorizontal && `0 ${props.theme.space.base * 3}px`, props => props.isHorizontal && 'break-word');
+})(["display:", ";padding:", ";word-wrap:", ";"], props => props.$isHidden && 'none', props => props.$isHorizontal && `0 ${props.theme.space.base * 3}px`, props => props.$isHorizontal && 'break-word');
 StyledLabelText.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -5,16 +5,24 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, 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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
-})(["display:block;position:absolute;top:", "px;right:", ";left:", ";flex:1;border-top:", ";border-color:", ";"], props => props.theme.space.base * 3, props => `calc(50% + ${props.theme.space.base * 6}px)`, props => `calc(-50% + ${props.theme.space.base * 6}px)`, props => props.theme.borders.sm, props => getColorV8('neutralHue', 300, props.theme));
+})(["display:block;position:absolute;top:", "px;right:", ";left:", ";flex:1;border-top:", ";border-color:", ";"], props => props.theme.space.base * 3, props => `calc(50% + ${props.theme.space.base * 6}px)`, props => `calc(-50% + ${props.theme.space.base * 6}px)`, props => props.theme.borders.sm, _ref => {
+  let {
+    theme
+  } = _ref;
+  return getColor({
+    theme,
+    variable: 'border.default'
+  });
+});
 StyledLine.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -5,18 +5,26 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } 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.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
-})(["position:", ";flex:", ";min-width:", ";&:last-of-type ", "{display:", ";}&:first-of-type ", "{display:", ";}&:not(:last-of-type) ", "{border-", ":", ";border-color:", ";}", ";"], props => props.isHorizontal && 'relative', props => props.isHorizontal && '1', props => props.isHorizontal && `${props.theme.space.base * 15}px`, StyledLine, props => props.theme.rtl && 'none', StyledLine, props => !props.theme.rtl && 'none', StyledContent, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, props => getColorV8('neutralHue', 300, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:", ";flex:", ";min-width:", ";&:last-of-type ", "{display:", ";}&:first-of-type ", "{display:", ";}&:not(:last-of-type) ", "{border-", ":", ";border-color:", ";}", ";"], props => props.$isHorizontal && 'relative', props => props.$isHorizontal && '1', props => props.$isHorizontal && `${props.theme.space.base * 15}px`, StyledLine, props => props.theme.rtl && 'none', StyledLine, props => !props.theme.rtl && 'none', StyledContent, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, _ref => {
+  let {
+    theme
+  } = _ref;
+  return getColor({
+    theme,
+    variable: 'border.default'
+  });
+}, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledStep.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -10,11 +10,11 @@ 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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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', props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledStepper.defaultProps = {
   theme: DEFAULT_THEME
 };

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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"

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, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledSeparator } from './StyledSeparator.js';
 import { StyledTimelineContent } from './StyledContent.js';
 import { StyledOppositeContent } from './StyledOppositeContent.js';
@@ -13,11 +13,19 @@ 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.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
-})(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), 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));
+})(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), _ref => {
+  let {
+    theme
+  } = _ref;
+  return getColor({
+    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));
 StyledTimelineItem.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -4,18 +4,33 @@
 * 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 styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { StyledBaseIcon, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.icon';
+const colorStyles = _ref => {
+  let {
+    $surfaceColor,
+    theme
+  } = _ref;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const backgroundColor = $surfaceColor || getColor({
+    theme,
+    variable: 'background.default'
+  });
+  return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
+};
 const StyledItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).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;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));
 StyledItemIcon.defaultProps = {
   theme: DEFAULT_THEME
 };