carbon-react 152.2.0 → 152.3.1

package/lib/components/search/search.component.js

@@ -163,8 +163,7 @@ const Search = exports.Search = /*#__PURE__*/_react.default.forwardRef(({
     maxWidth: maxWidth,
     searchHasValue: searchHasValue,
     showSearchButton: !!searchButton,
-    variant: variant,
-    mb: 0
+    variant: variant
   }, (0, _utils.filterStyledSystemMarginProps)(rest), {
     id: id,
     name: name
@@ -189,7 +188,8 @@ const Search = exports.Search = /*#__PURE__*/_react.default.forwardRef(({
       type: "search",
       ml: 1
     }) : undefined,
-    tooltipPosition: tooltipPosition
+    tooltipPosition: tooltipPosition,
+    my: 0 // prevents any form spacing being applied
   }), searchButton && /*#__PURE__*/_react.default.createElement(_searchButton.default, null, /*#__PURE__*/_react.default.createElement(_button.default, _extends({
     "aria-label": searchButtonAriaLabel || searchButtonText,
     size: "medium",

package/lib/components/search/search.style.js

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

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

@@ -17,7 +17,6 @@ var _areObjectsEqual = _interopRequireDefault(require("../__internal__/utils/are
 var _isNavigationKey = _interopRequireDefault(require("../__internal__/utils/is-navigation-key"));
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
-var _useFormSpacing = _interopRequireDefault(require("../../../hooks/__internal__/useFormSpacing"));
 var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
 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); }
@@ -466,7 +465,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     listWidth
   };
   const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, selectListProps, children);
-  const marginProps = (0, _useFormSpacing.default)(textboxProps);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(textboxProps);
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
     hasTextCursor: true,
     readOnly: readOnly,

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

@@ -18,7 +18,6 @@ var _isExpectedValue = _interopRequireDefault(require("../__internal__/utils/is-
 var _isNavigationKey = _interopRequireDefault(require("../__internal__/utils/is-navigation-key"));
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
-var _useFormSpacing = _interopRequireDefault(require("../../../hooks/__internal__/useFormSpacing"));
 var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
 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); }
@@ -470,7 +469,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
   }, children);
-  const marginProps = (0, _useFormSpacing.default)(textboxProps);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(textboxProps);
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
     disabled: disabled,
     readOnly: readOnly,

package/lib/components/select/select.style.js

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

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

@@ -15,7 +15,6 @@ var _getNextChildByText = _interopRequireDefault(require("../__internal__/utils/
 var _isExpectedOption = _interopRequireDefault(require("../__internal__/utils/is-expected-option"));
 var _isNavigationKey = _interopRequireDefault(require("../__internal__/utils/is-navigation-key"));
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
-var _useFormSpacing = _interopRequireDefault(require("../../../hooks/__internal__/useFormSpacing"));
 var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
 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); }
@@ -335,7 +334,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
   }, children);
-  const marginProps = (0, _useFormSpacing.default)(props);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
     transparent: transparent,
     disabled: disabled,

package/lib/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/lib/components/split-button/split-button-toggle.style.js

@@ -21,12 +21,13 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
   buttonType,
   disabled,
   displayed,
-  size
+  size,
+  isWhite
 }) => (0, _styledComponents.css)`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
 
-    ${!disabled && displayed ? (0, _styledComponents.css)`
+    ${!disabled && displayed && !isWhite ? (0, _styledComponents.css)`
           background-color: var(--colorsActionMajor500);
           border-color: var(--colorsActionMajor500);
 
@@ -39,6 +40,21 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
             border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
+
+    ${!disabled && displayed && isWhite ? (0, _styledComponents.css)`
+          background-color: var(--colorsActionMajorYang100);
+          border-color: var(--colorsActionMajorYang100);
+
+          &,
+          ${_icon.default} {
+            color: var(--colorsYin100);
+          }
+
+          &:focus {
+            border-left-color: var(--colorsSemanticFocus500);
+          }
+        ` : ""}
+
     ${!disabled && buttonType === "primary" && `
       position: relative;
       &::before {
@@ -72,6 +88,18 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
         color: var(--colorsActionMajorYang100);
       }
     }
