@atlaskit/modal-dialog 12.6.3 → 12.6.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.6.5
+
+### Patch Changes
+
+- [`c2484be748e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2484be748e) - [ux] DSP-11269: hard coded the warning icon to improve color contrast
+
+## 12.6.4
+
+### Patch Changes
+
+- [`c673c7246cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c673c7246cf) - Internal change to improve how media queries are applied. There is no expected behaviour change.
+
 ## 12.6.3
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactUid = require("react-uid");
@@ -15,15 +16,16 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../constants");
 var _context = require("../context");
 var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion-finish"));
 var _utils = require("../utils");
 var _positioner = _interopRequireDefault(require("./positioner"));
+var _css;
 /** @jsx jsx */
-
-var dialogStyles = (0, _react2.css)({
+var dialogStyles = (0, _react2.css)((_css = {
   display: 'flex',
   width: '100%',
   maxWidth: '100vw',
@@ -35,46 +37,36 @@ var dialogStyles = (0, _react2.css)({
   flexDirection: 'column',
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   color: _constants.textColor,
-  pointerEvents: 'auto',
-  '@media (min-width: 480px)': {
-    width: 'var(--modal-dialog-width)',
-    maxWidth: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginRight: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginLeft: 'inherit',
-    borderRadius: _constants.borderRadius,
-    boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")")
-  },
-  /**
-   * This is to support scrolling if the modal's children are wrapped in
-   * a form.
-   */
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '& > form:only-child': {
-    display: 'inherit',
-    maxHeight: 'inherit',
-    flexDirection: 'inherit'
-  }
-});
-var viewportScrollStyles = (0, _react2.css)({
+  pointerEvents: 'auto'
+}, (0, _defineProperty2.default)(_css, _primitives.media.above.xs, {
+  width: 'var(--modal-dialog-width)',
+  maxWidth: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginRight: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginLeft: 'inherit',
+  borderRadius: _constants.borderRadius,
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")")
+}), (0, _defineProperty2.default)(_css, '& > form:only-child', {
+  display: 'inherit',
+  maxHeight: 'inherit',
+  flexDirection: 'inherit'
+}), _css));
+var viewportScrollStyles = (0, _react2.css)((0, _defineProperty2.default)({
   /**
    * This ensures that the element fills the viewport on mobile
    * while also allowing it to overflow if its height is larger than
    * the viewport.
    */
   minHeight: '100vh',
-  maxHeight: 'none',
-  '@media (min-width: 480px)': {
-    minHeight: 'var(--modal-dialog-height)'
-  }
-});
-var bodyScrollStyles = (0, _react2.css)({
-  '@media (min-width: 480px)': {
-    height: 'var(--modal-dialog-height)',
-    maxHeight: 'inherit'
-  }
-});
+  maxHeight: 'none'
+}, _primitives.media.above.xs, {
+  minHeight: 'var(--modal-dialog-height)'
+}));
+var bodyScrollStyles = (0, _react2.css)((0, _defineProperty2.default)({}, _primitives.media.above.xs, {
+  height: 'var(--modal-dialog-height)',
+  maxHeight: 'inherit'
+}));
 var ModalDialog = function ModalDialog(props) {
   var _props$width = props.width,
     width = _props$width === void 0 ? 'medium' : _props$width,

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

@@ -1,12 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _curves = require("@atlaskit/motion/curves");
 var _durations = require("@atlaskit/motion/durations");
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../constants");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -27,27 +30,24 @@ var positionerStyles = (0, _react.css)({
   left: 0,
   flexDirection: 'column'
 });
