@atlaskit/menu 6.0.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/menu
 
+## 7.0.0
+
+### Major Changes
+
+- [#156707](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156707)
+  [`84d702274b2dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/84d702274b2dd) -
+  Migrated `HeadingItem` and `Section` components 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.
+
+  Removed the deprecated `cssFn` prop from the `HeadingItem` component, as this is not supported
+  with @compiled/react.
+
 ## 6.0.0
 
 ### Major Changes

package/dist/cjs/menu-item/heading-item.compiled.css

@@ -0,0 +1,4 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._syaz1vvm{color:var(--_bbz764)}

package/dist/cjs/menu-item/heading-item.js

@@ -1,29 +1,23 @@
+/* heading-item.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("./heading-item.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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
-var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _colors = require("@atlaskit/theme/colors");
-var _excluded = ["children", "testId", "headingLevel", "id", "cssFn", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var headingStyles = (0, _react2.css)({
-  color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
-  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)"
-});
+var _excluded = ["children", "testId", "headingLevel", "id", "className"];
+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 headingStyles = null;
 
 /**
  * __Heading item__
@@ -39,19 +33,9 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _ref$headingLevel = _ref.headingLevel,
     headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     id = _ref.id,
-    _ref$cssFn = _ref.cssFn,
-    cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn,
     UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var UNSAFE_overrides = (0, _react2.css)(cssFn(undefined));
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: [headingStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    UNSAFE_overrides],
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     role: "heading",
     "aria-level": headingLevel,
     "data-testid": testId,
@@ -59,7 +43,11 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     id: id
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: UNSAFE_className
-  }, rest), children);
+    className: (0, _runtime.ax)(["_11c81vhk _1rjcze3t _18zrpxbi _syaz1vvm", UNSAFE_className])
+  }, rest, {
+    style: {
+      "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
+    }
+  }), children);
 });
 var _default = exports.default = HeadingItem;

package/dist/cjs/menu-section/menu-group.compiled.css

@@ -0,0 +1,5 @@
+._18m91wug{overflow-y:auto}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._2lx21bp4{flex-direction:column}
+._kqswpfqs{position:static}

package/dist/cjs/menu-section/menu-group.js

@@ -1,26 +1,22 @@
+/* menu-group.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("./menu-group.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
 var _menuContext = require("../internal/components/menu-context");
 var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var baseStyles = (0, _react.css)({
-  display: 'flex',
-  position: 'static',
-  flexDirection: 'column',
-  overflow: 'auto'
-});
+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 baseStyles = null;
 
 /**
  * __Menu group__
@@ -42,11 +38,11 @@ var MenuGroup = function MenuGroup(_ref) {
     spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
     UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)(_menuContext.SpacingContext.Provider, {
+  return /*#__PURE__*/React.createElement(_menuContext.SpacingContext.Provider, {
     value: spacing
-  }, (0, _react.jsx)(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+  }, /*#__PURE__*/React.createElement(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "border"
-  }, (0, _react.jsx)("div", (0, _extends2.default)({
+  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     "aria-busy": isLoading,
     style: {
       minWidth: minWidth,
@@ -54,12 +50,11 @@ var MenuGroup = function MenuGroup(_ref) {
       minHeight: minHeight,
       maxHeight: maxHeight
     },
-    css: baseStyles,
     "data-testid": testId,
     role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: UNSAFE_className
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className])
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));
 };

package/dist/cjs/menu-section/popup-menu-group.js

@@ -1,20 +1,20 @@
+/* popup-menu-group.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;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
 var _menuGroup = _interopRequireDefault(require("./menu-group"));
-var _excluded = ["maxWidth", "minWidth"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _excluded = ["maxWidth", "minWidth"]; // 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; }
 /**
  * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
@@ -25,8 +25,9 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
     minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)(_menuGroup.default, (0, _extends2.default)({
+    React.createElement(_menuGroup.default, (0, _extends2.default)({
       maxWidth: maxWidth,
       minWidth: minWidth
     }, rest))

package/dist/cjs/menu-section/section.compiled.css

@@ -0,0 +1,17 @@
+
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._mqm21imm{border-block-start:1px solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._1l6bgktf [data-ds--menu--heading-item]{margin-block-start:20px}
+._1mfv8jkm [data-ds--menu--skeleton-heading-item]:first-of-type{margin-block-start:19px}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1p3hi2wt [data-ds--menu--heading-item]{margin-block-end:6px}
+._1qdgi2wt:after, ._kfgti2wt:before{height:6px}
+._1reo1wug{overflow-x:auto}
+._1ywu1ule:after, ._cfu11ule:before{display:block}
+._aetrb3bt:after, ._1kt9b3bt:before{content:""}
+._auo4rdoj [data-ds--menu--skeleton-heading-item]{margin-block-end:9px}
+._hp2110yn [data-ds--menu--skeleton-heading-item]{margin-block-start:25px}
+._osbldlk8 [data-ds--menu--heading-item]:first-of-type{margin-block-start:14px}
+[data-section]+._n7cnyjp0{margin-block-start:-6px}
+._1bg41n1a:focus{outline-offset:-1px}

package/dist/cjs/menu-section/section.js

@@ -1,96 +1,39 @@
+/* section.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("./section.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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
 var _excluded = ["children", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "isSideNavSection", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var gridSize = 8;
-var itemHeadingTopMargin = gridSize * 2.5;
-var itemHeadingBottomMargin = gridSize * 0.75;
+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 itemHeadingTopMargin = 20;
+var itemHeadingBottomMargin = 6;
 // Skeleton content is slightly shorter than the real content.
 // Because of that we slightly increase the top margin to offset this so the
 // containing size both real and skeleton always equal approx 30px.
 var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
-var skeletonHeadingHeight = gridSize;
+var skeletonHeadingHeight = 8;
 var skeletonHeadingMarginOffset = 3;
 var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
-// We want to move the entire body up by 3px without affecting the height of the skeleton container.
-var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
-var sectionPaddingTopBottom = gridSize * 0.75;
-var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
-var sectionStyles = (0, _react2.css)({
-  '&::before, &::after': {
-    display: 'block',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: sectionPaddingTopBottom,
-    content: '""'
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& [data-ds--menu--heading-item]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockEnd: itemHeadingBottomMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockStart: itemHeadingTopMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&:first-of-type': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginBlockStart: itemHeadingTopMargin - sectionPaddingTopBottom
-    }
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& [data-ds--menu--skeleton-heading-item]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockEnd: skeletonHeadingBottomMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockStart: skeletonHeadingTopMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&:first-of-type': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginBlockStart: skeletonHeadingTopMargin - sectionPaddingTopBottom
-    }
-  },
-  '&:focus': {
-    // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
-    // We have made a deliberate choice to leave this behaviour as is.
-    // This makes the outline go inside by 1px so it can actually be displayed
-    // else it gets cut off from the overflow: scroll from the parent menu group.
-    outlineOffset: -1
-  }
-});
-var scrollableStyles = (0, _react2.css)({
-  flexShrink: 1,
-  overflow: 'auto'
-});
-var unscrollableStyles = (0, _react2.css)({
-  flexShrink: 0
-});
-var thinSeparatorStyles = (0, _react2.css)({
-  borderBlockStart: "1px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
-});
-var noSeparatorStyles = (0, _react2.css)({
-  // this is to ensure that adjacent sections without separators don't get additional margins.
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '[data-section] + &': {
-    marginBlockStart: -6
-  }
-});
-var sideNavSectionHeadingStyles = function sideNavSectionHeadingStyles() {
-  return {
-    paddingInline: "var(--ds-space-100, 8px)"
-  };
+var sectionPaddingTopBottom = 6;
+var styles = {
+  root: "_1ywu1ule _cfu11ule _1qdgi2wt _kfgti2wt _aetrb3bt _1kt9b3bt _1p3hi2wt _1l6bgktf _osbldlk8 _auo4rdoj _hp2110yn _1mfv8jkm _1bg41n1a",
+  scrollable: "_1reo1wug _18m91wug _1o9zkb7n",
+  unscrollable: "_1o9zidpf",
+  thinSeparator: "_mqm21imm",
+  noSeparator: "_n7cnyjp0",
+  sideNavSectionHeading: "_18zru2gc"
 };
 
 /**
@@ -115,7 +58,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     isSideNavSection = _ref$isSideNavSection === void 0 ? false : _ref$isSideNavSection,
     UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var content = isList ? (0, _react2.jsx)("ul", {
+  var content = isList ? /*#__PURE__*/React.createElement("ul", {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       margin: 0,
@@ -123,7 +66,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       padding: 0
     }
   }, _react.Children.map(_react.Children.toArray(children), function (child, index) {
-    return (0, _react2.jsx)("li", {
+    return /*#__PURE__*/React.createElement("li", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: {
         listStyleType: 'none',
@@ -133,21 +76,22 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       key: index
     }, child);
   })) : children;
-  var childrenMarkup = title !== undefined ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_headingItem.default
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
-    cssFn: isSideNavSection ? sideNavSectionHeadingStyles : undefined,
+  var childrenMarkup = title !== undefined ? /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_headingItem.default, {
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
-  }, title), content) : (0, _react2.jsx)(_react.Fragment, null, content);
-  return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    className: (0, _runtime.ax)([isSideNavSection && styles.sideNavSectionHeading])
+  }, title), content) : /*#__PURE__*/React.createElement(_react.Fragment, null, content);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className,
+    className: (0, _runtime.ax)([styles.root, isScrollable ? styles.scrollable : styles.unscrollable, hasSeparator ? styles.thinSeparator : styles.noSeparator, UNSAFE_className]),
     id: id
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? thinSeparatorStyles : noSeparatorStyles],
+
     "aria-label": title,
     "aria-labelledby": titleId,
     "data-testid": testId,

package/dist/es2019/menu-item/heading-item.compiled.css

@@ -0,0 +1,4 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._syaz1n3s{color:var(--ds-text-subtle,#5e6c84)}

package/dist/es2019/menu-item/heading-item.js

@@ -1,21 +1,11 @@
+/* heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./heading-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import { N300 } from '@atlaskit/theme/colors';
-const headingStyles = css({
-  color: `var(--ds-text-subtle, ${N300})`,
-  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)"
-});
+const headingStyles = null;
 
 /**
  * __Heading item__
@@ -30,7 +20,6 @@ const HeadingItem = /*#__PURE__*/memo(({
   testId,
   headingLevel = 2,
   id,
-  cssFn = noop,
   // Although this isn't defined on props it is available because we've used
   // Spread props below and on the jsx element. To forcibly block usage I've
   // picked it out and supressed the expected type error.
@@ -38,15 +27,7 @@ const HeadingItem = /*#__PURE__*/memo(({
   className: UNSAFE_className,
   ...rest
 }) => {
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  const UNSAFE_overrides = css(cssFn(undefined));
-  return jsx("div", _extends({
-    css: [headingStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    UNSAFE_overrides],
+  return /*#__PURE__*/React.createElement("div", _extends({
     role: "heading",
     "aria-level": headingLevel,
     "data-testid": testId,
@@ -54,7 +35,7 @@ const HeadingItem = /*#__PURE__*/memo(({
     id: id
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: UNSAFE_className
+    className: ax(["_11c81vhk _1rjcze3t _18zrpxbi _syaz1n3s", UNSAFE_className])
   }, rest), children);
 });
 export default HeadingItem;

package/dist/es2019/menu-section/menu-group.compiled.css

@@ -0,0 +1,5 @@
+._18m91wug{overflow-y:auto}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._2lx21bp4{flex-direction:column}
+._kqswpfqs{position:static}

package/dist/es2019/menu-section/menu-group.js

@@ -1,17 +1,10 @@
+/* menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import "./menu-group.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
-const baseStyles = css({
-  display: 'flex',
-  position: 'static',
-  flexDirection: 'column',
-  overflow: 'auto'
-});
+const baseStyles = null;
 
 /**
  * __Menu group__
@@ -36,11 +29,11 @@ const MenuGroup = ({
   // @ts-expect-error
   className: UNSAFE_className,
   ...rest
-}) => jsx(SpacingContext.Provider, {
+}) => /*#__PURE__*/React.createElement(SpacingContext.Provider, {
   value: spacing
-}, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+}, /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
   value: "border"
-}, jsx("div", _extends({
+}, /*#__PURE__*/React.createElement("div", _extends({
   "aria-busy": isLoading,
   style: {
     minWidth,
@@ -48,12 +41,11 @@ const MenuGroup = ({
     minHeight,
     maxHeight
   },
-  css: baseStyles,
   "data-testid": testId,
   role: role
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   ,
-  className: UNSAFE_className
+  className: ax(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className])
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, rest))));
 export default MenuGroup;

package/dist/es2019/menu-section/popup-menu-group.js

@@ -1,10 +1,9 @@
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+
 import MenuGroup from './menu-group';
 
 /**
@@ -15,8 +14,9 @@ const PopupMenuGroup = ({
   minWidth = 320,
   ...rest
 }) =>
+/*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-jsx(MenuGroup, _extends({
+React.createElement(MenuGroup, _extends({
   maxWidth: maxWidth,
   minWidth: minWidth
 }, rest));

package/dist/es2019/menu-section/section.compiled.css

@@ -0,0 +1,17 @@
+
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._mqm21imm{border-block-start:1px solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._1l6bgktf [data-ds--menu--heading-item]{margin-block-start:20px}
+._1mfv8jkm [data-ds--menu--skeleton-heading-item]:first-of-type{margin-block-start:19px}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1p3hi2wt [data-ds--menu--heading-item]{margin-block-end:6px}
+._1qdgi2wt:after, ._kfgti2wt:before{height:6px}
+._1reo1wug{overflow-x:auto}
+._1ywu1ule:after, ._cfu11ule:before{display:block}
+._aetrb3bt:after, ._1kt9b3bt:before{content:""}
+._auo4rdoj [data-ds--menu--skeleton-heading-item]{margin-block-end:9px}
+._hp2110yn [data-ds--menu--skeleton-heading-item]{margin-block-start:25px}
+._osbldlk8 [data-ds--menu--heading-item]:first-of-type{margin-block-start:14px}
+[data-section]+._n7cnyjp0{margin-block-start:-6px}
+._1bg41n1a:focus{outline-offset:-1px}

package/dist/es2019/menu-section/section.js

@@ -1,88 +1,27 @@
+/* section.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./section.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Children, forwardRef, Fragment } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { N30A } from '@atlaskit/theme/colors';
 import HeadingItem from '../menu-item/heading-item';
-const gridSize = 8;
-const itemHeadingTopMargin = gridSize * 2.5;
-const itemHeadingBottomMargin = gridSize * 0.75;
+const itemHeadingTopMargin = 20;
+const itemHeadingBottomMargin = 6;
 // Skeleton content is slightly shorter than the real content.
 // Because of that we slightly increase the top margin to offset this so the
 // containing size both real and skeleton always equal approx 30px.
 const itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
-const skeletonHeadingHeight = gridSize;
+const skeletonHeadingHeight = 8;
 const skeletonHeadingMarginOffset = 3;
 const skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
-// We want to move the entire body up by 3px without affecting the height of the skeleton container.
-const skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
-const sectionPaddingTopBottom = gridSize * 0.75;
-const VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
-const sectionStyles = css({
-  '&::before, &::after': {
-    display: 'block',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: sectionPaddingTopBottom,
-    content: '""'
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& [data-ds--menu--heading-item]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockEnd: itemHeadingBottomMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockStart: itemHeadingTopMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&:first-of-type': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginBlockStart: itemHeadingTopMargin - sectionPaddingTopBottom
-    }
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& [data-ds--menu--skeleton-heading-item]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockEnd: skeletonHeadingBottomMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockStart: skeletonHeadingTopMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&:first-of-type': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginBlockStart: skeletonHeadingTopMargin - sectionPaddingTopBottom
-    }
-  },
-  '&:focus': {
-    // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
-    // We have made a deliberate choice to leave this behaviour as is.
-    // This makes the outline go inside by 1px so it can actually be displayed
-    // else it gets cut off from the overflow: scroll from the parent menu group.
-    outlineOffset: -1
-  }
-});
-const scrollableStyles = css({
-  flexShrink: 1,
-  overflow: 'auto'
-});
-const unscrollableStyles = css({
-  flexShrink: 0
-});
-const thinSeparatorStyles = css({
-  borderBlockStart: `1px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
-});
-const noSeparatorStyles = css({
-  // this is to ensure that adjacent sections without separators don't get additional margins.
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '[data-section] + &': {
-    marginBlockStart: -6
-  }
-});
-const sideNavSectionHeadingStyles = () => {
-  return {
-    paddingInline: "var(--ds-space-100, 8px)"
-  };
+const sectionPaddingTopBottom = 6;
+const styles = {
+  root: "_1ywu1ule _cfu11ule _1qdgi2wt _kfgti2wt _aetrb3bt _1kt9b3bt _1p3hi2wt _1l6bgktf _osbldlk8 _auo4rdoj _hp2110yn _1mfv8jkm _1bg41n1a",
+  scrollable: "_1reo1wug _18m91wug _1o9zkb7n",
+  unscrollable: "_1o9zidpf",
+  thinSeparator: "_mqm21imm",
+  noSeparator: "_n7cnyjp0",
+  sideNavSectionHeading: "_18zru2gc"
 };
 
 /**
@@ -110,14 +49,14 @@ const Section = /*#__PURE__*/forwardRef(({
   className: UNSAFE_className,
   ...rest
 }, ref) => {
-  const content = isList ? jsx("ul", {
+  const content = isList ? /*#__PURE__*/React.createElement("ul", {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       margin: 0,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       padding: 0
     }
-  }, Children.map(Children.toArray(children), (child, index) => jsx("li", {
+  }, Children.map(Children.toArray(children), (child, index) => /*#__PURE__*/React.createElement("li", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       listStyleType: 'none',
@@ -126,21 +65,22 @@ const Section = /*#__PURE__*/forwardRef(({
     },
     key: index
   }, child))) : children;
-  const childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
-    cssFn: isSideNavSection ? sideNavSectionHeadingStyles : undefined,
+  const childrenMarkup = title !== undefined ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HeadingItem, {
     testId: testId && `${testId}--heading`,
     "aria-hidden": true
-  }, title), content) : jsx(Fragment, null, content);
-  return jsx("div", _extends({}, rest, {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    className: ax([isSideNavSection && styles.sideNavSectionHeading])
+  }, title), content) : /*#__PURE__*/React.createElement(Fragment, null, content);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className,
+    className: ax([styles.root, isScrollable ? styles.scrollable : styles.unscrollable, hasSeparator ? styles.thinSeparator : styles.noSeparator, UNSAFE_className]),
     id: id
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? thinSeparatorStyles : noSeparatorStyles],
+
     "aria-label": title,
     "aria-labelledby": titleId,
     "data-testid": testId,

package/dist/esm/menu-item/heading-item.compiled.css

@@ -0,0 +1,4 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._syaz1vvm{color:var(--_bbz764)}

package/dist/esm/menu-item/heading-item.js

@@ -1,23 +1,13 @@
+/* heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "testId", "headingLevel", "id", "cssFn", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+var _excluded = ["children", "testId", "headingLevel", "id", "className"];
+import "./heading-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import { N300 } from '@atlaskit/theme/colors';
-var headingStyles = css({
-  color: "var(--ds-text-subtle, ".concat(N300, ")"),
-  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)"
-});
+var headingStyles = null;
 
 /**
  * __Heading item__
@@ -33,19 +23,9 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
     _ref$headingLevel = _ref.headingLevel,
     headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     id = _ref.id,
-    _ref$cssFn = _ref.cssFn,
-    cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn,
     UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var UNSAFE_overrides = css(cssFn(undefined));
-  return jsx("div", _extends({
-    css: [headingStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    UNSAFE_overrides],
+  return /*#__PURE__*/React.createElement("div", _extends({
     role: "heading",
     "aria-level": headingLevel,
     "data-testid": testId,
@@ -53,7 +33,11 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
     id: id
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: UNSAFE_className
-  }, rest), children);
+    className: ax(["_11c81vhk _1rjcze3t _18zrpxbi _syaz1vvm", UNSAFE_className])
+  }, rest, {
+    style: {
+      "--_bbz764": ix("var(--ds-text-subtle, ".concat(N300, ")"))
+    }
+  }), children);
 });
 export default HeadingItem;

