carbon-react 125.10.0 → 125.11.1

package/README.md

@@ -1,6 +1,6 @@
 # Carbon [![npm](https://img.shields.io/npm/v/carbon-react.svg)](https://www.npmjs.com/package/carbon-react) [![Cypress](https://github.com/Sage/carbon/actions/workflows/cypress.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/cypress.yml) [![Playwright](https://github.com/Sage/carbon/actions/workflows/playwright.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/playwright.yml)
 
-Carbon is a [React](https://facebook.github.io/react/) component library developed by Sage.
+Carbon is a [React](https://react.dev/) component library developed by Sage.
 
 ## Getting started
 
@@ -8,7 +8,7 @@ Our [getting started guide](https://carbon.sage.com/?path=/story/getting-started
 
 ## Examples
 
-See the [storybook](https://carbon.sage.com/) for live examples.
+See our [docs](https://carbon.sage.com/) for live examples.
 
 ## Browser Support
 

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

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/select/option/option.component.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TagProps } from "__internal__/utils/helpers/tags";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
     /**
      * Unique identifier for the component.

package/esm/components/select/option/option.component.js

@@ -1,6 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
+import guid from "../../../__internal__/utils/helpers/guid";
 import StyledOption from "./option.style";
 import SelectListContext from "../__internal__/select-list-context";
 const Option = /*#__PURE__*/React.forwardRef(({
@@ -18,6 +19,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
+  const internalIdRef = useRef(id || guid());
   if (selectListContext.multiselectValues) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
@@ -29,7 +31,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
       onSelect?.({
         text,
         value,
-        id
+        id: internalIdRef.current
       });
     } else {
       onSelect?.();
@@ -37,7 +39,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
     }
   }
   return /*#__PURE__*/React.createElement(StyledOption, _extends({
-    id: id,
+    id: internalIdRef.current,
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -1,16 +1,20 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 React, { useRef } from "react";
 import PropTypes from "prop-types";
+import guid from "../../../__internal__/utils/helpers/guid";
 import StyledOptionGroupHeader from "./option-group-header.style";
 import Icon from "../../icon";
 const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
   label,
   icon,
   style,
+  id,
   ...rest
 }, ref) => {
+  const internalIdRef = useRef(id || guid());
   return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, _extends({
-    style: style
+    style: style,
+    id: internalIdRef.current
   }, rest, {
     ref: ref
   }), icon && /*#__PURE__*/React.createElement(Icon, {

package/esm/components/select/option-row/option-row.component.js

@@ -1,6 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
+import guid from "../../../__internal__/utils/helpers/guid";
 import StyledOptionRow from "./option-row.style";
 import SelectListContext from "../__internal__/select-list-context";
 const OptionRow = /*#__PURE__*/React.forwardRef(({
@@ -15,14 +16,15 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
   style,
   ...rest
 }, ref) => {
+  const internalIdRef = useRef(id || guid());
   const handleClick = () => {
     if (disabled) {
       return;
     }
     onSelect?.({
-      id,
       text,
-      value
+      value,
+      id: internalIdRef.current
     });
   };
   const selectListContext = useContext(SelectListContext);
@@ -31,7 +33,7 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
     isSelected = selectListContext.multiselectValues.includes(value);
   }
   return /*#__PURE__*/React.createElement(StyledOptionRow, _extends({
-    id: id,
+    id: internalIdRef.current,
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,

package/esm/components/select/select-list/select-list.component.js

@@ -17,7 +17,6 @@ import ListActionButton from "../list-action-button";
 import StyledSelectListContainer from "./select-list-container.style";
 import Loader from "../../loader";
 import Option from "../option";
-import guid from "../../../__internal__/utils/helpers/guid";
 import SelectListContext from "../__internal__/select-list-context";
 const TABLE_HEADER_HEIGHT = 48;
 const SCROLL_OPTIONS = {
@@ -92,16 +91,23 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     rangeExtractor
   });
   const items = virtualizer.getVirtualItems();
+  const childrenList = useMemo(() => React.Children.toArray(children), [children]);
+  const getIndexOfMatch = useCallback(valueToMatch => {
+    return childrenList.findIndex(child => /*#__PURE__*/React.isValidElement(child) && child.props.value === valueToMatch);
+  }, [childrenList]);
 
   // getVirtualItems returns an empty array of items if the select list is currently closed - which is correct visually but
   // we need to ensure that any currently-selected option is still in the DOM to avoid any accessibility issues.
   // The isOpen prop will ensure that no options are visible regardless of what is in the items array.
-  if (items.length === 0 && currentOptionsListIndex !== -1) {
-    // only index property is required with the item not visible so the following type assertion, even though incorrect,
-    // should be OK
-    items.push({
-      index: currentOptionsListIndex
-    });
+  if (items.length === 0) {
+    const currentIndex = highlightedValue ? getIndexOfMatch(highlightedValue) : currentOptionsListIndex;
+    if (currentIndex > -1) {
+      // only index property is required with the item not visible so the following type assertion, even though incorrect,
+      // should be OK
+      items.push({
+        index: currentIndex
+      });
+    }
   }
   const listHeight = virtualizer.getTotalSize();
   useEffect(() => {
@@ -129,18 +135,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       selectionConfirmed: true
     });
   }, [onSelect]);
-  const childIdsRef = useRef(null);
-
-  // childIds should be stable except when children are added or removed - can't use useMemo
-  // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
-  const setChildIds = () => {
-    childIdsRef.current = React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child?.props.id || guid()) || /* istanbul ignore next */null;
-  };
-  if (childIdsRef.current?.length !== React.Children.count(children)) {
-    setChildIds();
-  }
-  const childIds = childIdsRef.current;
-  const childrenList = useMemo(() => React.Children.toArray(children), [children]);
+  const childElementRefs = useRef(Array.from({
+    length: React.Children.count(children)
+  }));
   const optionChildrenList = useMemo(() => childrenList.filter(child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow)), [childrenList]);
   const {
     measureElement
@@ -166,7 +163,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     const isOption = optionChildIndex > -1;
     const newProps = {
       index,
-      id: childIds ? childIds[index] : /* istanbul ignore next */undefined,
       onSelect: handleSelect,
       hidden: isLoading && childrenList.length === 1,
       // these need to be inline styles rather than implemented in styled-components to avoid it generating thousands of classes
@@ -175,8 +171,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       },
       "aria-setsize": isOption ? optionChildrenList.length : undefined,
       "aria-posinset": isOption ? optionChildIndex + 1 : undefined,
-      // needed to dynamically compute the size
-      ref: measureCallback,
+      ref: optionElement => {
+        // needed to dynamically compute the size
+        measureCallback(optionElement);
+        // add the DOM element to the array of refs
+        childElementRefs.current[index] = optionElement;
+      },
       "data-index": index
     };
     return /*#__PURE__*/React.cloneElement(child, newProps);
@@ -194,9 +194,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
     return nextIndex;
   }, [childrenList, lastOptionIndex, isLoading]);
-  const getIndexOfMatch = useCallback(valueToMatch => {
-    return childrenList.findIndex(child => /*#__PURE__*/React.isValidElement(child) && child.props.value === valueToMatch);
-  }, [childrenList]);
   const highlightNextItem = useCallback(key => {
     let currentIndex = currentOptionsListIndex;
     if (highlightedValue) {
@@ -215,10 +212,10 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined,
+      id: childElementRefs.current[nextIndex]?.id,
       selectionConfirmed: false
     });
-  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
+  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect]);
   const handleActionButtonTab = useCallback((event, isActionButtonFocused) => {
     if (isActionButtonFocused) {
       onSelect({
@@ -262,7 +259,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
         value
       } = currentOption.props;
       onSelect({
-        id: childIds ? childIds[currentOptionsListIndex] : /* istanbul ignore next */undefined,
+        id: childElementRefs.current[currentOptionsListIndex]?.id,
         text,
         value,
         selectionType: "enterKey",
@@ -272,7 +269,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       focusOnAnchor();
       highlightNextItem(key);
     }
-  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen, childIds]);
+  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
   const handleEscapeKey = useCallback(event => {
     if (event.key === "Escape") {
       onSelectListClose();

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

@@ -0,0 +1,2 @@
+export { default as StepFlow } from "./step-flow.component";
+export type { StepFlowProps } from "./step-flow.component";

package/esm/components/step-flow/index.js

@@ -0,0 +1 @@
+export { default as StepFlow } from "./step-flow.component";

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export declare type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export interface StepFlowProps extends MarginProps, TagProps {
+    /** A category for the user journey.  */
+    category?: string;
+    /** The title of the current step.  */
+    title: string;
+    /** Set the variant of the internal 'Typography' component which contains the title.
+     * However, despite the chosen variant the styling will always be overridden.
+     */
+    titleVariant?: "h1" | "h2";
+    /** The total steps in the user journey.  */
+    totalSteps: Steps;
+    /**
+     * The current step of the user journey. If the set `currentStep` is higher than
+     * `totalSteps`the value of `currentStep` will be that of `totalSteps` instead.
+     */
+    currentStep: Steps;
+    /** Determines if the progress indicator is shown. */
+    showProgressIndicator?: boolean;
+    /** Determines if the close icon button is shown */
+    showCloseIcon?: boolean;
+    /** function runs when user click dismiss button */
+    onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare type StepFlowHandle = {
+    /** Programmatically focus on root container of Dialog. */
+    focus: () => void;
+} | null;
+export declare const StepFlow: React.ForwardRefExoticComponent<StepFlowProps & React.RefAttributes<StepFlowHandle>>;
+export default StepFlow;

package/esm/components/step-flow/step-flow.component.js

@@ -0,0 +1,277 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useImperativeHandle, useRef, forwardRef } from "react";
+import PropTypes from "prop-types";
+import Icon from "../icon";
+import IconButton from "../icon-button";
+import { StyledStepFlow, StyledStepContent, StyledStepContentText, StyledStepLabelAndProgress, StyledProgressIndicatorBar, StyledProgressIndicator, StyledTitleFocusWrapper } from "./step-flow.style";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import Typography from "../typography";
+import useLocale from "../../hooks/__internal__/useLocale";
+const StepFlow = /*#__PURE__*/forwardRef(({
+  category,
+  title,
+  titleVariant,
+  totalSteps,
+  currentStep,
+  showProgressIndicator = false,
+  showCloseIcon = false,
+  onDismiss,
+  ...rest
+}, ref) => {
+  const totalStepsArray = Array.from({
+    length: totalSteps
+  }, (_, index) => index + 1);
+  const validatedCurrentStep = currentStep > totalSteps ? totalSteps : currentStep;
+  let currentStepWarnTriggered = false;
+  let noRefWarnTriggered = false;
+
+  /* eslint-disable no-console */
+  if (!currentStepWarnTriggered && currentStep > totalSteps) {
+    currentStepWarnTriggered = true;
+    console.warn("[WARNING] The `currentStep` prop should not be higher than the `totalSteps`prop in `StepFlow`." + " Please ensure `currentStep`s value does not exceed that of `totalSteps`, in the meantime" + " we have set `currentStep` value to that of `totalSteps`, and all indicators have been marked as completed.");
+  }
+  if (!noRefWarnTriggered && !ref) {
+    noRefWarnTriggered = true;
+    console.warn("[WARNING] A `ref` should be provided to ensure focus is programmatically focused back to a title div," + " this ensures screen reader users are informed regarding any changes and can navigate back down the page.");
+  }
+  const progressIndicators = totalStepsArray.map(step => {
+    const generateDataState = () => {
+      if (step === validatedCurrentStep) {
+        return "in-progress";
+      }
+      if (step < validatedCurrentStep) {
+        return "is-completed";
+      }
+      return "not-completed";
+    };
+    return /*#__PURE__*/React.createElement(StyledProgressIndicator, {
+      key: step,
+      "aria-hidden": "true",
+      "data-element": "progress-indicator",
+      isCompleted: step < validatedCurrentStep,
+      isInProgress: step === validatedCurrentStep,
+      "data-state": generateDataState()
+    }, "\xA0");
+  });
+  const locale = useLocale();
+  const closeIcon = /*#__PURE__*/React.createElement(IconButton, {
+    "data-element": "close",
+    "aria-label": locale.stepFlow.closeIconAriaLabel?.(),
+    onClick: onDismiss
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "close"
+  }));
+  const titleRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    focus() {
+      titleRef.current?.focus();
+    }
+  }), []);
+  const stepFlowTitle = /*#__PURE__*/React.createElement(StyledTitleFocusWrapper, {
+    "data-element": "title-text-wrapper",
+    tabIndex: -1,
+    ref: titleRef
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: titleVariant || "h1",
+    "data-element": "title-text"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    fontWeight: "900",
+    fontSize: "var(--fontSizes600)",
+    lineHeight: "var(--sizing375)",
+    variant: "span",
+    "aria-hidden": "true",
+    "data-element": "visible-title-text"
+  }, title), /*#__PURE__*/React.createElement(Typography, {
+    variant: "span",
+    "data-element": "visually-hidden-title-text",
+    screenReaderOnly: true
+  }, locale.stepFlow.screenReaderOnlyTitle(title, validatedCurrentStep, totalSteps, category))));
+  const stepFlowLabel = /*#__PURE__*/React.createElement(Typography, {
+    variant: "span",
+    fontWeight: "400",
+    fontSize: "var(--fontSizes200)",
+    lineHeight: "var(--sizing300)",
+    "data-element": "step-label",
+    "aria-hidden": "true"
+  }, locale.stepFlow.stepLabel(validatedCurrentStep, totalSteps));
+  return /*#__PURE__*/React.createElement(StyledStepFlow, _extends({}, rest, tagComponent("step-flow", rest)), /*#__PURE__*/React.createElement(StyledStepContent, null, category ? /*#__PURE__*/React.createElement(StyledStepContentText, null, /*#__PURE__*/React.createElement(Typography, {
+    fontWeight: "500",
+    fontSize: "var(--fontSizes100)",
+    lineHeight: "var(--sizing250)",
+    variant: "span",
+    "data-element": "category-text",
+    "aria-hidden": "true"
+  }, category), stepFlowTitle) : stepFlowTitle, showCloseIcon ? closeIcon : null), showProgressIndicator ? /*#__PURE__*/React.createElement(StyledStepLabelAndProgress, null, stepFlowLabel, /*#__PURE__*/React.createElement(StyledProgressIndicatorBar, {
+    "data-element": "progress-indicator-bar"
+  }, progressIndicators)) : stepFlowLabel);
+});
+StepFlow.propTypes = {
+  "category": PropTypes.string,
+  "children": PropTypes.node,
+  "currentStep": PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]).isRequired,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "m": 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]),
+  "margin": 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]),
+  "marginBottom": 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]),
+  "marginLeft": 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]),
+  "marginRight": 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]),
+  "marginTop": 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]),
+  "marginX": 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]),
+  "marginY": 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]),
+  "mb": 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]),
+  "ml": 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]),
+  "mr": 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]),
+  "mt": 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]),
+  "mx": 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]),
+  "my": 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]),
+  "onDismiss": PropTypes.func,
+  "showCloseIcon": PropTypes.bool,
+  "showProgressIndicator": PropTypes.bool,
+  "title": PropTypes.string.isRequired,
+  "titleVariant": PropTypes.oneOf(["h1", "h2"]),
+  "totalSteps": PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]).isRequired
+};
+export { StepFlow };
+export default StepFlow;

