carbon-react 142.4.1 → 142.5.1

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

@@ -102,6 +102,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     borderRadius?: BorderRadiusType | BorderRadiusType[];
     /** Hides the borders for the component. Please note that validation and focus styling will still be applied */
     hideBorders?: boolean;
+    /** Specify the minimum height */
+    minHeight?: number;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea as OriginalTextarea };

package/esm/components/textarea/textarea.component.js

@@ -8,7 +8,7 @@ import Input from "../../__internal__/input/input.component";
 import { InputBehaviour } from "../../__internal__/input-behaviour";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
 import guid from "../../__internal__/utils/helpers/guid";
-import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
+import StyledTextarea, { DEFAULT_MIN_HEIGHT } from "./textarea.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
@@ -60,11 +60,13 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   hideBorders = false,
   required,
   isOptional,
+  minHeight = DEFAULT_MIN_HEIGHT,
   ...rest
 }, ref) => {
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const [textareaMinHeight, setTextareaMinHeight] = useState(DEFAULT_MIN_HEIGHT);
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
   const {
     current: id
@@ -105,10 +107,9 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
     warnBorderRadiusArrayTooLarge = true;
   }
-  const minHeight = useRef(MIN_HEIGHT);
-  const expandTextarea = () => {
+  const expandTextarea = useCallback(() => {
     const textarea = internalRef.current;
-    if (textarea?.scrollHeight && textarea?.scrollHeight > minHeight.current) {
+    if (textarea?.scrollHeight && textarea?.scrollHeight > textareaMinHeight) {
       // need to reset scroll position of the nearest parent which scrolls
       let scrollElement = textarea;
       while (scrollElement && !scrollElement?.scrollTop) {
@@ -117,12 +118,12 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
       const scrollPosition = scrollElement?.scrollTop;
       textarea.style.height = "0px";
       // Set the height so all content is shown
-      textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
+      textarea.style.height = `${Math.max(textarea.scrollHeight, textareaMinHeight)}px`;
       if (scrollElement && scrollPosition) {
         scrollElement.scrollTop = scrollPosition;
       }
     }
-  };
+  }, [textareaMinHeight]);
   const {
     labelId,
     validationId,
@@ -140,9 +141,11 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   const [characterCount, visuallyHiddenHintId] = useCharacterCount(value, characterLimit, characterCountAriaLive);
   useEffect(() => {
     if (rows) {
-      minHeight.current = internalRef?.current?.scrollHeight || 0;
+      setTextareaMinHeight(internalRef?.current?.scrollHeight || 0);
+    } else {
+      setTextareaMinHeight(minHeight > DEFAULT_MIN_HEIGHT ? minHeight : DEFAULT_MIN_HEIGHT);
     }
-  }, [rows]);
+  }, [minHeight, rows]);
   useEffect(() => {
     if (expandable) {
       expandTextarea();
@@ -151,7 +154,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     if (expandable) {
       window.addEventListener("resize", expandTextarea);
-      minHeight.current = internalRef?.current?.clientHeight || 0;
+      setTextareaMinHeight(internalRef?.current?.clientHeight || 0);
       // need to also run expandTextarea when the Sage UI font completes loading, to prevent strange scroll
       // behaviour when it only loads after the component is rendered
       document.fonts?.addEventListener("loadingdone", expandTextarea);
@@ -162,7 +165,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
         document.fonts?.removeEventListener("loadingdone", expandTextarea);
       }
     };
-  }, [expandable]);
+  }, [expandTextarea, expandable]);
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = useRef(guid());
   const inputHintId = inputHint ? hintId.current : undefined;
@@ -216,7 +219,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    hasIcon: hasIconInside
+    hasIcon: hasIconInside,
+    minHeight: textareaMinHeight
   }, marginProps), /*#__PURE__*/React.createElement(FormField, {
     fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,
@@ -475,6 +479,7 @@ if (process.env.NODE_ENV !== "production") {
       "valueOf": PropTypes.func.isRequired
     }), PropTypes.string]),
     "min": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    "minHeight": PropTypes.number,
     "minLength": PropTypes.number,
     "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,

