@atlaskit/menu 1.1.2 → 1.2.1

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

@@ -1,8 +1,83 @@
 /** @jsx jsx */
-import { memo } from 'react';
-import { jsx } from '@emotion/core';
-import { skeletonItemCSS } from '../internal/styles/menu-item/skeleton-item';
-
+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;
+var itemExpectedElemSize = gridSize * 3;
+var itemMinHeight = gridSize * 5;
+var itemPadding = gridSize * 2.5;
+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 skeletonStyles = css({
+  display: 'flex',
+  minHeight: itemMinHeight,
+  padding: "0 ".concat(itemPadding, "px"),
+  alignItems: 'center',
+  pointerEvents: 'none',
+  '::after': {
+    height: skeletonContentHeight,
+    // 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,
+    backgroundColor: skeletonColor,
+    borderRadius: skeletonTextBorderRadius,
+    content: '""'
+  }
+});
+var defaultWidthStyles = css({
+  ':nth-of-type(1n)::after': {
+    flexBasis: '70%'
+  },
+  ':nth-of-type(2n)::after': {
+    flexBasis: '50%'
+  },
+  ':nth-of-type(3n)::after': {
+    flexBasis: '60%'
+  },
+  ':nth-of-type(4n)::after': {
+    flexBasis: '90%'
+  },
+  ':nth-of-type(5n)::after': {
+    flexBasis: '35%'
+  },
+  ':nth-of-type(6n)::after': {
+    flexBasis: '77%'
+  }
+});
+var customWidthStyles = css({
+  '::after': {
+    flexBasis: 'var(--width)'
+  }
+});
+var beforeElementStyles = css({
+  '::before': {
+    width: skeletonItemElemSize,
+    height: skeletonItemElemSize,
+    marginRight: itemElemSpacing + itemElemSkeletonOffset,
+    marginLeft: itemElemSkeletonOffset,
+    flexShrink: 0,
+    backgroundColor: skeletonColor,
+    content: '""'
+  }
+});
+var avatarStyles = css({
+  '::before': {
+    borderRadius: '100%'
+  }
+});
+var iconStyles = css({
+  '::before': {
+    borderRadius: borderRadius
+  }
+});
 /**
  * __Skeleton item__
  *
@@ -11,21 +86,22 @@ import { skeletonItemCSS } from '../internal/styles/menu-item/skeleton-item';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var SkeletonItem = /*#__PURE__*/memo(function (_ref) {
+
+var SkeletonItem = function SkeletonItem(_ref) {
   var hasAvatar = _ref.hasAvatar,
       hasIcon = _ref.hasIcon,
-      width = _ref.width,
       testId = _ref.testId,
-      isShimmering = _ref.isShimmering,
+      width = _ref.width,
       _ref$cssFn = _ref.cssFn,
-      cssFn = _ref$cssFn === void 0 ? function () {
-    return {};
-  } : _ref$cssFn;
+      cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn;
   return jsx("div", {
-    css: [// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    skeletonItemCSS(hasAvatar, hasIcon, width, isShimmering), // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    style: {
+      '--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)],
     "data-testid": testId
   });
-});
+};
+
 export default SkeletonItem;

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

@@ -2,9 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { menuGroupCSS } from '../internal/styles/menu-section/menu-group';
-
+import { css, jsx } from '@emotion/core';
+var groupStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto'
+});
 /**
  * __Menu group__
  *
@@ -13,6 +16,7 @@ import { menuGroupCSS } from '../internal/styles/menu-section/menu-group';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
+
 var MenuGroup = function MenuGroup(_ref) {
   var maxWidth = _ref.maxWidth,
       minWidth = _ref.minWidth,
@@ -22,13 +26,13 @@ var MenuGroup = function MenuGroup(_ref) {
       rest = _objectWithoutProperties(_ref, ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId"]);
 
   return jsx("div", _extends({
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: menuGroupCSS({
-      maxHeight: maxHeight,
+    style: {
+      minWidth: minWidth,
       maxWidth: maxWidth,
       minHeight: minHeight,
-      minWidth: minWidth
-    }),
+      maxHeight: maxHeight
+    },
+    css: groupStyles,
     "data-testid": testId
   }, rest));
 };

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

@@ -2,11 +2,74 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 /** @jsx jsx */
-import { forwardRef } from 'react';
-import { jsx } from '@emotion/core';
-import { sectionCSS } from '../internal/styles/menu-section/section';
+import { forwardRef, Fragment } from 'react';
+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;
+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 = 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 sectionStyles = css({
+  '&::before, &::after': {
+    display: 'block',
+    height: sectionPaddingTopBottom,
+    content: '""'
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& [data-ds--menu--heading-item]': {
+    marginTop: itemHeadingTopMargin,
+    marginBottom: itemHeadingBottomMargin,
+    '&:first-of-type': {
+      marginTop: itemHeadingTopMargin - sectionPaddingTopBottom
+    }
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& [data-ds--menu--skeleton-heading-item]': {
+    marginTop: skeletonHeadingTopMargin,
+    marginBottom: skeletonHeadingBottomMargin,
+    '&:first-of-type': {
+      marginTop: skeletonHeadingTopMargin - sectionPaddingTopBottom
+    }
+  },
+  '&:focus': {
+    // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
+    // We have made a deliberate choice to leave this behaviour as is.
+    // This makes the outline go inside by 1px so it can actually be displayed
+    // else it gets cut off from the overflow: scroll from the parent menu group.
+    outlineOffset: -1
+  }
+});
+var scrollableStyles = css({
+  flexShrink: 1,
+  overflow: 'auto'
+});
+var unscrollableStyles = css({
+  flexShrink: 0
+});
+var separatorStyles = css({
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30A), ")")
+});
+var noSeparatorStyles = css({
+  // this is to ensure that adjacent sections without separators don't get additional margins.
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '[data-section] + &': {
+    marginTop: -6
+  }
+});
 /**
  * __Section__
  *
@@ -15,46 +78,33 @@ import HeadingItem from '../menu-item/heading-item';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var Section = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
-function (_ref, ref) {
+
+var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       overrides = _ref.overrides,
       title = _ref.title,
       testId = _ref.testId,
-      rest = _objectWithoutProperties(_ref, ["children", "overrides", "title", "testId"]);
+      isScrollable = _ref.isScrollable,
+      hasSeparator = _ref.hasSeparator,
+      id = _ref.id,
+      rest = _objectWithoutProperties(_ref, ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"]);
 
-  return title !== undefined ? jsx(SectionBase, _extends({}, rest, {
-    testId: testId,
-    ref: ref,
-    "aria-label": title
-  }), jsx(HeadingItem // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+  var childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
     cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
-  }, title), children) : jsx(SectionBase, _extends({}, rest, {
-    ref: ref
-  }), children);
-});
-var SectionBase = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
-function (_ref2, ref) {
-  var isScrollable = _ref2.isScrollable,
-      hasSeparator = _ref2.hasSeparator,
-      testId = _ref2.testId,
-      rest = _objectWithoutProperties(_ref2, ["isScrollable", "hasSeparator", "testId"]);
-
-  return jsx("div", _extends({
-    // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
+  }, title), children) : children;
+  return jsx("div", _extends({}, rest, {
+    id: id // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: sectionCSS(isScrollable, hasSeparator),
-    "data-testid": testId,
-    role: "group" // this is being used to target CSS selectors
-    // where emotion's API was falling a little short.
     ,
-    "data-section": true
-  }, rest, {
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    "aria-label": title,
+    "data-testid": testId,
+    role: "group",
+    "data-section": true,
     ref: ref
-  }));
+  }), childrenMarkup);
 });
 export default Section;

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -7,4 +7,4 @@ export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-ite
 export { default as Section } from './menu-section/section';
 export { default as MenuGroup } from './menu-section/menu-group';
 export { default as PopupMenuGroup } from './menu-section/popup-menu-group';
-export type { ButtonItemProps, CSSFn, StatelessCSSFn, CustomItemComponentProps, CustomItemProps, HeadingItemProps, ItemState, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, BaseItemProps, Overrides, MenuGroupSizing, RenderFunction, SectionBaseProps, TitleOverrides, } from './types';
+export type { ButtonItemProps, CSSFn, StatelessCSSFn, CustomItemComponentProps, CustomItemProps, HeadingItemProps, ItemState, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, MenuItemProps as BaseItemProps, Overrides, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, TitleOverrides, } from './types';

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

@@ -0,0 +1,17 @@
+import type { MenuItemPrimitiveProps } from '../../types';
+/**
+ * __Menu item primitive__
+ *
+ * Menu item primitive contains all the styles for menu items,
+ * including support for selected, disabled, and interaction states.
+ *
+ * Using children as function prop you wire up this to your own host element.
+ *
+ * ```jsx
+ * <MenuItemPrimitive>
+ *   {({ children, ...props }) => <button {...props}>{children}</button>}
+ * </MenuItemPrimitive>
+ * ```
+ */
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, testId, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => JSX.Element;
+export default MenuItemPrimitive;

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

@@ -3,7 +3,7 @@ import type { ButtonItemProps } from '../types';
 /**
  * __Button item__
  *
- * A button item is used to populate a menu with items that need to be a button element.
+ * A button item is used to populate a menu with items that are buttons.
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)

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

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import type { CustomItemComponentProps, CustomItemProps } from '../types';
 interface CustomItemTypeGenericHackProps {
     <TComponentProps>(props: CustomItemProps<TComponentProps> & {
@@ -7,7 +8,7 @@ interface CustomItemTypeGenericHackProps {
 /**
  * __Custom item__
  *
- * A custom item is used to populate a menu with items that need to be a custom element.
+ * A custom item is used to populate a menu with items that can be any element.
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/custom-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SkeletonHeadingItemProps } from '../types';
 /**
  * __Skeleton heading item__
@@ -8,5 +7,5 @@ import type { SkeletonHeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonHeadingItem: import("react").MemoExoticComponent<({ width, testId, isShimmering, cssFn, }: SkeletonHeadingItemProps) => JSX.Element>;
+declare const SkeletonHeadingItem: ({ testId, width, cssFn, }: SkeletonHeadingItemProps) => JSX.Element;
 export default SkeletonHeadingItem;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SkeletonItemProps } from '../types';
 /**
  * __Skeleton item__
@@ -8,5 +7,5 @@ import type { SkeletonItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonItem: import("react").MemoExoticComponent<({ hasAvatar, hasIcon, width, testId, isShimmering, cssFn, }: SkeletonItemProps) => JSX.Element>;
+declare const SkeletonItem: ({ hasAvatar, hasIcon, testId, width, cssFn, }: SkeletonItemProps) => JSX.Element;
 export default SkeletonItem;

package/dist/types/types.d.ts

@@ -52,7 +52,11 @@ export interface MenuGroupProps extends MenuGroupSizing {
      */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
 }
-export interface SectionBaseProps {
+export interface SectionProps {
+    /**
+     * Unique identifier for the element.
+     */
+    id?: string;
     /**
      * Enables scrolling within the section.
      * Make sure to set `maxHeight` on the parent `MenuGroup` component else it will not work.
@@ -74,8 +78,6 @@ export interface SectionBaseProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
-}
-export interface SectionProps extends SectionBaseProps {
     overrides?: {
         HeadingItem?: {
             /**
@@ -91,7 +93,25 @@ export interface SectionProps extends SectionBaseProps {
      */
     title?: string;
 }
-export interface BaseItemProps {
+export interface MenuItemPrimitiveProps {
+    children: (props: {
+        className: string;
+        'data-testid': string | undefined;
+        children: React.ReactNode;
+    }) => JSX.Element;
+    title: React.ReactNode | undefined;
+    description: React.ReactNode | undefined;
+    iconAfter: React.ReactNode | undefined;
+    iconBefore: React.ReactNode | undefined;
+    overrides: Overrides | undefined;
+    shouldTitleWrap: boolean | undefined;
+    shouldDescriptionWrap: boolean | undefined;
+    isDisabled: boolean | undefined;
+    isSelected: boolean | undefined;
+    className?: string;
+    testId?: string;
+}
+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.
@@ -151,7 +171,7 @@ export interface BaseItemProps {
      */
     shouldDescriptionWrap?: boolean;
 }
-export interface ButtonItemProps extends BaseItemProps {
+export interface ButtonItemProps extends MenuItemProps {
     /**
      * Unique identifier for the element.
      */
@@ -161,7 +181,7 @@ export interface ButtonItemProps extends BaseItemProps {
      */
     role?: string;
 }
-export interface LinkItemProps extends BaseItemProps {
+export interface LinkItemProps extends MenuItemProps {
     /**
      * Link to another page.
      */
@@ -226,7 +246,7 @@ export interface CustomItemComponentProps {
      */
     disabled?: boolean;
 }
-export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProps> extends BaseItemProps {
+export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProps> extends MenuItemProps {
     /**
      * Custom component to render as an item.
      * This can be both a functional component or a class component.
@@ -250,6 +270,7 @@ export interface SkeletonItemProps {
      */
     hasIcon?: boolean;
     /**
+     *
      * Width of the skeleton item.
      * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
      */
@@ -295,6 +316,7 @@ export interface HeadingItemProps {
 }
 export interface SkeletonHeadingItemProps {
     /**
+     *
      * Width of the skeleton heading item.
      * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,8 +36,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.2.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },

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

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _core = require("@emotion/core");
-
-var _baseItem = require("../styles/menu-item/base-item");
-
-/** @jsx jsx */
-var defaultRender = function defaultRender(Component, props) {
-  return (0, _core.jsx)(Component, props);
-};
-/**
- * __Base item__
- *
- * A base item should be composed for all item experiences.
- */
-
-
-var BaseItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var children = _ref.children,
-      description = _ref.description,
-      iconAfter = _ref.iconAfter,
-      iconBefore = _ref.iconBefore,
-      overrides = _ref.overrides,
-      _ref$shouldTitleWrap = _ref.shouldTitleWrap,
-      shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? false : _ref$shouldTitleWrap,
-      _ref$shouldDescriptio = _ref.shouldDescriptionWrap,
-      shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? false : _ref$shouldDescriptio;
-  var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.jsx)("div", {
-      css: _baseItem.contentCSSWrapper
-    }, iconBefore && // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.jsx)("span", {
-      "data-item-elem-before": true,
-      css: _baseItem.elemBeforeCSS
-    }, iconBefore), children && // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.jsx)("span", {
-      css: _baseItem.contentCSS
-    }, (0, _core.jsx)(_core.ClassNames, null, function (_ref2) {
-      var css = _ref2.css;
-      return renderTitle('span', {
-        children: children,
-        className: css(shouldTitleWrap ? _baseItem.wrapTextCSS : _baseItem.truncateCSS),
-        'data-item-title': true
-      });
-    }), description && (0, _core.jsx)("span", {
-      "data-item-description": true,
-      css: // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      shouldDescriptionWrap ? _baseItem.wrapDescriptionCSS : _baseItem.descriptionCSS
-    }, description)), iconAfter && // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.jsx)("span", {
-      "data-item-elem-after": true,
-      css: _baseItem.elemAfterCSS
-    }, iconAfter))
-  );
-});
-var _default = BaseItem;
-exports.default = _default;