carbon-react 144.20.0 → 144.21.0

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

@@ -32,9 +32,9 @@ export interface ButtonProps extends SpaceProps, TagProps {
     href?: string;
     /** Defines an Icon position related to the children: "before" | "after" */
     iconPosition?: ButtonIconPosition;
-    /** Provides a tooltip message when the icon is hovered. */
+    /** [Legacy] Provides a tooltip message when the icon is hovered. */
     iconTooltipMessage?: string;
-    /** Provides positioning when the tooltip is displayed. */
+    /** [Legacy] Provides positioning when the tooltip is displayed. */
     iconTooltipPosition?: TooltipPositions;
     /** Defines an Icon type within the button */
     iconType?: IconType;

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -5,8 +5,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;
     /**
-     * The content for the CheckboxGroup Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the CheckboxGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] When true, legend is placed inline with the checkboxes */
@@ -27,7 +27,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     isOptional?: boolean;
     /** [Legacy] Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** When true, Checkboxes are in line */
+    /** When true, Checkboxes are inline */
     inline?: boolean;
 }
 export declare const CheckboxGroup: {

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -40,7 +40,6 @@ export const CheckboxGroup = props => {
     legendSpacing: legendSpacing,
     error: error,
     warning: warning,
-    info: info,
     isRequired: required,
     isOptional: isOptional
   }, tagComponent("checkboxgroup", props), {

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

@@ -12,13 +12,13 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
     /** When true label is inline */
     labelInline?: boolean;
     /** Accepts a callback function which is triggered on click event */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** The value of the checkbox, passed on form submit */
     value?: string;

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

@@ -14,19 +14,19 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, O
     id?: string;
     /** The ARIA role to be applied to the Icon */
     role?: string;
-    /** The message to be displayed within the tooltip */
+    /** [Legacy] The message to be displayed within the tooltip */
     tooltipMessage?: React.ReactNode;
-    /** The position to display the tooltip */
+    /** [Legacy] The position to display the tooltip */
     tooltipPosition?: TooltipPositions;
-    /** Control whether the tooltip is visible */
+    /** [Legacy] Control whether the tooltip is visible */
     tooltipVisible?: boolean;
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipBgColor?: string;
-    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
-    /** Overrides the default flip behaviour of the Tooltip */
+    /** [Legacy] Overrides the default flip behaviour of the Tooltip */
     tooltipFlipOverrides?: TooltipPositions[];
-    /** Id passed to the tooltip container, used for accessibility purposes */
+    /** [Legacy] Id passed to the tooltip container, used for accessibility purposes */
     tooltipId?: string;
     /**
      * Icon type

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

@@ -12,9 +12,9 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     onKeyDown?: (ev: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Function called when a mouse down event triggers. */
     onMouseDown?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
-    /** A message to display as a tooltip to the link. */
+    /** [Legacy] A message to display as a tooltip to the link. */
     tooltipMessage?: string;
-    /** Positions the tooltip with the link. */
+    /** [Legacy] Positions the tooltip with the link. */
     tooltipPosition?: "bottom" | "left" | "right" | "top";
     /** Child content to render in the link. */
     children?: React.ReactNode;

package/esm/components/loader/loader-square.style.js

@@ -10,7 +10,7 @@ const loaderAnimation = keyframes`
     transform: scale(1);
   }
 `;
-const getDimentions = (size, roundedCornersOptOut) => {
+const getDimensions = (size, roundedCornersOptOut) => {
   let width;
   let marginRight;
   switch (size) {
@@ -44,7 +44,7 @@ const StyledLoaderSquare = styled.div`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${backgroundColor};
     display: inline-block;
-    ${getDimentions(size, theme.roundedCornersOptOut)}
+    ${getDimensions(size, theme.roundedCornersOptOut)}
 
     ${isInsideButton && css`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};

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

@@ -1,13 +1,13 @@
 import styled, { css } from "styled-components";
 import { padding } from "styled-system";
-import StyledButton from "../../button/button.style";
-import { StyledContent, StyledLink } from "../../link/link.style";
-import StyledIcon from "../../icon/icon.style";
-import StyledIconButton from "../../icon-button/icon-button.style";
 import menuConfigVariants from "../menu.config";
 import Link from "../../link";
-import addFocusStyling from "../../../style/utils/add-focus-styling";
+import StyledButton from "../../button/button.style";
+import StyledIconButton from "../../icon-button/icon-button.style";
+import StyledIcon from "../../icon/icon.style";
+import { StyledContent, StyledLink } from "../../link/link.style";
 import { baseTheme } from "../../../style/themes";
+import addFocusStyling from "../../../style/utils/add-focus-styling";
 const BASE_SPACING = 16;
 const parsePadding = props => {
   const {
@@ -121,16 +121,6 @@ const StyledMenuItemWrapper = styled.a.attrs({
       `}
     }
 
-    ${!maxWidth && css`
-      a:has([data-component="icon"]):not(:has(button))
-        ${StyledContent},
-        button:has([data-component="icon"]):not(:has(button))
-        ${StyledContent} {
-        position: relative;
-        top: -1px;
-      }
-    `}
-
     :has([data-element="input"]) ${StyledContent} {
       width: 100%;
     }
@@ -209,7 +199,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
             > a:has(${StyledButton}:not(.search-button)) {
              height: 100%;
-             
+
              ${StyledContent} {
                 height: inherit;
 
@@ -445,7 +435,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
           }
         `}
 
-      
+
       > a, > button {
        min-height: 40px;
        line-height: 40px;

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

@@ -24,21 +24,21 @@ export interface PortraitProps extends MarginProps {
     darkBackground?: boolean;
     /** Prop for `onClick` events. */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** The message to be displayed within the tooltip */
+    /** [Legacy] The message to be displayed within the tooltip */
     tooltipMessage?: React.ReactNode;
-    /** The id attribute to use for the tooltip */
+    /** [Legacy] The id attribute to use for the tooltip */
     tooltipId?: string;
-    /** Whether to to show the Tooltip */
+    /** [Legacy] Whether to to show the Tooltip */
     tooltipIsVisible?: boolean;
-    /** Sets position of the tooltip */
+    /** [Legacy] Sets position of the tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Defines the message type */
+    /** [Legacy] Defines the message type */
     tooltipType?: string;
-    /** Defines the size of the tooltip content */
+    /** [Legacy] Defines the size of the tooltip content */
     tooltipSize?: "medium" | "large";
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipBgColor?: string;
-    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
 }
 declare const Portrait: ({ alt, name, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;

package/esm/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -15,8 +15,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     /** The content for the RadioGroup Legend */
     legend?: string;
     /**
-     * The content for the RadioButtonGroup Legend Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the RadioButtonGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] Text alignment of legend when inline */

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

@@ -61,7 +61,6 @@ export const RadioButtonGroup = props => {
     legend: legend,
     error: error,
     warning: warning,
-    info: info,
     inline: inlineLegend,
     legendWidth: legendWidth,
     legendAlign: legendAlign,
@@ -99,8 +98,6 @@ export const RadioButtonGroup = props => {
       labelSpacing,
       error: !!error,
       warning: !!warning,
-      info: !!info,
-      required,
       ...child.props
     });
   }))))) : /*#__PURE__*/React.createElement(TooltipProvider, {

package/esm/components/radio-button/radio-button.component.d.ts

@@ -15,9 +15,9 @@ export interface RadioButtonProps extends Omit<CommonCheckableInputProps, "requi
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** the value of the Radio Button, passed on form submit */
     value: string;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
 }
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -52,23 +52,19 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     event.target.focus();
   }, [onChange]);
   const validationProps = {
-    disabled,
-    inputWidth,
     error,
     warning,
     info
   };
   const commonProps = {
     ...validationProps,
+    disabled,
+    inputWidth,
     fieldHelpInline,
     labelSpacing
   };
   const inputProps = {
-    ...(validationRedesignOptIn ? {
-      ...validationProps
-    } : {
-      ...commonProps
-    }),
+    ...commonProps,
     autoFocus,
     checked,
     fieldHelp,
@@ -101,12 +97,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     inline: inline,
     reverse: reverse,
     size: size
-  }, validationRedesignOptIn ? {
-    ...validationProps
-  } : {
-    ...commonProps,
-    fieldHelp
-  }, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(RadioButtonSvg, null)));
+  }, commonProps, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(RadioButtonSvg, null)));
   return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition

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

