@zendeskgarden/react-accordions 8.69.6 → 8.69.7

package/dist/index.cjs.js

@@ -13,8 +13,6 @@ var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
 var containerUtilities = require('@zendeskgarden/container-utilities');
-var debounce = require('lodash.debounce');
-var mergeRefs = require('react-merge-refs');
 var PropTypes = require('prop-types');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -39,8 +37,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var debounce__default = /*#__PURE__*/_interopDefault(debounce);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
 function _extends$3() {
@@ -59,7 +55,7 @@ function _extends$3() {
 }
 
 const COMPONENT_ID$k = 'accordions.step_content';
-const sizeStyles$1 = props => {
+const sizeStyles$2 = props => {
   const {
     rtl,
     space
@@ -74,11 +70,11 @@ const sizeStyles$1 = props => {
 };
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.69.6'
+  '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 => reactTheming.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -86,7 +82,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$j = 'accordions.step_line';
 const StyledLine = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -98,7 +94,7 @@ StyledLine.defaultProps = {
 const COMPONENT_ID$i = 'accordions.step';
 const StyledStep = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -110,7 +106,7 @@ StyledStep.defaultProps = {
 const COMPONENT_ID$h = 'accordions.step_inner_content';
 const StyledInnerContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -122,7 +118,7 @@ StyledInnerContent.defaultProps = {
 const COMPONENT_ID$g = 'accordions.stepper';
 const StyledStepper = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -136,21 +132,21 @@ const StyledIconFlexContainer = styled__default.default.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 styled.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, reactTheming.getLineHeight(size, fontSize), fontSize);
 };
-const colorStyles$2 = props => {
+const colorStyles$3 = props => {
   return styled.css(["background:", ";color:", ";"], props.isActive ? reactTheming.getColor('neutralHue', 600, props.theme) : reactTheming.getColor('neutralHue', 200, props.theme), props.isActive ? props.theme.colors.background : props.theme.colors.foreground);
 };
 const StyledIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.69.6'
+  '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 => reactTheming.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledIconFlexContainer.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -161,7 +157,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID$e = 'accordions.step_label';
 const StyledLabel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -173,7 +169,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$d = 'accordions.step_label_text';
 const StyledLabelText = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -185,7 +181,7 @@ StyledLabelText.defaultProps = {
 const COMPONENT_ID$c = 'accordions.accordion';
 const StyledAccordion = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -195,31 +191,43 @@ StyledAccordion.defaultProps = {
 };
 
 const COMPONENT_ID$b = 'accordions.panel';
-const paddingStyles = props => {
+const colorStyles$2 = props => {
+  const {
+    theme,
+    isBare
+  } = props;
+  return styled.css(["border-bottom-color:", ";"], isBare ? 'transparent' : reactTheming.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 styled.css(["transition:", ";padding:", "px ", "px ", "px;"], props.isAnimated && 'padding 0.25s ease-in-out', paddingTop, paddingHorizontal, paddingBottom);
+  return styled.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, reactTheming.getLineHeight(base * 5, theme.fontSizes.md), theme.fontSizes.md);
 };
 const StyledPanel = styled__default.default.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
-})(["", ";border-bottom:", ";", ";"], paddingStyles, props => `${props.theme.borders.sm} ${props.isBare ? 'transparent' : reactTheming.getColor('neutralHue', 300, props.theme)}`, props => reactTheming.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledPanel.defaultProps = {
   isAnimated: true,
   theme: reactTheming.DEFAULT_THEME
@@ -228,7 +236,7 @@ StyledPanel.defaultProps = {
 const COMPONENT_ID$a = 'accordions.section';
 const StyledSection = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -240,7 +248,7 @@ StyledSection.defaultProps = {
 const COMPONENT_ID$9 = 'accordions.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -265,7 +273,7 @@ const colorStyles$1 = props => {
 };
 const StyledButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
@@ -277,13 +285,12 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$7 = 'accordions.step_inner_panel';
 const StyledInnerPanel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.69.6'
+  '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 => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["overflow:hidden;line-height:inherit;font-size:inherit;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledInnerPanel.defaultProps = {
-  isAnimated: true,
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -309,7 +316,7 @@ _ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
@@ -321,7 +328,7 @@ StyledRotateIcon.defaultProps = {
 const COMPONENT_ID$5 = 'timeline';
 const StyledTimeline = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -333,7 +340,7 @@ StyledTimeline.defaultProps = {
 const COMPONENT_ID$4 = 'timeline.content.separator';
 const StyledSeparator = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -345,7 +352,7 @@ StyledSeparator.defaultProps = {
 const COMPONENT_ID$3 = 'timeline.content';
 const StyledTimelineContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -357,7 +364,7 @@ StyledTimelineContent.defaultProps = {
 const COMPONENT_ID$2 = 'timeline.opposite.content';
 const StyledOppositeContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -369,7 +376,7 @@ StyledOppositeContent.defaultProps = {
 const COMPONENT_ID$1 = 'timeline.item';
 const StyledTimelineItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -388,7 +395,7 @@ const StyledItemIcon = styled__default.default(_ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.69.6'
+  'data-garden-version': '8.69.7'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -410,7 +417,7 @@ const StepContext = React.createContext(undefined);
 const useStepContext = () => {
   const context = React.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;
 };
@@ -428,7 +435,7 @@ const SectionContext = React.createContext(undefined);
 const useSectionContext = () => {
   const context = React.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;
 };
@@ -460,18 +467,9 @@ const useTimelineItemContext = () => {
   return context;
 };
 
-const SectionComponent = React.forwardRef((props, ref) => {
-  const {
-    currentIndexRef
-  } = useAccordionContext();
-  const sectionIndexRef = React.useRef(currentIndexRef.current++);
-  const sectionIndex = sectionIndexRef.current;
-  return React__namespace.default.createElement(SectionContext.Provider, {
-    value: sectionIndex
-  }, React__namespace.default.createElement(StyledSection, _extends$3({
-    ref: ref
-  }, props)));
-});
+const SectionComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledSection, _extends$3({
+  ref: ref
+}, props)));
 SectionComponent.displayName = 'Accordion.Section';
 const Section = SectionComponent;
 
@@ -492,34 +490,35 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
 };
 
 const HeaderComponent = React.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] = React.useState(false);
   const [isHovered, setIsHovered] = React.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();
@@ -537,20 +536,21 @@ const HeaderComponent = React.forwardRef((props, ref) => {
   }), [isHovered, otherTriggerProps]);
   return React__namespace.default.createElement(HeaderContext.Provider, {
     value: value
-  }, React__namespace.default.createElement(StyledHeader, getHeaderProps({
+  }, React__namespace.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: containerUtilities.composeEventHandlers(onClick, onTriggerClick),
     onFocus: containerUtilities.composeEventHandlers(onFocus, onHeaderFocus),
     onBlur: containerUtilities.composeEventHandlers(onBlur, () => setIsFocused(false)),
     onMouseOver: containerUtilities.composeEventHandlers(onMouseOver, () => setIsHovered(true)),
     onMouseOut: containerUtilities.composeEventHandlers(onMouseOut, () => setIsHovered(false)),
     ...other
-  }), children, React__namespace.default.createElement(StyledRotateIcon, {
+  })), children, React__namespace.default.createElement(StyledRotateIcon, {
     isCompact: isCompact,
     isHovered: isHovered,
     isRotated: isExpanded,
@@ -563,13 +563,13 @@ HeaderComponent.displayName = 'Accordion.Header';
 const Header = HeaderComponent;
 
 const LabelComponent$1 = React.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
@@ -585,87 +585,78 @@ const LabelComponent$1 = React.forwardRef((props, ref) => {
 LabelComponent$1.displayName = 'Accordion.Label';
 const Label$1 = LabelComponent$1;
 
-const PanelComponent = React.forwardRef((props, ref) => {
+const PanelComponent = React.forwardRef((_ref, ref) => {
+  let {
+    role,
+    children,
+    ...props
+  } = _ref;
   const {
-    isCompact,
-    isBare,
     isAnimated,
-    getPanelProps,
-    expandedSections
-  } = useAccordionContext();
-  const panelRef = React.useRef();
-  const index = useSectionContext();
-  const isExpanded = expandedSections.includes(index);
-  const theme = React.useContext(styled.ThemeContext);
-  const environment = reactTheming.useDocument(theme);
-  React.useEffect(() => {
-    if (!isAnimated) {
-      return undefined;
-    }
-    if (environment) {
-      const updateMaxHeight = debounce__default.default(() => {
-        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__namespace.default.createElement(StyledPanel, getPanelProps({
-    role: null,
-    ref: mergeRefs__default.default([panelRef, ref]),
-    index,
     isBare,
     isCompact,
-    isExpanded,
-    isAnimated,
+    expandedSections,
+    getPanelProps
+  } = useAccordionContext();
+  const sectionValue = useSectionContext();
+  const isExpanded = expandedSections.includes(sectionValue);
+  return React__namespace.default.createElement(StyledPanel, _extends$3({
+    isAnimated: isAnimated,
+    isBare: isBare,
+    isCompact: isCompact,
+    isExpanded: isExpanded
+  }, getPanelProps({
+    role: role === undefined ? null : 'region',
+    ref,
+    value: sectionValue,
     ...props
-  }), React__namespace.default.createElement(StyledInnerPanel, {
-    isExpanded: isExpanded,
-    isAnimated: isAnimated
-  }, props.children));
+  })), React__namespace.default.createElement(StyledInnerPanel, null, children));
 });
 PanelComponent.displayName = 'Accordion.Panel';
 const Panel = PanelComponent;
 
 const AccordionComponent = React.forwardRef((_ref, ref) => {
   let {
-    level,
+    children,
     isBare,
-    onChange,
     isCompact,
     isAnimated,
     isExpandable,
     isCollapsible,
+    level,
+    onChange,
     defaultExpandedSections,
     expandedSections: controlledExpandedSections,
     ...props
   } = _ref;
+  const {
+    sections,
+    sectionChildren
+  } = React.useMemo(() => React.Children.toArray(children).filter(React.isValidElement).map((child, index) => React__namespace.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
   } = containerAccordion.useAccordion({
+    sections,
+    defaultExpandedSections,
+    expandedSections: controlledExpandedSections,
     collapsible: isCollapsible,
     expandable: isExpandable || false,
-    onChange,
-    defaultExpandedSections,
-    expandedSections: controlledExpandedSections
-  });
-  const currentIndexRef = React.useRef(0);
-  React.useEffect(() => {
-    currentIndexRef.current = 0;
+    onChange
   });
-  const value = React.useMemo(() => ({
+  const accordionContextValue = React.useMemo(() => ({
     level,
     isBare,
     isCompact,
@@ -674,14 +665,13 @@ const AccordionComponent = React.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__namespace.default.createElement(AccordionContext.Provider, {
-    value: value
+    value: accordionContextValue
   }, React__namespace.default.createElement(StyledAccordion, _extends$3({
     ref: ref
-  }, props)));
+  }, props), sectionChildren));
 });
 AccordionComponent.displayName = 'Accordion';
 AccordionComponent.defaultProps = {
@@ -694,29 +684,18 @@ Accordion.Label = Label$1;
 Accordion.Panel = Panel;
 Accordion.Section = Section;
 
-const StepComponent = React.forwardRef((props, ref) => {
+const StepComponent = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
   const {
-    currentIndexRef,
     isHorizontal
   } = useStepperContext();
-  const [currentStepIndex, setCurrentStepIndex] = React.useState(currentIndexRef.current);
-  React.useLayoutEffect(() => {
-    setCurrentStepIndex(currentIndexRef.current);
-    currentIndexRef.current++;
-    const currentIndex = currentIndexRef;
-    return () => {
-      currentIndex.current--;
-    };
-  }, [currentIndexRef]);
-  const value = React.useMemo(() => ({
-    currentStepIndex
-  }), [currentStepIndex]);
-  return React__namespace.default.createElement(StepContext.Provider, {
-    value: value
-  }, React__namespace.default.createElement(StyledStep, _extends$3({
+  return React__namespace.default.createElement(StyledStep, _extends$3({
     ref: ref,
     isHorizontal: isHorizontal
-  }, props), isHorizontal && React__namespace.default.createElement(StyledLine, null), props.children));
+  }, props), isHorizontal && React__namespace.default.createElement(StyledLine, null), children);
 });
 StepComponent.displayName = 'Stepper.Step';
 const Step = StepComponent;
@@ -750,16 +729,13 @@ const LabelComponent = React.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__namespace.default.createElement(StyledIcon, {
     isActive: isActive,
     isHorizontal: isHorizontal
@@ -783,13 +759,9 @@ const Label = LabelComponent;
 
 const ContentComponent$1 = React.forwardRef((props, ref) => {
   const {
-    activeIndex,
+    isActive,
     isHorizontal
-  } = useStepperContext();
-  const {
-    currentStepIndex
   } = useStepContext();
-  const isActive = currentStepIndex === activeIndex;
   return isHorizontal === false ? React__namespace.default.createElement(StyledContent, _extends$3({
     ref: ref,
     isActive: isActive
@@ -800,31 +772,37 @@ const ContentComponent$1 = React.forwardRef((props, ref) => {
 ContentComponent$1.displayName = 'Stepper.Content';
 const Content$1 = ContentComponent$1;
 
+const DEFAULT_ACTIVE_INDEX = 0;
 const StepperComponent = React.forwardRef((_ref, ref) => {
   let {
+    activeIndex = DEFAULT_ACTIVE_INDEX,
     isHorizontal,
-    activeIndex,
+    children,
     ...props
   } = _ref;
-  const currentIndexRef = React.useRef(0);
   const stepperContext = React.useMemo(() => ({
-    isHorizontal: isHorizontal || false,
-    activeIndex: activeIndex,
-    currentIndexRef
-  }), [isHorizontal, activeIndex, currentIndexRef]);
-  React.useEffect(() => {
-    currentIndexRef.current = 0;
-  });
+    activeIndex,
+    isHorizontal: isHorizontal || false
+  }), [activeIndex, isHorizontal]);
   return React__namespace.default.createElement(StepperContext.Provider, {
     value: stepperContext
   }, React__namespace.default.createElement(StyledStepper, _extends$3({
     ref: ref,
     isHorizontal: isHorizontal
-  }, props)));
+  }, props), React.useMemo(() => React.Children.toArray(children).filter(React.isValidElement).map((child, index) => React__namespace.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;