carbon-react 144.0.0 → 144.0.1

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

@@ -4,18 +4,14 @@ import StyledFormField from "../../__internal__/form-field/form-field.style";
 import baseTheme from "../../style/themes/base";
 import StyledSearch from "../search/search.style";
 import StyledTextarea from "../textarea/textarea.style";
-export const StyledFormContent = styled.div`
-  ${({
+export const StyledFormContent = styled.div(({
   stickyFooter,
   isInModal
-}) => css`
-    ${stickyFooter && css`
-      /* Take responsibility for handling overflow away from parent modal */
-      overflow-y: ${isInModal ? "auto" : "inherit"};
-      flex: 1;
-    `}
-  `}
-`;
+}) => stickyFooter && isInModal && css`
+      flex-grow: 1;
+      min-height: 0;
+      overflow-y: auto;
+    `);
 export const StyledFormFooter = styled.div`
   align-items: center;
   display: flex;
@@ -30,8 +26,7 @@ export const StyledFormFooter = styled.div`
 
   ${({
   stickyFooter,
-  fullWidthButtons,
-  isInModal
+  fullWidthButtons
 }) => css`
     ${!stickyFooter && css`
       margin-top: 48px;
@@ -44,9 +39,7 @@ export const StyledFormFooter = styled.div`
       padding: 16px 32px;
       width: 100%;
       z-index: 1000;
-      ${!isInModal && css`
-        position: sticky;
-      `}
+      position: sticky;
       bottom: 0;
     `}
 
@@ -61,9 +54,6 @@ export const StyledFormFooter = styled.div`
 StyledFormFooter.defaultProps = {
   theme: baseTheme
 };
-
-// Accounts for height of the header of Modal parent, the height form footer and some additional spacing
-const HEIGHT_SPACING = 216;
 export const StyledForm = styled.form`
   ${space}
 
@@ -80,19 +70,16 @@ export const StyledForm = styled.form`
 
   ${({
   stickyFooter,
-  isInModal,
-  isInSidebar
+  isInModal
 }) => stickyFooter && css`
       display: flex;
       flex-direction: column;
       position: relative;
 
       ${isInModal && css`
-        max-height: calc(100vh - ${HEIGHT_SPACING}px);
-      `}
-
-      ${isInSidebar && css`
-        min-height: 100%;
+        flex-grow: 1;
+        min-height: 0;
+        height: 100%;
       `}
     `}
 `;

package/esm/components/sidebar/sidebar.component.js

@@ -1,13 +1,12 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useRef, useMemo } from "react";
+import React, { useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import Modal from "../modal";
-import StyledSidebar from "./sidebar.style";
+import { StyledSidebar, StyledSidebarContent } from "./sidebar.style";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 import FocusTrap from "../../__internal__/focus-trap";
 import SidebarHeader from "./__internal__/sidebar-header";
-import Box from "../box";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
@@ -45,7 +44,6 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   const {
     current: headerId
   } = useRef(createGuid());
-  const hasStickyFooter = useMemo(() => React.Children.toArray(children).some(child => /*#__PURE__*/React.isValidElement(child) && child.props.stickyFooter), [children]);
   const sidebarRef = useRef(null);
   const setRefs = useCallback(reference => {
     sidebarRef.current = reference;
@@ -64,7 +62,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
       type: "close"
     }));
   };