-var viewportScrollStyles = (0, _react.css)({
+var viewportScrollStyles = (0, _react.css)((0, _defineProperty2.default)({
   height: 'auto',
-  position: 'relative',
-  '@media (min-width: 480px)': {
-    margin: "".concat(_constants2.gutter, "px auto"),
-    pointerEvents: 'none'
-  }
-});
-var bodyScrollStyles = (0, _react.css)({
-  '@media (min-width: 480px)': {
-    maxWidth: maxWidthDimensions,
-    maxHeight: maxHeightDimensions,
-    marginRight: 'auto',
-    marginLeft: 'auto',
-    position: 'absolute',
-    top: "".concat(_constants2.gutter, "px"),
-    right: 0,
-    left: 0,
-    pointerEvents: 'none'
-  }
-});
+  position: 'relative'
+}, _primitives.media.above.xs, {
+  margin: "".concat(_constants2.gutter, "px auto"),
+  pointerEvents: 'none'
+}));
+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,
+  pointerEvents: 'none'
+}));
 var stackTransitionStyles = (0, _react.css)({
   transitionDuration: "".concat(_durations.mediumDurationMs, "ms"),
   transitionProperty: 'transform',

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
@@ -16,24 +17,24 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useLazyCallback = _interopRequireDefault(require("@atlaskit/ds-lib/use-lazy-callback"));
 var _useStateRef3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-state-ref"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../constants");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
 
-var baseStyles = (0, _react2.css)({
+var baseStyles = (0, _react2.css)((0, _defineProperty2.default)({
   display: 'inherit',
   margin: "var(--ds-space-0, 0px)",
   flex: 'inherit',
   flexDirection: 'inherit',
   flexGrow: 1,
   overflowX: 'hidden',
-  overflowY: 'auto',
-  '@media (min-width: 480px)': {
-    height: 'unset',
-    overflowY: 'auto'
-  }
-});
+  overflowY: 'auto'
+}, _primitives.media.above.xs, {
+  height: 'unset',
+  overflowY: 'auto'
+}));
 var topKeylineStyles = (0, _react2.css)({
   borderTop: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
 });

package/dist/cjs/internal/constants.js

@@ -36,6 +36,6 @@ var textColor = "var(--ds-text, ".concat(_colors.N900, ")");
 exports.textColor = textColor;
 var iconColor = {
   danger: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
-  warning: "var(--ds-icon-warning, ".concat(_colors.Y400, ")")
+  warning: "var(--ds-icon-warning, #D97008)"
 };
 exports.iconColor = iconColor;

package/dist/cjs/modal-wrapper.js

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

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.6.3",
+	"version": "12.6.5",
 	"sideEffects": false
 }

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