package/esm/components/textarea/textarea.style.d.ts

@@ -1,5 +1,6 @@
-export declare const MIN_HEIGHT = 64;
-export interface StyledTextAreaProps {
+import { TextareaProps } from "./textarea.component";
+export declare const DEFAULT_MIN_HEIGHT = 64;
+export interface StyledTextAreaProps extends Pick<TextareaProps, "minHeight"> {
     /** When true, label is placed in line an input */
     labelInline?: boolean;
     /** When true, adjusts padding for icon */

package/esm/components/textarea/textarea.style.js

@@ -4,14 +4,16 @@ import StyledInput from "../../__internal__/input/input.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import BaseTheme from "../../style/themes/base";
-export const MIN_HEIGHT = 64;
+export const DEFAULT_MIN_HEIGHT = 64;
 const StyledTextarea = styled.div`
   ${margin};
 
   ${StyledInput} {
     box-sizing: border-box;
     resize: none;
-    min-height: ${MIN_HEIGHT}px;
+    ${({
+  minHeight
+}) => `min-height: ${minHeight || DEFAULT_MIN_HEIGHT}px;`}
     padding: var(--spacing150) var(--spacing200);
 
     ${({

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

@@ -2,7 +2,9 @@ import React from "react";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { SpaceProps, WidthProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { TILE_HIGHLIGHT_VARIANTS } from "./tile.config";
 declare type DesignTokensType = keyof typeof DesignTokens;
+declare type HighlightVariantType = typeof TILE_HIGHLIGHT_VARIANTS[number];
 export interface TileProps extends SpaceProps, WidthProps, TagProps {
     /** Sets the theme of the tile */
     variant?: "tile" | "transparent" | "active" | "grey";
@@ -31,6 +33,8 @@ export interface TileProps extends SpaceProps, WidthProps, TagProps {
      * Set a percentage-based height for the whole Tile component, relative to its parent.
      */
     height?: string | number;
+    /** Sets the highlight variant */
+    highlightVariant?: HighlightVariantType;
 }
-export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, borderWidth, borderVariant, ...rest }: TileProps) => React.JSX.Element;
+export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, borderWidth, borderVariant, highlightVariant, ...rest }: TileProps) => React.JSX.Element;
 export default Tile;

package/esm/components/tile/tile.component.js

@@ -1,7 +1,7 @@
 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 from "react";
 import PropTypes from "prop-types";
-import StyledTile from "./tile.style";
+import StyledTile, { StyledHighlight } from "./tile.style";
 import TileContext from "./__internal__/tile.context";
 import filterStyledSystemPaddingProps from "../../style/utils/filter-styled-system-padding-props";
 import filterStyledSystemMarginProps from "../../style/utils/filter-styled-system-margin-props";
@@ -17,6 +17,7 @@ export const Tile = ({
   height,
   borderWidth,
   borderVariant,
+  highlightVariant,
   ...rest
 }) => {
   const isHorizontal = orientation === "horizontal";
@@ -26,7 +27,7 @@ export const Tile = ({
   });
   const marginProps = filterStyledSystemMarginProps(rest);
   const contentPaddingProps = computeContentPadding(paddingProps, isHorizontal);
-  return /*#__PURE__*/React.createElement(StyledTile, _extends({
+  const tile = /*#__PURE__*/React.createElement(StyledTile, _extends({
     variant: variant,
     width: width,
     height: height,
@@ -41,5 +42,14 @@ export const Tile = ({
       paddingPropsFromTile: contentPaddingProps
     }
   }, children));
+  if (highlightVariant) {
+    return /*#__PURE__*/React.createElement(StyledHighlight, {
+      variant: highlightVariant,
+      roundness: roundness,
+      "aria-hidden": true,
+      "data-role": `tile-${highlightVariant}-highlight`
+    }, tile);
+  }
+  return tile;
 };
 export default Tile;

package/esm/components/tile/tile.config.d.ts

@@ -1,3 +1,4 @@
 export declare const TILE_ORIENTATIONS: string[];
 export declare const TILE_THEMES: string[];
 export declare const TILE_BORDER_VARIANTS: string[];
+export declare const TILE_HIGHLIGHT_VARIANTS: string[];

package/esm/components/tile/tile.config.js

@@ -1,3 +1,4 @@
 export const TILE_ORIENTATIONS = ["horizontal", "vertical"];
 export const TILE_THEMES = ["tile", "transparent", "active", "grey"];
-export const TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];
+export const TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];
+export const TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info"];

package/esm/components/tile/tile.style.d.ts

@@ -1,6 +1,10 @@
 import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export declare const StyledHighlight: import("styled-components").StyledComponent<"div", any, {
+    variant: Required<TileProps["highlightVariant"]>;
+    roundness: TileProps["roundness"];
+}, never>;
 export default StyledTile;

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

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import computeSizing from "../../style/utils/element-sizing";
+import StyledTileContent from "./tile-content/tile-content.style";
 const getBorderColor = (borderVariant, variant) => {
   switch (borderVariant) {
     case "selected":
@@ -35,6 +36,23 @@ const getBorderRadius = roundness => {
       return "var(--borderRadius100)";
   }
 };
+const getHeighlightVariant = variant => {
+  switch (variant) {
+    case "success":
+      return "var(--colorsSemanticPositive500)";
+    case "neutral":
+      return "var(--colorsSemanticNeutral500)";
+    case "error":
+      return "var(--colorsSemanticNegative500)";
+    case "warning":
+      return "var(--colorsSemanticCaution500)";
+    case "info":
+      return "var(--colorsSemanticInfo500)";
+    default:
+      // gradient is default
+      return "linear-gradient(0deg, rgb(143, 73, 254) 5%, rgb(0, 146, 219) 50%, rgb(19, 160, 56) 95%)";
+  }
+};
 const StyledTile = styled.div`
   ${({
   borderVariant,
@@ -53,12 +71,12 @@ const StyledTile = styled.div`
     border-radius: ${getBorderRadius(roundness)};
     --tileBorderRadius: ${getBorderRadius(roundness)};
 
-    > *:first-child {
+    > *:first-child:not(${StyledTileContent}) {
       border-top-left-radius: calc(${getBorderRadius(roundness)} - 1px);
       border-top-right-radius: calc(${getBorderRadius(roundness)} - 1px);
     }
 
-    > *:last-child {
+    > *:last-child:not(${StyledTileContent}) {
       border-bottom-left-radius: calc(${getBorderRadius(roundness)} - 1px);
       border-bottom-right-radius: calc(${getBorderRadius(roundness)} - 1px);
     }
@@ -91,4 +109,21 @@ const StyledTile = styled.div`
 StyledTile.defaultProps = {
   theme: baseTheme
 };
+export const StyledHighlight = styled.div`
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: ${({
+  variant
+}) => getHeighlightVariant(variant)};
+  border-radius: ${({
+  roundness
+}) => getBorderRadius(roundness)};
+
+  ${StyledTile} {
+    border-left: 0;
+    left: 4px;
+    width: calc(100% - 4px);
+  }
+`;
 export default StyledTile;

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

@@ -102,6 +102,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     borderRadius?: BorderRadiusType | BorderRadiusType[];
     /** Hides the borders for the component. Please note that validation and focus styling will still be applied */
     hideBorders?: boolean;
+    /** Specify the minimum height */
+    minHeight?: number;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea as OriginalTextarea };

package/lib/components/textarea/textarea.component.js

@@ -69,11 +69,13 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   hideBorders = false,
   required,
   isOptional,
+  minHeight = _textarea.DEFAULT_MIN_HEIGHT,
   ...rest
 }, ref) => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
+  const [textareaMinHeight, setTextareaMinHeight] = (0, _react.useState)(_textarea.DEFAULT_MIN_HEIGHT);
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
   const {
     current: id
@@ -114,10 +116,9 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
     warnBorderRadiusArrayTooLarge = true;
   }
-  const minHeight = (0, _react.useRef)(_textarea.MIN_HEIGHT);
-  const expandTextarea = () => {
+  const expandTextarea = (0, _react.useCallback)(() => {
     const textarea = internalRef.current;
-    if (textarea?.scrollHeight && textarea?.scrollHeight > minHeight.current) {
+    if (textarea?.scrollHeight && textarea?.scrollHeight > textareaMinHeight) {
       // need to reset scroll position of the nearest parent which scrolls
       let scrollElement = textarea;
       while (scrollElement && !scrollElement?.scrollTop) {
@@ -126,12 +127,12 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
       const scrollPosition = scrollElement?.scrollTop;
       textarea.style.height = "0px";
       // Set the height so all content is shown
-      textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
+      textarea.style.height = `${Math.max(textarea.scrollHeight, textareaMinHeight)}px`;
       if (scrollElement && scrollPosition) {
         scrollElement.scrollTop = scrollPosition;
       }
     }
-  };
+  }, [textareaMinHeight]);
   const {
     labelId,
     validationId,
@@ -149,9 +150,11 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(value, characterLimit, characterCountAriaLive);
   (0, _react.useEffect)(() => {
     if (rows) {
-      minHeight.current = internalRef?.current?.scrollHeight || 0;
+      setTextareaMinHeight(internalRef?.current?.scrollHeight || 0);
+    } else {
+      setTextareaMinHeight(minHeight > _textarea.DEFAULT_MIN_HEIGHT ? minHeight : _textarea.DEFAULT_MIN_HEIGHT);
     }
-  }, [rows]);
+  }, [minHeight, rows]);
   (0, _react.useEffect)(() => {
     if (expandable) {
       expandTextarea();
@@ -160,7 +163,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   (0, _react.useEffect)(() => {
     if (expandable) {
       window.addEventListener("resize", expandTextarea);
-      minHeight.current = internalRef?.current?.clientHeight || 0;
+      setTextareaMinHeight(internalRef?.current?.clientHeight || 0);
       // need to also run expandTextarea when the Sage UI font completes loading, to prevent strange scroll
       // behaviour when it only loads after the component is rendered
       document.fonts?.addEventListener("loadingdone", expandTextarea);
@@ -171,7 +174,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
         document.fonts?.removeEventListener("loadingdone", expandTextarea);
       }
     };
-  }, [expandable]);
+  }, [expandTextarea, expandable]);
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = (0, _react.useRef)((0, _guid.default)());
   const inputHintId = inputHint ? hintId.current : undefined;
@@ -225,7 +228,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    hasIcon: hasIconInside
+    hasIcon: hasIconInside,
+    minHeight: textareaMinHeight
   }, marginProps), /*#__PURE__*/_react.default.createElement(_formField.default, {
     fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,
@@ -484,6 +488,7 @@ if (process.env.NODE_ENV !== "production") {
       "valueOf": _propTypes.default.func.isRequired
     }), _propTypes.default.string]),
     "min": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    "minHeight": _propTypes.default.number,
     "minLength": _propTypes.default.number,
     "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
       "__@toStringTag": _propTypes.default.string.isRequired,

