carbon-react 144.20.0 → 144.20.1

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/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/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.20.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",