carbon-react 144.0.0 → 144.0.1

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

@@ -3,7 +3,7 @@ import { margin } from "styled-system";
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 import { StyledColorOptions } from "../simple-color-picker/simple-color-picker.style";
 import { StyledSimpleColor } from "../simple-color-picker/simple-color/simple-color.style";
-import { StyledDialogContent, StyledDialogInnerContent } from "../dialog/dialog.style";
+import { StyledDialogContent } from "../dialog/dialog.style";
 import Dialog from "../dialog/dialog.component";
 import StyledIconButton from "../icon-button/icon-button.style";
 import checkerBoardSvg from "../simple-color-picker/simple-color/checker-board.svg";
@@ -52,10 +52,6 @@ const DialogStyle = styled(Dialog)`
     padding: var(--spacing200);
   }
 
-  ${StyledDialogInnerContent} {
-    padding: 0;
-  }
-
   ${StyledColorOptions} {
     max-width: 285px;
     ${StyledSimpleColor} {

package/esm/components/dialog/dialog.component.js

@@ -1,13 +1,11 @@
 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, { useRef, useEffect, useLayoutEffect, useCallback, useImperativeHandle, forwardRef, useState } from "react";
+import React, { useRef, useImperativeHandle, forwardRef } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
 import Heading from "../heading";
 import tagComponent from "../../__internal__/utils/helpers/tags";
-import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-import { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent } from "./dialog.style";
-import { TOP_MARGIN } from "./dialog.config";
+import { StyledDialog, StyledDialogTitle, StyledDialogContent, DialogPositioner } from "./dialog.style";
 import FocusTrap from "../../__internal__/focus-trap";
 import IconButton from "../icon-button";
 import Icon from "../icon";
@@ -44,11 +42,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const locale = useLocale();
   const containerRef = useRef(null);
-  const innerContentRef = useRef(null);
   const titleRef = useRef(null);
-  const [breakpointOffset, setBreakpointOffset] = useState(undefined);
-  const isDialogMaximised = size === "maximise";
-  const listenersAdded = useRef(false);
   const {
     current: titleId
   } = useRef(createGuid());
@@ -61,93 +55,29 @@ const Dialog = /*#__PURE__*/forwardRef(({
       containerRef.current?.focus();
     }
   }), []);
-  const centerDialog = 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 < TOP_MARGIN) {
-      midPointY = 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]);
-  useResizeObserver(innerContentRef, centerDialog, !open);
-  const addListeners = useCallback(() => {
-    /* istanbul ignore else */
-    if (!listenersAdded.current) {
-      window.addEventListener("resize", centerDialog);
-      listenersAdded.current = true;
-    }
-  }, [centerDialog]);
-  const removeListeners = useCallback(() => {
-    if (listenersAdded.current) {
-      window.removeEventListener("resize", centerDialog);
-      listenersAdded.current = false;
-    }
-  }, [centerDialog]);
-  useEffect(() => {
-    if (open) {
-      addListeners();
-    }
-    if (!open) {
-      removeListeners();
-    }
-    return () => {
-      removeListeners();
-    };
-  }, [open, addListeners, removeListeners]);
-  useLayoutEffect(() => {
-    if (open) {
-      centerDialog();
-    }
-  }, [centerDialog, open, height]);
-  const closeIcon = () => {
-    if (!showCloseIcon || !onCancel) return null;
-    return /*#__PURE__*/React.createElement(IconButton, _extends({
-      "aria-label": locale.dialog.ariaLabels.close(),
-      onClick: onCancel,
-      disabled: disableClose
-    }, tagComponent("close", {
-      "data-element": "close",
-      ...closeButtonDataProps
-    })), /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
-    }));
-  };
-  const dialogTitle = () => {
-    if (!title) return null;
-    return /*#__PURE__*/React.createElement(StyledDialogTitle, {
-      showCloseIcon: showCloseIcon,
-      hasSubtitle: !!subtitle,
-      ref: titleRef
-    }, typeof title === "string" ? /*#__PURE__*/React.createElement(Heading, {
-      "data-element": "dialog-title",
-      title: title,
-      titleId: titleId,
-      subheader: subtitle,
-      subtitleId: subtitleId,
-      divider: false,
-      help: help
-    }) : title);
-  };
+  const closeIcon = showCloseIcon && onCancel && /*#__PURE__*/React.createElement(IconButton, _extends({
+    "aria-label": locale.dialog.ariaLabels.close(),
+    onClick: onCancel,
+    disabled: disableClose
+  }, tagComponent("close", {
+    "data-element": "close",
+    ...closeButtonDataProps
+  })), /*#__PURE__*/React.createElement(Icon, {
+    type: "close"
+  }));
+  const dialogTitle = title && /*#__PURE__*/React.createElement(StyledDialogTitle, {
+    showCloseIcon: showCloseIcon,
+    hasSubtitle: !!subtitle,
+    ref: titleRef
+  }, typeof title === "string" ? /*#__PURE__*/React.createElement(Heading, {
+    "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", "");
@@ -174,25 +104,21 @@ const Dialog = /*#__PURE__*/forwardRef(({
     wrapperRef: containerRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
-  }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
+  }, /*#__PURE__*/React.createElement(DialogPositioner, null, /*#__PURE__*/React.createElement(StyledDialog, _extends({
     "data-component": dataComponent,
     "data-element": dataElement,
     "data-role": dataRole,
     "aria-modal": isTopModal ? true : undefined,
-    ref: containerRef,
-    topMargin: isDialogMaximised && breakpointOffset ? breakpointOffset * 2 : TOP_MARGIN
+    ref: containerRef
   }, dialogProps, {
     role: role,
     tabIndex: -1
   }, contentPadding, {
     backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
-  }), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
+  }), dialogTitle, closeIcon, /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
     "data-role": "dialog-content",
     tabIndex: -1
-  }), /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
-    "data-role": "dialog-inner-content",
-    ref: innerContentRef
-  }, contentPadding), children)))));
+  }), children)))));
 });
 if (process.env.NODE_ENV !== "production") {
   Dialog.propTypes = {

package/esm/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/esm/components/dialog/dialog.config.js

@@ -1,5 +1 @@
-export const DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];
-export const TOP_MARGIN = 20;
-export const CONTENT_TOP_PADDING = 24;
-export const HORIZONTAL_PADDING = 32;
-export const CONTENT_BOTTOM_PADDING = 30;
+export const DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];

package/esm/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/esm/components/dialog/dialog.style.js

@@ -1,11 +1,9 @@
 import styled, { css } from "styled-components";
 import { padding as paddingFn } from "styled-system";
 import baseTheme from "../../style/themes/base";
-import { calculateFormSpacingValues, calculateWidthValue } from "../../style/utils/form-style-utils";
-import { StyledForm, StyledFormFooter, StyledFormContent } from "../form/form.style";
 import { StyledHeaderContent, StyledHeading, StyledHeadingTitle } from "../heading/heading.style";
 import StyledIconButton from "../icon-button/icon-button.style";
-import { HORIZONTAL_PADDING, CONTENT_TOP_PADDING, CONTENT_BOTTOM_PADDING } from "./dialog.config";
+import { StyledFormContent, StyledForm, StyledFormFooter } from "../form/form.style";
 const dialogSizes = {
   auto: "fit-content",
   "extra-small": "300px",
@@ -16,38 +14,38 @@ const dialogSizes = {
   large: "960px",
   "extra-large": "1080px"
 };
-const calculatePaddingTopInnerContent = ({
-  py,
-  p
-}) => [py, p].some(padding => padding !== undefined) ? 0 : `${CONTENT_TOP_PADDING}px`;
-const StyledDialog = styled.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 = styled.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 = styled.div`
+  box-shadow: var(--boxShadow300);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: var(--borderRadius200);
+
   ${({
-  isDialogMaximised
-}) => isDialogMaximised && "height: 100%"};
+  size
+}) => size === "maximise" ? 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));
+          }
+        ` : css`
+          max-height: 90vh;
+          max-width: ${dialogSizes[size]};
+          width: 100%;
+        `};
 
   &:focus {
     outline: none;
@@ -59,46 +57,12 @@ const StyledDialog = styled.div.attrs(({
       background-color: ${backgroundColor};
     `}
 
