carbon-react 152.2.0 → 152.3.1

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/numeral-date/numeral-date.component.js

@@ -285,7 +285,8 @@ export const NumeralDate = /*#__PURE__*/forwardRef(({
         info
       }, {
         tooltipPosition: tooltipPosition,
-        tooltipId: validationId
+        tooltipId: validationId,
+        my: 0 // prevents any form spacing being applied
       }))));
     }));
   };

package/esm/components/search/search.component.js

@@ -154,8 +154,7 @@ export const Search = /*#__PURE__*/React.forwardRef(({
     maxWidth: maxWidth,
     searchHasValue: searchHasValue,
     showSearchButton: !!searchButton,
-    variant: variant,
-    mb: 0
+    variant: variant
   }, filterStyledSystemMarginProps(rest), {
     id: id,
     name: name
@@ -180,7 +179,8 @@ export const Search = /*#__PURE__*/React.forwardRef(({
       type: "search",
       ml: 1
     }) : undefined,
-    tooltipPosition: tooltipPosition
+    tooltipPosition: tooltipPosition,
+    my: 0 // prevents any form spacing being applied
   }), searchButton && /*#__PURE__*/React.createElement(StyledSearchButton, null, /*#__PURE__*/React.createElement(Button, _extends({
     "aria-label": searchButtonAriaLabel || searchButtonText,
     size: "medium",

package/esm/components/search/search.style.js

@@ -19,6 +19,7 @@ const StyledSearch = styled.div`
   const darkVariant = variant === "dark";
   const variantColor = darkVariant ? "var(--colorsUtilityYang080)" : "var(--colorsUtilityMajor300)";
   return css`
+      margin-bottom: var(--fieldSpacing);
       ${margin}
       width: ${searchWidth ? `${searchWidth}` : "100%"};
       max-width: ${maxWidth ? `${maxWidth}` : "100%"};

package/esm/components/select/filterable-select/filterable-select.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, { useState, useEffect, useRef, useCallback } from "react";
 import invariant from "invariant";
-import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../../style/utils";
 import SelectTextbox from "../__internal__/select-textbox";
 import guid from "../../../__internal__/utils/helpers/guid";
 import withFilter from "../__internal__/utils/with-filter.hoc";
@@ -12,7 +12,6 @@ import areObjectsEqual from "../__internal__/utils/are-objects-equal";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
-import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
@@ -457,7 +456,7 @@ export const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     listWidth
   };
   const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, selectListProps, children);
-  const marginProps = useFormSpacing(textboxProps);
+  const marginProps = filterStyledSystemMarginProps(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     hasTextCursor: true,
     readOnly: readOnly,

package/esm/components/select/multi-select/multi-select.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, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import invariant from "invariant";
-import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../../style/utils";
 import SelectTextbox from "../__internal__/select-textbox";
 import guid from "../../../__internal__/utils/helpers/guid";
 import withFilter from "../__internal__/utils/with-filter.hoc";
@@ -13,7 +13,6 @@ import isExpectedValue from "../__internal__/utils/is-expected-value";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
-import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
@@ -461,7 +460,7 @@ export const MultiSelect = /*#__PURE__*/React.forwardRef(({
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
   }, children);
-  const marginProps = useFormSpacing(textboxProps);
+  const marginProps = filterStyledSystemMarginProps(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
     disabled: disabled,
     readOnly: readOnly,

package/esm/components/select/select.style.js

@@ -13,6 +13,7 @@ const StyledSelect = styled.div`
   transparent,
   isOpen
 }) => css`
+    margin-bottom: var(--fieldSpacing);
     ${margin}
 
     position: relative;

package/esm/components/select/simple-select/simple-select.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, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import invariant from "invariant";
-import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../../style/utils";
 import StyledSelect from "../select.style";
 import SelectTextbox from "../__internal__/select-textbox";
 import SelectList from "../__internal__/select-list/select-list.component";
@@ -10,7 +10,6 @@ import getNextChildByText from "../__internal__/utils/get-next-child-by-text";
 import isExpectedOption from "../__internal__/utils/is-expected-option";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
-import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
 export const SimpleSelect = /*#__PURE__*/React.forwardRef(({
@@ -326,7 +325,7 @@ export const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
   }, children);
-  const marginProps = useFormSpacing(props);
+  const marginProps = filterStyledSystemMarginProps(props);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     transparent: transparent,
     disabled: disabled,

package/esm/components/split-button/split-button-toggle.style.d.ts

@@ -3,6 +3,7 @@ declare type StyledSplitButtonToggleProps = {
     disabled: boolean;
     displayed: boolean;
     size: "small" | "medium" | "large";
+    isWhite?: boolean;
 };
 declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("../button").ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;

package/esm/components/split-button/split-button-toggle.style.js

@@ -12,12 +12,13 @@ const StyledSplitButtonToggle = styled(StyledButton)`
   buttonType,
   disabled,
   displayed,
-  size
+  size,
+  isWhite
 }) => css`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
 
-    ${!disabled && displayed ? css`
+    ${!disabled && displayed && !isWhite ? css`
           background-color: var(--colorsActionMajor500);
           border-color: var(--colorsActionMajor500);
 
@@ -30,6 +31,21 @@ const StyledSplitButtonToggle = styled(StyledButton)`
             border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
+
+    ${!disabled && displayed && isWhite ? css`
+          background-color: var(--colorsActionMajorYang100);
+          border-color: var(--colorsActionMajorYang100);
+
+          &,
+          ${StyledIcon} {
+            color: var(--colorsYin100);
+          }
+
+          &:focus {
+            border-left-color: var(--colorsSemanticFocus500);
+          }
+        ` : ""}
+
     ${!disabled && buttonType === "primary" && `
       position: relative;
       &::before {
@@ -63,6 +79,18 @@ const StyledSplitButtonToggle = styled(StyledButton)`
         color: var(--colorsActionMajorYang100);
       }
     }
+
+    ${!disabled && isWhite && `
+      &:focus {
+        background-color: var(--colorsActionMajorYang100);
+        border-color: var(--colorsActionMajorYang100);
+
+        &,
+        ${StyledIcon} {
+          color: var(--colorsYin100);
+        }
+      }
+    `}
   `}
 `;
 StyledSplitButtonToggle.defaultProps = {

package/esm/components/split-button/split-button.component.d.ts

@@ -25,6 +25,8 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
     text: string;
     /** Sets rendering position of menu */
     position?: "left" | "right";
+    /** Renders the white variant of the secondary split button */
+    isWhite?: boolean;
 }
 export declare type SplitButtonHandle = {
     /** Programmatically focus the main button */

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

@@ -32,6 +32,7 @@ export const SplitButton = /*#__PURE__*/forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
   "aria-label": ariaLabel,
+  isWhite = false,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -42,6 +43,7 @@ export const SplitButton = /*#__PURE__*/forwardRef(({
   const {
     isInFlatTable
   } = useContext(FlatTableContext);
+  const shouldRenderIsWhiteVariant = buttonType === "secondary" && isWhite;
   useImperativeHandle(ref, () => ({
     focusMainButton() {
       mainButtonRef.current?.focus();
@@ -76,12 +78,14 @@ export const SplitButton = /*#__PURE__*/forwardRef(({
     onClick: handleMainClick,
     size,
     subtext,
+    isWhite: shouldRenderIsWhiteVariant,
     ...filterOutStyledSystemSpacingProps(rest)
   };
   const handleToggleClick = () => {
     showButtons();
   };
   const toggleButtonProps = {
+    isWhite: shouldRenderIsWhiteVariant,
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,

package/esm/components/switch/switch.component.js

@@ -7,12 +7,12 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import Logger from "../../__internal__/utils/logger";
 import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import StyledSwitch, { ErrorBorder } from "./switch.style";
 import SwitchSlider from "./__internal__/switch-slider.component";
 import guid from "../../__internal__/utils/helpers/guid";
 import HintText from "../../__internal__/hint-text";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 let deprecateUncontrolledWarnTriggered = false;
 export const Switch = /*#__PURE__*/React.forwardRef(({
   autoFocus,
@@ -71,7 +71,7 @@ export const Switch = /*#__PURE__*/React.forwardRef(({
     shouldLabelBeInline = largeScreen;
   }
   const shouldValidationBeOnLabel = labelInline && !reverse ? true : validationOnLabel;
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const switchStyleProps = {
     "data-component": "switch",
     "data-role": dataRole,

package/esm/components/switch/switch.style.js

@@ -34,6 +34,7 @@ const StyledSwitch = styled.div`
   reverse,
   size
 }) => css`
+    margin-bottom: var(--fieldSpacing);
     ${margin}
     ${FieldLineStyle} {
       display: flex;

package/esm/components/text-editor/text-editor.style.js

@@ -6,6 +6,7 @@ export const StyledTextEditor = styled(Box)`
   position: relative;
 `;
 export const StyledTextEditorWrapper = styled.div`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 `;
 export const StyledWrapper = styled.div`

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

@@ -16,8 +16,8 @@ import ErrorBorder from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import HintText from "../../__internal__/hint-text";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 let deprecateUncontrolledWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 export const Textarea = /*#__PURE__*/React.forwardRef(({
@@ -213,7 +213,7 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }));
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -243,7 +243,8 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
     isOptional: isOptional,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    validationRedesignOptIn: validationRedesignOptIn
+    validationRedesignOptIn: validationRedesignOptIn,
+    my: 0 // prevents any form spacing being applied
   }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(HintText, {
     align: labelAlign,
     id: inputHintId,

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

@@ -6,6 +6,7 @@ import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-ico
 import BaseTheme from "../../style/themes/base";
 export const DEFAULT_MIN_HEIGHT = 64;
 const StyledTextarea = styled.div`
+  margin-bottom: var(--fieldSpacing);
   ${margin};
 
   ${StyledInput} {

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

@@ -220,7 +220,7 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
     warning: warning
   }), !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
     warning: !!(!error && warning)
-  }), input) : input), characterCount));
+  }), input) : input, characterCount)));
 });
 Textbox.displayName = "Textbox";
 export default Textbox;

package/esm/components/time/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Time } from "./time.component";
-export type { TimeValue, TimeProps, TimeHandle, ToggleValue, } from "./time.component";
+export type { TimeValue, TimeProps, TimeHandle, ToggleValue, TimeInputEvent, } from "./time.component";

package/esm/components/time/time.component.js

@@ -1,9 +1,10 @@
 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, { useCallback, useImperativeHandle, useRef, useState } from "react";
+import React, { useCallback, useImperativeHandle, useRef, useState, useEffect } from "react";
 import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 import Fieldset from "../../__internal__/fieldset";
 import Box from "../box";
 import ErrorBorder from "../textbox/textbox.style";
@@ -68,6 +69,21 @@ const Time = /*#__PURE__*/React.forwardRef(({
   const minsAriaLabel = minutesAriaLabel || locale.time.minutesAriaLabelText();
   const hoursRef = useRef(null);
   const minsRef = useRef(null);
+  useEffect(() => {
+    const updates = [...inputValues];
+    if (inputValues[0] !== hourValue) {
+      updates[0] = hourValue;
+    }
+    if (inputValues[1] !== minuteValue) {
+      updates[1] = minuteValue;
+    }
+    if (inputValues[0] !== hourValue || inputValues[1] !== minuteValue) {
+      setInputValues(updates);
+      const formattedHours = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
+      const formattedMinutes = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
+      setFormattedInputValues([formattedHours, formattedMinutes]);
+    }
+  }, [hourValue, minuteValue, inputValues]);
   const computedValidations = (hrs, mins) => {
     const hoursIsString = typeof hrs === "string";
     const minutesIsString = typeof mins === "string";
@@ -170,7 +186,7 @@ const Time = /*#__PURE__*/React.forwardRef(({
     isDisabled: disabled,
     name: name,
     id: internalId.current
-  }, rest, tagComponent("time", rest), {
+  }, rest, filterStyledSystemMarginProps(rest), tagComponent("time", rest), {
     "aria-describedby": inputHint ? combinedAriaDescribedBy : ariaDescribedBy
   }), inputHint && /*#__PURE__*/React.createElement(HintText, {
     align: labelAlign,
@@ -204,7 +220,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
     error: !!hoursError,
     warning: !!hoursWarning,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    my: 0 // prevents any form spacing being applied
   }))), /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     flexDirection: "column",
@@ -232,7 +249,8 @@ const Time = /*#__PURE__*/React.forwardRef(({
     error: !!minutesError,
     warning: !!minutesWarning,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    my: 0 // prevents any form spacing being applied
   }))), showToggle && /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     flexDirection: "column",

package/esm/components/toast/toast.component.js

@@ -3,7 +3,8 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { StyledToast, TypeIcon, StyledToastContent, ToastWrapper, StyledPortal } from "./toast.style";
+import { StyledToast, StyledToastContent, ToastWrapper, StyledPortal } from "./toast.style";
+import { TypeIconStyle as TypeIcon } from "../message/message.style";
 import IconButton from "../icon-button";
 import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";

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

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "center" | "left" | "right" | undefined;
     alignY?: "center" | "top" | "bottom" | undefined;
     isNotice?: boolean | undefined;
 }, never>;
-declare type ToastVariants = MessageVariant;
+declare type ToastVariants = Exclude<MessageVariant, "ai">;
 declare type ToastStyleProps = {
     align?: "left" | "center" | "right";
     alignY?: "top" | "center" | "bottom";
@@ -24,4 +23,4 @@ declare const ToastWrapper: import("styled-components").StyledComponent<"div", a
     align?: "center" | "left" | "right" | undefined;
     isNotice?: boolean | undefined;
 }, never>;
-export { StyledPortal, StyledToast, TypeIcon, StyledToastContent, ToastWrapper, };
+export { StyledPortal, StyledToast, StyledToastContent, ToastWrapper };

package/esm/components/toast/toast.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import StyledIconButton from "../icon-button/icon-button.style";
 import Portal from "../portal/portal";
 import baseTheme from "../../style/themes/base";
@@ -224,4 +223,4 @@ const ToastWrapper = styled.div`
       display: block;
     `}
 `;
-export { StyledPortal, StyledToast, TypeIcon, StyledToastContent, ToastWrapper };
+export { StyledPortal, StyledToast, StyledToastContent, ToastWrapper };

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

@@ -8,5 +8,5 @@ declare const StyledTypography: import("styled-components").StyledComponent<"spa
     textDecoration: string;
     lineHeight: string;
     defaultMargin: string;
-} & TypographyProps, "textDecoration" | "size" | "as" | "weight" | "textTransform" | "lineHeight" | "defaultMargin">;
+} & TypographyProps, "textDecoration" | "as" | "size" | "weight" | "textTransform" | "lineHeight" | "defaultMargin">;
 export default StyledTypography;

package/esm/locales/en-gb.js

@@ -109,7 +109,8 @@ const enGB = {
     info: () => "Information",
     success: () => "Success",
     warning: () => "Warning",
-    neutral: () => "Information"
+    neutral: () => "Information",
+    ai: () => "AI Information"
   },
   numeralDate: {
     validation: {

package/esm/locales/locale.d.ts

@@ -93,6 +93,7 @@ interface Locale {
         success: () => string;
         warning: () => string;
         neutral: () => string;
+        ai?: () => string;
     };
     numeralDate: {
         validation: {

package/lib/__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/lib/__internal__/ai-icon/ai-icon.component.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AiIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
+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 AiIcon = ({
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement("svg", _extends({}, (0, _tags.default)("ai-icon", rest), {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  fill: "none",
+  viewBox: "0 0 20 20"
+}), /*#__PURE__*/_react.default.createElement("g", {
+  clipPath: "url(#a)"
+}, /*#__PURE__*/_react.default.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.default.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.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
+  id: "a"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h20v20H0z"
+}))));
+exports.AiIcon = AiIcon;
+var _default = exports.default = AiIcon;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _aiIcon.default;
+  }
+});
+var _aiIcon = _interopRequireDefault(require("./ai-icon.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/__internal__/{form-spacing-provider → ai-icon}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../esm/__internal__/form-spacing-provider/index.js",
+  "module": "../../../esm/__internal__/ai-icon/index.js",
   "main": "./index.js",
   "types": "./index.d.ts"
 }

package/lib/__internal__/fieldset/fieldset.component.js

@@ -9,9 +9,9 @@ var _fieldset = require("./fieldset.style");
 var _validationIcon = _interopRequireDefault(require("../validations/validation-icon.component"));
 var _newValidation = _interopRequireDefault(require("../../components/carbon-provider/__internal__/new-validation.context"));
 var _inputBehaviour = require("../input-behaviour");
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _help = _interopRequireDefault(require("../../components/help"));
 var _typography = _interopRequireDefault(require("../../components/typography"));
+var _utils = require("../../style/utils");
 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; }
@@ -38,7 +38,7 @@ const Fieldset = ({
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const [ref, setRef] = (0, _react.useState)(null);
   const [isFocused, setFocus] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {