@zendeskgarden/react-accordions 8.49.2 → 8.50.0

package/dist/index.cjs.js

@@ -10,14 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var containerAccordion = require('@zendeskgarden/container-accordion');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
-var PropTypes = require('prop-types');
-var mergeRefs = require('react-merge-refs');
-var debounce = require('lodash.debounce');
-var containerAccordion = require('@zendeskgarden/container-accordion');
 var containerUtilities = require('@zendeskgarden/container-utilities');
+var debounce = require('lodash.debounce');
+var mergeRefs = require('react-merge-refs');
+var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -42,9 +42,9 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.2'
+  'data-garden-version': '8.50.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.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 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.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -748,155 +754,6 @@ var useTimelineItemContext = function useTimelineItemContext() {
   return context;
 };
 
-var StepComponent = React.forwardRef(function (props, ref) {
-  var _useStepperContext = useStepperContext(),
-      currentIndexRef = _useStepperContext.currentIndexRef,
-      isHorizontal = _useStepperContext.isHorizontal;
-  var _useState = React.useState(currentIndexRef.current),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentStepIndex = _useState2[0],
-      setIndex = _useState2[1];
-  React.useLayoutEffect(function () {
-    setIndex(currentIndexRef.current);
-    currentIndexRef.current++;
-    var currentIndex = currentIndexRef;
-    return function () {
-      currentIndex.current--;
-    };
-  }, [currentIndexRef]);
-  var value = React.useMemo(function () {
-    return {
-      currentStepIndex: currentStepIndex
-    };
-  }, [currentStepIndex]);
-  return React__default["default"].createElement(StepContext.Provider, {
-    value: value
-  }, React__default["default"].createElement(StyledStep, _extends$3({
-    ref: ref,
-    isHorizontal: isHorizontal
-  }, props), isHorizontal && React__default["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__namespace.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__namespace.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 1.25,
-    d: "M3 9l3 3 7-7"
-  })));
-};
-
-var LabelComponent$1 = React.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["default"].createElement(StyledIcon, {
-    isActive: isActive,
-    isHorizontal: isHorizontal
-  }, isCompleted ? React__default["default"].createElement(SvgCheckSmStroke, null) : 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,
-    isHorizontal: isHorizontal
-  }, props.children));
-});
-LabelComponent$1.displayName = 'Stepper.Label';
-LabelComponent$1.propTypes = {
-  icon: PropTypes__default["default"].node,
-  isHidden: PropTypes__default["default"].bool
-};
-var Label$1 = LabelComponent$1;
-
-var ContentComponent$1 = React.forwardRef(function (props, ref) {
-  var contentRef = React.useRef();
-  var _useStepperContext = useStepperContext(),
-      activeIndex = _useStepperContext.activeIndex,
-      isHorizontal = _useStepperContext.isHorizontal;
-  var _useStepContext = useStepContext(),
-      currentStepIndex = _useStepContext.currentStepIndex;
-  var isActive = currentStepIndex === activeIndex;
-  var updateMaxHeight = React.useCallback(debounce__default["default"](function () {
-    if (contentRef.current) {
-      var child = contentRef.current.children[0];
-      child.style.maxHeight = "".concat(child.scrollHeight, "px");
-    }
-  }, 100), [contentRef]);
-  React.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["default"].createElement(StyledContent, _extends$3({
-    ref: mergeRefs__default["default"]([contentRef, ref]),
-    isActive: isActive
-  }, props), React__default["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 = React.forwardRef(function (_ref, ref) {
-  var isHorizontal = _ref.isHorizontal,
-      activeIndex = _ref.activeIndex,
-      props = _objectWithoutProperties(_ref, _excluded$4);
-  var currentIndexRef = React.useRef(0);
-  var stepperContext = React.useMemo(function () {
-    return {
-      isHorizontal: isHorizontal || false,
-      activeIndex: activeIndex,
-      currentIndexRef: currentIndexRef
-    };
-  }, [isHorizontal, activeIndex, currentIndexRef]);
-  React.useEffect(function () {
-    currentIndexRef.current = 0;
-  });
-  return React__default["default"].createElement(StepperContext.Provider, {
-    value: stepperContext
-  }, React__default["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 = React.forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
       currentIndexRef = _useAccordionContext.currentIndexRef;
@@ -911,25 +768,25 @@ var SectionComponent = React.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__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.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 = React.forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
@@ -945,7 +802,7 @@ var HeaderComponent = React.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 = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1015,7 +872,7 @@ var HeaderComponent = React.forwardRef(function (props, ref) {
 HeaderComponent.displayName = 'Accordion.Header';
 var Header = HeaderComponent;
 
-var LabelComponent = React.forwardRef(function (props, ref) {
+var LabelComponent$1 = React.forwardRef(function (props, ref) {
   var sectionIndex = useSectionContext();
   var _useAccordionContext = useAccordionContext(),
       isCompact = _useAccordionContext.isCompact,
@@ -1033,8 +890,8 @@ var LabelComponent = React.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 = React.forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
@@ -1078,7 +935,7 @@ var PanelComponent = React.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 = React.forwardRef(function (_ref, ref) {
   var level = _ref.level,
       isBare = _ref.isBare,
@@ -1089,7 +946,7 @@ var AccordionComponent = React.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 = containerAccordion.useAccordion({
     collapsible: isCollapsible,
     expandable: isExpandable || false,
@@ -1132,10 +989,167 @@ AccordionComponent.defaultProps = {
 };
 var Accordion = AccordionComponent;
 Accordion.Header = Header;
-Accordion.Label = Label;
+Accordion.Label = Label$1;
 Accordion.Panel = Panel;
 Accordion.Section = Section;
 
+var StepComponent = React.forwardRef(function (props, ref) {
+  var _useStepperContext = useStepperContext(),
+      currentIndexRef = _useStepperContext.currentIndexRef,
+      isHorizontal = _useStepperContext.isHorizontal;
+  var _useState = React.useState(currentIndexRef.current),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentStepIndex = _useState2[0],
+      setIndex = _useState2[1];
+  React.useLayoutEffect(function () {
+    setIndex(currentIndexRef.current);
+    currentIndexRef.current++;
+    var currentIndex = currentIndexRef;
+    return function () {
+      currentIndex.current--;
+    };
+  }, [currentIndexRef]);
+  var value = React.useMemo(function () {
+    return {
+      currentStepIndex: currentStepIndex
+    };
+  }, [currentStepIndex]);
+  return React__default["default"].createElement(StepContext.Provider, {
+    value: value
+  }, React__default["default"].createElement(StyledStep, _extends$3({
+    ref: ref,
+    isHorizontal: isHorizontal
+  }, props), isHorizontal && React__default["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__namespace.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__namespace.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 = 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 = 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, iconProps) : stepIcon);
+  return React__default["default"].createElement(StyledLabel, _extends$3({
+    ref: ref,
+    isActive: isActive,
+    isHorizontal: isHorizontal
+  }, other), isHorizontal ? React__default["default"].createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__default["default"].createElement(StyledLabelText, {
+    isHidden: isHidden,
+    isHorizontal: isHorizontal
+  }, 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;
+
+var ContentComponent$1 = React.forwardRef(function (props, ref) {
+  var contentRef = React.useRef();
+  var _useStepperContext = useStepperContext(),
+      activeIndex = _useStepperContext.activeIndex,
+      isHorizontal = _useStepperContext.isHorizontal;
+  var _useStepContext = useStepContext(),
+      currentStepIndex = _useStepContext.currentStepIndex;
+  var isActive = currentStepIndex === activeIndex;
+  var updateMaxHeight = React.useCallback(debounce__default["default"](function () {
+    if (contentRef.current) {
+      var child = contentRef.current.children[0];
+      child.style.maxHeight = "".concat(child.scrollHeight, "px");
+    }
+  }, 100), [contentRef]);
+  React.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["default"].createElement(StyledContent, _extends$3({
+    ref: mergeRefs__default["default"]([contentRef, ref]),
+    isActive: isActive
+  }, props), React__default["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 = React.forwardRef(function (_ref, ref) {
+  var isHorizontal = _ref.isHorizontal,
+      activeIndex = _ref.activeIndex,
+      props = _objectWithoutProperties(_ref, _excluded$2);
+  var currentIndexRef = React.useRef(0);
+  var stepperContext = React.useMemo(function () {
+    return {
+      isHorizontal: isHorizontal || false,
+      activeIndex: activeIndex,
+      currentIndexRef: currentIndexRef
+    };
+  }, [isHorizontal, activeIndex, currentIndexRef]);
+  React.useEffect(function () {
+    currentIndexRef.current = 0;
+  });
+  return React__default["default"].createElement(StepperContext.Provider, {
+    value: stepperContext
+  }, React__default["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 = React.forwardRef(function (props, ref) {
   return React__default["default"].createElement(StyledOppositeContent, _extends$3({
     ref: ref