@zendeskgarden/react-accordions 8.49.2 → 8.50.0

package/dist/index.esm.js

@@ -6,15 +6,15 @@
  */
 
 import * as React from 'react';
-import React__default, { cloneElement, Children, createContext, useContext, forwardRef, useState, useLayoutEffect, useMemo, useRef, useCallback, useEffect } from 'react';
+import React__default, { cloneElement, Children, createContext, useContext, forwardRef, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
+import { useAccordion } from '@zendeskgarden/container-accordion';
 import styled, { css } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
-import PropTypes from 'prop-types';
-import mergeRefs from 'react-merge-refs';
-import debounce from 'lodash.debounce';
-import { useAccordion } from '@zendeskgarden/container-accordion';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import debounce from 'lodash.debounce';
+import mergeRefs from 'react-merge-refs';
+import PropTypes from 'prop-types';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -718,155 +724,6 @@ var useTimelineItemContext = function useTimelineItemContext() {
   return context;
 };
 
-var StepComponent = forwardRef(function (props, ref) {
-  var _useStepperContext = useStepperContext(),
-      currentIndexRef = _useStepperContext.currentIndexRef,
-      isHorizontal = _useStepperContext.isHorizontal;
-  var _useState = useState(currentIndexRef.current),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentStepIndex = _useState2[0],
-      setIndex = _useState2[1];
-  useLayoutEffect(function () {
-    setIndex(currentIndexRef.current);
-    currentIndexRef.current++;
-    var currentIndex = currentIndexRef;
-    return function () {
-      currentIndex.current--;
-    };
-  }, [currentIndexRef]);
-  var value = useMemo(function () {
-    return {
-      currentStepIndex: currentStepIndex
-    };
-  }, [currentStepIndex]);
-  return React__default.createElement(StepContext.Provider, {
-    value: value
-  }, React__default.createElement(StyledStep, _extends$3({
-    ref: ref,
-    isHorizontal: isHorizontal
-  }, props), isHorizontal && React__default.createElement(StyledLine, null), props.children));
-});
-StepComponent.displayName = 'Stepper.Step';
-var Step = StepComponent;
-
-var _path$1;
-
-function _extends$2() { _extends$2 = Object.assign || 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$2.apply(this, arguments); }
-
-var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 1.25,
-    d: "M3 9l3 3 7-7"
-  })));
-};
-
-var LabelComponent$1 = forwardRef(function (props, ref) {
-  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 isActive = activeIndex === currentStepIndex;
-  var isCompleted = activeIndex > currentStepIndex;
-  var styledIcon = React__default.createElement(StyledIcon, {
-    isActive: isActive,
-    isHorizontal: isHorizontal
-  }, isCompleted ? React__default.createElement(SvgCheckSmStroke, null) : 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,
-    isHorizontal: isHorizontal
-  }, props.children));
-});
-LabelComponent$1.displayName = 'Stepper.Label';
-LabelComponent$1.propTypes = {
-  icon: PropTypes.node,
-  isHidden: PropTypes.bool
-};
-var Label$1 = LabelComponent$1;
-
-var ContentComponent$1 = forwardRef(function (props, ref) {
-  var contentRef = useRef();
-  var _useStepperContext = useStepperContext(),
-      activeIndex = _useStepperContext.activeIndex,
-      isHorizontal = _useStepperContext.isHorizontal;
-  var _useStepContext = useStepContext(),
-      currentStepIndex = _useStepContext.currentStepIndex;
-  var isActive = currentStepIndex === activeIndex;
-  var updateMaxHeight = useCallback(debounce(function () {
-    if (contentRef.current) {
-      var child = contentRef.current.children[0];
-      child.style.maxHeight = "".concat(child.scrollHeight, "px");
-    }
-  }, 100), [contentRef]);
-  useEffect(function () {
-    if (isActive && isHorizontal === false) {
-      addEventListener('resize', updateMaxHeight);
-      updateMaxHeight();
-      return function () {
-        removeEventListener('resize', updateMaxHeight);
-      };
-    }
-    return undefined;
-  }, [isActive, isHorizontal, props.children, updateMaxHeight]);
-  return isHorizontal === false ? React__default.createElement(StyledContent, _extends$3({
-    ref: mergeRefs([contentRef, ref]),
-    isActive: isActive
-  }, props), React__default.createElement(StyledInnerContent, {
-    isActive: isActive
-  }, props.children)) : null;
-});
-ContentComponent$1.displayName = 'Stepper.Content';
-var Content$1 = ContentComponent$1;
-
-var _excluded$4 = ["isHorizontal", "activeIndex"];
-var StepperComponent = forwardRef(function (_ref, ref) {
-  var isHorizontal = _ref.isHorizontal,
-      activeIndex = _ref.activeIndex,
-      props = _objectWithoutProperties(_ref, _excluded$4);
-  var currentIndexRef = useRef(0);
-  var stepperContext = useMemo(function () {
-    return {
-      isHorizontal: isHorizontal || false,
-      activeIndex: activeIndex,
-      currentIndexRef: currentIndexRef
-    };
-  }, [isHorizontal, activeIndex, currentIndexRef]);
-  useEffect(function () {
-    currentIndexRef.current = 0;
-  });
-  return React__default.createElement(StepperContext.Provider, {
-    value: stepperContext
-  }, React__default.createElement(StyledStepper, _extends$3({
-    ref: ref,
-    isHorizontal: isHorizontal
-  }, props)));
-});
-StepperComponent.displayName = 'Stepper';
-StepperComponent.defaultProps = {
-  activeIndex: 0
-};
-var Stepper = StepperComponent;
-Stepper.Content = Content$1;
-Stepper.Label = Label$1;
-Stepper.Step = Step;
-
 var SectionComponent = forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
       currentIndexRef = _useAccordionContext.currentIndexRef;
