carbon-react 111.0.2 → 111.1.0

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { StyledContentProps, StyledContentTitleProps, StyledContentBodyProps } from "./content.style";
+export interface ContentProps extends StyledContentProps, StyledContentTitleProps, StyledContentBodyProps {
+    /** The body of the content component */
+    children?: React.ReactNode;
+    /** The title of the content component */
+    title?: React.ReactNode;
+}
+export declare const Content: {
+    ({ variant, children, title, inline, align, titleWidth, bodyFullWidth, ...rest }: ContentProps): JSX.Element;
+    displayName: string;
+};
+export default Content;

package/esm/components/content/content.component.js

@@ -2,10 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
-import { StyledContent, StyledContentTitle, StyledContentBody } from "./content.style.js";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+import { StyledContent, StyledContentTitle, StyledContentBody } from "./content.style";
 
 const Content = ({
   variant = "primary",
@@ -16,48 +13,191 @@ const Content = ({
   titleWidth,
   bodyFullWidth = false,
   ...rest
-}) => /*#__PURE__*/React.createElement(StyledContent, _extends({
-  align: align,
-  bodyFullWidth: bodyFullWidth
-}, rest, {
-  "data-component": "content"
-}), /*#__PURE__*/React.createElement(StyledContentTitle, {
-  variant: variant,
-  inline: inline,
-  "data-element": "content-title",
-  titleWidth: titleWidth,
-  align: align
-}, title), /*#__PURE__*/React.createElement(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.oneOf(["primary", "secondary"]),
-
-  /** The body of the content component */
-  children: PropTypes.node,
-
-  /** The title of the content component */
-  title: PropTypes.node,
-
-  /** Displays the content inline with the title */
-  inline: PropTypes.bool,
-
-  /** Aligns the content (left, center or right) */
-  align: PropTypes.oneOf(["left", "center", "right"]),
-
-  /** Sets a custom width for the title element */
-  titleWidth: PropTypes.string,
+}) => {
+  return /*#__PURE__*/React.createElement(StyledContent, _extends({
+    align: align,
+    bodyFullWidth: bodyFullWidth
+  }, rest, {
+    "data-component": "content"
+  }), /*#__PURE__*/React.createElement(StyledContentTitle, {
+    variant: variant,
+    inline: inline,
+    "data-element": "content-title",
+    titleWidth: titleWidth,
+    align: align
+  }, title), /*#__PURE__*/React.createElement(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.bool
+Content.propTypes = {
+  "align": PropTypes.oneOf(["center", "left", "right"]),
+  "bodyFullWidth": PropTypes.bool,
+  "children": PropTypes.node,
+  "inline": PropTypes.bool,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "title": PropTypes.node,
+  "titleWidth": PropTypes.string,
+  "variant": PropTypes.oneOf(["primary", "secondary"])
 };
+export { Content };
+Content.displayName = "Content";
 export default Content;

package/esm/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/esm/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/esm/components/content/index.js

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

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

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

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

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

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

@@ -38,6 +38,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   listPlacement = "bottom",
   flipEnabled = true,
   isOpen,
+  multiselectValues,
   ...listProps
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
@@ -320,7 +321,8 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     ref: listContainerRef
   }, /*#__PURE__*/React.createElement(SelectListContext.Provider, {
     value: {
-      currentOptionsListIndex
+      currentOptionsListIndex,
+      multiselectValues
     }
   }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
     "data-element": "select-list-wrapper"
@@ -330,6 +332,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     "aria-labelledby": labelId,
     "data-element": "select-list",
     role: "listbox",
+    "aria-multiselectable": multiselectValues ? true : undefined,
     ref: listCallbackRef,
     tabIndex: "-1",
     isLoading: isLoading,
@@ -402,6 +405,9 @@ SelectList.propTypes = {
   /** @private @ignore
    * Hides the list (with CSS display: none) if not set
    */
-  isOpen: PropTypes.bool
+  isOpen: PropTypes.bool,
+
+  /** array of selected values, if rendered as part of a MultiSelect */
+  multiselectValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)])
 };
 export default SelectList;

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

@@ -25,6 +25,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   disableAutoFocus,
   ...restProps
 }, ref) => {
+  const isNotice = variant === "notice";
   const locale = useLocale();
   const toastRef = useRef();
   const timer = useRef();
@@ -94,7 +95,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
     };
     return /*#__PURE__*/React.createElement(CSSTransition, {
       enter: true,
-      classNames: "toast",
+      classNames: isNotice ? "toast-alternative" : "toast",
       timeout: {
         appear: 1600,
         enter: 1500,
@@ -102,14 +103,16 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       },
       nodeRef: toastContentNodeRef
     }, /*#__PURE__*/React.createElement(ToastStyle, _extends({
+      isNotice: isNotice,
       className: componentClasses
     }, tagComponent(restProps["data-component"] || "toast", restProps), toastProps, {
       ref: toastContentNodeRef
-    }), /*#__PURE__*/React.createElement(TypeIcon, {
+    }), !isNotice && /*#__PURE__*/React.createElement(TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/React.createElement(Icon, {
       type: toastProps.variant
     })), /*#__PURE__*/React.createElement(ToastContentStyle, {
+      isNotice: isNotice,
       variant: toastProps.variant,
       isDismiss: onDismiss
     }, children), renderCloseIcon()));
