carbon-react 111.11.0 → 111.12.1

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import { StepSequenceItemStyle, StepSequenceItemContentStyle, StepSequenceItemIndicatorStyle, StepSequenceItemHiddenLabelStyle } from "./step-sequence-item.style";
+import { StyledStepSequenceItem, StyledStepSequenceItemContent, StyledStepSequenceItemIndicator, StyledStepSequenceItemHiddenLabel } from "./step-sequence-item.style";
 import Icon from "../../icon";
 import { StepSequenceContext } from "../step-sequence.component";
 
@@ -21,7 +21,7 @@ const StepSequenceItem = ({
   } = useContext(StepSequenceContext);
 
   const indicatorText = () => {
-    return !hideIndicator ? /*#__PURE__*/React.createElement(StepSequenceItemIndicatorStyle, null, indicator) : null;
+    return !hideIndicator ? /*#__PURE__*/React.createElement(StyledStepSequenceItemIndicator, null, indicator) : null;
   };
 
   const icon = () => status === "complete" ? /*#__PURE__*/React.createElement(Icon, {
@@ -30,23 +30,23 @@ const StepSequenceItem = ({
 
   const hiddenLabel = () => {
     if (hiddenCompleteLabel && status === "complete") {
-      return /*#__PURE__*/React.createElement(StepSequenceItemHiddenLabelStyle, null, hiddenCompleteLabel);
+      return /*#__PURE__*/React.createElement(StyledStepSequenceItemHiddenLabel, null, hiddenCompleteLabel);
     }
 
     if (hiddenCurrentLabel && status === "current") {
-      return /*#__PURE__*/React.createElement(StepSequenceItemHiddenLabelStyle, null, hiddenCurrentLabel);
+      return /*#__PURE__*/React.createElement(StyledStepSequenceItemHiddenLabel, null, hiddenCurrentLabel);
     }
 
     return null;
   };
 
-  return /*#__PURE__*/React.createElement(StepSequenceItemStyle, _extends({
+  return /*#__PURE__*/React.createElement(StyledStepSequenceItem, _extends({
     "data-component": "step-sequence-item",
     orientation: orientation,
     status: status,
     key: `step-seq-item-${indicator}`,
     "aria-label": ariaLabel
-  }, rest), hiddenLabel(), /*#__PURE__*/React.createElement(StepSequenceItemContentStyle, null, icon(), /*#__PURE__*/React.createElement("span", null, children)));
+  }, rest), hiddenLabel(), /*#__PURE__*/React.createElement(StyledStepSequenceItemContent, null, icon(), /*#__PURE__*/React.createElement("span", null, children)));
 };
 
 StepSequenceItem.propTypes = {

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

@@ -1,9 +1,6 @@
-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 {};
+import { StepSequenceProps } from "../step-sequence.component";
+import { StepSequenceItemProps } from "./step-sequence-item.component";
+export declare const StyledStepSequenceItem: import("styled-components").StyledComponent<"li", any, Pick<StepSequenceItemProps, "status"> & Pick<StepSequenceProps, "orientation">, never>;
+export declare const StyledStepSequenceItemContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledStepSequenceItemHiddenLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledStepSequenceItemIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;

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";
-export const StepSequenceItemStyle = styled.li`
+export const StyledStepSequenceItem = styled.li`
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -8,82 +8,86 @@ export const StepSequenceItemStyle = styled.li`
   list-style-type: none;
   color: var(--colorsUtilityYin055);
 
-  &::before {
-    content: "";
-    flex-grow: 1;
-    display: block;
-    height: var(--sizing025);
-    margin: 0 16px;
-    background-color: var(--colorsUtilityYin055);
-  }
-
-  & span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  ${StyledIcon} {
-    margin-right: 8px;
-    color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
-  }
-
-  &:first-child {
-    flex-grow: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-
   ${({
+  orientation,
   status
-}) => status === "current" && css`
-      color: var(--colorsUtilityYin090);
-
+}) => {
+  const side = orientation === "vertical" ? "left" : "top";
+  return css`
       &::before {
-        background-color: var(--colorsUtilityYin090);
+        content: "";
+        flex-grow: 1;
+        display: block;
+        margin: 0 16px;
+        border-${side}: var(--sizing025) dashed var(--colorsUtilityYin055);
       }
-    `}
 
-  ${({
-  status
-}) => status === "complete" && css`
-      color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
-
-      &::before {
-        background-color: var(
-          --colorsBaseTheme,
-          var(--colorsSemanticPositive500)
-        );
+      & span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
-    `}
 
-  ${({
-  orientation
-}) => orientation === "vertical" && css`
-      flex-direction: column;
-      align-items: flex-start;
+      ${StyledIcon} {
+        margin-right: 8px;
+        color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+      }
 
-      &::before {
+      &:first-child {
         flex-grow: 0;
-        width: var(--sizing025);
-        height: var(--sizing300);
-        margin: 12px 8px;
+
+        &::before {
+          display: none;
+        }
       }
-    `}
+
+      ${status === "current" && css`
+          color: var(--colorsUtilityYin090);
+
+          &::before {
+            border-${side}-color: var(--colorsUtilityYin090);
+            border-${side}-style: solid;
+          }
+        `}
+
+      ${status === "complete" && css`
+          color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+
+          &::before {
+            border-${side}-color: var(
+              --colorsBaseTheme,
+              var(--colorsSemanticPositive500)
+            );
+            border-${side}-style: solid;
+          }
+        `}
+
+      ${orientation === "vertical" && css`
+          flex-direction: column;
+          align-items: flex-start;
+
+          &::before {
+            flex-grow: 0;
+            border-left-width: var(--sizing025);
+            height: 100%;
+            min-height: var(--sizing300);
+            margin: 12px 8px;
+          }
+        `}
+    `;
+}}
 `;
-export const StepSequenceItemContentStyle = styled.span`
+export const StyledStepSequenceItemContent = styled.span`
   display: flex;
 `;
-export const StepSequenceItemHiddenLabelStyle = styled.span`
+export const StyledStepSequenceItemHiddenLabel = styled.span`
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
 `;
-export const StepSequenceItemIndicatorStyle = styled.span`
+export const StyledStepSequenceItemIndicator = styled.span`
   display: block;
   min-width: 16px;
   height: 16px;

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { MarginProps } from "styled-system";
+import { SpaceProps } from "styled-system";
 export declare const StepSequenceContext: React.Context<{
     orientation: "horizontal" | "vertical";
 }>;
-export interface StepSequenceProps extends MarginProps {
+export interface StepSequenceProps extends SpaceProps {
     /** Step sequence items to be rendered */
     children: React.ReactNode;
     /** The direction that step sequence items should be rendered */

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import StepSequenceStyle from "./step-sequence.style";
+import StyledStepSequence from "./step-sequence.style";
 export const StepSequenceContext = /*#__PURE__*/React.createContext({
   orientation: "horizontal"
 });
@@ -12,9 +12,10 @@ const StepSequence = ({
   orientation = "horizontal",
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(StepSequenceStyle, _extends({
+  return /*#__PURE__*/React.createElement(StyledStepSequence, _extends({
     "data-component": "step-sequence",
-    orientation: orientation
+    orientation: orientation,
+    p: 0
   }, props), /*#__PURE__*/React.createElement(StepSequenceContext.Provider, {
     value: {
       orientation
@@ -178,7 +179,161 @@ StepSequence.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
-  "orientation": PropTypes.oneOf(["horizontal", "vertical"])
+  "orientation": PropTypes.oneOf(["horizontal", "vertical"]),
+  "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]),
+  "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])
 };
 export { StepSequence };
 export default StepSequence;

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

@@ -1,4 +1,4 @@
-declare const StepSequenceStyle: import("styled-components").StyledComponent<"ol", any, {
-    orientation: "horizontal" | "vertical";
-}, never>;
-export default StepSequenceStyle;
+import { SpaceProps } from "styled-system";
+import { StepSequenceProps } from "./step-sequence.component";
+declare const StyledStepSequence: import("styled-components").StyledComponent<"ol", any, Pick<StepSequenceProps, "orientation"> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default StyledStepSequence;

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

@@ -1,22 +1,21 @@
 import styled, { css } from "styled-components";
-import { margin } from "styled-system";
+import { space } from "styled-system";
 import { baseTheme } from "../../style/themes";
-const StepSequenceStyle = styled.ol`
+const StyledStepSequence = styled.ol`
   display: flex;
   margin: 0;
-  padding: 18px;
   font-weight: bold;
 
   ${({
   orientation
 }) => orientation === "vertical" && css`
       flex-direction: column;
-      padding: 0;
+      height: 100%;
     `}
 
-  ${margin}
+  ${space}
 `;
-StepSequenceStyle.defaultProps = {
+StyledStepSequence.defaultProps = {
   theme: baseTheme
 };
-export default StepSequenceStyle;
+export default StyledStepSequence;

package/esm/components/toast/toast.component.js

@@ -1,6 +1,6 @@
 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, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import PropTypes from "prop-types";
@@ -32,6 +32,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   const toastContentNodeRef = useRef();
   const closeIconRef = useRef();
   const focusedElementBeforeOpening = useRef();
+  const [tabIndex, setTabIndex] = useState(0);
   const refToPass = ref || toastRef;
   const componentClasses = useMemo(() => {
     return classNames(className);
@@ -53,15 +54,16 @@ const Toast = /*#__PURE__*/React.forwardRef(({
     timer.current = setTimeout(() => onDismiss(), timeout);
   }, [onDismiss, open, timeout]);
   useEffect(() => {
-    if (onDismiss && !disableAutoFocus) {
+    if (!disableAutoFocus) {
       if (open) {
-        var _closeIconRef$current;
+        var _toastContentNodeRef$;
 
         focusedElementBeforeOpening.current = document.activeElement;
-        (_closeIconRef$current = closeIconRef.current) === null || _closeIconRef$current === void 0 ? void 0 : _closeIconRef$current.focus();
+        (_toastContentNodeRef$ = toastContentNodeRef.current) === null || _toastContentNodeRef$ === void 0 ? void 0 : _toastContentNodeRef$.focus();
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
         focusedElementBeforeOpening.current = undefined;
+        setTabIndex(0);
       }
     }
   }, [open, onDismiss, disableAutoFocus]);
@@ -107,6 +109,9 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       className: componentClasses
     }, tagComponent(restProps["data-component"] || "toast", restProps), toastProps, {
       ref: toastContentNodeRef
+    }, !disableAutoFocus && {
+      tabIndex,
+      onBlur: () => setTabIndex(undefined)
     }), !isNotice && /*#__PURE__*/React.createElement(TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/React.createElement(Icon, {

package/esm/components/toast/toast.style.js

@@ -50,8 +50,11 @@ const ToastStyle = styled(MessageStyle)`
     margin-right: ${isCenter ? "auto" : "30px"};
   `}
 
-  &${animationName}-appear,
-  &${animationName}-enter {
+  :focus {
+    outline: none;
+  }
+
+  &${animationName}-appear, &${animationName}-enter {
     opacity: 0;
     transform: scale(0.5);
   }

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

@@ -38,7 +38,7 @@ const StepSequenceItem = ({
   } = (0, _react.useContext)(_stepSequence.StepSequenceContext);
 
   const indicatorText = () => {
-    return !hideIndicator ? /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StepSequenceItemIndicatorStyle, null, indicator) : null;
+    return !hideIndicator ? /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItemIndicator, null, indicator) : null;
   };
 
   const icon = () => status === "complete" ? /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -47,23 +47,23 @@ const StepSequenceItem = ({
 
   const hiddenLabel = () => {
     if (hiddenCompleteLabel && status === "complete") {
-      return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StepSequenceItemHiddenLabelStyle, null, hiddenCompleteLabel);
+      return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItemHiddenLabel, null, hiddenCompleteLabel);
     }
 
     if (hiddenCurrentLabel && status === "current") {
-      return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StepSequenceItemHiddenLabelStyle, null, hiddenCurrentLabel);
+      return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItemHiddenLabel, null, hiddenCurrentLabel);
     }
 
     return null;
   };
 
-  return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StepSequenceItemStyle, _extends({
+  return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItem, _extends({
     "data-component": "step-sequence-item",
     orientation: orientation,
     status: status,
     key: `step-seq-item-${indicator}`,
     "aria-label": ariaLabel
-  }, rest), hiddenLabel(), /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StepSequenceItemContentStyle, null, icon(), /*#__PURE__*/_react.default.createElement("span", null, children)));
+  }, rest), hiddenLabel(), /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItemContent, null, icon(), /*#__PURE__*/_react.default.createElement("span", null, children)));
 };
 
 exports.StepSequenceItem = StepSequenceItem;

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

@@ -1,9 +1,6 @@
-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 {};
+import { StepSequenceProps } from "../step-sequence.component";
+import { StepSequenceItemProps } from "./step-sequence-item.component";
+export declare const StyledStepSequenceItem: import("styled-components").StyledComponent<"li", any, Pick<StepSequenceItemProps, "status"> & Pick<StepSequenceProps, "orientation">, never>;
+export declare const StyledStepSequenceItemContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledStepSequenceItemHiddenLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledStepSequenceItemIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StepSequenceItemIndicatorStyle = exports.StepSequenceItemHiddenLabelStyle = exports.StepSequenceItemContentStyle = exports.StepSequenceItemStyle = void 0;
+exports.StyledStepSequenceItemIndicator = exports.StyledStepSequenceItemHiddenLabel = exports.StyledStepSequenceItemContent = exports.StyledStepSequenceItem = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -15,7 +15,7 @@ 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 StepSequenceItemStyle = _styledComponents.default.li`
+const StyledStepSequenceItem = _styledComponents.default.li`
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -23,89 +23,93 @@ const StepSequenceItemStyle = _styledComponents.default.li`
   list-style-type: none;
   color: var(--colorsUtilityYin055);
 
-  &::before {
-    content: "";
-    flex-grow: 1;
-    display: block;
-    height: var(--sizing025);
-    margin: 0 16px;
-    background-color: var(--colorsUtilityYin055);
-  }
-
-  & span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  ${_icon.default} {
-    margin-right: 8px;
-    color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
-  }
-
-  &:first-child {
-    flex-grow: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-
   ${({
+  orientation,
   status
-}) => status === "current" && (0, _styledComponents.css)`
-      color: var(--colorsUtilityYin090);
-
+}) => {
+  const side = orientation === "vertical" ? "left" : "top";
+  return (0, _styledComponents.css)`
       &::before {
-        background-color: var(--colorsUtilityYin090);
+        content: "";
+        flex-grow: 1;
+        display: block;
+        margin: 0 16px;
+        border-${side}: var(--sizing025) dashed var(--colorsUtilityYin055);
       }
-    `}
-
-  ${({
-  status
-}) => status === "complete" && (0, _styledComponents.css)`
-      color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
 
-      &::before {
-        background-color: var(
-          --colorsBaseTheme,
-          var(--colorsSemanticPositive500)
-        );
+      & span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
-    `}
 
-  ${({
-  orientation
-}) => orientation === "vertical" && (0, _styledComponents.css)`
-      flex-direction: column;
-      align-items: flex-start;
+      ${_icon.default} {
+        margin-right: 8px;
+        color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+      }
 
-      &::before {
+      &:first-child {
         flex-grow: 0;
-        width: var(--sizing025);
-        height: var(--sizing300);
-        margin: 12px 8px;
+
+        &::before {
+          display: none;
+        }
       }
-    `}
+
+      ${status === "current" && (0, _styledComponents.css)`
+          color: var(--colorsUtilityYin090);
+
+          &::before {
+            border-${side}-color: var(--colorsUtilityYin090);
+            border-${side}-style: solid;
+          }
+        `}
+
+      ${status === "complete" && (0, _styledComponents.css)`
+          color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+
+          &::before {
+            border-${side}-color: var(
+              --colorsBaseTheme,
+              var(--colorsSemanticPositive500)
+            );
+            border-${side}-style: solid;
+          }
+        `}
+
+      ${orientation === "vertical" && (0, _styledComponents.css)`
+          flex-direction: column;
+          align-items: flex-start;
+
+          &::before {
+            flex-grow: 0;
+            border-left-width: var(--sizing025);
+            height: 100%;
+            min-height: var(--sizing300);
+            margin: 12px 8px;
+          }
+        `}
+    `;
+}}
 `;
-exports.StepSequenceItemStyle = StepSequenceItemStyle;
-const StepSequenceItemContentStyle = _styledComponents.default.span`
+exports.StyledStepSequenceItem = StyledStepSequenceItem;
+const StyledStepSequenceItemContent = _styledComponents.default.span`
   display: flex;
 `;
-exports.StepSequenceItemContentStyle = StepSequenceItemContentStyle;
-const StepSequenceItemHiddenLabelStyle = _styledComponents.default.span`
+exports.StyledStepSequenceItemContent = StyledStepSequenceItemContent;
+const StyledStepSequenceItemHiddenLabel = _styledComponents.default.span`
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
 `;
-exports.StepSequenceItemHiddenLabelStyle = StepSequenceItemHiddenLabelStyle;
-const StepSequenceItemIndicatorStyle = _styledComponents.default.span`
+exports.StyledStepSequenceItemHiddenLabel = StyledStepSequenceItemHiddenLabel;
+const StyledStepSequenceItemIndicator = _styledComponents.default.span`
   display: block;
   min-width: 16px;
   height: 16px;
   margin-right: 8px;
   text-align: center;
 `;
-exports.StepSequenceItemIndicatorStyle = StepSequenceItemIndicatorStyle;
+exports.StyledStepSequenceItemIndicator = StyledStepSequenceItemIndicator;

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { MarginProps } from "styled-system";
+import { SpaceProps } from "styled-system";
 export declare const StepSequenceContext: React.Context<{
     orientation: "horizontal" | "vertical";
 }>;
-export interface StepSequenceProps extends MarginProps {
+export interface StepSequenceProps extends SpaceProps {
     /** Step sequence items to be rendered */
     children: React.ReactNode;
     /** The direction that step sequence items should be rendered */

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

@@ -28,7 +28,8 @@ const StepSequence = ({
 }) => {
   return /*#__PURE__*/_react.default.createElement(_stepSequence.default, _extends({
     "data-component": "step-sequence",
-    orientation: orientation
+    orientation: orientation,
+    p: 0
   }, props), /*#__PURE__*/_react.default.createElement(StepSequenceContext.Provider, {
     value: {
       orientation
@@ -193,7 +194,161 @@ StepSequence.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
-  "orientation": _propTypes.default.oneOf(["horizontal", "vertical"])
+  "orientation": _propTypes.default.oneOf(["horizontal", "vertical"]),
+  "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])
 };
 var _default = StepSequence;
 exports.default = _default;

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

@@ -1,4 +1,4 @@
-declare const StepSequenceStyle: import("styled-components").StyledComponent<"ol", any, {
-    orientation: "horizontal" | "vertical";
-}, never>;
-export default StepSequenceStyle;
+import { SpaceProps } from "styled-system";
+import { StepSequenceProps } from "./step-sequence.component";
+declare const StyledStepSequence: import("styled-components").StyledComponent<"ol", any, Pick<StepSequenceProps, "orientation"> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default StyledStepSequence;

package/lib/components/step-sequence/step-sequence.style.js

@@ -15,23 +15,22 @@ 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 StepSequenceStyle = _styledComponents.default.ol`
+const StyledStepSequence = _styledComponents.default.ol`
   display: flex;
   margin: 0;
-  padding: 18px;
   font-weight: bold;
 
   ${({
   orientation
 }) => orientation === "vertical" && (0, _styledComponents.css)`
       flex-direction: column;
-      padding: 0;
+      height: 100%;
     `}
 
-  ${_styledSystem.margin}
+  ${_styledSystem.space}
 `;
-StepSequenceStyle.defaultProps = {
+StyledStepSequence.defaultProps = {
   theme: _themes.baseTheme
 };
-var _default = StepSequenceStyle;
+var _default = StyledStepSequence;
 exports.default = _default;

package/lib/components/toast/toast.component.js

@@ -56,6 +56,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   const toastContentNodeRef = (0, _react.useRef)();
   const closeIconRef = (0, _react.useRef)();
   const focusedElementBeforeOpening = (0, _react.useRef)();
+  const [tabIndex, setTabIndex] = (0, _react.useState)(0);
   const refToPass = ref || toastRef;
   const componentClasses = (0, _react.useMemo)(() => {
     return (0, _classnames.default)(className);
@@ -77,15 +78,16 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
     timer.current = setTimeout(() => onDismiss(), timeout);
   }, [onDismiss, open, timeout]);
   (0, _react.useEffect)(() => {
-    if (onDismiss && !disableAutoFocus) {
+    if (!disableAutoFocus) {
       if (open) {
-        var _closeIconRef$current;
+        var _toastContentNodeRef$;
 
         focusedElementBeforeOpening.current = document.activeElement;
-        (_closeIconRef$current = closeIconRef.current) === null || _closeIconRef$current === void 0 ? void 0 : _closeIconRef$current.focus();
+        (_toastContentNodeRef$ = toastContentNodeRef.current) === null || _toastContentNodeRef$ === void 0 ? void 0 : _toastContentNodeRef$.focus();
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
         focusedElementBeforeOpening.current = undefined;
+        setTabIndex(0);
       }
     }
   }, [open, onDismiss, disableAutoFocus]);
@@ -131,6 +133,9 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
       className: componentClasses
     }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), toastProps, {
       ref: toastContentNodeRef
+    }, !disableAutoFocus && {
+      tabIndex,
+      onBlur: () => setTabIndex(undefined)
     }), !isNotice && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/components/toast/toast.style.js

@@ -78,8 +78,11 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
     margin-right: ${isCenter ? "auto" : "30px"};
   `}
 
-  &${animationName}-appear,
-  &${animationName}-enter {
+  :focus {
+    outline: none;
+  }
+
+  &${animationName}-appear, &${animationName}-enter {
     opacity: 0;
     transform: scale(0.5);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.11.0",
+  "version": "111.12.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",