carbon-react 146.6.1 → 147.0.1

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

@@ -11,7 +11,11 @@ export interface ContentPaddingInterface {
     px?: PaddingValues;
 }
 export interface DialogProps extends ModalProps, TagProps {
-    /** Custom class name  */
+    /**
+     * @private
+     * @ignore
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
     /** Prop to specify the aria-describedby property of the Dialog component */
     "aria-describedby"?: string;

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

@@ -5,7 +5,6 @@ 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";
@@ -13,7 +12,6 @@ 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",
@@ -41,12 +39,11 @@ const Dialog = /*#__PURE__*/forwardRef(({
   topModalOverride,
   closeButtonDataProps,
   restoreFocusOnClose = true,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   ...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);
@@ -92,11 +89,11 @@ const Dialog = /*#__PURE__*/forwardRef(({
   const dialogProps = {
     size,
     dialogHeight,
-    "aria-labelledby": title && typeof title === "string" ? titleId : rest["aria-labelledby"],
-    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : rest["aria-describedby"],
-    "aria-label": rest["aria-label"]
+    "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
+    "aria-label": ariaLabel
   };
-  return /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/React.createElement(Modal, _extends({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
@@ -104,7 +101,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
     className: className ? `${className} carbon-dialog` : "carbon-dialog",
     topModalOverride: topModalOverride,
     restoreFocusOnClose: restoreFocusOnClose
-  }, /*#__PURE__*/React.createElement(FocusTrap, {
+  }, rest), /*#__PURE__*/React.createElement(FocusTrap, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,

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

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -25,7 +25,7 @@ declare const StyledHeadingIcon: import("styled-components").StyledComponent<imp
 declare const StyledSeparator: import("styled-components").StyledComponent<"hr", any, {}, never>;
 declare const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, "aria-hidden": ariaHidden, ...rest }: import("../hr").HrProps) => JSX.Element, any, {}, never>;
 declare const StyledHeaderHelp: import("styled-components").StyledComponent<{
-    ({ as, ariaLabel, children, className, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: import("../help").HelpProps): JSX.Element;
+    ({ as, ariaLabel, children, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: import("../help").HelpProps): JSX.Element;
     displayName: string;
 }, any, {}, never>;
 export { StyledHeadingIcon, StyledHeading, StyledSubHeader, StyledHeader, StyledSeparator, StyledHeaderHelp, StyledHeadingTitle, StyledDivider, StyledHeaderContent, StyledHeadingBackButton, StyledHeadingPills, };

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

@@ -9,8 +9,6 @@ export interface HelpProps extends MarginProps {
     ariaLabel?: string;
     /** The message to be displayed within the tooltip */
     children?: React.ReactNode;
-    /** [Legacy] A custom class name for the component. */
-    className?: string;
     /** The unique id of the component (used with aria-describedby for accessibility) */
     helpId?: string;
     /** A path for the anchor */
@@ -37,7 +35,7 @@ export interface HelpProps extends MarginProps {
     [key: string]: any;
 }
 export declare const Help: {
-    ({ as, ariaLabel, children, className, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: HelpProps): JSX.Element;
+    ({ as, ariaLabel, children, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: HelpProps): JSX.Element;
     displayName: string;
 };
 export default Help;

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

@@ -8,13 +8,10 @@ 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",
   children,
-  className,
   href,
   helpId,
   isFocused,
@@ -27,10 +24,6 @@ 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);
@@ -58,7 +51,6 @@ const Help = ({
   return /*#__PURE__*/React.createElement(StyledHelp, _extends({
     "aria-describedby": isFocused || isTooltipVisible ? tooltipId || defaultTooltipId.current : undefined,
     "aria-label": helpAriaLabel || ariaLabel,
-    className: className,
     as: tagType,
     href: href,
     id: helpId,
@@ -95,7 +87,6 @@ if (process.env.NODE_ENV !== "production") {
     "ariaLabel": PropTypes.string,
     "as": PropTypes.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]),
     "children": PropTypes.node,
-    "className": PropTypes.string,
     "helpId": PropTypes.string,
     "href": PropTypes.string,
     "isFocused": PropTypes.bool,

package/esm/components/icon/icon-config.js

@@ -20,7 +20,7 @@ const dlsConfig = {
 };
 export const ICON_TOOLTIP_POSITIONS = ["bottom", "left", "right", "top"];
 export const ICON_SHAPES = ["circle", "rounded-rect", "square"];
-export const ICON_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
+export const ICON_SIZES = ["small", "medium", "large", "extra-large"];
 export const ICON_FONT_SIZES = ["small", "medium", "large", "extra-large"];
 export const ICONS = ["accessibility_web", "add", "admin", "alert", "alert_on", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow", "arrow_bottom_right_circle", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_top_left_circle", "arrow_up", "arrows_left_right", "attach", "bank", "bank_with_card", "basket", "basket_with_squares", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "blocked", "blocked_square", "block_arrow_right", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "calendar_pay_date", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "cash", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "check_all", "check_none", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect", "connect_off", "construction", "contacts", "contact_card", "copy", "create", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "drill", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "entry", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "export", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "heart_pulse", "help", "hide", "hand_cash_coins", "hand_cash_note", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger", "ledger_arrow_left", "ledger_arrow_right", "lightbulb_off", "lightbulb_on", "like", "like_no", "link", "link_cloud", "link_on", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus", "minus_large", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause", "pause_circle", "petrol_pump", "pdf", "pin", "people", "people_switch", "percentage_boxed", "person", "person_info", "person_tick", "phone", "piggy_bank", "plane", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "protect", "question", "question_hollow", "question_mark", "recruiting", "refresh", "refresh_clock", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings", "settings_old", "share", "shield_with_tick", "shield_with_tick_outline", "shop", "sort_down", "sort_up", "spanner", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "stop", "stop_circle", "submitted", "support_online", "sync", "tag", "talk", "target", "target_man", "theatre_masks", "three_boxes", "tick", "tick_circle", "tick_thick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare", "worldwide_location"];
 export default dlsConfig;

package/esm/components/icon/icon.component.js

@@ -7,8 +7,6 @@ import { TooltipContext } from "../../__internal__/tooltip-provider";
 import StyledIcon from "./icon.style";
 import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
 import TabTitleContext from "../tabs/__internal__/tab-title/tab-title.context";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedExtraSmallBgSizeTriggered = false;
 const Icon = /*#__PURE__*/React.forwardRef(({
   "aria-hidden": ariaHidden,
   ariaLabel,
@@ -38,10 +36,6 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ICON_TOOLTIP_POSITIONS.includes(override));
-  if (!deprecatedExtraSmallBgSizeTriggered && bgSize === "extra-small") {
-    deprecatedExtraSmallBgSizeTriggered = true;
-    Logger.deprecate("The `extra-small` variant of the `bgSize` prop for `Icon` component has been deprecated and will soon be removed.");
-  }
   if (tooltipFlipOverrides) {
     !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? invariant(false, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
   }
@@ -134,7 +128,7 @@ if (process.env.NODE_ENV !== "production") {
     "ariaLabel": PropTypes.string,
     "bg": PropTypes.string,
     "bgShape": PropTypes.oneOf(["circle", "rounded-rect", "square"]),
-    "bgSize": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
+    "bgSize": PropTypes.oneOf(["extra-large", "large", "medium", "small"]),
     "className": PropTypes.string,
     "color": PropTypes.string,
     "data-element": PropTypes.string,

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

@@ -1,7 +1,7 @@
 import { ThemeObject } from "../../style/themes/base";
 import { IconType } from "./icon-type";
 export declare type BackgroundShape = "circle" | "rounded-rect" | "square";
-export declare type BgSize = "extra-small" | "small" | "medium" | "large" | "extra-large";
+export declare type BgSize = "small" | "medium" | "large" | "extra-large";
 export declare type FontSize = "small" | "medium" | "large" | "extra-large";
 export interface StyledIconProps {
     /** Background colour, provide any color from palette or any valid css color value. */

package/esm/components/icon/icon.style.js

@@ -1,20 +1,19 @@
 import styled, { css } from "styled-components";
 import { shade } from "polished";
 import { margin } from "styled-system";
-import iconUnicodes from "./icon-unicodes";
 import baseTheme from "../../style/themes/base";
-import iconConfig from "./icon-config";
-import browserTypeCheck, { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 import styledColor from "../../style/utils/color";
 import getColorValue from "../../style/utils/get-color-value";
-import addFocusStyling from "../../style/utils/add-focus-styling";
+import browserTypeCheck, { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
+import iconConfig from "./icon-config";
+import iconUnicodes from "./icon-unicodes";
 function adjustIconBgSize(fontSize, bgSize) {
   const sizeValues = {
-    "extra-small": 1,
-    small: 2,
-    medium: 3,
-    large: 4,
-    "extra-large": 5
+    small: 1,
+    medium: 2,
+    large: 3,
+    "extra-large": 4
   };
   if (fontSize && bgSize) {
     const fontSizeValue = sizeValues[fontSize];
@@ -27,7 +26,7 @@ function adjustIconBgSize(fontSize, bgSize) {
     return iconConfig.backgroundSize[bgSize];
   }
 
-  /* The below is ignored as removing it may cause regressions as some components import StyledIcon directly from this file 
+  /* The below is ignored as removing it may cause regressions as some components import StyledIcon directly from this file
   however it cannot be tested in the Icon tests as these props always have a value. */
   /* istanbul ignore next */
   return bgSize ? iconConfig.backgroundSize[bgSize] : undefined;
@@ -125,7 +124,7 @@ const StyledIcon = styled.span`
         ${type === "services" && isSafari(navigator) && !browserTypeCheck(window) && css`
           margin-top: -6px;
         `}
-        
+
         display: block;
       }
 

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

@@ -33,5 +33,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
     bottom: string | undefined;
     left: string | undefined;
     as?: string | undefined;
-} & StyledImageProps, "hidden" | "children" | "as" | "left" | "right" | "bottom" | "top" | "src" | "position">;
+} & StyledImageProps, "hidden" | "children" | "as" | "left" | "right" | "top" | "bottom" | "src" | "position">;
 export { StyledImage };

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -6,7 +6,11 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     adaptiveLabelBreakpoint?: number;
     /** Children elements */
     children?: React.ReactNode;
-    /** [Legacy prop] A custom class name for the component. */
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
     /** The id of the corresponding input control for the label */
     htmlFor?: string;
@@ -25,7 +29,7 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     isOptional?: boolean;
 }
 declare const InlineInputs: {
-    ({ adaptiveLabelBreakpoint, label, labelAlign, labelId, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, isOptional, ...rest }: InlineInputsProps): React.JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, labelAlign, labelId, htmlFor, children, gutter, inputWidth, labelInline, labelWidth, required, isOptional, ...rest }: InlineInputsProps): React.JSX.Element;
     displayName: string;
 };
 export default InlineInputs;

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

@@ -6,8 +6,6 @@ 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, {
@@ -23,7 +21,6 @@ const InlineInputs = ({
   labelId,
   htmlFor,
   children = null,
-  className = "",
   gutter = "none",
   inputWidth,
   labelInline = true,
@@ -32,10 +29,6 @@ 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;
@@ -64,7 +57,6 @@ const InlineInputs = ({
     gutter: gutter,
     "data-component": "inline-inputs",
     "data-role": "inline-inputs",
-    className: className,
     labelWidth: labelWidth,
     labelInline: inlineLabel,
     ref: ref

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

@@ -18,8 +18,6 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     tooltipPosition?: "bottom" | "left" | "right" | "top";
     /** Child content to render in the link. */
     children?: React.ReactNode;
-    /** Classes to apply to the component. */
-    className?: string;
     /** Target property in which link should open ie: _blank, _self, _parent, _top */
     target?: string;
     /** Aria label for accessibility purposes */
@@ -30,6 +28,12 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     placeholderTabIndex?: boolean;
     /** @ignore @private internal prop to be set when no aria-label should be specified */
     removeAriaLabelOnIcon?: boolean;
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
 }
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLButtonElement | HTMLLinkElement>>;
 export default Link;

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

@@ -7,11 +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,
   onKeyDown,
   href,
   onClick,
@@ -29,12 +26,9 @@ const Link = /*#__PURE__*/React.forwardRef(({
   isDarkBackground,
   placeholderTabIndex,
   removeAriaLabelOnIcon,
+  className,
   ...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 {
@@ -102,8 +96,8 @@ const Link = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement(StyledLink, _extends({
     isSkipLink: isSkipLink,
     disabled: isDisabled,
-    className: className,
     iconAlign: iconAlign,
+    className: className,
     hasContent: Boolean(children),
     variant: variant,
     isDarkBackground: isDarkBackground,

package/esm/components/loader-spinner/loader-spinner.style.d.ts

@@ -2,7 +2,7 @@
 import { LoaderSpinnerProps } from "./loader-spinner.component";
 export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
 interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {

package/esm/components/loader-star/loader-star.style.d.ts

@@ -2,7 +2,7 @@
 import { LoaderStarProps } from "./loader-star.component";
 export declare const StyledLoaderStarWrapper: import("styled-components").StyledComponent<"div", any, LoaderStarProps, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, {}, never>;
 export declare const StyledStars: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/menu/menu-item/menu-item.component.d.ts

@@ -4,8 +4,6 @@ import { IconType } from "../../icon";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export declare type VariantType = "default" | "alternate";
 interface MenuItemBaseProps extends Omit<TagProps, "data-component">, Pick<LayoutProps, "width" | "maxWidth" | "minWidth">, FlexboxProps, PaddingProps {
-    /** Custom className */
-    className?: string;
     /** onClick handler */
     onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Defines which direction the submenu will hang eg. left/right */

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

@@ -11,8 +11,6 @@ import SubmenuContext from "../__internal__/submenu/submenu.context";
 import MenuSegmentContext from "../menu-segment-title/menu-segment-title.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,
@@ -38,10 +36,6 @@ 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.d.ts

@@ -4,8 +4,6 @@ export declare type MessageVariant = "error" | "info" | "success" | "warning" |
 export interface MessageProps extends MarginProps {
     /** set content to component */
     children?: React.ReactNode;
-    /** set custom class to component */
-    className?: string;
     /** set custom aria label for message close button */
     closeButtonAriaLabel?: string;
     /** set custom id to component root */

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

@@ -10,8 +10,6 @@ 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,
@@ -20,15 +18,10 @@ const Message = /*#__PURE__*/React.forwardRef(({
   children,
   onDismiss,
   id,
-  className,
   closeButtonAriaLabel,
   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);
@@ -44,7 +37,6 @@ const Message = /*#__PURE__*/React.forwardRef(({
     }));
   };
   return open ? /*#__PURE__*/React.createElement(MessageStyle, _extends({}, tagComponent("Message", props), {
-    className: className,
     transparent: transparent,
     variant: variant,
     id: id,
@@ -65,7 +57,6 @@ const Message = /*#__PURE__*/React.forwardRef(({
 if (process.env.NODE_ENV !== "production") {
   Message.propTypes = {
     "children": PropTypes.node,
-    "className": PropTypes.string,
     "closeButtonAriaLabel": PropTypes.string,
     "id": PropTypes.string,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

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

@@ -1,7 +1,11 @@
 import React from "react";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface ModalProps extends Omit<TagProps, "data-component"> {
-    /** Custom class name  */
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
     /** Modal content */
     children?: React.ReactNode;

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

@@ -8,8 +8,6 @@ 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,
@@ -24,10 +22,6 @@ const Modal = ({
   restoreFocusOnClose = true,
   ...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.d.ts

@@ -12,8 +12,6 @@ export interface PodProps extends MarginProps {
     border?: boolean;
     /** Children elements */
     children?: React.ReactNode;
-    /** Custom className */
-    className?: string;
     /** Determines the padding around the pod */
     size?: PodSize;
     /** Prop to apply a theme to the Pod */

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

@@ -2,18 +2,15 @@ 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,
   alignTitle = "left",
   border = true,
   children,
-  className,
   displayEditButtonOnHover,
   editContentFullWidth,
   footer,
@@ -30,10 +27,6 @@ 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);
@@ -58,7 +51,6 @@ const Pod = /*#__PURE__*/React.forwardRef(({
   };
   return /*#__PURE__*/React.createElement(StyledPod, _extends({
     alignTitle: alignTitle,
-    className: className,
     internalEditButton: internalEditButton,
     height: typeof height === "number" ? `${height}px` : height,
     ref: ref,
@@ -152,7 +144,6 @@ if (process.env.NODE_ENV !== "production") {
     "alignTitle": PropTypes.oneOf(["center", "left", "right"]),
     "border": PropTypes.bool,
     "children": PropTypes.node,
-    "className": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "displayEditButtonOnHover": PropTypes.bool,

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

@@ -2,7 +2,11 @@ import React from "react";
 export interface PortalProps {
     /** The content of the portal. */
     children?: React.ReactNode;
-    /** Classname attached to portal container. */
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
     /** Id attribute attached to portal container. */
     id?: string;

package/esm/components/portal/portal.js

@@ -5,8 +5,6 @@ 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
@@ -24,10 +22,6 @@ 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 {