carbon-react 111.0.2 → 111.1.0

package/lib/components/content/content.component.js

@@ -3,24 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Content = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
-var _contentStyle = require("./content.style.js");
-
-var _utils = require("../../style/utils");
+var _content = require("./content.style");
 
 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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
 const Content = ({
   variant = "primary",
   children,
@@ -30,49 +24,192 @@ const Content = ({
   titleWidth,
   bodyFullWidth = false,
   ...rest
-}) => /*#__PURE__*/_react.default.createElement(_contentStyle.StyledContent, _extends({
-  align: align,
-  bodyFullWidth: bodyFullWidth
-}, rest, {
-  "data-component": "content"
-}), /*#__PURE__*/_react.default.createElement(_contentStyle.StyledContentTitle, {
-  variant: variant,
-  inline: inline,
-  "data-element": "content-title",
-  titleWidth: titleWidth,
-  align: align
-}, title), /*#__PURE__*/_react.default.createElement(_contentStyle.StyledContentBody, {
-  variant: variant,
-  inline: inline,
-  "data-element": "content-body",
-  bodyFullWidth: bodyFullWidth,
-  titleWidth: titleWidth,
-  align: align
-}, children));
-
-Content.propTypes = { ...marginPropTypes,
-
-  /** Applies a theme to the Content Value: primary, secondary */
-  variant: _propTypes.default.oneOf(["primary", "secondary"]),
-
-  /** The body of the content component */
-  children: _propTypes.default.node,
-
-  /** The title of the content component */
-  title: _propTypes.default.node,
-
-  /** Displays the content inline with the title */
-  inline: _propTypes.default.bool,
-
-  /** Aligns the content (left, center or right) */
-  align: _propTypes.default.oneOf(["left", "center", "right"]),
-
-  /** Sets a custom width for the title element */
-  titleWidth: _propTypes.default.string,
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_content.StyledContent, _extends({
+    align: align,
+    bodyFullWidth: bodyFullWidth
+  }, rest, {
+    "data-component": "content"
+  }), /*#__PURE__*/_react.default.createElement(_content.StyledContentTitle, {
+    variant: variant,
+    inline: inline,
+    "data-element": "content-title",
+    titleWidth: titleWidth,
+    align: align
+  }, title), /*#__PURE__*/_react.default.createElement(_content.StyledContentBody, {
+    variant: variant,
+    inline: inline,
+    "data-element": "content-body",
+    bodyFullWidth: bodyFullWidth,
+    titleWidth: titleWidth,
+    align: align
+  }, children));
+};
 
-  /** Over-rides the calculation of body width based on titleWidth.
-   * Sometimes we need the body to be full width while keeping a title width similar to other widths */
-  bodyFullWidth: _propTypes.default.bool
+exports.Content = Content;
+Content.propTypes = {
+  "align": _propTypes.default.oneOf(["center", "left", "right"]),
+  "bodyFullWidth": _propTypes.default.bool,
+  "children": _propTypes.default.node,
+  "inline": _propTypes.default.bool,
+  "m": _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]),
+  "margin": _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]),
+  "marginBottom": _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]),
+  "marginLeft": _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]),
+  "marginRight": _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]),
+  "marginTop": _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]),
+  "marginX": _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]),
+  "marginY": _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]),
+  "mb": _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]),
+  "ml": _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]),
+  "mr": _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]),
+  "mt": _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]),
+  "mx": _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]),
+  "my": _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]),
+  "title": _propTypes.default.node,
+  "titleWidth": _propTypes.default.string,
+  "variant": _propTypes.default.oneOf(["primary", "secondary"])
 };
+Content.displayName = "Content";
 var _default = Content;
 exports.default = _default;

package/lib/components/content/content.style.d.ts

