carbon-react 153.0.0-beta.1 → 153.0.1

package/README.md

@@ -51,4 +51,4 @@ Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testi
 
 Carbon is licensed under the [Apache-2.0 licence](LICENSE).
 
-Copyright (c) 2018-2024 Sage Group Plc. All rights reserved.
+Copyright (c) 2018-2025 Sage Group Plc. All rights reserved.

package/esm/__internal__/ai-icon/ai-icon.component.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export declare const AiIcon: ({ ...rest }: TagProps) => React.JSX.Element;
+export default AiIcon;

package/esm/__internal__/ai-icon/ai-icon.component.js

@@ -0,0 +1,28 @@
+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 tagComponent from "../../__internal__/utils/helpers/tags/tags";
+export const AiIcon = ({
+  ...rest
+}) => /*#__PURE__*/React.createElement("svg", _extends({}, tagComponent("ai-icon", rest), {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  fill: "none",
+  viewBox: "0 0 20 20"
+}), /*#__PURE__*/React.createElement("g", {
+  clipPath: "url(#a)"
+}, /*#__PURE__*/React.createElement("path", {
+  "data-role": "white-star",
+  fill: "#fff",
+  d: "m16.378 9.799-3.776-1.49a1.615 1.615 0 0 1-.91-.91l-1.49-3.775c-.537-1.364-2.466-1.364-3.004 0L5.708 7.4a1.615 1.615 0 0 1-.91.91L1.022 9.799c-1.363.537-1.363 2.466 0 3.004l3.776 1.49c.417.163.746.493.91.91l1.49 3.775c.538 1.363 2.467 1.363 3.005 0l1.489-3.776c.164-.416.494-.745.91-.91l3.776-1.489c1.364-.538 1.364-2.467 0-3.004Z"
+}), /*#__PURE__*/React.createElement("path", {
+  "data-role": "green-circle",
+  fill: "#00D639",
+  d: "M17.172 5.655a2.827 2.827 0 1 0 0-5.655 2.827 2.827 0 0 0 0 5.655Z"
+})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  id: "a"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h20v20H0z"
+}))));
+export default AiIcon;

package/esm/__internal__/ai-icon/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./ai-icon.component";

package/esm/__internal__/ai-icon/index.js

@@ -0,0 +1 @@
+export { default } from "./ai-icon.component";

package/esm/__internal__/dom/globals.js

