carbon-react 104.58.3 → 104.58.6

package/lib/components/alert/alert.component.js

@@ -1,82 +1,167 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
-exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.Alert = void 0;
 
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _dialog = _interopRequireDefault(require("../dialog"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-const Alert = ({
-  children,
-  ...rest
-}) => /*#__PURE__*/_react.default.createElement(_dialog.default, _extends({
-  "data-component": "alert",
-  role: "alertdialog"
-}, rest), children);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+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);
+}
+
+const Alert = ({ children, size = "extra-small", ...rest }) =>
+  /*#__PURE__*/ _react.default.createElement(
+    _dialog.default,
+    _extends(
+      {
+        "data-component": "alert",
+        role: "alertdialog",
+        size: size,
+      },
+      rest
+    ),
+    children
+  );
 
 Alert.propTypes = {
-  /** Prop to specify the aria-describedby property of the component */
+  /**
+   * Prop to specify the aria-describedby property of the Dialog component
+   */
   "aria-describedby": _propTypes.default.string,
-
   /**
-   * Prop to specify the aria-label of the component.
+   * Prop to specify the aria-label of the Dialog component.
    * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
    */
   "aria-label": _propTypes.default.string,
-
   /**
-   * Prop to specify the aria-labeledby property of the component
+   * Prop to specify the aria-labelledby property of the Dialog 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": _propTypes.default.string,
-
-  /** Alert content */
+  /**
+   * The ARIA role to be applied to the modal
+   */
+  ariaRole: _propTypes.default.string,
+  /**
+   * Modal content
+   */
   children: _propTypes.default.node,
-
-  /** Controls the open state of the component */
-  open: _propTypes.default.bool.isRequired,
-
-  /** A custom close event handler */
-  onCancel: _propTypes.default.func,
-
-  /** Determines if the Esc Key closes the Alert */
+  /**
+   * Padding to be set on the Dialog content
+   */
+  contentPadding: _propTypes.default.shape({
+    p: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    px: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    py: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+  }),
+  disableAutoFocus: _propTypes.default.bool,
+  /**
+   * Determines if the Dialog can be closed
+   */
+  disableClose: _propTypes.default.bool,
+  /**
+   * Determines if the Esc Key closes the modal
+   */
   disableEscKey: _propTypes.default.bool,
-
-  /** Allows developers to specify a specific height for the dialog. */
-  height: _propTypes.default.string,
-
-  /** Title displayed at top of Alert */
-  title: _propTypes.default.node,
-
-  /** Subtitle displayed at top of Alert */
-  subtitle: _propTypes.default.string,
-
-  /** Size of Alert */
-  size: _propTypes.default.oneOf(["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
-
-  /** Determines if the close icon is shown */
-  showCloseIcon: _propTypes.default.bool,
-
-  /** Optional reference to an element meant to be focused on open */
+  disableFocusTrap: _propTypes.default.bool,
+  /**
+   * Determines if the background is disabled when the modal is open
+   */
+  enableBackgroundUI: _propTypes.default.bool,
+  /**
+   * Optional reference to an element meant to be focused on open
+   */
   focusFirstElement: _propTypes.default.shape({
-    current: _propTypes.default.any
+    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"
+        );
+      }
+    },
   }),
-
-  /** Disables auto focus functionality on child elements */
-  disableAutoFocus: _propTypes.default.bool
-};
-Alert.defaultProps = {
-  size: "extra-small"
+  /**
+   * Allows developers to specify a specific height for the dialog.
+   */
+  height: _propTypes.default.string,
+  /**
+   * Adds Help tooltip to Header
+   */
+  help: _propTypes.default.string,
+  /**
+   * A custom close event handler
+   */
+  onCancel: _propTypes.default.func,
+  /**
+   * Sets the open state of the modal
+   */
+  open: _propTypes.default.bool.isRequired,
+  /**
+   * The ARIA role to be applied to the Dialog container
+   */
+  role: _propTypes.default.string,
+  /**
+   * Determines if the close icon is shown
+   */
+  showCloseIcon: _propTypes.default.bool,
+  /**
+   * Size of dialog, default size is 750px
+   */
+  size: _propTypes.default.oneOf([
+    "auto",
+    "extra-large",
+    "extra-small",
+    "large",
+    "medium-large",
+    "medium-small",
+    "medium",
+    "small",
+  ]),
+  /**
+   * Subtitle displayed at top of dialog
+   */
+  subtitle: _propTypes.default.string,
+  /**
+   * Transition time
+   */
+  timeout: _propTypes.default.number,
+  /**
+   * Title displayed at top of dialog
+   */
+  title: _propTypes.default.node,
 };
+
+exports.Alert = Alert;
 var _default = Alert;
-exports.default = _default;
+exports.default = _default;

package/lib/components/alert/index.d.ts

@@ -1 +1 @@
-export { default } from "./alert";
+export { default } from "./alert.component";

package/lib/components/carousel/carousel.component.js

@@ -97,19 +97,6 @@ const BaseCarousel = ({
     handleSlideChange(newSlideSelection);
   }
 
-  function visibleSlides() {
-    const arrayWithKeys = _react.default.Children.map(children, (element, key) => {
-      return /*#__PURE__*/_react.default.cloneElement(element, {
-        key: `slide-${(0, _guid.default)()}`,
-        id: key,
-        selectedIndex: selectedSlideIndex,
-        ...element.props
-      });
-    });
-
-    return arrayWithKeys;
-  }
-
   function slideSelector() {
     if (!enableSlideSelector) return null;
     const buttons = [];
@@ -170,7 +157,7 @@ const BaseCarousel = ({
     className: "carbon-carousel__content"
   }, previousButton(), /*#__PURE__*/_react.default.createElement(_carousel.CarouselSliderWrapper, {
     elementIndex: selectedSlideIndex
-  }, visibleSlides()), nextButton()), slideSelector());
+  }, children), nextButton()), slideSelector());
 };
 
 BaseCarousel.propTypes = {

package/lib/components/carousel/carousel.style.js

@@ -11,6 +11,8 @@ var _icon = _interopRequireDefault(require("../icon"));
 
 var _slide = require("./slide.config");
 
+var _slide2 = require("./slide/slide.style");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -144,9 +146,17 @@ const CarouselSliderWrapper = _styledComponents.default.div`
   transition: 0.4s;
   display: flex;
   position: relative;
-  left: ${({
+
+  ${({
   elementIndex
-}) => 10 - 80 * elementIndex}%;
+}) => (0, _styledComponents.css)`
+    left: ${10 - 80 * elementIndex}%;
+
+    ${_slide2.SlideStyle}:nth-of-type(${elementIndex + 1}) {
+      transform: scale(1);
+      opacity: 1;
+    }
+  `}
 `;
 exports.CarouselSliderWrapper = CarouselSliderWrapper;
 const CarouselWrapperStyle = _styledComponents.default.div`

package/lib/components/carousel/slide/slide.component.js

@@ -17,9 +17,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-const Slide = props => {
-  return /*#__PURE__*/_react.default.createElement(_slide.SlideStyle, _extends({}, props, (0, _tags.default)("slide", props)));
-};
+const Slide = props => /*#__PURE__*/_react.default.createElement(_slide.SlideStyle, _extends({}, props, (0, _tags.default)("slide", props)));
 
 Slide.defaultProps = {
   theme: _base.default

package/lib/components/carousel/slide/slide.style.js

@@ -13,9 +13,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const SlideStyle = _styledComponents.default.div`
   ${({
-  onClick,
-  id,
-  selectedIndex
+  onClick
 }) => (0, _styledComponents.css)`
     box-sizing: border-box;
     display: inline-block;
@@ -30,17 +28,12 @@ const SlideStyle = _styledComponents.default.div`
     box-shadow: var(--boxShadow200);
     background-color: var(--colorsUtilityYang100);
 
-    ${id === selectedIndex && (0, _styledComponents.css)`
-      transform: scale(1);
-      opacity: 1;
-
-      ${onClick && (0, _styledComponents.css)`
-        :hover {
-          transition: all 0.2s ease-in;
-          transform: scale(1.02);
-          cursor: pointer;
-        }
-      `}
+    ${onClick && (0, _styledComponents.css)`
+      :hover {
+        transition: all 0.2s ease-in;
+        transform: scale(1.02);
+        cursor: pointer;
+      }
     `}
   `}
 `; // eslint-disable-next-line import/prefer-default-export

package/lib/components/checkbox/checkbox-group.component.d.ts

@@ -1,4 +1,6 @@
+export const CheckboxGroupContext: React.Context<{}>;
 export default CheckboxGroup;
+import React from "react";
 declare function CheckboxGroup(props: any): JSX.Element;
 declare namespace CheckboxGroup {
     namespace propTypes {

package/lib/components/checkbox/checkbox-group.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.CheckboxGroupContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -27,6 +27,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
+const CheckboxGroupContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.CheckboxGroupContext = CheckboxGroupContext;
+
 const CheckboxGroup = props => {
   const {
     children,
@@ -59,13 +63,14 @@ const CheckboxGroup = props => {
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_checkbox.StyledCheckboxGroup, {
     "data-component": "checkbox-group",
     legendInline: legendInline
-  }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.cloneElement(child, {
-    inputName: groupName,
-    error: !!error,
-    warning: !!warning,
-    info: !!info,
-    ...child.props
-  })))));
+  }, /*#__PURE__*/_react.default.createElement(CheckboxGroupContext.Provider, {
+    value: {
+      inputName: groupName,
+      error: !!error,
+      warning: !!warning,
+      info: !!info
+    }
+  }, children))));
 };
 
 CheckboxGroup.propTypes = {

package/lib/components/checkbox/checkbox.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -23,8 +23,14 @@ var _utils = require("../../style/utils");
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _checkboxGroup = require("./checkbox-group.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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); }
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
@@ -65,6 +71,12 @@ const Checkbox = ({
 }) => {
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
+  const {
+    error: contextError,
+    warning: contextWarning,
+    info: contextInfo,
+    inputName
+  } = (0, _react.useContext)(_checkboxGroup.CheckboxGroupContext);
   const inputProps = {
     onClick,
     onChange,
@@ -82,15 +94,16 @@ const Checkbox = ({
     labelHelp,
     labelSpacing,
     required,
-    error,
-    warning,
-    info,
+    error: contextError || error,
+    warning: contextWarning || warning,
+    info: contextInfo || info,
     fieldHelpInline,
     checked,
     disabled,
     inputWidth,
     labelWidth,
     tooltipPosition,
+    inputName,
     ...props
   };
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
@@ -104,9 +117,9 @@ const Checkbox = ({
     labelSpacing: labelSpacing,
     inputWidth: inputWidth,
     adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen,
-    error: error,
-    warning: warning,
-    info: info,
+    error: contextError || error,
+    warning: contextWarning || warning,
+    info: contextInfo || info,
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
     size: size

package/lib/components/dialog/dialog.component.js

@@ -25,8 +25,6 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 
 var _icon = _interopRequireDefault(require("../icon"));
 
-var _form = _interopRequireDefault(require("../form"));
-
 var _dialog2 = require("./dialog.config");
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
@@ -193,15 +191,7 @@ const Dialog = ({
     role: role
   }, contentPadding), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
     ref: innerContentRef
-  }, contentPadding), _react.default.Children.map(children, child => {
-    if ((child === null || child === void 0 ? void 0 : child.type) === _form.default) {
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        dialogRef
-      });
-    }
-
-    return child;
-  }))), closeIcon())));
+  }, contentPadding), children)), closeIcon())));
 };
 
 Dialog.propTypes = {

package/lib/components/form/form.component.d.ts

@@ -1,5 +1,5 @@
 export default Form;
-declare function Form({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, dialogRef, fieldSpacing, noValidate, height, ...rest }: {
+declare function Form({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, ...rest }: {
     [x: string]: any;
     children: any;
     saveButton: any;
@@ -10,7 +10,6 @@ declare function Form({ children, saveButton, leftSideButtons, rightSideButtons,
     onSubmit: any;
     buttonAlignment?: string | undefined;
     stickyFooter: any;
-    dialogRef: any;
     fieldSpacing?: number | undefined;
     noValidate?: boolean | undefined;
     height: any;

package/lib/components/form/form.component.js

@@ -35,7 +35,6 @@ const Form = ({
   onSubmit,
   buttonAlignment = "right",
   stickyFooter,
-  dialogRef,
   fieldSpacing = 3,
   noValidate = true,
   height,
@@ -110,15 +109,6 @@ Form.propTypes = { ..._propTypes2.default.space,
   /** Disable HTML5 validation */
   noValidate: _propTypes.default.bool,
 
-  /**
-   * @private
-   * @ignore
-   * Used to detect if FormFooter should be sticky when used in Dialog component
-   */
-  dialogRef: _propTypes.default.shape({
-    current: _propTypes.default.any
-  }),
-
   /** Height of the form (any valid CSS value) */
   height: _propTypes.default.string
 };

package/lib/components/inline-inputs/inline-inputs.component.d.ts

@@ -1,4 +1,6 @@
+export const InlineInputsContext: React.Context<{}>;
 export default InlineInputs;
+import React from "react";
 declare function InlineInputs(props: any): JSX.Element;
 declare namespace InlineInputs {
     namespace propTypes {

package/lib/components/inline-inputs/inline-inputs.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.InlineInputsContext = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -21,22 +21,20 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const columnWrapper = (children, gutter) => {
-  let inputs = children;
+const InlineInputsContext = /*#__PURE__*/_react.default.createContext({});
 
-  if (!Array.isArray(inputs)) {
-    inputs = [children];
-  }
-
-  return inputs.map((input, index) => {
-    // Input is never going to be re-ordered so we don't require a defined key
+exports.InlineInputsContext = InlineInputsContext;
 
-    /* eslint-disable react/no-array-index-key */
-    return /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledInlineInput, {
-      key: index,
+const columnWrapper = (children, gutter, labelId) => {
+  return _react.default.Children.map(children, input => {
+    return /*#__PURE__*/_react.default.createElement(InlineInputsContext.Provider, {
+      value: {
+        ariaLabelledBy: labelId
+      }
+    }, /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledInlineInput, {
       gutter: gutter,
       "data-element": "inline-input"
-    }, input);
+    }, input));
   });
 };
 
@@ -61,13 +59,6 @@ const InlineInputs = props => {
     }, label);
   }
 
-  function renderChildren() {
-    if (!label) return children;
-    return _react.default.Children.map(children, child => /*#__PURE__*/_react.default.cloneElement(child, {
-      "aria-labelledby": labelId.current
-    }));
-  }
-
   return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, {
     gutter: gutter,
     "data-component": "inline-inputs",
@@ -77,7 +68,7 @@ const InlineInputs = props => {
     gutter: gutter,
     "data-element": "inline-inputs-container",
     inputWidth: inputWidth
-  }, columnWrapper(renderChildren(), gutter)));
+  }, columnWrapper(children, gutter, label ? labelId.current : undefined)));
 }; // Assign props over for demo site
 
 

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _stepSequenceItem = _interopRequireDefault(require("./step-sequence-item.style"));
 
@@ -19,11 +19,21 @@ var _stepSequenceItemHiddenLabel = _interopRequireDefault(require("./step-sequen
 
 var _icon = _interopRequireDefault(require("../../icon"));
 
+var _stepSequence = require("../step-sequence.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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); }
 
 const StepSequenceItem = props => {
+  const {
+    orientation
+  } = (0, _react.useContext)(_stepSequence.StepSequenceContext);
+
   const indicatorText = () => {
     return !props.hideIndicator ? /*#__PURE__*/_react.default.createElement(_stepSequenceItemIndicator.default, null, props.indicator) : null;
   };
@@ -53,6 +63,7 @@ const StepSequenceItem = props => {
   return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.default, _extends({
     "data-component": "step-sequence-item"
   }, props, {
+    orientation: orientation,
     key: `step-seq-item-${props.indicator}`
   }), hiddenLabel(), /*#__PURE__*/_react.default.createElement(_stepSequenceItemContent.default, null, icon(), /*#__PURE__*/_react.default.createElement("span", null, props.children)));
 };

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

@@ -1,4 +1,6 @@
+export const StepSequenceContext: React.Context<{}>;
 export default StepSequence;
+import React from "react";
 declare function StepSequence(props: any): JSX.Element;
 declare namespace StepSequence {
     namespace propTypes {