carbon-react 104.50.0 → 104.52.1

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

@@ -24,10 +24,10 @@ function renderChildren({
 
 }) {
   const iconColorMap = {
-    primary: "var(--colorsActionMajorYang100)",
-    secondary: "var(--colorsActionMajor500)",
-    tertiary: "var(--colorsActionMajor500)",
-    darkBackground: "var(--colorsActionMajor500)"
+    primary: "--colorsActionMajorYang100",
+    secondary: "--colorsActionMajor500",
+    tertiary: "--colorsActionMajor500",
+    darkBackground: "--colorsActionMajor500"
   };
   const iconProps = {
     "aria-hidden": true,

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -11,7 +11,7 @@ const variantStyles = {
     backgroundColor: "#FFFFFF"
   },
   dark: {
-    backgroundColor: "var(--colorsUtilityMajor050)"
+    backgroundColor: "--colorsUtilityMajor050"
   }
 };
 
@@ -34,7 +34,7 @@ const DismissibleBox = ({
   ml: 3
 }, /*#__PURE__*/React.createElement(Icon, {
   type: "close",
-  color: "var(--colorsActionMinor500)"
+  color: "--colorsActionMinor500"
 }))));
 
 DismissibleBox.propTypes = { ...propTypes.space,

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

@@ -1,11 +1,14 @@
+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";
 const FlatTableBody = /*#__PURE__*/React.forwardRef(({
-  children
+  children,
+  ...rest
 }, ref) => {
-  return /*#__PURE__*/React.createElement("tbody", {
+  return /*#__PURE__*/React.createElement("tbody", _extends({
     ref: ref
-  }, children);
+  }, rest), children);
 });
 FlatTableBody.propTypes = {
   /** Array of FlatTableRow. */

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

@@ -1,5 +1,6 @@
 export default FlatTableBodyDraggable;
-declare function FlatTableBodyDraggable({ children, getOrder }: {
+declare function FlatTableBodyDraggable({ children, getOrder, ...rest }: {
+    [x: string]: any;
     children: any;
     getOrder: any;
 }): JSX.Element;

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

@@ -33,7 +33,8 @@ DropTarget.propTypes = {
 
 const FlatTableBodyDraggable = ({
   children,
-  getOrder
+  getOrder,
+  ...rest
 }) => {
   const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
   const isFirstRender = useRef(true);
@@ -76,9 +77,9 @@ const FlatTableBodyDraggable = ({
 
   return /*#__PURE__*/React.createElement(DndProvider, {
     backend: HTML5Backend
-  }, /*#__PURE__*/React.createElement(DropTarget, {
+  }, /*#__PURE__*/React.createElement(DropTarget, _extends({
     getOrder: getItemsId
-  }, draggableItems.map(item => /*#__PURE__*/React.cloneElement(item, {
+  }, rest), draggableItems.map(item => /*#__PURE__*/React.cloneElement(item, {
     id: `${item.props.id}`,
     moveItem,
     findItem,

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

@@ -121,7 +121,7 @@ FlatTableCell.propTypes = {
   /** Sets a custom vertical right border */
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
 
-  /** Sets a custom vertical right border */
+  /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: PropTypes.string
 };
 export default FlatTableCell;

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

@@ -1,5 +1,6 @@
 export default FlatTableCheckbox;
-declare function FlatTableCheckbox({ as, checked, onChange, selectable, onClick, leftPosition, cellIndex, reportCellWidth, ariaLabelledBy, }: {
+declare function FlatTableCheckbox({ as, checked, onChange, selectable, onClick, leftPosition, cellIndex, reportCellWidth, ariaLabelledBy, ...rest }: {
+    [x: string]: any;
     as?: string | undefined;
     checked: any;
     onChange: any;

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

@@ -1,3 +1,5 @@
+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, { useLayoutEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import StyledFlatTableCheckbox from "./flat-table-checkbox.style";
@@ -12,7 +14,8 @@ const FlatTableCheckbox = ({
   leftPosition,
   cellIndex,
   reportCellWidth,
-  ariaLabelledBy
+  ariaLabelledBy,
+  ...rest
 }) => {
   const ref = useRef(null);
   useLayoutEffect(() => {
@@ -31,13 +34,13 @@ const FlatTableCheckbox = ({
     event.stopPropagation();
   };
 
-  return /*#__PURE__*/React.createElement(StyledFlatTableCheckbox, {
+  return /*#__PURE__*/React.createElement(StyledFlatTableCheckbox, _extends({
     ref: ref,
     makeCellSticky: !!reportCellWidth,
     leftPosition: leftPosition || 0,
     "data-element": dataElement,
     as: as
-  }, selectable && /*#__PURE__*/React.createElement(Checkbox, {
+  }, rest), selectable && /*#__PURE__*/React.createElement(Checkbox, {
     checked: checked,
     onChange: onChange,
     name: "flat-table-checkbox",

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

@@ -1,5 +1,6 @@
 export default FlatTableHead;
-declare function FlatTableHead({ children }: {
+declare function FlatTableHead({ children, ...rest }: {
+    [x: string]: any;
     children: any;
 }): JSX.Element;
 declare namespace FlatTableHead {

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

@@ -8,7 +8,8 @@ const getRefs = length => Array.from({
 }, () => /*#__PURE__*/React.createRef());
 
 const FlatTableHead = ({
-  children
+  children,
+  ...rest
 }) => {
   const [rowHeights, setRowHeights] = useState([]);
   const refs = getRefs(React.Children.count(children));
@@ -21,10 +22,10 @@ const FlatTableHead = ({
   }, []);
 
   if (React.Children.count(children) === 1) {
-    return /*#__PURE__*/React.createElement(StyledFlatTableHead, null, children);
+    return /*#__PURE__*/React.createElement(StyledFlatTableHead, rest, children);
   }
 
-  return /*#__PURE__*/React.createElement(StyledFlatTableHead, null, React.Children.map(children, (child, index) => {
+  return /*#__PURE__*/React.createElement(StyledFlatTableHead, rest, React.Children.map(children, (child, index) => {
     /* Applies left border if preceding row has a FlatTableRowHeader and current one does not. 
        This is only needed when the preceding row has rowSpans applied, 
        as in any other use case the rows will all have FlatTableRowHeaders */

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

@@ -28,7 +28,8 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   id,
   draggable,
   findItem,
-  moveItem
+  moveItem,
+  ...rest
 }, ref) => {
   const [isExpanded, setIsExpanded] = useState(expanded);
   let rowRef = useRef();
@@ -127,7 +128,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     horizontalBorderSize: horizontalBorderSize,
     applyBorderLeft: applyBorderLeft,
     draggable: draggable
-  }, interactiveRowProps), React.Children.map(children, (child, index) => {
+  }, interactiveRowProps, rest), React.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/React.cloneElement(child, {
       expandable: expandable && index === firstCellIndex(),
       onClick: expandable && index === firstCellIndex() && firstColumnExpandable ? () => toggleExpanded() : undefined,
@@ -154,7 +155,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   }))));
 });
 FlatTableRow.propTypes = {
-  /** Overrides default cell color */
+  /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
   bgColor: PropTypes.string,
 
   /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
@@ -181,7 +182,7 @@ FlatTableRow.propTypes = {
   /** Sets an expandable row to be expanded on start */
   expanded: PropTypes.bool,
 
-  /** Sets the color of the bottom border in the row */
+  /** Sets the color of the bottom border in the row, provide design token, any color from palette or any valid css color value. */
   horizontalBorderColor: PropTypes.string,
 
   /** Sets the weight of the bottom border in the row */

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

@@ -82,7 +82,7 @@ FlatTableRowHeader.propTypes = {
   /** Sets a custom vertical right border */
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
 
-  /** Sets a custom vertical right border */
+  /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: PropTypes.string
 };
 export default FlatTableRowHeader;

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

@@ -140,10 +140,10 @@ Icon.propTypes = { ...marginPropTypes,
   /** Icon font size */
   fontSize: PropTypes.oneOf(["small", "medium", "large", "extra-large"]),
 
-  /** Icon colour, provide any color from palette or any valid css color value. */
+  /** Icon colour, provide design token, any color from palette or any valid css color value. */
   color: PropTypes.string,
 
-  /** Background colour, provide any color from palette or any valid css color value. */
+  /** Background colour, provide design token, any color from palette, or any valid css color value. */
   bg: PropTypes.string,
 
   /** Sets the icon in the disabled state */
@@ -164,10 +164,10 @@ Icon.propTypes = { ...marginPropTypes,
   /** Control whether the tooltip is visible */
   tooltipVisible: PropTypes.bool,
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipBgColor: PropTypes.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipFontColor: PropTypes.string,
 
   /** Id passed to the tooltip container, used for accessibility purposes. */

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

@@ -7,6 +7,7 @@ import baseTheme from "../../style/themes/base";
 import iconSizeConfig, { ICON_SHAPES } from "./icon-config";
 import browserTypeCheck, { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
 import styledColor from "../../style/utils/color";
+import getColorValue from "../../style/utils/get-color-value";
 
 function adjustIconBgSize(fontSize, bgSize) {
   var _replacements$fontSiz;
@@ -56,9 +57,6 @@ const StyledIcon = styled.span`
     if (disabled) {
       finalColor = "var(--colorsYin030)";
       finalHoverColor = "var(--colorsYin030)";
-    } else if (typeof color === "string" && color.startsWith("var")) {
-      finalColor = color;
-      finalHoverColor = shade(0.2, theme.compatibility[color.replace("var(--", "").replace(")", "")]);
     } else if (color) {
       const {
         color: renderedColor
@@ -67,7 +65,7 @@ const StyledIcon = styled.span`
         theme
       });
       finalColor = renderedColor;
-      finalHoverColor = shade(0.2, renderedColor);
+      finalHoverColor = shade(0.2, getColorValue(renderedColor));
     } else {
       finalColor = "var(--colorsYin090)";
       finalHoverColor = "var(--colorsYin090)";
@@ -81,7 +79,7 @@ const StyledIcon = styled.span`
         theme
       });
       bgColor = backgroundColor;
-      bgHoverColor = shade(0.2, backgroundColor);
+      bgHoverColor = shade(0.2, getColorValue(backgroundColor));
     } else {
       bgColor = "transparent";
       bgHoverColor = "transparent";

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

@@ -1,13 +1,11 @@
 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, { useContext, useMemo } from "react";
-import { ThemeContext } from "styled-components";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import Icon from "../icon";
 import Event from "../../__internal__/utils/helpers/events";
 import { StyledLink, StyledContent } from "./link.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { baseTheme } from "../../style/themes";
 import useLocale from "../../hooks/__internal__/useLocale";
 const Link = /*#__PURE__*/React.forwardRef(({
   children,
@@ -29,7 +27,6 @@ const Link = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const l = useLocale();
-  const theme = useContext(ThemeContext) || baseTheme;
   const tabIndex = tabbable && !disabled ? "0" : "-1";
 
   const handleOnKeyDown = ev => {
@@ -53,7 +50,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
       type: icon,
       bgSize: "extra-small",
-      color: theme.colors.primary,
+      color: "--colorsActionMajor500",
       disabled: disabled,
       ariaLabel: ariaLabel,
       tooltipMessage: tooltipMessage,

package/esm/components/pill/pill.component.js

@@ -45,7 +45,7 @@ Pill.propTypes = {
   /** Change the color of a status pill. */
   colorVariant: PropTypes.oneOf(["neutral", "negative", "positive", "warning"]),
 
-  /** Override color variant, provide any color from palette or any valid css color value. */
+  /** Override color variant, provide design token, any color from palette or any valid css color value. */
   borderColor: PropTypes.string,
 
   /** The content to display inside of the pill.  */

package/esm/components/pill/pill.style.js

@@ -6,6 +6,7 @@ import styleConfig from "./pill.style.config";
 import { baseTheme } from "../../style/themes";
 import StyledIcon from "../icon/icon.style";
 import { toColor } from "../../style/utils/color.js";
+import getColorValue from "../../style/utils/get-color-value";
 
 function addStyleToPillIcon(fontSize) {
   return `
@@ -37,8 +38,8 @@ const PillStyle = styled.span`
   try {
     if (borderColor) {
       pillColor = toColor(theme, borderColor);
-      buttonFocusColor = shade(0.2, pillColor);
-      contentColor = meetsContrastGuidelines(pillColor, theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
+      buttonFocusColor = shade(0.2, getColorValue(pillColor));
+      contentColor = meetsContrastGuidelines(getColorValue(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
       const {
         varietyColor,

package/esm/components/portrait/portrait.component.js

@@ -152,10 +152,10 @@ Portrait.propTypes = { ...marginPropTypes,
   /** Defines the size of the tooltip content */
   tooltipSize: PropTypes.oneOf(["medium", "large"]),
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipBgColor: PropTypes.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipFontColor: PropTypes.string
 };
 Portrait.defaultProps = {

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -16,6 +16,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   defaultValue,
   id,
   name,
+  label,
   children,
   onOpen,
   onChange,
@@ -45,7 +46,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
 }, inputRef) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
   const selectListId = useRef(guid());
-  const labelId = useRef(guid());
+  const labelId = useRef(label ? guid() : undefined);
   const containerRef = useRef();
   const listboxRef = useRef();
   const isControlled = useRef(value !== undefined);
@@ -366,6 +367,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     return {
       id,
       name,
+      label,
       disabled,
       readOnly,
       inputRef: assignInput,
@@ -391,7 +393,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
-    labelId: labelId.current,
+    labelId: label ? labelId.current : undefined,
     anchorElement: textboxRef && textboxRef.parentElement,
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
@@ -426,10 +428,10 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     ref: containerRef
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
     activeDescendantId: activeDescendantId,
+    labelId: label ? labelId.current : undefined,
     "aria-controls": isOpen ? selectListId.current : undefined,
     isOpen: isOpen,
     hasTextCursor: true,
-    labelId: labelId.current,
     textboxRef: textboxRef
   }, getTextboxProps()))), isOpen && selectList);
 });

package/esm/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,14 +1,14 @@
 export default SelectTextbox;
-declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
+declare function SelectTextbox({ accessibilityLabelId, labelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
     [x: string]: any;
-    accessibilityLabelId?: string | undefined;
+    accessibilityLabelId: any;
+    labelId: any;
     "aria-controls": any;
     value: any;
     disabled: any;
     isOpen: any;
     readOnly: any;
     placeholder: any;
-    labelId: any;
     size: any;
     onClick: any;
     onFocus: any;

package/esm/components/select/select-textbox/select-textbox.component.js

@@ -45,14 +45,14 @@ const modifiers = [{
 }];
 
 const SelectTextbox = ({
-  accessibilityLabelId = "",
+  accessibilityLabelId,
+  labelId,
   "aria-controls": ariaControls,
   value,
   disabled,
   isOpen,
   readOnly,
   placeholder,
-  labelId,
   size,
   onClick,
   onFocus,
@@ -133,9 +133,12 @@ const SelectTextbox = ({
   }
 
   function getInputAriaAttributes() {
+    const joinIds = (...ids) => ids.filter(item => item !== undefined).join(" ");
+
+    const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
     return {
       "aria-expanded": isOpen,
-      "aria-labelledby": hasTextCursor ? `${labelId} ${accessibilityLabelId}` : `${labelId} ${textId.current}`,
+      "aria-labelledby": ariaLabelledby || undefined,
       "aria-activedescendant": activeDescendantId,
       "aria-controls": ariaControls,
       "aria-autocomplete": hasTextCursor ? "both" : undefined,

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

@@ -102,10 +102,10 @@ Tooltip.propTypes = {
   // Reference element, tooltip will be positioned in relation to this element
   target: PropTypes.instanceOf(Element),
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   bgColor: PropTypes.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   fontColor: PropTypes.string,
 
   /** @ignore @private */

package/esm/style/utils/color.js

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { color as styledColor } from "styled-system";
+import tokens from "@sage/design-tokens/js/base/common";
 /*
  * styled-system/color allows users to use a color from the theme, from the `colors` object.
  *
@@ -21,6 +22,10 @@ import { color as styledColor } from "styled-system";
  */
 
 export const toColor = (theme, color) => {
+  if (color.startsWith("--") && color.slice(2) in tokens) {
+    return `var(${color})`;
+  }
+
   const {
     palette
   } = theme;

package/esm/style/utils/get-color-value.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color: string) => string;
+export default _default;

package/esm/style/utils/get-color-value.js

@@ -0,0 +1,8 @@
+import tokens from "@sage/design-tokens/js/base/common";
+export default (color => {
+  if (color.startsWith("var")) {
+    return tokens[color.replace("var(--", "").replace(")", "")];
+  }
+
+  return color;
+});

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

@@ -43,10 +43,10 @@ function renderChildren({
 
 }) {
   const iconColorMap = {
-    primary: "var(--colorsActionMajorYang100)",
-    secondary: "var(--colorsActionMajor500)",
-    tertiary: "var(--colorsActionMajor500)",
-    darkBackground: "var(--colorsActionMajor500)"
+    primary: "--colorsActionMajorYang100",
+    secondary: "--colorsActionMajor500",
+    tertiary: "--colorsActionMajor500",
+    darkBackground: "--colorsActionMajor500"
   };
   const iconProps = {
     "aria-hidden": true,

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -26,7 +26,7 @@ const variantStyles = {
     backgroundColor: "#FFFFFF"
   },
   dark: {
-    backgroundColor: "var(--colorsUtilityMajor050)"
+    backgroundColor: "--colorsUtilityMajor050"
   }
 };
 
@@ -49,7 +49,7 @@ const DismissibleBox = ({
   ml: 3
 }, /*#__PURE__*/_react.default.createElement(_icon.default, {
   type: "close",
-  color: "var(--colorsActionMinor500)"
+  color: "--colorsActionMinor500"
 }))));
 
 DismissibleBox.propTypes = { ..._propTypes2.default.space,

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

@@ -11,12 +11,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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); }
+
 const FlatTableBody = /*#__PURE__*/_react.default.forwardRef(({
-  children
+  children,
+  ...rest
 }, ref) => {
-  return /*#__PURE__*/_react.default.createElement("tbody", {
+  return /*#__PURE__*/_react.default.createElement("tbody", _extends({
     ref: ref
-  }, children);
+  }, rest), children);
 });
 
 FlatTableBody.propTypes = {

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

@@ -1,5 +1,6 @@
 export default FlatTableBodyDraggable;
-declare function FlatTableBodyDraggable({ children, getOrder }: {
+declare function FlatTableBodyDraggable({ children, getOrder, ...rest }: {
+    [x: string]: any;
     children: any;
     getOrder: any;
 }): JSX.Element;

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

@@ -52,7 +52,8 @@ DropTarget.propTypes = {
 
 const FlatTableBodyDraggable = ({
   children,
-  getOrder
+  getOrder,
+  ...rest
 }) => {
   const [draggableItems, setDraggableItems] = (0, _react.useState)(_react.default.Children.toArray(children));
   const isFirstRender = (0, _react.useRef)(true);
@@ -95,9 +96,9 @@ const FlatTableBodyDraggable = ({
 
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
     backend: _reactDndHtml5Backend.HTML5Backend
-  }, /*#__PURE__*/_react.default.createElement(DropTarget, {
+  }, /*#__PURE__*/_react.default.createElement(DropTarget, _extends({
     getOrder: getItemsId
-  }, draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
+  }, rest), draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
     id: `${item.props.id}`,
     moveItem,
     findItem,

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

@@ -140,7 +140,7 @@ FlatTableCell.propTypes = {
   /** Sets a custom vertical right border */
   verticalBorder: _propTypes.default.oneOf(["small", "medium", "large"]),
 
-  /** Sets a custom vertical right border */
+  /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: _propTypes.default.string
 };
 var _default = FlatTableCell;

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

@@ -1,5 +1,6 @@
 export default FlatTableCheckbox;
-declare function FlatTableCheckbox({ as, checked, onChange, selectable, onClick, leftPosition, cellIndex, reportCellWidth, ariaLabelledBy, }: {
+declare function FlatTableCheckbox({ as, checked, onChange, selectable, onClick, leftPosition, cellIndex, reportCellWidth, ariaLabelledBy, ...rest }: {
+    [x: string]: any;
     as?: string | undefined;
     checked: any;
     onChange: any;

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

@@ -19,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
 const FlatTableCheckbox = ({
   as = "td",
   checked,
@@ -28,7 +30,8 @@ const FlatTableCheckbox = ({
   leftPosition,
   cellIndex,
   reportCellWidth,
-  ariaLabelledBy
+  ariaLabelledBy,
+  ...rest
 }) => {
   const ref = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(() => {
@@ -47,13 +50,13 @@ const FlatTableCheckbox = ({
     event.stopPropagation();
   };
 
-  return /*#__PURE__*/_react.default.createElement(_flatTableCheckbox.default, {
+  return /*#__PURE__*/_react.default.createElement(_flatTableCheckbox.default, _extends({
     ref: ref,
     makeCellSticky: !!reportCellWidth,
     leftPosition: leftPosition || 0,
     "data-element": dataElement,
     as: as
-  }, selectable && /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+  }, rest), selectable && /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
     checked: checked,
     onChange: onChange,
     name: "flat-table-checkbox",

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

@@ -1,5 +1,6 @@
 export default FlatTableHead;
-declare function FlatTableHead({ children }: {
+declare function FlatTableHead({ children, ...rest }: {
+    [x: string]: any;
     children: any;
 }): JSX.Element;
 declare namespace FlatTableHead {

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

@@ -24,7 +24,8 @@ const getRefs = length => Array.from({
 }, () => /*#__PURE__*/_react.default.createRef());
 
 const FlatTableHead = ({
-  children
+  children,
+  ...rest
 }) => {
   const [rowHeights, setRowHeights] = (0, _react.useState)([]);
   const refs = getRefs(_react.default.Children.count(children));
@@ -37,10 +38,10 @@ const FlatTableHead = ({
   }, []);
 
   if (_react.default.Children.count(children) === 1) {
-    return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, null, children);
+    return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, rest, children);
   }
 
-  return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, null, _react.default.Children.map(children, (child, index) => {
+  return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, rest, _react.default.Children.map(children, (child, index) => {
     /* Applies left border if preceding row has a FlatTableRowHeader and current one does not. 
        This is only needed when the preceding row has rowSpans applied, 
        as in any other use case the rows will all have FlatTableRowHeaders */

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

@@ -50,7 +50,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   id,
   draggable,
   findItem,
-  moveItem
+  moveItem,
+  ...rest
 }, ref) => {
   const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
   let rowRef = (0, _react.useRef)();
@@ -151,7 +152,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     horizontalBorderSize: horizontalBorderSize,
     applyBorderLeft: applyBorderLeft,
     draggable: draggable
-  }, interactiveRowProps), _react.default.Children.map(children, (child, index) => {
+  }, interactiveRowProps, rest), _react.default.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/_react.default.cloneElement(child, {
       expandable: expandable && index === firstCellIndex(),
       onClick: expandable && index === firstCellIndex() && firstColumnExpandable ? () => toggleExpanded() : undefined,
@@ -179,7 +180,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 FlatTableRow.propTypes = {
-  /** Overrides default cell color */
+  /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
   bgColor: _propTypes.default.string,
 
   /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
@@ -206,7 +207,7 @@ FlatTableRow.propTypes = {
   /** Sets an expandable row to be expanded on start */
   expanded: _propTypes.default.bool,
 
-  /** Sets the color of the bottom border in the row */
+  /** Sets the color of the bottom border in the row, provide design token, any color from palette or any valid css color value. */
   horizontalBorderColor: _propTypes.default.string,
 
   /** Sets the weight of the bottom border in the row */

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

@@ -97,7 +97,7 @@ FlatTableRowHeader.propTypes = {
   /** Sets a custom vertical right border */
   verticalBorder: _propTypes.default.oneOf(["small", "medium", "large"]),
 
-  /** Sets a custom vertical right border */
+  /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: _propTypes.default.string
 };
 var _default = FlatTableRowHeader;

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

@@ -165,10 +165,10 @@ Icon.propTypes = { ...marginPropTypes,
   /** Icon font size */
   fontSize: _propTypes.default.oneOf(["small", "medium", "large", "extra-large"]),
 
-  /** Icon colour, provide any color from palette or any valid css color value. */
+  /** Icon colour, provide design token, any color from palette or any valid css color value. */
   color: _propTypes.default.string,
 
-  /** Background colour, provide any color from palette or any valid css color value. */
+  /** Background colour, provide design token, any color from palette, or any valid css color value. */
   bg: _propTypes.default.string,
 
   /** Sets the icon in the disabled state */
@@ -189,10 +189,10 @@ Icon.propTypes = { ...marginPropTypes,
   /** Control whether the tooltip is visible */
   tooltipVisible: _propTypes.default.bool,
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipBgColor: _propTypes.default.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipFontColor: _propTypes.default.string,
 
   /** Id passed to the tooltip container, used for accessibility purposes. */

package/lib/components/icon/icon.style.js

@@ -23,6 +23,8 @@ var _browserTypeCheck = _interopRequireWildcard(require("../../__internal__/util
 
 var _color = _interopRequireDefault(require("../../style/utils/color"));
 
+var _getColorValue = _interopRequireDefault(require("../../style/utils/get-color-value"));
+
 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; }
@@ -77,9 +79,6 @@ const StyledIcon = _styledComponents.default.span`
     if (disabled) {
       finalColor = "var(--colorsYin030)";
       finalHoverColor = "var(--colorsYin030)";
-    } else if (typeof color === "string" && color.startsWith("var")) {
-      finalColor = color;
-      finalHoverColor = (0, _polished.shade)(0.2, theme.compatibility[color.replace("var(--", "").replace(")", "")]);
     } else if (color) {
       const {
         color: renderedColor
@@ -88,7 +87,7 @@ const StyledIcon = _styledComponents.default.span`
         theme
       });
       finalColor = renderedColor;
-      finalHoverColor = (0, _polished.shade)(0.2, renderedColor);
+      finalHoverColor = (0, _polished.shade)(0.2, (0, _getColorValue.default)(renderedColor));
     } else {
       finalColor = "var(--colorsYin090)";
       finalHoverColor = "var(--colorsYin090)";
@@ -102,7 +101,7 @@ const StyledIcon = _styledComponents.default.span`
         theme
       });
       bgColor = backgroundColor;
-      bgHoverColor = (0, _polished.shade)(0.2, backgroundColor);
+      bgHoverColor = (0, _polished.shade)(0.2, (0, _getColorValue.default)(backgroundColor));
     } else {
       bgColor = "transparent";
       bgHoverColor = "transparent";

package/lib/components/link/link.component.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = require("styled-components");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../icon"));
@@ -19,8 +17,6 @@ var _link = require("./link.style");
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _themes = require("../../style/themes");
-
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -51,9 +47,6 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const l = (0, _useLocale.default)();
-
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
-
   const tabIndex = tabbable && !disabled ? "0" : "-1";
 
   const handleOnKeyDown = ev => {
@@ -77,7 +70,7 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
     return hasProperAlignment ? /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: icon,
       bgSize: "extra-small",
-      color: theme.colors.primary,
+      color: "--colorsActionMajor500",
       disabled: disabled,
       ariaLabel: ariaLabel,
       tooltipMessage: tooltipMessage,

package/lib/components/pill/pill.component.js

@@ -62,7 +62,7 @@ Pill.propTypes = {
   /** Change the color of a status pill. */
   colorVariant: _propTypes.default.oneOf(["neutral", "negative", "positive", "warning"]),
 
-  /** Override color variant, provide any color from palette or any valid css color value. */
+  /** Override color variant, provide design token, any color from palette or any valid css color value. */
   borderColor: _propTypes.default.string,
 
   /** The content to display inside of the pill.  */

package/lib/components/pill/pill.style.js

@@ -21,6 +21,8 @@ var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
 var _color = require("../../style/utils/color.js");
 
+var _getColorValue = _interopRequireDefault(require("../../style/utils/get-color-value"));
+
 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; }
@@ -57,8 +59,8 @@ const PillStyle = _styledComponents.default.span`
   try {
     if (borderColor) {
       pillColor = (0, _color.toColor)(theme, borderColor);
-      buttonFocusColor = (0, _polished.shade)(0.2, pillColor);
-      contentColor = (0, _polished.meetsContrastGuidelines)(pillColor, theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
+      buttonFocusColor = (0, _polished.shade)(0.2, (0, _getColorValue.default)(pillColor));
+      contentColor = (0, _polished.meetsContrastGuidelines)((0, _getColorValue.default)(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
       const {
         varietyColor,

package/lib/components/portrait/portrait.component.js

@@ -174,10 +174,10 @@ Portrait.propTypes = { ...marginPropTypes,
   /** Defines the size of the tooltip content */
   tooltipSize: _propTypes.default.oneOf(["medium", "large"]),
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipBgColor: _propTypes.default.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipFontColor: _propTypes.default.string
 };
 Portrait.defaultProps = {

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -40,6 +40,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   defaultValue,
   id,
   name,
+  label,
   children,
   onOpen,
   onChange,
@@ -69,7 +70,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
 }, inputRef) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const selectListId = (0, _react.useRef)((0, _guid.default)());
-  const labelId = (0, _react.useRef)((0, _guid.default)());
+  const labelId = (0, _react.useRef)(label ? (0, _guid.default)() : undefined);
   const containerRef = (0, _react.useRef)();
   const listboxRef = (0, _react.useRef)();
   const isControlled = (0, _react.useRef)(value !== undefined);
@@ -390,6 +391,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     return {
       id,
       name,
+      label,
       disabled,
       readOnly,
       inputRef: assignInput,
@@ -415,7 +417,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
-    labelId: labelId.current,
+    labelId: label ? labelId.current : undefined,
     anchorElement: textboxRef && textboxRef.parentElement,
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
@@ -451,10 +453,10 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
     activeDescendantId: activeDescendantId,
+    labelId: label ? labelId.current : undefined,
     "aria-controls": isOpen ? selectListId.current : undefined,
     isOpen: isOpen,
     hasTextCursor: true,
-    labelId: labelId.current,
     textboxRef: textboxRef
   }, getTextboxProps()))), isOpen && selectList);
 });

package/lib/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,14 +1,14 @@
 export default SelectTextbox;
-declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
+declare function SelectTextbox({ accessibilityLabelId, labelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
     [x: string]: any;
-    accessibilityLabelId?: string | undefined;
+    accessibilityLabelId: any;
+    labelId: any;
     "aria-controls": any;
     value: any;
     disabled: any;
     isOpen: any;
     readOnly: any;
     placeholder: any;
-    labelId: any;
     size: any;
     onClick: any;
     onFocus: any;

package/lib/components/select/select-textbox/select-textbox.component.js

@@ -66,14 +66,14 @@ const modifiers = [{
 }];
 
 const SelectTextbox = ({
-  accessibilityLabelId = "",
+  accessibilityLabelId,
+  labelId,
   "aria-controls": ariaControls,
   value,
   disabled,
   isOpen,
   readOnly,
   placeholder,
-  labelId,
   size,
   onClick,
   onFocus,
@@ -154,9 +154,12 @@ const SelectTextbox = ({
   }
 
   function getInputAriaAttributes() {
+    const joinIds = (...ids) => ids.filter(item => item !== undefined).join(" ");
+
+    const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
     return {
       "aria-expanded": isOpen,
-      "aria-labelledby": hasTextCursor ? `${labelId} ${accessibilityLabelId}` : `${labelId} ${textId.current}`,
+      "aria-labelledby": ariaLabelledby || undefined,
       "aria-activedescendant": activeDescendantId,
       "aria-controls": ariaControls,
       "aria-autocomplete": hasTextCursor ? "both" : undefined,

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

@@ -124,10 +124,10 @@ Tooltip.propTypes = {
   // Reference element, tooltip will be positioned in relation to this element
   target: _propTypes.default.instanceOf(Element),
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   bgColor: _propTypes.default.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   fontColor: _propTypes.default.string,
 
   /** @ignore @private */

package/lib/style/utils/color.js

@@ -7,6 +7,10 @@ exports.default = exports.toColor = void 0;
 
 var _styledSystem = require("styled-system");
 
+var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // eslint-disable-next-line no-restricted-imports
 
 /*
@@ -29,6 +33,10 @@ var _styledSystem = require("styled-system");
  * This allows us to keep our themes as plain objects.
  */
 const toColor = (theme, color) => {
+  if (color.startsWith("--") && color.slice(2) in _common.default) {
+    return `var(${color})`;
+  }
+
   const {
     palette
   } = theme;

package/lib/style/utils/get-color-value.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color: string) => string;
+export default _default;

package/lib/style/utils/get-color-value.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = color => {
+  if (color.startsWith("var")) {
+    return _common.default[color.replace("var(--", "").replace(")", "")];
+  }
+
+  return color;
+};
+
+exports.default = _default;

package/package.json

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