@zendeskgarden/react-accordions 8.75.1 → 8.76.0

package/dist/esm/elements/accordion/Accordion.js

@@ -0,0 +1,111 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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__default, { forwardRef, useMemo, Children, isValidElement } from 'react';
+import { useAccordion } from '@zendeskgarden/container-accordion';
+import '../../styled/stepper/StyledStep.js';
+import '../../styled/stepper/StyledContent.js';
+import '../../styled/stepper/StyledInnerContent.js';
+import '../../styled/stepper/StyledLine.js';
+import '../../styled/stepper/StyledStepper.js';
+import '../../styled/stepper/StyledIcon.js';
+import '../../styled/stepper/StyledLabel.js';
+import '../../styled/stepper/StyledLabelText.js';
+import { StyledAccordion } from '../../styled/accordion/StyledAccordion.js';
+import '../../styled/accordion/StyledSection.js';
+import '../../styled/accordion/StyledHeader.js';
+import '../../styled/accordion/StyledButton.js';
+import '../../styled/accordion/StyledPanel.js';
+import '../../styled/accordion/StyledInnerPanel.js';
+import '../../styled/accordion/StyledRotateIcon.js';
+import '../../styled/timeline/StyledTimeline.js';
+import '../../styled/timeline/StyledItem.js';
+import '../../styled/timeline/StyledItemIcon.js';
+import '../../styled/timeline/StyledContent.js';
+import '../../styled/timeline/StyledOppositeContent.js';
+import '../../styled/timeline/StyledSeparator.js';
+import '../../utils/useStepperContext.js';
+import '../../utils/useStepContext.js';
+import { AccordionContext } from '../../utils/useAccordionContext.js';
+import { SectionContext } from '../../utils/useSectionContext.js';
+import '../../utils/useHeaderContext.js';
+import '../../utils/useTimelineContext.js';
+import '../../utils/useTimelineItemContext.js';
+import { Section } from './components/Section.js';
+import { Header } from './components/Header.js';
+import { Label } from './components/Label.js';
+import { Panel } from './components/Panel.js';
+
+const AccordionComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    isBare,
+    isCompact,
+    isAnimated,
+    isExpandable,
+    isCollapsible,
+    level,
+    onChange,
+    defaultExpandedSections,
+    expandedSections: controlledExpandedSections,
+    ...props
+  } = _ref;
+  const {
+    sections,
+    sectionChildren
+  } = useMemo(() => Children.toArray(children).filter(isValidElement).map((child, index) => React__default.createElement(SectionContext.Provider, {
+    key: index,
+    value: index
+  }, child)).reduce((acc, child, index) => {
+    acc.sectionChildren.push(child);
+    acc.sections.push(index);
+    return acc;
+  }, {
+    sectionChildren: [],
+    sections: []
+  }), [children]);
+  const {
+    expandedSections,
+    getHeaderProps,
+    getTriggerProps,
+    getPanelProps
+  } = useAccordion({
+    sections,
+    defaultExpandedSections,
+    expandedSections: controlledExpandedSections,
+    collapsible: isCollapsible,
+    expandable: isExpandable || false,
+    onChange
+  });
+  const accordionContextValue = useMemo(() => ({
+    level,
+    isBare,
+    isCompact,
+    isAnimated,
+    isCollapsible,
+    getPanelProps,
+    getHeaderProps,
+    getTriggerProps,
+    expandedSections
+  }), [level, isBare, isCompact, isAnimated, isCollapsible, getPanelProps, getHeaderProps, getTriggerProps, expandedSections]);
+  return React__default.createElement(AccordionContext.Provider, {
+    value: accordionContextValue
+  }, React__default.createElement(StyledAccordion, Object.assign({
+    ref: ref
+  }, props), sectionChildren));
+});
+AccordionComponent.displayName = 'Accordion';
+AccordionComponent.defaultProps = {
+  isAnimated: true,
+  isCollapsible: true
+};
+const Accordion = AccordionComponent;
+Accordion.Header = Header;
+Accordion.Label = Label;
+Accordion.Panel = Panel;
+Accordion.Section = Section;
+
+export { Accordion };

