carbon-react 152.2.0 → 152.2.1

package/lib/__internal__/fieldset/fieldset.style.js

@@ -12,6 +12,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 StyledFieldset = exports.StyledFieldset = _styledComponents.default.fieldset`
   margin: 0;
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
   border: none;
   padding: 0;

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

@@ -12,7 +12,7 @@ var _fieldHelp = _interopRequireDefault(require("../field-help"));
 var _tags = _interopRequireDefault(require("../utils/helpers/tags/tags"));
 var _tab = _interopRequireDefault(require("../../components/tabs/tab/__internal__/tab.context"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+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; }
@@ -70,7 +70,7 @@ const FormField = ({
     setWarning,
     setInfo
   } = (0, _react.useContext)(_tab.default);
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const isMounted = (0, _react.useRef)(false);
   (0, _react.useLayoutEffect)(() => {
     isMounted.current = true;

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

@@ -10,6 +10,7 @@ var _themes = require("../../style/themes");
 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; }
 const FormFieldStyle = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   & + & {
     margin-top: 16px;
   }

package/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -10,7 +10,6 @@ var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/
 var _fieldset = _interopRequireDefault(require("../../../__internal__/fieldset"));
 var _utils = require("../../../style/utils");
 var _tooltipProvider = require("../../../__internal__/tooltip-provider");
-var _formSpacingProvider = _interopRequireDefault(require("../../../__internal__/form-spacing-provider"));
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _validationMessage = _interopRequireDefault(require("../../../__internal__/validation-message/validation-message.component"));
 var _box = _interopRequireDefault(require("../../box"));
@@ -93,9 +92,7 @@ const CheckboxGroup = ({
       error: !!error,
       warning: !!warning
     }
-  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
-    marginBottom: undefined
-  }, children))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+  }, children)))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     id: uniqueId,
@@ -123,9 +120,7 @@ const CheckboxGroup = ({
       warning: !!warning,
       info: !!info
     }
-  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
-    marginBottom: undefined
-  }, children))))));
+  }, children)))));
 };
 exports.CheckboxGroup = CheckboxGroup;
 CheckboxGroup.displayName = "CheckboxGroup";

package/lib/components/checkbox/checkbox.component.js

@@ -13,8 +13,8 @@ var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__intern
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _checkboxGroup = _interopRequireDefault(require("./checkbox-group/__internal__/checkbox-group.context"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
+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; }
@@ -106,7 +106,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
       info: contextInfo || info
     })
   };
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const componentToRender = /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({
     disabled: disabled,
     labelSpacing: labelSpacing,

package/lib/components/checkbox/checkbox.style.js

@@ -18,6 +18,7 @@ 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; }
 const StyledCheckbox = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
   ${({
   disabled,

package/lib/components/date/date.component.js

@@ -15,7 +15,6 @@ var _textbox = _interopRequireDefault(require("../textbox"));
 var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 var _dateRange = _interopRequireDefault(require("../date-range/__internal__/date-range.context"));
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -291,7 +290,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     }
     return value;
   };
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils2.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
     ref: wrapperRef,
     role: "presentation",

package/lib/components/date/date.style.js

@@ -21,6 +21,7 @@ const datePickerWidth = {
   small: "120px"
 };
 const StyledDateInput = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
 
   & ${_inputPresentation.default} {

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

@@ -12,6 +12,7 @@ var _inputPresentation = require("../../__internal__/input/input-presentation.st
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledDateRange = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
 
   & ${_date.default} {

package/lib/components/fieldset/fieldset.component.js

@@ -8,8 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _fieldset = require("./fieldset.style");
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
-var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+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; }
@@ -22,7 +21,7 @@ const Fieldset = ({
   ...rest
 }) => {
   const [ref, setRef] = (0, _react.useState)(null);
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
@@ -40,9 +39,7 @@ const Fieldset = ({
     "data-element": "legend",
     isRequired: required,
     isOptional: isOptional
-  }, legend), validationRedesignOptIn ? children : /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
-    marginBottom: undefined
-  }, children));
+  }, legend), children);
 };
 exports.Fieldset = Fieldset;
 Fieldset.displayName = "Fieldset";

package/lib/components/fieldset/fieldset.style.js

@@ -14,6 +14,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 FieldsetStyle = exports.FieldsetStyle = _styledComponents.default.fieldset`
   margin: 0;
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
   border: none;
   padding: 0;