@@ -55,5 +55,5 @@ export function getDocument() {
  * @returns The global `navigator` object, if it exists.
  */
 export function getNavigator() {
-  return typeof navigator !== "undefined" ? navigator : undefined;
+  return typeof navigator !== "undefined" ? navigator : /* istanbul ignore next: node versions >=21 have a partial implementation of navigatior */undefined;
 }

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

@@ -3,8 +3,13 @@ import { BorderRadiusType } from "../../components/box/box.component";
 export type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
-    /** The id of the element that describe the input. */
+    /**
+     * Set the ID of the input's description.
+     * @deprecated Please use `aria-describedby` instead.
+     */
     ariaDescribedBy?: string;
+    /** The ID of the input's description, is set along with hint text and error message. */
+    "aria-describedby"?: string;
     /** Override the variant component */
     as?: React.ElementType;
     /** If true the Component will be focused when rendered */

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

@@ -27,7 +27,8 @@ function selectTextOnFocus(input) {
 const Input = /*#__PURE__*/React.forwardRef(({
   align,
   "aria-labelledby": ariaLabelledBy,
-  ariaDescribedBy,
+  "aria-describedby": ariaDescribedBy,
+  ariaDescribedBy: ariaDescribedByDeprecated,
   placeholder,
   disabled,
   readOnly,
@@ -126,7 +127,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
     handleDeferred(ev);
   };
   const hasValidationPart = (context.hasFocus || groupContext.hasFocus || context.hasMouseOver || groupContext.hasMouseOver) && validationIconId;
-  const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
+  const descriptionList = ariaDescribedBy || ariaDescribedByDeprecated ? [ariaDescribedBy || ariaDescribedByDeprecated] : [];
   if (hasValidationPart) {
     descriptionList.push(validationIconId);
   }

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

@@ -5,14 +5,20 @@ import Events from "../../../__internal__/utils/helpers/events";
 import Accordion from "../accordion.component";
 import { StyledAccordionGroup } from "../accordion.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
+import Logger from "../../../__internal__/utils/logger";
 
 // typescript-to-proptypes breaks on recursive type references so it has to be an interface
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
+let deprecatedWarnTriggered = false;
 export const AccordionGroup = ({
   children,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate("`AccordionGroup` is deprecated and will soon be removed.");
+  }
   const hasProperChildren = useMemo(() => {
     let hasAccordionChildren = true;
     React.Children.toArray(children).forEach(child => {

package/esm/components/button/button-types.style.js

@@ -76,6 +76,16 @@ export default (isDisabled, destructive, isWhite) => ({
         ${makeColors("var(--colorsActionMajorYang100)")};
       }
 
+      ${isWhite && (!isDisabled || !destructive) ? `
+          border-color: var(--colorsActionMajorYang100);
+          ${makeColors("var(--colorsActionMajorYang100)")};
+          &:hover {
+            background: var(--colorsActionMajorYang100);
+            border-color: var(--colorsActionMajorYang100);
+            ${makeColors("var(--colorsYin100)")};
+          }
+          ` : ""}
+
       ${destructive ? `
             border-color: var(--colorsSemanticNegative500);
             ${makeColors("var(--colorsSemanticNegative500)")}
@@ -86,7 +96,7 @@ export default (isDisabled, destructive, isWhite) => ({
             }
           ` : ""}
 
-      ${isDisabled ? `
+      ${isDisabled && !isWhite ? `
             border-color: var(--colorsActionDisabled500);
             ${makeColors("var(--colorsActionMajorYin030)")};
             &:hover {

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

@@ -64,13 +64,13 @@ const Button = /*#__PURE__*/React.forwardRef(({
   children,
   destructive = false,
   disabled = false,
+  isWhite = false,
   fullWidth: fullWidthProp = false,
   href,
   iconPosition: iconPositionProp = "before",
   iconTooltipMessage,
   iconTooltipPosition,
   iconType,
-  isWhite = false,
   m = 0,
   noWrap,
   onClick,

package/esm/components/button-bar/button-bar.style.js

@@ -1,13 +1,8 @@
 import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import BaseTheme from "../../style/themes/base";
-import StyledButton from "../button/button.style";
 import StyledIcon from "../icon/icon.style";
 import StyledIconButton from "../icon-button/icon-button.style";
-const commonHoverStyles = `
-  background-color: var(--colorsActionMajor600);
-  border-color: var(--colorsActionMajor600);
-`;
 const StyledButtonBar = styled.div`
   ${space}
   ${({
@@ -29,84 +24,61 @@ const StyledButtonBar = styled.div`
 
     button {
       margin: 0;
+      position: relative;
 
-      :not(:first-child):not(:last-child) {
+      &:not(:first-child):not(:last-child) {
         border-radius: var(--borderRadius000);
       }
-      :first-child:not(:last-child) {
+      &:first-child:not(:last-child) {
         border-top-right-radius: var(--borderRadius000);
         border-bottom-right-radius: var(--borderRadius000);
       }
-      :last-child:not(:first-child) {
+      &:last-child:not(:first-child) {
         border-top-left-radius: var(--borderRadius000);
         border-bottom-left-radius: var(--borderRadius000);
       }
 
-      &:not(:last-of-type) {
-        border-right-color: transparent;
-      }
-
       &:not(:first-of-type) {
         margin-left: -2px;
       }
 
-      &:focus {
-        position: relative;
-        z-index: 2;
+      &:not(:disabled) {
+        z-index: 1;
       }
 
-      &:hover {
-        background-color: var(--colorsActionMajor600);
-        border-color: var(--colorsActionMajor600);
-
-        & + button {
-          border-left-color: var(--colorsActionMajor600);
-        }
-
-        & ${StyledIcon} {
-          ${commonHoverStyles}
-          color: white;
-        }
+      &:hover:not(:disabled) {
+        z-index: 2;
       }
 
-      & ${StyledIcon} {
-        color: var(--colorsActionMajor500);
+      &:focus {
+        z-index: 3;
       }
     }
 
-    [data-component="button"] {
-      :hover {
-        ${commonHoverStyles}
-        & + ${StyledButton} {
-          border-left-color: var(--colorsActionMajor600);
-        }
+    ${StyledIconButton}:not(:disabled) {
+      border: 2px solid var(--colorsActionMajor500);
+
+      &:focus {
+        border-right-color: var(--colorsActionMajor500);
       }
-    }
 
-    [data-component="button-minor"] {
-      & ${StyledIcon} {
-        color: var(--colorsActionMinor500);
+      &:hover {
+        background-color: var(--colorsActionMajor600);
+        border-color: var(--colorsActionMajor600);
+        color: var(--colorsActionMajorYang100);
       }
-    }
 
-    [data-component="button-minor"] {
-      :hover {
-        color: var(--colorsActionMinorYang100);
-        background-color: var(--colorsActionMinor500);
-        border-color: var(--colorsActionMinor500);
+      ${StyledIcon} {
+        color: var(--colorsActionMajor500);
 
-        & + ${StyledButton} {
-          border-left-color: var(--colorsActionMinor500);
+        &:hover {
+          color: var(--colorsActionMajorYang100);
         }
       }
     }
 
-    ${StyledIconButton} {
-      border: 2px solid var(--colorsActionMajor500);
-
-      :focus {
-        border-right-color: var(--colorsActionMajor500);
-      }
+    ${StyledIconButton}:disabled {
+      border: 2px solid var(--colorsActionDisabled500);
     }
   `}
 `;

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

@@ -46,6 +46,7 @@ export interface DialogProps extends ModalProps, TagProps {
     height?: string;
     /** Adds Help tooltip to Header */
     help?: string;
+    highlightVariant?: string;
     /** A custom close event handler */
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
     /** Determines if the close icon is shown */

package/esm/components/dialog/dialog.component.js

@@ -31,6 +31,7 @@ export const Dialog = /*#__PURE__*/forwardRef(({
   bespokeFocusTrap,
   disableClose,
   help,
+  highlightVariant = "default",
   role = "dialog",
   contentPadding = {},
   greyBackground = false,
@@ -115,6 +116,7 @@ export const Dialog = /*#__PURE__*/forwardRef(({
     "aria-modal": isTopModal ? true : undefined,
     ref: containerRef
   }, dialogProps, {
+    highlightVariant: highlightVariant,
     role: role,
     tabIndex: -1
   }, contentPadding, {

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

@@ -3,6 +3,7 @@ declare const DialogPositioner: import("styled-components").StyledComponent<"div
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, Required<Pick<DialogProps, "size">> & {
     dialogHeight?: string | undefined;
     backgroundColor: string;
+    highlightVariant?: string | undefined;
 } & ContentPaddingInterface, never>;
 type StyledDialogTitleProps = {
     showCloseIcon?: boolean;

package/esm/components/dialog/dialog.style.js

@@ -51,6 +51,20 @@ const StyledDialog = styled.div`
     outline: none;
   }
 
+  ${({
+  highlightVariant
+}) => highlightVariant === "ai" && `
+      &::before {
+        content: "";
+        position: absolute;
+        top: -8px;
+        height: 100px;
+        width: 100%;
+        z-index: -1;
+        background: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+        border-radius: var(--borderRadius200) var(--borderRadius200) 0 0;
+      }`}
+
   ${({
   backgroundColor
 }) => css`

package/esm/components/hr/hr.style.js

@@ -8,7 +8,7 @@ const heightMap = {
 };
 const StyledHr = styled.hr`
   ${margin}
-  width: inherit;
+  width: 100%;
   border: 0;
   height: ${({
   height

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

@@ -36,6 +36,13 @@ export const Link = /*#__PURE__*/React.forwardRef(({
     batchSelectionDisabled
   } = useContext(BatchSelectionContext);
   const isDisabled = disabled || batchSelectionDisabled;
+  const setRefs = React.useCallback(reference => {
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") {
+      ref(reference);
+    }
+  }, [ref]);
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
@@ -59,7 +66,7 @@ export const Link = /*#__PURE__*/React.forwardRef(({
     onClick,
     disabled: isDisabled,
     target,
-    ref,
+    ref: setRefs,
     href,
     rel,
     "aria-label": ariaLabel,

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

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, useEffect, useContext } from "react";
+import React, { useRef, useEffect, useContext, useState, useLayoutEffect } from "react";
 import invariant from "invariant";
 import { defaultFocusableSelectors as focusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
@@ -63,8 +63,14 @@ export const MenuItem = ({
   } = submenuContext;
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const ref = useRef(null);
-  const firstFocusableChild = ref.current?.querySelector(focusableSelectors) ?? null;
+  const [ref, setRef] = useState(null);
+  const [firstFocusableChild, setFirstFocusableChild] = useState(null);
+  useLayoutEffect(() => {
+    const firstFocusable = ref?.querySelector(focusableSelectors) ?? null;
+    if (firstFocusable !== firstFocusableChild) {
+      setFirstFocusableChild(firstFocusable);
+    }
+  }, [ref]);
   useEffect(() => {
     const id = menuItemId.current;
 
@@ -85,7 +91,7 @@ export const MenuItem = ({
         firstFocusableChild.focus();
         return;
       }
-      ref.current?.focus();
+      ref?.focus();
     }
   }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
   const handleFocus = event => {
@@ -99,7 +105,7 @@ export const MenuItem = ({
   const handleKeyDown = event => {
     onKeyDown?.(event);
     if (Events.isEscKey(event)) {
-      ref.current?.focus();
+      ref?.focus();
     }
     handleSubmenuKeyDown?.(event);
   };
@@ -114,7 +120,7 @@ export const MenuItem = ({
     selected,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
-    ref
+    ref: setRef
   };
   if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
     elementProps.overrideColor = true;
@@ -153,7 +159,7 @@ export const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = filterStyledSystemPaddingProps(rest);
-  const hasInput = !!ref.current?.querySelector("[data-element='input']");
+  const hasInput = !!ref?.querySelector("[data-element='input']");
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,

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

@@ -1,7 +1,11 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export type MessageVariant = "error" | "info" | "success" | "warning" | "neutral";
+export interface TypeIconProps {
+    transparent?: boolean;
+    variant: MessageVariant;
+}
+export type MessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai";
 export interface MessageProps extends MarginProps, TagProps {
     /** Set the component's content */
     children?: React.ReactNode;

package/esm/components/message/message.component.js

@@ -1,12 +1,12 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useRef } from "react";
 import Typography from "../typography";
-import MessageStyle from "./message.style";
-import TypeIcon from "./__internal__/type-icon/type-icon.component";
-import MessageContent from "./__internal__/message-content/message-content.component";
+import Content from "../content";
+import MessageStyle, { MessageContent, TypeIconStyle } from "./message.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Icon from "../icon";
 import IconButton from "../icon-button";
+import AiIcon from "../../__internal__/ai-icon";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
 export const Message = /*#__PURE__*/React.forwardRef(({
@@ -22,38 +22,52 @@ export const Message = /*#__PURE__*/React.forwardRef(({
   width,
   ...props
 }, ref) => {
-  const messageRef = useRef(null);
-  const refToPass = ref || messageRef;
+  const localRef = useRef(null);
+  const messageRef = ref || localRef;
+  const locale = useLocale();
   const marginProps = filterStyledSystemMarginProps(props);
-  const l = useLocale();
-  const renderCloseIcon = () => {
-    if (!showCloseIcon || !onDismiss) return null;
-    return /*#__PURE__*/React.createElement(IconButton, {
-      "data-element": "close",
-      "aria-label": closeButtonAriaLabel || l.message.closeButtonAriaLabel(),
-      onClick: onDismiss
-    }, /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
-    }));
+  const VARIANT_ICON_MAP = {
+    neutral: "info",
+    success: "tick_circle",
+    error: "error",
+    warning: "warning",
+    info: "info"
   };
-  return open ? /*#__PURE__*/React.createElement(MessageStyle, _extends({}, tagComponent("Message", props), {
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MessageStyle, _extends({}, tagComponent("Message", props), {
     transparent: transparent,
     variant: variant,
     id: id,
     width: width,
-    ref: refToPass
+    ref: messageRef
   }, marginProps, {
     tabIndex: -1
-  }), /*#__PURE__*/React.createElement(TypeIcon, {
+  }), /*#__PURE__*/React.createElement(TypeIconStyle, {
     variant: variant,
     transparent: transparent
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }, variant === "ai" ? /*#__PURE__*/React.createElement(AiIcon, {
+    "data-role": "ai-icon"
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    "data-role": "category-icon",
+    type: VARIANT_ICON_MAP[variant]
+  })), /*#__PURE__*/React.createElement(Typography, {
     screenReaderOnly: true
-  }, l.message[variant]()), /*#__PURE__*/React.createElement(MessageContent, {
-    showCloseIcon: showCloseIcon,
-    title: title,
-    reduceLeftPadding: transparent
-  }, children), renderCloseIcon()) : null;
+  }, locale.message?.[variant]?.()), /*#__PURE__*/React.createElement(MessageContent, {
+    "data-element": "message-content",
+    "data-role": "message-content"
+  }, !showCloseIcon || !onDismiss ? /*#__PURE__*/React.createElement(Content, {
+    title: title
+  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Content, {
+    title: title
+  }, children), /*#__PURE__*/React.createElement(IconButton, {
+    "data-element": "close",
+    "aria-label": closeButtonAriaLabel || locale.message.closeButtonAriaLabel(),
+    onClick: onDismiss
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "close"
+  })))));
 });
 Message.displayName = "Message";
 export default Message;

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

@@ -1,9 +1,12 @@
 import { MarginProps } from "styled-system";
-import { MessageVariant } from "./message.component";
+import { MessageVariant, TypeIconProps } from "./message.component";
 type MessageStyleProps = {
     variant?: MessageVariant;
     transparent?: boolean;
     width?: string;
 };
 declare const MessageStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+declare const MessageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconProps, never>;
 export default MessageStyle;
+export { MessageContent, TypeIconStyle };

package/esm/components/message/message.style.js

@@ -1,19 +1,17 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
-import StyledIconButton from "../icon-button/icon-button.style";
 const messageVariants = {
   error: "var(--colorsSemanticNegative500)",
   info: "var(--colorsSemanticInfo500)",
   success: "var(--colorsSemanticPositive500)",
   warning: "var(--colorsSemanticCaution500)",
-  neutral: "var(--colorsSemanticNeutral500)"
+  neutral: "var(--colorsSemanticNeutral500)",
+  ai: "var(--colorsUtilityYin100)"
 };
 const MessageStyle = styled.div`
   position: relative;
   display: flex;
-  justify-content: flex-start;
-  align-content: center;
   border-radius: var(--borderRadius100);
   overflow: hidden;
   border: 1px solid ${({
@@ -33,20 +31,48 @@ const MessageStyle = styled.div`
       background: transparent;
     `}
 
-  ${StyledIconButton} {
-    position: absolute;
-    right: 20px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
   ${({
   width
 }) => width && `width: ${width};`}
-
   ${margin}
 `;
+const MessageContent = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing200);
+  gap: var(--spacing300);
+`;
+const TypeIconStyle = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({
+  variant
+}) => messageVariants[variant]};
+  min-width: 30px;
+
+  span {
+    &:before {
+      color: var(--colorsUtilityYang100);
+    }
+  }
+
+  ${({
+  transparent,
+  variant
+}) => transparent && css`
+      background-color: transparent;
+      span {
+        &:before {
+          color: ${messageVariants[variant]};
+        }
+      }
+    `}
+`;
 MessageStyle.defaultProps = {
   theme: BaseTheme
 };
-export default MessageStyle;
+export default MessageStyle;
+export { MessageContent, TypeIconStyle };

package/esm/components/portrait/portrait.style.js

@@ -23,7 +23,6 @@ export const StyledCustomImg = styled.img`
 `;
 
 // && is used here to increase the specificity
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const StyledIcon = styled(Icon)`
   && {
     color: inherit;

package/esm/components/preview/preview.style.js

@@ -63,7 +63,7 @@ const StyledPreviewPlaceholder = styled.span`
       animation: ${shimmer} 2s ease infinite;
 
       ${isLastLine && shape === "text" && css`
-        width: calc(; ${width || getWidth(shape)}*0.8);
+        width: calc(${width || getWidth(shape)}*0.8);
       `}
 
       ${shape === "circle" && css`

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

@@ -72,7 +72,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
       isInputInSelect: true
     }
   }, /*#__PURE__*/React.createElement(Textbox, _extends({
-    ariaDescribedBy: ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "data-element": "select-input",
     "data-role": "select-textbox",