carbon-react 111.13.0 → 111.13.2

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

@@ -1,7 +1,7 @@
 import { MarginProps } from "styled-system";
 import { MessageVariant } from "./message.component";
 declare type MessageStyleProps = {
-    variant: MessageVariant;
+    variant?: MessageVariant;
     transparent?: boolean;
 };
 declare const MessageStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;

package/esm/components/message/message.style.js

@@ -15,7 +15,7 @@ const MessageStyle = styled.div`
   align-content: center;
   border: 1px solid ${({
   variant
-}) => messageVariants[variant]};
+}) => variant && messageVariants[variant]};
   background-color: var(--colorsUtilityYang100);
   min-height: 38px;
 

package/esm/components/pager/pager.style.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
+import StyledFormField from "../../__internal__/form-field/form-field.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import StyledSelectText from "../select/__internal__/select-text/select-text.style";
 import Link from "../link";
@@ -88,6 +89,10 @@ const StyledPagerNavInner = styled.div`
   display: flex;
   align-items: center;
   padding: 0 12px;
+
+  && ${StyledFormField} {
+    margin-bottom: 0;
+  }
 `;
 const StyledPagerLinkStyles = styled(Link)`
   padding: 0 10px;

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

@@ -1 +1,2 @@
 export { default } from "./portal";
+export type { PortalProps } from "./portal";

package/esm/components/portal/portal.d.ts

@@ -3,7 +3,7 @@ interface PortalContextProps {
     renderInRoot?: boolean;
 }
 export declare const PortalContext: React.Context<PortalContextProps>;
-interface PortalProps {
+export interface PortalProps {
     /** The content of the portal. */
     children?: React.ReactNode;
     /** Classname attached to portal container. */

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

@@ -1 +1,2 @@
-export { default } from "./toast";
+export { default } from "./toast.component";
+export type { ToastProps } from "./toast.component";

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

@@ -0,0 +1,30 @@
+import React from "react";
+declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice";
+export interface ToastProps {
+    /** The rendered children of the component. */
+    children: React.ReactNode;
+    /** Customizes the appearance in the DLS theme */
+    variant?: ToastVariants;
+    /** Custom className */
+    className?: string;
+    /** Custom id  */
+    id?: string;
+    /** Component name */
+    "data-component"?: string;
+    /** Determines if the Toast is open. */
+    open?: boolean;
+    /** Callback for when dismissed. */
+    onDismiss?: (ev?: KeyboardEvent | React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Time for Toast to remain on screen */
+    timeout?: string | number;
+    /** Centers the Toast on the screen */
+    isCenter?: boolean;
+    /** Target Portal ID where the Toast will render */
+    targetPortalId?: string;
+    /** Maximum toast width */
+    maxWidth?: string;
+    /** Disables auto focus functionality when the Toast has a close icon */
+    disableAutoFocus?: boolean;
+}
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+export default Toast;

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

@@ -1,9 +1,8 @@
 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, useState } from "react";
-import classNames from "classnames";
-import { TransitionGroup, CSSTransition } from "react-transition-group";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { ToastStyle, TypeIcon, ToastContentStyle, ToastWrapper, StyledPortal } from "./toast.style";
@@ -21,22 +20,24 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   open = true,
   targetPortalId,
   timeout,
-  variant,
+  variant = "success",
   disableAutoFocus,
   ...restProps
 }, ref) => {
   const isNotice = variant === "notice";
   const locale = useLocale();
-  const toastRef = useRef();
-  const timer = useRef();
-  const toastContentNodeRef = useRef();
-  const closeIconRef = useRef();
-  const focusedElementBeforeOpening = useRef();
+  const toastRef = useRef(null);
+  const timer = useRef(null);
+  const toastContentNodeRef = useRef(null);
+  const closeIconRef = useRef(null);
+  const focusedElementBeforeOpening = useRef(null);
   const [tabIndex, setTabIndex] = useState(0);
-  const refToPass = ref || toastRef;
-  const componentClasses = useMemo(() => {
-    return classNames(className);
-  }, [className]);
+  let refToPass = toastRef;
+
+  if (ref && typeof ref === "object" && "current" in ref) {
+    refToPass = ref;
+  }
+
   const dismissToast = useCallback(ev => {
     if (onDismiss && Events.isEscKey(ev)) {
       ev.stopImmediatePropagation();
@@ -45,13 +46,14 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   }, [onDismiss]);
   useModalManager(open, dismissToast, refToPass);
   useEffect(() => {
-    clearTimeout(timer.current);
+    /* istanbul ignore next */
+    if (timer.current) clearTimeout(timer.current);
 
     if (!timeout || !open || !onDismiss) {
       return;
     }
 
-    timer.current = setTimeout(() => onDismiss(), timeout);
+    timer.current = setTimeout(() => onDismiss(), +timeout);
   }, [onDismiss, open, timeout]);
   useEffect(() => {
     if (!disableAutoFocus) {
@@ -62,7 +64,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
         (_toastContentNodeRef$ = toastContentNodeRef.current) === null || _toastContentNodeRef$ === void 0 ? void 0 : _toastContentNodeRef$.focus();
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
-        focusedElementBeforeOpening.current = undefined;
+        focusedElementBeforeOpening.current = null;
         setTabIndex(0);
       }
     }
@@ -89,12 +91,12 @@ const Toast = /*#__PURE__*/React.forwardRef(({
 
   function renderToastContent() {
     if (!open) return null;
-    const toastProps = {
-      isCenter,
-      variant: variant || "success",
-      id,
-      maxWidth
-    };
+    let toastVariant;
+
+    if (variant !== "notice") {
+      toastVariant = variant;
+    }
+
     return /*#__PURE__*/React.createElement(CSSTransition, {
       enter: true,
       classNames: isNotice ? "toast-alternative" : "toast",
@@ -106,20 +108,23 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       nodeRef: toastContentNodeRef
     }, /*#__PURE__*/React.createElement(ToastStyle, _extends({
       isNotice: isNotice,
-      className: componentClasses
-    }, tagComponent(restProps["data-component"] || "toast", restProps), toastProps, {
+      className: className
+    }, tagComponent(restProps["data-component"] || "toast", restProps), {
+      isCenter: isCenter,
+      variant: toastVariant,
+      id: id,
+      maxWidth: maxWidth,
       ref: toastContentNodeRef
     }, !disableAutoFocus && {
       tabIndex,
       onBlur: () => setTabIndex(undefined)
-    }), !isNotice && /*#__PURE__*/React.createElement(TypeIcon, {
-      variant: toastProps.variant
+    }), variant !== "notice" && /*#__PURE__*/React.createElement(TypeIcon, {
+      variant: variant
     }, /*#__PURE__*/React.createElement(Icon, {
-      type: toastProps.variant
+      type: variant
     })), /*#__PURE__*/React.createElement(ToastContentStyle, {
       isNotice: isNotice,
-      variant: toastProps.variant,
-      isDismiss: onDismiss
+      isDismiss: !!onDismiss
     }, children), renderCloseIcon()));
   }
 
@@ -134,40 +139,19 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(TransitionGroup, null, renderToastContent())));
 });
 Toast.propTypes = {
-  /** Customizes the appearance in the DLS theme */
-  variant: PropTypes.oneOf(["error", "info", "success", "warning", "notice"]),
-
-  /** Custom className */
-  className: PropTypes.string,
-
-  /** Custom id  */
-  id: PropTypes.string,
-
-  /** Component name */
+  "children": PropTypes.node,
+  "className": PropTypes.string,
   "data-component": PropTypes.string,
-
-  /** The rendered children of the component. */
-  children: PropTypes.node,
-
-  /** Determines if the Toast is open. */
-  open: PropTypes.bool,
-
-  /** Callback for when dismissed. */
-  onDismiss: PropTypes.func,
-
-  /** Time for Toast to remain on screen */
-  timeout: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /** Centers the Toast on the screen */
-  isCenter: PropTypes.bool,
-
-  /** Target Portal ID where the Toast will render */
-  targetPortalId: PropTypes.string,
-
-  /** Maximum toast width */
-  maxWidth: PropTypes.string,
-
-  /** Disables auto focus functionality when the Toast has a close icon */
-  disableAutoFocus: PropTypes.bool
+  "disableAutoFocus": PropTypes.bool,
+  "id": PropTypes.string,
+  "isCenter": PropTypes.bool,
+  "maxWidth": PropTypes.string,
+  "onDismiss": PropTypes.func,
+  "open": PropTypes.bool,
+  "targetPortalId": PropTypes.string,
+  "timeout": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "variant": PropTypes.oneOf(["error", "info", "notice", "success", "warning"])
 };
+export { Toast };
+Toast.displayName = "Toast";
 export default Toast;

package/esm/components/toast/toast.config.d.ts

@@ -0,0 +1 @@
+export declare const TOAST_COLORS: string[];

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import TypeIcon from "../message/type-icon/type-icon.style";
+declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => JSX.Element, any, {
+    isCenter?: boolean | undefined;
+    isNotice?: boolean | undefined;
+}, never>;
+declare const ToastStyle: import("styled-components").StyledComponent<"div", any, {
+    variant?: import("../message/message.component").MessageVariant | undefined;
+    transparent?: boolean | undefined;
+} & import("styled-system").MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    maxWidth?: string | undefined;
+    isCenter?: boolean | undefined;
+    isNotice?: boolean | undefined;
+}, never>;
+declare const ToastContentStyle: import("styled-components").StyledComponent<"div", any, {
+    isNotice?: boolean | undefined;
+    isDismiss?: boolean | undefined;
+}, never>;
+declare const ToastWrapper: import("styled-components").StyledComponent<"div", any, {
+    isCenter?: boolean | undefined;
+    isNotice?: boolean | undefined;
+}, never>;
+export { ToastStyle, TypeIcon, ToastContentStyle, ToastWrapper, StyledPortal };

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

@@ -8,27 +8,25 @@ import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 const StyledPortal = styled(Portal)`
   ${({
-  theme
+  theme,
+  isCenter,
+  isNotice
 }) => css`
     position: fixed;
     top: 0;
 
     z-index: ${theme.zIndex.notification};
 
-    ${({
-  isCenter
-}) => isCenter && css`
-        margin-left: 50%;
-        transform: translateX(-50%);
-      `}
+    ${isCenter && css`
+      margin-left: 50%;
+      transform: translateX(-50%);
+    `}
 
-    ${({
-  isNotice
-}) => isNotice && css`
-        bottom: 0;
-        top: auto;
-        width: 100%;
-      `}
+    ${isNotice && css`
+      bottom: 0;
+      top: auto;
+      width: 100%;
+    `}
   `}
 `;
 StyledPortal.defaultProps = {

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

@@ -1,7 +1,7 @@
 import { MarginProps } from "styled-system";
 import { MessageVariant } from "./message.component";
 declare type MessageStyleProps = {
-    variant: MessageVariant;
+    variant?: MessageVariant;
     transparent?: boolean;
 };
 declare const MessageStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;

package/lib/components/message/message.style.js

@@ -32,7 +32,7 @@ const MessageStyle = _styledComponents.default.div`
   align-content: center;
   border: 1px solid ${({
   variant
-}) => messageVariants[variant]};
+}) => variant && messageVariants[variant]};
   background-color: var(--colorsUtilityYang100);
   min-height: 38px;
 

package/lib/components/pager/pager.style.js

@@ -11,6 +11,8 @@ var _input = _interopRequireDefault(require("../../__internal__/input/input.styl
 
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 
+var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
+
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
 
 var _selectText = _interopRequireDefault(require("../select/__internal__/select-text/select-text.style"));
@@ -112,6 +114,10 @@ const StyledPagerNavInner = _styledComponents.default.div`
   display: flex;
   align-items: center;
   padding: 0 12px;
+
+  && ${_formField.default} {
+    margin-bottom: 0;
+  }
 `;
 exports.StyledPagerNavInner = StyledPagerNavInner;
 const StyledPagerLinkStyles = (0, _styledComponents.default)(_link.default)`

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

@@ -1 +1,2 @@
 export { default } from "./portal";
+export type { PortalProps } from "./portal";

package/lib/components/portal/portal.d.ts

@@ -3,7 +3,7 @@ interface PortalContextProps {
     renderInRoot?: boolean;
 }
 export declare const PortalContext: React.Context<PortalContextProps>;
-interface PortalProps {
+export interface PortalProps {
     /** The content of the portal. */
     children?: React.ReactNode;
     /** Classname attached to portal container. */

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

@@ -1 +1,2 @@
-export { default } from "./toast";
+export { default } from "./toast.component";
+export type { ToastProps } from "./toast.component";

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

@@ -0,0 +1,30 @@
+import React from "react";
+declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice";
+export interface ToastProps {
+    /** The rendered children of the component. */
+    children: React.ReactNode;
+    /** Customizes the appearance in the DLS theme */
+    variant?: ToastVariants;
+    /** Custom className */
+    className?: string;
+    /** Custom id  */
+    id?: string;
+    /** Component name */
+    "data-component"?: string;
+    /** Determines if the Toast is open. */
+    open?: boolean;
+    /** Callback for when dismissed. */
+    onDismiss?: (ev?: KeyboardEvent | React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Time for Toast to remain on screen */
+    timeout?: string | number;
+    /** Centers the Toast on the screen */
+    isCenter?: boolean;
+    /** Target Portal ID where the Toast will render */
+    targetPortalId?: string;
+    /** Maximum toast width */
+    maxWidth?: string;
+    /** Disables auto focus functionality when the Toast has a close icon */
+    disableAutoFocus?: boolean;
+}
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+export default Toast;

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

@@ -3,16 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Toast = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icon = _interopRequireDefault(require("../icon"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
@@ -45,22 +43,24 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   open = true,
   targetPortalId,
   timeout,
-  variant,
+  variant = "success",
   disableAutoFocus,
   ...restProps
 }, ref) => {
   const isNotice = variant === "notice";
   const locale = (0, _useLocale.default)();
-  const toastRef = (0, _react.useRef)();
-  const timer = (0, _react.useRef)();
-  const toastContentNodeRef = (0, _react.useRef)();
-  const closeIconRef = (0, _react.useRef)();
-  const focusedElementBeforeOpening = (0, _react.useRef)();
+  const toastRef = (0, _react.useRef)(null);
+  const timer = (0, _react.useRef)(null);
+  const toastContentNodeRef = (0, _react.useRef)(null);
+  const closeIconRef = (0, _react.useRef)(null);
+  const focusedElementBeforeOpening = (0, _react.useRef)(null);
   const [tabIndex, setTabIndex] = (0, _react.useState)(0);
-  const refToPass = ref || toastRef;
-  const componentClasses = (0, _react.useMemo)(() => {
-    return (0, _classnames.default)(className);
-  }, [className]);
+  let refToPass = toastRef;
+
+  if (ref && typeof ref === "object" && "current" in ref) {
+    refToPass = ref;
+  }
+
   const dismissToast = (0, _react.useCallback)(ev => {
     if (onDismiss && _events.default.isEscKey(ev)) {
       ev.stopImmediatePropagation();
@@ -69,13 +69,14 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   }, [onDismiss]);
   (0, _useModalManager.default)(open, dismissToast, refToPass);
   (0, _react.useEffect)(() => {
-    clearTimeout(timer.current);
+    /* istanbul ignore next */
+    if (timer.current) clearTimeout(timer.current);
 
     if (!timeout || !open || !onDismiss) {
       return;
     }
 
-    timer.current = setTimeout(() => onDismiss(), timeout);
+    timer.current = setTimeout(() => onDismiss(), +timeout);
   }, [onDismiss, open, timeout]);
   (0, _react.useEffect)(() => {
     if (!disableAutoFocus) {
@@ -86,7 +87,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
         (_toastContentNodeRef$ = toastContentNodeRef.current) === null || _toastContentNodeRef$ === void 0 ? void 0 : _toastContentNodeRef$.focus();
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
-        focusedElementBeforeOpening.current = undefined;
+        focusedElementBeforeOpening.current = null;
         setTabIndex(0);
       }
     }
@@ -113,12 +114,12 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
 
   function renderToastContent() {
     if (!open) return null;
-    const toastProps = {
-      isCenter,
-      variant: variant || "success",
-      id,
-      maxWidth
-    };
+    let toastVariant;
+
+    if (variant !== "notice") {
+      toastVariant = variant;
+    }
+
     return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
       enter: true,
       classNames: isNotice ? "toast-alternative" : "toast",
@@ -130,20 +131,23 @@ 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, {
+      className: className
+    }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), {
+      isCenter: isCenter,
+      variant: toastVariant,
+      id: id,
+      maxWidth: maxWidth,
       ref: toastContentNodeRef
     }, !disableAutoFocus && {
       tabIndex,
       onBlur: () => setTabIndex(undefined)
-    }), !isNotice && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
-      variant: toastProps.variant
+    }), variant !== "notice" && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
+      variant: variant
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: toastProps.variant
+      type: variant
     })), /*#__PURE__*/_react.default.createElement(_toast.ToastContentStyle, {
       isNotice: isNotice,
-      variant: toastProps.variant,
-      isDismiss: onDismiss
+      isDismiss: !!onDismiss
     }, children), renderCloseIcon()));
   }
 
