@atlaskit/modal-dialog 13.0.0 → 13.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/modal-dialog
 
+## 13.0.2
+
+### Patch Changes
+
+- [#116010](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/116010)
+  [`1b66beb10e972`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1b66beb10e972) -
+  Update dependencies.
+- [#118470](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118470)
+  [`687094c7a76b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/687094c7a76b3) -
+  Internal refactoring to reduce singleton exports.
+
+## 13.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.0.0
 
 ### Major Changes

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

@@ -21,7 +21,6 @@ var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
-var _constants = require("../constants");
 var _context = require("../context");
 var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion-finish"));
 var _element = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element");
@@ -46,12 +45,11 @@ var dialogStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _definePro
   flexDirection: 'column',
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  color: _constants.textColor
+  color: "var(--ds-text, ".concat(_colors.N900, ")")
 }, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), "pointerEvents", 'auto'), _primitives.media.above.xs, {
   width: 'var(--modal-dialog-width)',
   maxWidth: 'inherit',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: _constants.borderRadius,
+  borderRadius: "var(--ds-border-radius, 3px)",
   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), ")"),
   marginInlineEnd: 'inherit',
   marginInlineStart: 'inherit'

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

@@ -11,8 +11,6 @@ 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 */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -20,10 +18,9 @@ var _constants2 = require("../constants");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var maxWidthDimensions = "calc(100vw - ".concat(_constants2.gutter * 2, "px)");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var maxHeightDimensions = "calc(100vh - ".concat(_constants2.gutter * 2 - 1, "px)");
+var gutter = 60;
+var maxWidthDimensions = "calc(100vw - ".concat(gutter * 2, "px)");
+var maxHeightDimensions = "calc(100vh - ".concat(gutter * 2 - 1, "px)");
 
 // Flex and min-content are set to constrain the height of the body and support multi-column scrolling experiences
 var positionerStyles = (0, _react.css)({
@@ -41,16 +38,14 @@ var viewportScrollStyles = (0, _react.css)((0, _defineProperty2.default)({
   height: 'auto',
   position: 'relative'
 }, _primitives.media.above.xs, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  margin: "".concat(_constants2.gutter, "px auto"),
+  margin: "".concat(gutter, "px auto"),
   pointerEvents: 'none'
 }));
 var bodyScrollStyles = (0, _react.css)((0, _defineProperty2.default)({}, _primitives.media.above.xs, {
   maxWidth: maxWidthDimensions,
   maxHeight: maxHeightDimensions,
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  insetBlockStart: "".concat(_constants2.gutter, "px"),
+  insetBlockStart: "".concat(gutter, "px"),
   insetInlineEnd: 0,
   insetInlineStart: 0,
   marginInlineEnd: 'auto',
@@ -87,7 +82,7 @@ var Positioner = function Positioner(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      '--modal-dialog-translate-y': "".concat(stackIndex * (_constants2.verticalOffset / 2), "px")
+      '--modal-dialog-translate-y': "calc(".concat(stackIndex, "px * ", "var(--ds-space-100, 8px)", ")")
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     },
     css: [positionerStyles, stackTransitionStyles, /* We only want to apply transform on modals shifting to the back of the stack. */

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

@@ -17,7 +17,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useLazyCallback = _interopRequireDefault(require("@atlaskit/ds-lib/use-lazy-callback"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _primitives = require("@atlaskit/primitives");
-var _constants = require("../constants");
+var _colors = require("@atlaskit/theme/colors");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 /**
@@ -27,6 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var keylineColor = "var(--ds-border, ".concat(_colors.N30, ")");
 var baseStyles = (0, _react2.css)((0, _defineProperty2.default)({
   display: 'inherit',
   margin: "var(--ds-space-0, 0px)",
@@ -39,13 +40,12 @@ var baseStyles = (0, _react2.css)((0, _defineProperty2.default)({
   height: 'unset',
   overflowY: 'auto'
 }));
+var keylineHeight = 2;
 var topKeylineStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderBlockStart: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
+  borderBlockStart: "var(--ds-border-width-outline, 2px)".concat(" solid ", keylineColor)
 });
 var bottomKeylineStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderBlockEnd: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
+  borderBlockEnd: "var(--ds-border-width-outline, 2px)".concat(" solid ", keylineColor)
 });
 /**
  * A container that shows top and bottom keylines when the
@@ -82,10 +82,10 @@ var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (target) {
       var scrollableDistance = target.scrollHeight - target.clientHeight;
       if (target.previousElementSibling) {
-        setTopKeyline(target.scrollTop > _constants.keylineHeight);
+        setTopKeyline(target.scrollTop > keylineHeight);
       }
       if (target.nextElementSibling) {
-        setBottomKeyline(target.scrollTop <= scrollableDistance - _constants.keylineHeight);
+        setBottomKeyline(target.scrollTop <= scrollableDistance - keylineHeight);
       }
     }
   }));

package/dist/cjs/internal/utils.js

@@ -3,16 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dialogWidth = exports.dialogHeight = void 0;
-var _constants = require("./constants");
+exports.width = exports.dialogWidth = exports.dialogHeight = void 0;
+var width = exports.width = {
+  values: ['small', 'medium', 'large', 'x-large'],
+  widths: {
+    small: 400,
+    medium: 600,
+    large: 800,
+    'x-large': 968
+  },
+  defaultValue: 'medium'
+};
 var dialogWidth = exports.dialogWidth = function dialogWidth(input) {
   if (!input) {
     return 'auto';
   }
-  var isWidthName = _constants.width.values.indexOf(input.toString()) !== -1;
+  var isWidthName = width.values.indexOf(input.toString()) !== -1;
   var widthName = isWidthName && input;
   if (widthName) {
-    return "".concat(_constants.width.widths[widthName], "px");
+    return "".concat(width.widths[widthName], "px");
   }
   return typeof input === 'number' ? "".concat(input, "px") : input;
 };

package/dist/cjs/modal-body.js

@@ -10,7 +10,6 @@ var _react2 = require("@emotion/react");
 var _reactScrolllock = require("react-scrolllock");
 var _hooks = require("./hooks");
 var _scrollContainer = _interopRequireDefault(require("./internal/components/scroll-container"));
-var _constants = require("./internal/constants");
 var _useScroll = _interopRequireDefault(require("./internal/hooks/use-scroll"));
 /**
  * @jsxRuntime classic
@@ -30,8 +29,7 @@ var bodyStyles = (0, _react2.css)({
  * keyline height from header and footer using negative margins.
  */
 var bodyScrollStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-  paddingBlock: _constants.keylineHeight,
+  paddingBlock: "var(--ds-border-width-outline, 2px)",
   paddingInline: "var(--ds-space-300, 24px)"
 });
 

package/dist/cjs/modal-footer.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("@emotion/react");
 var _hooks = require("./hooks");
-var _constants = require("./internal/constants");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -20,8 +19,7 @@ var footerStyles = (0, _react.css)({
   alignItems: 'center',
   justifyContent: 'flex-end',
   gap: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBlockStart: -_constants.keylineHeight,
+  marginBlockStart: "calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"),
   paddingBlockEnd: "var(--ds-space-300, 24px)",
   paddingBlockStart: "var(--ds-space-200, 16px)",
   paddingInline: "var(--ds-space-300, 24px)"

package/dist/cjs/modal-header.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("./hooks");
-var _constants = require("./internal/constants");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -21,8 +20,7 @@ var headerStyles = (0, _react2.css)({
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'space-between',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBlockEnd: -_constants.keylineHeight,
+  marginBlockEnd: "calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"),
   paddingBlockEnd: "var(--ds-space-200, 16px)",
   paddingBlockStart: "var(--ds-space-300, 24px)",
   paddingInline: "var(--ds-space-300, 24px)"

package/dist/cjs/modal-title.js

@@ -8,8 +8,8 @@ exports.default = void 0;
 var _react = require("@emotion/react");
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
 var _warning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning"));
+var _colors = require("@atlaskit/theme/colors");
 var _hooks = require("./hooks");
-var _constants = require("./internal/constants");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -17,6 +17,10 @@ var _constants = require("./internal/constants");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var iconColor = {
+  danger: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
+  warning: "var(--ds-icon-warning, #D97008)"
+};
 var titleStyles = (0, _react.css)({
   display: 'flex',
   minWidth: 0,
@@ -62,7 +66,7 @@ var TitleIcon = function TitleIcon(_ref) {
     css: iconStyles
   }, (0, _react.jsx)(Icon, {
     label: appearance,
-    color: _constants.iconColor[appearance],
+    color: iconColor[appearance],
     spacing: "spacious"
   }));
 };

package/dist/cjs/modal-wrapper.js

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

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

@@ -14,9 +14,8 @@ import { useCloseOnEscapePress, useLayering } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { media } from '@atlaskit/primitives';
-import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { N0, N30A, N60A, N900 } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
-import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
 import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element';
@@ -36,14 +35,13 @@ const dialogStyles = css({
   flexDirection: 'column',
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  color: textColor,
+  color: `var(--ds-text, ${N900})`,
   [CURRENT_SURFACE_CSS_VAR]: `var(--ds-surface-overlay, ${N0})`,
   pointerEvents: 'auto',
   [media.above.xs]: {
     width: 'var(--modal-dialog-width)',
     maxWidth: 'inherit',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius: borderRadius,
+    borderRadius: "var(--ds-border-radius, 3px)",
     boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`,
     marginInlineEnd: 'inherit',
     marginInlineStart: 'inherit'

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

@@ -1,4 +1,3 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -10,11 +9,8 @@ import { easeInOut } from '@atlaskit/motion/curves';
 import { durations } from '@atlaskit/motion/durations';
 import { media } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
-import { gutter, verticalOffset } from '../constants';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+const gutter = 60;
 const maxWidthDimensions = `calc(100vw - ${gutter * 2}px)`;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 const maxHeightDimensions = `calc(100vh - ${gutter * 2 - 1}px)`;
 
 // Flex and min-content are set to constrain the height of the body and support multi-column scrolling experiences
@@ -33,7 +29,6 @@ const viewportScrollStyles = css({
   height: 'auto',
   position: 'relative',
   [media.above.xs]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: `${gutter}px auto`,
     pointerEvents: 'none'
   }
@@ -43,7 +38,6 @@ const bodyScrollStyles = css({
     maxWidth: maxWidthDimensions,
     maxHeight: maxHeightDimensions,
     position: 'absolute',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     insetBlockStart: `${gutter}px`,
     insetInlineEnd: 0,
     insetInlineStart: 0,
@@ -84,7 +78,7 @@ const Positioner = props => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      '--modal-dialog-translate-y': `${stackIndex * (verticalOffset / 2)}px`
+      '--modal-dialog-translate-y': `calc(${stackIndex}px * ${"var(--ds-space-100, 8px)"})`
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     },
     css: [positionerStyles, stackTransitionStyles, /* We only want to apply transform on modals shifting to the back of the stack. */

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

@@ -14,7 +14,8 @@ import noop from '@atlaskit/ds-lib/noop';
 import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
 import FocusRing from '@atlaskit/focus-ring';
 import { media } from '@atlaskit/primitives';
-import { keylineColor, keylineHeight } from '../constants';
+import { N30 } from '@atlaskit/theme/colors';
+const keylineColor = `var(--ds-border, ${N30})`;
 const baseStyles = css({
   display: 'inherit',
   margin: "var(--ds-space-0, 0px)",
@@ -28,13 +29,12 @@ const baseStyles = css({
     overflowY: 'auto'
   }
 });
+const keylineHeight = 2;
 const topKeylineStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderBlockStart: `${keylineHeight}px solid ${keylineColor}`
+  borderBlockStart: `${"var(--ds-border-width-outline, 2px)"} solid ${keylineColor}`
 });
 const bottomKeylineStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderBlockEnd: `${keylineHeight}px solid ${keylineColor}`
+  borderBlockEnd: `${"var(--ds-border-width-outline, 2px)"} solid ${keylineColor}`
 });
 /**
  * A container that shows top and bottom keylines when the

package/dist/es2019/internal/utils.js

@@ -1,4 +1,13 @@
-import { width } from './constants';
+export const width = {
+  values: ['small', 'medium', 'large', 'x-large'],
+  widths: {
+    small: 400,
+    medium: 600,
+    large: 800,
+    'x-large': 968
+  },
+  defaultValue: 'medium'
+};
 export const dialogWidth = input => {
   if (!input) {
     return 'auto';

package/dist/es2019/modal-body.js

@@ -10,7 +10,6 @@ import { css, jsx } from '@emotion/react';
 import { TouchScrollable } from 'react-scrolllock';
 import { useModal } from './hooks';
 import ScrollContainer from './internal/components/scroll-container';
-import { keylineHeight } from './internal/constants';
 import useScroll from './internal/hooks/use-scroll';
 const bodyStyles = css({
   /* This ensures the body fills the whole space between header and footer. */
@@ -23,8 +22,7 @@ const bodyStyles = css({
  * keyline height from header and footer using negative margins.
  */
 const bodyScrollStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-  paddingBlock: keylineHeight,
+  paddingBlock: "var(--ds-border-width-outline, 2px)",
   paddingInline: "var(--ds-space-300, 24px)"
 });
 

package/dist/es2019/modal-footer.js

@@ -6,15 +6,13 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { keylineHeight } from './internal/constants';
 const footerStyles = css({
   display: 'flex',
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
   gap: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBlockStart: -keylineHeight,
+  marginBlockStart: `calc(-1 * ${"var(--ds-border-width-outline, 2px)"})`,
   paddingBlockEnd: "var(--ds-space-300, 24px)",
   paddingBlockStart: "var(--ds-space-200, 16px)",
   paddingInline: "var(--ds-space-300, 24px)"

package/dist/es2019/modal-header.js

@@ -7,14 +7,12 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { keylineHeight } from './internal/constants';
 const headerStyles = css({
   display: 'flex',
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'space-between',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBlockEnd: -keylineHeight,
+  marginBlockEnd: `calc(-1 * ${"var(--ds-border-width-outline, 2px)"})`,
   paddingBlockEnd: "var(--ds-space-200, 16px)",
   paddingBlockStart: "var(--ds-space-300, 24px)",
   paddingInline: "var(--ds-space-300, 24px)"

package/dist/es2019/modal-title.js

@@ -7,8 +7,12 @@
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import WarningIcon from '@atlaskit/icon/core/migration/warning';
+import { R400 } from '@atlaskit/theme/colors';
 import { useModal } from './hooks';
-import { iconColor } from './internal/constants';
+const iconColor = {
+  danger: `var(--ds-icon-danger, ${R400})`,
+  warning: "var(--ds-icon-warning, #D97008)"
+};
 const titleStyles = css({
   display: 'flex',
   minWidth: 0,

package/dist/es2019/modal-wrapper.js

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

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

@@ -17,9 +17,8 @@ import { useCloseOnEscapePress, useLayering } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { media } from '@atlaskit/primitives';
-import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { N0, N30A, N60A, N900 } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
-import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
 import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element';
@@ -39,12 +38,11 @@ var dialogStyles = css(_defineProperty(_defineProperty(_defineProperty(_definePr
   flexDirection: 'column',
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  color: textColor
+  color: "var(--ds-text, ".concat(N900, ")")
 }, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), "pointerEvents", 'auto'), media.above.xs, {
   width: 'var(--modal-dialog-width)',
   maxWidth: 'inherit',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: borderRadius,
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")"),
   marginInlineEnd: 'inherit',
   marginInlineStart: 'inherit'

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -11,11 +10,8 @@ import { easeInOut } from '@atlaskit/motion/curves';
 import { durations } from '@atlaskit/motion/durations';
 import { media } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
-import { gutter, verticalOffset } from '../constants';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var gutter = 60;
 var maxWidthDimensions = "calc(100vw - ".concat(gutter * 2, "px)");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var maxHeightDimensions = "calc(100vh - ".concat(gutter * 2 - 1, "px)");
 
 // Flex and min-content are set to constrain the height of the body and support multi-column scrolling experiences
@@ -34,7 +30,6 @@ var viewportScrollStyles = css(_defineProperty({
   height: 'auto',
   position: 'relative'
 }, media.above.xs, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   margin: "".concat(gutter, "px auto"),
   pointerEvents: 'none'
 }));
@@ -42,7 +37,6 @@ var bodyScrollStyles = css(_defineProperty({}, media.above.xs, {
   maxWidth: maxWidthDimensions,
   maxHeight: maxHeightDimensions,
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   insetBlockStart: "".concat(gutter, "px"),
   insetInlineEnd: 0,
   insetInlineStart: 0,
@@ -80,7 +74,7 @@ var Positioner = function Positioner(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      '--modal-dialog-translate-y': "".concat(stackIndex * (verticalOffset / 2), "px")
+      '--modal-dialog-translate-y': "calc(".concat(stackIndex, "px * ", "var(--ds-space-100, 8px)", ")")
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     },
     css: [positionerStyles, stackTransitionStyles, /* We only want to apply transform on modals shifting to the back of the stack. */

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

@@ -16,7 +16,8 @@ import noop from '@atlaskit/ds-lib/noop';
 import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
 import FocusRing from '@atlaskit/focus-ring';
 import { media } from '@atlaskit/primitives';
-import { keylineColor, keylineHeight } from '../constants';
+import { N30 } from '@atlaskit/theme/colors';
+var keylineColor = "var(--ds-border, ".concat(N30, ")");
 var baseStyles = css(_defineProperty({
   display: 'inherit',
   margin: "var(--ds-space-0, 0px)",
@@ -29,13 +30,12 @@ var baseStyles = css(_defineProperty({
   height: 'unset',
   overflowY: 'auto'
 }));
+var keylineHeight = 2;
 var topKeylineStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderBlockStart: "".concat(keylineHeight, "px solid ").concat(keylineColor)
+  borderBlockStart: "var(--ds-border-width-outline, 2px)".concat(" solid ", keylineColor)
 });
 var bottomKeylineStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderBlockEnd: "".concat(keylineHeight, "px solid ").concat(keylineColor)
+  borderBlockEnd: "var(--ds-border-width-outline, 2px)".concat(" solid ", keylineColor)
 });
 /**
  * A container that shows top and bottom keylines when the

package/dist/esm/internal/utils.js

@@ -1,4 +1,13 @@
-import { width } from './constants';
+export var width = {
+  values: ['small', 'medium', 'large', 'x-large'],
+  widths: {
+    small: 400,
+    medium: 600,
+    large: 800,
+    'x-large': 968
+  },
+  defaultValue: 'medium'
+};
 export var dialogWidth = function dialogWidth(input) {
   if (!input) {
     return 'auto';

package/dist/esm/modal-body.js

@@ -10,7 +10,6 @@ import { css, jsx } from '@emotion/react';
 import { TouchScrollable } from 'react-scrolllock';
 import { useModal } from './hooks';
 import ScrollContainer from './internal/components/scroll-container';
-import { keylineHeight } from './internal/constants';
 import useScroll from './internal/hooks/use-scroll';
 var bodyStyles = css({
   /* This ensures the body fills the whole space between header and footer. */
@@ -23,8 +22,7 @@ var bodyStyles = css({
  * keyline height from header and footer using negative margins.
  */
 var bodyScrollStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-  paddingBlock: keylineHeight,
+  paddingBlock: "var(--ds-border-width-outline, 2px)",
   paddingInline: "var(--ds-space-300, 24px)"
 });
 

package/dist/esm/modal-footer.js

@@ -6,15 +6,13 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { keylineHeight } from './internal/constants';
 var footerStyles = css({
   display: 'flex',
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
   gap: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBlockStart: -keylineHeight,
+  marginBlockStart: "calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"),
   paddingBlockEnd: "var(--ds-space-300, 24px)",
   paddingBlockStart: "var(--ds-space-200, 16px)",
   paddingInline: "var(--ds-space-300, 24px)"

package/dist/esm/modal-header.js

@@ -7,14 +7,12 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { keylineHeight } from './internal/constants';
 var headerStyles = css({
   display: 'flex',
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'space-between',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBlockEnd: -keylineHeight,
+  marginBlockEnd: "calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"),
   paddingBlockEnd: "var(--ds-space-200, 16px)",
   paddingBlockStart: "var(--ds-space-300, 24px)",
   paddingInline: "var(--ds-space-300, 24px)"

package/dist/esm/modal-title.js

@@ -7,8 +7,12 @@
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import WarningIcon from '@atlaskit/icon/core/migration/warning';
+import { R400 } from '@atlaskit/theme/colors';
 import { useModal } from './hooks';
-import { iconColor } from './internal/constants';
+var iconColor = {
+  danger: "var(--ds-icon-danger, ".concat(R400, ")"),
+  warning: "var(--ds-icon-warning, #D97008)"
+};
 var titleStyles = css({
   display: 'flex',
   minWidth: 0,

package/dist/esm/modal-wrapper.js

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

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

@@ -1,3 +1,12 @@
-import { type ModalDialogProps } from '../types';
+import { type ModalDialogProps, type WidthNames } from '../types';
+interface Width {
+    values: string[];
+    widths: {
+        [index in WidthNames]: number;
+    };
+    defaultValue: string;
+}
+export declare const width: Width;
 export declare const dialogWidth: (input?: ModalDialogProps['width']) => string;
 export declare const dialogHeight: (input?: ModalDialogProps['height']) => string;
+export {};

package/dist/types/types.d.ts

@@ -1,6 +1,6 @@
 import { type default as React, type RefObject } from 'react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { WidthNames } from './internal/constants';
+export type WidthNames = 'small' | 'medium' | 'large' | 'x-large';
 export type KeyboardOrMouseEvent = React.MouseEvent<any> | React.KeyboardEvent<any> | KeyboardEvent;
 export type Appearance = 'danger' | 'warning';
 export type OnCloseHandler = (e: KeyboardOrMouseEvent, analyticEvent: UIAnalyticsEvent) => void;

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

@@ -1,3 +1,12 @@
-import { type ModalDialogProps } from '../types';
+import { type ModalDialogProps, type WidthNames } from '../types';
+interface Width {
+    values: string[];
+    widths: {
+        [index in WidthNames]: number;
+    };
+    defaultValue: string;
+}
+export declare const width: Width;
 export declare const dialogWidth: (input?: ModalDialogProps['width']) => string;
 export declare const dialogHeight: (input?: ModalDialogProps['height']) => string;
+export {};

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

@@ -1,6 +1,6 @@
 import { type default as React, type RefObject } from 'react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { WidthNames } from './internal/constants';
+export type WidthNames = 'small' | 'medium' | 'large' | 'x-large';
 export type KeyboardOrMouseEvent = React.MouseEvent<any> | React.KeyboardEvent<any> | KeyboardEvent;
 export type Appearance = 'danger' | 'warning';
 export type OnCloseHandler = (e: KeyboardOrMouseEvent, analyticEvent: UIAnalyticsEvent) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "13.0.0",
+	"version": "13.0.2",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,15 +33,15 @@
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
-		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/layering": "^2.0.0",
-		"@atlaskit/motion": "^4.0.0",
+		"@atlaskit/motion": "^5.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/portal": "^5.0.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -56,7 +56,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/avatar": "^22.0.0",
+		"@atlaskit/avatar": "^23.0.0",
 		"@atlaskit/avatar-group": "^12.0.0",
 		"@atlaskit/banner": "^13.0.0",
 		"@atlaskit/breadcrumbs": "^15.0.0",
@@ -65,9 +65,9 @@
 		"@atlaskit/datetime-picker": "^16.0.0",
 		"@atlaskit/docs": "*",
 		"@atlaskit/dropdown-menu": "^13.0.0",
-		"@atlaskit/flag": "^16.0.0",
+		"@atlaskit/flag": "^16.1.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/heading": "^5.0.0",
+		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/image": "^2.0.0",
 		"@atlaskit/inline-dialog": "^17.0.0",
 		"@atlaskit/link": "^3.0.0",
@@ -83,7 +83,6 @@
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/raf-schd": "^4.0.1",
-		"jscodeshift": "^0.13.0",
 		"react-dom": "^18.2.0",
 		"react-lorem-component": "^0.13.0",
 		"react-sweet-state": "^2.6.5",

package/dist/cjs/internal/constants.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.width = exports.verticalOffset = exports.textColor = exports.keylineHeight = exports.keylineColor = exports.iconColor = exports.gutter = exports.borderRadius = void 0;
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
-var width = exports.width = {
-  values: ['small', 'medium', 'large', 'x-large'],
-  widths: {
-    small: 400,
-    medium: 600,
-    large: 800,
-    'x-large': 968
-  },
-  defaultValue: 'medium'
-};
-var gutter = exports.gutter = 60;
-var gridSize = (0, _constants.gridSize)();
-var borderRadius = exports.borderRadius = (0, _constants.borderRadius)();
-var verticalOffset = exports.verticalOffset = gridSize * 2;
-var keylineHeight = exports.keylineHeight = 2;
-var keylineColor = exports.keylineColor = "var(--ds-border, ".concat(_colors.N30, ")");
-var textColor = exports.textColor = "var(--ds-text, ".concat(_colors.N900, ")");
-var iconColor = exports.iconColor = {
-  danger: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
-  warning: "var(--ds-icon-warning, #D97008)"
-};

package/dist/es2019/internal/constants.js

@@ -1,25 +0,0 @@
-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';
-export const width = {
-  values: ['small', 'medium', 'large', 'x-large'],
-  widths: {
-    small: 400,
-    medium: 600,
-    large: 800,
-    'x-large': 968
-  },
-  defaultValue: 'medium'
-};
-export const gutter = 60;
-const gridSize = getGridSize();
-export const borderRadius = getBorderRadius();
-export const verticalOffset = gridSize * 2;
-export const keylineHeight = 2;
-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, #D97008)"
-};

package/dist/esm/internal/constants.js

@@ -1,25 +0,0 @@
-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';
-export var width = {
-  values: ['small', 'medium', 'large', 'x-large'],
-  widths: {
-    small: 400,
-    medium: 600,
-    large: 800,
-    'x-large': 968
-  },
-  defaultValue: 'medium'
-};
-export var gutter = 60;
-var gridSize = getGridSize();
-export var borderRadius = getBorderRadius();
-export var verticalOffset = gridSize * 2;
-export var keylineHeight = 2;
-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, #D97008)"
-};

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

@@ -1,21 +0,0 @@
-import { type NewIconProps } from '@atlaskit/icon';
-import type { Appearance } from '../types';
-export type WidthNames = 'small' | 'medium' | 'large' | 'x-large';
-interface Width {
-    values: string[];
-    widths: {
-        [index in WidthNames]: number;
-    };
-    defaultValue: string;
-}
-export declare const width: Width;
-export declare const gutter = 60;
-export declare const borderRadius: number;
-export declare const verticalOffset: number;
-export declare const keylineHeight = 2;
-export declare const keylineColor: "var(--ds-border)";
-export declare const textColor: "var(--ds-text)";
-export declare const iconColor: {
-    [key in Appearance]: NewIconProps['color'];
-};
-export {};

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

@@ -1,21 +0,0 @@
-import { type NewIconProps } from '@atlaskit/icon';
-import type { Appearance } from '../types';
-export type WidthNames = 'small' | 'medium' | 'large' | 'x-large';
-interface Width {
-    values: string[];
-    widths: {
-        [index in WidthNames]: number;
-    };
-    defaultValue: string;
-}
-export declare const width: Width;
-export declare const gutter = 60;
-export declare const borderRadius: number;
-export declare const verticalOffset: number;
-export declare const keylineHeight = 2;
-export declare const keylineColor: "var(--ds-border)";
-export declare const textColor: "var(--ds-text)";
-export declare const iconColor: {
-    [key in Appearance]: NewIconProps['color'];
-};
-export {};