@@ -0,0 +1,41 @@
+import { MarginProps } from "styled-system";
+export declare type AlignOptions = "left" | "center" | "right";
+export declare type VariantOptions = "primary" | "secondary";
+export interface StyledContentProps extends MarginProps {
+    /** Aligns the content (left, center or right) */
+    align?: AlignOptions;
+    /**
+     * Over-rides the calculation of body width based on titleWidth.
+     * Sometimes we need the body to be full width while keeping a title width similar to other widths
+     */
+    bodyFullWidth?: boolean;
+}
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, StyledContentProps, never>;
+export interface StyledContentTitleProps {
+    /** Aligns the content (left, center or right) */
+    align?: AlignOptions;
+    /** Displays the content inline with the title */
+    inline?: boolean;
+    /** Sets a custom width for the title element */
+    titleWidth?: string;
+    /** Applies a theme to the Content Value: primary, secondary */
+    variant?: VariantOptions;
+}
+declare const StyledContentTitle: import("styled-components").StyledComponent<"div", any, StyledContentTitleProps, never>;
+export interface StyledContentBodyProps {
+    /** Aligns the content (left, center or right) */
+    align?: AlignOptions;
+    /**
+     * Over-rides the calculation of body width based on titleWidth.
+     * Sometimes we need the body to be full width while keeping a title width similar to other widths
+     */
+    bodyFullWidth?: boolean;
+    /** Displays the content inline with the title */
+    inline?: boolean;
+    /** Sets a custom width for the title element */
+    titleWidth?: string;
+    /** Applies a theme to the Content Value: primary, secondary */
+    variant?: VariantOptions;
+}
+declare const StyledContentBody: import("styled-components").StyledComponent<"div", any, StyledContentBodyProps, never>;
+export { StyledContent, StyledContentTitle, StyledContentBody };

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

@@ -1,2 +1,2 @@
-export { default } from "./content";
-export * from "./content";
+export { default } from "./content.component";
+export type { ContentProps } from "./content.component";

package/lib/components/content/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _contentComponent.default;
+    return _content.default;
   }
 });
 
-var _contentComponent = _interopRequireDefault(require("./content.component.js"));
+var _content = _interopRequireDefault(require("./content.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/select/multi-select/multi-select.component.js

@@ -437,7 +437,6 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
 
   const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
     ref: listboxRef,
-    "aria-multiselectable": true,
     id: selectListId.current,
     labelId: labelId.current,
     anchorElement: textboxRef && textboxRef.parentElement,

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

@@ -37,10 +37,16 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   const selectListContext = (0, _react.useContext)(_selectListContext.default);
+  let isSelected = selectListContext.currentOptionsListIndex === index;
+
+  if (selectListContext.multiselectValues) {
+    isSelected = selectListContext.multiselectValues.includes(value);
+  }
+
   return /*#__PURE__*/_react.default.createElement(_optionRow.default, {
     id: id,
     ref: ref,
-    "aria-selected": selectListContext.currentOptionsListIndex === index,
+    "aria-selected": isSelected,
     "data-component": "option-row",
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,

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

@@ -68,6 +68,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   listPlacement = "bottom",
   flipEnabled = true,
   isOpen,
+  multiselectValues,
   ...listProps
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
@@ -350,7 +351,8 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     ref: listContainerRef
   }, /*#__PURE__*/_react.default.createElement(_selectListContext.default.Provider, {
     value: {
-      currentOptionsListIndex
+      currentOptionsListIndex,
+      multiselectValues
     }
   }, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
     "data-element": "select-list-wrapper"
@@ -360,6 +362,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     "aria-labelledby": labelId,
     "data-element": "select-list",
     role: "listbox",
+    "aria-multiselectable": multiselectValues ? true : undefined,
     ref: listCallbackRef,
     tabIndex: "-1",
     isLoading: isLoading,
@@ -433,7 +436,10 @@ SelectList.propTypes = {
   /** @private @ignore
    * Hides the list (with CSS display: none) if not set
    */
-  isOpen: _propTypes.default.bool
+  isOpen: _propTypes.default.bool,
+
+  /** array of selected values, if rendered as part of a MultiSelect */
+  multiselectValues: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.object)])
 };
 var _default = SelectList;
 exports.default = _default;

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

@@ -49,6 +49,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   disableAutoFocus,
   ...restProps
 }, ref) => {
+  const isNotice = variant === "notice";
   const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
@@ -118,7 +119,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
     };
     return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
       enter: true,
