@atlaskit/modal-dialog 12.10.2 → 12.10.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.10.4
+
+### Patch Changes
+
+- [#68278](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68278) [`291b54998410`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/291b54998410) - Reset iframe to have auto pointer-events in modal under feature flag
+
+## 12.10.3
+
+### Patch Changes
+
+- [#60920](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60920) [`a77a99360fa2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a77a99360fa2) - Revert previous modal gutter change.
+
 ## 12.10.2
 
 ### Patch Changes

package/__perf__/default.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
 
 import Modal, {
   ModalBody,

package/__perf__/interactions.tsx

@@ -6,7 +6,7 @@ import {
   PublicInteractionTask,
 } from 'storybook-addon-performance';
 
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
 
 import Modal, {
   ModalBody,

package/__perf__/scroll.tsx

@@ -7,7 +7,7 @@ import {
   PublicInteractionTask,
 } from 'storybook-addon-performance';
 
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
 
 import Modal, {
   ModalBody,

package/dist/cjs/internal/components/modal-dialog.js

@@ -17,6 +17,7 @@ var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-fo
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _layering = require("@atlaskit/layering");
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
@@ -27,6 +28,13 @@ var _utils = require("../utils");
 var _positioner = _interopRequireDefault(require("./positioner"));
 var _css;
 /** @jsx jsx */
+// reset pointer-events on iframe inside modal
+var resetPointerEventsOnIframeStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'iframe:is([aria-modal] iframe)': {
+    pointerEvents: 'auto'
+  }
+});
 var dialogStyles = (0, _react2.css)((_css = {
   display: 'flex',
   width: '100%',
@@ -130,7 +138,9 @@ var ModalDialog = function ModalDialog(props) {
       "data-modal-stack": stackIndex,
       tabIndex: -1,
       "aria-modal": true
-    }), children));
+    }), children, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.iframe_gojiv') && (0, _react2.jsx)(_react2.Global, {
+      styles: resetPointerEventsOnIframeStyles
+    })));
   }))));
 };
 

package/dist/cjs/internal/components/positioner.js

