carbon-react 110.6.0 → 110.7.0

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -28,6 +28,7 @@ DismissibleBox.propTypes = {
   "alignContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -77,6 +78,7 @@ DismissibleBox.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -127,6 +129,7 @@ DismissibleBox.propTypes = {
   "alignItems": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -176,6 +179,7 @@ DismissibleBox.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -226,6 +230,7 @@ DismissibleBox.propTypes = {
   "alignSelf": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -275,6 +280,7 @@ DismissibleBox.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -361,6 +367,7 @@ DismissibleBox.propTypes = {
   "bottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -410,6 +417,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -473,6 +481,7 @@ DismissibleBox.propTypes = {
   "flex": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -522,6 +531,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -572,6 +582,7 @@ DismissibleBox.propTypes = {
   "flexBasis": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -621,6 +632,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -704,6 +716,7 @@ DismissibleBox.propTypes = {
   "height": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -753,6 +766,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -803,6 +817,7 @@ DismissibleBox.propTypes = {
   "justifyItems": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "legacy", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "legacy", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -852,6 +867,7 @@ DismissibleBox.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -902,6 +918,7 @@ DismissibleBox.propTypes = {
   "justifySelf": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -951,6 +968,7 @@ DismissibleBox.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1001,6 +1019,7 @@ DismissibleBox.propTypes = {
   "left": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1050,6 +1069,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1188,6 +1208,7 @@ DismissibleBox.propTypes = {
   "maxHeight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1237,6 +1258,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1287,6 +1309,7 @@ DismissibleBox.propTypes = {
   "maxWidth": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1336,6 +1359,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1397,6 +1421,7 @@ DismissibleBox.propTypes = {
   "minHeight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1446,6 +1471,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1496,6 +1522,7 @@ DismissibleBox.propTypes = {
   "minWidth": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1545,6 +1572,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1651,6 +1679,7 @@ DismissibleBox.propTypes = {
   "opacity": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "inherit", "initial", "revert", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "inherit", "initial", "revert", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1700,6 +1729,7 @@ DismissibleBox.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1765,6 +1795,7 @@ DismissibleBox.propTypes = {
   "overflow": PropTypes.oneOfType([PropTypes.oneOf(["-moz-hidden-unscrollable", "-moz-initial", "auto", "clip", "hidden", "inherit", "initial", "revert", "scroll", "unset", "visible"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-hidden-unscrollable", "-moz-initial", "auto", "clip", "hidden", "inherit", "initial", "revert", "scroll", "unset", "visible", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -1814,6 +1845,7 @@ DismissibleBox.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -2022,6 +2054,7 @@ DismissibleBox.propTypes = {
   "right": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -2071,6 +2104,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -2122,6 +2156,7 @@ DismissibleBox.propTypes = {
   "size": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -2171,6 +2206,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -2222,6 +2258,7 @@ DismissibleBox.propTypes = {
   "top": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -2271,6 +2308,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -2322,6 +2360,7 @@ DismissibleBox.propTypes = {
   "verticalAlign": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -2371,6 +2410,7 @@ DismissibleBox.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,

package/esm/components/form/__internal__/form-summary.component.js

@@ -36,18 +36,25 @@ Summary.propTypes = {
   warnings: PropTypes.number
 };
 
-const FormSummary = props => /*#__PURE__*/React.createElement(StyledFormSummary, {
-  showSummary: props.errors > 0 || props.warnings > 0,
-  "data-element": "form-summary"
-}, /*#__PURE__*/React.createElement(Summary, _extends({
-  type: "errors"
-}, props)), /*#__PURE__*/React.createElement(Summary, _extends({
-  type: "warnings"
-}, props)), props.children);
+const FormSummary = ({
+  fullWidth,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(StyledFormSummary, {
+    showSummary: props.errors || props.warnings,
+    "data-element": "form-summary",
+    fullWidth: fullWidth
+  }, /*#__PURE__*/React.createElement(Summary, _extends({
+    type: "errors"
+  }, props)), /*#__PURE__*/React.createElement(Summary, _extends({
+    type: "warnings"
+  }, props)), props.children);
+};
 
 FormSummary.propTypes = {
   children: PropTypes.node,
   errors: PropTypes.number,
-  warnings: PropTypes.number
+  warnings: PropTypes.number,
+  fullWidth: PropTypes.bool
 };
 export default FormSummary;

package/esm/components/form/__internal__/form-summary.d.ts

@@ -7,6 +7,8 @@ export interface FormSummaryProps {
   errors?: number;
   /** The total number of warnings present in the form */
   warnings?: number;
+  /** Applies full width styling */
+  fullWidth?: boolean;
 }
 
 declare function FormSummary(props: FormSummaryProps): JSX.Element;

package/esm/components/form/__internal__/form-summary.style.js

@@ -11,12 +11,20 @@ export const StyledFormSummary = styled.div`
   padding: 8px;
   white-space: nowrap;
 
+  ${({
+  fullWidth
+}) => fullWidth && css`
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      justify-content: flex-start;
+    `}
+
   ${({
   showSummary
 }) => showSummary && css`
       background-color: var(--colorsUtilityMajor025);
     `}
-
   ${StyledButton} {
     margin-right: 0;
   }
@@ -60,7 +68,8 @@ export const StyledInternalSummary = styled.div`
   }
 `;
 StyledFormSummary.propTypes = {
-  showSummary: PropTypes.bool
+  showSummary: PropTypes.bool,
+  fullWidth: PropTypes.bool
 };
 StyledInternalSummary.propTypes = {
   type: PropTypes.oneOf(["errors", "warnings"])

package/esm/components/form/form.component.js

@@ -6,7 +6,7 @@ import styledSystemPropTypes from "@styled-system/prop-types";
 import { ModalContext } from "../modal/modal.component";
 import { SidebarContext } from "../sidebar/sidebar.component";
 import FormSummary from "./__internal__/form-summary.component";
-import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons } from "./form.style";
+import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons, StyledFullWidthButtons } from "./form.style";
 
 const Form = ({
   children,
@@ -21,6 +21,7 @@ const Form = ({
   fieldSpacing = 3,
   noValidate = true,
   height,
+  fullWidthButtons = false,
   ...rest
 }) => {
   const {
@@ -46,7 +47,7 @@ const Form = ({
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
-  }, children), renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
+  }, children), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
     "data-element": "form-footer",
     className: stickyFooter ? "sticky" : "",
     ref: formFooterRef,
@@ -59,7 +60,22 @@ const Form = ({
     warnings: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
     buttonAlignment: buttonAlignment
-  }, rightSideButtons)));
+  }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
+    "data-element": "form-footer",
+    className: stickyFooter ? "sticky" : "",
+    ref: formFooterRef,
+    stickyFooter: stickyFooter,
+    buttonAlignment: buttonAlignment,
+    fullWidthButtons: fullWidthButtons
+  }, leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
+    fullWidthButtons: fullWidthButtons
+  }, leftSideButtons), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
+    fullWidthButtons: fullWidthButtons
+  }, rightSideButtons), /*#__PURE__*/React.createElement(StyledFullWidthButtons, null, /*#__PURE__*/React.createElement(FormSummary, {
+    fullWidth: fullWidthButtons,
+    errors: errorCount,
+    warnings: warningCount
+  }, saveButton))));
 };
 
 Form.propTypes = { ...styledSystemPropTypes.space,
@@ -98,6 +114,9 @@ Form.propTypes = { ...styledSystemPropTypes.space,
   noValidate: PropTypes.bool,
 
   /** Height of the form (any valid CSS value) */
-  height: PropTypes.string
+  height: PropTypes.string,
+
+  /** Applies styling for full width buttons. Please note that you will still need to pass the `fullWidth` prop to the button you compose */
+  fullWidthButtons: PropTypes.bool
 };
 export default Form;

package/esm/components/form/form.config.d.ts

@@ -0,0 +1 @@
+export const FORM_BUTTON_ALIGNMENTS: string[];

package/esm/components/form/form.d.ts

@@ -26,6 +26,8 @@ export interface FormProps extends SpaceProps {
   warningCount?: number;
   /** Height of the form (any valid CSS value) */
   height?: string;
+  /** Applies styling for full width buttons. Please note that you will still need to pass the `fullWidth` prop to the button you compose */
+  fullWidthButtons?: boolean;
 }
 
 declare function Form(props: FormProps): JSX.Element;

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

@@ -0,0 +1,6 @@
+export const StyledFormContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledFormFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledForm: import("styled-components").StyledComponent<"form", any, {}, never>;
+export const StyledRightButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledFullWidthButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/form/form.style.js

@@ -32,7 +32,8 @@ export const StyledFormFooter = styled.div`
     `}
 
   ${({
-  stickyFooter
+  stickyFooter,
+  fullWidthButtons
 }) => css`
     ${!stickyFooter && css`
       margin-top: 48px;
@@ -48,6 +49,11 @@ export const StyledFormFooter = styled.div`
       position: sticky;
       bottom: 0;
     `}
+
+    ${fullWidthButtons && css`
+      flex-direction: column;
+      align-items: stretch;
+    `}
   `}
 `;
 
@@ -133,7 +139,9 @@ export const StyledForm = styled.form`
 `;
 export const StyledRightButtons = styled.div`
   display: flex;
-  margin-left: 16px;
+  ${({
+  fullWidthButtons
+}) => fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`}
   ${({
   buttonAlignment
 }) => buttonAlignment === "left" && "flex-grow: 1"};
@@ -142,10 +150,16 @@ export const StyledRightButtons = styled.div`
     margin-right: 0;
   }
 `;
+export const StyledFullWidthButtons = styled.div`
+  width: 100%;
+  display: flex;
+`;
 export const StyledLeftButtons = styled.div`
   display: flex;
   justify-content: flex-end;
-  margin-right: 16px;
+  ${({
+  fullWidthButtons
+}) => fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`}
   ${({
   buttonAlignment
 }) => buttonAlignment === "right" && "flex-grow: 1"};

package/esm/components/global-header/global-header.component.js

@@ -61,6 +61,7 @@ GlobalHeader.propTypes = {
   "alignContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -110,6 +111,7 @@ GlobalHeader.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -160,6 +162,7 @@ GlobalHeader.propTypes = {
   "alignItems": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -209,6 +212,7 @@ GlobalHeader.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -259,6 +263,7 @@ GlobalHeader.propTypes = {
   "alignSelf": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -308,6 +313,7 @@ GlobalHeader.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -359,6 +365,7 @@ GlobalHeader.propTypes = {
   "flex": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -408,6 +415,7 @@ GlobalHeader.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -458,6 +466,7 @@ GlobalHeader.propTypes = {
   "flexBasis": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -507,6 +516,7 @@ GlobalHeader.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -589,6 +599,7 @@ GlobalHeader.propTypes = {
   "justifyContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -638,6 +649,7 @@ GlobalHeader.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -688,6 +700,7 @@ GlobalHeader.propTypes = {
   "justifyItems": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "legacy", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "legacy", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -737,6 +750,7 @@ GlobalHeader.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -787,6 +801,7 @@ GlobalHeader.propTypes = {
   "justifySelf": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -836,6 +851,7 @@ GlobalHeader.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,