package/dist/esm/elements/accordion/components/Header.js

@@ -0,0 +1,112 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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__default, { forwardRef, useState, useMemo } from 'react';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import SvgChevronDownStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+import '../../../utils/useStepperContext.js';
+import '../../../utils/useStepContext.js';
+import { useAccordionContext } from '../../../utils/useAccordionContext.js';
+import { useSectionContext } from '../../../utils/useSectionContext.js';
+import { HeaderContext } from '../../../utils/useHeaderContext.js';
+import '../../../utils/useTimelineContext.js';
+import '../../../utils/useTimelineItemContext.js';
+import '../../../styled/stepper/StyledStep.js';
+import '../../../styled/stepper/StyledContent.js';
+import '../../../styled/stepper/StyledInnerContent.js';
+import '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import '../../../styled/stepper/StyledIcon.js';
+import '../../../styled/stepper/StyledLabel.js';
+import '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import '../../../styled/accordion/StyledSection.js';
+import { StyledHeader } from '../../../styled/accordion/StyledHeader.js';
+import { COMPONENT_ID } from '../../../styled/accordion/StyledButton.js';
+import '../../../styled/accordion/StyledPanel.js';
+import '../../../styled/accordion/StyledInnerPanel.js';
+import { StyledRotateIcon } from '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import '../../../styled/timeline/StyledItem.js';
+import '../../../styled/timeline/StyledItemIcon.js';
+import '../../../styled/timeline/StyledContent.js';
+import '../../../styled/timeline/StyledOppositeContent.js';
+import '../../../styled/timeline/StyledSeparator.js';
+
+const HeaderComponent = forwardRef((props, ref) => {
+  const {
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    role,
+    children,
+    ...other
+  } = props;
+  const {
+    level: ariaLevel,
+    isCompact,
+    isCollapsible,
+    getHeaderProps,
+    getTriggerProps,
+    expandedSections
+  } = useAccordionContext();
+  const sectionValue = useSectionContext();
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const isExpanded = expandedSections.includes(sectionValue);
+  const {
+    onClick: onTriggerClick,
+    onKeyDown,
+    ...otherTriggerProps
+  } = getTriggerProps({
+    type: 'button',
+    value: sectionValue
+  });
+  const onHeaderFocus = e => {
+    e.persist();
+    setTimeout(() => {
+      const isAccordionButton = e.target.getAttribute('data-garden-id') === COMPONENT_ID;
+      const isFocusVisible = e.target.getAttribute('data-garden-focus-visible');
+      if (isAccordionButton && isFocusVisible) {
+        setIsFocused(true);
+      }
+    }, 0);
+  };
+  const value = useMemo(() => ({
+    isHovered,
+    otherTriggerProps
+  }), [isHovered, otherTriggerProps]);
+  return React__default.createElement(HeaderContext.Provider, {
+    value: value
+  }, React__default.createElement(StyledHeader, Object.assign({
+    isCollapsible: isCollapsible,
+    isExpanded: isExpanded,
+    isFocused: isFocused
+  }, getHeaderProps({
+    ref,
+    'aria-level': ariaLevel,
+    role: role === undefined || role === null ? role : 'heading',
+    onClick: composeEventHandlers(onClick, onTriggerClick),
+    onFocus: composeEventHandlers(onFocus, onHeaderFocus),
+    onBlur: composeEventHandlers(onBlur, () => setIsFocused(false)),
+    onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
+    onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false)),
+    ...other
+  })), children, React__default.createElement(StyledRotateIcon, {
+    isCompact: isCompact,
+    isHovered: isHovered,
+    isRotated: isExpanded,
+    isCollapsible: isCollapsible,
+    onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
+    onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false))
+  }, React__default.createElement(SvgChevronDownStroke, null))));
+});
+HeaderComponent.displayName = 'Accordion.Header';
+const Header = HeaderComponent;
+
+export { Header };