@@ -117,15 +120,17 @@ const Toast = /*#__PURE__*/React.forwardRef(({
 
   return /*#__PURE__*/React.createElement(StyledPortal, {
     id: targetPortalId,
-    isCenter: isCenter
+    isCenter: isCenter,
+    isNotice: isNotice
   }, /*#__PURE__*/React.createElement(ToastWrapper, {
     isCenter: isCenter,
-    ref: refToPass
+    ref: refToPass,
+    isNotice: isNotice
   }, /*#__PURE__*/React.createElement(TransitionGroup, null, renderToastContent())));
 });
 Toast.propTypes = {
   /** Customizes the appearance in the DLS theme */
-  variant: PropTypes.oneOf(["error", "info", "success", "warning"]),
+  variant: PropTypes.oneOf(["error", "info", "success", "warning", "notice"]),
 
   /** Custom className */
   className: PropTypes.string,

package/esm/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/esm/components/toast/toast.style.js

@@ -5,6 +5,7 @@ import TypeIcon from "../message/type-icon/type-icon.style";
 import StyledIconButton from "../icon-button/icon-button.style";
 import Portal from "../portal/portal";
 import baseTheme from "../../style/themes/base";
+import StyledIcon from "../icon/icon.style";
 const StyledPortal = styled(Portal)`
   ${({
   theme
@@ -20,12 +21,21 @@ const StyledPortal = styled(Portal)`
         margin-left: 50%;
         transform: translateX(-50%);
       `}
+
+    ${({
+  isNotice
+}) => isNotice && css`
+        bottom: 0;
+        top: auto;
+        width: 100%;
+      `}
   `}
 `;
 StyledPortal.defaultProps = {
   theme: baseTheme
 };
 const animationName = ".toast";
+const alternativeAnimationName = ".toast-alternative";
 const ToastStyle = styled(MessageStyle)`
   ${({
   maxWidth,
@@ -39,24 +49,23 @@ const ToastStyle = styled(MessageStyle)`
     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;
@@ -68,14 +77,64 @@ const ToastStyle = styled(MessageStyle)`
     top: 50%;
     transform: translateY(-50%);
   }
+
+  ${({
+  isNotice
+}) => isNotice && css`
+      background-color: var(--colorsUtilityMajor400);
+      border: none;
+      color: var(--colorsSemanticNeutralYang100);
+      margin-right: 0;
+      max-width: 100%;
+
+      ${StyledIconButton} {
+        right: 55px;
+      }
+
+      ${StyledIconButton} ${StyledIcon} {
+        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;
+      }
+    `}
 `;
 const ToastContentStyle = styled(MessageContentStyle)`
   padding: 8px 16px 8px 16px;
 
   ${({
-  isDismiss
+  isNotice
+}) => isNotice && css`
+      display: flex;
+      align-items: center;
+      padding: 11px 40px;
+    `}
+
+  ${({
+  isDismiss,
+  isNotice
 }) => isDismiss && css`
-      padding-right: 48px;
+      padding-right: ${isNotice ? "88px" : "48px"};
     `}
 `;
 const ToastWrapper = styled.div`
@@ -88,5 +147,11 @@ const ToastWrapper = styled.div`
       justify-content: center;
       display: flex;
     `}
+
+  ${({
+  isNotice
+}) => isNotice && css`
+      display: block;
+    `}
 `;
 export { ToastStyle, TypeIcon, ToastContentStyle, ToastWrapper, StyledPortal };

package/esm/components/typography/typography.component.js

@@ -254,4 +254,5 @@ Typography.propTypes = {
   /** Apply truncation */
   truncate: PropTypes.bool
 };
+Typography.displayName = "Typography";
 export default Typography;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { StyledContentProps, StyledContentTitleProps, StyledContentBodyProps } from "./content.style";
+export interface ContentProps extends StyledContentProps, StyledContentTitleProps, StyledContentBodyProps {
+    /** The body of the content component */
+    children?: React.ReactNode;
+    /** The title of the content component */
+    title?: React.ReactNode;
+}
+export declare const Content: {
+    ({ variant, children, title, inline, align, titleWidth, bodyFullWidth, ...rest }: ContentProps): JSX.Element;
+    displayName: string;
+};
+export default Content;