package/lib/components/textarea/textarea.style.d.ts

@@ -1,5 +1,6 @@
-export declare const MIN_HEIGHT = 64;
-export interface StyledTextAreaProps {
+import { TextareaProps } from "./textarea.component";
+export declare const DEFAULT_MIN_HEIGHT = 64;
+export interface StyledTextAreaProps extends Pick<TextareaProps, "minHeight"> {
     /** When true, label is placed in line an input */
     labelInline?: boolean;
     /** When true, adjusts padding for icon */

package/lib/components/textarea/textarea.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MIN_HEIGHT = void 0;
+exports.default = exports.DEFAULT_MIN_HEIGHT = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _input = _interopRequireDefault(require("../../__internal__/input/input.style"));
@@ -13,14 +13,16 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 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; }
-const MIN_HEIGHT = exports.MIN_HEIGHT = 64;
+const DEFAULT_MIN_HEIGHT = exports.DEFAULT_MIN_HEIGHT = 64;
 const StyledTextarea = _styledComponents.default.div`
   ${_styledSystem.margin};
 
   ${_input.default} {
     box-sizing: border-box;
     resize: none;
-    min-height: ${MIN_HEIGHT}px;
+    ${({
+  minHeight
+}) => `min-height: ${minHeight || DEFAULT_MIN_HEIGHT}px;`}
     padding: var(--spacing150) var(--spacing200);
 
     ${({

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

@@ -2,7 +2,9 @@ import React from "react";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { SpaceProps, WidthProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { TILE_HIGHLIGHT_VARIANTS } from "./tile.config";
 declare type DesignTokensType = keyof typeof DesignTokens;
+declare type HighlightVariantType = typeof TILE_HIGHLIGHT_VARIANTS[number];
 export interface TileProps extends SpaceProps, WidthProps, TagProps {
     /** Sets the theme of the tile */
     variant?: "tile" | "transparent" | "active" | "grey";
@@ -31,6 +33,8 @@ export interface TileProps extends SpaceProps, WidthProps, TagProps {
      * Set a percentage-based height for the whole Tile component, relative to its parent.
      */
     height?: string | number;
+    /** Sets the highlight variant */
+    highlightVariant?: HighlightVariantType;
 }
-export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, borderWidth, borderVariant, ...rest }: TileProps) => React.JSX.Element;
+export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, borderWidth, borderVariant, highlightVariant, ...rest }: TileProps) => React.JSX.Element;
 export default Tile;

package/lib/components/tile/tile.component.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Tile = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _tile = _interopRequireDefault(require("./tile.style"));
+var _tile = _interopRequireWildcard(require("./tile.style"));
 var _tile2 = _interopRequireDefault(require("./__internal__/tile.context"));
 var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-padding-props"));
 var _filterStyledSystemMarginProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-margin-props"));
 var _computeContentPadding = _interopRequireDefault(require("./__internal__/compute-content-padding"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Tile = ({
@@ -24,6 +26,7 @@ const Tile = ({
   height,
   borderWidth,
   borderVariant,
+  highlightVariant,
   ...rest
 }) => {
   const isHorizontal = orientation === "horizontal";
@@ -33,7 +36,7 @@ const Tile = ({
   });
   const marginProps = (0, _filterStyledSystemMarginProps.default)(rest);
   const contentPaddingProps = (0, _computeContentPadding.default)(paddingProps, isHorizontal);
-  return /*#__PURE__*/_react.default.createElement(_tile.default, _extends({
+  const tile = /*#__PURE__*/_react.default.createElement(_tile.default, _extends({
     variant: variant,
     width: width,
     height: height,
@@ -48,6 +51,15 @@ const Tile = ({
       paddingPropsFromTile: contentPaddingProps
     }
   }, children));
+  if (highlightVariant) {
+    return /*#__PURE__*/_react.default.createElement(_tile.StyledHighlight, {
+      variant: highlightVariant,
+      roundness: roundness,
+      "aria-hidden": true,
+      "data-role": `tile-${highlightVariant}-highlight`
+    }, tile);
+  }
+  return tile;
 };
 exports.Tile = Tile;
 var _default = exports.default = Tile;

package/lib/components/tile/tile.config.d.ts

@@ -1,3 +1,4 @@
 export declare const TILE_ORIENTATIONS: string[];
 export declare const TILE_THEMES: string[];
 export declare const TILE_BORDER_VARIANTS: string[];
+export declare const TILE_HIGHLIGHT_VARIANTS: string[];

package/lib/components/tile/tile.config.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TILE_THEMES = exports.TILE_ORIENTATIONS = exports.TILE_BORDER_VARIANTS = void 0;
+exports.TILE_THEMES = exports.TILE_ORIENTATIONS = exports.TILE_HIGHLIGHT_VARIANTS = exports.TILE_BORDER_VARIANTS = void 0;
 const TILE_ORIENTATIONS = exports.TILE_ORIENTATIONS = ["horizontal", "vertical"];
 const TILE_THEMES = exports.TILE_THEMES = ["tile", "transparent", "active", "grey"];
-const TILE_BORDER_VARIANTS = exports.TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];
+const TILE_BORDER_VARIANTS = exports.TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];
+const TILE_HIGHLIGHT_VARIANTS = exports.TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info"];

package/lib/components/tile/tile.style.d.ts

@@ -1,6 +1,10 @@
 import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export declare const StyledHighlight: import("styled-components").StyledComponent<"div", any, {
+    variant: Required<TileProps["highlightVariant"]>;
+    roundness: TileProps["roundness"];
+}, never>;
 export default StyledTile;

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

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledHighlight = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _elementSizing = _interopRequireDefault(require("../../style/utils/element-sizing"));
+var _tileContent = _interopRequireDefault(require("./tile-content/tile-content.style"));
 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; }
@@ -44,6 +45,23 @@ const getBorderRadius = roundness => {
       return "var(--borderRadius100)";
   }
 };
+const getHeighlightVariant = variant => {
+  switch (variant) {
+    case "success":
+      return "var(--colorsSemanticPositive500)";
+    case "neutral":
+      return "var(--colorsSemanticNeutral500)";
+    case "error":
+      return "var(--colorsSemanticNegative500)";
+    case "warning":
+      return "var(--colorsSemanticCaution500)";
+    case "info":
+      return "var(--colorsSemanticInfo500)";
+    default:
+      // gradient is default
+      return "linear-gradient(0deg, rgb(143, 73, 254) 5%, rgb(0, 146, 219) 50%, rgb(19, 160, 56) 95%)";
+  }
+};
 const StyledTile = _styledComponents.default.div`
   ${({
   borderVariant,
@@ -62,12 +80,12 @@ const StyledTile = _styledComponents.default.div`
     border-radius: ${getBorderRadius(roundness)};
     --tileBorderRadius: ${getBorderRadius(roundness)};
 
-    > *:first-child {
+    > *:first-child:not(${_tileContent.default}) {
       border-top-left-radius: calc(${getBorderRadius(roundness)} - 1px);
       border-top-right-radius: calc(${getBorderRadius(roundness)} - 1px);
     }
 
-    > *:last-child {
+    > *:last-child:not(${_tileContent.default}) {
       border-bottom-left-radius: calc(${getBorderRadius(roundness)} - 1px);
       border-bottom-right-radius: calc(${getBorderRadius(roundness)} - 1px);
     }
@@ -100,4 +118,21 @@ const StyledTile = _styledComponents.default.div`
 StyledTile.defaultProps = {
   theme: _base.default
 };
+const StyledHighlight = exports.StyledHighlight = _styledComponents.default.div`
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: ${({
+  variant
+}) => getHeighlightVariant(variant)};
+  border-radius: ${({
+  roundness
+}) => getBorderRadius(roundness)};
+
+  ${StyledTile} {
+    border-left: 0;
+    left: 4px;
+    width: calc(100% - 4px);
+  }
+`;
 var _default = exports.default = StyledTile;

package/package.json

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