-  ${({
-  size,
-  topMargin
-}) => size && css`
-      max-width: ${size === "maximise" ? `calc(100vw - ${topMargin}px)` : dialogSizes[size]};
-      width: 100%;
-    `}
-
   ${({
   dialogHeight
 }) => dialogHeight && 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. */
-  ${StyledForm} {
-    ${({
-  isDialogMaximised,
-  isDialogMaximisedSmallViewport
-}) => isDialogMaximised && css`
-        ${isDialogMaximisedSmallViewport && "max-height: calc(100vh - 184px);"}
-        height: 100%;
-      `}
-
-    padding-bottom: 0px;
-    box-sizing: border-box;
-  }
-
-  ${StyledFormContent}.sticky {
-    ${props => calculateFormSpacingValues(props, true)}
-  }
-
-  ${StyledFormFooter}.sticky {
-    ${calculateWidthValue}
-    ${props => calculateFormSpacingValues(props, false)}
-    border-bottom-right-radius: var(--borderRadius200);
-    border-bottom-left-radius: var(--borderRadius200);
-  }
-
+  
   > ${StyledIconButton} {
     margin: 0;
     position: absolute;
@@ -113,7 +77,7 @@ const StyledDialog = styled.div.attrs(({
 `;
 const StyledDialogTitle = styled.div`
   background-color: var(--colorsUtilityYang100);
-  padding: 23px ${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);
@@ -141,29 +105,36 @@ const StyledDialogTitle = styled.div`
 `;
 const StyledDialogContent = styled.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(${StyledFormContent}.sticky) {
-    overflow-y: inherit;
-  }
-
   width: 100%;
-  flex: 1;
-  padding: 0px ${HORIZONTAL_PADDING}px ${CONTENT_BOTTOM_PADDING}px;
+  flex-grow: 1;
+
+  padding: 24px 32px 30px;
   ${paddingFn}
+
+  &:has(${StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+
+    ${StyledForm}.sticky {
+      ${StyledFormContent} {
+        padding: 24px 32px 30px;
+        ${paddingFn}
+      }
+
+      ${StyledFormFooter} {
+        border-bottom-right-radius: var(--borderRadius200);
+        border-bottom-left-radius: var(--borderRadius200);
+      }
+    }
+  }
 `;
-const StyledDialogInnerContent = styled.div`
-  position: relative;
-  flex: 1;
-  padding-top: ${calculatePaddingTopInnerContent};
-`;
-StyledDialog.defaultProps = {
+DialogPositioner.defaultProps = {
   theme: baseTheme
 };
 StyledDialogContent.defaultProps = {
   theme: baseTheme
 };
-export { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent };
+export { DialogPositioner, StyledDialog, StyledDialogTitle, StyledDialogContent };

package/esm/components/dialog-full-screen/content.style.js

@@ -1,87 +1,45 @@
 import styled, { css } from "styled-components";
-import { StyledFormFooter, StyledFormContent } from "../form/form.style";
+import { StyledForm, StyledFormContent } from "../form/form.style";
+function computePadding() {
+  return css`
+    padding: 0 16px;
+    @media screen and (min-width: 600px) {
+      padding: 0 24px;
+    }
+    @media screen and (min-width: 960px) {
+      padding: 0 32px;
+    }
+    @media screen and (min-width: 1260px) {
+      padding: 0 40px;
+    }
+  `;
+}
 const StyledContent = styled.div`
+  box-sizing: border-box;
+  display: block;
   overflow-y: auto;
-  padding: 0 16px;
-  flex: 1;
 
-  /* Delegate handling overflow to child form if it has a sticky footer */
-  &:has(${StyledFormContent}.sticky) {
-    overflow-y: inherit;
-  }
+  flex: 1;
+  width: 100%;
 
   ${({
   disableContentPadding
-}) => css`
-    ${!disableContentPadding && css`
-      @media screen and (min-width: 600px) {
-        padding: 0 24px;
-      }
-      @media screen and (min-width: 960px) {
-        padding: 0 32px;
-      }
-      @media screen and (min-width: 1260px) {
-        padding: 0 40px;
-      }
+}) => disableContentPadding ? "padding: 0" : computePadding()}
 
-      ${StyledFormContent}.sticky {
-        padding-right: 16px;
-        padding-left: 16px;
-        margin-right: -16px;
-        margin-left: -16px;
-
-        @media screen and (min-width: 600px) {
-          padding-right: 24px;
-          padding-left: 24px;
-          margin-right: -24px;
-          margin-left: -24px;
-        }
-        @media screen and (min-width: 960px) {
-          padding-right: 32px;
-          padding-left: 32px;
-          margin-right: -32px;
-          margin-left: -32px;
-        }
-        @media screen and (min-width: 1260px) {
-          padding-right: 40px;
-          padding-left: 40px;
-          margin-right: -40px;
-          margin-left: -40px;
-        }
-      }
+  &:has(${StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    padding: 0;
 
-      ${StyledFormFooter}.sticky {
-        padding: 16px;
-
-        margin-right: -16px;
-        margin-left: -16px;
-        width: calc(100% + 32px);
-
-        @media screen and (min-width: 600px) {
-          padding: 16px 24px;
-          margin-right: -24px;
-          margin-left: -24px;
-          width: calc(100% + 48px);
-        }
-        @media screen and (min-width: 960px) {
-          padding: 16px 32px;
-          margin-right: -32px;
-          margin-left: -32px;
-          width: calc(100% + 64px);
-        }
-        @media screen and (min-width: 1260px) {
-          padding: 16px 40px;
-          margin-right: -40px;
-          margin-left: -40px;
-          width: calc(100% + 80px);
-        }
+    ${StyledForm}.sticky {
+      ${StyledFormContent} {
+        ${({
+  disableContentPadding
+}) => disableContentPadding ? "padding: 0" : computePadding()}
       }
-    `}
-
-    ${disableContentPadding && css`
-      padding: 0;
-    `}
-  `}
+    }
+  }
 
   ${({
   hasHeader

package/esm/components/dialog-full-screen/dialog-full-screen.style.js

@@ -4,7 +4,6 @@ import StyledContent from "./content.style";
 import StyledIconButton from "../icon-button/icon-button.style";
 import StyledFullScreenHeading from "../../__internal__/full-screen-heading/full-screen-heading.style";
 import { StyledHeader, StyledHeaderContent, StyledHeading } from "../heading/heading.style";
-import { StyledForm } from "../form/form.style";
 const StyledDialogFullScreen = styled.div`
   :focus {
     outline: none;
@@ -22,10 +21,6 @@ const StyledDialogFullScreen = styled.div`
   display: flex;
   flex-direction: column;
 
-  ${StyledForm} {
-    min-height: 100%;
-  }
-
   ${StyledHeaderContent} {
     align-items: baseline;
   }

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

@@ -1,12 +1,11 @@
 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, { useRef, useContext } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
-import SidebarContext from "../sidebar/__internal__/sidebar.context";
-import ModalContext from "../modal/__internal__/modal.context";
 import FormSummary from "./__internal__/form-summary.component";
 import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons } from "./form.style";
 import { formSpacing } from "./form.config";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
+import ModalContext from "../modal/__internal__/modal.context";
 export const Form = ({
   children,
   saveButton,
@@ -24,45 +23,37 @@ export const Form = ({
   footerPadding = {},
   ...rest
 }) => {
-  const {
-    isInSidebar
-  } = useContext(SidebarContext);
+  const formRef = useRef(null);
+  const formFooterRef = useRef(null);
   const {
     isInModal
   } = useContext(ModalContext);
-  const formRef = useRef(null);
-  const formFooterRef = useRef(null);
-  const hasPadding = !!Object.keys(footerPadding).length;
   const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
-  const classNames = `${stickyFooter ? "sticky" : ""} ${hasPadding ? "padded" : ""}`.trimEnd();
   return /*#__PURE__*/React.createElement(StyledForm, _extends({
     ref: formRef,
+    className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     onSubmit: onSubmit,
     "data-component": "form",
     fieldSpacing: fieldSpacing,
     noValidate: noValidate,
-    isInSidebar: isInSidebar,
     height: height,
     isInModal: isInModal
   }, rest), /*#__PURE__*/React.createElement(StyledFormContent, {
     "data-element": "form-content",
     "data-role": "form-content",
-    className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
-    isInModal: isInModal,
-    tabIndex: -1
+    tabIndex: -1,
+    isInModal: isInModal
   }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: formSpacing[fieldSpacing]
   }, children)), renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
     "data-role": "form-footer",
-    className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
-    fullWidthButtons: fullWidthButtons,
-    isInModal: isInModal
+    fullWidthButtons: fullWidthButtons
   }, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
     "data-role": "form-left-buttons",
     buttonAlignment: buttonAlignment

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

@@ -4,17 +4,21 @@ interface StyledFormContentProps {
     isInModal?: boolean;
 }
 export declare const StyledFormContent: import("styled-components").StyledComponent<"div", any, StyledFormContentProps, never>;
-interface ButtonProps extends StyledFormContentProps {
-    buttonAlignment?: FormButtonAlignment;
+interface StyledFormFooterProps {
+    stickyFooter?: boolean;
     fullWidthButtons?: boolean;
+    buttonAlignment?: FormButtonAlignment;
 }
-export declare const StyledFormFooter: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
+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;
-    isInSidebar?: boolean;
 }
 export declare const StyledForm: import("styled-components").StyledComponent<"form", any, StyledFormProps, never>;
-export declare const StyledRightButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
-export declare const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
+export declare const StyledRightButtons: import("styled-components").StyledComponent<"div", any, {
+    buttonAlignment?: "left" | "right" | undefined;
+}, never>;
+export declare const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, {
+    buttonAlignment?: "left" | "right" | undefined;
+}, never>;
 export {};