carbon-react 114.17.5 → 114.18.0

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

@@ -13,16 +13,22 @@ var _label = _interopRequireDefault(require("../../__internal__/label"));
 
 var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
 
+var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
+
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 
+var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const InlineInputsContext = /*#__PURE__*/_react.default.createContext({});
 
 exports.InlineInputsContext = InlineInputsContext;
@@ -50,7 +56,8 @@ const InlineInputs = ({
   inputWidth,
   labelInline = true,
   labelWidth,
-  required
+  required,
+  ...rest
 }) => {
   const labelId = (0, _react.useRef)((0, _guid.default)());
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
@@ -70,17 +77,20 @@ const InlineInputs = ({
     }, label);
   }
 
-  return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, {
+  const marginProps = (0, _useFormSpacing.default)(rest);
+  return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
     labelInline: inlineLabel
-  }, renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
+  }, marginProps), renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
     inputWidth: inputWidth
-  }, columnWrapper(children, gutter, label ? labelId.current : undefined)));
+  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
+    marginBottom: undefined
+  }, columnWrapper(children, gutter, label ? labelId.current : undefined))));
 };
 
 InlineInputs.propTypes = {
@@ -93,6 +103,160 @@ InlineInputs.propTypes = {
   "label": _propTypes.default.string,
   "labelInline": _propTypes.default.bool,
   "labelWidth": _propTypes.default.number,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
   "required": _propTypes.default.bool
 };
 InlineInputs.displayName = "InlineInputs";

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

@@ -7,6 +7,8 @@ exports.default = exports.StyledInlineInput = exports.StyledContentContainer = v
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _styledSystem = require("styled-system");
+
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 
 var _label = require("../../__internal__/label/label.style");
@@ -61,6 +63,8 @@ const StyledContentContainer = _styledComponents.default.div`
 `;
 exports.StyledContentContainer = StyledContentContainer;
 const StyledInlineInputs = _styledComponents.default.div`
+  ${_styledSystem.margin}
+
   display: ${({
   labelInline
 }) => labelInline ? `flex` : `block`};

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -138,6 +138,7 @@ const MultiActionButton = ({
     if (buttonRef.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtonsIfTriggerNotFocused,
@@ -148,7 +149,7 @@ const MultiActionButton = ({
     "data-role": dataRole,
     displayed: showAdditionalButtons,
     width: width
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_button.default, _extends({
+  }, marginProps), /*#__PURE__*/_react.default.createElement(_button.default, _extends({
     "aria-haspopup": "true",
     "aria-expanded": showAdditionalButtons,
     "aria-label": "Show more",

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

@@ -37,6 +37,8 @@ var _carbonProvider = require("../carbon-provider/carbon-provider.component");
 
 var _numeralDateContext = _interopRequireDefault(require("./numeral-date-context"));
 
+var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -252,6 +254,8 @@ const NumeralDate = ({
       isMiddle: isMiddle,
       isEnd: isEnd,
       hasValidationIcon: hasValidationIcon
+    }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
+      marginBottom: undefined
     }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, index === 0 && {
       id: uniqueId
     }, {
@@ -286,7 +290,7 @@ const NumeralDate = ({
     }, {
       size: size,
       tooltipPosition: tooltipPosition
-    }))));
+    })))));
   })))));
 };
 

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

@@ -31,6 +31,8 @@ var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger
 
 var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
 
+var _useFormSpacing = _interopRequireDefault(require("../../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -466,6 +468,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     virtualScrollOverscan: virtualScrollOverscan
   }, children);
 
+  const marginProps = (0, _useFormSpacing.default)(textboxProps);
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
     hasTextCursor: true,
     readOnly: readOnly,
@@ -474,7 +477,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     isOpen: isOpen
-  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement("div", {
+  }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
     activeDescendantId: activeDescendantId,

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

@@ -35,6 +35,8 @@ var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger
 
 var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
 
+var _useFormSpacing = _interopRequireDefault(require("../../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -481,6 +483,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     virtualScrollOverscan: virtualScrollOverscan
   }, children);
 
+  const marginProps = (0, _useFormSpacing.default)(textboxProps);
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
     disabled: disabled,
     readOnly: readOnly,
@@ -490,7 +493,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     isOpen: isOpen
-  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement("div", {
+  }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
     "data-element": "accessibility-label",

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

@@ -167,7 +167,10 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
     onChange: onChange,
     value: selectedValue,
     placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined
-  }, getInputAriaAttributes(), getTextboxProps()), !hasTextCursor && renderSelectText());
+  }, getInputAriaAttributes(), getTextboxProps(), {
+    my: 0 // prevents any form spacing being applied
+
+  }), !hasTextCursor && renderSelectText());
 });
 
 const formInputPropTypes = {

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

@@ -31,6 +31,8 @@ var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-ke
 
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 
+var _useFormSpacing = _interopRequireDefault(require("../../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -384,6 +386,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     virtualScrollOverscan: virtualScrollOverscan
   }, children);
 
+  const marginProps = (0, _useFormSpacing.default)(props);
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
     transparent: transparent,
     disabled: disabled,
@@ -392,7 +395,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     isOpen: isOpen
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement("div", {
+  }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
     "aria-controls": selectListId.current,

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

@@ -202,12 +202,13 @@ const SplitButton = ({
   }
 
   const handleClick = (0, _useClickAwayListener.default)(hideButtons);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: splitButtonNode
-  }, componentTags(), (0, _utils.filterStyledSystemMarginProps)(rest)), renderMainButton(), renderAdditionalButtons());
+  }, componentTags(), marginProps), renderMainButton(), renderAdditionalButtons());
 };
 
 exports.SplitButton = SplitButton;

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

@@ -19,10 +19,10 @@ var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__intern
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
-var _utils = require("../../style/utils");
-
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
+var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -84,6 +84,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef(({
   }
 
   const shouldValidationBeOnLabel = labelInline && !reverse ? true : validationOnLabel;
+  const marginProps = (0, _useFormSpacing.default)(rest);
   const switchStyleProps = {
     "data-component": dataComponent,
     "data-role": dataRole,
@@ -95,7 +96,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef(({
     reverse: !reverse,
     // switched to preserve backward compatibility
     size,
-    ...(0, _utils.filterStyledSystemMarginProps)(rest)
+    ...marginProps
   };
   const switchSliderProps = {
     checked: isControlled ? checked : checkedInternal,

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

@@ -19,8 +19,6 @@ var _input2 = _interopRequireDefault(require("../../__internal__/input/input.com
 
 var _inputBehaviour = require("../../__internal__/input-behaviour");
 
-var _utils = require("../../style/utils");
-
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -41,6 +39,8 @@ var _box = _interopRequireDefault(require("../box"));
 
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
+var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -89,7 +89,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
   "data-role": dataRole,
   helpAriaLabel,
   inputRef,
-  ...props
+  ...rest
 }, ref) => {
   const {
     validationRedesignOptIn
@@ -204,7 +204,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     id: id,
     as: "textarea",
     inputRef: inputRef
-  }, props)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
+  }, rest)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
     disabled: disabled,
     readOnly: readOnly,
     inputIcon: inputIcon,
@@ -216,6 +216,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }));
 
+  const marginProps = (0, _useFormSpacing.default)(rest);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -225,7 +226,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     hasIcon: hasIconInside
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_formField.default, {
+  }, marginProps), /*#__PURE__*/_react.default.createElement(_formField.default, {
     fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,
     error: error,
@@ -240,7 +241,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,
-    isRequired: props.required,
+    isRequired: rest.required,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn

package/lib/hooks/__internal__/useFormSpacing/add-form-spacing/index.d.ts

@@ -0,0 +1,3 @@
+import { MarginProps } from "styled-system";
+declare const _default: (marginProps: MarginProps, formMarginBottom?: string | undefined) => MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
+export default _default;

package/lib/hooks/__internal__/useFormSpacing/add-form-spacing/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _default = (marginProps, formMarginBottom) => {
+  if (!formMarginBottom) {
+    return marginProps;
+  }
+
+  const copiedProps = { ...marginProps
+  };
+  const {
+    mb,
+    marginBottom,
+    mt,
+    marginTop,
+    my,
+    marginY,
+    m,
+    margin
+  } = copiedProps;
+  const hasCustomMarginBottom = [mb, marginBottom, my, marginY, m, margin].some(prop => prop !== undefined);
+  const hasCustomMarginTop = [mt, marginTop, my, marginY, m, margin].some(prop => prop !== undefined);
+
+  if (!hasCustomMarginBottom) {
+    copiedProps.mb = formMarginBottom;
+  }
+
+  if (!hasCustomMarginTop) {
+    copiedProps.mt = 0;
+  }
+
+  return copiedProps;
+};
+
+exports.default = _default;

package/lib/hooks/__internal__/useFormSpacing/add-form-spacing/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../esm/hooks/__internal__/useFormSpacing/add-form-spacing/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useFormSpacing/index.d.ts

@@ -0,0 +1,3 @@
+import { MarginProps } from "styled-system";
+declare const _default: (props: Record<string, unknown> | MarginProps) => MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
+export default _default;

package/lib/hooks/__internal__/useFormSpacing/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _utils = require("../../../style/utils");
+
+var _formSpacingProvider = require("../../../__internal__/form-spacing-provider");
+
+var _addFormSpacing = _interopRequireDefault(require("./add-form-spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = props => {
+  const {
+    marginBottom
+  } = (0, _react.useContext)(_formSpacingProvider.FormSpacingContext);
+  const marginProps = (0, _addFormSpacing.default)((0, _utils.filterStyledSystemMarginProps)(props), marginBottom);
+  return marginProps;
+};
+
+exports.default = _default;

package/lib/hooks/__internal__/useFormSpacing/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useFormSpacing/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.17.5",
+  "version": "114.18.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -121,6 +121,7 @@
     "draft-js": "^0.11.7",
     "enzyme": "^3.3.0",
     "enzyme-to-json": "^3.4.0",
+    "esbuild": "^0.14.47",
     "eslint": "^7.25.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.15.0",
@@ -175,7 +176,6 @@
     "crypto-js": "~3.3.0",
     "date-fns": "^2.26.0",
     "dotenv": "^10.0.0",
-    "esbuild": "^0.14.47",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",