-      classNames: "toast",
+      classNames: isNotice ? "toast-alternative" : "toast",
       timeout: {
         appear: 1600,
         enter: 1500,
@@ -126,14 +127,16 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
       },
       nodeRef: toastContentNodeRef
     }, /*#__PURE__*/_react.default.createElement(_toast.ToastStyle, _extends({
+      isNotice: isNotice,
       className: componentClasses
     }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), toastProps, {
       ref: toastContentNodeRef
-    }), /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
+    }), !isNotice && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: toastProps.variant
     })), /*#__PURE__*/_react.default.createElement(_toast.ToastContentStyle, {
+      isNotice: isNotice,
       variant: toastProps.variant,
       isDismiss: onDismiss
     }, children), renderCloseIcon()));
@@ -141,16 +144,18 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
 
   return /*#__PURE__*/_react.default.createElement(_toast.StyledPortal, {
     id: targetPortalId,
-    isCenter: isCenter
+    isCenter: isCenter,
+    isNotice: isNotice
   }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
     isCenter: isCenter,
-    ref: refToPass
+    ref: refToPass,
+    isNotice: isNotice
   }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, renderToastContent())));
 });
 
 Toast.propTypes = {
   /** Customizes the appearance in the DLS theme */
-  variant: _propTypes.default.oneOf(["error", "info", "success", "warning"]),
+  variant: _propTypes.default.oneOf(["error", "info", "success", "warning", "notice"]),
 
   /** Custom className */
   className: _propTypes.default.string,

package/lib/components/toast/toast.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-type ToastVariants = "error" | "info" | "success" | "warning";
+type ToastVariants = "error" | "info" | "success" | "warning" | "notice";
 
 export interface ToastPropTypes {
   /** The rendered children of the component. */

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

@@ -25,6 +25,8 @@ var _portal = _interopRequireDefault(require("../portal/portal"));
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
+var _icon = _interopRequireDefault(require("../icon/icon.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; }
@@ -46,6 +48,14 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
         margin-left: 50%;
         transform: translateX(-50%);
       `}
+
+    ${({
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
+        bottom: 0;
+        top: auto;
+        width: 100%;
+      `}
   `}
 `;
 exports.StyledPortal = StyledPortal;
@@ -53,6 +63,7 @@ StyledPortal.defaultProps = {
   theme: _base.default
 };
 const animationName = ".toast";
+const alternativeAnimationName = ".toast-alternative";
 const ToastStyle = (0, _styledComponents.default)(_message.default)`
   ${({
   maxWidth,
@@ -66,24 +77,23 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
     position: relative;
     margin-right: ${isCenter ? "auto" : "30px"};
   `}
- 
 
   &${animationName}-appear,
   &${animationName}-enter {
     opacity: 0;
-    transform: scale(0.5)};
+    transform: scale(0.5);
   }
 
-  &${animationName}-appear.toast-appear-active,
-  &${animationName}-enter.toast-enter-active {
+  &${animationName}-appear${animationName}-appear-active,
+    &${animationName}-enter${animationName}-enter-active {
     opacity: 1;
     transform: ${({
   isCenter
 }) => isCenter ? " scale(1) translateY(0)" : "scale(1)"};
-    transition: all 300ms cubic-bezier(0.250, 0.250, 0.000, 1.500);
+    transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
   }
 
-  &${animationName}-exit.toast-exit-active {
+  &${animationName}-exit${animationName}-exit-active {
     opacity: 0;
     margin-top: -40px;
     transition: all 150ms ease-out;
@@ -95,15 +105,65 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
     top: 50%;
     transform: translateY(-50%);
   }
+
+  ${({
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
+      background-color: var(--colorsUtilityMajor400);
+      border: none;
+      color: var(--colorsSemanticNeutralYang100);
+      margin-right: 0;
+      max-width: 100%;
+
+      ${_iconButton.default} {
+        right: 55px;
+      }
+
+      ${_iconButton.default} ${_icon.default} {
+        color: var(--colorsSemanticNeutralYang100);
+      }
+
+      &${alternativeAnimationName}-appear, &${alternativeAnimationName}-enter {
+        bottom: -40px;
+        opacity: 0;
+      }
+
+      &${alternativeAnimationName}-exit {
+        bottom: 0;
+        opacity: 1;
+      }
+
+      &${alternativeAnimationName}-appear${alternativeAnimationName}-appear-active,
+        &${alternativeAnimationName}-enter${alternativeAnimationName}-enter-active {
+        bottom: 0;
+        opacity: 1;
+        transition: all 400ms ease;
+      }
+
+      &${alternativeAnimationName}-exit${alternativeAnimationName}-exit-active {
+        bottom: -40px;
+        opacity: 0;
+        transition: all 200ms ease;
+      }
+    `}
 `;
 exports.ToastStyle = ToastStyle;
 const ToastContentStyle = (0, _styledComponents.default)(_messageContent.default)`
   padding: 8px 16px 8px 16px;
 
   ${({
-  isDismiss
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
+      display: flex;
+      align-items: center;
+      padding: 11px 40px;
+    `}
+
+  ${({
+  isDismiss,
+  isNotice
 }) => isDismiss && (0, _styledComponents.css)`
-      padding-right: 48px;
+      padding-right: ${isNotice ? "88px" : "48px"};
     `}
 `;
 exports.ToastContentStyle = ToastContentStyle;
@@ -117,5 +177,11 @@ const ToastWrapper = _styledComponents.default.div`
       justify-content: center;
       display: flex;
     `}
+
+  ${({
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
+      display: block;
+    `}
 `;
 exports.ToastWrapper = ToastWrapper;

package/lib/components/typography/typography.component.js

@@ -272,5 +272,6 @@ Typography.propTypes = {
   /** Apply truncation */
   truncate: _propTypes.default.bool
 };
+Typography.displayName = "Typography";
 var _default = Typography;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.0.2",
+  "version": "111.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -30,7 +30,6 @@
     "clean-lib": "rimraf ./lib && rimraf ./esm",
     "commit": "git-cz",
     "generate-metadata": "node ./scripts/generate_metadata/index.mjs",
-    "generate-proptypes": "ts-node ./scripts/generate_proptypes/index.ts",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
     "build:types": "tsc -p tsconfig-build.json --emitDeclarationOnly --outDir ./lib && tsc -p tsconfig-build.json --emitDeclarationOnly --outDir ./esm"
@@ -110,7 +109,7 @@
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
     "css-loader": "4.0.0",
-    "cypress": "10.8.0",
+    "cypress": "10.9.0",
     "cypress-axe": "^1.0.0",
     "cypress-each": "^1.11.0",
     "cypress-plugin-tab": "^1.0.5",

package/scripts/check_carbon_version/check_carbon_version.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+/* istanbul ignore file */
 const fetch = require("node-fetch");
 const dotenv = require("dotenv");
 const chalk = require("chalk");
@@ -9,7 +10,7 @@ dotenv.config();
 const majorVersion = version.split(".")[0];
 
 const checkCarbonVersion = () => {
-  if (ci.BITRISE) {
+  if (ci.isCI && process.env.NODE_ENV !== "test") {
     return;
   }
 

package/scripts/check_rfcs/check_rfcs.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+/* istanbul ignore file */
 const { Octokit } = require("@octokit/rest");
 const dotenv = require("dotenv");
 const chalk = require("chalk");
@@ -34,7 +35,7 @@ const getOpenRfcs = async () => {
 const getRfcTitle = (rfc) => rfc.title.split(": ")[1];
 
 const checkRfcs = async () => {
-  if (ci.BITRISE) {
+  if (ci.isCI && process.env.NODE_ENV !== "test") {
     return;
   }