package/esm/components/step-flow/step-flow.style.d.ts

@@ -0,0 +1,12 @@
+declare const StyledStepFlow: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledStepContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledStepContentText: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTitleFocusWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledStepLabelAndProgress: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledProgressIndicatorBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledProgressIndicatorProps {
+    isCompleted: boolean;
+    isInProgress: boolean;
+}
+declare const StyledProgressIndicator: import("styled-components").StyledComponent<"span", any, StyledProgressIndicatorProps, never>;
+export { StyledStepFlow, StyledStepContent, StyledStepContentText, StyledTitleFocusWrapper, StyledStepLabelAndProgress, StyledProgressIndicatorBar, StyledProgressIndicator, };

package/esm/components/step-flow/step-flow.style.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { margin } from "styled-system";
+const StyledStepFlow = styled.div`
+  ${margin}
+`;
+const StyledStepContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--sizing200);
+`;
+const StyledStepContentText = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledTitleFocusWrapper = styled.div``;
+const StyledStepLabelAndProgress = styled.div`
+  margin-top: var(--sizing125);
+`;
+const StyledProgressIndicatorBar = styled.div`
+  display: flex;
+  margin-top: var(--sizing100);
+`;
+function calculateProgressIndicatorColor({
+  isCompleted,
+  isInProgress
+}) {
+  if (isInProgress) {
+    return "var(--colorsUtilityYin090)";
+  }
+  if (isCompleted) {
+    return "var(--colorsSemanticPositive500)";
+  }
+  return "var(--colorsActionDisabled600)";
+}
+const StyledProgressIndicator = styled.span`
+  background-color: ${calculateProgressIndicatorColor};
+  width: 100%;
+  height: 8px;
+  border-radius: 8px;
+  margin-right: 12px;
+`;
+export { StyledStepFlow, StyledStepContent, StyledStepContentText, StyledTitleFocusWrapper, StyledStepLabelAndProgress, StyledProgressIndicatorBar, StyledProgressIndicator };

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

@@ -1,4 +1,4 @@
 export { default } from "./typography.component";
 export { List, ListItem } from "./list.component";
-export type { TypographyProps } from "./typography.component";
+export type { TypographyProps, VariantTypes } from "./typography.component";
 export type { ListProps, ListItemProps } from "./list.component";

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

@@ -55,9 +55,11 @@ export interface TypographyProps extends SpaceProps, TagProps {
      * Override the default color of the rendered element to match disabled styling
      * */
     isDisabled?: boolean;
+    /** @private @ignore Set whether the component should be recognised by assistive technologies */
+    "aria-hidden"?: "true" | "false";
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;