@atlaskit/menu 1.2.0 → 1.2.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/menu
 
+## 1.2.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.3
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 1.2.2
+
+### Patch Changes
+
+- [`2eeb5c46710`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2eeb5c46710) - Menu items can take `data-testid` directly again however we recommend to still use the officially supported `testId` prop instead. The `data-testid` prop was unintentionally removed in a previous version however will be removed as a breaking change in a later major version and remains not officially typed.
+
+## 1.2.1
+
+### Patch Changes
+
+- [`2b2290121eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b2290121eb) - Raised the minimum version carat range of focus ring to latest.
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -11,34 +11,34 @@ Object.defineProperty(exports, "ButtonItem", {
     return _buttonItem.default;
   }
 });
-Object.defineProperty(exports, "LinkItem", {
+Object.defineProperty(exports, "CustomItem", {
   enumerable: true,
   get: function get() {
-    return _linkItem.default;
+    return _customItem.default;
   }
 });
-Object.defineProperty(exports, "CustomItem", {
+Object.defineProperty(exports, "HeadingItem", {
   enumerable: true,
   get: function get() {
-    return _customItem.default;
+    return _headingItem.default;
   }
 });
-Object.defineProperty(exports, "SkeletonItem", {
+Object.defineProperty(exports, "LinkItem", {
   enumerable: true,
   get: function get() {
-    return _skeletonItem.default;
+    return _linkItem.default;
   }
 });
-Object.defineProperty(exports, "HeadingItem", {
+Object.defineProperty(exports, "MenuGroup", {
   enumerable: true,
   get: function get() {
-    return _headingItem.default;
+    return _menuGroup.default;
   }
 });
-Object.defineProperty(exports, "SkeletonHeadingItem", {
+Object.defineProperty(exports, "PopupMenuGroup", {
   enumerable: true,
   get: function get() {
-    return _skeletonHeadingItem.default;
+    return _popupMenuGroup.default;
   }
 });
 Object.defineProperty(exports, "Section", {
@@ -47,16 +47,16 @@ Object.defineProperty(exports, "Section", {
     return _section.default;
   }
 });
-Object.defineProperty(exports, "MenuGroup", {
+Object.defineProperty(exports, "SkeletonHeadingItem", {
   enumerable: true,
   get: function get() {
-    return _menuGroup.default;
+    return _skeletonHeadingItem.default;
   }
 });
-Object.defineProperty(exports, "PopupMenuGroup", {
+Object.defineProperty(exports, "SkeletonItem", {
   enumerable: true,
   get: function get() {
-    return _popupMenuGroup.default;
+    return _skeletonItem.default;
   }
 });
 

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -19,8 +19,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var defaultRender = function defaultRender(Component, props) {
   return (0, _core.jsx)(Component, props);
@@ -67,7 +65,7 @@ var wordBreakStyles = (0, _core.css)({
 });
 var descriptionStyles = (0, _core.css)({
   marginTop: itemDescriptionSpacing,
-  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")"),
   fontSize: _typography.headingSizes.h200.size
 });
 var primitiveStyles = (0, _core.css)({
@@ -100,11 +98,11 @@ var unselectedStyles = (0, _core.css)({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20),
+    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N20, ")"),
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.N30),
+    backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -113,28 +111,23 @@ var disabledStyles = (0, _core.css)({
   cursor: 'not-allowed',
   '&, :hover, :active': {
     backgroundColor: 'transparent',
-    color: (0, _tokens.token)('color.text.disabled', _colors.N200)
+    color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
   }
 });
 var selectedStyles = (0, _core.css)({
-  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.N20),
-  // Suppress the need for a fallback as selected color isn't used in the non-tokens world.
-  // When removing fallbacks make sure to remove this supression.
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  color: (0, _tokens.token)('color.text.selected'),
+  backgroundColor: "var(--ds-background-selected-resting, ".concat(_colors.N20, ")"),
+  // Fallback set as babel plugin inserts one otherwise
+  color: "var(--ds-text-selected, currentColor)",
   ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: (0, _tokens.token)('color.text.selected')
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':hover': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.hover', _colors.N20),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: (0, _tokens.token)('color.text.selected')
+    backgroundColor: "var(--ds-background-selected-hover, ".concat(_colors.N20, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':active': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.N30),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: (0, _tokens.token)('color.text.selected')
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.N30, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   }
 });
 /**
@@ -159,7 +152,6 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
       iconAfter = _ref.iconAfter,
       iconBefore = _ref.iconBefore,
       overrides = _ref.overrides,
-      testId = _ref.testId,
       className = _ref.className,
       _ref$shouldTitleWrap = _ref.shouldTitleWrap,
       shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? false : _ref$shouldTitleWrap,
@@ -176,7 +168,6 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return (0, _core.jsx)(_focusRing.default, {
       isInset: true
     }, children({
-      'data-testid': testId,
       className: cx([cn([primitiveStyles, !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
       children: (0, _core.jsx)(_react.Fragment, null, iconBefore && (0, _core.jsx)("span", {
         "data-item-elem-before": true,

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

@@ -21,7 +21,7 @@ var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/
 
 var _useBlurOnMouseDown = require("../internal/hooks/use-blur-on-mouse-down");
 
-/** @jsx jsx */
+var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
 
 /**
  * __Button item__
@@ -49,7 +49,7 @@ function (props, ref) {
       onMouseDown = props.onMouseDown,
       shouldTitleWrap = props.shouldTitleWrap,
       shouldDescriptionWrap = props.shouldDescriptionWrap,
-      rest = (0, _objectWithoutProperties2.default)(props, ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onMouseDownHandler = (0, _useBlurOnMouseDown.useBlurOnMouseDown)(onMouseDown);
 
   if (!children) {
@@ -59,7 +59,6 @@ function (props, ref) {
   return (0, _core.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
-    testId: testId,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isDisabled: isDisabled,
@@ -75,8 +74,11 @@ function (props, ref) {
     })
   }), function (_ref) {
     var children = _ref.children,
-        props = (0, _objectWithoutProperties2.default)(_ref, ["children"]);
-    return (0, _core.jsx)("button", (0, _extends2.default)({}, rest, props, {
+        className = _ref.className;
+    return (0, _core.jsx)("button", (0, _extends2.default)({
+      "data-testid": testId
+    }, rest, {
+      className: className,
       ref: ref,
       disabled: isDisabled,
       onClick: onClick,

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

@@ -21,7 +21,8 @@ var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/
 
 var _useBlurOnMouseDown = require("../internal/hooks/use-blur-on-mouse-down");
 
-/** @jsx jsx */
+var _excluded = ["component", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
+
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
 }; // Dirty hack to get generics working with forward ref [1/2]
@@ -53,7 +54,7 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
       onMouseDown = _ref.onMouseDown,
       shouldTitleWrap = _ref.shouldTitleWrap,
       shouldDescriptionWrap = _ref.shouldDescriptionWrap,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["component", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onMouseDownHandler = (0, _useBlurOnMouseDown.useBlurOnMouseDown)(onMouseDown);
 
   if (!Component) {
@@ -70,8 +71,7 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
     isSelected: isSelected,
     isDisabled: isDisabled,
     shouldTitleWrap: shouldTitleWrap,
-    shouldDescriptionWrap: shouldDescriptionWrap,
-    testId: testId // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    shouldDescriptionWrap: shouldDescriptionWrap // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     ,
     css: (0, _core.css)(cssFn({
       isDisabled: isDisabled,
@@ -79,10 +79,12 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
     }))
   }), function (_ref2) {
     var children = _ref2.children,
-        props = (0, _objectWithoutProperties2.default)(_ref2, ["children"]);
-    return (0, _core.jsx)(Component, (0, _extends2.default)({}, rest, props, {
+        className = _ref2.className;
+    return (0, _core.jsx)(Component, (0, _extends2.default)({
+      "data-testid": testId
+    }, rest, {
+      className: className,
       ref: ref,
-      "data-testid": testId,
       draggable: false,
       onDragStart: preventEvent,
       onMouseDown: isDisabled ? preventEvent : onMouseDownHandler,

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

@@ -23,16 +23,14 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
-/** @jsx jsx */
+var _excluded = ["children", "testId", "id", "cssFn"];
 var gridSize = (0, _constants.gridSize)();
 var itemSidePadding = gridSize * 2.5;
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _core.css)({
   padding: "0 ".concat(itemSidePadding, "px"),
-  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
@@ -53,7 +51,7 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       id = _ref.id,
       _ref$cssFn = _ref.cssFn,
       cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "testId", "id", "cssFn"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)("div", (0, _extends2.default)({
     css: [headingStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     cssFn(undefined)],

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

@@ -21,7 +21,8 @@ var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/
 
 var _useBlurOnMouseDown = require("../internal/hooks/use-blur-on-mouse-down");
 
-/** @jsx jsx */
+var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
+
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
 };
@@ -54,7 +55,7 @@ function (props, ref) {
       onMouseDown = props.onMouseDown,
       shouldTitleWrap = props.shouldTitleWrap,
       shouldDescriptionWrap = props.shouldDescriptionWrap,
-      rest = (0, _objectWithoutProperties2.default)(props, ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onMouseDownHandler = (0, _useBlurOnMouseDown.useBlurOnMouseDown)(onMouseDown);
 
   if (!children) {
@@ -76,12 +77,14 @@ function (props, ref) {
       isSelected: isSelected,
       isDisabled: isDisabled
     }),
-    title: children,
-    testId: testId
+    title: children
   }), function (_ref) {
     var children = _ref.children,
-        props = (0, _objectWithoutProperties2.default)(_ref, ["children"]);
-    return (0, _core.jsx)("a", (0, _extends2.default)({}, rest, props, {
+        className = _ref.className;
+    return (0, _core.jsx)("a", (0, _extends2.default)({
+      "data-testid": testId
+    }, rest, {
+      className: className,
       href: isDisabled ? undefined : href,
       draggable: false,
       onDragStart: preventEvent,

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

@@ -15,8 +15,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var skeletonStyles = (0, _core.css)({
   padding: "0 ".concat((0, _constants.gridSize)() * 2.5, "px"),
@@ -24,7 +22,7 @@ var skeletonStyles = (0, _core.css)({
     display: 'block',
     width: '30%',
     height: (0, _constants.gridSize)(),
-    backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', (0, _colors.skeleton)()),
+    backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat((0, _colors.skeleton)(), ")"),
     borderRadius: 100,
     content: '""'
   }

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

@@ -15,8 +15,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var borderRadius = (0, _constants.borderRadius)();
@@ -28,7 +26,7 @@ var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
 var skeletonContentHeight = 9;
-var skeletonColor = (0, _tokens.token)('color.background.subtleNeutral.resting', (0, _colors.skeleton)());
+var skeletonColor = "var(--ds-background-subtleNeutral-resting, ".concat((0, _colors.skeleton)(), ")");
 var skeletonStyles = (0, _core.css)({
   display: 'flex',
   minHeight: itemMinHeight,

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _core = require("@emotion/core");
 
-/** @jsx jsx */
+var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId"];
 var groupStyles = (0, _core.css)({
   display: 'flex',
   flexDirection: 'column',
@@ -34,7 +34,7 @@ var MenuGroup = function MenuGroup(_ref) {
       minHeight = _ref.minHeight,
       maxHeight = _ref.maxHeight,
       testId = _ref.testId,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)("div", (0, _extends2.default)({
     style: {
       minWidth: minWidth,

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

@@ -15,7 +15,7 @@ var _core = require("@emotion/core");
 
 var _menuGroup = _interopRequireDefault(require("./menu-group"));
 
-/** @jsx jsx */
+var _excluded = ["maxWidth", "minWidth"];
 
 /**
  * @deprecated
@@ -25,7 +25,7 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
       maxWidth = _ref$maxWidth === void 0 ? 800 : _ref$maxWidth,
       _ref$minWidth = _ref.minWidth,
       minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["maxWidth", "minWidth"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)(_menuGroup.default, (0, _extends2.default)({
     maxWidth: maxWidth,
     minWidth: minWidth

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

@@ -21,11 +21,9 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
 
-/** @jsx jsx */
+var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"];
 var gridSize = (0, _constants.gridSize)();
 var itemHeadingTopMargin = gridSize * 2.5;
 var itemHeadingBottomMargin = gridSize * 0.75; // Skeleton content is slightly shorter than the real content.
@@ -78,7 +76,7 @@ var unscrollableStyles = (0, _core.css)({
   flexShrink: 0
 });
 var separatorStyles = (0, _core.css)({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30A), ")")
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(_colors.N30A, ")"), ")")
 });
 var noSeparatorStyles = (0, _core.css)({
   // this is to ensure that adjacent sections without separators don't get additional margins.
@@ -104,7 +102,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       isScrollable = _ref.isScrollable,
       hasSeparator = _ref.hasSeparator,
       id = _ref.id,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var childrenMarkup = title !== undefined ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_headingItem.default // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
     cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.0",
+	"version": "1.2.4",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -5,7 +5,6 @@ import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 
 const defaultRender = (Component, props) => jsx(Component, props);
 
@@ -50,7 +49,7 @@ const wordBreakStyles = css({
 });
 const descriptionStyles = css({
   marginTop: itemDescriptionSpacing,
-  color: token('color.text.lowEmphasis', N200),
+  color: `var(--ds-text-lowEmphasis, ${N200})`,
   fontSize: headingSizes.h200.size
 });
 const primitiveStyles = css({
@@ -83,11 +82,11 @@ const unselectedStyles = css({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: token('color.background.transparentNeutral.hover', N20),
+    backgroundColor: `var(--ds-background-transparentNeutral-hover, ${N20})`,
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: token('color.background.transparentNeutral.pressed', N30),
+    backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${N30})`,
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -96,28 +95,23 @@ const disabledStyles = css({
   cursor: 'not-allowed',
   '&, :hover, :active': {
     backgroundColor: 'transparent',
-    color: token('color.text.disabled', N200)
+    color: `var(--ds-text-disabled, ${N200})`
   }
 });
 const selectedStyles = css({
-  backgroundColor: token('color.background.selected.resting', N20),
-  // Suppress the need for a fallback as selected color isn't used in the non-tokens world.
-  // When removing fallbacks make sure to remove this supression.
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  color: token('color.text.selected'),
+  backgroundColor: `var(--ds-background-selected-resting, ${N20})`,
+  // Fallback set as babel plugin inserts one otherwise
+  color: "var(--ds-text-selected, currentColor)",
   ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':hover': {
-    backgroundColor: token('color.background.selected.hover', N20),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    backgroundColor: `var(--ds-background-selected-hover, ${N20})`,
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':active': {
-    backgroundColor: token('color.background.selected.pressed', N30),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    backgroundColor: `var(--ds-background-selected-pressed, ${N30})`,
+    color: "var(--ds-text-selected, currentColor)"
   }
 });
 /**
@@ -142,7 +136,6 @@ const MenuItemPrimitive = ({
   iconAfter,
   iconBefore,
   overrides,
-  testId,
   className,
   shouldTitleWrap = false,
   shouldDescriptionWrap = false,
@@ -157,7 +150,6 @@ const MenuItemPrimitive = ({
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      'data-testid': testId,
       className: cx([cn([primitiveStyles, !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
       children: jsx(Fragment, null, iconBefore && jsx("span", {
         "data-item-elem-before": true,

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

@@ -42,7 +42,6 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on
   return jsx(MenuItemPrimitive, _extends({}, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
-    testId: testId,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isDisabled: isDisabled,
@@ -58,8 +57,11 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on
     })
   }), ({
     children,
-    ...props
-  }) => jsx("button", _extends({}, rest, props, {
+    className
+  }) => jsx("button", _extends({
+    "data-testid": testId
+  }, rest, {
+    className: className,
     ref: ref,
     disabled: isDisabled,
     onClick: onClick,

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

@@ -53,8 +53,7 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     isSelected: isSelected,
     isDisabled: isDisabled,
     shouldTitleWrap: shouldTitleWrap,
-    shouldDescriptionWrap: shouldDescriptionWrap,
-    testId: testId // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    shouldDescriptionWrap: shouldDescriptionWrap // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     ,
     css: css(cssFn({
       isDisabled,
@@ -62,10 +61,12 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }))
   }), ({
     children,
-    ...props
-  }) => jsx(Component, _extends({}, rest, props, {
+    className
+  }) => jsx(Component, _extends({
+    "data-testid": testId
+  }, rest, {
+    className: className,
     ref: ref,
-    "data-testid": testId,
     draggable: false,
     onDragStart: preventEvent,
     onMouseDown: isDisabled ? preventEvent : onMouseDownHandler,

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

@@ -7,14 +7,13 @@ import noop from '@atlaskit/ds-lib/noop';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 const gridSize = gridSizeFn();
 const itemSidePadding = gridSize * 2.5;
 const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
   padding: `0 ${itemSidePadding}px`,
-  color: token('color.text.lowEmphasis', N200),
+  color: `var(--ds-text-lowEmphasis, ${N200})`,
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

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

@@ -60,12 +60,14 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on p
       isSelected,
       isDisabled
     }),
-    title: children,
-    testId: testId
+    title: children
   }), ({
     children,
-    ...props
-  }) => jsx("a", _extends({}, rest, props, {
+    className
+  }) => jsx("a", _extends({
+    "data-testid": testId
+  }, rest, {
+    className: className,
     href: isDisabled ? undefined : href,
     draggable: false,
     onDragStart: preventEvent,

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

@@ -3,14 +3,13 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const skeletonStyles = css({
   padding: `0 ${gridSize() * 2.5}px`,
   '::after': {
     display: 'block',
     width: '30%',
     height: gridSize(),
-    backgroundColor: token('color.background.subtleNeutral.resting', skeletonColorFn()),
+    backgroundColor: `var(--ds-background-subtleNeutral-resting, ${skeletonColorFn()})`,
     borderRadius: 100,
     content: '""'
   }

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

@@ -3,7 +3,6 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const gridSize = gridSizeFn();
 const borderRadius = borderRadiusFn();
 const itemElemSpacing = gridSize * 1.5;
@@ -14,7 +13,7 @@ const skeletonItemElemSize = gridSize * 2.5;
 const itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 const skeletonTextBorderRadius = 100;
 const skeletonContentHeight = 9;
-const skeletonColor = token('color.background.subtleNeutral.resting', skeletonColorFn());
+const skeletonColor = `var(--ds-background-subtleNeutral-resting, ${skeletonColorFn()})`;
 const skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,

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

@@ -6,7 +6,6 @@ import { css, jsx } from '@emotion/core';
 import { N30A } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import HeadingItem from '../menu-item/heading-item';
 const gridSize = gridSizeFn();
 const itemHeadingTopMargin = gridSize * 2.5;
@@ -60,7 +59,7 @@ const unscrollableStyles = css({
   flexShrink: 0
 });
 const separatorStyles = css({
-  borderTop: `2px solid var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30A)})`
+  borderTop: `2px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border-neutral, ${N30A})`})`
 });
 const noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.0",
+	"version": "1.2.4",
 	"sideEffects": false
 }

package/dist/esm/internal/components/menu-item-primitive.js

@@ -5,7 +5,6 @@ import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 
 var defaultRender = function defaultRender(Component, props) {
   return jsx(Component, props);
@@ -52,7 +51,7 @@ var wordBreakStyles = css({
 });
 var descriptionStyles = css({
   marginTop: itemDescriptionSpacing,
-  color: token('color.text.lowEmphasis', N200),
+  color: "var(--ds-text-lowEmphasis, ".concat(N200, ")"),
   fontSize: headingSizes.h200.size
 });
 var primitiveStyles = css({
@@ -85,11 +84,11 @@ var unselectedStyles = css({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: token('color.background.transparentNeutral.hover', N20),
+    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(N20, ")"),
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: token('color.background.transparentNeutral.pressed', N30),
+    backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -98,28 +97,23 @@ var disabledStyles = css({
   cursor: 'not-allowed',
   '&, :hover, :active': {
     backgroundColor: 'transparent',
-    color: token('color.text.disabled', N200)
+    color: "var(--ds-text-disabled, ".concat(N200, ")")
   }
 });
 var selectedStyles = css({
-  backgroundColor: token('color.background.selected.resting', N20),
-  // Suppress the need for a fallback as selected color isn't used in the non-tokens world.
-  // When removing fallbacks make sure to remove this supression.
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  color: token('color.text.selected'),
+  backgroundColor: "var(--ds-background-selected-resting, ".concat(N20, ")"),
+  // Fallback set as babel plugin inserts one otherwise
+  color: "var(--ds-text-selected, currentColor)",
   ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':hover': {
-    backgroundColor: token('color.background.selected.hover', N20),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    backgroundColor: "var(--ds-background-selected-hover, ".concat(N20, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':active': {
-    backgroundColor: token('color.background.selected.pressed', N30),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(N30, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   }
 });
 /**
@@ -144,7 +138,6 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
       iconAfter = _ref.iconAfter,
       iconBefore = _ref.iconBefore,
       overrides = _ref.overrides,
-      testId = _ref.testId,
       className = _ref.className,
       _ref$shouldTitleWrap = _ref.shouldTitleWrap,
       shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? false : _ref$shouldTitleWrap,
@@ -161,7 +154,6 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      'data-testid': testId,
       className: cx([cn([primitiveStyles, !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
       children: jsx(Fragment, null, iconBefore && jsx("span", {
         "data-item-elem-before": true,

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
@@ -34,7 +35,7 @@ function (props, ref) {
       onMouseDown = props.onMouseDown,
       shouldTitleWrap = props.shouldTitleWrap,
       shouldDescriptionWrap = props.shouldDescriptionWrap,
-      rest = _objectWithoutProperties(props, ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   var onMouseDownHandler = useBlurOnMouseDown(onMouseDown);
 
@@ -45,7 +46,6 @@ function (props, ref) {
   return jsx(MenuItemPrimitive, _extends({}, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     overrides: overrides,
-    testId: testId,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isDisabled: isDisabled,
@@ -61,9 +61,11 @@ function (props, ref) {
     })
   }), function (_ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, ["children"]);
-
-    return jsx("button", _extends({}, rest, props, {
+        className = _ref.className;
+    return jsx("button", _extends({
+      "data-testid": testId
+    }, rest, {
+      className: className,
       ref: ref,
       disabled: isDisabled,
       onClick: onClick,

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["component", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
@@ -39,7 +40,7 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
       onMouseDown = _ref.onMouseDown,
       shouldTitleWrap = _ref.shouldTitleWrap,
       shouldDescriptionWrap = _ref.shouldDescriptionWrap,
-      rest = _objectWithoutProperties(_ref, ["component", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var onMouseDownHandler = useBlurOnMouseDown(onMouseDown);
 
@@ -57,8 +58,7 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     isSelected: isSelected,
     isDisabled: isDisabled,
     shouldTitleWrap: shouldTitleWrap,
-    shouldDescriptionWrap: shouldDescriptionWrap,
-    testId: testId // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    shouldDescriptionWrap: shouldDescriptionWrap // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     ,
     css: css(cssFn({
       isDisabled: isDisabled,
@@ -66,11 +66,12 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     }))
   }), function (_ref2) {
     var children = _ref2.children,
-        props = _objectWithoutProperties(_ref2, ["children"]);
-
-    return jsx(Component, _extends({}, rest, props, {
+        className = _ref2.className;
+    return jsx(Component, _extends({
+      "data-testid": testId
+    }, rest, {
+      className: className,
       ref: ref,
-      "data-testid": testId,
       draggable: false,
       onDragStart: preventEvent,
       onMouseDown: isDisabled ? preventEvent : onMouseDownHandler,

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "testId", "id", "cssFn"];
 
 /** @jsx jsx */
 import { memo } from 'react';
@@ -8,14 +9,13 @@ import noop from '@atlaskit/ds-lib/noop';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 var gridSize = gridSizeFn();
 var itemSidePadding = gridSize * 2.5;
 var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
   padding: "0 ".concat(itemSidePadding, "px"),
-  color: token('color.text.lowEmphasis', N200),
+  color: "var(--ds-text-lowEmphasis, ".concat(N200, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
@@ -36,7 +36,7 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
       id = _ref.id,
       _ref$cssFn = _ref.cssFn,
       cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn,
-      rest = _objectWithoutProperties(_ref, ["children", "testId", "id", "cssFn"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   return jsx("div", _extends({
     css: [headingStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
@@ -40,7 +41,7 @@ function (props, ref) {
       onMouseDown = props.onMouseDown,
       shouldTitleWrap = props.shouldTitleWrap,
       shouldDescriptionWrap = props.shouldDescriptionWrap,
-      rest = _objectWithoutProperties(props, ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   var onMouseDownHandler = useBlurOnMouseDown(onMouseDown);
 
@@ -63,13 +64,14 @@ function (props, ref) {
       isSelected: isSelected,
       isDisabled: isDisabled
     }),
-    title: children,
-    testId: testId
+    title: children
   }), function (_ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, ["children"]);
-
-    return jsx("a", _extends({}, rest, props, {
+        className = _ref.className;
+    return jsx("a", _extends({
+      "data-testid": testId
+    }, rest, {
+      className: className,
       href: isDisabled ? undefined : href,
       draggable: false,
       onDragStart: preventEvent,

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

@@ -3,14 +3,13 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var skeletonStyles = css({
   padding: "0 ".concat(gridSize() * 2.5, "px"),
   '::after': {
     display: 'block',
     width: '30%',
     height: gridSize(),
-    backgroundColor: token('color.background.subtleNeutral.resting', skeletonColorFn()),
+    backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat(skeletonColorFn(), ")"),
     borderRadius: 100,
     content: '""'
   }

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

@@ -3,7 +3,6 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var gridSize = gridSizeFn();
 var borderRadius = borderRadiusFn();
 var itemElemSpacing = gridSize * 1.5;
@@ -14,7 +13,7 @@ var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
 var skeletonContentHeight = 9;
-var skeletonColor = token('color.background.subtleNeutral.resting', skeletonColorFn());
+var skeletonColor = "var(--ds-background-subtleNeutral-resting, ".concat(skeletonColorFn(), ")");
 var skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId"];
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
@@ -23,7 +24,7 @@ var MenuGroup = function MenuGroup(_ref) {
       minHeight = _ref.minHeight,
       maxHeight = _ref.maxHeight,
       testId = _ref.testId,
-      rest = _objectWithoutProperties(_ref, ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   return jsx("div", _extends({
     style: {

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maxWidth", "minWidth"];
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
@@ -13,7 +14,7 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
       maxWidth = _ref$maxWidth === void 0 ? 800 : _ref$maxWidth,
       _ref$minWidth = _ref.minWidth,
       minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
-      rest = _objectWithoutProperties(_ref, ["maxWidth", "minWidth"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   return jsx(MenuGroup, _extends({
     maxWidth: maxWidth,

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"];
 
 /** @jsx jsx */
 import { forwardRef, Fragment } from 'react';
@@ -7,7 +8,6 @@ import { css, jsx } from '@emotion/core';
 import { N30A } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import HeadingItem from '../menu-item/heading-item';
 var gridSize = gridSizeFn();
 var itemHeadingTopMargin = gridSize * 2.5;
@@ -61,7 +61,7 @@ var unscrollableStyles = css({
   flexShrink: 0
 });
 var separatorStyles = css({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30A), ")")
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(N30A, ")"), ")")
 });
 var noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.
@@ -87,7 +87,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isScrollable = _ref.isScrollable,
       hasSeparator = _ref.hasSeparator,
       id = _ref.id,
-      rest = _objectWithoutProperties(_ref, ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.0",
+	"version": "1.2.4",
 	"sideEffects": false
 }

package/dist/types/internal/components/menu-item-primitive.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { MenuItemPrimitiveProps } from '../../types';
 /**
  * __Menu item primitive__
@@ -13,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, testId, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => JSX.Element;
 export default MenuItemPrimitive;

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+/// <reference types="react" />
 import type { CustomItemComponentProps, CustomItemProps } from '../types';
 interface CustomItemTypeGenericHackProps {
     <TComponentProps>(props: CustomItemProps<TComponentProps> & {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SkeletonHeadingItemProps } from '../types';
 /**
  * __Skeleton heading item__

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SkeletonItemProps } from '../types';
 /**
  * __Skeleton item__

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { MenuGroupProps } from '../types';
 /**
  * __Menu group__

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { MenuGroupProps } from '../types';
 /**
  * @deprecated

package/dist/types/types.d.ts

@@ -96,7 +96,6 @@ export interface SectionProps {
 export interface MenuItemPrimitiveProps {
     children: (props: {
         className: string;
-        'data-testid': string | undefined;
         children: React.ReactNode;
     }) => JSX.Element;
     title: React.ReactNode | undefined;
@@ -109,7 +108,6 @@ export interface MenuItemPrimitiveProps {
     isDisabled: boolean | undefined;
     isSelected: boolean | undefined;
     className?: string;
-    testId?: string;
 }
 export interface MenuItemProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.2.0",
+  "version": "1.2.4",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Menu"
@@ -37,9 +36,9 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^1.2.0",
-    "@atlaskit/focus-ring": "^0.2.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/focus-ring": "^0.2.4",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -51,7 +50,7 @@
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.0.0",
     "@atlaskit/icon-object": "^6.0.0",
     "@atlaskit/section-message": "^6.0.0",
@@ -81,7 +80,10 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "design-system": "v1",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"