@@ -58,7 +58,7 @@ export interface SearchProps extends ValidationProps, MarginProps {
     variant?: "default" | "dark";
     /** Input tabindex */
     tabIndex?: number;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 export declare type SearchHandle = {

package/esm/components/tile/tile.style.js

@@ -36,7 +36,7 @@ const getBorderRadius = roundness => {
       return "var(--borderRadius100)";
   }
 };
-const getHeighlightVariant = variant => {
+const getHighlightVariant = variant => {
   switch (variant) {
     case "success":
       return "var(--colorsSemanticPositive500)";
@@ -115,7 +115,7 @@ export const StyledHighlight = styled.div`
   position: relative;
   background: ${({
   variant
-}) => getHeighlightVariant(variant)};
+}) => getHighlightVariant(variant)};
   border-radius: ${({
   roundness
 }) => getBorderRadius(roundness)};

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

@@ -32,9 +32,9 @@ export interface ButtonProps extends SpaceProps, TagProps {
     href?: string;
     /** Defines an Icon position related to the children: "before" | "after" */
     iconPosition?: ButtonIconPosition;
-    /** Provides a tooltip message when the icon is hovered. */
+    /** [Legacy] Provides a tooltip message when the icon is hovered. */
     iconTooltipMessage?: string;
-    /** Provides positioning when the tooltip is displayed. */
+    /** [Legacy] Provides positioning when the tooltip is displayed. */
     iconTooltipPosition?: TooltipPositions;
     /** Defines an Icon type within the button */
     iconType?: IconType;

package/lib/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -5,8 +5,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;
     /**
-     * The content for the CheckboxGroup Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the CheckboxGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] When true, legend is placed inline with the checkboxes */
@@ -27,7 +27,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     isOptional?: boolean;
     /** [Legacy] Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** When true, Checkboxes are in line */
+    /** When true, Checkboxes are inline */
     inline?: boolean;
 }
 export declare const CheckboxGroup: {

package/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -49,7 +49,6 @@ const CheckboxGroup = props => {
     legendSpacing: legendSpacing,
     error: error,
     warning: warning,
-    info: info,
     isRequired: required,
     isOptional: isOptional
   }, (0, _tags.default)("checkboxgroup", props), {

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

@@ -12,13 +12,13 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
     /** When true label is inline */
     labelInline?: boolean;
     /** Accepts a callback function which is triggered on click event */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** The value of the checkbox, passed on form submit */
     value?: string;

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

@@ -14,19 +14,19 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, O
     id?: string;
     /** The ARIA role to be applied to the Icon */
     role?: string;
-    /** The message to be displayed within the tooltip */
+    /** [Legacy] The message to be displayed within the tooltip */
     tooltipMessage?: React.ReactNode;
-    /** The position to display the tooltip */
+    /** [Legacy] The position to display the tooltip */
     tooltipPosition?: TooltipPositions;
-    /** Control whether the tooltip is visible */
+    /** [Legacy] Control whether the tooltip is visible */
     tooltipVisible?: boolean;
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipBgColor?: string;
-    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
-    /** Overrides the default flip behaviour of the Tooltip */
+    /** [Legacy] Overrides the default flip behaviour of the Tooltip */
     tooltipFlipOverrides?: TooltipPositions[];
-    /** Id passed to the tooltip container, used for accessibility purposes */
+    /** [Legacy] Id passed to the tooltip container, used for accessibility purposes */
     tooltipId?: string;
     /**
      * Icon type

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

@@ -12,9 +12,9 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     onKeyDown?: (ev: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Function called when a mouse down event triggers. */
     onMouseDown?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
-    /** A message to display as a tooltip to the link. */
+    /** [Legacy] A message to display as a tooltip to the link. */
     tooltipMessage?: string;
-    /** Positions the tooltip with the link. */
+    /** [Legacy] Positions the tooltip with the link. */
     tooltipPosition?: "bottom" | "left" | "right" | "top";
     /** Child content to render in the link. */
     children?: React.ReactNode;

package/lib/components/loader/loader-square.style.js

@@ -19,7 +19,7 @@ const loaderAnimation = (0, _styledComponents.keyframes)`
     transform: scale(1);
   }
 `;
-const getDimentions = (size, roundedCornersOptOut) => {
+const getDimensions = (size, roundedCornersOptOut) => {
   let width;
   let marginRight;
   switch (size) {
@@ -53,7 +53,7 @@ const StyledLoaderSquare = _styledComponents.default.div`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${backgroundColor};
     display: inline-block;
-    ${getDimentions(size, theme.roundedCornersOptOut)}
+    ${getDimensions(size, theme.roundedCornersOptOut)}
 
     ${isInsideButton && (0, _styledComponents.css)`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
+var _menu = _interopRequireDefault(require("../menu.config"));
+var _link = _interopRequireDefault(require("../../link"));
 var _button = _interopRequireDefault(require("../../button/button.style"));
-var _link = require("../../link/link.style");
-var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.style"));
-var _menu = _interopRequireDefault(require("../menu.config"));
-var _link2 = _interopRequireDefault(require("../../link"));
-var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
+var _icon = _interopRequireDefault(require("../../icon/icon.style"));
+var _link2 = require("../../link/link.style");
 var _themes = require("../../../style/themes");
+var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
 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; }
@@ -87,7 +87,7 @@ const oldFocusStyling = `
   box-shadow: inset 0 0 0 var(--borderWidth300) var(--colorsSemanticFocus500);
 `;
 const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
-  as: _link2.default
+  as: _link.default
 })`
   ${({
   menuType,
@@ -130,17 +130,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       `}
     }
 
-    ${!maxWidth && (0, _styledComponents.css)`
-      a:has([data-component="icon"]):not(:has(button))
-        ${_link.StyledContent},
-        button:has([data-component="icon"]):not(:has(button))
-        ${_link.StyledContent} {
-        position: relative;
-        top: -1px;
-      }
-    `}
-
-    :has([data-element="input"]) ${_link.StyledContent} {
+    :has([data-element="input"]) ${_link2.StyledContent} {
       width: 100%;
     }
 
@@ -218,8 +208,8 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
 
             > a:has(${_button.default}:not(.search-button)) {
              height: 100%;
-             
-             ${_link.StyledContent} {
+
+             ${_link2.StyledContent} {
                 height: inherit;
 
                 div {
@@ -252,25 +242,25 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       ` : `
         ${hasSubmenu || maxWidth && !inFullscreenView ? `
               a,
-              ${_link.StyledLink} a,
+              ${_link2.StyledLink} a,
               button,
-              ${_link.StyledLink} button {
+              ${_link2.StyledLink} button {
                 padding: 11px 16px ${hasSubmenu && maxWidth ? "12px" : "10px"};
               }
             ` : `
               a,
-              ${_link.StyledLink} a,
+              ${_link2.StyledLink} a,
               button,
-              ${_link.StyledLink} button {
+              ${_link2.StyledLink} button {
                 padding: ${!inFullscreenView ? "11px" : "0px"} 16px;
               }
             `}
       `}
 
     button,
-    ${_link.StyledLink} button,
+    ${_link2.StyledLink} button,
     a,
-    ${_link.StyledLink} a {
+    ${_link2.StyledLink} a {
       margin: 0px;
       text-align: left;
 
@@ -288,9 +278,9 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       a,
       button,
       [data-component="icon"],
-      ${_link.StyledLink} a,
-      ${_link.StyledLink} button,
-      ${_link.StyledLink} [data-component="icon"] {
+      ${_link2.StyledLink} a,
+      ${_link2.StyledLink} button,
+      ${_link2.StyledLink} [data-component="icon"] {
         font-weight: 500;
         text-decoration: none;
         ${!hasInput && `color: ${_menu.default[menuType].color};`}
@@ -454,16 +444,16 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
           }
         `}
 
-      
+
       > a, > button {
        min-height: 40px;
        line-height: 40px;
       }
 
       a,
-      ${_link.StyledLink} a,
+      ${_link2.StyledLink} a,
       button,
-      ${_link.StyledLink} button {
+      ${_link2.StyledLink} button {
         width: 100vw;
         box-sizing: border-box;
       }

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

@@ -24,21 +24,21 @@ export interface PortraitProps extends MarginProps {
     darkBackground?: boolean;
     /** Prop for `onClick` events. */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** The message to be displayed within the tooltip */
+    /** [Legacy] The message to be displayed within the tooltip */
     tooltipMessage?: React.ReactNode;
-    /** The id attribute to use for the tooltip */
+    /** [Legacy] The id attribute to use for the tooltip */
     tooltipId?: string;
-    /** Whether to to show the Tooltip */
+    /** [Legacy] Whether to to show the Tooltip */
     tooltipIsVisible?: boolean;
-    /** Sets position of the tooltip */
+    /** [Legacy] Sets position of the tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Defines the message type */
+    /** [Legacy] Defines the message type */
     tooltipType?: string;
-    /** Defines the size of the tooltip content */
+    /** [Legacy] Defines the size of the tooltip content */
     tooltipSize?: "medium" | "large";
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipBgColor?: string;
-    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
 }
 declare const Portrait: ({ alt, name, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;

package/lib/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -15,8 +15,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     /** The content for the RadioGroup Legend */
     legend?: string;
     /**
-     * The content for the RadioButtonGroup Legend Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the RadioButtonGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] Text alignment of legend when inline */

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

@@ -70,7 +70,6 @@ const RadioButtonGroup = props => {
     legend: legend,
     error: error,
     warning: warning,
-    info: info,
     inline: inlineLegend,
     legendWidth: legendWidth,
     legendAlign: legendAlign,
@@ -108,8 +107,6 @@ const RadioButtonGroup = props => {
       labelSpacing,
       error: !!error,
       warning: !!warning,
-      info: !!info,
-      required,
       ...child.props
     });
   }))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {

package/lib/components/radio-button/radio-button.component.d.ts

@@ -15,9 +15,9 @@ export interface RadioButtonProps extends Omit<CommonCheckableInputProps, "requi
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** the value of the Radio Button, passed on form submit */
     value: string;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
 }
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -61,23 +61,19 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
     event.target.focus();
   }, [onChange]);
   const validationProps = {
-    disabled,
-    inputWidth,
     error,
     warning,
     info
   };
   const commonProps = {
     ...validationProps,
+    disabled,
+    inputWidth,
     fieldHelpInline,
     labelSpacing
   };
   const inputProps = {
-    ...(validationRedesignOptIn ? {
-      ...validationProps
-    } : {
-      ...commonProps
-    }),
+    ...commonProps,
     autoFocus,
     checked,
     fieldHelp,
@@ -110,12 +106,7 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
     inline: inline,
     reverse: reverse,
     size: size
-  }, validationRedesignOptIn ? {
-    ...validationProps
-  } : {
-    ...commonProps,
-    fieldHelp
-  }, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_radioButtonSvg.default, null)));
+  }, commonProps, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_radioButtonSvg.default, null)));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition

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

@@ -58,7 +58,7 @@ export interface SearchProps extends ValidationProps, MarginProps {
     variant?: "default" | "dark";
     /** Input tabindex */
     tabIndex?: number;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 export declare type SearchHandle = {

package/lib/components/tile/tile.style.js

@@ -45,7 +45,7 @@ const getBorderRadius = roundness => {
       return "var(--borderRadius100)";
   }
 };
-const getHeighlightVariant = variant => {
+const getHighlightVariant = variant => {
   switch (variant) {
     case "success":
       return "var(--colorsSemanticPositive500)";
@@ -124,7 +124,7 @@ const StyledHighlight = exports.StyledHighlight = _styledComponents.default.div`
   position: relative;
   background: ${({
   variant
-}) => getHeighlightVariant(variant)};
+}) => getHighlightVariant(variant)};
   border-radius: ${({
   roundness
 }) => getBorderRadius(roundness)};

package/package.json

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