carbon-react 152.1.0 → 152.2.1

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

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

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

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

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

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