@atlaskit/modal-dialog 14.3.11 → 14.3.13

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/modal-dialog
 
+## 14.3.13
+
+### Patch Changes
+
+- [`96f58298f6919`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96f58298f6919) -
+  Converts `${gutter}px` to a hardcoded '60px' to avoid a Compiled bug.
+
+## 14.3.12
+
+### Patch Changes
+
+- [`f0662cd7a143e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0662cd7a143e) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
 ## 14.3.11
 
 ### Patch Changes

package/dist/cjs/internal/components/modal-dialog.compiled.css

@@ -17,8 +17,8 @@
 ._lcxv1wug{pointer-events:auto}
 ._m01u1kw7>form:only-child{max-height:inherit}
 ._p12fauwl{max-width:100vw}
-._syaz1fxt{color:var(--ds-text,#172b4d)}._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._1ah31bk5:focus-visible{outline-offset:var(--ds-border-width-outline,2px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
 ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
 @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}

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

@@ -30,7 +30,7 @@ var _positioner = _interopRequireDefault(require("./positioner"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
 var dialogStyles = {
-  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syaz1fxt _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1p6i _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7 _1xlt6m9r",
+  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syaz1fxt _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1p6i _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7 _1xlt6m9r",
   borderRadius: "_epkxfajl"
 };
 var viewportScrollStyles = null;

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

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

package/dist/cjs/internal/components/positioner.compiled.css

@@ -13,4 +13,4 @@
 ._t9ec1b95{transform:translateY(var(--modal-dialog-translate-y))}
 ._t9ecglyw{transform:none}
 @media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}._sedtglyw{transition:none}}
-@media (min-width:30rem){._1sg41wqb{margin-top:60px}._maxs1wug{margin-right:auto}._1jvh1wqb{margin-bottom:60px}._1uca1wug{margin-left:auto}._eoawglyw{pointer-events:none}._5ee41kr1{inset-block-start:var(--_imv74m)}._we1i18uh{max-width:calc(100vw - 90pt)}._e8uozwhf{max-height:calc(100vh - 119px)}._y1k5stnw{position:absolute}._5ee41wqb{inset-block-start:60px}._1urridpf{inset-inline-end:0}._1juqidpf{inset-inline-start:0}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
+@media (min-width:30rem){._1f6n1wqb{margin-block:60px}._1eot1wug{margin-inline:auto}._eoawglyw{pointer-events:none}._5ee41nf8{inset-block-start:60px!important}._we1i18uh{max-width:calc(100vw - 90pt)}._e8uozwhf{max-height:calc(100vh - 119px)}._y1k5stnw{position:absolute}._5ee41wqb{inset-block-start:60px}._1urridpf{inset-inline-end:0}._1juqidpf{inset-inline-start:0}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}

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

@@ -1,7 +1,6 @@
 /* positioner.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,22 +9,22 @@ exports.default = void 0;
 require("./positioner.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _curves = require("@atlaskit/motion/curves");
 var _durations = require("@atlaskit/motion/durations");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("@atlaskit/theme/constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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 = null;
+var stackStyles = {
+  stackTransition: "_k8m01e03 _1bumglyw _sedtglyw",
+  stackTransform: "_t9ec1b95",
+  stackIdle: "_t9ecglyw"
+};
+
+// Hardcoded pixels are based off a 60px base gutter
 var scrollStyles = {
-  viewport: "_4t3i1wug _kqswh2mm _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _eoawglyw",
+  viewport: "_4t3i1wug _kqswh2mm _1f6n1wqb _1eot1wug _eoawglyw",
   body: "_we1i18uh _e8uozwhf _y1k5stnw _5ee41wqb _1urridpf _1juqidpf _yakv1wug _4lht1wug _eoawglyw",
   fullScreen: ""
 };
@@ -34,9 +33,6 @@ var scrollStyles = {
  * TODO: when tidying this feature gate, add `!important` to `scrollStyles.body`
  */
 var importantBodyFeatureGateStyles = null;
-var stackTransitionStyles = null;
-var stackTransformStyles = null;
-var stackIdleStyles = null;
 function getScrollBehavior(_ref) {
   var isFullScreen = _ref.isFullScreen,
     shouldScrollInViewport = _ref.shouldScrollInViewport;
@@ -59,17 +55,15 @@ var Positioner = function Positioner(props) {
     shouldScrollInViewport: shouldScrollInViewport
   });
   return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId && "".concat(testId, "--positioner"),
-    className: (0, _runtime.ax)(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", "_k8m01e03 _1bumglyw _sedtglyw", stackIndex > 0 ? "_t9ec1b95" : "_t9ecglyw", scrollStyles[scrollBehavior], scrollBehavior === 'body' && (0, _platformFeatureFlags.fg)('platform_dst_modal_dialog_AFBH_1489') && "_5ee41kr1"]),
-    style: _objectSpread(_objectSpread({}, {
+    style: {
       '--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
       transitionDuration: "".concat(_durations.durations.medium, "ms"),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       transitionTimingFunction: _curves.easeInOut
-    }), {}, {
-      "--_imv74m": (0, _runtime.ix)("".concat(gutter, "px !important"))
-    })
+    },
+    "data-testid": testId && "".concat(testId, "--positioner"),
+    className: (0, _runtime.ax)(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", stackStyles.stackTransition, stackIndex > 0 ? stackStyles.stackTransform : stackStyles.stackIdle, scrollStyles[scrollBehavior], scrollBehavior === 'body' && (0, _platformFeatureFlags.fg)('platform_dst_modal_dialog_AFBH_1489') && "_5ee41nf8"])
   }, children);
 };
 

package/dist/cjs/internal/components/scroll-container.compiled.css

@@ -1,6 +1,6 @@
 
-._179rv2xi{border-block-end:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}
-._mqm2v2xi{border-block-start:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
+._179r187z{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#091e4224)}
+._mqm2187z{border-block-start:var(--ds-border-width-selected,2px) solid var(--ds-border,#091e4224)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
 ._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1e0c1kw7{display:inherit}

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

@@ -22,8 +22,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var keylineColor = "var(--ds-border, #091E4224)";
 var styles = {
   base: "_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug",
-  topKeyline: "_mqm2v2xi",
-  bottomKeyline: "_179rv2xi"
+  topKeyline: "_mqm2187z",
+  bottomKeyline: "_179r187z"
 };
 var keylineHeight = 2;
 /**

package/dist/cjs/modal-body.compiled.css

@@ -1,6 +1,6 @@
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
-._1rjc1bk5{padding-block:var(--ds-border-width-outline,2px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
 ._16jlkb7n{flex-grow:1}
 ._1o9zkb7n{flex-shrink:1}
 ._i0dl1wug{flex-basis:auto}

package/dist/cjs/modal-body.js

@@ -17,7 +17,7 @@ var _useScroll = _interopRequireDefault(require("./internal/hooks/use-scroll"));
 var styles = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug",
   font: "_11c82smr",
-  paddingBlock: "_1rjc1bk5",
+  paddingBlock: "_1rjcv77o",
   paddingInline: "_18zr1ejb"
 };
 /**

package/dist/cjs/modal-footer.compiled.css

@@ -2,7 +2,7 @@
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
-._1pfhmufe{margin-block-start:var(--_t7lu6v)}
+._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
 ._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
 ._4cvr1h6o{align-items:center}
 ._85i51ejb{padding-block-end:var(--ds-space-300,24px)}

package/dist/cjs/modal-footer.js

@@ -29,10 +29,7 @@ var ModalFooter = function ModalFooter(props) {
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--footer");
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_zulpu2gc _18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bahesu3 _1pfhmufe _85i51ejb _1q51pxbi"]),
-    style: {
-      "--_t7lu6v": (0, _runtime.ix)("calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"))
-    }
+    className: (0, _runtime.ax)(["_zulpu2gc _18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bahesu3 _1pfh1i6y _85i51ejb _1q51pxbi"])
   }, children);
 };
 var _default = exports.default = ModalFooter;

package/dist/cjs/modal-header.compiled.css

@@ -3,6 +3,6 @@
 ._1e0c1txw{display:flex}
 ._1q511ejb{padding-block-start:var(--ds-space-300,24px)}
 ._4cvr1h6o{align-items:center}
-._6rthmufe{margin-block-end:var(--_t7lu6v)}
+._6rth1i6y{margin-block-end:var(--ds-space-negative-025,-2px)}
 ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
 ._kqswh2mm{position:relative}

package/dist/cjs/modal-header.js

@@ -42,10 +42,7 @@ var ModalHeader = function ModalHeader(props) {
   var shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rthmufe _85i5pxbi _1q511ejb"]),
-    style: {
-      "--_t7lu6v": (0, _runtime.ix)("calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"))
-    }
+    className: (0, _runtime.ax)(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb"])
   }, shouldShowCloseButton ?
   /*#__PURE__*/
   // The reason we are putting the close button first in the DOM and then

package/dist/es2019/internal/components/modal-dialog.compiled.css

@@ -17,8 +17,8 @@
 ._lcxv1wug{pointer-events:auto}
 ._m01u1kw7>form:only-child{max-height:inherit}
 ._p12fauwl{max-width:100vw}
-._syaz1fxt{color:var(--ds-text,#172b4d)}._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._1ah31bk5:focus-visible{outline-offset:var(--ds-border-width-outline,2px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
 ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
 @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}

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

@@ -19,7 +19,7 @@ import { dialogHeight, dialogWidth } from '../utils';
 import Positioner from './positioner';
 const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
 const dialogStyles = {
-  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syaz1fxt _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1p6i _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7 _1xlt6m9r",
+  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syaz1fxt _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1p6i _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7 _1xlt6m9r",
   borderRadius: "_epkxfajl"
 };
 const viewportScrollStyles = null;

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

@@ -74,7 +74,7 @@ const InternalModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "14.3.12"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/internal/components/positioner.compiled.css

@@ -13,4 +13,4 @@
 ._t9ec1b95{transform:translateY(var(--modal-dialog-translate-y))}
 ._t9ecglyw{transform:none}
 @media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}._sedtglyw{transition:none}}
-@media (min-width:30rem){._1sg41wqb{margin-top:60px}._maxs1wug{margin-right:auto}._1jvh1wqb{margin-bottom:60px}._1uca1wug{margin-left:auto}._eoawglyw{pointer-events:none}._5ee41nf8{inset-block-start:60px!important}._we1i18uh{max-width:calc(100vw - 90pt)}._e8uozwhf{max-height:calc(100vh - 119px)}._y1k5stnw{position:absolute}._5ee41wqb{inset-block-start:60px}._1urridpf{inset-inline-end:0}._1juqidpf{inset-inline-start:0}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
+@media (min-width:30rem){._1f6n1wqb{margin-block:60px}._1eot1wug{margin-inline:auto}._eoawglyw{pointer-events:none}._5ee41nf8{inset-block-start:60px!important}._we1i18uh{max-width:calc(100vw - 90pt)}._e8uozwhf{max-height:calc(100vh - 119px)}._y1k5stnw{position:absolute}._5ee41wqb{inset-block-start:60px}._1urridpf{inset-inline-end:0}._1juqidpf{inset-inline-start:0}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}

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

@@ -6,14 +6,17 @@ import { easeInOut } from '@atlaskit/motion/curves';
 import { durations } from '@atlaskit/motion/durations';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
-const gutter = 60;
-const maxWidthDimensions = `calc(100vw - ${gutter * 2}px)`;
-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
 const positionerStyles = null;
+const stackStyles = {
+  stackTransition: "_k8m01e03 _1bumglyw _sedtglyw",
+  stackTransform: "_t9ec1b95",
+  stackIdle: "_t9ecglyw"
+};
+
+// Hardcoded pixels are based off a 60px base gutter
 const scrollStyles = {
-  viewport: "_4t3i1wug _kqswh2mm _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _eoawglyw",
+  viewport: "_4t3i1wug _kqswh2mm _1f6n1wqb _1eot1wug _eoawglyw",
   body: "_we1i18uh _e8uozwhf _y1k5stnw _5ee41wqb _1urridpf _1juqidpf _yakv1wug _4lht1wug _eoawglyw",
   fullScreen: ""
 };
@@ -22,9 +25,6 @@ const scrollStyles = {
  * TODO: when tidying this feature gate, add `!important` to `scrollStyles.body`
  */
 const importantBodyFeatureGateStyles = null;
-const stackTransitionStyles = null;
-const stackTransformStyles = null;
-const stackIdleStyles = null;
 function getScrollBehavior({
   isFullScreen,
   shouldScrollInViewport
@@ -58,7 +58,7 @@ const Positioner = props => {
       transitionTimingFunction: easeInOut
     },
     "data-testid": testId && `${testId}--positioner`,
-    className: ax(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", "_k8m01e03 _1bumglyw _sedtglyw", stackIndex > 0 ? "_t9ec1b95" : "_t9ecglyw", scrollStyles[scrollBehavior], scrollBehavior === 'body' && fg('platform_dst_modal_dialog_AFBH_1489') && "_5ee41nf8"])
+    className: ax(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", stackStyles.stackTransition, stackIndex > 0 ? stackStyles.stackTransform : stackStyles.stackIdle, scrollStyles[scrollBehavior], scrollBehavior === 'body' && fg('platform_dst_modal_dialog_AFBH_1489') && "_5ee41nf8"])
   }, children);
 };
 

package/dist/es2019/internal/components/scroll-container.compiled.css

@@ -1,6 +1,6 @@
 
-._179rv2xi{border-block-end:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}
-._mqm2v2xi{border-block-start:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
+._179r187z{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#091e4224)}
+._mqm2187z{border-block-start:var(--ds-border-width-selected,2px) solid var(--ds-border,#091e4224)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
 ._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1e0c1kw7{display:inherit}

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

@@ -12,8 +12,8 @@ import { Focusable } from '@atlaskit/primitives/compiled';
 const keylineColor = "var(--ds-border, #091E4224)";
 const styles = {
   base: "_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug",
-  topKeyline: "_mqm2v2xi",
-  bottomKeyline: "_179rv2xi"
+  topKeyline: "_mqm2187z",
+  bottomKeyline: "_179r187z"
 };
 const keylineHeight = 2;
 /**

package/dist/es2019/modal-body.compiled.css

@@ -1,6 +1,6 @@
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
-._1rjc1bk5{padding-block:var(--ds-border-width-outline,2px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
 ._16jlkb7n{flex-grow:1}
 ._1o9zkb7n{flex-shrink:1}
 ._i0dl1wug{flex-basis:auto}

package/dist/es2019/modal-body.js

@@ -10,7 +10,7 @@ import useScroll from './internal/hooks/use-scroll';
 const styles = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug",
   font: "_11c82smr",
-  paddingBlock: "_1rjc1bk5",
+  paddingBlock: "_1rjcv77o",
   paddingInline: "_18zr1ejb"
 };
 /**

package/dist/es2019/modal-footer.compiled.css

@@ -2,7 +2,7 @@
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
-._1pfh1ezb{margin-block-start:calc(var(--ds-border-width-outline, 2px)*-1)}
+._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
 ._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
 ._4cvr1h6o{align-items:center}
 ._85i51ejb{padding-block-end:var(--ds-space-300,24px)}

package/dist/es2019/modal-footer.js

@@ -24,7 +24,7 @@ const ModalFooter = props => {
   const testId = userDefinedTestId || modalTestId && `${modalTestId}--footer`;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_zulpu2gc _18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bahesu3 _1pfh1ezb _85i51ejb _1q51pxbi"])
+    className: ax(["_zulpu2gc _18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bahesu3 _1pfh1i6y _85i51ejb _1q51pxbi"])
   }, children);
 };
 export default ModalFooter;

package/dist/es2019/modal-header.compiled.css

@@ -3,6 +3,6 @@
 ._1e0c1txw{display:flex}
 ._1q511ejb{padding-block-start:var(--ds-space-300,24px)}
 ._4cvr1h6o{align-items:center}
-._6rth1ezb{margin-block-end:calc(var(--ds-border-width-outline, 2px)*-1)}
+._6rth1i6y{margin-block-end:var(--ds-space-negative-025,-2px)}
 ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
 ._kqswh2mm{position:relative}

package/dist/es2019/modal-header.js

@@ -37,7 +37,7 @@ const ModalHeader = props => {
   const shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1ezb _85i5pxbi _1q511ejb"])
+    className: ax(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb"])
   }, shouldShowCloseButton ?
   /*#__PURE__*/
   // The reason we are putting the close button first in the DOM and then

package/dist/esm/internal/components/modal-dialog.compiled.css

@@ -17,8 +17,8 @@
 ._lcxv1wug{pointer-events:auto}
 ._m01u1kw7>form:only-child{max-height:inherit}
 ._p12fauwl{max-width:100vw}
-._syaz1fxt{color:var(--ds-text,#172b4d)}._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._1ah31bk5:focus-visible{outline-offset:var(--ds-border-width-outline,2px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
 ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
 @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}

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

@@ -21,7 +21,7 @@ import { dialogHeight, dialogWidth } from '../utils';
 import Positioner from './positioner';
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
 var dialogStyles = {
-  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syaz1fxt _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1p6i _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7 _1xlt6m9r",
+  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syaz1fxt _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1p6i _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7 _1xlt6m9r",
   borderRadius: "_epkxfajl"
 };
 var viewportScrollStyles = null;

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

@@ -78,7 +78,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "14.3.12"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/internal/components/positioner.compiled.css

@@ -13,4 +13,4 @@
 ._t9ec1b95{transform:translateY(var(--modal-dialog-translate-y))}
 ._t9ecglyw{transform:none}
 @media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}._sedtglyw{transition:none}}
-@media (min-width:30rem){._1sg41wqb{margin-top:60px}._maxs1wug{margin-right:auto}._1jvh1wqb{margin-bottom:60px}._1uca1wug{margin-left:auto}._eoawglyw{pointer-events:none}._5ee41kr1{inset-block-start:var(--_imv74m)}._we1i18uh{max-width:calc(100vw - 90pt)}._e8uozwhf{max-height:calc(100vh - 119px)}._y1k5stnw{position:absolute}._5ee41wqb{inset-block-start:60px}._1urridpf{inset-inline-end:0}._1juqidpf{inset-inline-start:0}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
+@media (min-width:30rem){._1f6n1wqb{margin-block:60px}._1eot1wug{margin-inline:auto}._eoawglyw{pointer-events:none}._5ee41nf8{inset-block-start:60px!important}._we1i18uh{max-width:calc(100vw - 90pt)}._e8uozwhf{max-height:calc(100vh - 119px)}._y1k5stnw{position:absolute}._5ee41wqb{inset-block-start:60px}._1urridpf{inset-inline-end:0}._1juqidpf{inset-inline-start:0}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}

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

@@ -1,22 +1,22 @@
 /* positioner.tsx generated by @compiled/babel-plugin v0.36.1 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./positioner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { easeInOut } from '@atlaskit/motion/curves';
 import { durations } from '@atlaskit/motion/durations';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
-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 = null;
+var stackStyles = {
+  stackTransition: "_k8m01e03 _1bumglyw _sedtglyw",
+  stackTransform: "_t9ec1b95",
+  stackIdle: "_t9ecglyw"
+};
+
+// Hardcoded pixels are based off a 60px base gutter
 var scrollStyles = {
-  viewport: "_4t3i1wug _kqswh2mm _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _eoawglyw",
+  viewport: "_4t3i1wug _kqswh2mm _1f6n1wqb _1eot1wug _eoawglyw",
   body: "_we1i18uh _e8uozwhf _y1k5stnw _5ee41wqb _1urridpf _1juqidpf _yakv1wug _4lht1wug _eoawglyw",
   fullScreen: ""
 };
@@ -25,9 +25,6 @@ var scrollStyles = {
  * TODO: when tidying this feature gate, add `!important` to `scrollStyles.body`
  */
 var importantBodyFeatureGateStyles = null;
-var stackTransitionStyles = null;
-var stackTransformStyles = null;
-var stackIdleStyles = null;
 function getScrollBehavior(_ref) {
   var isFullScreen = _ref.isFullScreen,
     shouldScrollInViewport = _ref.shouldScrollInViewport;
@@ -50,17 +47,15 @@ var Positioner = function Positioner(props) {
     shouldScrollInViewport: shouldScrollInViewport
   });
   return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId && "".concat(testId, "--positioner"),
-    className: ax(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", "_k8m01e03 _1bumglyw _sedtglyw", stackIndex > 0 ? "_t9ec1b95" : "_t9ecglyw", scrollStyles[scrollBehavior], scrollBehavior === 'body' && fg('platform_dst_modal_dialog_AFBH_1489') && "_5ee41kr1"]),
-    style: _objectSpread(_objectSpread({}, {
+    style: {
       '--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
       transitionDuration: "".concat(durations.medium, "ms"),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       transitionTimingFunction: easeInOut
-    }), {}, {
-      "--_imv74m": ix("".concat(gutter, "px !important"))
-    })
+    },
+    "data-testid": testId && "".concat(testId, "--positioner"),
+    className: ax(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", stackStyles.stackTransition, stackIndex > 0 ? stackStyles.stackTransform : stackStyles.stackIdle, scrollStyles[scrollBehavior], scrollBehavior === 'body' && fg('platform_dst_modal_dialog_AFBH_1489') && "_5ee41nf8"])
   }, children);
 };
 

package/dist/esm/internal/components/scroll-container.compiled.css

@@ -1,6 +1,6 @@
 
-._179rv2xi{border-block-end:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}
-._mqm2v2xi{border-block-start:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
+._179r187z{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#091e4224)}
+._mqm2187z{border-block-start:var(--ds-border-width-selected,2px) solid var(--ds-border,#091e4224)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
 ._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1e0c1kw7{display:inherit}

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

@@ -13,8 +13,8 @@ import { Focusable } from '@atlaskit/primitives/compiled';
 var keylineColor = "var(--ds-border, #091E4224)";
 var styles = {
   base: "_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug",
-  topKeyline: "_mqm2v2xi",
-  bottomKeyline: "_179rv2xi"
+  topKeyline: "_mqm2187z",
+  bottomKeyline: "_179r187z"
 };
 var keylineHeight = 2;
 /**

package/dist/esm/modal-body.compiled.css

@@ -1,6 +1,6 @@
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
-._1rjc1bk5{padding-block:var(--ds-border-width-outline,2px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
 ._16jlkb7n{flex-grow:1}
 ._1o9zkb7n{flex-shrink:1}
 ._i0dl1wug{flex-basis:auto}

package/dist/esm/modal-body.js

@@ -10,7 +10,7 @@ import useScroll from './internal/hooks/use-scroll';
 var styles = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug",
   font: "_11c82smr",
-  paddingBlock: "_1rjc1bk5",
+  paddingBlock: "_1rjcv77o",
   paddingInline: "_18zr1ejb"
 };
 /**

package/dist/esm/modal-footer.compiled.css

@@ -2,7 +2,7 @@
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
-._1pfhmufe{margin-block-start:var(--_t7lu6v)}
+._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
 ._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
 ._4cvr1h6o{align-items:center}
 ._85i51ejb{padding-block-end:var(--ds-space-300,24px)}

package/dist/esm/modal-footer.js

@@ -21,10 +21,7 @@ var ModalFooter = function ModalFooter(props) {
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--footer");
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_zulpu2gc _18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bahesu3 _1pfhmufe _85i51ejb _1q51pxbi"]),
-    style: {
-      "--_t7lu6v": ix("calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"))
-    }
+    className: ax(["_zulpu2gc _18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bahesu3 _1pfh1i6y _85i51ejb _1q51pxbi"])
   }, children);
 };
 export default ModalFooter;

package/dist/esm/modal-header.compiled.css

@@ -3,6 +3,6 @@
 ._1e0c1txw{display:flex}
 ._1q511ejb{padding-block-start:var(--ds-space-300,24px)}
 ._4cvr1h6o{align-items:center}
-._6rthmufe{margin-block-end:var(--_t7lu6v)}
+._6rth1i6y{margin-block-end:var(--ds-space-negative-025,-2px)}
 ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
 ._kqswh2mm{position:relative}

package/dist/esm/modal-header.js

@@ -35,10 +35,7 @@ var ModalHeader = function ModalHeader(props) {
   var shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rthmufe _85i5pxbi _1q511ejb"]),
-    style: {
-      "--_t7lu6v": ix("calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"))
-    }
+    className: ax(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb"])
   }, shouldShowCloseButton ?
   /*#__PURE__*/
   // The reason we are putting the close button first in the DOM and then

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "14.3.11",
+	"version": "14.3.13",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/primitives": "^14.14.0",
-		"@atlaskit/theme": "^20.0.0",
+		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",