@@ -158,42 +162,21 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, renderToastContent())));
 });
 
+exports.Toast = Toast;
 Toast.propTypes = {
-  /** Customizes the appearance in the DLS theme */
-  variant: _propTypes.default.oneOf(["error", "info", "success", "warning", "notice"]),
-
-  /** Custom className */
-  className: _propTypes.default.string,
-
-  /** Custom id  */
-  id: _propTypes.default.string,
-
-  /** Component name */
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
   "data-component": _propTypes.default.string,
-
-  /** The rendered children of the component. */
-  children: _propTypes.default.node,
-
-  /** Determines if the Toast is open. */
-  open: _propTypes.default.bool,
-
-  /** Callback for when dismissed. */
-  onDismiss: _propTypes.default.func,
-
-  /** Time for Toast to remain on screen */
-  timeout: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /** Centers the Toast on the screen */
-  isCenter: _propTypes.default.bool,
-
-  /** Target Portal ID where the Toast will render */
-  targetPortalId: _propTypes.default.string,
-
-  /** Maximum toast width */
-  maxWidth: _propTypes.default.string,
-
-  /** Disables auto focus functionality when the Toast has a close icon */
-  disableAutoFocus: _propTypes.default.bool
+  "disableAutoFocus": _propTypes.default.bool,
+  "id": _propTypes.default.string,
+  "isCenter": _propTypes.default.bool,
+  "maxWidth": _propTypes.default.string,
+  "onDismiss": _propTypes.default.func,
+  "open": _propTypes.default.bool,
+  "targetPortalId": _propTypes.default.string,
+  "timeout": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "variant": _propTypes.default.oneOf(["error", "info", "notice", "success", "warning"])
 };
