@atlaskit/menu 1.1.3 → 1.2.2

package/dist/cjs/internal/styles/menu-item/base-item.js

@@ -1,152 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.contentCSSWrapper = exports.descriptionCSS = exports.wrapDescriptionCSS = exports.elemAfterCSS = exports.elemBeforeCSS = exports.wrapTextCSS = exports.truncateCSS = exports.contentCSS = exports.baseItemCSS = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _typography = require("@atlaskit/theme/typography");
-
-var _tokens = require("@atlaskit/tokens");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var gridSize = (0, _constants.gridSize)();
-var fontSize = (0, _constants.fontSize)();
-var itemTopBottomPadding = gridSize;
-var itemSidePadding = gridSize * 2.5;
-var itemElemSpacing = gridSize * 1.5;
-var itemDescriptionSpacing = gridSize * 0.375;
-var itemMinHeight = gridSize * 5;
-var itemContentMinHeight = itemMinHeight - itemTopBottomPadding * 2;
-var disabledStyles = {
-  cursor: 'not-allowed',
-  '&, &:hover, &:focus, &:active': {
-    backgroundColor: 'transparent',
-    color: (0, _tokens.token)('color.text.disabled', _colors.N200)
-  },
-  '&:focus': {
-    boxShadow: 'none'
-  }
-};
-var selectedStyles = {
-  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'),
-  ':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')
-  },
-  ':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')
-  },
-  ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: (0, _tokens.token)('color.text.selected')
-  }
-};
-
-var baseItemCSS = function baseItemCSS(isDisabled, isSelected) {
-  return _objectSpread(_objectSpread({
-    padding: "".concat(itemTopBottomPadding, "px ").concat(itemSidePadding, "px"),
-    cursor: 'pointer',
-    fontSize: fontSize,
-    // IE11 fix - wrapping container needs to be flex as well for vertical centering to work.
-    display: 'flex',
-    boxSizing: 'border-box',
-    color: 'currentColor',
-    userSelect: 'none',
-    '&:visited': {
-      color: 'currentColor'
-    },
-    '&:hover': {
-      color: 'currentColor',
-      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20),
-      textDecoration: 'none'
-    },
-    '&:focus': {
-      outline: 'none',
-      boxShadow: "".concat((0, _tokens.token)('color.border.focus', _colors.B100), " 0 0 0 2px inset")
-    },
-    '&:active': {
-      boxShadow: 'none',
-      color: 'currentColor',
-      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.N30)
-    },
-    '::-moz-focus-inner': {
-      border: 0
-    }
-  }, isSelected && selectedStyles), isDisabled && disabledStyles);
-};
-
-exports.baseItemCSS = baseItemCSS;
-var contentCSS = {
-  flexGrow: 1,
-  textAlign: 'left',
-  overflow: 'hidden',
-  outline: 'none',
-  display: 'flex',
-  flexDirection: 'column',
-  // Fix - avoid clipped text descenders when using standard 16px line-height
-  lineHeight: 1.22
-};
-exports.contentCSS = contentCSS;
-var truncateCSS = {
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-};
-exports.truncateCSS = truncateCSS;
-var wrapTextCSS = {
-  wordBreak: 'break-word'
-};
-exports.wrapTextCSS = wrapTextCSS;
-var elemBeforeCSS = {
-  display: 'flex',
-  flexShrink: 0,
-  marginRight: itemElemSpacing
-};
-exports.elemBeforeCSS = elemBeforeCSS;
-var elemAfterCSS = {
-  display: 'flex',
-  flexShrink: 0,
-  marginLeft: itemElemSpacing
-};
-exports.elemAfterCSS = elemAfterCSS;
-var descriptionBaseCSS = {
-  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
-  marginTop: itemDescriptionSpacing,
-  fontSize: _typography.headingSizes.h200.size
-};
-
-var wrapDescriptionCSS = _objectSpread(_objectSpread({}, wrapTextCSS), descriptionBaseCSS);
-
-exports.wrapDescriptionCSS = wrapDescriptionCSS;
-
-var descriptionCSS = _objectSpread(_objectSpread({}, truncateCSS), descriptionBaseCSS);
-
-exports.descriptionCSS = descriptionCSS;
-var contentCSSWrapper = {
-  display: 'flex',
-  minHeight: itemContentMinHeight,
-  alignItems: 'center',
-  // IE11 fix - used with flex above to fix vertical centering.
-  width: '100%'
-};
-exports.contentCSSWrapper = contentCSSWrapper;

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

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.buttonItemCSS = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _baseItem = require("./base-item");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var buttonItemCSS = function buttonItemCSS(isDisabled, isSelected) {
-  return _objectSpread({
-    backgroundColor: 'transparent',
-    border: 0,
-    outline: 0,
-    margin: 0,
-    width: '100%'
-  }, (0, _baseItem.baseItemCSS)(isDisabled, isSelected));
-};
-
-exports.buttonItemCSS = buttonItemCSS;

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

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.customItemCSS = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _baseItem = require("./base-item");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var customItemCSS = function customItemCSS(isDisabled, isSelected) {
-  return _objectSpread({
-    color: 'currentColor'
-  }, (0, _baseItem.baseItemCSS)(isDisabled, isSelected));
-};
-
-exports.customItemCSS = customItemCSS;

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

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.headingItemCSS = void 0;
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _typography = require("@atlaskit/theme/typography");
-
-var _tokens = require("@atlaskit/tokens");
-
-var gridSize = (0, _constants.gridSize)();
-var itemSidePadding = gridSize * 2.5;
-var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
-var itemHeadingFontSize = _typography.headingSizes.h100.size;
-var headingItemCSS = {
-  textTransform: 'uppercase',
-  fontSize: itemHeadingFontSize,
-  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
-  fontWeight: 700,
-  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
-  padding: "0 ".concat(itemSidePadding, "px")
-};
-exports.headingItemCSS = headingItemCSS;

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

@@ -1,22 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.linkItemCSS = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _baseItem = require("./base-item");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var linkItemCSS = function linkItemCSS(isDisabled, isSelected) {
-  return _objectSpread({}, (0, _baseItem.baseItemCSS)(isDisabled, isSelected));
-};
-
-exports.linkItemCSS = linkItemCSS;

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

@@ -1,50 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.skeletonHeadingItemCSS = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _core = require("@emotion/core");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _tokens = require("@atlaskit/tokens");
-
-var _headingItem = require("./heading-item");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var gridSize = (0, _constants.gridSize)();
-var skeletonTextBorderRadius = 100;
-var skeletonHeadingHeight = gridSize;
-var skeletonColor = (0, _tokens.token)('color.background.subtleNeutral.resting', (0, _colors.skeleton)());
-var shimmer = (0, _constants.skeletonShimmer)();
-var shimmerKeyframes = (0, _core.keyframes)(shimmer.keyframes);
-
-var skeletonHeadingItemCSS = function skeletonHeadingItemCSS(width, isShimmering) {
-  return _objectSpread(_objectSpread({}, _headingItem.headingItemCSS), {}, {
-    '&::after': _objectSpread(_objectSpread({
-      // This renders the skeleton heading "text".
-      backgroundColor: skeletonColor
-    }, isShimmering && _objectSpread(_objectSpread({}, shimmer.css), {}, {
-      animationName: "".concat(shimmerKeyframes)
-    })), {}, {
-      height: skeletonHeadingHeight,
-      width: width || '30%',
-      borderRadius: skeletonTextBorderRadius,
-      display: 'block',
-      content: '""'
-    })
-  });
-};
-
-exports.skeletonHeadingItemCSS = skeletonHeadingItemCSS;

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

@@ -1,98 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.skeletonItemCSS = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _core = require("@emotion/core");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _tokens = require("@atlaskit/tokens");
-
-var _baseItem = require("./base-item");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var gridSize = (0, _constants.gridSize)();
-var borderRadius = (0, _constants.borderRadius)();
-var itemElemSpacing = gridSize * 1.5;
-var itemExpectedElemSize = gridSize * 3;
-var itemMinHeight = gridSize * 5;
-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 shimmer = (0, _constants.skeletonShimmer)();
-var shimmerKeyframes = (0, _core.keyframes)(shimmer.keyframes);
-
-var skeletonItemCSS = function skeletonItemCSS(hasAvatar, hasIcon, width, isShimmering) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _baseItem.baseItemCSS)(false, false)), {}, {
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    minHeight: itemMinHeight
-  }, !width && {
-    '&:nth-child(1n)::after': {
-      flexBasis: '70%'
-    },
-    '&:nth-child(2n)::after': {
-      flexBasis: '50%'
-    },
-    '&:nth-child(3n)::after': {
-      flexBasis: '60%'
-    },
-    '&:nth-child(4n)::after': {
-      flexBasis: '90%'
-    },
-    '&:nth-child(5n)::after': {
-      flexBasis: '35%'
-    },
-    '&:nth-child(6n)::after': {
-      flexBasis: '77%'
-    }
-  }), (hasAvatar || hasIcon) && {
-    '&::before': _objectSpread(_objectSpread({
-      // This will render a skeleton in the "elemBefore" position.
-      content: '""',
-      backgroundColor: skeletonColor
-    }, isShimmering && _objectSpread(_objectSpread({}, shimmer.css), {}, {
-      animationName: "".concat(shimmerKeyframes)
-    })), {}, {
-      marginRight: itemElemSpacing + itemElemSkeletonOffset,
-      width: skeletonItemElemSize,
-      height: skeletonItemElemSize,
-      marginLeft: itemElemSkeletonOffset,
-      borderRadius: hasAvatar ? '100%' : borderRadius,
-      flexShrink: 0
-    })
-  }), {}, {
-    '&::after': _objectSpread(_objectSpread({
-      // This will render the skeleton "text".
-      content: '""',
-      backgroundColor: skeletonColor
-    }, isShimmering && _objectSpread(_objectSpread({}, shimmer.css), {}, {
-      animationName: "".concat(shimmerKeyframes)
-    })), {}, {
-      // 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.
-      marginTop: 1,
-      height: skeletonContentHeight,
-      borderRadius: skeletonTextBorderRadius,
-      flexBasis: width || '100%'
-    })
-  });
-};
-
-exports.skeletonItemCSS = skeletonItemCSS;

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

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.menuGroupCSS = void 0;
-
-var menuGroupCSS = function menuGroupCSS(_ref) {
-  var minWidth = _ref.minWidth,
-      maxWidth = _ref.maxWidth,
-      minHeight = _ref.minHeight,
-      maxHeight = _ref.maxHeight;
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'auto',
-    maxWidth: maxWidth,
-    minWidth: minWidth,
-    maxHeight: maxHeight,
-    minHeight: minHeight
-  };
-};
-
-exports.menuGroupCSS = menuGroupCSS;

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

@@ -1,83 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sectionCSS = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _typography = require("@atlaskit/theme/typography");
-
-var _tokens = require("@atlaskit/tokens");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var gridSize = (0, _constants.gridSize)();
-var itemHeadingTopMargin = gridSize * 2.5;
-var itemHeadingBottomMargin = gridSize * 0.75; // Skeleton content is slightly shorter than the real content.
-// Because of that we slightly increase the top margin to offset this so the
-// containing size both real and skeleton always equal approx 30px.
-
-var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
-var skeletonHeadingHeight = gridSize;
-var skeletonHeadingMarginOffset = 3;
-var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
-
-var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
-var sectionPaddingTopBottom = gridSize * 0.75;
-var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
-
-var sectionCSS = function sectionCSS(isScrollable, hasSeparator) {
-  return _objectSpread(_objectSpread(_objectSpread({
-    '&:before, &:after': {
-      content: '" "',
-      display: 'block',
-      height: sectionPaddingTopBottom
-    },
-    '& [data-ds--menu--heading-item]': {
-      '&:first-of-type': {
-        marginTop: itemHeadingTopMargin - sectionPaddingTopBottom
-      },
-      marginTop: itemHeadingTopMargin,
-      marginBottom: itemHeadingBottomMargin
-    },
-    '& [data-ds--menu--skeleton-heading-item]': {
-      '&:first-of-type': {
-        marginTop: skeletonHeadingTopMargin - sectionPaddingTopBottom
-      },
-      marginTop: skeletonHeadingTopMargin,
-      marginBottom: skeletonHeadingBottomMargin
-    }
-  }, isScrollable ? {
-    flexShrink: 1,
-    overflow: 'auto'
-  } : {
-    flexShrink: 0
-  }), hasSeparator ? {
-    borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30A), ")")
-  } : {
-    // this is to ensure that adjacent sections without separators don't get additional margins.
-    '[data-section] + &': {
-      marginTop: -6
-    }
-  }), {}, {
-    '&:focus': {
-      // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
-      // We have made a deliberate choice to leave this behaviour as is.
-      // This makes the outline go inside by 1px so it can actually be displayed
-      // else it gets cut off from the overflow: scroll from the parent menu group.
-      outlineOffset: -1
-    }
-  });
-};
-
-exports.sectionCSS = sectionCSS;

package/dist/es2019/internal/components/base-item.js

@@ -1,51 +0,0 @@
-/** @jsx jsx */
-import { memo } from 'react';
-import { ClassNames, jsx } from '@emotion/core';
-import { contentCSS, contentCSSWrapper, descriptionCSS, elemAfterCSS, elemBeforeCSS, truncateCSS, wrapDescriptionCSS, wrapTextCSS } from '../styles/menu-item/base-item';
-
-const defaultRender = (Component, props) => jsx(Component, props);
-/**
- * __Base item__
- *
- * A base item should be composed for all item experiences.
- */
-
-
-const BaseItem = /*#__PURE__*/memo(({
-  children,
-  description,
-  iconAfter,
-  iconBefore,
-  overrides,
-  shouldTitleWrap = false,
-  shouldDescriptionWrap = false
-}) => {
-  const renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("div", {
-      css: contentCSSWrapper
-    }, iconBefore && // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("span", {
-      "data-item-elem-before": true,
-      css: elemBeforeCSS
-    }, iconBefore), children && // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("span", {
-      css: contentCSS
-    }, jsx(ClassNames, null, ({
-      css
-    }) => renderTitle('span', {
-      children,
-      className: css(shouldTitleWrap ? wrapTextCSS : truncateCSS),
-      'data-item-title': true
-    })), description && jsx("span", {
-      "data-item-description": true,
-      css: // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      shouldDescriptionWrap ? wrapDescriptionCSS : descriptionCSS
-    }, description)), iconAfter && // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("span", {
-      "data-item-elem-after": true,
-      css: elemAfterCSS
-    }, iconAfter))
-  );
-});
-export default BaseItem;