carbon-react 110.4.1 → 110.5.2

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface SidebarHeaderProps {
+    /** This component supports children. */
+    children?: React.ReactNode;
+    /** A custom id. */
+    id: string;
+}
+declare const SidebarHeader: ({ children, id }: SidebarHeaderProps) => JSX.Element;
+export default SidebarHeader;

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -1,28 +1,17 @@
-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); }
-
 import React from "react";
 import PropTypes from "prop-types";
-import tagComponent from "../../../../__internal__/utils/helpers/tags/tags";
 import SidebarHeaderStyle from "./sidebar-header.style";
 
 const SidebarHeader = ({
-  className,
   children,
-  id,
-  ...props
-}) => /*#__PURE__*/React.createElement(SidebarHeaderStyle, _extends({
-  className: className,
-  id: id
-}, tagComponent("sidebar-header", props)), children);
+  id
+}) => /*#__PURE__*/React.createElement(SidebarHeaderStyle, {
+  id: id,
+  "data-component": "sidebar-header"
+}, children);
 
 SidebarHeader.propTypes = {
-  /** This component supports children. */
-  children: PropTypes.node,
-
-  /** A custom class name. */
-  className: PropTypes.string,
-
-  /** A custom id. */
-  id: PropTypes.string
+  "children": PropTypes.node,
+  "id": PropTypes.string.isRequired
 };
 export default SidebarHeader;

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.d.ts

@@ -0,0 +1,2 @@
+declare const SidebarHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default SidebarHeaderStyle;

package/esm/components/sidebar/index.d.ts

@@ -1 +1,2 @@
-export { default, SidebarContext } from "./sidebar";
+export { default, SidebarContext } from "./sidebar.component";
+export type { SidebarProps } from "./sidebar.component";

package/esm/components/sidebar/index.js

@@ -1,2 +1 @@
-export { default } from "./sidebar.component";
-export { SidebarContext } from "./sidebar.component";
+export { default, SidebarContext } from "./sidebar.component";

package/esm/components/sidebar/sidebar.component.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface SidebarContextProps {
+    isInSidebar?: boolean;
+}
+export declare const SidebarContext: React.Context<SidebarContextProps>;
+export interface SidebarProps extends PaddingProps, TagProps {
+    /** Prop to specify the aria-describedby property of the component */
+    "aria-describedby"?: string;
+    /**
+     * Prop to specify the aria-label of the component.
+     * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+     */
+    "aria-label"?: string;
+    /**
+     * Prop to specify the aria-labeledby property of the component
+     * To be used when the title prop is a custom React Node,
+     * or the component is labelled by an internal element other than the title.
+     */
+    "aria-labelledby"?: string;
+    /** Modal content */
+    children?: React.ReactNode;
+    /** Determines if the Esc Key closes the modal */
+    disableEscKey?: boolean;
+    /** Set this prop to false to hide the translucent background when the dialog is open. */
+    enableBackgroundUI?: boolean;
+    /** Node that will be used as sidebar header. */
+    header?: React.ReactNode;
+    /** A custom close event handler */
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
+    /** Sets the open state of the modal */
+    open: boolean;
+    /** Sets the position of sidebar, either left or right. */
+    position?: "left" | "right";
+    /** The ARIA role to be applied to the component container */
+    role?: string;
+    /** Sets the size of the sidebar when open. */
+    size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+    /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
+    focusableContainers?: React.MutableRefObject<HTMLElement>[];
+}
+export declare const Sidebar: React.ForwardRefExoticComponent<Pick<SidebarProps, keyof SidebarProps> & React.RefAttributes<HTMLDivElement>>;
+export default Sidebar;

package/esm/components/sidebar/sidebar.component.js

@@ -1,8 +1,7 @@
 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); }
 
-import React, { useRef } from "react";
+import React, { useRef, useCallback } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import Modal from "../modal";
 import StyledSidebar from "./sidebar.style";
 import IconButton from "../icon-button";