+Toast.displayName = "Toast";
 var _default = Toast;
 exports.default = _default;

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

@@ -0,0 +1 @@
+export declare const TOAST_COLORS: string[];

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import TypeIcon from "../message/type-icon/type-icon.style";
+declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => JSX.Element, any, {
+    isCenter?: boolean | undefined;
+    isNotice?: boolean | undefined;
+}, never>;
+declare const ToastStyle: import("styled-components").StyledComponent<"div", any, {
+    variant?: import("../message/message.component").MessageVariant | undefined;
+    transparent?: boolean | undefined;
+} & import("styled-system").MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    maxWidth?: string | undefined;
+    isCenter?: boolean | undefined;
+    isNotice?: boolean | undefined;
+}, never>;
+declare const ToastContentStyle: import("styled-components").StyledComponent<"div", any, {
+    isNotice?: boolean | undefined;
+    isDismiss?: boolean | undefined;
+}, never>;
+declare const ToastWrapper: import("styled-components").StyledComponent<"div", any, {
+    isCenter?: boolean | undefined;
+    isNotice?: boolean | undefined;
+}, never>;
+export { ToastStyle, TypeIcon, ToastContentStyle, ToastWrapper, StyledPortal };

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

@@ -35,27 +35,25 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledPortal = (0, _styledComponents.default)(_portal.default)`
   ${({
-  theme
+  theme,
+  isCenter,
+  isNotice
 }) => (0, _styledComponents.css)`
     position: fixed;
     top: 0;
 
     z-index: ${theme.zIndex.notification};
 
-    ${({
-  isCenter
-}) => isCenter && (0, _styledComponents.css)`
-        margin-left: 50%;
-        transform: translateX(-50%);
-      `}
+    ${isCenter && (0, _styledComponents.css)`
+      margin-left: 50%;
+      transform: translateX(-50%);
+    `}
 
-    ${({
-  isNotice
-}) => isNotice && (0, _styledComponents.css)`
-        bottom: 0;
-        top: auto;
-        width: 100%;
-      `}
+    ${isNotice && (0, _styledComponents.css)`
+      bottom: 0;
+      top: auto;
+      width: 100%;
+    `}
   `}
 `;
 exports.StyledPortal = StyledPortal;

package/package.json

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

package/esm/components/toast/toast.d.ts

@@ -1,36 +0,0 @@
-import * as React from "react";
-
-type ToastVariants = "error" | "info" | "success" | "warning" | "notice";
-
-export interface ToastPropTypes {
-  /** The rendered children of the component. */
-  children: React.ReactNode;
-  /** Customizes the appearance in the DLS theme */
-  variant?: ToastVariants;
-  /** Custom className */
-  className?: string;
-  /** Custom id  */
-  id?: string;
-  /** Component name */
-  "data-component"?: string;
-  /** Determines if the Toast is open. */
-  open?: boolean;
-  /** Callback for when dismissed. */
-  onDismiss?: () => void;
-  /** Time for Toast to remain on screen */
-  timeout?: string | number;
-  /** Centers the Toast on the screen */
-  isCenter?: boolean;
-  /** Target Portal ID where the Toast will render */
-  targetPortalId?: string;
-  /** Maximum toast width */
-  maxWidth?: string;
-  /** Disables auto focus functionality when the Toast has a close icon */
-  disableAutoFocus?: boolean;
-}
-
-declare function Toast(
-  props: ToastPropTypes & React.RefAttributes<HTMLDivElement>
-): JSX.Element;
-
-export default Toast;

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

@@ -1,36 +0,0 @@
-import * as React from "react";
-
-type ToastVariants = "error" | "info" | "success" | "warning" | "notice";
-
-export interface ToastPropTypes {
-  /** The rendered children of the component. */
-  children: React.ReactNode;
-  /** Customizes the appearance in the DLS theme */
-  variant?: ToastVariants;
-  /** Custom className */
-  className?: string;
-  /** Custom id  */
-  id?: string;
-  /** Component name */
-  "data-component"?: string;
-  /** Determines if the Toast is open. */
-  open?: boolean;
-  /** Callback for when dismissed. */
-  onDismiss?: () => void;
-  /** Time for Toast to remain on screen */
-  timeout?: string | number;
-  /** Centers the Toast on the screen */
-  isCenter?: boolean;
-  /** Target Portal ID where the Toast will render */
-  targetPortalId?: string;
-  /** Maximum toast width */
-  maxWidth?: string;
-  /** Disables auto focus functionality when the Toast has a close icon */
-  disableAutoFocus?: boolean;
-}
-
-declare function Toast(
-  props: ToastPropTypes & React.RefAttributes<HTMLDivElement>
-): JSX.Element;
-
-export default Toast;