-  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, _extends({
+  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, {
     "aria-modal": !enableBackgroundUI && isTopModal,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
@@ -76,24 +74,16 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     position: position,
     size: size,
     onCancel: onCancel,
-    role: role
-  }, filterStyledSystemPaddingProps(rest), {
+    role: role,
     width: width
-  }), header && /*#__PURE__*/React.createElement(SidebarHeader, _extends({
+  }, header && /*#__PURE__*/React.createElement(SidebarHeader, _extends({
     closeIcon: closeIcon()
   }, headerPadding, {
     id: headerId
-  }), header), !header && closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
+  }), header), !header && closeIcon(), /*#__PURE__*/React.createElement(StyledSidebarContent, _extends({
     "data-element": "sidebar-content",
-    "data-role": "sidebar-content",
-    pt: "var(--spacing300)",
-    pb: "var(--spacing400)",
-    px: "var(--spacing400)"
-  }, filterStyledSystemPaddingProps(rest), {
-    scrollVariant: "light",
-    overflow: hasStickyFooter ? undefined : "auto",
-    flex: "1"
-  }), /*#__PURE__*/React.createElement(SidebarContext.Provider, {
+    "data-role": "sidebar-content"
+  }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(SidebarContext.Provider, {
     value: {
       isInSidebar: true
     }

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

@@ -9,7 +9,3 @@ export declare const SIDEBAR_SIZES_CSS: {
 };
 export declare const SIDEBAR_SIZES: string[];
 export declare const SIDEBAR_ALIGNMENTS: string[];
-export declare const SIDEBAR_TOP_SPACING = "27px";
-export declare const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
-export declare const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
-export declare const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";

package/esm/components/sidebar/sidebar.config.js

@@ -8,8 +8,4 @@ export const SIDEBAR_SIZES_CSS = {
   "extra-large": "814px"
 };
 export const SIDEBAR_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
-export const SIDEBAR_ALIGNMENTS = ["left", "right"];
-export const SIDEBAR_TOP_SPACING = "27px";
-export const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
-export const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
-export const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";
+export const SIDEBAR_ALIGNMENTS = ["left", "right"];

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

@@ -1,4 +1,6 @@
 import { PaddingProps } from "styled-system";
 import { SidebarProps } from "./sidebar.component";
-declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, Pick<SidebarProps, "width" | "onCancel" | "size" | "position"> & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
-export default StyledSidebar;
+declare type StyledSidebarProps = Pick<SidebarProps, "onCancel" | "position" | "size" | "width">;
+declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps, never>;
+declare const StyledSidebarContent: import("styled-components").StyledComponent<"div", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+export { StyledSidebar, StyledSidebarContent };

package/esm/components/sidebar/sidebar.style.js

@@ -1,25 +1,16 @@
 import styled, { css } from "styled-components";
+import { padding as paddingFn } from "styled-system";
 import computeSizing from "../../style/utils/element-sizing";
 import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
-import { calculateFormSpacingValues, calculateWidthValue } from "../../style/utils/form-style-utils";
-import { StyledFormContent, StyledFormFooter } from "../form/form.style";
 import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
+import { StyledForm, StyledFormContent } from "../form/form.style";
 const StyledSidebar = styled.div`
   // prevents outline being added in safari
   :focus {
     outline: none;
   }
 
-  ${StyledFormContent} {
-    ${props => calculateFormSpacingValues(props, true, "sidebar")}
-  }
-
-  ${StyledFormFooter}.sticky {
-    ${calculateWidthValue}
-    ${props => calculateFormSpacingValues(props, false, "sidebar")}
-  }
-
   ${({
   onCancel,
   position,
@@ -58,7 +49,30 @@ const StyledSidebar = styled.div`
     `}
   `}
 `;
+const StyledSidebarContent = styled.div`
+  box-sizing: border-box;
+  display: block;
+  overflow-y: auto;
+  flex-grow: 1;
+
+  padding: var(--spacing300) var(--spacing400) var(--spacing400);
+  ${paddingFn}
+
+  &:has(${StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    padding: 0;
+
+    ${StyledForm}.sticky {
+      ${StyledFormContent} {
+        padding: var(--spacing300) var(--spacing400) var(--spacing400);
+        ${paddingFn}
+      }
+    }
+  }
+`;
 StyledSidebar.defaultProps = {
   theme: baseTheme
 };
-export default StyledSidebar;
+export { StyledSidebar, StyledSidebarContent };

package/lib/components/advanced-color-picker/advanced-color-picker.style.js

@@ -68,10 +68,6 @@ const DialogStyle = exports.DialogStyle = (0, _styledComponents.default)(_dialog
     padding: var(--spacing200);
   }
 
-  ${_dialog.StyledDialogInnerContent} {
-    padding: 0;
-  }
-
   ${_simpleColorPicker.StyledColorOptions} {
     max-width: 285px;
     ${_simpleColor.StyledSimpleColor} {

package/lib/components/dialog/dialog.component.js

@@ -10,9 +10,7 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _modal = _interopRequireDefault(require("../modal"));
 var _heading = _interopRequireDefault(require("../heading"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
-var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 var _dialog = require("./dialog.style");
-var _dialog2 = require("./dialog.config");
 var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon"));
@@ -53,11 +51,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
 }, ref) => {
   const locale = (0, _useLocale.default)();
   const containerRef = (0, _react.useRef)(null);
-  const innerContentRef = (0, _react.useRef)(null);
   const titleRef = (0, _react.useRef)(null);
-  const [breakpointOffset, setBreakpointOffset] = (0, _react.useState)(undefined);
-  const isDialogMaximised = size === "maximise";
-  const listenersAdded = (0, _react.useRef)(false);
   const {
     current: titleId
   } = (0, _react.useRef)((0, _guid.default)());
@@ -70,93 +64,29 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
       containerRef.current?.focus();
     }
   }), []);
-  const centerDialog = (0, _react.useCallback)(() => {
-    /* istanbul ignore if */
-    if (!containerRef.current) {
-      return;
-    }
-    const {
-      width: dialogWidth,
-      height: dialogHeight
-    } = containerRef.current.getBoundingClientRect();
-    let midPointY = window.innerHeight / 2;
-    let midPointX = window.innerWidth / 2;
-    midPointY -= dialogHeight / 2;
-    midPointX -= dialogWidth / 2;
-    if (midPointY < _dialog2.TOP_MARGIN) {
-      midPointY = _dialog2.TOP_MARGIN;
-    }
-    if (midPointX < 0) {
-      midPointX = 0;
-    }
-    if (isDialogMaximised) {
-      const breakPoint = window.innerWidth > 960 ? 32 : 16;
-      midPointX = breakPoint;
-      midPointY = breakPoint;
-      setBreakpointOffset(breakPoint);
-    }
-    containerRef.current.style.top = `${midPointY}px`;
-    containerRef.current.style.left = `${midPointX}px`;
-  }, [size]);
-  (0, _useResizeObserver.default)(innerContentRef, centerDialog, !open);
-  const addListeners = (0, _react.useCallback)(() => {
-    /* istanbul ignore else */
-    if (!listenersAdded.current) {
-      window.addEventListener("resize", centerDialog);
-      listenersAdded.current = true;
-    }
-  }, [centerDialog]);
-  const removeListeners = (0, _react.useCallback)(() => {
-    if (listenersAdded.current) {
-      window.removeEventListener("resize", centerDialog);
-      listenersAdded.current = false;
-    }
-  }, [centerDialog]);
-  (0, _react.useEffect)(() => {
-    if (open) {
-      addListeners();
-    }
-    if (!open) {
-      removeListeners();
-    }
-    return () => {
-      removeListeners();
-    };
-  }, [open, addListeners, removeListeners]);
-  (0, _react.useLayoutEffect)(() => {
-    if (open) {
-      centerDialog();
-    }
-  }, [centerDialog, open, height]);
-  const closeIcon = () => {
-    if (!showCloseIcon || !onCancel) return null;
-    return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
-      "aria-label": locale.dialog.ariaLabels.close(),
-      onClick: onCancel,
-      disabled: disableClose
-    }, (0, _tags.default)("close", {
-      "data-element": "close",
-      ...closeButtonDataProps
-    })), /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: "close"
-    }));
-  };
-  const dialogTitle = () => {
-    if (!title) return null;
-    return /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogTitle, {
-      showCloseIcon: showCloseIcon,
-      hasSubtitle: !!subtitle,
-      ref: titleRef
-    }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
-      "data-element": "dialog-title",
-      title: title,
-      titleId: titleId,
-      subheader: subtitle,
-      subtitleId: subtitleId,
-      divider: false,
-      help: help
-    }) : title);
-  };
+  const closeIcon = showCloseIcon && onCancel && /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
+    "aria-label": locale.dialog.ariaLabels.close(),
+    onClick: onCancel,
+    disabled: disableClose
+  }, (0, _tags.default)("close", {
+    "data-element": "close",
+    ...closeButtonDataProps
+  })), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "close"
+  }));
+  const dialogTitle = title && /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogTitle, {
+    showCloseIcon: showCloseIcon,
+    hasSubtitle: !!subtitle,
+    ref: titleRef
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
+    "data-element": "dialog-title",
+    title: title,
+    titleId: titleId,
+    subheader: subtitle,
+    subtitleId: subtitleId,
+    divider: false,
+    help: help
+  }) : title);
   let dialogHeight = height;
   if (height && height.match(/px$/)) {
     dialogHeight = height.replace("px", "");
@@ -183,25 +113,21 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     wrapperRef: containerRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
-  }, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_dialog.DialogPositioner, null, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
     "data-component": dataComponent,
     "data-element": dataElement,
     "data-role": dataRole,
     "aria-modal": isTopModal ? true : undefined,
-    ref: containerRef,
-    topMargin: isDialogMaximised && breakpointOffset ? breakpointOffset * 2 : _dialog2.TOP_MARGIN
+    ref: containerRef
   }, dialogProps, {
     role: role,
     tabIndex: -1
   }, contentPadding, {
     backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
-  }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
+  }), dialogTitle, closeIcon, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
     "data-role": "dialog-content",
     tabIndex: -1
-  }), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
-    "data-role": "dialog-inner-content",
-    ref: innerContentRef
-  }, contentPadding), children)))));
+  }), children)))));
 });
 if (process.env.NODE_ENV !== "production") {
   Dialog.propTypes = {

package/lib/components/dialog/dialog.config.d.ts

@@ -1,6 +1,2 @@
 export declare const DIALOG_SIZES: readonly ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];
-export declare const TOP_MARGIN = 20;
-export declare const CONTENT_TOP_PADDING = 24;
-export declare const HORIZONTAL_PADDING = 32;
-export declare const CONTENT_BOTTOM_PADDING = 30;
 export declare type DialogSizes = typeof DIALOG_SIZES[number];

package/lib/components/dialog/dialog.config.js

@@ -3,9 +3,5 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOP_MARGIN = exports.HORIZONTAL_PADDING = exports.DIALOG_SIZES = exports.CONTENT_TOP_PADDING = exports.CONTENT_BOTTOM_PADDING = void 0;
-const DIALOG_SIZES = exports.DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];
-const TOP_MARGIN = exports.TOP_MARGIN = 20;
-const CONTENT_TOP_PADDING = exports.CONTENT_TOP_PADDING = 24;
-const HORIZONTAL_PADDING = exports.HORIZONTAL_PADDING = 32;
-const CONTENT_BOTTOM_PADDING = exports.CONTENT_BOTTOM_PADDING = 30;
+exports.DIALOG_SIZES = void 0;
+const DIALOG_SIZES = exports.DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];

package/lib/components/dialog/dialog.style.d.ts

@@ -1,21 +1,13 @@
-import { DialogSizes } from "./dialog.config";
-import { ContentPaddingInterface } from "./dialog.component";
-declare type StyledDialogProps = {
-    topMargin: number;
-    size?: DialogSizes;
-    dialogHeight?: string;
+import { ContentPaddingInterface, DialogProps } from "./dialog.component";
+declare const DialogPositioner: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledDialog: import("styled-components").StyledComponent<"div", any, Required<Pick<DialogProps, "size">> & {
+    dialogHeight?: string | undefined;
     backgroundColor: string;
-};
-declare const StyledDialog: import("styled-components").StyledComponent<"div", any, {
-    isDialogMaximised: boolean;
-    isDialogMaximisedSmallViewport: boolean;
-    isDialogMaximisedLargeViewport: boolean;
-} & StyledDialogProps & ContentPaddingInterface, "isDialogMaximised" | "isDialogMaximisedSmallViewport" | "isDialogMaximisedLargeViewport">;
+} & ContentPaddingInterface, never>;
 declare type StyledDialogTitleProps = {
     showCloseIcon?: boolean;
     hasSubtitle?: boolean;
 };
 declare const StyledDialogTitle: import("styled-components").StyledComponent<"div", any, StyledDialogTitleProps, never>;
 declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
-declare const StyledDialogInnerContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
-export { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent, };
+export { DialogPositioner, StyledDialog, StyledDialogTitle, StyledDialogContent, };

package/lib/components/dialog/dialog.style.js

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledDialogTitle = exports.StyledDialogInnerContent = exports.StyledDialogContent = exports.StyledDialog = void 0;
+exports.StyledDialogTitle = exports.StyledDialogContent = exports.StyledDialog = exports.DialogPositioner = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
-var _formStyleUtils = require("../../style/utils/form-style-utils");
-var _form = require("../form/form.style");
 var _heading = require("../heading/heading.style");
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
-var _dialog = require("./dialog.config");
+var _form = require("../form/form.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; }
@@ -25,38 +23,38 @@ const dialogSizes = {
   large: "960px",
   "extra-large": "1080px"
 };
-const calculatePaddingTopInnerContent = ({
-  py,
-  p
-}) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
-const StyledDialog = exports.StyledDialog = _styledComponents.default.div.attrs(({
-  topMargin,
-  size
-}) => {
-  const isDialogMaximised = size === "maximise";
-  const isDialogMaximisedSmallViewport = topMargin === 32;
-  const isDialogMaximisedLargeViewport = topMargin === 64;
-  return {
-    isDialogMaximised,
-    isDialogMaximisedSmallViewport,
-    isDialogMaximisedLargeViewport
-  };
-})`
-  box-shadow: var(--boxShadow300);
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--borderRadius200);
+const DialogPositioner = exports.DialogPositioner = _styledComponents.default.div`
   position: fixed;
-  top: 50%;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   z-index: ${({
   theme
 }) => theme.zIndex.modal};
-  max-height: ${({
-  topMargin
-}) => `calc(100vh - ${topMargin}px)`};
+`;
+const StyledDialog = exports.StyledDialog = _styledComponents.default.div`
+  box-shadow: var(--boxShadow300);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: var(--borderRadius200);
+
   ${({
-  isDialogMaximised
-}) => isDialogMaximised && "height: 100%"};
+  size
+}) => size === "maximise" ? (0, _styledComponents.css)`
+          height: calc(100% - var(--spacing400));
+          width: calc(100% - var(--spacing400));
+
+          @media screen and (min-width: 960px) {
+            height: calc(100% - var(--spacing800));
+            width: calc(100% - var(--spacing800));
+          }
+        ` : (0, _styledComponents.css)`
+          max-height: 90vh;
+          max-width: ${dialogSizes[size]};
+          width: 100%;
+        `};
 
   &:focus {
     outline: none;
@@ -68,46 +66,12 @@ const StyledDialog = exports.StyledDialog = _styledComponents.default.div.attrs(
       background-color: ${backgroundColor};
     `}
 
-  ${({
-  size,
-  topMargin
-}) => size && (0, _styledComponents.css)`
-      max-width: ${size === "maximise" ? `calc(100vw - ${topMargin}px)` : dialogSizes[size]};
-      width: 100%;
-    `}
-
   ${({
   dialogHeight
 }) => dialogHeight && (0, _styledComponents.css)`
       height: ${dialogHeight}px;
     `}
-
-  /* We're overriding the max-height on the form content to account for a larger height when in a smaller viewport.
-  TODO: Remove this upon the completion of FE-6643. */
-  ${_form.StyledForm} {
-    ${({
-  isDialogMaximised,
-  isDialogMaximisedSmallViewport
-}) => isDialogMaximised && (0, _styledComponents.css)`
-        ${isDialogMaximisedSmallViewport && "max-height: calc(100vh - 184px);"}
-        height: 100%;
-      `}
-
-    padding-bottom: 0px;
-    box-sizing: border-box;
-  }
-
-  ${_form.StyledFormContent}.sticky {
-    ${props => (0, _formStyleUtils.calculateFormSpacingValues)(props, true)}
-  }
-
-  ${_form.StyledFormFooter}.sticky {
-    ${_formStyleUtils.calculateWidthValue}
-    ${props => (0, _formStyleUtils.calculateFormSpacingValues)(props, false)}
-    border-bottom-right-radius: var(--borderRadius200);
-    border-bottom-left-radius: var(--borderRadius200);
-  }
-
+  
   > ${_iconButton.default} {
     margin: 0;
     position: absolute;
@@ -122,7 +86,7 @@ const StyledDialog = exports.StyledDialog = _styledComponents.default.div.attrs(
 `;
 const StyledDialogTitle = exports.StyledDialogTitle = _styledComponents.default.div`
   background-color: var(--colorsUtilityYang100);
-  padding: 23px ${_dialog.HORIZONTAL_PADDING}px 0;
+  padding: 23px 32px 0;
   border-bottom: 1px solid #ccd6db;
   border-top-right-radius: var(--borderRadius200);
   border-top-left-radius: var(--borderRadius200);
@@ -150,26 +114,33 @@ const StyledDialogTitle = exports.StyledDialogTitle = _styledComponents.default.
 `;
 const StyledDialogContent = exports.StyledDialogContent = _styledComponents.default.div`
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
+  display: block;
   overflow-y: auto;
-
-  /* Delegate handling overflow to child form if it has a sticky footer */
-  &:has(${_form.StyledFormContent}.sticky) {
-    overflow-y: inherit;
-  }
-
   width: 100%;
-  flex: 1;
-  padding: 0px ${_dialog.HORIZONTAL_PADDING}px ${_dialog.CONTENT_BOTTOM_PADDING}px;
+  flex-grow: 1;
+
+  padding: 24px 32px 30px;
   ${_styledSystem.padding}
+
+  &:has(${_form.StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+
+    ${_form.StyledForm}.sticky {
+      ${_form.StyledFormContent} {
+        padding: 24px 32px 30px;
+        ${_styledSystem.padding}
+      }
+
+      ${_form.StyledFormFooter} {
+        border-bottom-right-radius: var(--borderRadius200);
+        border-bottom-left-radius: var(--borderRadius200);
+      }
+    }
+  }
 `;
-const StyledDialogInnerContent = exports.StyledDialogInnerContent = _styledComponents.default.div`
-  position: relative;
-  flex: 1;
-  padding-top: ${calculatePaddingTopInnerContent};
-`;
-StyledDialog.defaultProps = {
+DialogPositioner.defaultProps = {
   theme: _base.default
 };
 StyledDialogContent.defaultProps = {