@zendeskgarden/react-accordions 8.69.5 → 8.69.7

package/dist/index.esm.js

@@ -6,14 +6,12 @@
  */
 
 import * as React from 'react';
-import React__default, { cloneElement, Children, createContext, useContext, forwardRef, useRef, useState, useMemo, useEffect, useLayoutEffect } from 'react';
+import React__default, { cloneElement, Children, createContext, useContext, forwardRef, useState, useMemo, isValidElement } from 'react';
 import { useAccordion } from '@zendeskgarden/container-accordion';
-import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight, focusStyles, useDocument } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight, focusStyles } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
-import debounce from 'lodash.debounce';
-import mergeRefs from 'react-merge-refs';
 import PropTypes from 'prop-types';
 
 function _extends$3() {
@@ -32,7 +30,7 @@ function _extends$3() {
 }
 
 const COMPONENT_ID$k = 'accordions.step_content';
-const sizeStyles$1 = props => {
+const sizeStyles$2 = props => {
   const {
     rtl,
     space
@@ -47,11 +45,11 @@ const sizeStyles$1 = props => {
 };
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).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$1, props => retrieveComponentStyles(COMPONENT_ID$k, props));
+})(["display:grid;grid-template-rows:", "fr;transition:grid-template-rows 0.25s ease-in-out;word-break:break-word;", " ", ";"], props => props.isActive ? 1 : 0, sizeStyles$2, props => retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledContent.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -59,7 +57,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$j = 'accordions.step_line';
 const StyledLine = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -71,7 +69,7 @@ StyledLine.defaultProps = {
 const COMPONENT_ID$i = 'accordions.step';
 const StyledStep = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -83,7 +81,7 @@ StyledStep.defaultProps = {
 const COMPONENT_ID$h = 'accordions.step_inner_content';
 const StyledInnerContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -95,7 +93,7 @@ StyledInnerContent.defaultProps = {
 const COMPONENT_ID$g = 'accordions.stepper';
 const StyledStepper = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -109,21 +107,21 @@ const StyledIconFlexContainer = styled.div.withConfig({
   displayName: "StyledIcon__StyledIconFlexContainer",
   componentId: "sc-v20nz9-0"
 })(["display:flex;flex-basis:100%;justify-content:center;width:100%;"]);
-const sizeStyles = props => {
+const sizeStyles$1 = 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);
 };
-const colorStyles$2 = props => {
+const colorStyles$3 = props => {
   return css(["background:", ";color:", ";"], props.isActive ? getColor('neutralHue', 600, props.theme) : getColor('neutralHue', 200, props.theme), props.isActive ? props.theme.colors.background : props.theme.colors.foreground);
 };
 const StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).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$2, props => retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["display:flex;align-items:center;justify-content:center;transition:background 0.25s ease-in-out,color 0.25s ease-in-out;border-radius:100%;", " ", " ", ";"], sizeStyles$1, colorStyles$3, props => retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledIconFlexContainer.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -134,7 +132,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID$e = 'accordions.step_label';
 const StyledLabel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -146,7 +144,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$d = 'accordions.step_label_text';
 const StyledLabelText = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -158,7 +156,7 @@ StyledLabelText.defaultProps = {
 const COMPONENT_ID$c = 'accordions.accordion';
 const StyledAccordion = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -168,31 +166,43 @@ StyledAccordion.defaultProps = {
 };
 
 const COMPONENT_ID$b = 'accordions.panel';
-const paddingStyles = props => {
+const colorStyles$2 = props => {
+  const {
+    theme,
+    isBare
+  } = props;
+  return css(["border-bottom-color:", ";"], isBare ? 'transparent' : getColor('neutralHue', 300, theme));
+};
+const sizeStyles = props => {
+  const {
+    theme,
+    isCompact,
+    isExpanded
+  } = props;
   const {
     base
-  } = props.theme.space;
+  } = theme.space;
   let paddingTop = base * 2;
   let paddingHorizontal = base * 5;
   let paddingBottom = base * 8;
-  if (props.isCompact) {
+  if (isCompact) {
     paddingTop = base * 2;
     paddingHorizontal = base * 3;
     paddingBottom = base * 4;
   }
-  if (props.isExpanded === false) {
+  if (isExpanded === false) {
     paddingTop = 0;
     paddingBottom = 0;
   }
-  return css(["transition:", ";padding:", "px ", "px ", "px;"], props.isAnimated && 'padding 0.25s ease-in-out', paddingTop, paddingHorizontal, paddingBottom);
+  return css(["grid-template-rows:", "fr;border-bottom-width:", ";border-bottom-style:solid;padding:", "px ", "px ", "px;line-height:", ";font-size:", ";"], isExpanded ? 1 : 0, theme.borderWidths.sm, paddingTop, paddingHorizontal, paddingBottom, getLineHeight(base * 5, theme.fontSizes.md), theme.fontSizes.md);
 };
 const StyledPanel = styled.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
-})(["", ";border-bottom:", ";", ";"], paddingStyles, props => `${props.theme.borders.sm} ${props.isBare ? 'transparent' : getColor('neutralHue', 300, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["display:grid;transition:", ";overflow:hidden;", " ", " ", ";"], props => props.isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out', sizeStyles, colorStyles$2, props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledPanel.defaultProps = {
   isAnimated: true,
   theme: DEFAULT_THEME
@@ -201,7 +211,7 @@ StyledPanel.defaultProps = {
 const COMPONENT_ID$a = 'accordions.section';
 const StyledSection = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -213,7 +223,7 @@ StyledSection.defaultProps = {
 const COMPONENT_ID$9 = 'accordions.header';
 const StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -238,7 +248,7 @@ const colorStyles$1 = props => {
 };
 const StyledButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
@@ -250,13 +260,12 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$7 = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
-})(["transition:", ";max-height:", ";overflow:hidden;line-height:", ";font-size:", ";", ";"], props => props.isAnimated && 'max-height 0.25s ease-in-out', props => !props.isExpanded && '0 !important', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["overflow:hidden;line-height:inherit;font-size:inherit;", ";"], props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledInnerPanel.defaultProps = {
-  isAnimated: true,
   theme: DEFAULT_THEME
 };
 
@@ -282,7 +291,7 @@ _ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
@@ -294,7 +303,7 @@ StyledRotateIcon.defaultProps = {
 const COMPONENT_ID$5 = 'timeline';
 const StyledTimeline = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -306,7 +315,7 @@ StyledTimeline.defaultProps = {
 const COMPONENT_ID$4 = 'timeline.content.separator';
 const StyledSeparator = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -318,7 +327,7 @@ StyledSeparator.defaultProps = {
 const COMPONENT_ID$3 = 'timeline.content';
 const StyledTimelineContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -330,7 +339,7 @@ StyledTimelineContent.defaultProps = {
 const COMPONENT_ID$2 = 'timeline.opposite.content';
 const StyledOppositeContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -342,7 +351,7 @@ StyledOppositeContent.defaultProps = {
 const COMPONENT_ID$1 = 'timeline.item';
 const StyledTimelineItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -361,7 +370,7 @@ const StyledItemIcon = styled(_ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.69.5'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -383,7 +392,7 @@ const StepContext = createContext(undefined);
 const useStepContext = () => {
   const context = useContext(StepContext);
   if (context === undefined) {
-    throw new Error('This component must be rendered within a Stepper.Step component');
+    throw new Error('This component must be rendered within a Stepper component');
   }
   return context;
 };
@@ -401,7 +410,7 @@ const SectionContext = createContext(undefined);
 const useSectionContext = () => {
   const context = useContext(SectionContext);
   if (context === undefined) {
-    throw new Error('This component must be rendered within a Accordion.Section component');
+    throw new Error('This component must be rendered within an Accordion component');
   }
   return context;
 };
@@ -433,18 +442,9 @@ const useTimelineItemContext = () => {
   return context;
 };
 
-const SectionComponent = forwardRef((props, ref) => {
-  const {
-    currentIndexRef
-  } = useAccordionContext();
-  const sectionIndexRef = useRef(currentIndexRef.current++);
-  const sectionIndex = sectionIndexRef.current;
-  return React__default.createElement(SectionContext.Provider, {
-    value: sectionIndex
-  }, React__default.createElement(StyledSection, _extends$3({
-    ref: ref
-  }, props)));
-});
+const SectionComponent = forwardRef((props, ref) => React__default.createElement(StyledSection, _extends$3({
+  ref: ref
+}, props)));
 SectionComponent.displayName = 'Accordion.Section';
 const Section = SectionComponent;
 
@@ -465,34 +465,35 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
 };
 
 const HeaderComponent = forwardRef((props, ref) => {
-  const {
-    level: ariaLevel,
-    isCompact,
-    isCollapsible,
-    getHeaderProps,
-    getTriggerProps,
-    expandedSections
-  } = useAccordionContext();
   const {
     onClick,
     onFocus,
     onBlur,
     onMouseOver,
     onMouseOut,
+    role,
     children,
     ...other
   } = props;
-  const sectionIndex = useSectionContext();
+  const {
+    level: ariaLevel,
+    isCompact,
+    isCollapsible,
+    getHeaderProps,
+    getTriggerProps,
+    expandedSections
+  } = useAccordionContext();
+  const sectionValue = useSectionContext();
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
-  const isExpanded = expandedSections.includes(sectionIndex);
+  const isExpanded = expandedSections.includes(sectionValue);
   const {
     onClick: onTriggerClick,
     onKeyDown,
     ...otherTriggerProps
   } = getTriggerProps({
     type: 'button',
-    index: sectionIndex
+    value: sectionValue
   });
   const onHeaderFocus = e => {
     e.persist();
@@ -510,20 +511,21 @@ const HeaderComponent = forwardRef((props, ref) => {
   }), [isHovered, otherTriggerProps]);
   return React__default.createElement(HeaderContext.Provider, {
     value: value
-  }, React__default.createElement(StyledHeader, getHeaderProps({
+  }, React__default.createElement(StyledHeader, _extends$3({
+    isCollapsible: isCollapsible,
+    isExpanded: isExpanded,
+    isFocused: isFocused
+  }, getHeaderProps({
     ref,
-    ariaLevel,
-    isCompact,
-    isFocused,
-    isExpanded,
-    isCollapsible,
+    'aria-level': ariaLevel,
+    role: role === undefined || role === null ? role : 'heading',
     onClick: composeEventHandlers(onClick, onTriggerClick),
     onFocus: composeEventHandlers(onFocus, onHeaderFocus),
     onBlur: composeEventHandlers(onBlur, () => setIsFocused(false)),
     onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
     onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false)),
     ...other
-  }), children, React__default.createElement(StyledRotateIcon, {
+  })), children, React__default.createElement(StyledRotateIcon, {
     isCompact: isCompact,
     isHovered: isHovered,
     isRotated: isExpanded,
@@ -536,13 +538,13 @@ HeaderComponent.displayName = 'Accordion.Header';
 const Header = HeaderComponent;
 
 const LabelComponent$1 = forwardRef((props, ref) => {
-  const sectionIndex = useSectionContext();
+  const sectionValue = useSectionContext();
   const {
     isCompact,
     isCollapsible,
     expandedSections
   } = useAccordionContext();
-  const isExpanded = expandedSections.includes(sectionIndex);
+  const isExpanded = expandedSections.includes(sectionValue);
   const {
     isHovered,
     otherTriggerProps
@@ -558,87 +560,78 @@ const LabelComponent$1 = forwardRef((props, ref) => {
 LabelComponent$1.displayName = 'Accordion.Label';
 const Label$1 = LabelComponent$1;
 
-const PanelComponent = forwardRef((props, ref) => {
+const PanelComponent = forwardRef((_ref, ref) => {
+  let {
+    role,
+    children,
+    ...props
+  } = _ref;
   const {
-    isCompact,
-    isBare,
     isAnimated,
-    getPanelProps,
-    expandedSections
-  } = useAccordionContext();
-  const panelRef = useRef();
-  const index = useSectionContext();
-  const isExpanded = expandedSections.includes(index);
-  const theme = useContext(ThemeContext);
-  const environment = useDocument(theme);
-  useEffect(() => {
-    if (!isAnimated) {
-      return undefined;
-    }
-    if (environment) {
-      const updateMaxHeight = debounce(() => {
-        if (panelRef.current) {
-          const child = panelRef.current.children[0];
-          child.style.maxHeight = `${child.scrollHeight}px`;
-        }
-      }, 100);
-      const win = environment.defaultView || window;
-      win.addEventListener('resize', updateMaxHeight);
-      updateMaxHeight();
-      return () => {
-        updateMaxHeight.cancel();
-        win.removeEventListener('resize', updateMaxHeight);
-      };
-    }
-    return undefined;
-  }, [isAnimated, panelRef, environment, props.children]);
-  return React__default.createElement(StyledPanel, getPanelProps({
-    role: null,
-    ref: mergeRefs([panelRef, ref]),
-    index,
     isBare,
     isCompact,
-    isExpanded,
-    isAnimated,
+    expandedSections,
+    getPanelProps
+  } = useAccordionContext();
+  const sectionValue = useSectionContext();
+  const isExpanded = expandedSections.includes(sectionValue);
+  return React__default.createElement(StyledPanel, _extends$3({
+    isAnimated: isAnimated,
+    isBare: isBare,
+    isCompact: isCompact,
+    isExpanded: isExpanded
+  }, getPanelProps({
+    role: role === undefined ? null : 'region',
+    ref,
+    value: sectionValue,
     ...props
-  }), React__default.createElement(StyledInnerPanel, {
-    isExpanded: isExpanded,
-    isAnimated: isAnimated
-  }, props.children));
+  })), React__default.createElement(StyledInnerPanel, null, children));
 });
 PanelComponent.displayName = 'Accordion.Panel';
 const Panel = PanelComponent;
 
 const AccordionComponent = forwardRef((_ref, ref) => {
   let {
-    level,
+    children,
     isBare,
-    onChange,
     isCompact,
     isAnimated,
     isExpandable,
     isCollapsible,
+    level,
+    onChange,
     defaultExpandedSections,
     expandedSections: controlledExpandedSections,
     ...props
   } = _ref;
+  const {
+    sections,
+    sectionChildren
+  } = useMemo(() => Children.toArray(children).filter(isValidElement).map((child, index) => React__default.createElement(SectionContext.Provider, {
+    key: index,
+    value: index
+  }, child)).reduce((acc, child, index) => {
+    acc.sectionChildren.push(child);
+    acc.sections.push(index);
+    return acc;
+  }, {
+    sectionChildren: [],
+    sections: []
+  }), [children]);
   const {
     expandedSections,
     getHeaderProps,
     getTriggerProps,
     getPanelProps
   } = useAccordion({
+    sections,
+    defaultExpandedSections,
+    expandedSections: controlledExpandedSections,
     collapsible: isCollapsible,
     expandable: isExpandable || false,
-    onChange,
-    defaultExpandedSections,
-    expandedSections: controlledExpandedSections
-  });
-  const currentIndexRef = useRef(0);
-  useEffect(() => {
-    currentIndexRef.current = 0;
+    onChange
   });
-  const value = useMemo(() => ({
+  const accordionContextValue = useMemo(() => ({
     level,
     isBare,
     isCompact,
@@ -647,14 +640,13 @@ const AccordionComponent = forwardRef((_ref, ref) => {
     getPanelProps,
     getHeaderProps,
     getTriggerProps,
-    currentIndexRef,
     expandedSections
-  }), [level, isBare, isCompact, isAnimated, isCollapsible, getPanelProps, getHeaderProps, getTriggerProps, currentIndexRef, expandedSections]);
+  }), [level, isBare, isCompact, isAnimated, isCollapsible, getPanelProps, getHeaderProps, getTriggerProps, expandedSections]);
   return React__default.createElement(AccordionContext.Provider, {
-    value: value
+    value: accordionContextValue
   }, React__default.createElement(StyledAccordion, _extends$3({
     ref: ref
-  }, props)));
+  }, props), sectionChildren));
 });
 AccordionComponent.displayName = 'Accordion';
 AccordionComponent.defaultProps = {
@@ -667,29 +659,18 @@ Accordion.Label = Label$1;
 Accordion.Panel = Panel;
 Accordion.Section = Section;
 
-const StepComponent = forwardRef((props, ref) => {
+const StepComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
   const {
-    currentIndexRef,
     isHorizontal
   } = useStepperContext();
-  const [currentStepIndex, setCurrentStepIndex] = useState(currentIndexRef.current);
-  useLayoutEffect(() => {
-    setCurrentStepIndex(currentIndexRef.current);
-    currentIndexRef.current++;
-    const currentIndex = currentIndexRef;
-    return () => {
-      currentIndex.current--;
-    };
-  }, [currentIndexRef]);
-  const value = useMemo(() => ({
-    currentStepIndex
-  }), [currentStepIndex]);
-  return React__default.createElement(StepContext.Provider, {
-    value: value
-  }, React__default.createElement(StyledStep, _extends$3({
+  return React__default.createElement(StyledStep, _extends$3({
     ref: ref,
     isHorizontal: isHorizontal
-  }, props), isHorizontal && React__default.createElement(StyledLine, null), props.children));
+  }, props), isHorizontal && React__default.createElement(StyledLine, null), children);
 });
 StepComponent.displayName = 'Stepper.Step';
 const Step = StepComponent;
@@ -723,16 +704,13 @@ const LabelComponent = forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   const {
-    currentStepIndex
-  } = useStepContext();
-  const {
-    activeIndex,
+    currentStepIndex,
+    isActive,
+    isCompleted,
     isHorizontal
-  } = useStepperContext();
+  } = useStepContext();
   const numericStep = currentStepIndex + 1;
   const stepIcon = icon || numericStep;
-  const isActive = activeIndex === currentStepIndex;
-  const isCompleted = activeIndex > currentStepIndex;
   const styledIcon = React__default.createElement(StyledIcon, {
     isActive: isActive,
     isHorizontal: isHorizontal
@@ -756,13 +734,9 @@ const Label = LabelComponent;
 
 const ContentComponent$1 = forwardRef((props, ref) => {
   const {
-    activeIndex,
+    isActive,
     isHorizontal
-  } = useStepperContext();
-  const {
-    currentStepIndex
   } = useStepContext();
-  const isActive = currentStepIndex === activeIndex;
   return isHorizontal === false ? React__default.createElement(StyledContent, _extends$3({
     ref: ref,
     isActive: isActive
@@ -773,31 +747,37 @@ const ContentComponent$1 = forwardRef((props, ref) => {
 ContentComponent$1.displayName = 'Stepper.Content';
 const Content$1 = ContentComponent$1;
 
+const DEFAULT_ACTIVE_INDEX = 0;
 const StepperComponent = forwardRef((_ref, ref) => {
   let {
+    activeIndex = DEFAULT_ACTIVE_INDEX,
     isHorizontal,
-    activeIndex,
+    children,
     ...props
   } = _ref;
-  const currentIndexRef = useRef(0);
   const stepperContext = useMemo(() => ({
-    isHorizontal: isHorizontal || false,
-    activeIndex: activeIndex,
-    currentIndexRef
-  }), [isHorizontal, activeIndex, currentIndexRef]);
-  useEffect(() => {
-    currentIndexRef.current = 0;
-  });
+    activeIndex,
+    isHorizontal: isHorizontal || false
+  }), [activeIndex, isHorizontal]);
   return React__default.createElement(StepperContext.Provider, {
     value: stepperContext
   }, React__default.createElement(StyledStepper, _extends$3({
     ref: ref,
     isHorizontal: isHorizontal
-  }, props)));
+  }, props), useMemo(() => Children.toArray(children).filter(isValidElement).map((child, index) => React__default.createElement(StepContext.Provider, {
+    key: index
+    ,
+    value: {
+      currentStepIndex: index,
+      isActive: stepperContext.activeIndex === index,
+      isCompleted: stepperContext.activeIndex > index,
+      isHorizontal: stepperContext.isHorizontal
+    }
+  }, child)), [children, stepperContext])));
 });
 StepperComponent.displayName = 'Stepper';
 StepperComponent.defaultProps = {
-  activeIndex: 0
+  activeIndex: DEFAULT_ACTIVE_INDEX
 };
 const Stepper = StepperComponent;
 Stepper.Content = Content$1;