carbon-react 152.2.0 → 152.3.1

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__/fieldset/fieldset.component.js

@@ -4,9 +4,9 @@ import { StyledFieldset, StyledLegend, StyledLegendContent, StyledIconWrapper }
 import ValidationIcon from "../validations/validation-icon.component";
 import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import Help from "../../components/help";
 import Typography from "../../components/typography";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 const Fieldset = ({
   legend,
   children,
@@ -29,7 +29,7 @@ const Fieldset = ({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const [ref, setRef] = useState(null);
   const [isFocused, setFocus] = useState(false);
   useEffect(() => {

package/esm/__internal__/fieldset/fieldset.style.js

@@ -3,6 +3,7 @@ import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 const StyledFieldset = styled.fieldset`
   margin: 0;
+  margin-bottom: var(--fieldSpacing);
   ${margin}
   border: none;
   padding: 0;

package/esm/__internal__/form-field/form-field.component.js

@@ -7,7 +7,7 @@ import FieldHelp from "../field-help";
 import tagComponent from "../utils/helpers/tags/tags";
 import TabContext from "../../components/tabs/tab/__internal__/tab.context";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 const FormField = ({
   maxWidth,
   children,
@@ -61,7 +61,7 @@ const FormField = ({
     setWarning,
     setInfo
   } = useContext(TabContext);
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const isMounted = useRef(false);
   useLayoutEffect(() => {
     isMounted.current = true;

package/esm/__internal__/form-field/form-field.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import { baseTheme } from "../../style/themes";
 const FormFieldStyle = styled.div`
+  margin-bottom: var(--fieldSpacing);
   & + & {
     margin-top: 16px;
   }

package/esm/__internal__/utils/helpers/events/events.d.ts

@@ -17,7 +17,7 @@ declare const Events: {
     /**
      * Determines if event is a keyboard event
      */
-    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is React.KeyboardEvent<Element> | KeyboardEvent;
+    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is KeyboardEvent | React.KeyboardEvent<Element>;
     /**
      * Determines if a number key along the top of the keyboard or a number key on the
      * keypad is pressed

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/checkbox/checkbox-group/checkbox-group.component.js

@@ -5,7 +5,6 @@ import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import Fieldset from "../../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
-import FormSpacingProvider from "../../../__internal__/form-spacing-provider";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
 import Box from "../../box";
@@ -84,9 +83,7 @@ export const CheckboxGroup = ({
       error: !!error,
       warning: !!warning
     }
-  }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
-    marginBottom: undefined
-  }, children))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
+  }, children)))) : /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(Fieldset, _extends({
     id: uniqueId,
@@ -114,9 +111,7 @@ export const CheckboxGroup = ({
       warning: !!warning,
       info: !!info
     }
-  }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
-    marginBottom: undefined
-  }, children))))));
+  }, children)))));
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 export default CheckboxGroup;

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

@@ -8,8 +8,8 @@ import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import CheckboxGroupContext from "./checkbox-group/__internal__/checkbox-group.context";
 import Logger from "../../__internal__/utils/logger";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 let deprecateUncontrolledWarnTriggered = false;
 export const Checkbox = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
@@ -97,7 +97,7 @@ export const Checkbox = /*#__PURE__*/React.forwardRef(({
       info: contextInfo || info
     })
   };
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const componentToRender = /*#__PURE__*/React.createElement(CheckboxStyle, _extends({
     disabled: disabled,
     labelSpacing: labelSpacing,

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

@@ -9,6 +9,7 @@ import StyledValidationIcon from "../../__internal__/validations/validation-icon
 import baseTheme from "../../style/themes/base";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 const StyledCheckbox = styled.div`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
   ${({
   disabled,

package/esm/components/date/date.component.js

@@ -3,14 +3,13 @@ import React, { useContext, useEffect, useMemo, useRef, useState, useCallback }
 import { additionalYears, findMatchedFormatAndValue, formattedValue, formatToISO, isDateValid, parseDate, parseISODate, checkISOFormatAndLength, getSeparator, isValidLocaleDate } from "./__internal__/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
 import Events from "../../__internal__/utils/helpers/events";
-import { filterOutStyledSystemSpacingProps } from "../../style/utils";
+import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../style/utils";
 import getFormatData from "./__internal__/date-formats";
 import StyledDateInput from "./date.style";
 import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/__internal__/date-range.context";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import guid from "../../__internal__/utils/helpers/guid";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 export const DateInput = /*#__PURE__*/React.forwardRef(({
@@ -282,7 +281,7 @@ export const DateInput = /*#__PURE__*/React.forwardRef(({
     }
     return value;
   };
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
     ref: wrapperRef,
     role: "presentation",

package/esm/components/date/date.style.js

@@ -12,6 +12,7 @@ const datePickerWidth = {
   small: "120px"
 };
 const StyledDateInput = styled.div`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 
   & ${StyledInputPresentation} {

package/esm/components/date-range/date-range.style.js

@@ -5,6 +5,7 @@ import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import { StyledInputPresentationContainer } from "../../__internal__/input/input-presentation.style";
 import baseTheme from "../../style/themes/base";
 const StyledDateRange = styled.div`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 
   & ${StyledDateInput} {

package/esm/components/fieldset/fieldset.component.js

@@ -3,8 +3,7 @@ import React, { useState, useEffect, useContext } from "react";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { FieldsetStyle, StyledLegend } from "./fieldset.style";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
-import FormSpacingProvider from "../../__internal__/form-spacing-provider";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 export const Fieldset = ({
   children,
   legend,
@@ -13,7 +12,7 @@ export const Fieldset = ({
   ...rest
 }) => {
   const [ref, setRef] = useState(null);
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -31,9 +30,7 @@ export const Fieldset = ({
     "data-element": "legend",
     isRequired: required,
     isOptional: isOptional
-  }, legend), validationRedesignOptIn ? children : /*#__PURE__*/React.createElement(FormSpacingProvider, {
-    marginBottom: undefined
-  }, children));
+  }, legend), children);
 };
 Fieldset.displayName = "Fieldset";
 export default Fieldset;

package/esm/components/fieldset/fieldset.style.js

@@ -5,6 +5,7 @@ import baseTheme from "../../style/themes/base";
 import CheckboxStyle from "../checkbox/checkbox.style";
 const FieldsetStyle = styled.fieldset`
   margin: 0;
+  margin-bottom: var(--fieldSpacing);
   ${margin}
   border: none;
   padding: 0;
@@ -12,6 +13,10 @@ const FieldsetStyle = styled.fieldset`
   ${({
   newValidation
 }) => !newValidation && css`
+      & * {
+        --fieldSpacing: 0;
+      }
+
       &&&& ${FormFieldStyle} {
         margin-top: 0;
         margin-bottom: -1px;

package/esm/components/form/form.component.js

@@ -4,7 +4,6 @@ import tagComponent from "../../__internal__/utils/helpers/tags";
 import FormSummary from "./__internal__/form-summary.component";
 import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons } from "./form.style";
 import { formSpacing } from "./form.config";
-import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import ModalContext from "../modal/__internal__/modal.context";
 export const Form = ({
   children,
@@ -35,7 +34,6 @@ export const Form = ({
     stickyFooter: stickyFooter,
     onSubmit: onSubmit,
     "data-component": "form",
-    fieldSpacing: fieldSpacing,
     noValidate: noValidate,
     height: height,
     isInModal: isInModal
@@ -44,10 +42,9 @@ export const Form = ({
     "data-role": "form-content",
     stickyFooter: stickyFooter,
     tabIndex: -1,
-    isInModal: isInModal
-  }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
-    marginBottom: formSpacing[fieldSpacing]
-  }, children)), renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
+    isInModal: isInModal,
+    fieldSpacing: formSpacing[fieldSpacing]
+  }, children), renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
     "data-role": "form-footer",
     ref: formFooterRef,

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

@@ -2,6 +2,7 @@ import { FormButtonAlignment } from "./form.config";
 interface StyledFormContentProps {
     stickyFooter?: boolean;
     isInModal?: boolean;
+    fieldSpacing?: string;
 }
 export declare const StyledFormContent: import("styled-components").StyledComponent<"div", any, StyledFormContentProps, never>;
 interface StyledFormFooterProps {
@@ -12,7 +13,6 @@ interface StyledFormFooterProps {
 export declare const StyledFormFooter: import("styled-components").StyledComponent<"div", any, StyledFormFooterProps, never>;
 interface StyledFormProps extends StyledFormContentProps {
     height?: string;
-    fieldSpacing: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 }
 export declare const StyledForm: import("styled-components").StyledComponent<"form", any, StyledFormProps, never>;
 export declare const StyledRightButtons: import("styled-components").StyledComponent<"div", any, {

package/esm/components/form/form.style.js

@@ -2,9 +2,10 @@ import styled, { css } from "styled-components";
 import { space, padding } from "styled-system";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 import baseTheme from "../../style/themes/base";
-import StyledSearch from "../search/search.style";
-import StyledTextarea from "../textarea/textarea.style";
-import { StyledNumeralDate } from "../numeral-date/numeral-date.style";
+import StyledInlineInputs from "../inline-inputs/inline-inputs.style";
+import StyledSelect from "../select/select.style";
+import { StyledSelectMultiSelect } from "../select/multi-select/multi-select.style";
+import StyledSwitch from "../switch/switch.style";
 export const StyledFormContent = styled.div(({
   stickyFooter,
   isInModal
@@ -12,6 +13,22 @@ export const StyledFormContent = styled.div(({
       flex-grow: 1;
       min-height: 0;
       overflow-y: auto;
+    `, ({
+  fieldSpacing
+}) => fieldSpacing && css`
+      --fieldSpacing: ${fieldSpacing};
+
+      ${StyledFormField} {
+        margin-top: var(--spacing000);
+      }
+
+      // field spacing is also applied to form field here so we need to override
+      ${StyledInlineInputs} ${StyledFormField},
+      ${StyledInlineInputs} ${StyledSelect},
+      ${StyledInlineInputs} ${StyledSelectMultiSelect},
+      ${StyledSwitch} ${StyledFormField} {
+        margin-bottom: var(--spacing000);
+      }
     `);
 export const StyledFormFooter = styled.div`
   align-items: center;
@@ -64,14 +81,6 @@ export const StyledForm = styled.form`
       height: ${height};
     `}
 
-  // field spacing is also applied to form field here so we need to override
-  ${StyledSearch} ${StyledFormField}, 
-  ${StyledTextarea} ${StyledFormField}, 
-  [data-component="time"] ${StyledFormField}, 
-  ${StyledNumeralDate} ${StyledFormField} {
-    margin-bottom: var(--spacing000);
-  }
-
   ${({
   stickyFooter,
   isInModal

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/image/image.style.d.ts

@@ -34,5 +34,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
     bottom: string | undefined;
     left: string | undefined;
     as?: string | undefined;
-} & StyledImageProps, "hidden" | "children" | "left" | "right" | "top" | "bottom" | "src" | "as" | "position">;
+} & StyledImageProps, "hidden" | "children" | "left" | "right" | "top" | "bottom" | "as" | "src" | "position">;
 export { StyledImage };

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -2,10 +2,9 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useRef, useEffect } from "react";
 import Label from "../../__internal__/label";
 import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
-import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import tagComponent from "../../__internal__/utils/helpers/tags";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 const columnWrapper = (children, gutter) => {
   return React.Children.map(children, input => {
     return /*#__PURE__*/React.createElement(StyledInlineInput, {
@@ -46,7 +45,7 @@ const InlineInputs = ({
       optional: isOptional
     }, label);
   }
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   useEffect(() => {
     if (required) {
       const elements = Array.from(ref.current?.querySelectorAll("input") || /* istanbul ignore next */[]);
@@ -63,9 +62,7 @@ const InlineInputs = ({
     "data-element": "inline-inputs-container",
     "data-role": "inline-inputs-container",
     inputWidth: inputWidth
-  }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
-    marginBottom: undefined
-  }, columnWrapper(children, gutter))));
+  }, columnWrapper(children, gutter)));
 };
 InlineInputs.displayName = "InlineInputs";
 export default InlineInputs;

package/esm/components/inline-inputs/inline-inputs.style.js

@@ -61,6 +61,7 @@ const StyledContentContainer = styled.div`
     `}
 `;
 const StyledInlineInputs = styled.div`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 
   display: ${({

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 declare type MessageVariant = "error" | "info" | "success" | "warning" | "neutral";
+export interface TypeIconProps {
+    transparent?: boolean;
+    variant: MessageVariant;
+}
+export declare 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";
 declare 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 };