@@ -26,9 +26,9 @@ var positionerStyles = (0, _react.css)({
   height: '100%',
   position: 'fixed',
   zIndex: _constants.layers.modal(),
-  top: 0,
-  left: 0,
-  flexDirection: 'column'
+  flexDirection: 'column',
+  insetBlockStart: 0,
+  insetInlineStart: 0
 });
 var viewportScrollStyles = (0, _react.css)((0, _defineProperty2.default)({
   height: 'auto',
@@ -40,12 +40,12 @@ var viewportScrollStyles = (0, _react.css)((0, _defineProperty2.default)({
 var bodyScrollStyles = (0, _react.css)((0, _defineProperty2.default)({}, _primitives.media.above.xs, {
   maxWidth: maxWidthDimensions,
   maxHeight: maxHeightDimensions,
-  marginRight: 'auto',
-  marginLeft: 'auto',
   position: 'absolute',
-  top: "".concat(_constants2.gutter, "px"),
-  right: 0,
-  left: 0,
+  insetBlockStart: "".concat(_constants2.gutter, "px"),
+  insetInlineEnd: 0,
+  insetInlineStart: 0,
+  marginInlineEnd: 'auto',
+  marginInlineStart: 'auto',
   pointerEvents: 'none'
 }));
 var stackTransitionStyles = (0, _react.css)({

package/dist/cjs/internal/components/scroll-container.js

@@ -36,10 +36,10 @@ var baseStyles = (0, _react2.css)((0, _defineProperty2.default)({
   overflowY: 'auto'
 }));
 var topKeylineStyles = (0, _react2.css)({
-  borderTop: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
+  borderBlockStart: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
 });
 var bottomKeylineStyles = (0, _react2.css)({
-  borderBottom: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
+  borderBlockEnd: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
 });
 /**
  * A container that shows top and bottom keylines when the

package/dist/cjs/internal/constants.js

@@ -16,7 +16,7 @@ var width = exports.width = {
   },
   defaultValue: 'medium'
 };
-var gutter = exports.gutter = 64;
+var gutter = exports.gutter = 60;
 var gridSize = (0, _constants.gridSize)();
 var borderRadius = exports.borderRadius = (0, _constants.borderRadius)();
 var verticalOffset = exports.verticalOffset = gridSize * 2;

package/dist/cjs/modal-footer.js

@@ -11,14 +11,12 @@ var _constants = require("./internal/constants");
 
 var footerStyles = (0, _react.css)({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: _constants.padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingTop: "".concat(_constants.padding - _constants.keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  gap: "var(--ds-space-100, 8px)"
+  gap: "var(--ds-space-100, 8px)",
+  paddingBlockStart: "".concat(_constants.padding - _constants.keylineHeight, "px")
 });
 /**
  * __Modal footer__

package/dist/cjs/modal-header.js

@@ -13,13 +13,11 @@ var _constants = require("./internal/constants");
 
 var headerStyles = (0, _react2.css)({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: _constants.padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingBottom: "".concat(_constants.padding - _constants.keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "".concat(_constants.padding - _constants.keylineHeight, "px")
 });
 /**
  * __Modal header__

package/dist/cjs/modal-title.js

@@ -37,10 +37,9 @@ var textStyles = (0, _react.css)({
   wordWrap: 'break-word'
 });
 var iconStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: "".concat(_constants.titleIconMargin, "px"),
   flex: '0 0 auto',
-  alignSelf: 'start'
+  alignSelf: 'start',
+  marginInlineEnd: "".concat(_constants.titleIconMargin, "px")
 });
 
 /**
@@ -50,19 +49,16 @@ var iconStyles = (0, _react.css)({
  */
 var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 var truncatedTextStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginTop: "".concat(lineHeightOffset / 2, "px"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: "".concat(lineHeightOffset / 2, "px"),
   lineHeight: adjustedLineHeight,
+  marginBlockEnd: "".concat(lineHeightOffset / 2, "px"),
+  marginBlockStart: "".concat(lineHeightOffset / 2, "px"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 var truncatedTextIconStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: "".concat(lineHeightOffset / 2, "px"),
-  lineHeight: 1.2
+  lineHeight: 1.2,
+  marginBlockEnd: "".concat(lineHeightOffset / 2, "px")
 });
 var TitleIcon = function TitleIcon(_ref) {
   var appearance = _ref.appearance,

package/dist/cjs/modal-wrapper.js

@@ -87,7 +87,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.10.2"
+    packageVersion: "12.10.4"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/internal/components/modal-dialog.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useMemo } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css, Global, jsx } from '@emotion/react';
 import { useUID } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FocusRing from '@atlaskit/focus-ring';
 import { useCloseOnEscapePress } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
@@ -16,6 +17,14 @@ import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
 import { dialogHeight, dialogWidth } from '../utils';
 import Positioner from './positioner';
+
+// reset pointer-events on iframe inside modal
+const resetPointerEventsOnIframeStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'iframe:is([aria-modal] iframe)': {
+    pointerEvents: 'auto'
+  }
+});
 const dialogStyles = css({
   display: 'flex',
   width: '100%',
@@ -125,7 +134,9 @@ const ModalDialog = props => {
     "data-modal-stack": stackIndex,
     tabIndex: -1,
     "aria-modal": true
-  }), children))))));
+  }), children, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+    styles: resetPointerEventsOnIframeStyles
+  })))))));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/internal/components/positioner.js

