@atlaskit/modal-dialog 13.4.0 → 14.0.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/modal-dialog
 
+## 14.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.0.0
+
+### Major Changes
+
+- [#128593](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128593)
+  [`19d6172ffdfe9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/19d6172ffdfe9) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/modal-dialog`, you will need to ensure that your bundler is
+  configured to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understandhow to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.4.0
 
 ### Minor Changes

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

@@ -0,0 +1,25 @@
+
+._16jlidpf{flex-grow:0}
+._1bsb1osq{width:100%}
+._1dg11kw7>form:only-child{flex-direction:inherit}
+._1e0c1txw{display:flex}
+._1mq81kw7>form:only-child{display:inherit}
+._1o9zkb7n{flex-shrink:1}
+._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
+._1tke1kxc{min-height:100vh}
+._1tkeidpf{min-height:0}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._c71l1kxc{max-height:100vh}
+._c71lglyw{max-height:none}
+._i0dl1wug{flex-basis:auto}
+._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)}
+._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}}
+@media (min-width:30rem){._1jyk17ks{height:var(--modal-dialog-height)}._e8uo1kw7{max-height:inherit}._1mpv17ks{min-height:var(--modal-dialog-height)}._epkx1sit{border-radius:var(--ds-border-radius,3px)}._g7116m9r{width:var(--modal-dialog-width)}._we1i1kw7{max-width:inherit}._zg7p1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}}

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

