carbon-react 142.10.0 → 142.11.1

package/esm/__internal__/checkable-input/checkable-input.component.d.ts

@@ -6,10 +6,10 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     disabled?: boolean;
     /** @private @ignore */
     loading?: boolean;
-    /** [Legacy] Help content to be displayed under an input */
+    /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /**
-     * [Legacy] If true, the FieldHelp will be displayed inline
+     * If true, the FieldHelp will be displayed inline
      * To be used with labelInline prop set to true
      */
     fieldHelpInline?: boolean;
@@ -19,7 +19,7 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     inputWidth?: number;
     /** Label content */
     label?: React.ReactNode;
-    /** [Legacy] The content for the help tooltip, to appear next to the Label */
+    /** The content for the help tooltip, to appear next to the Label */
     labelHelp?: React.ReactNode;
     /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;

package/esm/__internal__/checkable-input/checkable-input.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, useContext } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import { StyledCheckableInput, StyledCheckableInputWrapper } from "./checkable-input.style";
 import { InputBehaviour } from "../input-behaviour";
@@ -7,7 +7,6 @@ import FormField from "../form-field";
 import HiddenCheckableInput from "./hidden-checkable-input.component";
 import guid from "../utils/helpers/guid";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
-import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 const CheckableInput = /*#__PURE__*/React.forwardRef(({
   ariaLabelledBy,
   autoFocus,
@@ -42,9 +41,6 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
   const {
     current: id
   } = useRef(inputId || guid());
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
   const {
     labelId,
     fieldHelpId,
@@ -80,7 +76,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     // However, we still want the input element to receive the required prop
     isRequired: required,
     isOptional,
-    useValidationIcon: validationRedesignOptIn ? false : validationOnLabel
+    useValidationIcon: validationOnLabel
   };
   const inputProps = {
     ariaDescribedBy,

package/esm/__internal__/popover/popover.component.d.ts

@@ -4,15 +4,47 @@ declare type CustomRefObject<T> = {
     current?: T | null;
 };
 export interface PopoverProps {
+    /**
+     * Element to be positioned, has to be a single node and has to accept `ref` and `style` props.
+     */
     children: React.ReactElement;
+    /**
+     * Placement of children in relation to the reference element.
+     */
     placement?: Placement;
+    /**
+     * Disables interaction with background UI.
+     */
     disableBackgroundUI?: boolean;
+    /**
+     * Optional middleware array, for more information go to:
+     * [https://floating-ui.com/docs/middleware](https://floating-ui.com/docs/middleware)
+     */
     middleware?: Middleware[];
+    /**
+     * When true, children are not rendered in portal.
+     */
     disablePortal?: boolean;
+    /**
+     * Reference element, children will be positioned in relation to this element - should be a ref shaped object.
+     */
     reference: CustomRefObject<HTMLElement>;
+    /**
+     * Determines if the popover is currently open/visible or not. Defaults to true.
+     */
     isOpen?: boolean;
+    /**
+     * Whether to update the position of the floating element on every animation frame if required. This is optimized for performance but can still be costly. Use with caution!
+     * [https://floating-ui.com/docs/autoUpdate#animationframe](https://floating-ui.com/docs/autoUpdate#animationframe)
+     */
     animationFrame?: boolean;
+    /**
+     * Optional strategy to use for positioning the floating element. Defaults to "absolute".
+     */
     popoverStrategy?: "absolute" | "fixed";
+    /**
+     * Allows child ref to be set via a prop instead of dynamically finding it via children iteration.
+     */
     childRefOverride?: MutableRefObject<HTMLDivElement | null>;
 }
 declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, childRefOverride, }: PopoverProps) => React.JSX.Element;

package/esm/__internal__/popover/popover.component.js

@@ -67,7 +67,9 @@ const Popover = ({
   if (disableBackgroundUI) {
     content = /*#__PURE__*/React.createElement(StyledPopoverContent, {
       isOpen: isOpen
-    }, /*#__PURE__*/React.createElement(StyledBackdrop, null, content));
+    }, /*#__PURE__*/React.createElement(StyledBackdrop, {
+      "data-role": "popup-backdrop"
+    }, content));
   }
   if (disablePortal) {
     return content;

package/esm/__internal__/radio-button-mapper/radio-button-mapper.component.js

@@ -23,7 +23,6 @@ const RadioButtonMapper = ({
   const [checkedValue, setCheckedValue] = useState(false);
   const onChangeProp = useCallback(event => {
     onChange?.(event);
-    /* istanbul ignore else */
     if (!isControlled) {
       setCheckedValue(event.target.value);
     }

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 hint text,
-     * will only be rendered when `validationRedesignOptIn` is true.
+     * The content for the CheckboxGroup Help tooltip,
+     * will be rendered as hint text 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 inline */
+    /** When true, Checkboxes are in line */
     inline?: boolean;
 }
 export declare const CheckboxGroup: {

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

@@ -35,8 +35,12 @@ export const CheckboxGroup = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
     legend: legend,
     inline: legendInline,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
     error: error,
     warning: warning,
+    info: info,
     isRequired: required,
     isOptional: isOptional
   }, tagComponent("checkboxgroup", props), {
@@ -52,6 +56,7 @@ export const CheckboxGroup = props => {
   }), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
+    legendInline: legendInline,
     inline: inline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: {
@@ -78,8 +83,7 @@ export const CheckboxGroup = props => {
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
-    legendInline: legendInline,
-    inline: inline
+    legendInline: legendInline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: {
       error: !!error,

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;
-    /** [Legacy] Aria label for rendered help component */
+    /** 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;
-    /** [Legacy] Overrides the default tooltip position */
+    /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** The value of the checkbox, passed on form submit */
     value?: string;

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

@@ -61,13 +61,6 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Checkbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const commonProps = {
-    fieldHelpInline,
-    labelSpacing,
-    labelHelp,
-    fieldHelp
-  };
-  const isInGroup = Object.keys(checkboxGroupContext).length !== 0;
   const inputProps = {
     ariaLabelledBy,
     onClick,
@@ -81,23 +74,28 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     type: "checkbox",
     name,
     reverse: !reverse,
+    fieldHelp,
     autoFocus,
+    labelHelp,
+    labelSpacing,
     required,
     isOptional,
+    fieldHelpInline,
     checked,
     disabled,
     inputWidth,
     labelWidth,
     ref,
-    ...rest,
-    ...(isInGroup && validationRedesignOptIn ? {} : {
-      ...commonProps
-    })
+    ...rest
   };
   const validationProps = {
     error: contextError || error,
     warning: contextWarning || warning,
-    info: contextInfo || info
+    ...(validationRedesignOptIn ? {
+      validationOnLabel: false
+    } : {
+      info: contextInfo || info
+    })
   };
   const marginProps = useFormSpacing(rest);
   const componentToRender = /*#__PURE__*/React.createElement(CheckboxStyle, _extends({

package/esm/components/checkbox/checkbox.style.js

@@ -41,12 +41,11 @@ const StyledCheckbox = styled.div`
       ${!disabled && css`
         border: 1px solid var(--colorsUtilityMajor300);
 
+        ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
+        ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
         ${error && `border: 2px solid var(--colorsSemanticNegative500);`}
 
-        ${!applyNewValidation && css`
-          ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
-          ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
-        `}
+        ${warning && applyNewValidation && `border: 1px solid var(--colorsUtilityMajor300);`}
       `}
     }
 

package/esm/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -171,7 +171,12 @@ const StyledFlatTableRow = styled.tr`
       ${StyledFlatTableHeader} {
         border-bottom: 1px solid ${borderColor(colorTheme)};
 
-        ${!isInSidebar && `
+        ${horizontalBorderSize !== "small" && css`
+          border-bottom: ${horizontalBorderSizes[horizontalBorderSize]} solid
+            var(--colorsUtilityMajor100);
+        `}
+
+        ${!isInSidebar && !colorTheme?.includes("transparent") && `
           :first-child {
             border-left: 1px solid ${borderColor(colorTheme)};
           }

package/esm/components/flat-table/flat-table.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 export interface FlatTableProps extends MarginProps {
     /** The HTML id of the element that contains a description of this table. */
     ariaDescribedby?: string;
@@ -25,13 +26,17 @@ export interface FlatTableProps extends MarginProps {
     size?: "compact" | "small" | "medium" | "large" | "extraLarge";
     /** Applies max-height of 100% to FlatTable if true */
     hasMaxHeight?: boolean;
+    /** Toggles the visibility of the table's outer left and right borders. When false, the left border of the first column and the right border of the last column are hidden.  */
+    hasOuterVerticalBorders?: boolean;
+    /** Sets the border radius of the first and last cells in the last row. */
+    bottomBorderRadius?: Extract<keyof typeof DesignTokens, `borderRadius${number}`>;
     /** Set the overflow X of the table wrapper. Any valid CSS string */
     overflowX?: string;
     /** Width of the table. Any valid CSS string */
     width?: string;
 }
 export declare const FlatTable: {
-    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, ariaDescribedby, minHeight, overflowX, width, ...rest }: FlatTableProps): React.JSX.Element;
+    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, hasOuterVerticalBorders, bottomBorderRadius, ariaDescribedby, minHeight, overflowX, width, ...rest }: FlatTableProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTable;

package/esm/components/flat-table/flat-table.component.js

@@ -17,6 +17,8 @@ export const FlatTable = ({
   isZebra,
   size = "medium",
   hasMaxHeight = false,
+  hasOuterVerticalBorders = true,
+  bottomBorderRadius = "borderRadius100",
   ariaDescribedby,
   minHeight,
   overflowX,
@@ -134,6 +136,7 @@ export const FlatTable = ({
   return /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
     ref: wrapperRef,
     "data-component": "flat-table-wrapper",
+    "data-role": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
     colorTheme: colorTheme,
@@ -141,6 +144,8 @@ export const FlatTable = ({
     overflowY: hasStickyHead || hasStickyFooter ? "auto" : undefined,
     height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
     maxHeight: hasMaxHeight ? "100%" : undefined,
+    hasOuterVerticalBorders: hasOuterVerticalBorders,
+    bottomBorderRadius: bottomBorderRadius,
     display: "flex",
     flexDirection: "column",
     justifyContent: hasStickyFooter || height ? "space-between" : undefined,

package/esm/components/flat-table/flat-table.style.d.ts

@@ -4,12 +4,13 @@ declare const StyledTableContainer: import("styled-components").StyledComponent<
 declare const StyledFlatTable: import("styled-components").StyledComponent<"table", any, Pick<FlatTableProps, "caption" | "isZebra"> & {
     size: NonNullable<FlatTableProps["size"]>;
 }, never>;
-interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFooter" | "colorTheme" | "hasStickyHead" | "footer">, Partial<DrawerSidebarContextProps> {
+interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFooter" | "colorTheme" | "hasStickyHead" | "footer" | "hasOuterVerticalBorders">, Partial<DrawerSidebarContextProps> {
     hasHorizontalScrollbar: boolean;
     hasVerticalScrollbar: boolean;
     lastColRowSpanIndex: number;
     firstColRowSpanIndex: number;
     isFocused: boolean;
+    bottomBorderRadius: NonNullable<FlatTableProps["bottomBorderRadius"]>;
 }
 declare const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledFlatTableWrapperProps, never>;
 declare const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "hasStickyFooter">, never>;

package/esm/components/flat-table/flat-table.style.js

@@ -100,12 +100,27 @@ const StyledFlatTable = styled.table`
 const StyledFlatTableWrapper = styled(StyledBox)`
   border-top-left-radius: var(--borderRadius100);
   border-top-right-radius: var(--borderRadius100);
+
+  ${({
+  hasOuterVerticalBorders
+}) => !hasOuterVerticalBorders && css`
+      ${StyledFlatTableRow} {
+        & > ${StyledFlatTableCell}:first-child {
+          border-left-color: var(--colorsUtilityMajorTransparent);
+        }
+        & > ${StyledFlatTableCell}:last-child {
+          border-right-color: var(--colorsUtilityMajorTransparent);
+        }
+      }
+    `}
+
   ${({
   hasStickyFooter,
-  hasHorizontalScrollbar
+  hasHorizontalScrollbar,
+  bottomBorderRadius
 }) => !hasStickyFooter && !hasHorizontalScrollbar && css`
-      border-bottom-left-radius: var(--borderRadius100);
-      border-bottom-right-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--${bottomBorderRadius});
+      border-bottom-right-radius: var(--${bottomBorderRadius});
     `}
 
   ${({
@@ -152,7 +167,6 @@ css`
           ${StyledFlatTableHeader},
           ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
             background-color: var(--colorsUtilityMajor025);
-            border-right: 1px solid var(--colorsUtilityMajor025);
             border-bottom-color: var(--colorsUtilityMajor100);
           }
           ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
@@ -167,7 +181,6 @@ css`
           ${StyledFlatTableHeader},
           ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
             background-color: var(--colorsUtilityYang100);
-            border-right: 1px solid var(--colorsUtilityYang100);
             border-bottom-color: var(--colorsUtilityMajor100);
           }
           ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
@@ -294,7 +307,8 @@ css`
   firstColRowSpanIndex,
   lastColRowSpanIndex,
   hasHorizontalScrollbar,
-  hasVerticalScrollbar
+  hasVerticalScrollbar,
+  bottomBorderRadius
 }) => !footer && css`
       tbody {
         ${firstColRowSpanIndex >= 0 && css`
@@ -319,13 +333,13 @@ css`
           ${!hasHorizontalScrollbar && firstColRowSpanIndex === -1 && css`
             th:first-child,
             td:first-child {
-              border-bottom-left-radius: var(--borderRadius100);
+              border-bottom-left-radius: var(--${bottomBorderRadius});
             }
           `}
           ${!hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && css`
             th:last-child,
             td:last-child {
-              border-bottom-right-radius: var(--borderRadius100);
+              border-bottom-right-radius: var(--${bottomBorderRadius});
             }
           `}
         }

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 hint text,
-     * will only be rendered when `validationRedesignOptIn` is true.
+     * The content for the RadioButtonGroup Legend Help tooltip,
+     * will be rendered as hint text 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

@@ -60,7 +60,11 @@ export const RadioButtonGroup = props => {
     legend: legend,
     error: error,
     warning: warning,
+    info: info,
     inline: inlineLegend,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
     isRequired: required,
     isOptional: isOptional
   }, tagComponent("radiogroup", props), marginProps, {
@@ -78,7 +82,8 @@ export const RadioButtonGroup = props => {
   }), /*#__PURE__*/React.createElement(RadioButtonGroupStyle, {
     "data-component": "radio-button-group",
     role: "radiogroup",
-    inline: inline
+    inline: inline,
+    legendInline: inlineLegend
   }, /*#__PURE__*/React.createElement(RadioButtonMapper, {
     name: name,
     onBlur: onBlur,
@@ -93,6 +98,8 @@ 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;
-    /** [Legacy] Overrides the default tooltip position */
+    /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** [Legacy] Aria label for rendered help component */
+    /** 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,31 +52,34 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     event.target.focus();
   }, [onChange]);
   const validationProps = {
+    disabled,
+    inputWidth,
     error,
     warning,
     info
   };
   const commonProps = {
+    ...validationProps,
     fieldHelpInline,
-    labelHelp,
-    fieldHelp
+    labelSpacing
   };
   const inputProps = {
-    ...(!validationRedesignOptIn && {
+    ...(validationRedesignOptIn ? {
+      ...validationProps
+    } : {
       ...commonProps
     }),
     autoFocus,
     checked,
+    fieldHelp,
     name,
     onChange: handleChange,
     onBlur,
     onFocus,
     labelInline: true,
     labelWidth,
-    labelSpacing,
     label,
-    disabled,
-    inputWidth,
+    labelHelp,
     id,
     value,
     type: "radio",
@@ -97,12 +100,13 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     "data-element": dataElement,
     inline: inline,
     reverse: reverse,
-    size: size,
-    disabled: disabled,
-    inputWidth: inputWidth,
-    labelSpacing: labelSpacing,
-    fieldHelpInline: fieldHelpInline
-  }, validationProps, marginProps), /*#__PURE__*/React.createElement(CheckableInput, _extends({}, inputProps, validationProps), /*#__PURE__*/React.createElement(RadioButtonSvg, null)));
+    size: size
+  }, validationRedesignOptIn ? {
+    ...validationProps
+  } : {
+    ...commonProps,
+    fieldHelp
+  }, 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/lib/__internal__/checkable-input/checkable-input.component.d.ts

@@ -6,10 +6,10 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     disabled?: boolean;
     /** @private @ignore */
     loading?: boolean;
-    /** [Legacy] Help content to be displayed under an input */
+    /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /**
-     * [Legacy] If true, the FieldHelp will be displayed inline
+     * If true, the FieldHelp will be displayed inline
      * To be used with labelInline prop set to true
      */
     fieldHelpInline?: boolean;
@@ -19,7 +19,7 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     inputWidth?: number;
     /** Label content */
     label?: React.ReactNode;
-    /** [Legacy] The content for the help tooltip, to appear next to the Label */
+    /** The content for the help tooltip, to appear next to the Label */
     labelHelp?: React.ReactNode;
     /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -12,7 +12,6 @@ var _formField = _interopRequireDefault(require("../form-field"));
 var _hiddenCheckableInput = _interopRequireDefault(require("./hidden-checkable-input.component"));
 var _guid = _interopRequireDefault(require("../utils/helpers/guid"));
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
-var _newValidation = _interopRequireDefault(require("../../components/carbon-provider/__internal__/new-validation.context"));
 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; }
@@ -51,9 +50,6 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   const {
     current: id
   } = (0, _react.useRef)(inputId || (0, _guid.default)());
-  const {
-    validationRedesignOptIn
-  } = (0, _react.useContext)(_newValidation.default);
   const {
     labelId,
     fieldHelpId,
@@ -89,7 +85,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     // However, we still want the input element to receive the required prop
     isRequired: required,
     isOptional,
-    useValidationIcon: validationRedesignOptIn ? false : validationOnLabel
+    useValidationIcon: validationOnLabel
   };
   const inputProps = {
     ariaDescribedBy,

package/lib/__internal__/popover/popover.component.d.ts

@@ -4,15 +4,47 @@ declare type CustomRefObject<T> = {
     current?: T | null;
 };
 export interface PopoverProps {
+    /**
+     * Element to be positioned, has to be a single node and has to accept `ref` and `style` props.
+     */
     children: React.ReactElement;
+    /**
+     * Placement of children in relation to the reference element.
+     */
     placement?: Placement;
+    /**
+     * Disables interaction with background UI.
+     */
     disableBackgroundUI?: boolean;
+    /**
+     * Optional middleware array, for more information go to:
+     * [https://floating-ui.com/docs/middleware](https://floating-ui.com/docs/middleware)
+     */
     middleware?: Middleware[];
+    /**
+     * When true, children are not rendered in portal.
+     */
     disablePortal?: boolean;
+    /**
+     * Reference element, children will be positioned in relation to this element - should be a ref shaped object.
+     */
     reference: CustomRefObject<HTMLElement>;
+    /**
+     * Determines if the popover is currently open/visible or not. Defaults to true.
+     */
     isOpen?: boolean;
+    /**
+     * Whether to update the position of the floating element on every animation frame if required. This is optimized for performance but can still be costly. Use with caution!
+     * [https://floating-ui.com/docs/autoUpdate#animationframe](https://floating-ui.com/docs/autoUpdate#animationframe)
+     */
     animationFrame?: boolean;
+    /**
+     * Optional strategy to use for positioning the floating element. Defaults to "absolute".
+     */
     popoverStrategy?: "absolute" | "fixed";
+    /**
+     * Allows child ref to be set via a prop instead of dynamically finding it via children iteration.
+     */
     childRefOverride?: MutableRefObject<HTMLDivElement | null>;
 }
 declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, childRefOverride, }: PopoverProps) => React.JSX.Element;

package/lib/__internal__/popover/popover.component.js

@@ -76,7 +76,9 @@ const Popover = ({
   if (disableBackgroundUI) {
     content = /*#__PURE__*/_react.default.createElement(_popover.StyledPopoverContent, {
       isOpen: isOpen
-    }, /*#__PURE__*/_react.default.createElement(_popover.StyledBackdrop, null, content));
+    }, /*#__PURE__*/_react.default.createElement(_popover.StyledBackdrop, {
+      "data-role": "popup-backdrop"
+    }, content));
   }
   if (disablePortal) {
     return content;

package/lib/__internal__/radio-button-mapper/radio-button-mapper.component.js

@@ -32,7 +32,6 @@ const RadioButtonMapper = ({
   const [checkedValue, setCheckedValue] = (0, _react.useState)(false);
   const onChangeProp = (0, _react.useCallback)(event => {
     onChange?.(event);
-    /* istanbul ignore else */
     if (!isControlled) {
       setCheckedValue(event.target.value);
     }

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 hint text,
-     * will only be rendered when `validationRedesignOptIn` is true.
+     * The content for the CheckboxGroup Help tooltip,
+     * will be rendered as hint text 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 inline */
+    /** When true, Checkboxes are in line */
     inline?: boolean;
 }
 export declare const CheckboxGroup: {

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

@@ -44,8 +44,12 @@ const CheckboxGroup = props => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     legend: legend,
     inline: legendInline,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
     error: error,
     warning: warning,
+    info: info,
     isRequired: required,
     isOptional: isOptional
   }, (0, _tags.default)("checkboxgroup", props), {
@@ -61,6 +65,7 @@ const CheckboxGroup = props => {
   }), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
+    legendInline: legendInline,
     inline: inline
   }, /*#__PURE__*/_react.default.createElement(_checkboxGroup2.default.Provider, {
     value: {
@@ -87,8 +92,7 @@ const CheckboxGroup = props => {
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
-    legendInline: legendInline,
-    inline: inline
+    legendInline: legendInline
   }, /*#__PURE__*/_react.default.createElement(_checkboxGroup2.default.Provider, {
     value: {
       error: !!error,

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;
-    /** [Legacy] Aria label for rendered help component */
+    /** 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;
-    /** [Legacy] Overrides the default tooltip position */
+    /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** The value of the checkbox, passed on form submit */
     value?: string;

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

@@ -70,13 +70,6 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Checkbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const commonProps = {
-    fieldHelpInline,
-    labelSpacing,
-    labelHelp,
-    fieldHelp
-  };
-  const isInGroup = Object.keys(checkboxGroupContext).length !== 0;
   const inputProps = {
     ariaLabelledBy,
     onClick,
@@ -90,23 +83,28 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
     type: "checkbox",
     name,
     reverse: !reverse,
+    fieldHelp,
     autoFocus,
+    labelHelp,
+    labelSpacing,
     required,
     isOptional,
+    fieldHelpInline,
     checked,
     disabled,
     inputWidth,
     labelWidth,
     ref,
-    ...rest,
-    ...(isInGroup && validationRedesignOptIn ? {} : {
-      ...commonProps
-    })
+    ...rest
   };
   const validationProps = {
     error: contextError || error,
     warning: contextWarning || warning,
-    info: contextInfo || info
+    ...(validationRedesignOptIn ? {
+      validationOnLabel: false
+    } : {
+      info: contextInfo || info
+    })
   };
   const marginProps = (0, _useFormSpacing.default)(rest);
   const componentToRender = /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({

package/lib/components/checkbox/checkbox.style.js

@@ -50,12 +50,11 @@ const StyledCheckbox = _styledComponents.default.div`
       ${!disabled && (0, _styledComponents.css)`
         border: 1px solid var(--colorsUtilityMajor300);
 
+        ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
+        ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
         ${error && `border: 2px solid var(--colorsSemanticNegative500);`}
 
-        ${!applyNewValidation && (0, _styledComponents.css)`
-          ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
-          ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
-        `}
+        ${warning && applyNewValidation && `border: 1px solid var(--colorsUtilityMajor300);`}
       `}
     }
 

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -180,7 +180,12 @@ const StyledFlatTableRow = _styledComponents.default.tr`
       ${_flatTableHeader.default} {
         border-bottom: 1px solid ${borderColor(colorTheme)};
 
-        ${!isInSidebar && `
+        ${horizontalBorderSize !== "small" && (0, _styledComponents.css)`
+          border-bottom: ${horizontalBorderSizes[horizontalBorderSize]} solid
+            var(--colorsUtilityMajor100);
+        `}
+
+        ${!isInSidebar && !colorTheme?.includes("transparent") && `
           :first-child {
             border-left: 1px solid ${borderColor(colorTheme)};
           }

package/lib/components/flat-table/flat-table.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
 export interface FlatTableProps extends MarginProps {
     /** The HTML id of the element that contains a description of this table. */
     ariaDescribedby?: string;
@@ -25,13 +26,17 @@ export interface FlatTableProps extends MarginProps {
     size?: "compact" | "small" | "medium" | "large" | "extraLarge";
     /** Applies max-height of 100% to FlatTable if true */
     hasMaxHeight?: boolean;
+    /** Toggles the visibility of the table's outer left and right borders. When false, the left border of the first column and the right border of the last column are hidden.  */
+    hasOuterVerticalBorders?: boolean;
+    /** Sets the border radius of the first and last cells in the last row. */
+    bottomBorderRadius?: Extract<keyof typeof DesignTokens, `borderRadius${number}`>;
     /** Set the overflow X of the table wrapper. Any valid CSS string */
     overflowX?: string;
     /** Width of the table. Any valid CSS string */
     width?: string;
 }
 export declare const FlatTable: {
-    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, ariaDescribedby, minHeight, overflowX, width, ...rest }: FlatTableProps): React.JSX.Element;
+    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, hasOuterVerticalBorders, bottomBorderRadius, ariaDescribedby, minHeight, overflowX, width, ...rest }: FlatTableProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTable;

package/lib/components/flat-table/flat-table.component.js

@@ -26,6 +26,8 @@ const FlatTable = ({
   isZebra,
   size = "medium",
   hasMaxHeight = false,
+  hasOuterVerticalBorders = true,
+  bottomBorderRadius = "borderRadius100",
   ariaDescribedby,
   minHeight,
   overflowX,
@@ -143,6 +145,7 @@ const FlatTable = ({
   return /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
     ref: wrapperRef,
     "data-component": "flat-table-wrapper",
+    "data-role": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
     colorTheme: colorTheme,
@@ -150,6 +153,8 @@ const FlatTable = ({
     overflowY: hasStickyHead || hasStickyFooter ? "auto" : undefined,
     height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
     maxHeight: hasMaxHeight ? "100%" : undefined,
+    hasOuterVerticalBorders: hasOuterVerticalBorders,
+    bottomBorderRadius: bottomBorderRadius,
     display: "flex",
     flexDirection: "column",
     justifyContent: hasStickyFooter || height ? "space-between" : undefined,

package/lib/components/flat-table/flat-table.style.d.ts

@@ -4,12 +4,13 @@ declare const StyledTableContainer: import("styled-components").StyledComponent<
 declare const StyledFlatTable: import("styled-components").StyledComponent<"table", any, Pick<FlatTableProps, "caption" | "isZebra"> & {
     size: NonNullable<FlatTableProps["size"]>;
 }, never>;
-interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFooter" | "colorTheme" | "hasStickyHead" | "footer">, Partial<DrawerSidebarContextProps> {
+interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFooter" | "colorTheme" | "hasStickyHead" | "footer" | "hasOuterVerticalBorders">, Partial<DrawerSidebarContextProps> {
     hasHorizontalScrollbar: boolean;
     hasVerticalScrollbar: boolean;
     lastColRowSpanIndex: number;
     firstColRowSpanIndex: number;
     isFocused: boolean;
+    bottomBorderRadius: NonNullable<FlatTableProps["bottomBorderRadius"]>;
 }
 declare const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledFlatTableWrapperProps, never>;
 declare const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "hasStickyFooter">, never>;

package/lib/components/flat-table/flat-table.style.js

@@ -109,12 +109,27 @@ const StyledFlatTable = exports.StyledFlatTable = _styledComponents.default.tabl
 const StyledFlatTableWrapper = exports.StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
   border-top-left-radius: var(--borderRadius100);
   border-top-right-radius: var(--borderRadius100);
+
+  ${({
+  hasOuterVerticalBorders
+}) => !hasOuterVerticalBorders && (0, _styledComponents.css)`
+      ${_flatTableRow.default} {
+        & > ${_flatTableCell.StyledFlatTableCell}:first-child {
+          border-left-color: var(--colorsUtilityMajorTransparent);
+        }
+        & > ${_flatTableCell.StyledFlatTableCell}:last-child {
+          border-right-color: var(--colorsUtilityMajorTransparent);
+        }
+      }
+    `}
+
   ${({
   hasStickyFooter,
-  hasHorizontalScrollbar
+  hasHorizontalScrollbar,
+  bottomBorderRadius
 }) => !hasStickyFooter && !hasHorizontalScrollbar && (0, _styledComponents.css)`
-      border-bottom-left-radius: var(--borderRadius100);
-      border-bottom-right-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--${bottomBorderRadius});
+      border-bottom-right-radius: var(--${bottomBorderRadius});
     `}
 
   ${({
@@ -161,7 +176,6 @@ const StyledFlatTableWrapper = exports.StyledFlatTableWrapper = (0, _styledCompo
           ${_flatTableHeader.default},
           ${_flatTableHead.default} ${_flatTableCheckbox.default} {
             background-color: var(--colorsUtilityMajor025);
-            border-right: 1px solid var(--colorsUtilityMajor025);
             border-bottom-color: var(--colorsUtilityMajor100);
           }
           ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader} {
@@ -176,7 +190,6 @@ const StyledFlatTableWrapper = exports.StyledFlatTableWrapper = (0, _styledCompo
           ${_flatTableHeader.default},
           ${_flatTableHead.default} ${_flatTableCheckbox.default} {
             background-color: var(--colorsUtilityYang100);
-            border-right: 1px solid var(--colorsUtilityYang100);
             border-bottom-color: var(--colorsUtilityMajor100);
           }
           ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader} {
@@ -303,7 +316,8 @@ const StyledFlatTableWrapper = exports.StyledFlatTableWrapper = (0, _styledCompo
   firstColRowSpanIndex,
   lastColRowSpanIndex,
   hasHorizontalScrollbar,
-  hasVerticalScrollbar
+  hasVerticalScrollbar,
+  bottomBorderRadius
 }) => !footer && (0, _styledComponents.css)`
       tbody {
         ${firstColRowSpanIndex >= 0 && (0, _styledComponents.css)`
@@ -328,13 +342,13 @@ const StyledFlatTableWrapper = exports.StyledFlatTableWrapper = (0, _styledCompo
           ${!hasHorizontalScrollbar && firstColRowSpanIndex === -1 && (0, _styledComponents.css)`
             th:first-child,
             td:first-child {
-              border-bottom-left-radius: var(--borderRadius100);
+              border-bottom-left-radius: var(--${bottomBorderRadius});
             }
           `}
           ${!hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && (0, _styledComponents.css)`
             th:last-child,
             td:last-child {
-              border-bottom-right-radius: var(--borderRadius100);
+              border-bottom-right-radius: var(--${bottomBorderRadius});
             }
           `}
         }

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 hint text,
-     * will only be rendered when `validationRedesignOptIn` is true.
+     * The content for the RadioButtonGroup Legend Help tooltip,
+     * will be rendered as hint text 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

@@ -69,7 +69,11 @@ const RadioButtonGroup = props => {
     legend: legend,
     error: error,
     warning: warning,
+    info: info,
     inline: inlineLegend,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
     isRequired: required,
     isOptional: isOptional
   }, (0, _tags.default)("radiogroup", props), marginProps, {
@@ -87,7 +91,8 @@ const RadioButtonGroup = props => {
   }), /*#__PURE__*/_react.default.createElement(_radioButtonGroup.default, {
     "data-component": "radio-button-group",
     role: "radiogroup",
-    inline: inline
+    inline: inline,
+    legendInline: inlineLegend
   }, /*#__PURE__*/_react.default.createElement(_radioButtonMapper.default, {
     name: name,
     onBlur: onBlur,
@@ -102,6 +107,8 @@ 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;
-    /** [Legacy] Overrides the default tooltip position */
+    /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** [Legacy] Aria label for rendered help component */
+    /** 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,31 +61,34 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
     event.target.focus();
   }, [onChange]);
   const validationProps = {
+    disabled,
+    inputWidth,
     error,
     warning,
     info
   };
   const commonProps = {
+    ...validationProps,
     fieldHelpInline,
-    labelHelp,
-    fieldHelp
+    labelSpacing
   };
   const inputProps = {
-    ...(!validationRedesignOptIn && {
+    ...(validationRedesignOptIn ? {
+      ...validationProps
+    } : {
       ...commonProps
     }),
     autoFocus,
     checked,
+    fieldHelp,
     name,
     onChange: handleChange,
     onBlur,
     onFocus,
     labelInline: true,
     labelWidth,
-    labelSpacing,
     label,
-    disabled,
-    inputWidth,
+    labelHelp,
     id,
     value,
     type: "radio",
@@ -106,12 +109,13 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
     "data-element": dataElement,
     inline: inline,
     reverse: reverse,
-    size: size,
-    disabled: disabled,
-    inputWidth: inputWidth,
-    labelSpacing: labelSpacing,
-    fieldHelpInline: fieldHelpInline
-  }, validationProps, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, _extends({}, inputProps, validationProps), /*#__PURE__*/_react.default.createElement(_radioButtonSvg.default, null)));
+    size: size
+  }, validationRedesignOptIn ? {
+    ...validationProps
+  } : {
+    ...commonProps,
+    fieldHelp
+  }, 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/package.json

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