@zendeskgarden/react-accordions 8.49.4 → 8.51.0

package/dist/index.cjs.js

@@ -215,7 +215,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
@@ -231,7 +231,7 @@ StyledContent.defaultProps = {
 var COMPONENT_ID$j = 'accordions.step_line';
 var StyledLine = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -253,7 +253,7 @@ StyledLine.defaultProps = {
 var COMPONENT_ID$i = 'accordions.step';
 var StyledStep = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -283,7 +283,7 @@ StyledStep.defaultProps = {
 var COMPONENT_ID$h = 'accordions.step_inner_content';
 var StyledInnerContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -305,7 +305,7 @@ StyledInnerContent.defaultProps = {
 var COMPONENT_ID$g = 'accordions.stepper';
 var StyledStepper = styled__default["default"].ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -333,7 +333,7 @@ var colorStyles$2 = function colorStyles(props) {
 };
 var StyledIcon = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
@@ -350,7 +350,7 @@ StyledIcon.defaultProps = {
 var COMPONENT_ID$e = 'accordions.step_label';
 var StyledLabel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -378,7 +378,7 @@ StyledLabel.defaultProps = {
 var COMPONENT_ID$d = 'accordions.step_label_text';
 var StyledLabelText = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -396,7 +396,7 @@ StyledLabelText.defaultProps = {
 var COMPONENT_ID$c = 'accordions.accordion';
 var StyledAccordion = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -426,7 +426,7 @@ var paddingStyles = function paddingStyles(props) {
 };
 var StyledPanel = styled__default["default"].section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
@@ -443,7 +443,7 @@ StyledPanel.defaultProps = {
 var COMPONENT_ID$a = 'accordions.section';
 var StyledSection = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -457,7 +457,7 @@ StyledSection.defaultProps = {
 var COMPONENT_ID$9 = 'accordions.header';
 var StyledHeader = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -485,7 +485,7 @@ var colorStyles$1 = function colorStyles(props) {
 };
 var StyledButton = styled__default["default"].button.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
@@ -511,7 +511,7 @@ StyledButton.defaultProps = {
 var COMPONENT_ID$7 = 'accordions.step_inner_panel';
 var StyledInnerPanel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
@@ -531,7 +531,7 @@ StyledInnerPanel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$6 = ["children", "isRotated", "isHovered", "isCompact", "isCollapsible"];
+var _excluded$7 = ["children", "isRotated", "isHovered", "isCompact", "isCollapsible"];
 var COMPONENT_ID$6 = 'accordions.rotate_icon';
 var colorStyles = function colorStyles(props) {
   var showColor = props.isCollapsible || !props.isRotated;
@@ -548,11 +548,11 @@ function (_ref) {
       _ref.isHovered;
       _ref.isCompact;
       _ref.isCollapsible;
-      var props = _objectWithoutProperties(_ref, _excluded$6);
+      var props = _objectWithoutProperties(_ref, _excluded$7);
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
@@ -574,7 +574,7 @@ StyledRotateIcon.defaultProps = {
 var COMPONENT_ID$5 = 'timeline';
 var StyledTimeline = styled__default["default"].ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -588,7 +588,7 @@ StyledTimeline.defaultProps = {
 var COMPONENT_ID$4 = 'timeline.content.separator';
 var StyledSeparator = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -606,7 +606,7 @@ StyledSeparator.defaultProps = {
 var COMPONENT_ID$3 = 'timeline.content';
 var StyledTimelineContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -622,7 +622,7 @@ StyledTimelineContent.defaultProps = {
 var COMPONENT_ID$2 = 'timeline.opposite.content';
 var StyledOppositeContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -640,11 +640,17 @@ StyledOppositeContent.defaultProps = {
 var COMPONENT_ID$1 = 'timeline.item';
 var StyledTimelineItem = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
-})(["display:flex;position:relative;&:last-of-type ", "::after{display:none;}", " ", " ", ";"], StyledSeparator, function (props) {
+})(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], function (props) {
+  return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
+}, function (props) {
+  return props.theme.colors.foreground;
+}, function (props) {
+  return props.theme.fontSizes.md;
+}, StyledSeparator, function (props) {
   return !props.hasOppositeContent && props.isAlternate && styled.css(["&:before{flex:1;content:'';padding:", "px;}"], props.theme.space.base * 4);
 }, function (props) {
   return 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');
@@ -655,16 +661,16 @@ StyledTimelineItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$5 = ["surfaceColor", "children"];
+var _excluded$6 = ["surfaceColor", "children"];
 var COMPONENT_ID = 'timeline.icon';
 var StyledItemIcon = styled__default["default"](function (_ref) {
   _ref.surfaceColor;
       var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$6);
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -780,7 +786,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-var _excluded$4 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut", "children"],
+var _excluded$5 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut", "children"],
     _excluded2 = ["onClick", "onKeyDown"];
 var HeaderComponent = React.forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
@@ -796,7 +802,7 @@ var HeaderComponent = React.forwardRef(function (props, ref) {
       onMouseOver = props.onMouseOver,
       onMouseOut = props.onMouseOut,
       children = props.children,
-      other = _objectWithoutProperties(props, _excluded$4);
+      other = _objectWithoutProperties(props, _excluded$5);
   var sectionIndex = useSectionContext();
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -929,7 +935,7 @@ var PanelComponent = React.forwardRef(function (props, ref) {
 PanelComponent.displayName = 'Accordion.Panel';
 var Panel = PanelComponent;
 
-var _excluded$3 = ["level", "isBare", "onChange", "isCompact", "isAnimated", "isExpandable", "isCollapsible", "defaultExpandedSections", "expandedSections"];
+var _excluded$4 = ["level", "isBare", "onChange", "isCompact", "isAnimated", "isExpandable", "isCollapsible", "defaultExpandedSections", "expandedSections"];
 var AccordionComponent = React.forwardRef(function (_ref, ref) {
   var level = _ref.level,
       isBare = _ref.isBare,
@@ -940,7 +946,7 @@ var AccordionComponent = React.forwardRef(function (_ref, ref) {
       isCollapsible = _ref.isCollapsible,
       defaultExpandedSections = _ref.defaultExpandedSections,
       controlledExpandedSections = _ref.expandedSections,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$4);
   var _useAccordion = containerAccordion.useAccordion({
     collapsible: isCollapsible,
     expandable: isExpandable || false,
@@ -1040,32 +1046,39 @@ var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
   })));
 };
 
-var LabelComponent = React.forwardRef(function (props, ref) {
+var _excluded$3 = ["icon", "iconProps", "isHidden", "children"];
+var LabelComponent = React.forwardRef(function (_ref, ref) {
+  var icon = _ref.icon,
+      iconProps = _ref.iconProps,
+      isHidden = _ref.isHidden,
+      children = _ref.children,
+      other = _objectWithoutProperties(_ref, _excluded$3);
   var _useStepContext = useStepContext(),
       currentStepIndex = _useStepContext.currentStepIndex;
   var _useStepperContext = useStepperContext(),
       activeIndex = _useStepperContext.activeIndex,
       isHorizontal = _useStepperContext.isHorizontal;
   var numericStep = currentStepIndex + 1;
-  var stepIcon = props.icon || numericStep;
+  var stepIcon = icon || numericStep;
   var isActive = activeIndex === currentStepIndex;
   var isCompleted = activeIndex > currentStepIndex;
   var styledIcon = React__default["default"].createElement(StyledIcon, {
     isActive: isActive,
     isHorizontal: isHorizontal
-  }, isCompleted ? React__default["default"].createElement(SvgCheckSmStroke, null) : stepIcon);
+  }, isCompleted ? React__default["default"].createElement(SvgCheckSmStroke, iconProps) : stepIcon);
   return React__default["default"].createElement(StyledLabel, _extends$3({
     ref: ref,
     isActive: isActive,
     isHorizontal: isHorizontal
-  }, props), isHorizontal ? React__default["default"].createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__default["default"].createElement(StyledLabelText, {
-    isHidden: props.isHidden,
+  }, other), isHorizontal ? React__default["default"].createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__default["default"].createElement(StyledLabelText, {
+    isHidden: isHidden,
     isHorizontal: isHorizontal
-  }, props.children));
+  }, children));
 });
 LabelComponent.displayName = 'Stepper.Label';
 LabelComponent.propTypes = {
   icon: PropTypes__default["default"].node,
+  iconProps: PropTypes__default["default"].object,
   isHidden: PropTypes__default["default"].bool
 };
 var Label = LabelComponent;

package/dist/index.esm.js

@@ -185,7 +185,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
@@ -201,7 +201,7 @@ StyledContent.defaultProps = {
 var COMPONENT_ID$j = 'accordions.step_line';
 var StyledLine = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -223,7 +223,7 @@ StyledLine.defaultProps = {
 var COMPONENT_ID$i = 'accordions.step';
 var StyledStep = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -253,7 +253,7 @@ StyledStep.defaultProps = {
 var COMPONENT_ID$h = 'accordions.step_inner_content';
 var StyledInnerContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -275,7 +275,7 @@ StyledInnerContent.defaultProps = {
 var COMPONENT_ID$g = 'accordions.stepper';
 var StyledStepper = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -303,7 +303,7 @@ var colorStyles$2 = function colorStyles(props) {
 };
 var StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
@@ -320,7 +320,7 @@ StyledIcon.defaultProps = {
 var COMPONENT_ID$e = 'accordions.step_label';
 var StyledLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -348,7 +348,7 @@ StyledLabel.defaultProps = {
 var COMPONENT_ID$d = 'accordions.step_label_text';
 var StyledLabelText = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -366,7 +366,7 @@ StyledLabelText.defaultProps = {
 var COMPONENT_ID$c = 'accordions.accordion';
 var StyledAccordion = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -396,7 +396,7 @@ var paddingStyles = function paddingStyles(props) {
 };
 var StyledPanel = styled.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
@@ -413,7 +413,7 @@ StyledPanel.defaultProps = {
 var COMPONENT_ID$a = 'accordions.section';
 var StyledSection = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -427,7 +427,7 @@ StyledSection.defaultProps = {
 var COMPONENT_ID$9 = 'accordions.header';
 var StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -455,7 +455,7 @@ var colorStyles$1 = function colorStyles(props) {
 };
 var StyledButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
@@ -481,7 +481,7 @@ StyledButton.defaultProps = {
 var COMPONENT_ID$7 = 'accordions.step_inner_panel';
 var StyledInnerPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
@@ -501,7 +501,7 @@ StyledInnerPanel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$6 = ["children", "isRotated", "isHovered", "isCompact", "isCollapsible"];
+var _excluded$7 = ["children", "isRotated", "isHovered", "isCompact", "isCollapsible"];
 var COMPONENT_ID$6 = 'accordions.rotate_icon';
 var colorStyles = function colorStyles(props) {
   var showColor = props.isCollapsible || !props.isRotated;
@@ -518,11 +518,11 @@ function (_ref) {
       _ref.isHovered;
       _ref.isCompact;
       _ref.isCollapsible;
-      var props = _objectWithoutProperties(_ref, _excluded$6);
+      var props = _objectWithoutProperties(_ref, _excluded$7);
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
@@ -544,7 +544,7 @@ StyledRotateIcon.defaultProps = {
 var COMPONENT_ID$5 = 'timeline';
 var StyledTimeline = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -558,7 +558,7 @@ StyledTimeline.defaultProps = {
 var COMPONENT_ID$4 = 'timeline.content.separator';
 var StyledSeparator = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -576,7 +576,7 @@ StyledSeparator.defaultProps = {
 var COMPONENT_ID$3 = 'timeline.content';
 var StyledTimelineContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -592,7 +592,7 @@ StyledTimelineContent.defaultProps = {
 var COMPONENT_ID$2 = 'timeline.opposite.content';
 var StyledOppositeContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -610,11 +610,17 @@ StyledOppositeContent.defaultProps = {
 var COMPONENT_ID$1 = 'timeline.item';
 var StyledTimelineItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
-})(["display:flex;position:relative;&:last-of-type ", "::after{display:none;}", " ", " ", ";"], StyledSeparator, function (props) {
+})(["display:flex;position:relative;line-height:", ";color:", ";font-size:", ";&:last-of-type ", "::after{display:none;}", " ", " ", ";"], function (props) {
+  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
+}, function (props) {
+  return props.theme.colors.foreground;
+}, function (props) {
+  return props.theme.fontSizes.md;
+}, StyledSeparator, function (props) {
   return !props.hasOppositeContent && props.isAlternate && css(["&:before{flex:1;content:'';padding:", "px;}"], props.theme.space.base * 4);
 }, function (props) {
   return 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');
@@ -625,16 +631,16 @@ StyledTimelineItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$5 = ["surfaceColor", "children"];
+var _excluded$6 = ["surfaceColor", "children"];
 var COMPONENT_ID = 'timeline.icon';
 var StyledItemIcon = styled(function (_ref) {
   _ref.surfaceColor;
       var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$6);
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.49.4'
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -750,7 +756,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-var _excluded$4 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut", "children"],
+var _excluded$5 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut", "children"],
     _excluded2 = ["onClick", "onKeyDown"];
 var HeaderComponent = forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
@@ -766,7 +772,7 @@ var HeaderComponent = forwardRef(function (props, ref) {
       onMouseOver = props.onMouseOver,
       onMouseOut = props.onMouseOut,
       children = props.children,
-      other = _objectWithoutProperties(props, _excluded$4);
+      other = _objectWithoutProperties(props, _excluded$5);
   var sectionIndex = useSectionContext();
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -899,7 +905,7 @@ var PanelComponent = forwardRef(function (props, ref) {
 PanelComponent.displayName = 'Accordion.Panel';
 var Panel = PanelComponent;
 
-var _excluded$3 = ["level", "isBare", "onChange", "isCompact", "isAnimated", "isExpandable", "isCollapsible", "defaultExpandedSections", "expandedSections"];
+var _excluded$4 = ["level", "isBare", "onChange", "isCompact", "isAnimated", "isExpandable", "isCollapsible", "defaultExpandedSections", "expandedSections"];
 var AccordionComponent = forwardRef(function (_ref, ref) {
   var level = _ref.level,
       isBare = _ref.isBare,
@@ -910,7 +916,7 @@ var AccordionComponent = forwardRef(function (_ref, ref) {
       isCollapsible = _ref.isCollapsible,
       defaultExpandedSections = _ref.defaultExpandedSections,
       controlledExpandedSections = _ref.expandedSections,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$4);
   var _useAccordion = useAccordion({
     collapsible: isCollapsible,
     expandable: isExpandable || false,
@@ -1010,32 +1016,39 @@ var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
   })));
 };
 
-var LabelComponent = forwardRef(function (props, ref) {
+var _excluded$3 = ["icon", "iconProps", "isHidden", "children"];
+var LabelComponent = forwardRef(function (_ref, ref) {
+  var icon = _ref.icon,
+      iconProps = _ref.iconProps,
+      isHidden = _ref.isHidden,
+      children = _ref.children,
+      other = _objectWithoutProperties(_ref, _excluded$3);
   var _useStepContext = useStepContext(),
       currentStepIndex = _useStepContext.currentStepIndex;
   var _useStepperContext = useStepperContext(),
       activeIndex = _useStepperContext.activeIndex,
       isHorizontal = _useStepperContext.isHorizontal;
   var numericStep = currentStepIndex + 1;
-  var stepIcon = props.icon || numericStep;
+  var stepIcon = icon || numericStep;
   var isActive = activeIndex === currentStepIndex;
   var isCompleted = activeIndex > currentStepIndex;
   var styledIcon = React__default.createElement(StyledIcon, {
     isActive: isActive,
     isHorizontal: isHorizontal
-  }, isCompleted ? React__default.createElement(SvgCheckSmStroke, null) : stepIcon);
+  }, isCompleted ? React__default.createElement(SvgCheckSmStroke, iconProps) : stepIcon);
   return React__default.createElement(StyledLabel, _extends$3({
     ref: ref,
     isActive: isActive,
     isHorizontal: isHorizontal
-  }, props), isHorizontal ? React__default.createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__default.createElement(StyledLabelText, {
-    isHidden: props.isHidden,
+  }, other), isHorizontal ? React__default.createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__default.createElement(StyledLabelText, {
+    isHidden: isHidden,
     isHorizontal: isHorizontal
-  }, props.children));
+  }, children));
 });
 LabelComponent.displayName = 'Stepper.Label';
 LabelComponent.propTypes = {
   icon: PropTypes.node,
+  iconProps: PropTypes.object,
   isHidden: PropTypes.bool
 };
 var Label = LabelComponent;

package/dist/typings/types/index.d.ts

@@ -4,7 +4,7 @@
  * 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 { HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes, ReactNode } from 'react';
+import { ReactNode, SVGAttributes, HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes } from 'react';
 export interface IAccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Sets `aria-level` heading rank in the document structure */
     level: number;
@@ -37,7 +37,9 @@ export interface IStepperProps extends OlHTMLAttributes<HTMLOListElement> {
 }
 export interface IStepperLabelProps extends HTMLAttributes<HTMLDivElement> {
     /** Replaces the label number with an icon */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
+    /** Passes props to the default check icon */
+    iconProps?: SVGAttributes<SVGElement>;
     /** Hides the label text */
     isHidden?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-accordions",
-  "version": "8.49.4",
+  "version": "8.51.0",
   "description": "Components related to accordions in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.6",
-    "@zendeskgarden/react-theming": "^8.49.4",
+    "@zendeskgarden/react-theming": "^8.51.0",
     "@zendeskgarden/svg-icons": "6.31.1"
   },
   "keywords": [
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "7d8cf45fb734c345fac9e0673236578b2ac9c03b"
+  "gitHead": "a932647429f0a79984650d2521f357ed8320d1d0"
 }