@@ -1,26 +1,25 @@
+/* modal-dialog.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./modal-dialog.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 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 _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _useId = require("@atlaskit/ds-lib/use-id");
-var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _layering = require("@atlaskit/layering");
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
 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 _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");
@@ -28,51 +27,14 @@ var _external = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-or
 var _textSelection = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection");
 var _utils = require("../utils");
 var _positioner = _interopRequireDefault(require("./positioner"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-var dialogStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-  display: 'flex',
-  width: '100%',
-  maxWidth: '100vw',
-  height: '100%',
-  minHeight: 0,
-  maxHeight: '100vh',
-  // Flex-grow set to 0 to prevent this element from filling its parent flexbox container
-  flex: '0 1 auto',
-  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: "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',
-  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'
-}), '& > form:only-child', {
-  display: 'inherit',
-  maxHeight: 'inherit',
-  flexDirection: 'inherit'
-}));
-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'
-}, _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'
-}));
+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" != _typeof3(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; }
+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 _epkx1sit _g7116m9r _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7"
+};
+var viewportScrollStyles = null;
+var bodyScrollStyles = null;
 var ModalDialog = function ModalDialog(props) {
   var _props$width = props.width,
     width = _props$width === void 0 ? 'medium' : _props$width,
@@ -126,19 +88,19 @@ var ModalDialog = function ModalDialog(props) {
   });
   var _useLayering = (0, _layering.useLayering)(),
     currentLevel = _useLayering.currentLevel;
-  return (0, _react2.jsx)(_positioner.default, {
+  return /*#__PURE__*/React.createElement(_positioner.default, {
     stackIndex: stackIndex,
     shouldScrollInViewport: shouldScrollInViewport,
     testId: testId
-  }, (0, _react2.jsx)(_context.ModalContext.Provider, {
+  }, /*#__PURE__*/React.createElement(_context.ModalContext.Provider, {
     value: modalDialogContext
-  }, (0, _react2.jsx)(_context.ScrollContext.Provider, {
+  }, /*#__PURE__*/React.createElement(_context.ScrollContext.Provider, {
     value: shouldScrollInViewport
-  }, (0, _react2.jsx)(_fadeIn.default, {
+  }, /*#__PURE__*/React.createElement(_fadeIn.default, {
     entranceDirection: "bottom",
     onFinish: onMotionFinish
   }, function (bottomFadeInProps) {
-    return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("section", (0, _extends2.default)({}, bottomFadeInProps, {
+    return /*#__PURE__*/React.createElement("section", (0, _extends2.default)({}, bottomFadeInProps, {
       "aria-label": label,
       ref: (0, _mergeRefs.default)([bottomFadeInProps.ref, motionRef])
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -148,9 +110,9 @@ var ModalDialog = function ModalDialog(props) {
         '--modal-dialog-width': (0, _utils.dialogWidth)(width),
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         '--modal-dialog-height': (0, _utils.dialogHeight)(height)
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       },
-      css: [dialogStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: (0, _runtime.ax)([dialogStyles.root, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _1mpv17ks" : "_1jyk17ks _e8uo1kw7", bottomFadeInProps.className]),
       role: "dialog",
       "aria-labelledby": label ? undefined : titleId,
       "data-testid": testId,
@@ -158,7 +120,7 @@ var ModalDialog = function ModalDialog(props) {
       tabIndex: -1,
       "aria-modal": true,
       "data-ds--level": currentLevel
-    }), children));
+    }), children);
   }))));
 };
 

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

@@ -0,0 +1,16 @@
+._152tidpf{inset-block-start:0}
+._1bsb1osq{width:100%}
+._1e02idpf{inset-inline-start:0}
+._1e0c1txw{display:flex}
+._1pby16oo{z-index:510}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._4t3i1wug{height:auto}
+._k8m01e03{transition-property:transform}
+._kqsw1n9t{position:fixed}
+._kqswh2mm{position:relative}
+._p12f1osq{max-width:100%}
+._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){._1leth4k2{margin:var(--_wekiuq)}._eoawglyw{pointer-events:none}._we1i18uh{max-width:calc(100vw - 90pt)}._e8uozwhf{max-height:calc(100vh - 119px)}._y1k5stnw{position:absolute}._5ee4up15{inset-block-start:var(--_1v97vzp)}._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,93 +1,53 @@
+/* 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
 });
 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 _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");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+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; }
+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 = (0, _react.css)({
-  display: 'flex',
-  width: '100%',
-  maxWidth: '100%',
-  height: '100%',
-  position: 'fixed',
-  zIndex: _constants.layers.modal(),
-  flexDirection: 'column',
-  insetBlockStart: 0,
-  insetInlineStart: 0
-});
-var viewportScrollStyles = (0, _react.css)((0, _defineProperty2.default)({
-  height: 'auto',
-  position: 'relative'
-}, _primitives.media.above.xs, {
-  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',
-  insetBlockStart: "".concat(gutter, "px"),
-  insetInlineEnd: 0,
-  insetInlineStart: 0,
-  marginInlineEnd: 'auto',
-  marginInlineStart: 'auto',
-  pointerEvents: 'none'
-}));
-var stackTransitionStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-  transitionDuration: "".concat(_durations.durations.medium, "ms"),
-  transitionProperty: 'transform',
-  transitionTimingFunction: _curves.easeInOut,
-  /**
-   * Duplicated from @atlaskit/motion/accessibility
-   * because @repo/internal/styles/consistent-style-ordering
-   * doesn't work well with object spreading.
-   */
-  '@media (prefers-reduced-motion: reduce)': {
-    animation: 'none',
-    transition: 'none'
-  }
-});
-var stackTransformStyles = (0, _react.css)({
-  transform: 'translateY(var(--modal-dialog-translate-y))'
-});
-var stackIdleStyles = (0, _react.css)({
-  transform: 'none'
-});
+var positionerStyles = null;
+var viewportScrollStyles = null;
+var bodyScrollStyles = null;
+var stackTransitionStyles = null;
+var stackTransformStyles = null;
+var stackIdleStyles = null;
 var Positioner = function Positioner(props) {
   var children = props.children,
     stackIndex = props.stackIndex,
     shouldScrollInViewport = props.shouldScrollInViewport,
     testId = props.testId;
-  return (0, _react.jsx)("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style: {
+  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", shouldScrollInViewport ? "_4t3i1wug _kqswh2mm _1leth4k2 _eoawglyw" : "_we1i18uh _e8uozwhf _y1k5stnw _5ee4up15 _1urridpf _1juqidpf _yakv1wug _4lht1wug _eoawglyw"]),
+    style: _objectSpread(_objectSpread({}, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      '--modal-dialog-translate-y': "calc(".concat(stackIndex, "px * ", "var(--ds-space-100, 8px)", ")")
+      '--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. */
-    stackIndex > 0 ? stackTransformStyles : stackIdleStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
-    "data-testid": testId && "".concat(testId, "--positioner")
+      transitionDuration: "".concat(_durations.durations.medium, "ms"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      transitionTimingFunction: _curves.easeInOut
+    }), {}, {
+      "--_wekiuq": (0, _runtime.ix)("".concat(gutter, "px auto")),
+      "--_1v97vzp": (0, _runtime.ix)("".concat(gutter, "px"))
+    })
   }, children);
 };
 

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

@@ -0,0 +1,14 @@
+
+._179r1h1c{border-block-end:var(--_1veqrdx)}
+._mqm21h1c{border-block-start:var(--_1veqrdx)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
+._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._1e0c1kw7{display:inherit}
+._1o9zkb7n{flex-shrink:1}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1reo15vq{overflow-x:hidden}
+._2lx21kw7{flex-direction:inherit}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
+._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
+._i0dl1kw7{flex-basis:inherit}
+@media (min-width:30rem){._1jykn7od{height:unset}._wzg61wug{overflow-y:auto}}

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

@@ -1,3 +1,4 @@
+/* scroll-container.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,47 +7,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./scroll-container.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 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");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 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 _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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// 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)",
-  flex: 'inherit',
-  flexDirection: 'inherit',
-  flexGrow: 1,
-  overflowX: 'hidden',
-  overflowY: 'auto'
-}, _primitives.media.above.xs, {
-  height: 'unset',
-  overflowY: 'auto'
-}));
+var keylineColor = "var(--ds-border, #091E4224)";
+var baseStyles = null;
 var keylineHeight = 2;
-var topKeylineStyles = (0, _react2.css)({
-  borderBlockStart: "var(--ds-border-width-outline, 2px)".concat(" solid ", keylineColor)
-});
-var bottomKeylineStyles = (0, _react2.css)({
-  borderBlockEnd: "var(--ds-border-width-outline, 2px)".concat(" solid ", keylineColor)
-});
+var topKeylineStyles = null;
+var bottomKeylineStyles = null;
 /**
  * A container that shows top and bottom keylines when the
  * content overflows into the scrollable element.
@@ -108,9 +85,9 @@ var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       unbindTargetEvent();
     };
   }, [setLazyKeylines]);
-  return (0, _react2.jsx)(_focusRing.default, {
+  return /*#__PURE__*/_react.default.createElement(_focusRing.default, {
     isInset: true
-  }, (0, _react2.jsx)("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     // tabindex is allowed here so that keyboard users can scroll content
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: showContentFocus ? 0 : undefined,
@@ -118,7 +95,10 @@ var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-label": showContentFocus ? 'Scrollable content' : undefined,
     "data-testid": testId && "".concat(testId, "--scrollable"),
     ref: (0, _mergeRefs.default)([ref, scrollableRef]),
-    css: [baseStyles, showTopKeyline && topKeylineStyles, showBottomKeyline && bottomKeylineStyles]
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug", showTopKeyline && "_mqm21h1c", showBottomKeyline && "_179r1h1c"]),
+    style: {
+      "--_1veqrdx": (0, _runtime.ix)("var(--ds-border-width-outline, 2px)".concat(" solid ", keylineColor))
+    }
   }, children));
 });
 ScrollContainer.displayName = 'ScrollContainer';

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