@@ -18,9 +18,9 @@ const positionerStyles = css({
   height: '100%',
   position: 'fixed',
   zIndex: layers.modal(),
-  top: 0,
-  left: 0,
-  flexDirection: 'column'
+  flexDirection: 'column',
+  insetBlockStart: 0,
+  insetInlineStart: 0
 });
 const viewportScrollStyles = css({
   height: 'auto',
@@ -34,12 +34,12 @@ const bodyScrollStyles = css({
   [media.above.xs]: {
     maxWidth: maxWidthDimensions,
     maxHeight: maxHeightDimensions,
-    marginRight: 'auto',
-    marginLeft: 'auto',
     position: 'absolute',
-    top: `${gutter}px`,
-    right: 0,
-    left: 0,
+    insetBlockStart: `${gutter}px`,
+    insetInlineEnd: 0,
+    insetInlineStart: 0,
+    marginInlineEnd: 'auto',
+    marginInlineStart: 'auto',
     pointerEvents: 'none'
   }
 });

package/dist/es2019/internal/components/scroll-container.js

@@ -25,10 +25,10 @@ const baseStyles = css({
   }
 });
 const topKeylineStyles = css({
-  borderTop: `${keylineHeight}px solid ${keylineColor}`
+  borderBlockStart: `${keylineHeight}px solid ${keylineColor}`
 });
 const bottomKeylineStyles = css({
-  borderBottom: `${keylineHeight}px solid ${keylineColor}`
+  borderBlockEnd: `${keylineHeight}px solid ${keylineColor}`
 });
 /**
  * A container that shows top and bottom keylines when the

package/dist/es2019/internal/constants.js

@@ -12,7 +12,7 @@ export const width = {
   },
   defaultValue: 'medium'
 };
-export const gutter = 64;
+export const gutter = 60;
 const gridSize = getGridSize();
 export const borderRadius = getBorderRadius();
 export const verticalOffset = gridSize * 2;

package/dist/es2019/modal-footer.js

@@ -5,14 +5,12 @@ import { useModal } from './hooks';
 import { keylineHeight, padding } from './internal/constants';
 const footerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingTop: `${padding - keylineHeight}px`,
+  padding: padding,
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  gap: "var(--ds-space-100, 8px)"
+  gap: "var(--ds-space-100, 8px)",
+  paddingBlockStart: `${padding - keylineHeight}px`
 });
 /**
  * __Modal footer__

package/dist/es2019/modal-header.js

@@ -5,13 +5,11 @@ import { useModal } from './hooks';
 import { keylineHeight, padding } from './internal/constants';
 const headerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingBottom: `${padding - keylineHeight}px`,
   position: 'relative',
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: `${padding - keylineHeight}px`
 });
 /**
  * __Modal header__

package/dist/es2019/modal-title.js

@@ -30,10 +30,9 @@ const textStyles = css({
   wordWrap: 'break-word'
 });
 const iconStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: `${titleIconMargin}px`,
   flex: '0 0 auto',
-  alignSelf: 'start'
+  alignSelf: 'start',
+  marginInlineEnd: `${titleIconMargin}px`
 });
 
 /**
@@ -43,19 +42,16 @@ const iconStyles = css({
  */
 const lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 const truncatedTextStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginTop: `${lineHeightOffset / 2}px`,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: `${lineHeightOffset / 2}px`,
   lineHeight: adjustedLineHeight,
+  marginBlockEnd: `${lineHeightOffset / 2}px`,
+  marginBlockStart: `${lineHeightOffset / 2}px`,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 const truncatedTextIconStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: `${lineHeightOffset / 2}px`,
-  lineHeight: 1.2
+  lineHeight: 1.2,
+  marginBlockEnd: `${lineHeightOffset / 2}px`
 });
 const TitleIcon = ({
   appearance,

package/dist/es2019/modal-wrapper.js

@@ -72,7 +72,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.10.2"
+    packageVersion: "12.10.4"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/internal/components/modal-dialog.js

@@ -5,13 +5,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _css;
 /** @jsx jsx */
 import { useMemo } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css, Global, jsx } from '@emotion/react';
 import { useUID } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FocusRing from '@atlaskit/focus-ring';
 import { useCloseOnEscapePress } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
@@ -20,6 +21,14 @@ import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
 import { dialogHeight, dialogWidth } from '../utils';
 import Positioner from './positioner';
+
+// reset pointer-events on iframe inside modal
+var resetPointerEventsOnIframeStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'iframe:is([aria-modal] iframe)': {
+    pointerEvents: 'auto'
+  }
+});
 var dialogStyles = css((_css = {
   display: 'flex',
   width: '100%',
@@ -123,7 +132,9 @@ var ModalDialog = function ModalDialog(props) {
       "data-modal-stack": stackIndex,
       tabIndex: -1,
       "aria-modal": true
-    }), children));
+    }), children, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+      styles: resetPointerEventsOnIframeStyles
+    })));
   }))));
 };
 

package/dist/esm/internal/components/positioner.js