@@ -7,6 +7,7 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
@@ -26,7 +27,7 @@ const dialogStyles = css({
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   color: textColor,
   pointerEvents: 'auto',
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     width: 'var(--modal-dialog-width)',
     maxWidth: 'inherit',
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -40,7 +41,7 @@ const dialogStyles = css({
    * This is to support scrolling if the modal's children are wrapped in
    * a form.
    */
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > form:only-child': {
     display: 'inherit',
     maxHeight: 'inherit',
@@ -55,12 +56,12 @@ const viewportScrollStyles = css({
    */
   minHeight: '100vh',
   maxHeight: 'none',
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     minHeight: 'var(--modal-dialog-height)'
   }
 });
 const bodyScrollStyles = css({
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     height: 'var(--modal-dialog-height)',
     maxHeight: 'inherit'
   }

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

@@ -4,6 +4,7 @@
 import { css, jsx } from '@emotion/react';
 import { easeInOut } from '@atlaskit/motion/curves';
 import { mediumDurationMs } from '@atlaskit/motion/durations';
+import { media } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import { gutter, verticalOffset } from '../constants';
 const maxWidthDimensions = `calc(100vw - ${gutter * 2}px)`;
@@ -24,13 +25,13 @@ const positionerStyles = css({
 const viewportScrollStyles = css({
   height: 'auto',
   position: 'relative',
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     margin: `${gutter}px auto`,
     pointerEvents: 'none'
   }
 });
 const bodyScrollStyles = css({
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     maxWidth: maxWidthDimensions,
     maxHeight: maxHeightDimensions,
     marginRight: 'auto',

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

@@ -9,6 +9,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
 import useStateRef from '@atlaskit/ds-lib/use-state-ref';
 import FocusRing from '@atlaskit/focus-ring';
+import { media } from '@atlaskit/primitives';
 import { keylineColor, keylineHeight } from '../constants';
 const baseStyles = css({
   display: 'inherit',
@@ -18,7 +19,7 @@ const baseStyles = css({
   flexGrow: 1,
   overflowX: 'hidden',
   overflowY: 'auto',
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     height: 'unset',
     overflowY: 'auto'
   }

package/dist/es2019/internal/constants.js

@@ -1,4 +1,4 @@
-import { N30, N900, R400, Y400 } from '@atlaskit/theme/colors';
+import { N30, N900, R400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -23,5 +23,5 @@ export const keylineColor = `var(--ds-border, ${N30})`;
 export const textColor = `var(--ds-text, ${N900})`;
 export const iconColor = {
   danger: `var(--ds-icon-danger, ${R400})`,
-  warning: `var(--ds-icon-warning, ${Y400})`
+  warning: "var(--ds-icon-warning, #D97008)"
 };

package/dist/es2019/modal-wrapper.js

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

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.6.3",
+	"version": "12.6.5",
 	"sideEffects": false
 }

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _css;
 /** @jsx jsx */
 import { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -9,13 +11,14 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
 import { dialogHeight, dialogWidth } from '../utils';
 import Positioner from './positioner';
-var dialogStyles = css({
+var dialogStyles = css((_css = {
   display: 'flex',
   width: '100%',
   maxWidth: '100vw',
@@ -27,46 +30,36 @@ var dialogStyles = css({
   flexDirection: 'column',
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   color: textColor,
-  pointerEvents: 'auto',
-  '@media (min-width: 480px)': {
-    width: 'var(--modal-dialog-width)',
-    maxWidth: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginRight: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginLeft: 'inherit',
-    borderRadius: borderRadius,
-    boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")
-  },
-  /**
-   * This is to support scrolling if the modal's children are wrapped in
-   * a form.
-   */
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '& > form:only-child': {
-    display: 'inherit',
-    maxHeight: 'inherit',
-    flexDirection: 'inherit'
-  }
-});
-var viewportScrollStyles = css({
+  pointerEvents: 'auto'
+}, _defineProperty(_css, media.above.xs, {
+  width: 'var(--modal-dialog-width)',
+  maxWidth: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginRight: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginLeft: 'inherit',
+  borderRadius: borderRadius,
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")
+}), _defineProperty(_css, '& > form:only-child', {
+  display: 'inherit',
+  maxHeight: 'inherit',
+  flexDirection: 'inherit'
+}), _css));
+var viewportScrollStyles = css(_defineProperty({
   /**
    * This ensures that the element fills the viewport on mobile
    * while also allowing it to overflow if its height is larger than
    * the viewport.
    */
   minHeight: '100vh',
-  maxHeight: 'none',
-  '@media (min-width: 480px)': {
-    minHeight: 'var(--modal-dialog-height)'
-  }
-});
-var bodyScrollStyles = css({
-  '@media (min-width: 480px)': {
-    height: 'var(--modal-dialog-height)',
-    maxHeight: 'inherit'
-  }
-});
+  maxHeight: 'none'
+}, media.above.xs, {
+  minHeight: 'var(--modal-dialog-height)'
+}));
+var bodyScrollStyles = css(_defineProperty({}, media.above.xs, {
+  height: 'var(--modal-dialog-height)',
+  maxHeight: 'inherit'
+}));
 var ModalDialog = function ModalDialog(props) {
   var _props$width = props.width,
     width = _props$width === void 0 ? 'medium' : _props$width,

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

@@ -1,9 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
 import { easeInOut } from '@atlaskit/motion/curves';
 import { mediumDurationMs } from '@atlaskit/motion/durations';
+import { media } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import { gutter, verticalOffset } from '../constants';
 var maxWidthDimensions = "calc(100vw - ".concat(gutter * 2, "px)");
@@ -21,27 +23,24 @@ var positionerStyles = css({
   left: 0,
   flexDirection: 'column'
 });
-var viewportScrollStyles = css({
+var viewportScrollStyles = css(_defineProperty({
   height: 'auto',
-  position: 'relative',
-  '@media (min-width: 480px)': {
-    margin: "".concat(gutter, "px auto"),
-    pointerEvents: 'none'
-  }
-});
-var bodyScrollStyles = css({
-  '@media (min-width: 480px)': {
-    maxWidth: maxWidthDimensions,
-    maxHeight: maxHeightDimensions,
-    marginRight: 'auto',
-    marginLeft: 'auto',
-    position: 'absolute',
-    top: "".concat(gutter, "px"),
-    right: 0,
-    left: 0,
-    pointerEvents: 'none'
-  }
-});
+  position: 'relative'
+}, media.above.xs, {
+  margin: "".concat(gutter, "px auto"),
+  pointerEvents: 'none'
+}));
+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,
+  pointerEvents: 'none'
+}));
 var stackTransitionStyles = css({
   transitionDuration: "".concat(mediumDurationMs, "ms"),
   transitionProperty: 'transform',

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

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
@@ -10,20 +11,20 @@ import noop from '@atlaskit/ds-lib/noop';
 import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
 import useStateRef from '@atlaskit/ds-lib/use-state-ref';
 import FocusRing from '@atlaskit/focus-ring';
+import { media } from '@atlaskit/primitives';
 import { keylineColor, keylineHeight } from '../constants';
-var baseStyles = css({
+var baseStyles = css(_defineProperty({
   display: 'inherit',
   margin: "var(--ds-space-0, 0px)",
   flex: 'inherit',
   flexDirection: 'inherit',
   flexGrow: 1,
   overflowX: 'hidden',
-  overflowY: 'auto',
-  '@media (min-width: 480px)': {
-    height: 'unset',
-    overflowY: 'auto'
-  }
-});
+  overflowY: 'auto'
+}, media.above.xs, {
+  height: 'unset',
+  overflowY: 'auto'
+}));
 var topKeylineStyles = css({
   borderTop: "".concat(keylineHeight, "px solid ").concat(keylineColor)
 });

package/dist/esm/internal/constants.js

@@ -1,4 +1,4 @@
-import { N30, N900, R400, Y400 } from '@atlaskit/theme/colors';
+import { N30, N900, R400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -23,5 +23,5 @@ export var keylineColor = "var(--ds-border, ".concat(N30, ")");
 export var textColor = "var(--ds-text, ".concat(N900, ")");
 export var iconColor = {
   danger: "var(--ds-icon-danger, ".concat(R400, ")"),
-  warning: "var(--ds-icon-warning, ".concat(Y400, ")")
+  warning: "var(--ds-icon-warning, #D97008)"
 };

package/dist/esm/modal-wrapper.js

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

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.6.3",
+	"version": "12.6.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.6.3",
+  "version": "12.6.5",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,26 +12,7 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
-  "af:exports": {
-    ".": "./src/index.tsx",
-    "./types": "./src/types.tsx",
-    "./hooks": "./src/hooks.tsx",
-    "./modal-dialog": "./src/modal-wrapper.tsx",
-    "./modal-header": "./src/modal-header.tsx",
-    "./modal-title": "./src/modal-title.tsx",
-    "./modal-body": "./src/modal-body.tsx",
-    "./modal-footer": "./src/modal-footer.tsx",
-    "./modal-transition": "./src/modal-transition.tsx"
-  },
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
@@ -53,8 +34,9 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/portal": "^4.3.0",
+    "@atlaskit/primitives": "^1.0.2",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -68,6 +50,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/button": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -112,6 +95,25 @@
       ]
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "af:exports": {
+    ".": "./src/index.tsx",
+    "./types": "./src/types.tsx",
+    "./hooks": "./src/hooks.tsx",
+    "./modal-dialog": "./src/modal-wrapper.tsx",
+    "./modal-header": "./src/modal-header.tsx",
+    "./modal-title": "./src/modal-title.tsx",
+    "./modal-body": "./src/modal-body.tsx",
+    "./modal-footer": "./src/modal-footer.tsx",
+    "./modal-transition": "./src/modal-transition.tsx"
+  },
   "homepage": "https://atlassian.design/components/modal-dialog/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,113 @@
+## API Report File for "@atlaskit/modal-dialog"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { ExitingPersistenceProps } from '@atlaskit/motion/exiting-persistence';
+import { jsx } from '@emotion/react';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { RefObject } from 'react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+export type Appearance = 'danger' | 'warning';
+
+// @public (undocumented)
+export type KeyboardOrMouseEvent = KeyboardEvent | React_2.KeyboardEvent<any> | React_2.MouseEvent<any>;
+
+// @public (undocumented)
+export type ModalAttributes = {
+    testId?: ModalDialogProps['testId'];
+    titleId: string;
+    onClose?: OnCloseHandler;
+};
+
+// @public
+export const ModalBody: (props: ModalBodyProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface ModalBodyProps {
+    children: React_2.ReactNode;
+    testId?: string;
+}
+
+// @public (undocumented)
+export interface ModalDialogProps {
+    autoFocus?: RefObject<HTMLElement | null | undefined> | boolean;
+    children?: React_2.ReactNode;
+    height?: number | string;
+    isBlanketHidden?: boolean;
+    label?: string;
+    onClose?: OnCloseHandler;
+    onCloseComplete?: OnCloseCompleteHandler;
+    onOpenComplete?: OnOpenCompleteHandler;
+    onStackChange?: OnStackChangeHandler;
+    shouldCloseOnEscapePress?: boolean;
+    shouldCloseOnOverlayClick?: boolean;
+    shouldScrollInViewport?: boolean;
+    stackIndex?: number;
+    testId?: string;
+    width?: WidthNames | number | string;
+}
+
+// @public
+export const ModalFooter: (props: ModalFooterProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface ModalFooterProps {
+    children?: ReactNode;
+    testId?: string;
+}
+
+// @public
+export const ModalHeader: (props: ModalHeaderProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface ModalHeaderProps {
+    children?: React_2.ReactNode;
+    testId?: string;
+}
+
+// @public
+export const ModalTitle: (props: ModalTitleProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface ModalTitleProps {
+    appearance?: Appearance;
+    children?: ReactNode;
+    isMultiline?: boolean;
+    testId?: string;
+}
+
+// @public
+export const ModalTransition: (props: Pick<ExitingPersistenceProps, 'children'>) => JSX.Element;
+
+// @public
+const ModalWrapper: (props: ModalDialogProps) => jsx.JSX.Element;
+export default ModalWrapper;
+
+// @public (undocumented)
+export type OnCloseCompleteHandler = (element: HTMLElement) => void;
+
+// @public (undocumented)
+export type OnCloseHandler = (e: KeyboardOrMouseEvent, analyticEvent: UIAnalyticsEvent) => void;
+
+// @public (undocumented)
+export type OnOpenCompleteHandler = (node: HTMLElement, isAppearing: boolean) => void;
+
+// @public (undocumented)
+export type OnStackChangeHandler = (stackIndex: number) => void;
+
+// @public (undocumented)
+export const useModal: () => ModalAttributes;
+
+// @public (undocumented)
+type WidthNames = 'large' | 'medium' | 'small' | 'x-large';
+
+// (No @packageDocumentation comment for this package)
+
+```