@@ -0,0 +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)}
+._16jlkb7n{flex-grow:1}
+._1o9zkb7n{flex-shrink:1}
+._i0dl1wug{flex-basis:auto}

package/dist/cjs/modal-body.js

@@ -1,3 +1,4 @@
+/* modal-body.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,45 +6,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./modal-body.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _reactScrolllock = require("react-scrolllock");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _hooks = require("./hooks");
 var _scrollContainer = _interopRequireDefault(require("./internal/components/scroll-container"));
 var _useScroll = _interopRequireDefault(require("./internal/hooks/use-scroll"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var bodyStyles = (0, _react2.css)({
-  /* This ensures the body fills the whole space between header and footer. */
-  flex: '1 1 auto'
-});
-var fontStyles = (0, _react2.css)({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-});
+var bodyStyles = null;
+var fontStyles = null;
 
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
  * The combined vertical spacing is maintained by subtracting the
  * keyline height from header and footer using negative margins.
  */
-var bodyScrollStyles = (0, _react2.css)({
-  paddingBlock: "var(--ds-border-width-outline, 2px)",
-  paddingInline: "var(--ds-space-300, 24px)"
-});
+var bodyScrollStyles = null;
 
 /**
  * Keylines will not be shown if scrolling in viewport so we do
  * not account for them in this case.
  */