@@ -19,9 +19,9 @@ var positionerStyles = css({
   height: '100%',
   position: 'fixed',
   zIndex: layers.modal(),
-  top: 0,
-  left: 0,
-  flexDirection: 'column'
+  flexDirection: 'column',
+  insetBlockStart: 0,
+  insetInlineStart: 0
 });
 var viewportScrollStyles = css(_defineProperty({
   height: 'auto',
@@ -33,12 +33,12 @@ var viewportScrollStyles = css(_defineProperty({
 var bodyScrollStyles = css(_defineProperty({}, media.above.xs, {
   maxWidth: maxWidthDimensions,
   maxHeight: maxHeightDimensions,
-  marginRight: 'auto',
-  marginLeft: 'auto',
   position: 'absolute',
-  top: "".concat(gutter, "px"),
-  right: 0,
-  left: 0,
+  insetBlockStart: "".concat(gutter, "px"),
+  insetInlineEnd: 0,
+  insetInlineStart: 0,
+  marginInlineEnd: 'auto',
+  marginInlineStart: 'auto',
   pointerEvents: 'none'
 }));
 var stackTransitionStyles = css({

package/dist/esm/internal/components/scroll-container.js

@@ -26,10 +26,10 @@ var baseStyles = css(_defineProperty({
   overflowY: 'auto'
 }));
 var topKeylineStyles = css({
-  borderTop: "".concat(keylineHeight, "px solid ").concat(keylineColor)
+  borderBlockStart: "".concat(keylineHeight, "px solid ").concat(keylineColor)
 });
 var bottomKeylineStyles = css({
-  borderBottom: "".concat(keylineHeight, "px solid ").concat(keylineColor)
+  borderBlockEnd: "".concat(keylineHeight, "px solid ").concat(keylineColor)
 });
 /**
  * A container that shows top and bottom keylines when the

package/dist/esm/internal/constants.js

@@ -12,7 +12,7 @@ export var width = {
   },
   defaultValue: 'medium'
 };
-export var gutter = 64;
+export var gutter = 60;
 var gridSize = getGridSize();
 export var borderRadius = getBorderRadius();
 export var verticalOffset = gridSize * 2;

package/dist/esm/modal-footer.js

@@ -5,14 +5,12 @@ import { useModal } from './hooks';
 import { keylineHeight, padding } from './internal/constants';
 var footerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingTop: "".concat(padding - keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  gap: "var(--ds-space-100, 8px)"
+  gap: "var(--ds-space-100, 8px)",
+  paddingBlockStart: "".concat(padding - keylineHeight, "px")
 });
 /**
  * __Modal footer__

package/dist/esm/modal-header.js

@@ -5,13 +5,11 @@ import { useModal } from './hooks';
 import { keylineHeight, padding } from './internal/constants';
 var headerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingBottom: "".concat(padding - keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "".concat(padding - keylineHeight, "px")
 });
 /**
  * __Modal header__

package/dist/esm/modal-title.js

@@ -30,10 +30,9 @@ var textStyles = css({
   wordWrap: 'break-word'
 });
 var iconStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: "".concat(titleIconMargin, "px"),
   flex: '0 0 auto',
-  alignSelf: 'start'
+  alignSelf: 'start',
+  marginInlineEnd: "".concat(titleIconMargin, "px")
 });
 
 /**
@@ -43,19 +42,16 @@ var iconStyles = css({
  */
 var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 var truncatedTextStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginTop: "".concat(lineHeightOffset / 2, "px"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: "".concat(lineHeightOffset / 2, "px"),
   lineHeight: adjustedLineHeight,
+  marginBlockEnd: "".concat(lineHeightOffset / 2, "px"),
+  marginBlockStart: "".concat(lineHeightOffset / 2, "px"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 var truncatedTextIconStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: "".concat(lineHeightOffset / 2, "px"),
-  lineHeight: 1.2
+  lineHeight: 1.2,
+  marginBlockEnd: "".concat(lineHeightOffset / 2, "px")
 });
 var TitleIcon = function TitleIcon(_ref) {
   var appearance = _ref.appearance,

package/dist/esm/modal-wrapper.js

@@ -77,7 +77,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.10.2"
+    packageVersion: "12.10.4"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/types/internal/constants.d.ts

@@ -8,7 +8,7 @@ interface Width {
     defaultValue: string;
 }
 export declare const width: Width;
-export declare const gutter = 64;
+export declare const gutter = 60;
 export declare const borderRadius: number;
 export declare const verticalOffset: number;
 export declare const padding: number;

package/dist/types-ts4.5/internal/constants.d.ts

@@ -8,7 +8,7 @@ interface Width {
     defaultValue: string;
 }
 export declare const width: Width;
-export declare const gutter = 64;
+export declare const gutter = 60;
 export declare const borderRadius: number;
 export declare const verticalOffset: number;
 export declare const padding: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.10.2",
+  "version": "12.10.4",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,9 +39,9 @@
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/primitives": "^1.13.0",
+    "@atlaskit/primitives": "^1.18.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.34.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -63,7 +63,6 @@
     "@atlaskit/select": "^17.0.3",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
@@ -134,6 +133,9 @@
     },
     "platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j": {
       "type": "boolean"
+    },
+    "platform.design-system-team.iframe_gojiv": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/modal-dialog/",