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

package/dist/esm/elements/accordion/Accordion.js

@@ -56,7 +56,8 @@ const AccordionComponent = forwardRef((_ref, ref) => {
   const {
     sections,
     sectionChildren
-  } = useMemo(() => Children.toArray(children).filter(isValidElement).map((child, index) => React__default.createElement(SectionContext.Provider, {
+  } = useMemo(() => Children.toArray(children).filter(isValidElement).map((child, index) =>
+  React__default.createElement(SectionContext.Provider, {
     key: index,
     value: index
   }, child)).reduce((acc, child, index) => {

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

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/node_modules/@zendeskgarden/svg-icons/src/12/circle-full-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _circle;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgCircleFullStroke = function SvgCircleFullStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-sm-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.accordion';
 const StyledAccordion = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledAccordion.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledAccordion };

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

@@ -5,26 +5,29 @@
 * 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, 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.9'
+  'data-garden-version': '9.0.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));
-StyledButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { COMPONENT_ID, StyledButton };

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

@@ -5,23 +5,20 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { focusStyles, retrieveComponentStyles } 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.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).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)`
 }), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHeader.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledHeader };

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

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } 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.0.0-next.9'
+  'data-garden-version': '9.0.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));
-StyledInnerPanel.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledInnerPanel };

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.9'
+  'data-garden-version': '9.0.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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledPanel.defaultProps = {
-  isAnimated: true,
+  $isAnimated: true,
   theme: DEFAULT_THEME
 };
 

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

@@ -5,26 +5,29 @@
 * 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, 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.9'
+  'data-garden-version': '9.0.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));
-StyledRotateIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledRotateIcon };

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

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } 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.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
 })(["&:last-child ", "{border:none;}", ";"], StyledPanel, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSection.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_content';
 const sizeStyles = props => {
@@ -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,13 +23,10 @@ const sizeStyles = props => {
 };
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.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));
-StyledContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 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, DEFAULT_THEME, getLineHeight, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_icon';
 const StyledIconFlexContainer = styled.div.withConfig({
@@ -15,23 +15,41 @@ 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.9'
+  'data-garden-version': '9.0.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));
-StyledIconFlexContainer.defaultProps = {
-  theme: DEFAULT_THEME
-};
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledIcon, StyledIconFlexContainer };

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

@@ -5,18 +5,23 @@
 * 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 } 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.9'
+  'data-garden-version': '9.0.0'
 }).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));
-StyledInnerContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledInnerContent };

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

@@ -5,18 +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 } 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.9'
+  'data-garden-version': '9.0.0'
 }).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));
-StyledLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledLabel };

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

@@ -5,18 +5,14 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-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.9'
+  'data-garden-version': '9.0.0'
 }).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');
-StyledLabelText.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:", ";padding:", ";word-wrap:", ";"], props => props.$isHidden && 'none', props => props.$isHorizontal && `0 ${props.theme.space.base * 3}px`, props => props.$isHorizontal && 'break-word');
 
 export { StyledLabelText };

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

@@ -5,18 +5,23 @@
 * 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 } 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.9'
+  'data-garden-version': '9.0.0'
 }).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));
-StyledLine.defaultProps = {
-  theme: DEFAULT_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'
+  });
+});
 
 export { StyledLine };