@atlaskit/menu 1.2.2 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/menu
 
+## 1.2.6
+
+### Patch Changes
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+- [`27467f65f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27467f65f68) - [ux] Update headingStyle to color that passes WCAG AA color contrast
+- [`2066efabc65`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2066efabc65) - A fix for the `StatelessCSSFn` type so that it now correctly accetps a void argument.
+- [`96cfc6c1c7f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96cfc6c1c7f) - Deprecates the `cssFn` and `overrides` APIs in '@atlaskit/menu'. These APIs are not performant and allow unbounded customisation of the Menu components. These APIs will be removed in a future release.
+- Updated dependencies
+
+## 1.2.5
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
+## 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

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,11 +19,11 @@ 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);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _core.jsx)(Component, props)
+  );
 };
 
 var gridSize = (0, _constants.gridSize)();
@@ -67,7 +67,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-subtlest, ".concat(_colors.N200, ")"),
   fontSize: _typography.headingSizes.h200.size
 });
 var primitiveStyles = (0, _core.css)({
@@ -100,11 +100,11 @@ var unselectedStyles = (0, _core.css)({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20),
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"),
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.N30),
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -113,28 +113,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-brand, ".concat(_colors.N20, ")"),
+  // Fallback set as babel plugin inserts one otherwise
+  color: "var(--ds-text-brand, currentColor)",
   ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: (0, _tokens.token)('color.text.selected')
+    color: "var(--ds-text-brand, 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-brand-hovered, ".concat(_colors.N20, ")"),
+    color: "var(--ds-text-brand, 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-brand-pressed, ".concat(_colors.N30, ")"),
+    color: "var(--ds-text-brand, currentColor)"
   }
 });
 /**

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) {

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) {

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-subtle, ".concat(_colors.N300, ")"),
   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) {

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-neutral, ".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-neutral, ".concat((0, _colors.skeleton)(), ")");
 var skeletonStyles = (0, _core.css)({
   display: 'flex',
   minHeight: itemMinHeight,
@@ -113,7 +111,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
       '--width': width
     },
     css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
+    cssFn()],
     "data-testid": testId
   });
 };

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,
@@ -43,7 +43,8 @@ var MenuGroup = function MenuGroup(_ref) {
       maxHeight: maxHeight
     },
     css: groupStyles,
-    "data-testid": testId
+    "data-testid": testId // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

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,11 +25,13 @@ 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"]);
-  return (0, _core.jsx)(_menuGroup.default, (0, _extends2.default)({
-    maxWidth: maxWidth,
-    minWidth: minWidth
-  }, rest));
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _core.jsx)(_menuGroup.default, (0, _extends2.default)({
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    }, rest))
+  );
 };
 
 var _default = PopupMenuGroup;

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, ".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.2",
+	"version": "1.2.6",
 	"sideEffects": false
 }

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

@@ -5,9 +5,9 @@ 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);
+const defaultRender = (Component, props) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(Component, props);
 
 const gridSize = gridSizeFn();
 const fontSize = fontSizeFn();
@@ -50,7 +50,7 @@ const wordBreakStyles = css({
 });
 const descriptionStyles = css({
   marginTop: itemDescriptionSpacing,
-  color: token('color.text.lowEmphasis', N200),
+  color: `var(--ds-text-subtlest, ${N200})`,
   fontSize: headingSizes.h200.size
 });
 const primitiveStyles = css({
@@ -83,11 +83,11 @@ const unselectedStyles = css({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: token('color.background.transparentNeutral.hover', N20),
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20})`,
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: token('color.background.transparentNeutral.pressed', N30),
+    backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`,
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -96,28 +96,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-brand, ${N20})`,
+  // Fallback set as babel plugin inserts one otherwise
+  color: "var(--ds-text-brand, currentColor)",
   ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    color: "var(--ds-text-brand, 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-brand-hovered, ${N20})`,
+    color: "var(--ds-text-brand, 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-brand-pressed, ${N30})`,
+    color: "var(--ds-text-brand, currentColor)"
   }
 });
 /**

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

@@ -4,17 +4,16 @@ import _extends from "@babel/runtime/helpers/extends";
 import { memo } from 'react';
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { N200 } from '@atlaskit/theme/colors';
+import { N300 } 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-subtle, ${N300})`,
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

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-neutral, ${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-neutral, ${skeletonColorFn()})`;
 const skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,
@@ -98,7 +97,7 @@ const SkeletonItem = ({
     '--width': width
   },
   css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-  cssFn(undefined)],
+  cssFn()],
   "data-testid": testId
 });
 

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

@@ -31,7 +31,8 @@ const MenuGroup = ({
     maxHeight
   },
   css: groupStyles,
-  "data-testid": testId
+  "data-testid": testId // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
 }, rest));
 
 export default MenuGroup;

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

@@ -11,7 +11,8 @@ const PopupMenuGroup = ({
   maxWidth = 800,
   minWidth = 320,
   ...rest
-}) => jsx(MenuGroup, _extends({
+}) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(MenuGroup, _extends({
   maxWidth: maxWidth,
   minWidth: minWidth
 }, rest));

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, ${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.2",
+	"version": "1.2.6",
 	"sideEffects": false
 }

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

@@ -5,10 +5,11 @@ 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);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(Component, props)
+  );
 };
 
 var gridSize = gridSizeFn();
@@ -52,7 +53,7 @@ var wordBreakStyles = css({
 });
 var descriptionStyles = css({
   marginTop: itemDescriptionSpacing,
-  color: token('color.text.lowEmphasis', N200),
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
   fontSize: headingSizes.h200.size
 });
 var primitiveStyles = css({
@@ -85,11 +86,11 @@ var unselectedStyles = css({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: token('color.background.transparentNeutral.hover', N20),
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"),
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: token('color.background.transparentNeutral.pressed', N30),
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -98,28 +99,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-brand, ".concat(N20, ")"),
+  // Fallback set as babel plugin inserts one otherwise
+  color: "var(--ds-text-brand, currentColor)",
   ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    color: "var(--ds-text-brand, 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-brand-hovered, ".concat(N20, ")"),
+    color: "var(--ds-text-brand, 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-brand-pressed, ".concat(N30, ")"),
+    color: "var(--ds-text-brand, currentColor)"
   }
 });
 /**

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);
 

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);
 

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

@@ -1,21 +1,21 @@
 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';
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { N200 } from '@atlaskit/theme/colors';
+import { N300 } 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-subtle, ".concat(N300, ")"),
   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);
 

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-neutral, ".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-neutral, ".concat(skeletonColorFn(), ")");
 var skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,
@@ -99,7 +98,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
       '--width': width
     },
     css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
+    cssFn()],
     "data-testid": testId
   });
 };

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: {
@@ -33,7 +34,8 @@ var MenuGroup = function MenuGroup(_ref) {
       maxHeight: maxHeight
     },
     css: groupStyles,
-    "data-testid": testId
+    "data-testid": testId // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

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,12 +14,14 @@ 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,
-    minWidth: minWidth
-  }, rest));
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(MenuGroup, _extends({
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    }, rest))
+  );
 };
 
 export default PopupMenuGroup;

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, ".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.2",
+	"version": "1.2.6",
 	"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__

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

@@ -3,6 +3,9 @@ import { CSSObject } from '@emotion/core';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
 }
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
 export interface TitleOverrides {
     render?: RenderFunction<{
         className?: string;
@@ -10,6 +13,9 @@ export interface TitleOverrides {
         'data-item-title': boolean;
     }>;
 }
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
 export interface Overrides {
     Title?: TitleOverrides;
 }
@@ -78,6 +84,9 @@ export interface SectionProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
     overrides?: {
         HeadingItem?: {
             /**
@@ -102,6 +111,9 @@ export interface MenuItemPrimitiveProps {
     description: React.ReactNode | undefined;
     iconAfter: React.ReactNode | undefined;
     iconBefore: React.ReactNode | undefined;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
     overrides: Overrides | undefined;
     shouldTitleWrap: boolean | undefined;
     shouldDescriptionWrap: boolean | undefined;
@@ -113,6 +125,8 @@ export interface MenuItemProps {
     /**
      * A function that can be used to override the styles of the component.
      * It receives the current styles and state and expects a styles object.
+     *
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
      */
     cssFn?: CSSFn;
     /**
@@ -158,6 +172,8 @@ export interface MenuItemProps {
     testId?: string;
     /**
      * Custom overrides for the composed components.
+     *
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
      */
     overrides?: Overrides;
     /**
@@ -294,6 +310,8 @@ export interface HeadingItemProps {
     /**
      * A function that can be used to override the styles.
      * It receives the current styles and returns a customised styles object.
+     *
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
      */
     cssFn?: StatelessCSSFn;
     /**
@@ -333,6 +351,8 @@ export interface SkeletonHeadingItemProps {
     /**
      * A function that can be used to override the styles of this component.
      * 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;
 }
@@ -346,8 +366,12 @@ export declare type ItemState = {
  * and should return a CSSObject.
  *
  * @see @atlaskit/menu/docs/85-overriding-item-styles
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
  */
-export interface CSSFn<TState = ItemState> {
+export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
     (currentState: TState): CSSObject | CSSObject[];
 }
-export declare type StatelessCSSFn = CSSFn<undefined>;
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export declare type StatelessCSSFn = CSSFn<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.2.2",
+  "version": "1.2.6",
   "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"
@@ -36,10 +35,10 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.2.0",
-    "@atlaskit/focus-ring": "^0.2.4",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/focus-ring": "^1.0.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.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"