package/dist/esm/elements/accordion/components/Label.js

@@ -0,0 +1,60 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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__default, { forwardRef } from 'react';
+import '../../../styled/stepper/StyledStep.js';
+import '../../../styled/stepper/StyledContent.js';
+import '../../../styled/stepper/StyledInnerContent.js';
+import '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import '../../../styled/stepper/StyledIcon.js';
+import '../../../styled/stepper/StyledLabel.js';
+import '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import '../../../styled/accordion/StyledSection.js';
+import '../../../styled/accordion/StyledHeader.js';
+import { StyledButton } from '../../../styled/accordion/StyledButton.js';
+import '../../../styled/accordion/StyledPanel.js';
+import '../../../styled/accordion/StyledInnerPanel.js';
+import '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import '../../../styled/timeline/StyledItem.js';
+import '../../../styled/timeline/StyledItemIcon.js';
+import '../../../styled/timeline/StyledContent.js';
+import '../../../styled/timeline/StyledOppositeContent.js';
+import '../../../styled/timeline/StyledSeparator.js';
+import '../../../utils/useStepperContext.js';
+import '../../../utils/useStepContext.js';
+import { useAccordionContext } from '../../../utils/useAccordionContext.js';
+import { useSectionContext } from '../../../utils/useSectionContext.js';
+import { useHeaderContext } from '../../../utils/useHeaderContext.js';
+import '../../../utils/useTimelineContext.js';
+import '../../../utils/useTimelineItemContext.js';
+
+const LabelComponent = forwardRef((props, ref) => {
+  const sectionValue = useSectionContext();
+  const {
+    isCompact,
+    isCollapsible,
+    expandedSections
+  } = useAccordionContext();
+  const isExpanded = expandedSections.includes(sectionValue);
+  const {
+    isHovered,
+    otherTriggerProps
+  } = useHeaderContext();
+  return React__default.createElement(StyledButton, Object.assign({
+    ref: ref,
+    isCompact: isCompact,
+    isHovered: isHovered,
+    isExpanded: isExpanded,
+    isCollapsible: isCollapsible
+  }, otherTriggerProps, props));
+});
+LabelComponent.displayName = 'Accordion.Label';
+const Label = LabelComponent;
+
+export { Label };

package/dist/esm/elements/accordion/components/Panel.js

@@ -0,0 +1,70 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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__default, { forwardRef } from 'react';
+import '../../../utils/useStepperContext.js';
+import '../../../utils/useStepContext.js';
+import { useAccordionContext } from '../../../utils/useAccordionContext.js';
+import { useSectionContext } from '../../../utils/useSectionContext.js';
+import '../../../utils/useHeaderContext.js';
+import '../../../utils/useTimelineContext.js';
+import '../../../utils/useTimelineItemContext.js';
+import '../../../styled/stepper/StyledStep.js';
+import '../../../styled/stepper/StyledContent.js';
+import '../../../styled/stepper/StyledInnerContent.js';
+import '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import '../../../styled/stepper/StyledIcon.js';
+import '../../../styled/stepper/StyledLabel.js';
+import '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import '../../../styled/accordion/StyledSection.js';
+import '../../../styled/accordion/StyledHeader.js';
+import '../../../styled/accordion/StyledButton.js';
+import { StyledPanel } from '../../../styled/accordion/StyledPanel.js';
+import { StyledInnerPanel } from '../../../styled/accordion/StyledInnerPanel.js';
+import '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import '../../../styled/timeline/StyledItem.js';
+import '../../../styled/timeline/StyledItemIcon.js';
+import '../../../styled/timeline/StyledContent.js';
+import '../../../styled/timeline/StyledOppositeContent.js';
+import '../../../styled/timeline/StyledSeparator.js';
+
+const PanelComponent = forwardRef((_ref, ref) => {
+  let {
+    role,
+    children,
+    ...props
+  } = _ref;
+  const {
+    isAnimated,
+    isBare,
+    isCompact,
+    expandedSections,
+    getPanelProps
+  } = useAccordionContext();
+  const sectionValue = useSectionContext();
+  const isExpanded = expandedSections.includes(sectionValue);
+  return React__default.createElement(StyledPanel, Object.assign({
+    inert: isExpanded ? undefined : '',
+    isAnimated: isAnimated,
+    isBare: isBare,
+    isCompact: isCompact,
+    isExpanded: isExpanded
+  }, getPanelProps({
+    role: role === undefined ? null : 'region',
+    ref,
+    value: sectionValue,
+    ...props
+  })), React__default.createElement(StyledInnerPanel, {
+    isAnimated: isAnimated
+  }, children));
+});
+PanelComponent.displayName = 'Accordion.Panel';
+const Panel = PanelComponent;
+
+export { Panel };

package/dist/esm/elements/accordion/components/Section.js

@@ -0,0 +1,36 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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__default, { forwardRef } from 'react';
+import '../../../styled/stepper/StyledStep.js';
+import '../../../styled/stepper/StyledContent.js';
+import '../../../styled/stepper/StyledInnerContent.js';
+import '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import '../../../styled/stepper/StyledIcon.js';
+import '../../../styled/stepper/StyledLabel.js';
+import '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import { StyledSection } from '../../../styled/accordion/StyledSection.js';
+import '../../../styled/accordion/StyledHeader.js';
+import '../../../styled/accordion/StyledButton.js';
+import '../../../styled/accordion/StyledPanel.js';
+import '../../../styled/accordion/StyledInnerPanel.js';
+import '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import '../../../styled/timeline/StyledItem.js';
+import '../../../styled/timeline/StyledItemIcon.js';
+import '../../../styled/timeline/StyledContent.js';
+import '../../../styled/timeline/StyledOppositeContent.js';
+import '../../../styled/timeline/StyledSeparator.js';
+
+const SectionComponent = forwardRef((props, ref) => React__default.createElement(StyledSection, Object.assign({
+  ref: ref
+}, props)));
+SectionComponent.displayName = 'Accordion.Section';
+const Section = SectionComponent;
+
+export { Section };

package/dist/esm/elements/stepper/Stepper.js

@@ -0,0 +1,77 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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__default, { forwardRef, useMemo, Children, isValidElement } from 'react';
+import '../../styled/stepper/StyledStep.js';
+import '../../styled/stepper/StyledContent.js';
+import '../../styled/stepper/StyledInnerContent.js';
+import '../../styled/stepper/StyledLine.js';
+import { StyledStepper } from '../../styled/stepper/StyledStepper.js';
+import '../../styled/stepper/StyledIcon.js';
+import '../../styled/stepper/StyledLabel.js';
+import '../../styled/stepper/StyledLabelText.js';
+import '../../styled/accordion/StyledAccordion.js';
+import '../../styled/accordion/StyledSection.js';
+import '../../styled/accordion/StyledHeader.js';
+import '../../styled/accordion/StyledButton.js';
+import '../../styled/accordion/StyledPanel.js';
+import '../../styled/accordion/StyledInnerPanel.js';
+import '../../styled/accordion/StyledRotateIcon.js';
+import '../../styled/timeline/StyledTimeline.js';
+import '../../styled/timeline/StyledItem.js';
+import '../../styled/timeline/StyledItemIcon.js';
+import '../../styled/timeline/StyledContent.js';
+import '../../styled/timeline/StyledOppositeContent.js';
+import '../../styled/timeline/StyledSeparator.js';
+import { StepperContext } from '../../utils/useStepperContext.js';
+import { StepContext } from '../../utils/useStepContext.js';
+import '../../utils/useAccordionContext.js';
+import '../../utils/useSectionContext.js';
+import '../../utils/useHeaderContext.js';
+import '../../utils/useTimelineContext.js';
+import '../../utils/useTimelineItemContext.js';
+import { Step } from './components/Step.js';
+import { Label } from './components/Label.js';
+import { Content } from './components/Content.js';
+
+const DEFAULT_ACTIVE_INDEX = 0;
+const StepperComponent = forwardRef((_ref, ref) => {
+  let {
+    activeIndex = DEFAULT_ACTIVE_INDEX,
+    isHorizontal,
+    children,
+    ...props
+  } = _ref;
+  const stepperContext = useMemo(() => ({
+    activeIndex,
+    isHorizontal: isHorizontal || false
+  }), [activeIndex, isHorizontal]);
+  return React__default.createElement(StepperContext.Provider, {
+    value: stepperContext
+  }, React__default.createElement(StyledStepper, Object.assign({
+    ref: ref,
+    isHorizontal: isHorizontal
+  }, props), useMemo(() => Children.toArray(children).filter(isValidElement).map((child, index) => React__default.createElement(StepContext.Provider, {
+    key: index
+    ,
+    value: {
+      currentStepIndex: index,
+      isActive: stepperContext.activeIndex === index,
+      isCompleted: stepperContext.activeIndex > index,
+      isHorizontal: stepperContext.isHorizontal
+    }
+  }, child)), [children, stepperContext])));
+});
+StepperComponent.displayName = 'Stepper';
+StepperComponent.defaultProps = {
+  activeIndex: DEFAULT_ACTIVE_INDEX
+};
+const Stepper = StepperComponent;
+Stepper.Content = Content;
+Stepper.Label = Label;
+Stepper.Step = Step;
+
+export { Stepper };

