carbon-react 104.42.0 → 104.44.0

package/esm/__internal__/tooltip-provider/index.js

@@ -6,7 +6,7 @@ export const TooltipProvider = ({
   children,
   tooltipPosition,
   helpAriaLabel,
-  focusable = true,
+  focusable,
   tooltipVisible,
   disabled,
   target

package/esm/components/advanced-color-picker/advanced-color-picker.style.js

@@ -41,7 +41,7 @@ const StyledAdvancedColorPickerPreview = styled.div`
 `;
 const DialogStyle = styled(Dialog)`
   ${DialogContentStyle} {
-    padding: 18px 18px 18px 17px;
+    padding: var(--spacing200);
   }
 
   ${DialogInnerContentStyle} {
@@ -72,7 +72,7 @@ const DialogStyle = styled(Dialog)`
   }
 
   [data-component="icon"] {
-    color: var(--colorsActionMinorYin065);
+    color: var(--colorsActionMinor500);
   }
 `;
 export { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle };

package/esm/components/grid/grid-container/grid-container.component.js

@@ -1,8 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from "react";
-import PropTypes from "prop-types";
-import propTypes from "@styled-system/prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import GridContainerStyle from "./grid-container.style";
 import GridItem from "../grid-item";
 
@@ -32,7 +31,7 @@ GridContainer.propTypes = {
     });
     return error;
   },
-  ...propTypes.space,
-  gridGap: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  ...styledSystemPropTypes.space,
+  ...styledSystemPropTypes.grid
 };
 export default GridContainer;

package/esm/components/grid/grid-container/grid-container.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+import { SpaceProps, GridProps } from "styled-system";
 import { GridItemProps } from "../grid-item/grid-item";
 
 type GridContainerChild =
@@ -8,11 +8,9 @@ type GridContainerChild =
   | null
   | undefined;
 
-export interface GridContainerProps extends SpaceProps {
+export interface GridContainerProps extends SpaceProps, GridProps {
   /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
   children?: GridContainerChild | GridContainerChild[];
-  /** Any valid CSS value to override default grid-gap */
-  gridGap?: string;
 }
 
 declare function GridContainer(props: GridContainerProps): JSX.Element;

package/esm/components/grid/grid-container/grid-container.style.js

@@ -27,10 +27,7 @@ const GridContainerStyle = styled.div`
 
   @media screen {
     ${space}
-    ${({
-  gridGap
-}) => grid({
-  gridGap
-})}
+    ${grid}
+  }
 `;
 export default GridContainerStyle;

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

@@ -5,6 +5,8 @@ declare namespace GridItem {
         const responsiveSettings: PropTypes.Requireable<(PropTypes.InferProps<{
             /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
             alignSelf: PropTypes.Requireable<string>;
+            /** Shorthand property for gridColumn and gridRow */
+            gridArea: PropTypes.Requireable<string | number>;
             /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
             gridColumn: PropTypes.Requireable<string | number>;
             /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
@@ -16,6 +18,7 @@ declare namespace GridItem {
         }> | null | undefined)[]>;
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         const alignSelf: PropTypes.Requireable<string>;
+        const gridArea: PropTypes.Requireable<string | number>;
         const gridColumn: PropTypes.Requireable<string | number>;
         const gridRow: PropTypes.Requireable<string | number>;
         const justifySelf: PropTypes.Requireable<string>;

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

@@ -26,6 +26,9 @@ GridItem.propTypes = {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
   alignSelf: PropTypes.string,
 
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
   gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -39,6 +42,9 @@ GridItem.propTypes = {
     /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
     alignSelf: PropTypes.string,
 
+    /** Shorthand property for gridColumn and gridRow */
+    gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
     /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
     gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 

package/esm/components/grid/grid-item/grid-item.d.ts

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { PaddingProps } from "styled-system";
+import {
+  PaddingProps,
+  GridAreaProps,
+  GridRowProps,
+  GridColumnProps,
+} from "styled-system";
 
 interface ResponsiveSettingsShape extends PaddingProps {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
@@ -8,10 +13,12 @@ interface ResponsiveSettingsShape extends PaddingProps {
   justifySelf?: string;
   /** Maximum width of the item */
   maxWidth?: string;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
 }
 
 export interface GridItemProps extends PaddingProps {
@@ -21,10 +28,12 @@ export interface GridItemProps extends PaddingProps {
   justifySelf?: string;
   /** Defines the Component(s) to be rendered within the GridItem */
   children?: React.ReactNode;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
   responsiveSettings?: ResponsiveSettingsShape[];
 }
 

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

@@ -9,6 +9,7 @@ function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
+      gridArea,
       gridColumn,
       gridRow,
       maxWidth,
@@ -23,6 +24,7 @@ function responsiveGridItem(responsiveSettings) {
       @media screen and (max-width: ${maxWidth}) {
         align-self: ${alignSelf || "stretch"};
         justify-self: ${justifySelf || "stretch"};
+        grid-area: ${gridArea};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
         padding: ${getSpacing(p)};
@@ -81,33 +83,30 @@ export function getSpacing(prop) {
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 const GridItemStyle = styled.div`
   margin: 0;
+  ${padding}
 
   ${({
-  justifySelf
-}) => flexbox({
+  alignSelf,
+  justifySelf,
+  gridArea,
+  gridColumn,
+  gridRow,
+  responsiveSettings
+}) => css`
+    ${flexbox({
+  alignSelf,
   justifySelf
 })}
-  ${({
-  alignSelf
-}) => flexbox({
-  alignSelf
-})}
-  ${padding}
-  ${({
+    ${grid({
+  gridArea,
+  gridColumn,
   gridRow
-}) => grid({
-  gridRow
-})}
-  ${({
-  gridColumn
-}) => grid({
-  gridColumn
-})}
-  ${({
-  responsiveSettings
-}) => responsiveSettings && css`
+})};
+
+    ${responsiveSettings && css`
       ${responsiveGridItem(responsiveSettings)};
     `}
