@zendeskgarden/react-accordions 8.47.1 → 8.48.2

package/dist/index.esm.js

@@ -21,14 +21,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -36,19 +31,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -197,7 +185,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-mazvvo-0"
@@ -213,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledLine",
   componentId: "sc-1gkpjbr-0"
@@ -235,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledStep",
   componentId: "sc-12fiwtz-0"
@@ -265,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledInnerContent",
   componentId: "sc-1xs9fh7-0"
@@ -287,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledStepper",
   componentId: "sc-dsxw0f-0"
@@ -315,7 +303,7 @@ var colorStyles$2 = function colorStyles(props) {
 };
 var StyledIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-v20nz9-1"
@@ -332,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1o82llj-0"
@@ -360,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledLabelText",
   componentId: "sc-111m5zo-0"
@@ -378,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledAccordion",
   componentId: "sc-niv9ic-0"
@@ -408,7 +396,7 @@ var paddingStyles = function paddingStyles(props) {
 };
 var StyledPanel = styled.section.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledPanel",
   componentId: "sc-1piryze-0"
@@ -425,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledSection",
   componentId: "sc-v2t9bd-0"
@@ -439,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-2c6rbr-0"
@@ -467,7 +455,7 @@ var colorStyles$1 = function colorStyles(props) {
 };
 var StyledButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-xj3hy7-0"
@@ -493,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledInnerPanel",
   componentId: "sc-8nbueg-0"
@@ -534,7 +522,7 @@ function (_ref) {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledRotateIcon",
   componentId: "sc-hp435q-0"
@@ -556,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledTimeline",
   componentId: "sc-pig5kv-0"
@@ -570,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-fki51e-0"
@@ -588,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledContent__StyledTimelineContent",
   componentId: "sc-19phgu1-0"
@@ -604,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.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledOppositeContent",
   componentId: "sc-jurh2k-0"
@@ -622,7 +610,7 @@ StyledOppositeContent.defaultProps = {
 var COMPONENT_ID$1 = 'timeline.item';
 var StyledTimelineItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledItem__StyledTimelineItem",
   componentId: "sc-5mcnzm-0"
@@ -646,7 +634,7 @@ var StyledItemIcon = styled(function (_ref) {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.47.1'
+  'data-garden-version': '8.48.2'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-vz2l6e-0"
@@ -730,7 +718,7 @@ var useTimelineItemContext = function useTimelineItemContext() {
   return context;
 };
 
-var Step = forwardRef(function (props, ref) {
+var StepComponent = forwardRef(function (props, ref) {
   var _useStepperContext = useStepperContext(),
       currentIndexRef = _useStepperContext.currentIndexRef,
       isHorizontal = _useStepperContext.isHorizontal;
@@ -758,31 +746,32 @@ var Step = forwardRef(function (props, ref) {
     isHorizontal: isHorizontal
   }, props), isHorizontal && React__default.createElement(StyledLine, null), props.children));
 });
-Step.displayName = 'Step';
+StepComponent.displayName = 'Stepper.Step';
+var Step = StepComponent;
 
-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 _path$1;
 
-var _ref$2 = /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 1.25,
-  d: "M3 9l3 3 7-7"
-});
+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); }
 
-function SvgCheckSmStroke(props) {
+var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$2);
-}
+    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 Label$1 = forwardRef(function (props, ref) {
+var LabelComponent$1 = forwardRef(function (props, ref) {
   var _useStepContext = useStepContext(),
       currentStepIndex = _useStepContext.currentStepIndex;
   var _useStepperContext = useStepperContext(),
@@ -805,13 +794,14 @@ var Label$1 = forwardRef(function (props, ref) {
     isHorizontal: isHorizontal
   }, props.children));
 });
-Label$1.displayName = 'Label';
-Label$1.propTypes = {
+LabelComponent$1.displayName = 'Stepper.Label';
+LabelComponent$1.propTypes = {
   icon: PropTypes.node,
   isHidden: PropTypes.bool
 };
+var Label$1 = LabelComponent$1;
 
-var Content$1 = forwardRef(function (props, ref) {
+var ContentComponent$1 = forwardRef(function (props, ref) {
   var contentRef = useRef();
   var _useStepperContext = useStepperContext(),
       activeIndex = _useStepperContext.activeIndex,
@@ -842,17 +832,18 @@ var Content$1 = forwardRef(function (props, ref) {
     isActive: isActive
   }, props.children)) : null;
 });
-Content$1.displayName = 'Content';
+ContentComponent$1.displayName = 'Stepper.Content';
+var Content$1 = ContentComponent$1;
 
 var _excluded$4 = ["isHorizontal", "activeIndex"];
-var Stepper = forwardRef(function (_ref, ref) {
+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,
+      isHorizontal: isHorizontal || false,
       activeIndex: activeIndex,
       currentIndexRef: currentIndexRef
     };
@@ -867,16 +858,16 @@ var Stepper = forwardRef(function (_ref, ref) {
     isHorizontal: isHorizontal
   }, props)));
 });
-Stepper.Step = Step;
-Stepper.Label = Label$1;
-Stepper.Content = Content$1;
-Stepper.displayName = 'Stepper';
-Stepper.defaultProps = {
-  activeIndex: 0,
-  isHorizontal: false
+StepperComponent.displayName = 'Stepper';
+StepperComponent.defaultProps = {
+  activeIndex: 0
 };
+var Stepper = StepperComponent;
+Stepper.Content = Content$1;
+Stepper.Label = Label$1;
+Stepper.Step = Step;
 
-var Section = forwardRef(function (props, ref) {
+var SectionComponent = forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
       currentIndexRef = _useAccordionContext.currentIndexRef;
   var sectionIndexRef = useRef(currentIndexRef.current++);
@@ -887,29 +878,30 @@ var Section = forwardRef(function (props, ref) {
     ref: ref
   }, props)));
 });
-Section.displayName = 'Section';
+SectionComponent.displayName = 'Accordion.Section';
+var Section = SectionComponent;
 
-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 _path;
 
-var _ref$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"
-});
+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 SvgChevronDownStroke(props) {
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$1);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__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"],
     _excluded2 = ["onClick", "onKeyDown"];
-var Header = forwardRef(function (props, ref) {
+var HeaderComponent = forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
       ariaLevel = _useAccordionContext.level,
       isCompact = _useAccordionContext.isCompact,
@@ -990,9 +982,10 @@ var Header = forwardRef(function (props, ref) {
     })
   }, React__default.createElement(SvgChevronDownStroke, null))));
 });
-Header.displayName = 'Header';
+HeaderComponent.displayName = 'Accordion.Header';
+var Header = HeaderComponent;
 