package/dist/esm/elements/stepper/components/Content.js

@@ -0,0 +1,52 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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__default, { forwardRef } from 'react';
+import '../../../styled/stepper/StyledStep.js';
+import { StyledContent } from '../../../styled/stepper/StyledContent.js';
+import { StyledInnerContent } from '../../../styled/stepper/StyledInnerContent.js';
+import '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import '../../../styled/stepper/StyledIcon.js';
+import '../../../styled/stepper/StyledLabel.js';
+import '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import '../../../styled/accordion/StyledSection.js';
+import '../../../styled/accordion/StyledHeader.js';
+import '../../../styled/accordion/StyledButton.js';
+import '../../../styled/accordion/StyledPanel.js';
+import '../../../styled/accordion/StyledInnerPanel.js';
+import '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import '../../../styled/timeline/StyledItem.js';
+import '../../../styled/timeline/StyledItemIcon.js';
+import '../../../styled/timeline/StyledContent.js';
+import '../../../styled/timeline/StyledOppositeContent.js';
+import '../../../styled/timeline/StyledSeparator.js';
+import '../../../utils/useStepperContext.js';
+import { useStepContext } from '../../../utils/useStepContext.js';
+import '../../../utils/useAccordionContext.js';
+import '../../../utils/useSectionContext.js';
+import '../../../utils/useHeaderContext.js';
+import '../../../utils/useTimelineContext.js';
+import '../../../utils/useTimelineItemContext.js';
+
+const ContentComponent = forwardRef((props, ref) => {
+  const {
+    isActive,
+    isHorizontal
+  } = useStepContext();
+  return isHorizontal === false ? React__default.createElement(StyledContent, Object.assign({
+    ref: ref,
+    isActive: isActive
+  }, props), React__default.createElement(StyledInnerContent, {
+    "aria-hidden": !isActive
+  }, props.children)) : null;
+});
+ContentComponent.displayName = 'Stepper.Content';
+const Content = ContentComponent;
+
+export { Content };

package/dist/esm/elements/stepper/components/Label.js