@@ -13,7 +12,6 @@ import Box from "../box";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
-const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 export const SidebarContext = /*#__PURE__*/React.createContext({});
 const Sidebar = /*#__PURE__*/React.forwardRef(({
   "aria-describedby": ariaDescribedBy,
@@ -35,8 +33,13 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   const {
     current: titleId
   } = useRef(createGuid());
-  let sidebarRef = useRef(null);
-  if (ref) sidebarRef = ref;
+  const sidebarRef = useRef(null);
+  const setRefs = useCallback(reference => {
+    sidebarRef.current = reference;
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") ref(reference);
+  }, [ref]);
 
   const closeIcon = () => {
     if (!onCancel) return null;
@@ -59,7 +62,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": !ariaLabelledBy && !ariaLabel ? titleId : ariaLabelledBy,
-    ref: sidebarRef,
+    ref: setRefs,
     position: position,
     size: size,
     "data-element": "sidebar",
@@ -85,8 +88,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
-    enableBackgroundUI: enableBackgroundUI,
-    className: "carbon-sidebar"
+    enableBackgroundUI: enableBackgroundUI
   }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: sidebarRef,
     isOpen: open,
@@ -94,48 +96,185 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   }, sidebar));
 });
 Sidebar.propTypes = {
-  /** Styled system padding props to apply to Sidebar content */
-  ...paddingPropTypes,
-
-  /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": PropTypes.string,
-
-  /** Prop to specify the aria-label of the component */
   "aria-label": PropTypes.string,
-
-  /** Prop to specify the aria-labeledby property of the component */
   "aria-labelledby": PropTypes.string,
-
-  /** Modal content */
-  children: PropTypes.node,
-
-  /** A custom close event handler */
-  onCancel: PropTypes.func,
-
-  /** Determines if the Esc Key closes the modal */
-  disableEscKey: PropTypes.bool,
-
-  /** A boolean to track the open state of the dialog */
-  open: PropTypes.bool.isRequired,
-
-  /** Set this prop to false to hide the translucent background when the dialog is open. */
-  enableBackgroundUI: PropTypes.bool,
-
-  /** Sets the position of sidebar, either left or right. */
-  position: PropTypes.oneOf(["left", "right"]),
-
-  /** Sets the size of the sidebar when open. */
-  size: PropTypes.oneOf(["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
-
-  /** Node that will be used as sidebar header. */
-  header: PropTypes.node,
-
-  /** The ARIA role to be applied to the container */
-  role: PropTypes.string,
-
-  /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
-  focusableContainers: PropTypes.arrayOf(PropTypes.shape({
-    current: PropTypes.any
-  }))
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "disableEscKey": PropTypes.bool,
+  "enableBackgroundUI": PropTypes.bool,
+  "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })),
+  "header": PropTypes.node,
+  "onCancel": PropTypes.func,
+  "open": PropTypes.bool.isRequired,
+  "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "position": PropTypes.oneOf(["left", "right"]),
+  "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "role": PropTypes.string,
+  "size": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"])
 };
+export { Sidebar };
+Sidebar.displayName = "Sidebar";
 export default Sidebar;

package/esm/components/sidebar/sidebar.config.d.ts

@@ -0,0 +1,11 @@
+export declare const SIDEBAR_SIZES_CSS: {
+    "extra-small": string;
+    small: string;
+    "medium-small": string;
+    medium: string;
+    "medium-large": string;
+    large: string;
+    "extra-large": string;
+};
+export declare const SIDEBAR_SIZES: string[];
+export declare const SIDEBAR_ALIGNMENTS: string[];

package/esm/components/sidebar/sidebar.style.d.ts

@@ -0,0 +1,8 @@
+import { SidebarProps } from "./sidebar.component";
+declare type StyledSidebarProps = {
+    onCancel?: SidebarProps["onCancel"];
+    position?: SidebarProps["position"];
+    size?: SidebarProps["size"];
+};
+declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps, never>;
+export default StyledSidebar;

package/esm/components/step-sequence/index.d.ts

@@ -1,2 +1,4 @@
-export { default as StepSequence } from "./step-sequence";
-export { default as StepSequenceItem } from "./step-sequence-item/step-sequence-item";
+export { default as StepSequence } from "./step-sequence.component";
+export type { StepSequenceProps } from "./step-sequence.component";
+export { default as StepSequenceItem } from "./step-sequence-item";
+export type { StepSequenceItemProps } from "./step-sequence-item";

package/esm/components/step-sequence/step-sequence-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./step-sequence-item.component";
+export type { StepSequenceItemProps } from "./step-sequence-item.component";

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface StepSequenceItemProps {
+    /** Aria label */
+    ariaLabel?: string;
+    /** Hidden label to be displayed if item is complete */
+    hiddenCompleteLabel?: string;
+    /** Hidden label to be displayed if item is current */
+    hiddenCurrentLabel?: string;
+    /** Value to be displayed before text for uncomplete steps */
+    indicator: string;
+    /** Flag to hide the indicator for uncomplete steps */
+    hideIndicator?: boolean;
+    /** Status for the step */
+    status?: "complete" | "current" | "incomplete";
+    /** Content to be displayed */
+    children: React.ReactNode;
+}
+export declare const StepSequenceItem: ({ hideIndicator, indicator, status, hiddenCompleteLabel, hiddenCurrentLabel, children, ariaLabel, ...rest }: StepSequenceItemProps) => JSX.Element;
+export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -2,33 +2,33 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import StepSequenceItemStyle from "./step-sequence-item.style";
-import StepSequenceItemContentStyle from "./step-sequence-item-content.style";
-import StepSequenceItemIndicatorStyle from "./step-sequence-item-indicator.style";
-import StepSequenceItemHiddenLabelStyle from "./step-sequence-item-hidden-label.style";
+import { StepSequenceItemStyle, StepSequenceItemContentStyle, StepSequenceItemIndicatorStyle, StepSequenceItemHiddenLabelStyle } from "./step-sequence-item.style";
 import Icon from "../../icon";
 import { StepSequenceContext } from "../step-sequence.component";
 
-const StepSequenceItem = props => {
+const StepSequenceItem = ({
+  hideIndicator = false,
+  indicator,
+  status = "incomplete",
+  hiddenCompleteLabel,
+  hiddenCurrentLabel,
+  children,
+  ariaLabel,
+  ...rest
+}) => {
   const {
     orientation
   } = useContext(StepSequenceContext);
 
   const indicatorText = () => {
-    return !props.hideIndicator ? /*#__PURE__*/React.createElement(StepSequenceItemIndicatorStyle, null, props.indicator) : null;
+    return !hideIndicator ? /*#__PURE__*/React.createElement(StepSequenceItemIndicatorStyle, null, indicator) : null;
   };
 
-  const icon = () => props.status === "complete" ? /*#__PURE__*/React.createElement(Icon, {
+  const icon = () => status === "complete" ? /*#__PURE__*/React.createElement(Icon, {
     type: "tick"
   }) : indicatorText();
 
   const hiddenLabel = () => {
-    const {
-      status,
-      hiddenCompleteLabel,
-      hiddenCurrentLabel
-    } = props;
-
     if (hiddenCompleteLabel && status === "complete") {
       return /*#__PURE__*/React.createElement(StepSequenceItemHiddenLabelStyle, null, hiddenCompleteLabel);
     }
@@ -41,37 +41,22 @@ const StepSequenceItem = props => {
   };
 
   return /*#__PURE__*/React.createElement(StepSequenceItemStyle, _extends({
-    "data-component": "step-sequence-item"
-  }, props, {
+    "data-component": "step-sequence-item",
     orientation: orientation,
-    key: `step-seq-item-${props.indicator}`
-  }), hiddenLabel(), /*#__PURE__*/React.createElement(StepSequenceItemContentStyle, null, icon(), /*#__PURE__*/React.createElement("span", null, props.children)));
+    status: status,
+    key: `step-seq-item-${indicator}`,
+    "aria-label": ariaLabel
+  }, rest), hiddenLabel(), /*#__PURE__*/React.createElement(StepSequenceItemContentStyle, null, icon(), /*#__PURE__*/React.createElement("span", null, children)));
 };
 
 StepSequenceItem.propTypes = {
-  /** Text content for the step item */
-  children: PropTypes.node.isRequired,
-
-  /** Value to be displayed before text for uncompleted steps */
-  indicator: PropTypes.string.isRequired,
-
-  /** Flag to hide the indicator for uncompleted steps */
-  hideIndicator: PropTypes.bool,
-
-  /** Aria label */
-  ariaLabel: PropTypes.string,
-
-  /** Status for the step */
-  status: PropTypes.oneOf(["complete", "current", "incomplete"]),
-
-  /** Hidden label to be displayed if item is complete */
-  hiddenCompleteLabel: PropTypes.string,
-
-  /** Hidden label to be displayed if item is current */
-  hiddenCurrentLabel: PropTypes.string
-};
-StepSequenceItem.defaultProps = {
-  status: "incomplete",
-  hideIndicator: false
+  "ariaLabel": PropTypes.string,
+  "children": PropTypes.node,
+  "hiddenCompleteLabel": PropTypes.string,
+  "hiddenCurrentLabel": PropTypes.string,
+  "hideIndicator": PropTypes.bool,
+  "indicator": PropTypes.string.isRequired,
+  "status": PropTypes.oneOf(["complete", "current", "incomplete"])
 };
+export { StepSequenceItem };
 export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.d.ts

@@ -0,0 +1,9 @@
+declare type StepSequenceItemStyle = {
+    status: "complete" | "current" | "incomplete";
+    orientation: "horizontal" | "vertical";
+};
+export declare const StepSequenceItemStyle: import("styled-components").StyledComponent<"li", any, StepSequenceItemStyle, never>;
+export declare const StepSequenceItemContentStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StepSequenceItemHiddenLabelStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StepSequenceItemIndicatorStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import StyledIcon from "../../icon/icon.style";
-const StepSequenceItemStyle = styled.li`
+export const StepSequenceItemStyle = styled.li`
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -73,4 +73,20 @@ const StepSequenceItemStyle = styled.li`
       }
     `}
 `;
-export default StepSequenceItemStyle;
+export const StepSequenceItemContentStyle = styled.span`
+  display: flex;
+`;
+export const StepSequenceItemHiddenLabelStyle = styled.span`
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+export const StepSequenceItemIndicatorStyle = styled.span`
+  display: block;
+  min-width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  text-align: center;
+`;

package/esm/components/step-sequence/step-sequence.component.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export declare const StepSequenceContext: React.Context<{
+    orientation: "horizontal" | "vertical";
+}>;
+export interface StepSequenceProps extends MarginProps {
+    /** Step sequence items to be rendered */
+    children: React.ReactNode;
+    /** The direction that step sequence items should be rendered */
+    orientation?: "horizontal" | "vertical";
+}
+export declare const StepSequence: ({ children, orientation, ...props }: StepSequenceProps) => JSX.Element;
+export default StepSequence;