@@ -21,6 +22,10 @@ const FieldsetStyle = exports.FieldsetStyle = _styledComponents.default.fieldset
   ${({
   newValidation
 }) => !newValidation && (0, _styledComponents.css)`
+      & * {
+        --fieldSpacing: 0;
+      }
+
       &&&& ${_formField.default} {
         margin-top: 0;
         margin-bottom: -1px;

package/lib/components/form/form.component.js

@@ -9,7 +9,6 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 var _formSummary = _interopRequireDefault(require("./__internal__/form-summary.component"));
 var _form = require("./form.style");
 var _form2 = require("./form.config");
-var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
 var _modal = _interopRequireDefault(require("../modal/__internal__/modal.context"));
 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); }
@@ -44,7 +43,6 @@ const Form = ({
     stickyFooter: stickyFooter,
     onSubmit: onSubmit,
     "data-component": "form",
-    fieldSpacing: fieldSpacing,
     noValidate: noValidate,
     height: height,
     isInModal: isInModal
@@ -53,10 +51,9 @@ const Form = ({
     "data-role": "form-content",
     stickyFooter: stickyFooter,
     tabIndex: -1,
-    isInModal: isInModal
-  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
-    marginBottom: _form2.formSpacing[fieldSpacing]
-  }, children)), renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
+    isInModal: isInModal,
+    fieldSpacing: _form2.formSpacing[fieldSpacing]
+  }, children), renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
     "data-role": "form-footer",
     ref: formFooterRef,

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

@@ -8,9 +8,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
-var _search = _interopRequireDefault(require("../search/search.style"));
-var _textarea = _interopRequireDefault(require("../textarea/textarea.style"));
-var _numeralDate = require("../numeral-date/numeral-date.style");
+var _inlineInputs = _interopRequireDefault(require("../inline-inputs/inline-inputs.style"));
+var _select = _interopRequireDefault(require("../select/select.style"));
+var _multiSelect = require("../select/multi-select/multi-select.style");
+var _switch = _interopRequireDefault(require("../switch/switch.style"));
 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; }
@@ -21,6 +22,22 @@ const StyledFormContent = exports.StyledFormContent = _styledComponents.default.
       flex-grow: 1;
       min-height: 0;
       overflow-y: auto;
+    `, ({
+  fieldSpacing
+}) => fieldSpacing && (0, _styledComponents.css)`
+      --fieldSpacing: ${fieldSpacing};
+
+      ${_formField.default} {
+        margin-top: var(--spacing000);
+      }
+
+      // field spacing is also applied to form field here so we need to override
+      ${_inlineInputs.default} ${_formField.default},
+      ${_inlineInputs.default} ${_select.default},
+      ${_inlineInputs.default} ${_multiSelect.StyledSelectMultiSelect},
+      ${_switch.default} ${_formField.default} {
+        margin-bottom: var(--spacing000);
+      }
     `);
 const StyledFormFooter = exports.StyledFormFooter = _styledComponents.default.div`
   align-items: center;
@@ -73,14 +90,6 @@ const StyledForm = exports.StyledForm = _styledComponents.default.form`
       height: ${height};
     `}
 
-  // field spacing is also applied to form field here so we need to override
-  ${_search.default} ${_formField.default}, 
-  ${_textarea.default} ${_formField.default}, 
-  [data-component="time"] ${_formField.default}, 
-  ${_numeralDate.StyledNumeralDate} ${_formField.default} {
-    margin-bottom: var(--spacing000);
-  }
-
   ${({
   stickyFooter,
   isInModal

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

@@ -7,10 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _label = _interopRequireDefault(require("../../__internal__/label"));
 var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
-var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+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; }
@@ -55,7 +54,7 @@ const InlineInputs = ({
       optional: isOptional
     }, label);
   }
-  const marginProps = (0, _useFormSpacing.default)(rest);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   (0, _react.useEffect)(() => {
     if (required) {
       const elements = Array.from(ref.current?.querySelectorAll("input") || /* istanbul ignore next */[]);
@@ -72,9 +71,7 @@ const InlineInputs = ({
     "data-element": "inline-inputs-container",
     "data-role": "inline-inputs-container",
     inputWidth: inputWidth
-  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
-    marginBottom: undefined
-  }, columnWrapper(children, gutter))));
+  }, columnWrapper(children, gutter)));
 };
 InlineInputs.displayName = "InlineInputs";
 var _default = exports.default = InlineInputs;

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

@@ -70,6 +70,7 @@ const StyledContentContainer = exports.StyledContentContainer = _styledComponent
     `}
 `;
 const StyledInlineInputs = _styledComponents.default.div`
+  margin-bottom: var(--fieldSpacing);
   ${_styledSystem.margin}
 
   display: ${({

package/lib/components/numeral-date/numeral-date.component.js

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

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/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/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"));
@@ -179,7 +180,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 +214,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 +243,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "152.2.0",
+  "version": "152.2.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

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";