@@ -881,25 +738,25 @@ var SectionComponent = forwardRef(function (props, ref) {
 SectionComponent.displayName = 'Accordion.Section';
 var Section = SectionComponent;
 
-var _path;
+var _path$1;
 
-function _extends$1() { _extends$1 = Object.assign || 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$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign || 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$2.apply(this, arguments); }
 
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
   })));
 };
 
-var _excluded$3 = ["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(),
@@ -915,7 +772,7 @@ var HeaderComponent = forwardRef(function (props, ref) {
       onMouseOver = props.onMouseOver,
       onMouseOut = props.onMouseOut,
       children = props.children,
-      other = _objectWithoutProperties(props, _excluded$3);
+      other = _objectWithoutProperties(props, _excluded$5);
   var sectionIndex = useSectionContext();
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -985,7 +842,7 @@ var HeaderComponent = forwardRef(function (props, ref) {
 HeaderComponent.displayName = 'Accordion.Header';
 var Header = HeaderComponent;
 
-var LabelComponent = forwardRef(function (props, ref) {
+var LabelComponent$1 = forwardRef(function (props, ref) {
   var sectionIndex = useSectionContext();
   var _useAccordionContext = useAccordionContext(),
       isCompact = _useAccordionContext.isCompact,
@@ -1003,8 +860,8 @@ var LabelComponent = forwardRef(function (props, ref) {
     isCollapsible: isCollapsible
   }, otherTriggerProps, props));
 });
-LabelComponent.displayName = 'Accordion.Label';
-var Label = LabelComponent;
+LabelComponent$1.displayName = 'Accordion.Label';
+var Label$1 = LabelComponent$1;
 
 var PanelComponent = forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
@@ -1048,7 +905,7 @@ var PanelComponent = forwardRef(function (props, ref) {
 PanelComponent.displayName = 'Accordion.Panel';
 var Panel = PanelComponent;
 
-var _excluded$2 = ["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,
@@ -1059,7 +916,7 @@ var AccordionComponent = forwardRef(function (_ref, ref) {
       isCollapsible = _ref.isCollapsible,
       defaultExpandedSections = _ref.defaultExpandedSections,
       controlledExpandedSections = _ref.expandedSections,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$4);
   var _useAccordion = useAccordion({
     collapsible: isCollapsible,
     expandable: isExpandable || false,
@@ -1102,10 +959,167 @@ AccordionComponent.defaultProps = {
 };
 var Accordion = AccordionComponent;
 Accordion.Header = Header;
-Accordion.Label = Label;
+Accordion.Label = Label$1;
 Accordion.Panel = Panel;
 Accordion.Section = Section;
 
+var StepComponent = forwardRef(function (props, ref) {
+  var _useStepperContext = useStepperContext(),
+      currentIndexRef = _useStepperContext.currentIndexRef,
+      isHorizontal = _useStepperContext.isHorizontal;
+  var _useState = useState(currentIndexRef.current),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentStepIndex = _useState2[0],
+      setIndex = _useState2[1];
+  useLayoutEffect(function () {
+    setIndex(currentIndexRef.current);
+    currentIndexRef.current++;
+    var currentIndex = currentIndexRef;
+    return function () {
+      currentIndex.current--;
+    };
+  }, [currentIndexRef]);
+  var value = useMemo(function () {
+    return {
+      currentStepIndex: currentStepIndex
+    };
+  }, [currentStepIndex]);
+  return React__default.createElement(StepContext.Provider, {
+    value: value
+  }, React__default.createElement(StyledStep, _extends$3({
+    ref: ref,
+    isHorizontal: isHorizontal
+  }, props), isHorizontal && React__default.createElement(StyledLine, null), props.children));
+});
+StepComponent.displayName = 'Stepper.Step';
+var Step = StepComponent;
+
+var _path;
+
+function _extends$1() { _extends$1 = Object.assign || 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$1.apply(this, arguments); }
+
+var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.25,
+    d: "M3 9l3 3 7-7"
+  })));
+};
+
+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 = 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, iconProps) : stepIcon);
+  return React__default.createElement(StyledLabel, _extends$3({
+    ref: ref,
+    isActive: isActive,
+    isHorizontal: isHorizontal
+  }, other), isHorizontal ? React__default.createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__default.createElement(StyledLabelText, {
+    isHidden: isHidden,
+    isHorizontal: isHorizontal
+  }, children));
+});
+LabelComponent.displayName = 'Stepper.Label';
+LabelComponent.propTypes = {
+  icon: PropTypes.node,
+  iconProps: PropTypes.object,
+  isHidden: PropTypes.bool
+};
+var Label = LabelComponent;
+
+var ContentComponent$1 = forwardRef(function (props, ref) {
+  var contentRef = useRef();
+  var _useStepperContext = useStepperContext(),
+      activeIndex = _useStepperContext.activeIndex,
+      isHorizontal = _useStepperContext.isHorizontal;
+  var _useStepContext = useStepContext(),
+      currentStepIndex = _useStepContext.currentStepIndex;
+  var isActive = currentStepIndex === activeIndex;
+  var updateMaxHeight = useCallback(debounce(function () {
+    if (contentRef.current) {
+      var child = contentRef.current.children[0];
+      child.style.maxHeight = "".concat(child.scrollHeight, "px");
+    }
+  }, 100), [contentRef]);
+  useEffect(function () {
+    if (isActive && isHorizontal === false) {
+      addEventListener('resize', updateMaxHeight);
+      updateMaxHeight();
+      return function () {
+        removeEventListener('resize', updateMaxHeight);
+      };
+    }
+    return undefined;
+  }, [isActive, isHorizontal, props.children, updateMaxHeight]);
+  return isHorizontal === false ? React__default.createElement(StyledContent, _extends$3({
+    ref: mergeRefs([contentRef, ref]),
+    isActive: isActive
+  }, props), React__default.createElement(StyledInnerContent, {
+    isActive: isActive,
+    "aria-hidden": !isActive
+  }, props.children)) : null;
+});
+ContentComponent$1.displayName = 'Stepper.Content';
+var Content$1 = ContentComponent$1;
+
+var _excluded$2 = ["isHorizontal", "activeIndex"];
+var StepperComponent = forwardRef(function (_ref, ref) {
+  var isHorizontal = _ref.isHorizontal,
+      activeIndex = _ref.activeIndex,
+      props = _objectWithoutProperties(_ref, _excluded$2);
+  var currentIndexRef = useRef(0);
+  var stepperContext = useMemo(function () {
+    return {
+      isHorizontal: isHorizontal || false,
+      activeIndex: activeIndex,
+      currentIndexRef: currentIndexRef
+    };
+  }, [isHorizontal, activeIndex, currentIndexRef]);
+  useEffect(function () {
+    currentIndexRef.current = 0;
+  });
+  return React__default.createElement(StepperContext.Provider, {
+    value: stepperContext
+  }, React__default.createElement(StyledStepper, _extends$3({
+    ref: ref,
+    isHorizontal: isHorizontal
+  }, props)));
+});
+StepperComponent.displayName = 'Stepper';
+StepperComponent.defaultProps = {
+  activeIndex: 0
+};
+var Stepper = StepperComponent;
+Stepper.Content = Content$1;
+Stepper.Label = Label;
+Stepper.Step = Step;
+
 var OppositeContentComponent = forwardRef(function (props, ref) {
   return React__default.createElement(StyledOppositeContent, _extends$3({
     ref: ref

package/dist/typings/elements/accordion/Accordion.d.ts

@@ -4,35 +4,12 @@
  * 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 React, { HTMLAttributes } from 'react';
+import React from 'react';
+import { IAccordionProps } from '../../types';
 import { Section } from '../accordion/components/Section';
 import { Header } from '../accordion/components/Header';
 import { Label } from '../accordion/components/Label';
 import { Panel } from '../accordion/components/Panel';
-export interface IAccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /** Sets `aria-level` heading rank in the document structure */
-    level: number;
-    /** Sets the expanded sections in a controlled accordion */
-    expandedSections?: number[];
-    /** Sets the default expanded sections in an uncontrolled accordion */
-    defaultExpandedSections?: number[];
-    /** Hides section borders */
-    isBare?: boolean;
-    /** Allows uncontrolled accordion sections to collapse */
-    isCollapsible?: boolean;
-    /** Applies compact styling */
-    isCompact?: boolean;
-    /** Animates section expansion and collapse */
-    isAnimated?: boolean;
-    /** Enables simultaneous expansion of uncontrolled accordion sections */
-    isExpandable?: boolean;
-    /**
-     * Handles accordion expansion changes
-     *
-     * @param {number} index A section index
-     */
-    onChange?: (index: number) => void;
-}
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */