@atlaskit/menu 1.11.0 → 2.0.0

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

@@ -59,9 +59,9 @@ var wordBreakStyles = (0, _react2.css)({
   wordBreak: 'break-word'
 });
 var descriptionStyles = (0, _react2.css)({
-  marginTop: "var(--ds-space-050, 4px)",
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)"
+  fontSize: "var(--ds-font-size-075, 12px)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
 });
 var disabledDescriptionStyles = (0, _react2.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
@@ -131,23 +131,23 @@ var selectedBorderStyles = (0, _react2.css)({
   '&::before': {
     width: 2,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""'
+    content: '""',
+    insetBlockEnd: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0
   }
 });
 var selectedNotchStyles = (0, _react2.css)({
   '&::before': {
     width: 4,
     position: 'absolute',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)",
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""'
+    content: '""',
+    insetBlockEnd: "var(--ds-space-150, 12px)",
+    insetBlockStart: "var(--ds-space-150, 12px)",
+    insetInlineStart: 0
   }
 });
 var selectedStyles = (0, _react2.css)({
@@ -201,7 +201,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var spacing = (0, _react.useContext)(_menuContext.SpacingContext);
@@ -214,7 +214,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return (0, _react2.jsx)(_focusRing.default, {
       isInset: true
     }, children({
-      className: cx([cn([(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: (0, _react2.jsx)(_inline.default, {
         as: "span",
         spread: "space-between",
@@ -240,5 +240,4 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     }));
   });
 };
-var _default = MenuItemPrimitive;
-exports.default = _default;
+var _default = exports.default = MenuItemPrimitive;

package/dist/cjs/internal/components/skeleton-shimmer.js

@@ -64,5 +64,4 @@ var SkeletonShimmer = function SkeletonShimmer(_ref) {
     });
   });
 };
-var _default = SkeletonShimmer;
-exports.default = _default;
+var _default = exports.default = SkeletonShimmer;

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

@@ -48,7 +48,7 @@ function (props, ref) {
   if (!children) {
     return null;
   }
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({
@@ -85,5 +85,4 @@ function (props, ref) {
     }), children);
   });
 }));
-var _default = ButtonItem;
-exports.default = _default;
+var _default = exports.default = ButtonItem;

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

@@ -53,7 +53,7 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
   if (!Component) {
     return null;
   }
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({
@@ -94,5 +94,4 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
 })
 // Dirty hack to get generics working with forward ref [2/2]
 );
-var _default = CustomItem;
-exports.default = _default;
+var _default = exports.default = CustomItem;

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

@@ -44,7 +44,7 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn,
     UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var UNSAFE_overrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : (0, _react2.css)(cssFn(undefined));
@@ -58,5 +58,4 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest), children);
 });
-var _default = HeadingItem;
-exports.default = _default;
+var _default = exports.default = HeadingItem;

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

@@ -53,7 +53,7 @@ function (props, ref) {
   if (!children) {
     return null;
   }
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
@@ -93,5 +93,4 @@ function (props, ref) {
     }), children);
   });
 }));
-var _default = LinkItem;
-exports.default = _default;
+var _default = exports.default = LinkItem;

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

@@ -51,7 +51,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
     width = _ref.width,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var UNSAFE_overrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : (0, _react.css)(cssFn(undefined));
@@ -72,5 +72,4 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
     });
   });
 };
-var _default = SkeletonHeadingItem;
-exports.default = _default;
+var _default = exports.default = SkeletonHeadingItem;

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

@@ -32,14 +32,13 @@ var skeletonStyles = (0, _react.css)({
   pointerEvents: 'none',
   '::after': {
     height: skeletonContentHeight,
+    backgroundColor: skeletonColor,
+    borderRadius: skeletonTextBorderRadius,
+    content: '""',
     // This is a little bespoke but we need to push everything down 1px
     // because the skeleton content should align to the bottom of the text.
     // Confirm VR test failures before accepting a change.
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginTop: 1,
-    backgroundColor: skeletonColor,
-    borderRadius: skeletonTextBorderRadius,
-    content: '""'
+    marginBlockStart: 1
   }
 });
 var defaultWidthStyles = (0, _react.css)({
@@ -71,13 +70,11 @@ var beforeElementStyles = (0, _react.css)({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginRight: itemElemSpacing + itemElemSkeletonOffset,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginLeft: itemElemSkeletonOffset,
     flexShrink: 0,
     backgroundColor: skeletonColor,
-    content: '""'
+    content: '""',
+    marginInlineEnd: itemElemSpacing + itemElemSkeletonOffset,
+    marginInlineStart: "var(--ds-space-025, 2px)"
   }
 });
 var avatarStyles = (0, _react.css)({
@@ -108,7 +105,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
     width = _ref.width,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var UNSAFE_overrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : (0, _react.css)(cssFn());
@@ -128,5 +125,4 @@ var SkeletonItem = function SkeletonItem(_ref) {
     });
   });
 };
-var _default = SkeletonItem;
-exports.default = _default;
+var _default = exports.default = SkeletonItem;

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

@@ -58,5 +58,4 @@ var MenuGroup = function MenuGroup(_ref) {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));
 };
-var _default = MenuGroup;
-exports.default = _default;
+var _default = exports.default = MenuGroup;

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

@@ -28,5 +28,4 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
     }, rest))
   );
 };
-var _default = PopupMenuGroup;
-exports.default = _default;
+var _default = exports.default = PopupMenuGroup;

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

@@ -41,18 +41,18 @@ var sectionStyles = (0, _react2.css)({
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& [data-ds--menu--heading-item]': {
-    marginTop: itemHeadingTopMargin,
-    marginBottom: itemHeadingBottomMargin,
+    marginBlockEnd: itemHeadingBottomMargin,
+    marginBlockStart: itemHeadingTopMargin,
     '&:first-of-type': {
-      marginTop: itemHeadingTopMargin - sectionPaddingTopBottom
+      marginBlockStart: itemHeadingTopMargin - sectionPaddingTopBottom
     }
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& [data-ds--menu--skeleton-heading-item]': {
-    marginTop: skeletonHeadingTopMargin,
-    marginBottom: skeletonHeadingBottomMargin,
+    marginBlockEnd: skeletonHeadingBottomMargin,
+    marginBlockStart: skeletonHeadingTopMargin,
     '&:first-of-type': {
-      marginTop: skeletonHeadingTopMargin - sectionPaddingTopBottom
+      marginBlockStart: skeletonHeadingTopMargin - sectionPaddingTopBottom
     }
   },
   '&:focus': {
@@ -71,13 +71,13 @@ var unscrollableStyles = (0, _react2.css)({
   flexShrink: 0
 });
 var separatorStyles = (0, _react2.css)({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
+  borderBlockStart: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
 });
 var noSeparatorStyles = (0, _react2.css)({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '[data-section] + &': {
-    marginTop: -6
+    marginBlockStart: -6
   }
 });
 
@@ -101,7 +101,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     isList = _ref$isList === void 0 ? false : _ref$isList,
     UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var UNSAFE_headingOverrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
@@ -141,5 +141,4 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: ref
   }), childrenMarkup);
 });
-var _default = Section;
-exports.default = _default;
+var _default = exports.default = Section;

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