package/dist/esm/menu-section/menu-group.compiled.css

@@ -0,0 +1,5 @@
+._18m91wug{overflow-y:auto}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._2lx21bp4{flex-direction:column}
+._kqswpfqs{position:static}

package/dist/esm/menu-section/menu-group.js

@@ -1,19 +1,12 @@
+/* menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import "./menu-group.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
-var baseStyles = css({
-  display: 'flex',
-  position: 'static',
-  flexDirection: 'column',
-  overflow: 'auto'
-});
+var baseStyles = null;
 
 /**
  * __Menu group__
@@ -35,11 +28,11 @@ var MenuGroup = function MenuGroup(_ref) {
     spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
     UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return jsx(SpacingContext.Provider, {
+  return /*#__PURE__*/React.createElement(SpacingContext.Provider, {
     value: spacing
-  }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+  }, /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "border"
-  }, jsx("div", _extends({
+  }, /*#__PURE__*/React.createElement("div", _extends({
     "aria-busy": isLoading,
     style: {
       minWidth: minWidth,
@@ -47,12 +40,11 @@ var MenuGroup = function MenuGroup(_ref) {
       minHeight: minHeight,
       maxHeight: maxHeight
     },
-    css: baseStyles,
     "data-testid": testId,
     role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: UNSAFE_className
+    className: ax(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className])
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));
 };

package/dist/esm/menu-section/popup-menu-group.js

@@ -1,12 +1,11 @@
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["maxWidth", "minWidth"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+
 import MenuGroup from './menu-group';
 
 /**
@@ -19,8 +18,9 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
     minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(MenuGroup, _extends({
+    React.createElement(MenuGroup, _extends({
       maxWidth: maxWidth,
       minWidth: minWidth
     }, rest))

package/dist/esm/menu-section/section.compiled.css

@@ -0,0 +1,17 @@
+
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._mqm21imm{border-block-start:1px solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._1l6bgktf [data-ds--menu--heading-item]{margin-block-start:20px}
+._1mfv8jkm [data-ds--menu--skeleton-heading-item]:first-of-type{margin-block-start:19px}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1p3hi2wt [data-ds--menu--heading-item]{margin-block-end:6px}
+._1qdgi2wt:after, ._kfgti2wt:before{height:6px}
+._1reo1wug{overflow-x:auto}
+._1ywu1ule:after, ._cfu11ule:before{display:block}
+._aetrb3bt:after, ._1kt9b3bt:before{content:""}
+._auo4rdoj [data-ds--menu--skeleton-heading-item]{margin-block-end:9px}
+._hp2110yn [data-ds--menu--skeleton-heading-item]{margin-block-start:25px}
+._osbldlk8 [data-ds--menu--heading-item]:first-of-type{margin-block-start:14px}
+[data-section]+._n7cnyjp0{margin-block-start:-6px}
+._1bg41n1a:focus{outline-offset:-1px}

package/dist/esm/menu-section/section.js

@@ -1,90 +1,29 @@
+/* section.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "isSideNavSection", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./section.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Children, forwardRef, Fragment } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { N30A } from '@atlaskit/theme/colors';
 import HeadingItem from '../menu-item/heading-item';
-var gridSize = 8;
-var itemHeadingTopMargin = gridSize * 2.5;
-var itemHeadingBottomMargin = gridSize * 0.75;
+var itemHeadingTopMargin = 20;
+var itemHeadingBottomMargin = 6;
 // Skeleton content is slightly shorter than the real content.
 // Because of that we slightly increase the top margin to offset this so the
 // containing size both real and skeleton always equal approx 30px.
 var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
-var skeletonHeadingHeight = gridSize;
+var skeletonHeadingHeight = 8;
 var skeletonHeadingMarginOffset = 3;
 var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
-// We want to move the entire body up by 3px without affecting the height of the skeleton container.
-var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
-var sectionPaddingTopBottom = gridSize * 0.75;
-var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
-var sectionStyles = css({
-  '&::before, &::after': {
-    display: 'block',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: sectionPaddingTopBottom,
-    content: '""'
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& [data-ds--menu--heading-item]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockEnd: itemHeadingBottomMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockStart: itemHeadingTopMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&:first-of-type': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginBlockStart: itemHeadingTopMargin - sectionPaddingTopBottom
-    }
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& [data-ds--menu--skeleton-heading-item]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockEnd: skeletonHeadingBottomMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockStart: skeletonHeadingTopMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&:first-of-type': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginBlockStart: skeletonHeadingTopMargin - sectionPaddingTopBottom
-    }
-  },
-  '&:focus': {
-    // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
-    // We have made a deliberate choice to leave this behaviour as is.
-    // This makes the outline go inside by 1px so it can actually be displayed
-    // else it gets cut off from the overflow: scroll from the parent menu group.
-    outlineOffset: -1
-  }
-});
-var scrollableStyles = css({
-  flexShrink: 1,
-  overflow: 'auto'
-});
-var unscrollableStyles = css({
-  flexShrink: 0
-});
-var thinSeparatorStyles = css({
-  borderBlockStart: "1px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30A, ")"), ")")
-});
-var noSeparatorStyles = css({
-  // this is to ensure that adjacent sections without separators don't get additional margins.
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '[data-section] + &': {
-    marginBlockStart: -6
-  }
-});
-var sideNavSectionHeadingStyles = function sideNavSectionHeadingStyles() {
-  return {
-    paddingInline: "var(--ds-space-100, 8px)"
-  };
+var sectionPaddingTopBottom = 6;
+var styles = {
+  root: "_1ywu1ule _cfu11ule _1qdgi2wt _kfgti2wt _aetrb3bt _1kt9b3bt _1p3hi2wt _1l6bgktf _osbldlk8 _auo4rdoj _hp2110yn _1mfv8jkm _1bg41n1a",
+  scrollable: "_1reo1wug _18m91wug _1o9zkb7n",
+  unscrollable: "_1o9zidpf",
+  thinSeparator: "_mqm21imm",
+  noSeparator: "_n7cnyjp0",
+  sideNavSectionHeading: "_18zru2gc"
 };
 
 /**
@@ -109,7 +48,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isSideNavSection = _ref$isSideNavSection === void 0 ? false : _ref$isSideNavSection,
     UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var content = isList ? jsx("ul", {
+  var content = isList ? /*#__PURE__*/React.createElement("ul", {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       margin: 0,
@@ -117,7 +56,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
       padding: 0
     }
   }, Children.map(Children.toArray(children), function (child, index) {
-    return jsx("li", {
+    return /*#__PURE__*/React.createElement("li", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: {
         listStyleType: 'none',
@@ -127,21 +66,22 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
       key: index
     }, child);
   })) : children;
-  var childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
-    cssFn: isSideNavSection ? sideNavSectionHeadingStyles : undefined,
+  var childrenMarkup = title !== undefined ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HeadingItem, {
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
-  }, title), content) : jsx(Fragment, null, content);
-  return jsx("div", _extends({}, rest, {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    className: ax([isSideNavSection && styles.sideNavSectionHeading])
+  }, title), content) : /*#__PURE__*/React.createElement(Fragment, null, content);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className,
+    className: ax([styles.root, isScrollable ? styles.scrollable : styles.unscrollable, hasSeparator ? styles.thinSeparator : styles.noSeparator, UNSAFE_className]),
     id: id
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? thinSeparatorStyles : noSeparatorStyles],
+
     "aria-label": title,
     "aria-labelledby": titleId,
     "data-testid": testId,

package/dist/types/menu-item/heading-item.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 import type { HeadingItemProps } from '../types';
 /**
  * __Heading item__
@@ -9,5 +8,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, headingLevel, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, headingLevel, id, className: UNSAFE_className, ...rest }: HeadingItemProps) => JSX.Element>;
 export default HeadingItem;

package/dist/types/menu-section/menu-group.d.ts

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuGroupProps } from '../types';
 /**
  * __Menu group__
@@ -12,5 +8,5 @@ import type { MenuGroupProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => JSX.Element;
 export default MenuGroup;

package/dist/types/menu-section/popup-menu-group.d.ts

@@ -1,11 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuGroupProps } from '../types';
 /**
  * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
-declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => JSX.Element;
 export default PopupMenuGroup;

package/dist/types/types.d.ts

@@ -324,13 +324,6 @@ export interface SkeletonItemProps {
     cssFn?: StatelessCSSFn;
 }
 export interface HeadingItemProps {
-    /**
-     * A function that overrides the styles.
-     * It receives the current styles and returns a customized styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    cssFn?: StatelessCSSFn;
     /**
      * The text of the heading.
      */

package/dist/types-ts4.5/menu-item/heading-item.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 import type { HeadingItemProps } from '../types';
 /**
  * __Heading item__
@@ -9,5 +8,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, headingLevel, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, headingLevel, id, className: UNSAFE_className, ...rest }: HeadingItemProps) => JSX.Element>;
 export default HeadingItem;

package/dist/types-ts4.5/menu-section/menu-group.d.ts

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuGroupProps } from '../types';
 /**
  * __Menu group__
@@ -12,5 +8,5 @@ import type { MenuGroupProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => JSX.Element;
 export default MenuGroup;

package/dist/types-ts4.5/menu-section/popup-menu-group.d.ts

@@ -1,11 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuGroupProps } from '../types';
 /**
  * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
-declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => JSX.Element;
 export default PopupMenuGroup;

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

@@ -324,13 +324,6 @@ export interface SkeletonItemProps {
     cssFn?: StatelessCSSFn;
 }
 export interface HeadingItemProps {
-    /**
-     * A function that overrides the styles.
-     * It receives the current styles and returns a customized styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    cssFn?: StatelessCSSFn;
     /**
      * The text of the heading.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "6.0.0",
+	"version": "7.0.0",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,6 +42,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/app-provider": "^2.1.0",
+		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/interaction-context": "^3.0.0",