-var Label = forwardRef(function (props, ref) {
+var LabelComponent = forwardRef(function (props, ref) {
   var sectionIndex = useSectionContext();
   var _useAccordionContext = useAccordionContext(),
       isCompact = _useAccordionContext.isCompact,
@@ -1010,9 +1003,10 @@ var Label = forwardRef(function (props, ref) {
     isCollapsible: isCollapsible
   }, otherTriggerProps, props));
 });
-Label.displayName = 'Label';
+LabelComponent.displayName = 'Accordion.Label';
+var Label = LabelComponent;
 
-var Panel = forwardRef(function (props, ref) {
+var PanelComponent = forwardRef(function (props, ref) {
   var _useAccordionContext = useAccordionContext(),
       isCompact = _useAccordionContext.isCompact,
       isBare = _useAccordionContext.isBare,
@@ -1051,10 +1045,11 @@ var Panel = forwardRef(function (props, ref) {
     isAnimated: isAnimated
   }, props.children));
 });
-Panel.displayName = 'Panel';
+PanelComponent.displayName = 'Accordion.Panel';
+var Panel = PanelComponent;
 
 var _excluded$2 = ["level", "isBare", "onChange", "isCompact", "isAnimated", "isExpandable", "isCollapsible", "defaultExpandedSections", "expandedSections"];
-var Accordion = forwardRef(function (_ref, ref) {
+var AccordionComponent = forwardRef(function (_ref, ref) {
   var level = _ref.level,
       isBare = _ref.isBare,
       onChange = _ref.onChange,
@@ -1067,7 +1062,7 @@ var Accordion = forwardRef(function (_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded$2);
   var _useAccordion = useAccordion({
     collapsible: isCollapsible,
-    expandable: isExpandable,
+    expandable: isExpandable || false,
     onChange: onChange,
     defaultExpandedSections: defaultExpandedSections,
     expandedSections: controlledExpandedSections
@@ -1100,25 +1095,27 @@ var Accordion = forwardRef(function (_ref, ref) {
     ref: ref
   }, props)));
 });
-Accordion.Section = Section;
+AccordionComponent.displayName = 'Accordion';
+AccordionComponent.defaultProps = {
+  isAnimated: true,
+  isCollapsible: true
+};
+var Accordion = AccordionComponent;
 Accordion.Header = Header;
 Accordion.Label = Label;
 Accordion.Panel = Panel;
-Accordion.displayName = 'Accordion';
-Accordion.defaultProps = {
-  isBare: false,
-  isCompact: false,
-  isAnimated: true,
-  isCollapsible: true,
-  isExpandable: false,
-  expandedSections: undefined,
-  onChange: function onChange() {
-    return undefined;
-  }
-};
+Accordion.Section = Section;
+
+var OppositeContentComponent = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledOppositeContent, _extends$3({
+    ref: ref
+  }, props));
+});
+OppositeContentComponent.displayName = 'Timeline.OppositeContent';
+var OppositeContent = OppositeContentComponent;
 
 var _excluded$1 = ["icon", "surfaceColor"];
-var Item = forwardRef(function (_ref, ref) {
+var ItemComponent = forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
       surfaceColor = _ref.surfaceColor,
       props = _objectWithoutProperties(_ref, _excluded$1);
@@ -1133,7 +1130,7 @@ var Item = forwardRef(function (_ref, ref) {
   var hasOppositeContent = false;
   Children.forEach(props.children, function (child) {
     if (child) {
-      if (child.type === Timeline.OppositeContent) {
+      if (child.type === OppositeContent) {
         hasOppositeContent = true;
       }
     }
@@ -1146,30 +1143,31 @@ var Item = forwardRef(function (_ref, ref) {
     hasOppositeContent: hasOppositeContent
   }, props)));
 });
-Item.displayName = 'Item';
+ItemComponent.displayName = 'Timeline.Item';
+var Item = ItemComponent;
 
-function _extends() { _extends = 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.apply(this, arguments); }
+var _circle;
 
-var _ref = /*#__PURE__*/React.createElement("circle", {
-  cx: 6,
-  cy: 6,
-  r: 4.5,
-  fill: "none",
-  stroke: "currentColor"
-});
+function _extends() { _extends = 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.apply(this, arguments); }
 
-function SvgCircleFullStroke(props) {
+var SvgCircleFullStroke = function SvgCircleFullStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
-    viewBox: "0 0 12 12",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 6,
+    cy: 6,
+    r: 4.5,
+    fill: "none",
+    stroke: "currentColor"
+  })));
+};
 
-var Content = forwardRef(function (props, ref) {
+var ContentComponent = forwardRef(function (props, ref) {
   var _useTimelineItemConte = useTimelineItemContext(),
       icon = _useTimelineItemConte.icon,
       surfaceColor = _useTimelineItemConte.surfaceColor;
@@ -1179,17 +1177,11 @@ var Content = forwardRef(function (props, ref) {
     ref: ref
   }, props)));
 });
-Content.displayName = 'Content';
-
-var OppositeContent = forwardRef(function (props, ref) {
-  return React__default.createElement(StyledOppositeContent, _extends$3({
-    ref: ref
-  }, props));
-});
-OppositeContent.displayName = 'OppositeContent';
+ContentComponent.displayName = 'Timeline.Content';
+var Content = ContentComponent;
 
 var _excluded = ["isAlternate"];
-var Timeline = forwardRef(function (_ref, ref) {
+var TimelineComponent = forwardRef(function (_ref, ref) {
   var isAlternate = _ref.isAlternate,
       props = _objectWithoutProperties(_ref, _excluded);
   var value = useMemo(function () {
@@ -1203,9 +1195,10 @@ var Timeline = forwardRef(function (_ref, ref) {
     ref: ref
   }, props)));
 });
-Timeline.Item = Item;
+TimelineComponent.displayName = 'Timeline';
+var Timeline = TimelineComponent;
 Timeline.Content = Content;
+Timeline.Item = Item;
 Timeline.OppositeContent = OppositeContent;
-Timeline.displayName = 'Timeline';
 
 export { Accordion, Stepper, Timeline };

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

@@ -4,18 +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 { RefAttributes, HTMLAttributes, PropsWithoutRef, ForwardRefExoticComponent } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { Section } from '../accordion/components/Section';
 import { Header } from '../accordion/components/Header';
 import { Label } from '../accordion/components/Label';
 import { Panel } from '../accordion/components/Panel';
-interface IStaticAccordionExport<T, P> extends ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {
-    Section: typeof Section;
-    Header: typeof Header;
-    Label: typeof Label;
-    Panel: typeof Panel;
-}
-interface IAccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+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 */
@@ -42,5 +36,9 @@ interface IAccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Accordion: IStaticAccordionExport<HTMLDivElement, IAccordionProps>;
-export {};
+export declare const Accordion: React.ForwardRefExoticComponent<IAccordionProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: typeof Header;
+    Label: typeof Label;
+    Panel: typeof Panel;
+    Section: typeof Section;
+};

package/dist/typings/elements/accordion/components/Header.d.ts

@@ -5,4 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
 export declare const Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/accordion/components/Label.d.ts

@@ -5,4 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
+/**
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ */
 export declare const Label: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/accordion/components/Panel.d.ts

@@ -5,4 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLElement>
+ */
 export declare const Panel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;

package/dist/typings/elements/accordion/components/Section.d.ts

@@ -5,4 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLElement>
+ */
 export declare const Section: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/stepper/Stepper.d.ts

@@ -4,16 +4,11 @@
  * 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 { OlHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import React, { OlHTMLAttributes } from 'react';
 import { Step } from './components/Step';
 import { Label } from './components/Label';
 import { Content } from './components/Content';
-interface IStaticStepperExport<T, P> extends ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {
-    Step: typeof Step;
-    Label: typeof Label;
-    Content: typeof Content;
-}
-interface IStepperProps extends OlHTMLAttributes<HTMLOListElement> {
+export interface IStepperProps extends OlHTMLAttributes<HTMLOListElement> {
     /** Defines the currently active step, starting at 0 */
     activeIndex?: number;
     /** Applies horizontal layout styling */
@@ -22,5 +17,8 @@ interface IStepperProps extends OlHTMLAttributes<HTMLOListElement> {
 /**
  * @extends OlHTMLAttributes<HTMLOListElement>
  */
-export declare const Stepper: IStaticStepperExport<HTMLDivElement, IStepperProps>;
-export {};
+export declare const Stepper: React.ForwardRefExoticComponent<IStepperProps & React.RefAttributes<HTMLOListElement>> & {
+    Content: typeof Content;
+    Label: typeof Label;
+    Step: typeof Step;
+};