@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib-esm/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_high_contrast" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
@@ -88,6 +88,17 @@ export declare function render(component: React.ReactElement, theme?: {
             additionBg: string;
         };
         searchKeyword: {
+            /**
+             * Render the component (a React.createElement() or JSX expression)
+             * into its intermediate object representation with 'type',
+             * 'props', and 'children' keys
+             *
+             * The returned object can be matched with expect().toEqual(), e.g.
+             *
+             * ```js
+             * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
+             * ```
+             */
             hl: string;
         };
         prettylights: {
@@ -108,6 +119,15 @@ export declare function render(component: React.ReactElement, theme?: {
                 stringRegexp: string;
                 markupList: string;
                 markupHeading: string;
+                /**
+                 * Get the HTML class names rendered by the component instance
+                 * as an array.
+                 *
+                 * ```js
+                 * expect(renderClasses(<div className='a b' />))
+                 *   .toEqual(['a', 'b'])
+                 * ```
+                 */
                 markupItalic: string;
                 markupBold: string;
                 markupDeletedText: string;
@@ -231,67 +251,13 @@ export declare function render(component: React.ReactElement, theme?: {
             gradientOut: string;
         };
         mktg: {
-            success: string;
-            info: string;
-            bgShadeGradient: {
-                top: string;
-                bottom: string;
-            };
             btn: {
-                bg: {
-                    top: string;
-                    bottom: string;
-                };
-                bgOverlay: {
-                    top: string;
-                    bottom: string;
-                };
-                text: string;
-                primary: {
-                    bg: {
-                        top: string;
-                        bottom: string;
-                    };
-                    bgOverlay: {
-                        top: string;
-                        bottom: string;
-                    };
-                    text: string;
-                };
-                enterprise: {
-                    bg: {
-                        top: string;
-                        bottom: string;
-                    };
-                    bgOverlay: {
-                        top: string;
-                        bottom: string;
-                    };
-                    text: string;
-                };
-                outline: {
-                    text: string;
-                    border: string;
-                    hover: {
-                        text: string;
-                        border: string;
-                    };
-                    focus: {
-                        border: string;
-                        borderInset: string;
-                    };
-                };
-                dark: {
-                    text: string;
-                    border: string;
-                    hover: {
-                        text: string;
-                        border: string;
-                    };
-                    focus: {
-                        border: string;
-                        borderInset: string;
-                    };
+                bg: string;
+                shadow: {
+                    outline: string;
+                    focus: string;
+                    hover: string;
+                    hoverMuted: string;
                 };
             };
         };
@@ -595,4 +561,5 @@ interface BehavesAsComponent {
 }
 export declare function behavesAsComponent({ Component, toRender, options }: BehavesAsComponent): void;
 export declare function checkExports(path: string, exports: Record<any, any>): void;
+export declare function checkStoriesForAxeViolations(name: string): void;
 export {};

package/lib-esm/utils/testing.js

@@ -3,6 +3,8 @@ import { promisify } from 'util';
 import renderer from 'react-test-renderer';
 import enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import { ThemeProvider } from '..';
 import { default as defaultTheme } from '../theme';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -219,4 +221,26 @@ export function checkExports(path, exports) {
 
     expect(mod).toSetExports(exports);
   });
+}
+expect.extend(toHaveNoViolations);
+export function checkStoriesForAxeViolations(name) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const stories = require(`../stories/${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
+
+
+  const {
+    default: _meta,
+    ...Stories
+  } = stories;
+  Object.values(Stories).map(Story => {
+    if (typeof Story !== 'function') return;
+    it(`story {Story.storyName} should have no axe violations`, async () => {
+      const {
+        container
+      } = HTMLRender( /*#__PURE__*/React.createElement(Story, null));
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+      cleanup();
+    });
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202110303104",
+  "version": "0.0.0-2021103082237",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -20,8 +20,7 @@
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
     "release": "npm run build && changeset publish",
-    "size": "size-limit",
-    "typecheck": "npx tsc --project tsconfig.json"
+    "size": "size-limit"
   },
   "repository": "primer/react",
   "keywords": [
@@ -45,7 +44,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^16.1.0",
-    "@primer/primitives": "6.1.0",
+    "@primer/primitives": "7.1.1",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
@@ -88,7 +87,7 @@
     "@testing-library/user-event": "13.1.9",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
-    "@types/jest": "26.0.23",
+    "@types/jest": "27.0.2",
     "@types/jest-axe": "3.5.3",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
@@ -114,7 +113,7 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-mdx": "1.15.1",
     "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-primer-react": "0.6.1",
+    "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",

package/lib/ActionList/Divider.jsx

@@ -1,29 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = exports.StyledDivider = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-exports.StyledDivider = styled_components_1.default.div `
-  height: 1px;
-  background: ${constants_1.get('colors.border.muted')};
-  margin-top: calc(${constants_1.get('space.2')} - 1px);
-  margin-bottom: ${constants_1.get('space.2')};
-`;
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-function Divider() {
-    return <exports.StyledDivider />;
-}
-exports.Divider = Divider;
-/**
- * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
- * so it can be used inline in an `ActionList`’s `items` prop.
- * In other words, `items={[ActionList.Divider]}` is supported as a concise
- * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
- */
-Divider.renderItem = Divider;

package/lib/ActionList/Group.jsx

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Group = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const sx_1 = __importDefault(require("../sx"));
-const Header_1 = require("./Header");
-const StyledGroup = styled_components_1.default.div `
-  ${sx_1.default}
-`;
-/**
- * Collects related `Items` in an `ActionList`.
- */
-function Group({ header, items, ...props }) {
-    return (<StyledGroup {...props}>
-      {header && <Header_1.Header {...header}/>}
-      {items}
-    </StyledGroup>);
-}
-exports.Group = Group;

package/lib/ActionList/Header.jsx

@@ -1,66 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = exports.StyledHeader = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-exports.StyledHeader = styled_components_1.default.div `
-   {
-    /* 6px vertical padding + 20px line height = 32px total height
-     *
-     * TODO: When rem-based spacing on a 4px scale lands, replace
-     * hardcoded '6px' with 'calc((${constants_1.get('space.s32')} - ${constants_1.get('space.20')}) / 2)'.
-     */
-  }
-  padding: 6px ${constants_1.get('space.3')};
-  font-size: ${constants_1.get('fontSizes.0')};
-  font-weight: ${constants_1.get('fontWeights.bold')};
-  color: ${constants_1.get('colors.fg.muted')};
-
-  ${({ variant }) => variant === 'filled' &&
-    styled_components_1.css `
-      background: ${constants_1.get('colors.canvas.subtle')};
-      margin: ${constants_1.get('space.2')} 0;
-      border-top: 1px solid ${constants_1.get('colors.neutral.muted')};
-      border-bottom: 1px solid ${constants_1.get('colors.neutral.muted')};
-
-      &:first-child {
-        margin-top: 0;
-      }
-    `}
-
-  ${sx_1.default}
-`;
-/**
- * Displays the name and description of a `Group`.
- */
-function Header({ variant = 'subtle', title, auxiliaryText, children: _children, ...props }) {
-    return (<exports.StyledHeader role="heading" variant={variant} {...props}>
-      {title}
-      {auxiliaryText && <span>{auxiliaryText}</span>}
-    </exports.StyledHeader>);
-}
-exports.Header = Header;

package/lib/ActionList/Item.jsx

@@ -1,311 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = exports.TextContainer = void 0;
-const octicons_react_1 = require("@primer/octicons-react");
-const react_1 = __importStar(require("react"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const Truncate_1 = __importDefault(require("../Truncate"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Header_1 = require("./Header");
-const Divider_1 = require("./Divider");
-const ThemeProvider_1 = require("../ThemeProvider");
-const focusZone_1 = require("../behaviors/focusZone");
-const ssr_1 = require("@react-aria/ssr");
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
-const customItemThemes = {
-    default: {
-        hover: {
-            light: 'rgba(46, 77, 108, 0.06)',
-            dark: 'rgba(201, 206, 212, 0.12)',
-            dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-        },
-        focus: {
-            light: 'rgba(54, 77, 100, 0.16)',
-            dark: 'rgba(201, 206, 212, 0.24)',
-            dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-        }
-    },
-    danger: {
-        hover: {
-            light: 'rgba(234, 74, 90, 0.08)',
-            dark: 'rgba(248, 81, 73, 0.16)',
-            dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-        },
-        focus: {
-            light: 'rgba(234, 74, 90, 0.14)',
-            dark: 'rgba(248, 81, 73, 0.24)',
-            dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-        }
-    }
-};
-const getItemVariant = (variant = 'default', disabled) => {
-    if (disabled) {
-        return {
-            color: constants_1.get('colors.primer.fg.disabled'),
-            iconColor: constants_1.get('colors.primer.fg.disabled'),
-            annotationColor: constants_1.get('colors.primer.fg.disabled'),
-            hoverCursor: 'default'
-        };
-    }
-    switch (variant) {
-        case 'danger':
-            return {
-                color: constants_1.get('colors.danger.fg'),
-                iconColor: constants_1.get('colors.danger.fg'),
-                annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
-            };
-        default:
-            return {
-                color: constants_1.get('colors.fg.default'),
-                iconColor: constants_1.get('colors.fg.muted'),
-                annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
-            };
-    }
-};
-const DividedContent = styled_components_1.default.div `
-  display: flex;
-  min-width: 0;
-
-  /* Required for dividers */
-  position: relative;
-  flex-grow: 1;
-`;
-const MainContent = styled_components_1.default.div `
-  align-items: baseline;
-  display: flex;
-  min-width: 0;
-  flex-direction: var(--main-content-flex-direction);
-  flex-grow: 1;
-`;
-const StyledItem = styled_components_1.default.div `
-  /* 6px vertical padding + 20px line height = 32px total height
-   *
-   * TODO: When rem-based spacing on a 4px scale lands, replace
-   * hardcoded '6px' with 'calc((${constants_1.get('space.s32')} - ${constants_1.get('space.20')}) / 2)'.
-   */
-  padding: 6px ${constants_1.get('space.2')};
-  display: flex;
-  border-radius: ${constants_1.get('radii.2')};
-  color: ${({ variant, item }) => getItemVariant(variant, item?.disabled).color};
-  // 2 frames on a 60hz monitor
-  transition: background 33.333ms linear;
-  text-decoration: none;
-
-  @media (hover: hover) and (pointer: fine) {
-    :hover {
-      // allow override in case another item in the list is active/focused
-      background: var(--item-hover-bg-override, ${({ hoverBackground }) => hoverBackground});
-      cursor: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverCursor};
-    }
-  }
-
-  // Item dividers
-  :not(:first-of-type):not(${Divider_1.StyledDivider} + &):not(${Header_1.StyledHeader} + &) {
-    margin-top: ${({ showDivider }) => (showDivider ? `1px` : '0')};
-
-    ${DividedContent}::before {
-      content: ' ';
-      display: block;
-      position: absolute;
-      width: 100%;
-      top: -7px;
-      // NB: This 'get' won’t execute if it’s moved into the arrow function below.
-      border: 0 solid ${constants_1.get('colors.border.muted')};
-      border-top-width: ${({ showDivider }) => (showDivider ? `1px` : '0')};
-    }
-  }
-
-  // Item dividers should not be visible:
-  // - above Hovered
-  &:hover ${DividedContent}::before,
-  // - below Hovered
-  // '*' instead of '&' because '&' maps to separate class names depending on 'variant'
-  :hover + * ${DividedContent}::before {
-    // allow override in case another item in the list is active/focused
-    border-color: var(--item-hover-divider-border-color-override, transparent) !important;
-  }
-
-  // - above Focused
-  &:focus ${DividedContent}::before,
-  // - below Focused
-  // '*' instead of '&' because '&' maps to separate class names depending on 'variant'
-  :focus + * ${DividedContent}::before,
-  // - above Active Descendent
-  &[${focusZone_1.isActiveDescendantAttribute}] ${DividedContent}::before,
-  // - below Active Descendent
-  [${focusZone_1.isActiveDescendantAttribute}] + & ${DividedContent}::before {
-    // '!important' because all the ':not's above give higher specificity
-    border-color: transparent !important;
-  }
-
-  // Active Descendant
-  &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedDirectly}'] {
-    background: ${({ focusBackground }) => focusBackground};
-  }
-  &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedIndirectly}'] {
-    background: ${({ hoverBackground }) => hoverBackground};
-  }
-
-  &:focus {
-    background: ${({ focusBackground }) => focusBackground};
-    outline: none;
-  }
-
-  &:active {
-    background: ${({ focusBackground }) => focusBackground};
-  }
-
-  ${sx_1.default}
-`;
-exports.TextContainer = styled_components_1.default.span ``;
-const BaseVisualContainer = styled_components_1.default.div `
-  // Match visual height to adjacent text line height.
-  // TODO: When rem-based spacing on a 4px scale lands, replace
-  // hardcoded '20px' with '${constants_1.get('space.s20')}'.
-  height: 20px;
-  width: ${constants_1.get('space.3')};
-  margin-right: ${constants_1.get('space.2')};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const ColoredVisualContainer = styled_components_1.default(BaseVisualContainer) `
-  svg {
-    fill: ${({ variant, disabled }) => getItemVariant(variant, disabled).iconColor};
-    font-size: ${constants_1.get('fontSizes.0')};
-  }
-`;
-const LeadingVisualContainer = styled_components_1.default(ColoredVisualContainer) `
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-const TrailingContent = styled_components_1.default(ColoredVisualContainer) `
-  color: ${({ variant, disabled }) => getItemVariant(variant, disabled).annotationColor}};
-  margin-left: ${constants_1.get('space.2')};
-  margin-right: 0;
-  width: auto;
-  div:nth-child(2) {
-    margin-left: ${constants_1.get('space.2')};
-  }
-`;
-const DescriptionContainer = styled_components_1.default.span `
-  color: ${constants_1.get('colors.fg.muted')};
-  font-size: ${constants_1.get('fontSizes.0')};
-  // TODO: When rem-based spacing on a 4px scale lands, replace
-  // hardcoded '16px' with '${constants_1.get('lh-12')}'.
-  line-height: 16px;
-  margin-left: var(--description-container-margin-left);
-  min-width: 0;
-  flex-grow: 1;
-  flex-basis: var(--description-container-flex-basis);
-`;
-const MultiSelectIcon = styled_components_1.default.svg `
-  rect {
-    fill: ${({ selected }) => (selected ? constants_1.get('colors.accent.fg') : constants_1.get('colors.canvas.default'))};
-    stroke: ${({ selected }) => (selected ? constants_1.get('colors.accent.fg') : constants_1.get('colors.border.default'))};
-  }
-  path {
-    fill: ${constants_1.get('colors.fg.onEmphasis')};
-    boxshadow: ${constants_1.get('shadow.small')};
-    opacity: ${({ selected }) => (selected ? 1 : 0)};
-  }
-`;
-/**
- * An actionable or selectable `Item` with an optional icon and description.
- */
-exports.Item = react_1.default.forwardRef((itemProps, ref) => {
-    const { as: Component, text, description, descriptionVariant = 'inline', selected, selectionVariant, leadingVisual: LeadingVisual, trailingIcon: TrailingIcon, trailingVisual: TrailingVisual, trailingText, variant = 'default', showDivider, disabled, onAction, onKeyPress, children, onClick, id, ...props } = itemProps;
-    const labelId = ssr_1.useSSRSafeId();
-    const descriptionId = ssr_1.useSSRSafeId();
-    const keyPressHandler = react_1.useCallback(event => {
-        if (disabled) {
-            return;
-        }
-        onKeyPress?.(event);
-        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-            onAction?.(itemProps, event);
-        }
-    }, [onAction, disabled, itemProps, onKeyPress]);
-    const clickHandler = react_1.useCallback(event => {
-        if (disabled) {
-            return;
-        }
-        onClick?.(event);
-        if (!event.defaultPrevented) {
-            onAction?.(itemProps, event);
-        }
-    }, [onAction, disabled, itemProps, onClick]);
-    const customItemTheme = customItemThemes[variant];
-    const hoverBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.hover, 'inherit');
-    const focusBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.focus, 'inherit');
-    const { theme } = ThemeProvider_1.useTheme();
-    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler} hoverBackground={disabled ? 'inherit' : hoverBackground} focusBackground={disabled ? 'inherit' : focusBackground}>
-      {!!selected === selected && (<BaseVisualContainer>
-          {selectionVariant === 'multiple' ? (<>
-              {/**
-                 * we use a svg instead of an input because there should not
-                 * be an interactive element inside an option
-                 * svg copied from primer/css
-                 */}
-              <MultiSelectIcon selected={selected} width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                <rect x="2" y="2" width="12" height="12" rx="4"></rect>
-                <path fillRule="evenodd" strokeWidth="0" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"/>
-              </MultiSelectIcon>
-            </>) : (selected && <octicons_react_1.CheckIcon fill={theme?.colors.fg.default}/>)}
-        </BaseVisualContainer>)}
-      {LeadingVisual && (<LeadingVisualContainer variant={variant} disabled={disabled}>
-          <LeadingVisual />
-        </LeadingVisualContainer>)}
-      <DividedContent>
-        <MainContent style={{ '--main-content-flex-direction': descriptionVariant === 'inline' ? 'row' : 'column' }}>
-          {children}
-          {text ? <exports.TextContainer id={labelId}>{text}</exports.TextContainer> : null}
-          {description ? (<DescriptionContainer id={descriptionId} style={{
-                '--description-container-margin-left': descriptionVariant === 'inline' ? constants_1.get('space.2')(theme) : 0,
-                '--description-container-flex-basis': descriptionVariant === 'inline' ? 0 : 'auto'
-            }}>
-              {descriptionVariant === 'block' ? (description) : (<Truncate_1.default title={description} inline={true} maxWidth="100%">
-                  {description}
-                </Truncate_1.default>)}
-            </DescriptionContainer>) : null}
-        </MainContent>
-        {/* backward compatibility: prefer TrailingVisual but fallback to TrailingIcon */}
-        {TrailingVisual ? (<TrailingContent variant={variant} disabled={disabled}>
-            {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
-          </TrailingContent>) : TrailingIcon || trailingText ? (<TrailingContent variant={variant} disabled={disabled}>
-            {trailingText}
-            {TrailingIcon && <TrailingIcon />}
-          </TrailingContent>) : null}
-      </DividedContent>
-    </StyledItem>);
-});
-exports.Item.displayName = 'ActionList.Item';