@@ -48,9 +48,9 @@ const wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 const descriptionStyles = css({
-  marginTop: "var(--ds-space-050, 4px)",
   color: `var(--ds-text-subtlest, ${N200})`,
-  fontSize: "var(--ds-font-size-075, 12px)"
+  fontSize: "var(--ds-font-size-075, 12px)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
 });
 const disabledDescriptionStyles = css({
   color: `var(--ds-text-disabled, ${N200})`
@@ -120,23 +120,23 @@ const selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""'
+    content: '""',
+    insetBlockEnd: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0
   }
 });
 const selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)",
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: `0 ${"var(--ds-border-radius, 4px)"} ${"var(--ds-border-radius, 4px)"} 0`,
-    content: '""'
+    content: '""',
+    insetBlockEnd: "var(--ds-space-150, 12px)",
+    insetBlockStart: "var(--ds-space-150, 12px)",
+    insetInlineStart: 0
   }
 });
 const selectedStyles = css({
@@ -187,7 +187,7 @@ const MenuItemPrimitive = ({
   isDisabled = false,
   isSelected = false
 }) => {
-  propDeprecationWarning("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   const spacing = useContext(SpacingContext);
@@ -201,7 +201,7 @@ const MenuItemPrimitive = ({
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",

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

@@ -42,7 +42,7 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   if (!children) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   return jsx(MenuItemPrimitive, _extends({

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

@@ -47,7 +47,7 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!Component) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   return jsx(MenuItemPrimitive, _extends({

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

@@ -39,7 +39,7 @@ const HeadingItem = /*#__PURE__*/memo(({
   className: UNSAFE_className,
   ...rest
 }) => {
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   const UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));

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

@@ -47,7 +47,7 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   if (!children) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   return jsx(MenuItemPrimitive, _extends({}, rest, {

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

@@ -43,7 +43,7 @@ const SkeletonHeadingItem = ({
   width,
   cssFn = noop
 }) => {
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   const UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));

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

@@ -27,14 +27,13 @@ const skeletonStyles = css({
   pointerEvents: 'none',
   '::after': {
     height: skeletonContentHeight,
+    backgroundColor: skeletonColor,
+    borderRadius: skeletonTextBorderRadius,
+    content: '""',
     // This is a little bespoke but we need to push everything down 1px
     // because the skeleton content should align to the bottom of the text.
     // Confirm VR test failures before accepting a change.
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginTop: 1,
-    backgroundColor: skeletonColor,
-    borderRadius: skeletonTextBorderRadius,
-    content: '""'
+    marginBlockStart: 1
   }
 });
 const defaultWidthStyles = css({
@@ -66,13 +65,11 @@ const beforeElementStyles = css({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginRight: itemElemSpacing + itemElemSkeletonOffset,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginLeft: itemElemSkeletonOffset,
     flexShrink: 0,
     backgroundColor: skeletonColor,
-    content: '""'
+    content: '""',
+    marginInlineEnd: itemElemSpacing + itemElemSkeletonOffset,
+    marginInlineStart: "var(--ds-space-025, 2px)"
   }
 });
 const avatarStyles = css({
@@ -102,7 +99,7 @@ const SkeletonItem = ({
   width,
   cssFn = noop
 }) => {
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   const UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn());

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

@@ -32,18 +32,18 @@ const sectionStyles = css({
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& [data-ds--menu--heading-item]': {
-    marginTop: itemHeadingTopMargin,
-    marginBottom: itemHeadingBottomMargin,
+    marginBlockEnd: itemHeadingBottomMargin,
+    marginBlockStart: itemHeadingTopMargin,
     '&:first-of-type': {
-      marginTop: itemHeadingTopMargin - sectionPaddingTopBottom
+      marginBlockStart: itemHeadingTopMargin - sectionPaddingTopBottom
     }
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& [data-ds--menu--skeleton-heading-item]': {
-    marginTop: skeletonHeadingTopMargin,
-    marginBottom: skeletonHeadingBottomMargin,
+    marginBlockEnd: skeletonHeadingBottomMargin,
+    marginBlockStart: skeletonHeadingTopMargin,
     '&:first-of-type': {
-      marginTop: skeletonHeadingTopMargin - sectionPaddingTopBottom
+      marginBlockStart: skeletonHeadingTopMargin - sectionPaddingTopBottom
     }
   },
   '&:focus': {
@@ -62,13 +62,13 @@ const unscrollableStyles = css({
   flexShrink: 0
 });
 const separatorStyles = css({
-  borderTop: `2px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
+  borderBlockStart: `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.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '[data-section] + &': {
-    marginTop: -6
+    marginBlockStart: -6
   }
 });
 
@@ -96,7 +96,7 @@ const Section = /*#__PURE__*/forwardRef(({
   className: UNSAFE_className,
   ...rest
 }, ref) => {
-  propDeprecationWarning("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   const UNSAFE_headingOverrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;

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

@@ -51,9 +51,9 @@ var wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 var descriptionStyles = css({
-  marginTop: "var(--ds-space-050, 4px)",
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)"
+  fontSize: "var(--ds-font-size-075, 12px)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
 });
 var disabledDescriptionStyles = css({
   color: "var(--ds-text-disabled, ".concat(N200, ")")
@@ -123,23 +123,23 @@ var selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""'
+    content: '""',
+    insetBlockEnd: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0
   }
 });
 var selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)",
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""'
+    content: '""',
+    insetBlockEnd: "var(--ds-space-150, 12px)",
+    insetBlockStart: "var(--ds-space-150, 12px)",
+    insetInlineStart: 0
   }
 });
 var selectedStyles = css({
@@ -193,7 +193,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
-  propDeprecationWarning("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var spacing = useContext(SpacingContext);
@@ -206,7 +206,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",

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

@@ -41,7 +41,7 @@ function (props, ref) {
   if (!children) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   return jsx(MenuItemPrimitive, _extends({

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

@@ -47,7 +47,7 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
   if (!Component) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   return jsx(MenuItemPrimitive, _extends({

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

@@ -37,7 +37,7 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
     cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn,
     UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));

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

@@ -46,7 +46,7 @@ function (props, ref) {
   if (!children) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   return jsx(MenuItemPrimitive, _extends({}, rest, {

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

@@ -44,7 +44,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
     width = _ref.width,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn;
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));