@@ -0,0 +1,76 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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__default, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import SvgCheckSmStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/16/check-sm-stroke.svg.js';
+import '../../../styled/stepper/StyledStep.js';
+import '../../../styled/stepper/StyledContent.js';
+import '../../../styled/stepper/StyledInnerContent.js';
+import '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import { StyledIcon, StyledIconFlexContainer } from '../../../styled/stepper/StyledIcon.js';
+import { StyledLabel } from '../../../styled/stepper/StyledLabel.js';
+import { StyledLabelText } from '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import '../../../styled/accordion/StyledSection.js';
+import '../../../styled/accordion/StyledHeader.js';
+import '../../../styled/accordion/StyledButton.js';
+import '../../../styled/accordion/StyledPanel.js';
+import '../../../styled/accordion/StyledInnerPanel.js';
+import '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import '../../../styled/timeline/StyledItem.js';
+import '../../../styled/timeline/StyledItemIcon.js';
+import '../../../styled/timeline/StyledContent.js';
+import '../../../styled/timeline/StyledOppositeContent.js';
+import '../../../styled/timeline/StyledSeparator.js';
+import '../../../utils/useStepperContext.js';
+import { useStepContext } from '../../../utils/useStepContext.js';
+import '../../../utils/useAccordionContext.js';
+import '../../../utils/useSectionContext.js';
+import '../../../utils/useHeaderContext.js';
+import '../../../utils/useTimelineContext.js';
+import '../../../utils/useTimelineItemContext.js';
+
+const LabelComponent = forwardRef((_ref, ref) => {
+  let {
+    icon,
+    iconProps,
+    isHidden,
+    children,
+    ...other
+  } = _ref;
+  const {
+    currentStepIndex,
+    isActive,
+    isCompleted,
+    isHorizontal
+  } = useStepContext();
+  const numericStep = currentStepIndex + 1;
+  const stepIcon = icon || numericStep;
+  const styledIcon = React__default.createElement(StyledIcon, {
+    isActive: isActive,
+    isHorizontal: isHorizontal
+  }, isCompleted ? React__default.createElement(SvgCheckSmStroke, iconProps) : stepIcon);
+  return React__default.createElement(StyledLabel, Object.assign({
+    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.any,
+  iconProps: PropTypes.object,
+  isHidden: PropTypes.bool
+};
+const Label = LabelComponent;
+
+export { Label };

package/dist/esm/elements/stepper/components/Step.js

@@ -0,0 +1,53 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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__default, { forwardRef } from 'react';
+import { StyledStep } from '../../../styled/stepper/StyledStep.js';
+import '../../../styled/stepper/StyledContent.js';
+import '../../../styled/stepper/StyledInnerContent.js';
+import { StyledLine } from '../../../styled/stepper/StyledLine.js';
+import '../../../styled/stepper/StyledStepper.js';
+import '../../../styled/stepper/StyledIcon.js';
+import '../../../styled/stepper/StyledLabel.js';
+import '../../../styled/stepper/StyledLabelText.js';
+import '../../../styled/accordion/StyledAccordion.js';
+import '../../../styled/accordion/StyledSection.js';
+import '../../../styled/accordion/StyledHeader.js';
+import '../../../styled/accordion/StyledButton.js';
+import '../../../styled/accordion/StyledPanel.js';
+import '../../../styled/accordion/StyledInnerPanel.js';
+import '../../../styled/accordion/StyledRotateIcon.js';
+import '../../../styled/timeline/StyledTimeline.js';
+import '../../../styled/timeline/StyledItem.js';
+import '../../../styled/timeline/StyledItemIcon.js';
+import '../../../styled/timeline/StyledContent.js';
+import '../../../styled/timeline/StyledOppositeContent.js';
+import '../../../styled/timeline/StyledSeparator.js';
+import { useStepperContext } from '../../../utils/useStepperContext.js';
+import '../../../utils/useStepContext.js';
+import '../../../utils/useAccordionContext.js';
+import '../../../utils/useSectionContext.js';
+import '../../../utils/useHeaderContext.js';
+import '../../../utils/useTimelineContext.js';
+import '../../../utils/useTimelineItemContext.js';
+
+const StepComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const {
+    isHorizontal
+  } = useStepperContext();
+  return React__default.createElement(StyledStep, Object.assign({
+    ref: ref,
+    isHorizontal: isHorizontal
+  }, props), isHorizontal && React__default.createElement(StyledLine, null), children);
+});
+StepComponent.displayName = 'Stepper.Step';
+const Step = StepComponent;
+
+export { Step };