-var viewportScrollStyles = (0, _react2.css)({
-  paddingInline: "var(--ds-space-300, 24px)"
-});
+var viewportScrollStyles = null;
 /**
  * __Modal body__
  *
@@ -60,14 +45,14 @@ var ModalBody = function ModalBody(props) {
     modalTestId = _useModal.testId;
   var shouldScrollInViewport = (0, _useScroll.default)();
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
-  return shouldScrollInViewport ? (0, _react2.jsx)("div", {
-    css: [bodyStyles, viewportScrollStyles, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && fontStyles],
-    "data-testid": testId
-  }, children) : (0, _react2.jsx)(_reactScrolllock.TouchScrollable, null, (0, _react2.jsx)(_scrollContainer.default, {
+  return shouldScrollInViewport ? /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug", "_18zr1ejb", (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && "_11c82smr"])
+  }, children) : /*#__PURE__*/_react.default.createElement(_reactScrolllock.TouchScrollable, null, /*#__PURE__*/_react.default.createElement(_scrollContainer.default, {
     testId: userDefinedTestId || modalTestId
-  }, (0, _react2.jsx)("div", {
-    css: [bodyStyles, bodyScrollStyles, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && fontStyles],
-    "data-testid": testId
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug", "_1rjc1bk5 _18zr1ejb", (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && "_11c82smr"])
   }, children)));
 };
 var _default = exports.default = ModalBody;

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

@@ -0,0 +1,9 @@
+
+._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)}
+._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
+._4cvr1h6o{align-items:center}
+._85i51ejb{padding-block-end:var(--ds-space-300,24px)}
+._kqswh2mm{position:relative}

package/dist/cjs/modal-footer.js

@@ -1,29 +1,18 @@
+/* modal-footer.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./modal-footer.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _hooks = require("./hooks");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var footerStyles = (0, _react.css)({
-  display: 'flex',
-  position: 'relative',
-  alignItems: 'center',
-  justifyContent: 'flex-end',
-  gap: "var(--ds-space-100, 8px)",
-  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)"
-});
+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; }
+var footerStyles = null;
 /**
  * __Modal footer__
  *
@@ -39,9 +28,12 @@ var ModalFooter = function ModalFooter(props) {
   var _useModal = (0, _hooks.useModal)(),
     modalTestId = _useModal.testId;
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--footer");
-  return (0, _react.jsx)("div", {
-    css: footerStyles,
-    "data-testid": testId
+  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)", ")"))
+    }
   }, children);
 };
 var _default = exports.default = ModalFooter;

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

@@ -0,0 +1,8 @@
+._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._1q511ejb{padding-block-start:var(--ds-space-300,24px)}
+._4cvr1h6o{align-items:center}
+._6rthmufe{margin-block-end:var(--_t7lu6v)}
+._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
+._kqswh2mm{position:relative}