+
+    ${!disabled && isWhite && `
+      &:focus {
+        background-color: var(--colorsActionMajorYang100);
+        border-color: var(--colorsActionMajorYang100);
+
+        &,
+        ${_icon.default} {
+          color: var(--colorsYin100);
+        }
+      }
+    `}
   `}
 `;
 StyledSplitButtonToggle.defaultProps = {

package/lib/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/lib/components/split-button/split-button.component.js

@@ -41,6 +41,7 @@ const SplitButton = exports.SplitButton = /*#__PURE__*/(0, _react.forwardRef)(({
   "data-element": dataElement,
   "data-role": dataRole,
   "aria-label": ariaLabel,
+  isWhite = false,
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
@@ -51,6 +52,7 @@ const SplitButton = exports.SplitButton = /*#__PURE__*/(0, _react.forwardRef)(({
   const {
     isInFlatTable
   } = (0, _react.useContext)(_flatTable.default);
+  const shouldRenderIsWhiteVariant = buttonType === "secondary" && isWhite;
   (0, _react.useImperativeHandle)(ref, () => ({
     focusMainButton() {
       mainButtonRef.current?.focus();
@@ -85,12 +87,14 @@ const SplitButton = exports.SplitButton = /*#__PURE__*/(0, _react.forwardRef)(({
     onClick: handleMainClick,
     size,
     subtext,
+    isWhite: shouldRenderIsWhiteVariant,
     ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
   };
   const handleToggleClick = () => {
     showButtons();
   };
   const toggleButtonProps = {
+    isWhite: shouldRenderIsWhiteVariant,
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,

package/lib/components/switch/switch.component.js

@@ -12,12 +12,12 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _switch = _interopRequireWildcard(require("./switch.style"));
 var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.component"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _hintText = _interopRequireDefault(require("../../__internal__/hint-text"));
+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; }
@@ -80,7 +80,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     shouldLabelBeInline = largeScreen;
   }
   const shouldValidationBeOnLabel = labelInline && !reverse ? true : validationOnLabel;
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const switchStyleProps = {
     "data-component": "switch",
     "data-role": dataRole,

package/lib/components/switch/switch.style.js

@@ -43,6 +43,7 @@ const StyledSwitch = _styledComponents.default.div`
   reverse,
   size
 }) => (0, _styledComponents.css)`
+    margin-bottom: var(--fieldSpacing);
     ${_styledSystem.margin}
     ${_formField.FieldLineStyle} {
       display: flex;

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

@@ -15,6 +15,7 @@ const StyledTextEditor = exports.StyledTextEditor = (0, _styledComponents.defaul
   position: relative;
 `;
 const StyledTextEditorWrapper = exports.StyledTextEditorWrapper = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
 `;
 const StyledWrapper = exports.StyledWrapper = _styledComponents.default.div`

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

@@ -21,8 +21,8 @@ var _textbox = _interopRequireDefault(require("../textbox/textbox.style"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
 var _box = _interopRequireDefault(require("../box"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _hintText = _interopRequireDefault(require("../../__internal__/hint-text"));
+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; }
@@ -222,7 +222,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }));
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -252,7 +252,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     isOptional: isOptional,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    validationRedesignOptIn: validationRedesignOptIn
+    validationRedesignOptIn: validationRedesignOptIn,
+    my: 0 // prevents any form spacing being applied
   }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_hintText.default, {
     align: labelAlign,
     id: inputHintId,

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

@@ -15,6 +15,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 DEFAULT_MIN_HEIGHT = exports.DEFAULT_MIN_HEIGHT = 64;
 const StyledTextarea = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin};
 
   ${_input.default} {

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

@@ -229,7 +229,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     warning: warning
   }), !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: !!(!error && warning)
-  }), input) : input), characterCount));
+  }), input) : input, characterCount)));
 });
 Textbox.displayName = "Textbox";
 var _default = exports.default = Textbox;

package/lib/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/lib/components/time/time.component.js

@@ -9,6 +9,7 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
+var _utils = require("../../style/utils");
 var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
 var _box = _interopRequireDefault(require("../box"));
 var _textbox = _interopRequireDefault(require("../textbox/textbox.style"));
@@ -77,6 +78,21 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
   const minsAriaLabel = minutesAriaLabel || locale.time.minutesAriaLabelText();
   const hoursRef = (0, _react.useRef)(null);
   const minsRef = (0, _react.useRef)(null);
+  (0, _react.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";
@@ -179,7 +195,7 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     isDisabled: disabled,
     name: name,
     id: internalId.current
-  }, rest, (0, _tags.default)("time", rest), {
+  }, rest, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _tags.default)("time", rest), {
     "aria-describedby": inputHint ? combinedAriaDescribedBy : ariaDescribedBy
   }), inputHint && /*#__PURE__*/_react.default.createElement(_hintText.default, {
     align: labelAlign,
@@ -213,7 +229,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     error: !!hoursError,
     warning: !!hoursWarning,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    my: 0 // prevents any form spacing being applied
   }))), /*#__PURE__*/_react.default.createElement(_box.default, {
     display: "flex",
     flexDirection: "column",
@@ -241,7 +258,8 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     error: !!minutesError,
     warning: !!minutesWarning,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    my: 0 // prevents any form spacing being applied
   }))), showToggle && /*#__PURE__*/_react.default.createElement(_box.default, {
     display: "flex",
     flexDirection: "column",

package/lib/components/toast/toast.component.js

@@ -9,6 +9,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _icon = _interopRequireDefault(require("../icon"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _toast = require("./toast.style");
+var _message = require("../message/message.style");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
@@ -141,7 +142,7 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
     }, !disableAutoFocus && {
       tabIndex,
       onBlur: () => setTabIndex(undefined)
-    }), !isNotice && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
+    }), !isNotice && /*#__PURE__*/_react.default.createElement(_message.TypeIconStyle, {
       variant: isNotification ? "info" : variant,
       "data-role": "toast-type-icon"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/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/lib/components/toast/toast.style.js

@@ -4,14 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastWrapper = exports.StyledToastContent = exports.StyledToast = exports.StyledPortal = void 0;
-Object.defineProperty(exports, "TypeIcon", {
-  enumerable: true,
-  get: function () {
-    return _typeIcon.default;
-  }
-});
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _typeIcon = _interopRequireDefault(require("../message/__internal__/type-icon/type-icon.style"));
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 var _portal = _interopRequireDefault(require("../portal/portal"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));

package/lib/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/lib/locales/en-gb.js

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

package/lib/locales/locale.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "152.2.0",
+  "version": "152.3.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -74,20 +74,20 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-controls": "^8.4.7",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-toolbars": "^8.4.7",
-    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/addon-a11y": "~8.6.7",
+    "@storybook/addon-actions": "~8.6.7",
+    "@storybook/addon-controls": "~8.6.7",
+    "@storybook/addon-docs": "~8.6.7",
+    "@storybook/addon-toolbars": "~8.6.7",
+    "@storybook/addon-viewport": "~8.6.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/components": "^8.4.7",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-webpack5": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
-    "@storybook/types": "^8.4.7",
+    "@storybook/components": "~8.6.7",
+    "@storybook/manager-api": "~8.6.7",
+    "@storybook/preview-api": "~8.6.7",
+    "@storybook/react": "~8.6.7",
+    "@storybook/react-webpack5": "~8.6.7",
+    "@storybook/theming": "~8.6.7",
+    "@storybook/types": "~8.6.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -161,7 +161,7 @@
     "semantic-release": "^24.2.3",
     "semver": "^7.5.4",
     "sprintf-js": "^1.1.3",
-    "storybook": "^8.4.7",
+    "storybook": "~8.6.7",
     "styled-components": "^4.4.1",
     "typescript": "~4.7.0",
     "url-loader": "^4.1.1",

package/esm/__internal__/form-spacing-provider/form-spacing-provider.component.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { FormSpacingContextProps } from "./form-spacing.context";
-interface FormSpacingProviderProps extends FormSpacingContextProps {
-    children: React.ReactNode;
-}
-declare const FormSpacingProvider: ({ marginBottom, children, }: FormSpacingProviderProps) => React.JSX.Element;
-export default FormSpacingProvider;

package/esm/__internal__/form-spacing-provider/form-spacing-provider.component.js

@@ -1,11 +0,0 @@
-import React from "react";
-import { FormSpacingContext } from "./form-spacing.context";
-const FormSpacingProvider = ({
-  marginBottom,
-  children
-}) => /*#__PURE__*/React.createElement(FormSpacingContext.Provider, {
-  value: {
-    marginBottom
-  }
-}, children);
-export default FormSpacingProvider;

package/esm/__internal__/form-spacing-provider/form-spacing.context.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-export interface FormSpacingContextProps {
-    marginBottom?: string;
-}
-export declare const FormSpacingContext: React.Context<FormSpacingContextProps>;

package/esm/__internal__/form-spacing-provider/form-spacing.context.js

@@ -1,2 +0,0 @@
-import React from "react";
-export const FormSpacingContext = /*#__PURE__*/React.createContext({});

package/esm/__internal__/form-spacing-provider/index.d.ts

@@ -1,3 +0,0 @@
-export { FormSpacingContext } from "./form-spacing.context";
-export type { FormSpacingContextProps } from "./form-spacing.context";
-export { default } from "./form-spacing-provider.component";

package/esm/__internal__/form-spacing-provider/index.js

@@ -1,2 +0,0 @@
-export { FormSpacingContext } from "./form-spacing.context";
-export { default } from "./form-spacing-provider.component";

package/esm/components/message/__internal__/message-content/message-content.component.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-export interface MessageContentProps {
-    title?: React.ReactNode;
-    children?: React.ReactNode;
-    showCloseIcon?: boolean;
-    reduceLeftPadding?: boolean;
-}
-declare const MessageContent: ({ title, children, showCloseIcon, reduceLeftPadding, }: MessageContentProps) => React.JSX.Element;
-export default MessageContent;

package/esm/components/message/__internal__/message-content/message-content.component.js

@@ -1,19 +0,0 @@
-import React from "react";
-import Content from "../../../content";
-import MessageContentStyle from "./message-content.style";
-const MessageContent = ({
-  title,
-  children,
-  showCloseIcon,
-  reduceLeftPadding
-}) => {
-  return /*#__PURE__*/React.createElement(MessageContentStyle, {
-    showCloseIcon: showCloseIcon,
-    reduceLeftPadding: reduceLeftPadding,
-    "data-element": "message-content",
-    "data-role": "message-content"
-  }, /*#__PURE__*/React.createElement(Content, {
-    title: title
-  }, children));
-};
-export default MessageContent;

package/esm/components/message/__internal__/message-content/message-content.style.d.ts

@@ -1,3 +0,0 @@
-import { MessageContentProps } from "./message-content.component";
-declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, Pick<MessageContentProps, "showCloseIcon" | "reduceLeftPadding">, never>;
-export default MessageContentStyle;

package/esm/components/message/__internal__/message-content/message-content.style.js

@@ -1,12 +0,0 @@
-import styled from "styled-components";
-const MessageContentStyle = styled.div`
-  padding: 15px ${({
-  showCloseIcon
-}) => showCloseIcon ? "50px" : "20px"} 15px
-    ${({
-  reduceLeftPadding
-}) => reduceLeftPadding ? "10px" : "20px"};
-  white-space: pre-wrap;
-  flex: 1;
-`;
-export default MessageContentStyle;

package/esm/components/message/__internal__/type-icon/type-icon.component.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { MessageVariant } from "../../message.component";
-export interface TypeIconProps {
-    transparent?: boolean;
-    variant: MessageVariant;
-}
-declare const TypeIcon: ({ variant, transparent }: TypeIconProps) => React.JSX.Element;
-export default TypeIcon;

package/esm/components/message/__internal__/type-icon/type-icon.component.js

@@ -1,20 +0,0 @@
-import React from "react";
-import TypeIconStyle from "./type-icon.style";
-import Icon from "../../../icon";
-const TypeIcon = ({
-  variant,
-  transparent
-}) => {
-  function iconToRender() {
-    if (variant === "neutral") return "info";
-    if (variant === "success") return "tick_circle";
-    return variant;
-  }
-  return /*#__PURE__*/React.createElement(TypeIconStyle, {
-    variant: variant,
-    transparent: transparent
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: iconToRender()
-  }));
-};
-export default TypeIcon;

package/esm/components/message/__internal__/type-icon/type-icon.style.d.ts

@@ -1,7 +0,0 @@
-import { MessageVariant } from "../../message.component";
-declare type TypeIconStyleProps = {
-    transparent?: boolean;
-    variant: MessageVariant;
-};
-declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconStyleProps, never>;
-export default TypeIconStyle;