carbon-react 144.14.0 → 144.16.0

package/esm/components/button/button.component.js

@@ -9,6 +9,8 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import ButtonBarContext from "../button-bar/__internal__/button-bar.context";
 import SplitButtonContext from "../split-button/__internal__/split-button.context";
 import BatchSelectionContext from "../batch-selection/__internal__/batch-selection.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 function renderChildren({
   /* eslint-disable react/prop-types */
   iconType,
@@ -82,6 +84,10 @@ const Button = /*#__PURE__*/React.forwardRef(({
   target,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Button' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const {
     buttonType: buttonTypeContext,
     size: sizeContext,

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -12,7 +12,9 @@ import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Events from "../../../__internal__/utils/helpers/events";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ButtonToggleGroupContext from "./__internal__/button-toggle-group.context";
+import Logger from "../../../__internal__/utils/logger";
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
+let deprecatedClassNameWarningShown = false;
 const ButtonToggleGroup = ({
   children,
   fieldHelp,
@@ -38,6 +40,10 @@ const ButtonToggleGroup = ({
   className,
   ...props
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'ButtonToggleGroup' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const hasCorrectItemStructure = useMemo(() => {
     const incorrectChild = React.Children.toArray(children).find(child => {
       return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== ButtonToggle.displayName;

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

@@ -25,7 +25,7 @@ export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onB
     onChange?: (ev: CustomEvent) => void;
     /** Handler for blur event */
     onBlur?: (ev: CustomEvent) => void;
-    /** Handler for key press event */
+    /** [Deprecated] Handler for key press event */
     onKeyPress?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
     /** The input name */
     name?: string;

package/esm/components/decimal/decimal.component.js

@@ -7,6 +7,7 @@ import LocaleContext from "../../__internal__/i18n-context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import Logger from "../../__internal__/utils/logger";
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateOnKeyPressWarnTriggered = false;
 const Decimal = /*#__PURE__*/React.forwardRef(({
   align = "right",
   defaultValue,
@@ -166,6 +167,10 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecateOnKeyPressWarnTriggered && onKeyPress) {
+    deprecateOnKeyPressWarnTriggered = true;
+    Logger.deprecate("`onKeyPress` prop in `Decimal` is deprecated and will soon be removed, please use `onKeyDown` instead.");
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textbox, _extends({
     onKeyPress: onKeyPress,
     align: align,

package/esm/components/detail/detail.component.js

@@ -4,24 +4,32 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledDetail, StyledDetailContent, StyledDetailIcon, StyledDetailFootnote } from "./detail.style";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 export const Detail = ({
   className,
   icon,
   footnote,
   children,
   ...rest
-}) => /*#__PURE__*/React.createElement(StyledDetail, _extends({
-  className: `carbon-detail ${className}`
-}, tagComponent("detail", rest), filterStyledSystemMarginProps(rest)), icon && /*#__PURE__*/React.createElement(StyledDetailIcon, {
-  type: icon,
-  "data-element": "icon"
-}), /*#__PURE__*/React.createElement(StyledDetailContent, {
-  "data-element": "detail-content",
-  hasIcon: !!icon
-}, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
-  "data-element": "footnote",
-  "data-role": "footnote",
-  hasIcon: !!icon
-}, footnote));
+}) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Detail' component.");
+    deprecatedClassNameWarningShown = true;
+  }
+  return /*#__PURE__*/React.createElement(StyledDetail, _extends({
+    className: `carbon-detail ${className}`
+  }, tagComponent("detail", rest), filterStyledSystemMarginProps(rest)), icon && /*#__PURE__*/React.createElement(StyledDetailIcon, {
+    type: icon,
+    "data-element": "icon"
+  }), /*#__PURE__*/React.createElement(StyledDetailContent, {
+    "data-element": "detail-content",
+    hasIcon: !!icon
+  }, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
+    "data-element": "footnote",
+    "data-role": "footnote",
+    hasIcon: !!icon
+  }, footnote));
+};
 Detail.displayName = "Detail";
 export default Detail;

package/esm/components/dialog/dialog.component.js

@@ -5,6 +5,7 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
 import Heading from "../heading";
 import tagComponent from "../../__internal__/utils/helpers/tags";
+import Logger from "../../__internal__/utils/logger";
 import { StyledDialog, StyledDialogTitle, StyledDialogContent, DialogPositioner } from "./dialog.style";
 import FocusTrap from "../../__internal__/focus-trap";
 import IconButton from "../icon-button";
@@ -12,6 +13,7 @@ import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+let deprecatedClassNameWarningShown = false;
 const Dialog = /*#__PURE__*/forwardRef(({
   className,
   "data-component": dataComponent = "dialog",
@@ -40,6 +42,10 @@ const Dialog = /*#__PURE__*/forwardRef(({
   closeButtonDataProps,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Dialog' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const locale = useLocale();
   const containerRef = useRef(null);
   const titleRef = useRef(null);

package/esm/components/grouped-character/grouped-character.component.js

@@ -27,6 +27,7 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
   groups,
   onBlur,
   onChange,
+  onKeyDown,
   separator: rawSeparator,
   value: externalValue,
   ...rest
@@ -90,7 +91,7 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
       onBlur(modifiedEvent);
     }
   };
-  const handleKeyPress = ev => {
+  const handleKeyDown = ev => {
     const {
       selectionStart,
       selectionEnd
@@ -98,16 +99,22 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
 
     /* istanbul ignore next */
     const hasSelection = (selectionEnd ?? 0) - (selectionStart ?? 0) > 0;
-    if (maxRawLength === value.length && !hasSelection) {
+
+    // check if the key pressed is a character key
+    const isCharacterKey = ev.key.length === 1;
+    if (isCharacterKey && maxRawLength === value.length && !hasSelection) {
       ev.preventDefault();
     }
+    if (onKeyDown) {
+      onKeyDown(ev);
+    }
   };
   return /*#__PURE__*/React.createElement(Textbox, _extends({}, rest, {
     value: value,
     formattedValue: formatValue(value),
     onChange: handleChange,
     onBlur: handleBlur,
-    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyDown,
     ref: ref
   }));
 });

package/esm/components/help/help.component.js

@@ -8,6 +8,8 @@ import Events from "../../__internal__/utils/helpers/events";
 import { TooltipContext } from "../../__internal__/tooltip-provider";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import guid from "../../__internal__/utils/helpers/guid";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Help = ({
   as,
   ariaLabel = "help",
@@ -25,6 +27,10 @@ const Help = ({
   type = "help",
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Help' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const defaultTooltipId = useRef(guid());
   const helpElement = useRef(null);
   const [isTooltipVisible, updateTooltipVisible] = useState(false);

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

@@ -6,6 +6,8 @@ import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from ".
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const columnWrapper = (children, gutter) => {
   return React.Children.map(children, input => {
     return /*#__PURE__*/React.createElement(StyledInlineInput, {
@@ -30,6 +32,10 @@ const InlineInputs = ({
   isOptional,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'InlineInputs' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   const ref = useRef(null);
   let inlineLabel = labelInline;

package/esm/components/link/link.component.js

@@ -7,6 +7,8 @@ import { StyledLink, StyledContent } from "./link.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useLocale from "../../hooks/__internal__/useLocale";
 import BatchSelectionContext from "../batch-selection/__internal__/batch-selection.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Link = /*#__PURE__*/React.forwardRef(({
   children,
   className,
@@ -29,6 +31,10 @@ const Link = /*#__PURE__*/React.forwardRef(({
   removeAriaLabelOnIcon,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Link' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [hasFocus, setHasFocus] = useState(false);
   const l = useLocale();
   const {

package/esm/components/menu/menu-item/menu-item.component.js

@@ -10,6 +10,8 @@ import Submenu from "../__internal__/submenu/submenu.component";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
 import { StyledMenuItem } from "../menu.style";
 import guid from "../../../__internal__/utils/helpers/guid";
+import Logger from "../../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 export const MenuItem = ({
   submenu,
   submenuMaxWidth,
@@ -35,6 +37,10 @@ export const MenuItem = ({
   "data-role": dataRole,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'MenuItem' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   !(icon || children) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `icon` must be defined or this node must have `children`.") : invariant(false) : void 0;
   !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : invariant(false) : void 0;
   !(typeof submenu === "boolean" || submenu === undefined || children && typeof submenu === "string" && submenu.length) ? process.env.NODE_ENV !== "production" ? invariant(false, "You should not pass `children` when `submenu` is an empty string") : invariant(false) : void 0;

package/esm/components/message/message.component.js

@@ -10,6 +10,8 @@ import Icon from "../icon";
 import IconButton from "../icon-button";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Message = /*#__PURE__*/React.forwardRef(({
   open = true,
   transparent = false,
@@ -23,6 +25,10 @@ const Message = /*#__PURE__*/React.forwardRef(({
   showCloseIcon = true,
   ...props
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Message' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const messageRef = useRef(null);
   const refToPass = ref || messageRef;
   const marginProps = filterStyledSystemMarginProps(props);

package/esm/components/modal/modal.component.js

@@ -8,6 +8,8 @@ import Events from "../../__internal__/utils/helpers/events";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 import { StyledModal, StyledModalBackground } from "./modal.style";
 import ModalContext from "./__internal__/modal.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Modal = ({
   children,
   "data-element": dataElement,
@@ -21,6 +23,10 @@ const Modal = ({
   topModalOverride,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Modal' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const ref = useRef(null);
   const backgroundNodeRef = useRef(null);
   const contentNodeRef = useRef(null);

package/esm/components/pod/pod.component.js

@@ -2,9 +2,11 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useState, useMemo } from "react";
 import PropTypes from "prop-types";
 import useLocale from "../../hooks/__internal__/useLocale";
+import Logger from "../../__internal__/utils/logger";
 import { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle } from "./pod.style";
 import Icon from "../icon";
 import Event from "../../__internal__/utils/helpers/events";
+let deprecatedClassNameWarningShown = false;
 const Pod = /*#__PURE__*/React.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
@@ -28,6 +30,10 @@ const Pod = /*#__PURE__*/React.forwardRef(({
   variant = "primary",
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Pod' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [isEditFocused, setEditFocused] = useState(false);
   const [isEditHovered, setEditHovered] = useState(false);
   const [isDeleteFocused, setDeleteFocused] = useState(false);

package/esm/components/portal/portal.js

@@ -5,6 +5,8 @@ import guid from "../../__internal__/utils/helpers/guid";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 import StyledPortalEntrance from "./portal.style";
 import PortalContext from "./__internal__/portal.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Container = styled.div`
   ${({
   theme
@@ -22,6 +24,10 @@ export const Portal = ({
   onReposition,
   inertOptOut
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Portal' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [portalNode, setPortalNode] = useState(null);
   const uniqueId = useMemo(() => guid(), []);
   const {

package/esm/components/profile/profile.component.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle } from "./profile.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 function acronymize(str) {
   if (!str) return "";
   const matches = str.match(/\b\w/g);
@@ -23,6 +25,10 @@ export const Profile = ({
   darkBackground,
   ...props
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Profile' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const getInitials = () => {
     if (initials) return initials;
     return acronymize(name).slice(0, 3).toUpperCase();

package/esm/components/settings-row/settings-row.component.js

@@ -4,7 +4,9 @@ import PropTypes from "prop-types";
 import Heading from "../heading";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import Logger from "../../__internal__/utils/logger";
 import { StyledSettingsRow, StyledSettingsRowHeader, StyledSettingsRowInput } from "./settings-row.style";
+let deprecatedClassNameWarningShown = false;
 export const SettingsRow = ({
   title,
   headingType = "h3",
@@ -14,6 +16,10 @@ export const SettingsRow = ({
   className,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'SettingsRow' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const heading = () => {
     if (!title) return null;
     return /*#__PURE__*/React.createElement(Heading, {

package/esm/components/simple-color-picker/simple-color/simple-color.component.js

@@ -4,7 +4,13 @@ import PropTypes from "prop-types";
 import guid from "../../../__internal__/utils/helpers/guid";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import { StyledSimpleColor, StyledColorSampleBox, StyledTickIcon, StyledSimpleColorInput } from "./simple-color.style";
+import Logger from "../../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
+  if (!deprecatedClassNameWarningShown && props.className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'SimpleColor' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const {
     onChange,
     onBlur,

package/esm/components/tabs/tab/tab.component.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import StyledTab from "./tab.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import TabContext from "./__internal__/tab.context";
+import Logger from "../../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 export const Tab = ({
   ariaLabelledby,
   className,
@@ -24,6 +26,10 @@ export const Tab = ({
   titleProps,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Tab' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [tabErrors, setTabErrors] = useState({});
   const [tabWarnings, setTabWarnings] = useState({});
   const [tabInfos, setTabInfos] = useState({});

package/esm/components/tabs/tabs.component.js

@@ -8,6 +8,8 @@ import StyledTabs from "./tabs.style";
 import TabsHeader from "./__internal__/tabs-header";
 import TabTitle from "./__internal__/tab-title";
 import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 const Tabs = ({
   align = "left",
   className,
@@ -25,6 +27,10 @@ const Tabs = ({
   showValidationsSummary,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Tabs' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   if (position !== "left" && headerWidth !== undefined) {
     // eslint-disable-next-line no-console
     console.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");

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

@@ -7,8 +7,10 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import Button from "../button";
 import Box from "../box";
 import Accordion from "./__internal__/accordion";
+import Logger from "../../__internal__/utils/logger";
 import { StyledTileSelectContainer, StyledTileSelect, StyledTileSelectInput, StyledTitleContainer, StyledTitle, StyledSubtitle, StyledAdornment, StyledDescription, StyledDeselectWrapper, StyledFooterWrapper, StyledFocusWrapper, StyledAccordionFooterWrapper } from "./tile-select.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+let deprecatedClassNameWarningShown = false;
 const checkPropTypeIsNode = prop => typeof prop !== "string";
 const TileSelect = /*#__PURE__*/React.forwardRef(({
   onChange,
@@ -35,6 +37,10 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
   accordionExpanded,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'TileSelect' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const l = useLocale();
   const [hasFocus, setHasFocus] = useState(false);
   const handleDeselect = () => onChange?.({

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

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
+import Logger from "../../__internal__/utils/logger";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledToast, TypeIcon, StyledToastContent, ToastWrapper, StyledPortal } from "./toast.style";
@@ -11,6 +12,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 import guid from "../../__internal__/utils/helpers/guid";
 import Typography from "../typography";
+let deprecatedClassNameWarningShown = false;
 const Toast = /*#__PURE__*/React.forwardRef(({
   align = "center",
   alignY,
@@ -27,6 +29,10 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   closeButtonDataProps,
   ...restProps
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Toast' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const isNotice = variant === "notice";
   const isNotification = variant === "notification";
   const locale = useLocale();

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

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
 import StyledTypography from "./typography.style";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedClassNameWarningShown = false;
 export const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export const Typography = ({
   "data-component": dataComponent,
@@ -34,6 +36,10 @@ export const Typography = ({
   "aria-hidden": ariaHidden,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Typography' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   return /*#__PURE__*/React.createElement(StyledTypography, _extends({
     variant: variant,
     as: as,

package/lib/components/button/button.component.js

@@ -14,10 +14,12 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _buttonBar = _interopRequireDefault(require("../button-bar/__internal__/button-bar.context"));
 var _splitButton = _interopRequireDefault(require("../split-button/__internal__/split-button.context"));
 var _batchSelection = _interopRequireDefault(require("../batch-selection/__internal__/batch-selection.context"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 function renderChildren({
   /* eslint-disable react/prop-types */
   iconType,
@@ -91,6 +93,10 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
   target,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Button' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const {
     buttonType: buttonTypeContext,
     size: sizeContext,

package/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -17,11 +17,13 @@ var _inputBehaviour = require("../../../__internal__/input-behaviour");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _buttonToggleGroup2 = _interopRequireDefault(require("./__internal__/button-toggle-group.context"));
+var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
+let deprecatedClassNameWarningShown = false;
 const ButtonToggleGroup = ({
   children,
   fieldHelp,
@@ -47,6 +49,10 @@ const ButtonToggleGroup = ({
   className,
   ...props
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'ButtonToggleGroup' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const hasCorrectItemStructure = (0, _react.useMemo)(() => {
     const incorrectChild = _react.default.Children.toArray(children).find(child => {
       return ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== _.ButtonToggle.displayName;

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

@@ -25,7 +25,7 @@ export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onB
     onChange?: (ev: CustomEvent) => void;
     /** Handler for blur event */
     onBlur?: (ev: CustomEvent) => void;
-    /** Handler for key press event */
+    /** [Deprecated] Handler for key press event */
     onKeyPress?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
     /** The input name */
     name?: string;

package/lib/components/decimal/decimal.component.js

@@ -16,6 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateOnKeyPressWarnTriggered = false;
 const Decimal = exports.Decimal = /*#__PURE__*/_react.default.forwardRef(({
   align = "right",
   defaultValue,
@@ -175,6 +176,10 @@ const Decimal = exports.Decimal = /*#__PURE__*/_react.default.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecateOnKeyPressWarnTriggered && onKeyPress) {
+    deprecateOnKeyPressWarnTriggered = true;
+    _logger.default.deprecate("`onKeyPress` prop in `Decimal` is deprecated and will soon be removed, please use `onKeyDown` instead.");
+  }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
     onKeyPress: onKeyPress,
     align: align,

package/lib/components/detail/detail.component.js

@@ -9,27 +9,35 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../style/utils");
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _detail = require("./detail.style");
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const Detail = ({
   className,
   icon,
   footnote,
   children,
   ...rest
-}) => /*#__PURE__*/_react.default.createElement(_detail.StyledDetail, _extends({
-  className: `carbon-detail ${className}`
-}, (0, _tags.default)("detail", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), icon && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailIcon, {
-  type: icon,
-  "data-element": "icon"
-}), /*#__PURE__*/_react.default.createElement(_detail.StyledDetailContent, {
-  "data-element": "detail-content",
-  hasIcon: !!icon
-}, children), footnote && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
-  "data-element": "footnote",
-  "data-role": "footnote",
-  hasIcon: !!icon
-}, footnote));
+}) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Detail' component.");
+    deprecatedClassNameWarningShown = true;
+  }
+  return /*#__PURE__*/_react.default.createElement(_detail.StyledDetail, _extends({
+    className: `carbon-detail ${className}`
+  }, (0, _tags.default)("detail", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), icon && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailIcon, {
+    type: icon,
+    "data-element": "icon"
+  }), /*#__PURE__*/_react.default.createElement(_detail.StyledDetailContent, {
+    "data-element": "detail-content",
+    hasIcon: !!icon
+  }, children), footnote && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
+    "data-element": "footnote",
+    "data-role": "footnote",
+    hasIcon: !!icon
+  }, footnote));
+};
 exports.Detail = Detail;
 Detail.displayName = "Detail";
 var _default = exports.default = Detail;

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

@@ -10,6 +10,7 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _modal = _interopRequireDefault(require("../modal"));
 var _heading = _interopRequireDefault(require("../heading"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _dialog = require("./dialog.style");
 var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
 var _iconButton = _interopRequireDefault(require("../icon-button"));
@@ -21,6 +22,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+let deprecatedClassNameWarningShown = false;
 const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   className,
   "data-component": dataComponent = "dialog",
@@ -49,6 +51,10 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   closeButtonDataProps,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Dialog' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const locale = (0, _useLocale.default)();
   const containerRef = (0, _react.useRef)(null);
   const titleRef = (0, _react.useRef)(null);

package/lib/components/grouped-character/grouped-character.component.js

@@ -36,6 +36,7 @@ const GroupedCharacter = exports.GroupedCharacter = /*#__PURE__*/_react.default.
   groups,
   onBlur,
   onChange,
+  onKeyDown,
   separator: rawSeparator,
   value: externalValue,
   ...rest
@@ -99,7 +100,7 @@ const GroupedCharacter = exports.GroupedCharacter = /*#__PURE__*/_react.default.
       onBlur(modifiedEvent);
     }
   };
-  const handleKeyPress = ev => {
+  const handleKeyDown = ev => {
     const {
       selectionStart,
       selectionEnd
@@ -107,16 +108,22 @@ const GroupedCharacter = exports.GroupedCharacter = /*#__PURE__*/_react.default.
 
     /* istanbul ignore next */
     const hasSelection = (selectionEnd ?? 0) - (selectionStart ?? 0) > 0;
-    if (maxRawLength === value.length && !hasSelection) {
+
+    // check if the key pressed is a character key
+    const isCharacterKey = ev.key.length === 1;
+    if (isCharacterKey && maxRawLength === value.length && !hasSelection) {
       ev.preventDefault();
     }
+    if (onKeyDown) {
+      onKeyDown(ev);
+    }
   };
   return /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, rest, {
     value: value,
     formattedValue: formatValue(value),
     onChange: handleChange,
     onBlur: handleBlur,
-    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyDown,
     ref: ref
   }));
 });

package/lib/components/help/help.component.js

@@ -13,10 +13,12 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _utils = require("../../style/utils");
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const Help = ({
   as,
   ariaLabel = "help",
@@ -34,6 +36,10 @@ const Help = ({
   type = "help",
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Help' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const defaultTooltipId = (0, _react.useRef)((0, _guid.default)());
   const helpElement = (0, _react.useRef)(null);
   const [isTooltipVisible, updateTooltipVisible] = (0, _react.useState)(false);

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

@@ -11,10 +11,12 @@ var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
 var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const columnWrapper = (children, gutter) => {
   return _react.default.Children.map(children, input => {
     return /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledInlineInput, {
@@ -39,6 +41,10 @@ const InlineInputs = ({
   isOptional,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'InlineInputs' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
   const ref = (0, _react.useRef)(null);
   let inlineLabel = labelInline;

package/lib/components/link/link.component.js

@@ -12,10 +12,12 @@ var _link = require("./link.style");
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _batchSelection = _interopRequireDefault(require("../batch-selection/__internal__/batch-selection.context"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
   children,
   className,
@@ -38,6 +40,10 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
   removeAriaLabelOnIcon,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Link' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   const l = (0, _useLocale.default)();
   const {

package/lib/components/menu/menu-item/menu-item.component.js

@@ -15,10 +15,12 @@ var _submenu = _interopRequireDefault(require("../__internal__/submenu/submenu.c
 var _submenu2 = _interopRequireDefault(require("../__internal__/submenu/submenu.context"));
 var _menu2 = require("../menu.style");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const MenuItem = ({
   submenu,
   submenuMaxWidth,
@@ -44,6 +46,10 @@ const MenuItem = ({
   "data-role": dataRole,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'MenuItem' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   !(icon || children) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `icon` must be defined or this node must have `children`.") : (0, _invariant.default)(false) : void 0;
   !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : (0, _invariant.default)(false) : void 0;
   !(typeof submenu === "boolean" || submenu === undefined || children && typeof submenu === "string" && submenu.length) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "You should not pass `children` when `submenu` is an empty string") : (0, _invariant.default)(false) : void 0;

package/lib/components/message/message.component.js

@@ -15,10 +15,12 @@ var _icon = _interopRequireDefault(require("../icon"));
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _utils = require("../../style/utils");
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const Message = exports.Message = /*#__PURE__*/_react.default.forwardRef(({
   open = true,
   transparent = false,
@@ -32,6 +34,10 @@ const Message = exports.Message = /*#__PURE__*/_react.default.forwardRef(({
   showCloseIcon = true,
   ...props
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Message' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const messageRef = (0, _react.useRef)(null);
   const refToPass = ref || messageRef;
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);

package/lib/components/modal/modal.component.js

@@ -13,10 +13,12 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
 var _modal = require("./modal.style");
 var _modal2 = _interopRequireDefault(require("./__internal__/modal.context"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const Modal = ({
   children,
   "data-element": dataElement,
@@ -30,6 +32,10 @@ const Modal = ({
   topModalOverride,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && rest.className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Modal' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const ref = (0, _react.useRef)(null);
   const backgroundNodeRef = (0, _react.useRef)(null);
   const contentNodeRef = (0, _react.useRef)(null);

package/lib/components/pod/pod.component.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _pod = require("./pod.style");
 var _icon = _interopRequireDefault(require("../icon"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
@@ -14,6 +15,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const Pod = /*#__PURE__*/_react.default.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
@@ -37,6 +39,10 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
   variant = "primary",
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Pod' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [isEditFocused, setEditFocused] = (0, _react.useState)(false);
   const [isEditHovered, setEditHovered] = (0, _react.useState)(false);
   const [isDeleteFocused, setDeleteFocused] = (0, _react.useState)(false);

package/lib/components/portal/portal.js

@@ -11,9 +11,11 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 var _portal = _interopRequireDefault(require("./portal.style"));
 var _portal2 = _interopRequireDefault(require("./__internal__/portal.context"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let deprecatedClassNameWarningShown = false;
 const Container = _styledComponents.default.div`
   ${({
   theme
@@ -31,6 +33,10 @@ const Portal = ({
   onReposition,
   inertOptOut
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Portal' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [portalNode, setPortalNode] = (0, _react.useState)(null);
   const uniqueId = (0, _react.useMemo)(() => (0, _guid.default)(), []);
   const {

package/lib/components/profile/profile.component.js

@@ -9,8 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _profile = require("./profile.style");
 var _utils = require("../../style/utils");
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 function acronymize(str) {
   if (!str) return "";
   const matches = str.match(/\b\w/g);
@@ -30,6 +32,10 @@ const Profile = ({
   darkBackground,
   ...props
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Profile' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const getInitials = () => {
     if (initials) return initials;
     return acronymize(name).slice(0, 3).toUpperCase();

package/lib/components/settings-row/settings-row.component.js

@@ -9,9 +9,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _heading = _interopRequireDefault(require("../heading"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _utils = require("../../style/utils");
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _settingsRow = require("./settings-row.style");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const SettingsRow = ({
   title,
   headingType = "h3",
@@ -21,6 +23,10 @@ const SettingsRow = ({
   className,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'SettingsRow' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const heading = () => {
     if (!title) return null;
     return /*#__PURE__*/_react.default.createElement(_heading.default, {

package/lib/components/simple-color-picker/simple-color/simple-color.component.js

@@ -9,11 +9,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
 var _simpleColor = require("./simple-color.style");
+var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const SimpleColor = exports.SimpleColor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  if (!deprecatedClassNameWarningShown && props.className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'SimpleColor' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const {
     onChange,
     onBlur,

package/lib/components/tabs/tab/tab.component.js

@@ -9,10 +9,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tab = _interopRequireDefault(require("./tab.style"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
 var _tab2 = _interopRequireDefault(require("./__internal__/tab.context"));
+var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const Tab = ({
   ariaLabelledby,
   className,
@@ -33,6 +35,10 @@ const Tab = ({
   titleProps,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Tab' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const [tabErrors, setTabErrors] = (0, _react.useState)({});
   const [tabWarnings, setTabWarnings] = (0, _react.useState)({});
   const [tabInfos, setTabInfos] = (0, _react.useState)({});

package/lib/components/tabs/tabs.component.js

@@ -19,10 +19,12 @@ var _tabs = _interopRequireDefault(require("./tabs.style"));
 var _tabsHeader = _interopRequireDefault(require("./__internal__/tabs-header"));
 var _tabTitle = _interopRequireDefault(require("./__internal__/tab-title"));
 var _drawerSidebar = _interopRequireDefault(require("../drawer/__internal__/drawer-sidebar.context"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const Tabs = ({
   align = "left",
   className,
@@ -40,6 +42,10 @@ const Tabs = ({
   showValidationsSummary,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Tabs' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   if (position !== "left" && headerWidth !== undefined) {
     // eslint-disable-next-line no-console
     console.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");

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

@@ -12,12 +12,14 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _button = _interopRequireDefault(require("../button"));
 var _box = _interopRequireDefault(require("../box"));
 var _accordion = _interopRequireDefault(require("./__internal__/accordion"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _tileSelect = require("./tile-select.style");
 var _utils = require("../../style/utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const checkPropTypeIsNode = prop => typeof prop !== "string";
 const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
   onChange,
@@ -44,6 +46,10 @@ const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
   accordionExpanded,
   ...rest
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'TileSelect' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const l = (0, _useLocale.default)();
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   const handleDeselect = () => onChange?.({

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

@@ -7,6 +7,7 @@ exports.default = exports.Toast = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _toast = require("./toast.style");
@@ -20,6 +21,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
   align = "center",
   alignY,
@@ -36,6 +38,10 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
   closeButtonDataProps,
   ...restProps
 }, ref) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Toast' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   const isNotice = variant === "notice";
   const isNotification = variant === "notification";
   const locale = (0, _useLocale.default)();

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

@@ -9,8 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _utils = require("../../style/utils");
 var _typography = _interopRequireDefault(require("./typography.style"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedClassNameWarningShown = false;
 const VARIANT_TYPES = exports.VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 const Typography = ({
   "data-component": dataComponent,
@@ -41,6 +43,10 @@ const Typography = ({
   "aria-hidden": ariaHidden,
   ...rest
 }) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Typography' component.");
+    deprecatedClassNameWarningShown = true;
+  }
   return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
     variant: variant,
     as: as,

package/package.json

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