+  `}
 `;
 GridItemStyle.propTypes = {
   alignSelf: PropTypes.string,
@@ -117,6 +116,7 @@ GridItemStyle.propTypes = {
   ...paddingPropTypes,
   responsiveSettings: PropTypes.arrayOf(PropTypes.shape({
     alignSelf: PropTypes.string,
+    gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gridRow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     justifySelf: PropTypes.string,
@@ -125,7 +125,6 @@ GridItemStyle.propTypes = {
   }))
 };
 GridItemStyle.defaultProps = {
-  gridColumn: "1 / 13",
-  gridRow: "auto"
+  gridArea: "auto / 1 / auto / 13"
 };
 export default GridItemStyle;

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

@@ -14,7 +14,7 @@ declare function Help({ className, href, helpId, children, tabIndex, as, tooltip
     tooltipBgColor: any;
     tooltipFontColor: any;
     tooltipFlipOverrides: any;
-    ariaLabel: any;
+    ariaLabel?: string | undefined;
 }): JSX.Element;
 declare namespace Help {
     namespace propTypes {

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

@@ -10,6 +10,7 @@ import Events from "../../__internal__/utils/helpers/events";
 import { TooltipContext } from "../../__internal__/tooltip-provider";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { HELP_POSITIONS } from "./help.config";
+import guid from "../../__internal__/utils/helpers/guid";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Help = ({
@@ -26,9 +27,10 @@ const Help = ({
   tooltipBgColor,
   tooltipFontColor,
   tooltipFlipOverrides,
-  ariaLabel,
+  ariaLabel = "help",
   ...rest
 }) => {
+  const defaultTooltipId = useRef(guid());
   const helpElement = useRef(null);
   const [isTooltipVisible, updateTooltipVisible] = useState(false);
   const {
@@ -56,6 +58,7 @@ const Help = ({
   }
 
   return /*#__PURE__*/React.createElement(StyledHelp, _extends({
+    "aria-describedby": isFocused || isTooltipVisible ? tooltipId || defaultTooltipId.current : undefined,
     className: className,
     as: tagType,
     href: href,
@@ -74,9 +77,10 @@ const Help = ({
     target: "_blank",
     rel: "noopener noreferrer"
   } : {
-    role: "tooltip",
-    "aria-label": ariaLabel || helpAriaLabel
-  }, filterStyledSystemMarginProps(rest), rest), /*#__PURE__*/React.createElement(Icon, _extends({
+    role: "button",
+    "aria-label": helpAriaLabel || ariaLabel
+  }, filterStyledSystemMarginProps(rest), rest), /*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
     type: type,
     tooltipMessage: children,
     tooltipPosition: tooltipPosition,
@@ -85,12 +89,8 @@ const Help = ({
     tooltipFontColor: tooltipFontColor,
     tooltipFlipOverrides: tooltipFlipOverrides,
     focusable: false,
-    tooltipId: tooltipId,
-    "aria-hidden": "true"
-  }, href && {
-    role: "tooltip",
-    ariaLabel: ariaLabel || helpAriaLabel
-  })));
+    tooltipId: tooltipId || defaultTooltipId.current
+  }));
 };
 
 Help.propTypes = { ...marginPropTypes,

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

@@ -11,6 +11,7 @@ import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
 import { TooltipContext } from "../../__internal__/tooltip-provider";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const Icon = /*#__PURE__*/React.forwardRef(({
+  "aria-hidden": ariaHidden,
   bg,
   bgShape,
   bgSize,
@@ -31,7 +32,6 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   inputSize,
   role,
   ariaLabel,
-  "aria-hidden": ariaHidden,
   focusable = true,
   ...rest
 }, ref) => {
@@ -84,6 +84,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     ...filterStyledSystemMarginProps(rest)
   };
   const icon = /*#__PURE__*/React.createElement(StyledIcon, _extends({
+    "aria-hidden": ariaHidden,
     ref: ref,
     key: "icon",
     className: className || null,
@@ -91,8 +92,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   }, tagComponent("icon", rest), styleProps, {
     hasTooltip: hasTooltip,
     "aria-label": ariaLabel,
-    "aria-hidden": ariaHidden,
-    role: hasTooltip && role === undefined ? "tooltip" : role
+    role: role
   }));
 
   if (tooltipMessage) {

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

@@ -6,9 +6,7 @@ export const StyledSettingsRow = styled.div`
   ${margin}
 
   clear: both;
-  color: ${({
-  theme
-}) => theme.palette.slateTint(20)};
+  color: var(--colorsUtilityYin055);
   display: flex;
   font-size: 14px;
   justify-content: space-between;
@@ -18,9 +16,7 @@ export const StyledSettingsRow = styled.div`
   ${({
   hasDivider
 }) => hasDivider && css`
-      border-bottom: 1px solid ${({
-  theme
-}) => theme.palette.slateTint(90)};
+      border-bottom: 1px solid var(--colorsUtilityMajor050);
       padding-bottom: 30px;
     `}
 
@@ -29,9 +25,7 @@ export const StyledSettingsRow = styled.div`
   }
 
   ${StyledHeadingTitle} {
-    color: ${({
-  theme
-}) => theme.palette.slate};
+    color: var(--colorsUtilityYin090);
     font-size: 15px;
     font-weight: bold;
     line-height: 18px;

package/esm/components/simple-color-picker/simple-color-input/simple-color-input.style.js

@@ -18,7 +18,7 @@ const StyledSimpleColorInput = styled(SimpleColorInput)`
 
   &:focus + ${StyledColorSampleBox} {
     box-shadow: inset 0px 0px 0px var(--borderWidth200)
-      var(--colorsActionMajorYang100);
+      var(--colorsUtilityYang100);
     border: 2px solid var(--colorsSemanticFocus500);
   }
 `;

package/esm/components/simple-color-picker/tick-icon/tick-icon.style.js

@@ -10,8 +10,8 @@ const getIconColor = color => {
         greenMultiplier = 587,
         blueMultiplier = 114;
   const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
-  if (contrast < 128) return "var(--colorsActionMajorYang100)";
-  return "var(--colorsActionMajorYin090)";
+  if (contrast < 128) return "var(--colorsUtilityYang100)";
+  return "var(--colorsUtilityYin090)";
 };
 
 const StyledTickIcon = styled(Icon)`

package/esm/components/tooltip/tooltip.component.js

@@ -51,7 +51,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
       "data-popper-arrow": "",
       "data-element": "tooltip-pointer",
       bgColor: bgColor
-    })), /*#__PURE__*/React.createElement("div", null, content)));
+    })), content));
   };
 
   return /*#__PURE__*/React.createElement(Tippy, _extends({

package/lib/__internal__/tooltip-provider/index.js

@@ -25,7 +25,7 @@ const TooltipProvider = ({
   children,
   tooltipPosition,
   helpAriaLabel,
-  focusable = true,
+  focusable,
   tooltipVisible,
   disabled,
   target

package/lib/components/advanced-color-picker/advanced-color-picker.style.js

@@ -72,7 +72,7 @@ const StyledAdvancedColorPickerPreview = _styledComponents.default.div`
 exports.StyledAdvancedColorPickerPreview = StyledAdvancedColorPickerPreview;
 const DialogStyle = (0, _styledComponents.default)(_dialog2.default)`
   ${_dialog.DialogContentStyle} {
-    padding: 18px 18px 18px 17px;
+    padding: var(--spacing200);
   }
 
   ${_dialog.DialogInnerContentStyle} {
@@ -103,7 +103,7 @@ const DialogStyle = (0, _styledComponents.default)(_dialog2.default)`
   }
 
   [data-component="icon"] {
-    color: var(--colorsActionMinorYin065);
+    color: var(--colorsActionMinor500);
   }
 `;
 exports.DialogStyle = DialogStyle;

package/lib/components/grid/grid-container/grid-container.component.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _gridContainer = _interopRequireDefault(require("./grid-container.style"));
 
@@ -47,8 +45,8 @@ GridContainer.propTypes = {
 
     return error;
   },
-  ..._propTypes2.default.space,
-  gridGap: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  ..._propTypes.default.space,
+  ..._propTypes.default.grid
 };
 var _default = GridContainer;
 exports.default = _default;

package/lib/components/grid/grid-container/grid-container.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+import { SpaceProps, GridProps } from "styled-system";
 import { GridItemProps } from "../grid-item/grid-item";
 
 type GridContainerChild =
@@ -8,11 +8,9 @@ type GridContainerChild =
   | null
   | undefined;
 
-export interface GridContainerProps extends SpaceProps {
+export interface GridContainerProps extends SpaceProps, GridProps {
   /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
   children?: GridContainerChild | GridContainerChild[];
-  /** Any valid CSS value to override default grid-gap */
-  gridGap?: string;
 }
 
 declare function GridContainer(props: GridContainerProps): JSX.Element;

package/lib/components/grid/grid-container/grid-container.style.js

@@ -38,11 +38,8 @@ const GridContainerStyle = _styledComponents.default.div`
 
   @media screen {
     ${_styledSystem.space}
-    ${({
-  gridGap
-}) => (0, _styledSystem.grid)({
-  gridGap
-})}
+    ${_styledSystem.grid}
+  }
 `;
 var _default = GridContainerStyle;
 exports.default = _default;

package/lib/components/grid/grid-item/grid-item.component.d.ts

@@ -5,6 +5,8 @@ declare namespace GridItem {
         const responsiveSettings: PropTypes.Requireable<(PropTypes.InferProps<{
             /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
             alignSelf: PropTypes.Requireable<string>;
+            /** Shorthand property for gridColumn and gridRow */
+            gridArea: PropTypes.Requireable<string | number>;
             /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
             gridColumn: PropTypes.Requireable<string | number>;
             /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
@@ -16,6 +18,7 @@ declare namespace GridItem {
         }> | null | undefined)[]>;
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         const alignSelf: PropTypes.Requireable<string>;
+        const gridArea: PropTypes.Requireable<string | number>;
         const gridColumn: PropTypes.Requireable<string | number>;
         const gridRow: PropTypes.Requireable<string | number>;
         const justifySelf: PropTypes.Requireable<string>;

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

@@ -38,6 +38,9 @@ GridItem.propTypes = {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
   alignSelf: _propTypes.default.string,
 
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
   gridColumn: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
@@ -51,6 +54,9 @@ GridItem.propTypes = {
     /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
     alignSelf: _propTypes.default.string,
 
+    /** Shorthand property for gridColumn and gridRow */
+    gridArea: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
     /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
     gridColumn: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 

package/lib/components/grid/grid-item/grid-item.d.ts

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { PaddingProps } from "styled-system";
+import {
+  PaddingProps,
+  GridAreaProps,
+  GridRowProps,
+  GridColumnProps,
+} from "styled-system";
 
 interface ResponsiveSettingsShape extends PaddingProps {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
@@ -8,10 +13,12 @@ interface ResponsiveSettingsShape extends PaddingProps {
   justifySelf?: string;
   /** Maximum width of the item */
   maxWidth?: string;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
 }
 
 export interface GridItemProps extends PaddingProps {
@@ -21,10 +28,12 @@ export interface GridItemProps extends PaddingProps {
   justifySelf?: string;
   /** Defines the Component(s) to be rendered within the GridItem */
   children?: React.ReactNode;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
   responsiveSettings?: ResponsiveSettingsShape[];
 }
 

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

@@ -28,6 +28,7 @@ function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
+      gridArea,
       gridColumn,
       gridRow,
       maxWidth,
@@ -42,6 +43,7 @@ function responsiveGridItem(responsiveSettings) {
       @media screen and (max-width: ${maxWidth}) {
         align-self: ${alignSelf || "stretch"};
         justify-self: ${justifySelf || "stretch"};
+        grid-area: ${gridArea};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
         padding: ${getSpacing(p)};
@@ -101,33 +103,30 @@ function getSpacing(prop) {
 const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes.default.space);
 const GridItemStyle = _styledComponents.default.div`
   margin: 0;
+  ${_space.padding}
 
   ${({
-  justifySelf
-}) => (0, _styledSystem.flexbox)({
+  alignSelf,
+  justifySelf,
+  gridArea,
+  gridColumn,
+  gridRow,
+  responsiveSettings
+}) => (0, _styledComponents.css)`
+    ${(0, _styledSystem.flexbox)({
+  alignSelf,
   justifySelf
 })}
-  ${({
-  alignSelf
-}) => (0, _styledSystem.flexbox)({
-  alignSelf
-})}
-  ${_space.padding}
-  ${({
+    ${(0, _styledSystem.grid)({
+  gridArea,
+  gridColumn,
   gridRow
-}) => (0, _styledSystem.grid)({
-  gridRow
-})}
-  ${({
-  gridColumn
-}) => (0, _styledSystem.grid)({
-  gridColumn
-})}
-  ${({
-  responsiveSettings
-}) => responsiveSettings && (0, _styledComponents.css)`
+})};
+
+    ${responsiveSettings && (0, _styledComponents.css)`
       ${responsiveGridItem(responsiveSettings)};
     `}
+  `}
 `;
 GridItemStyle.propTypes = {
   alignSelf: _propTypes2.default.string,
@@ -137,6 +136,7 @@ GridItemStyle.propTypes = {
   ...paddingPropTypes,
   responsiveSettings: _propTypes2.default.arrayOf(_propTypes2.default.shape({
     alignSelf: _propTypes2.default.string,
+    gridArea: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     gridColumn: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     gridRow: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     justifySelf: _propTypes2.default.string,
@@ -145,8 +145,7 @@ GridItemStyle.propTypes = {
   }))
 };
 GridItemStyle.defaultProps = {
-  gridColumn: "1 / 13",
-  gridRow: "auto"
+  gridArea: "auto / 1 / auto / 13"
 };
 var _default = GridItemStyle;
 exports.default = _default;

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

@@ -14,7 +14,7 @@ declare function Help({ className, href, helpId, children, tabIndex, as, tooltip
     tooltipBgColor: any;
     tooltipFontColor: any;
     tooltipFlipOverrides: any;
-    ariaLabel: any;
+    ariaLabel?: string | undefined;
 }): JSX.Element;
 declare namespace Help {
     namespace propTypes {

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

@@ -25,6 +25,8 @@ var _utils = require("../../style/utils");
 
 var _help2 = require("./help.config");
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -49,9 +51,10 @@ const Help = ({
   tooltipBgColor,
   tooltipFontColor,
   tooltipFlipOverrides,
-  ariaLabel,
+  ariaLabel = "help",
   ...rest
 }) => {
+  const defaultTooltipId = (0, _react.useRef)((0, _guid.default)());
   const helpElement = (0, _react.useRef)(null);
   const [isTooltipVisible, updateTooltipVisible] = (0, _react.useState)(false);
   const {
@@ -79,6 +82,7 @@ const Help = ({
   }
 
   return /*#__PURE__*/_react.default.createElement(_help.default, _extends({
+    "aria-describedby": isFocused || isTooltipVisible ? tooltipId || defaultTooltipId.current : undefined,
     className: className,
     as: tagType,
     href: href,
@@ -97,9 +101,10 @@ const Help = ({
     target: "_blank",
     rel: "noopener noreferrer"
   } : {
-    role: "tooltip",
-    "aria-label": ariaLabel || helpAriaLabel
-  }, (0, _utils.filterStyledSystemMarginProps)(rest), rest), /*#__PURE__*/_react.default.createElement(_icon.default, _extends({
+    role: "button",
+    "aria-label": helpAriaLabel || ariaLabel
+  }, (0, _utils.filterStyledSystemMarginProps)(rest), rest), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    "aria-hidden": true,
     type: type,
     tooltipMessage: children,
     tooltipPosition: tooltipPosition,
@@ -108,12 +113,8 @@ const Help = ({
     tooltipFontColor: tooltipFontColor,
     tooltipFlipOverrides: tooltipFlipOverrides,
     focusable: false,
-    tooltipId: tooltipId,
-    "aria-hidden": "true"
-  }, href && {
-    role: "tooltip",
-    ariaLabel: ariaLabel || helpAriaLabel
-  })));
+    tooltipId: tooltipId || defaultTooltipId.current
+  }));
 };
 
 Help.propTypes = { ...marginPropTypes,

package/lib/components/icon/icon.component.js

@@ -34,6 +34,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const Icon = /*#__PURE__*/_react.default.forwardRef(({
+  "aria-hidden": ariaHidden,
   bg,
   bgShape,
   bgSize,
@@ -54,7 +55,6 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   inputSize,
   role,
   ariaLabel,
-  "aria-hidden": ariaHidden,
   focusable = true,
   ...rest
 }, ref) => {
@@ -108,6 +108,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   const icon = /*#__PURE__*/_react.default.createElement(_icon.default, _extends({
+    "aria-hidden": ariaHidden,
     ref: ref,
     key: "icon",
     className: className || null,
@@ -115,8 +116,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   }, (0, _tags.default)("icon", rest), styleProps, {
     hasTooltip: hasTooltip,
     "aria-label": ariaLabel,
-    "aria-hidden": ariaHidden,
-    role: hasTooltip && role === undefined ? "tooltip" : role
+    role: role
   }));
 
   if (tooltipMessage) {

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

@@ -23,9 +23,7 @@ const StyledSettingsRow = _styledComponents.default.div`
   ${_styledSystem.margin}
 
   clear: both;
-  color: ${({
-  theme
-}) => theme.palette.slateTint(20)};
+  color: var(--colorsUtilityYin055);
   display: flex;
   font-size: 14px;
   justify-content: space-between;
@@ -35,9 +33,7 @@ const StyledSettingsRow = _styledComponents.default.div`
   ${({
   hasDivider
 }) => hasDivider && (0, _styledComponents.css)`
-      border-bottom: 1px solid ${({
-  theme
-}) => theme.palette.slateTint(90)};
+      border-bottom: 1px solid var(--colorsUtilityMajor050);
       padding-bottom: 30px;
     `}
 
@@ -46,9 +42,7 @@ const StyledSettingsRow = _styledComponents.default.div`
   }
 
   ${_heading.StyledHeadingTitle} {
-    color: ${({
-  theme
-}) => theme.palette.slate};
+    color: var(--colorsUtilityYin090);
     font-size: 15px;
     font-weight: bold;
     line-height: 18px;

package/lib/components/simple-color-picker/simple-color-input/simple-color-input.style.js

@@ -30,7 +30,7 @@ const StyledSimpleColorInput = (0, _styledComponents.default)(_input.Input)`
 
   &:focus + ${_colorSampleBox.default} {
     box-shadow: inset 0px 0px 0px var(--borderWidth200)
-      var(--colorsActionMajorYang100);
+      var(--colorsUtilityYang100);
     border: 2px solid var(--colorsSemanticFocus500);
   }
 `;

package/lib/components/simple-color-picker/tick-icon/tick-icon.style.js

@@ -25,8 +25,8 @@ const getIconColor = color => {
         greenMultiplier = 587,
         blueMultiplier = 114;
   const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
-  if (contrast < 128) return "var(--colorsActionMajorYang100)";
-  return "var(--colorsActionMajorYin090)";
+  if (contrast < 128) return "var(--colorsUtilityYang100)";
+  return "var(--colorsUtilityYin090)";
 };
 
 const StyledTickIcon = (0, _styledComponents.default)(_icon.default)`

package/lib/components/tooltip/tooltip.component.js

@@ -72,7 +72,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
       "data-popper-arrow": "",
       "data-element": "tooltip-pointer",
       bgColor: bgColor
-    })), /*#__PURE__*/_react.default.createElement("div", null, content)));
+    })), content));
   };
 
   return /*#__PURE__*/_react.default.createElement(_headless.default, _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.42.0",
+  "version": "104.44.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {