@primer/components 32.0.1-rc.c4c2c50a → 32.0.1

package/docs/src/component-checklist.js

@@ -1,81 +0,0 @@
-import {Box, StyledOcticon, Link, Text} from '@primer/components'
-import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
-import {CheckCircleFillIcon, CircleIcon, SkipIcon} from '@primer/octicons-react'
-import React from 'react'
-
-/** Render component status checklist in documentation pages */
-export function ComponentChecklist({items}) {
-  return (
-    <>
-      <H3>Alpha</H3>
-      <Checklist aria-describedby="alpha">
-        <Checklist.Item checked={items.propsDocumented}>Component props are documented.</Checklist.Item>
-        <Checklist.Item checked={items.noUnnecessaryDeps}>
-          Component does not have any unnecessary third-party dependencies.
-        </Checklist.Item>
-        <Checklist.Item checked={items.adaptsToThemes}>Component can adapt to different themes.</Checklist.Item>
-        <Checklist.Item checked={items.adaptsToScreenSizes}>
-          Component can adapt to different screen sizes.
-        </Checklist.Item>
-        <Checklist.Item checked={items.fullTestCoverage}>Component has 100% test coverage.</Checklist.Item>
-      </Checklist>
-      <H3>Beta</H3>
-      <Checklist aria-describedby="beta">
-        <Checklist.Item checked={items.usedInProduction}>Component is used in a production application.</Checklist.Item>
-        <Checklist.Item checked={items.usageExamplesDocumented}>Common usage examples are documented.</Checklist.Item>
-        <Checklist.Item checked={items.designReviewed}>
-          Component has been reviewed by a systems designer and any resulting issues have been addressed.
-        </Checklist.Item>
-        <Checklist.Item checked={items.a11yReviewed}>
-          Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
-        </Checklist.Item>
-      </Checklist>
-      <H3>Stable</H3>
-      <Checklist aria-describedby="stable">
-        <Checklist.Item checked={items.apiIsStable}>
-          Component API has been stable with no breaking changes for at least one month.
-        </Checklist.Item>
-        <Checklist.Item checked={items.addressedApiFeedback}>
-          Feedback on API usability has been sought from developers using the component and any resulting issues have
-          been addressed.
-        </Checklist.Item>
-        <Checklist.Item checked={items.hasDesignGuidelines}>
-          Component has corresponding design guidelines documented in the{' '}
-          <Link href="https://primer.style/design/">interface guidelines</Link>.
-        </Checklist.Item>
-        <Checklist.Item checked={items.hasFigmaComponent}>
-          Component has corresponding Figma component in the Primer Web library.
-        </Checklist.Item>
-      </Checklist>
-    </>
-  )
-}
-
-// TODO: This component should live in Doctocat
-function Checklist({'aria-describedby': ariaDescribedby, children}) {
-  return (
-    <Box aria-describedby={ariaDescribedby} as="ul" display="grid" gridGap={2} p={0} m={0} mb={3}>
-      {children}
-    </Box>
-  )
-}
-
-Checklist.Item = ({checked, children}) => {
-  return (
-    <Box as="li" display="grid" gridTemplateColumns="auto 1fr" gridGap={2} sx={{listStyleType: 'none'}}>
-      <Box height="24px" display="flex" alignItems="center">
-        {checked ? (
-          <StyledOcticon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
-        ) : checked === null ? (
-          <StyledOcticon icon={SkipIcon} sx={{color: 'fg.subtle'}} />
-        ) : (
-          <StyledOcticon aria-label="To do" icon={CircleIcon} sx={{color: 'fg.subtle'}} />
-        )}
-      </Box>
-      <Text color={checked === null ? 'fg.subtle' : 'fg.default'}>
-        {checked === null ? <Text color="fg.subtle">N/A: </Text> : null}
-        {children}
-      </Text>
-    </Box>
-  )
-}

package/docs/src/props.js

@@ -1,77 +0,0 @@
-import {Flash, Label} from '@primer/components'
-import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
-import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
-import Paragraph from '@primer/gatsby-theme-doctocat/src/components/paragraph'
-import Table from '@primer/gatsby-theme-doctocat/src/components/table'
-import {graphql, useStaticQuery} from 'gatsby'
-import React from 'react'
-
-/** Render prop documentation for the given component */
-export function Props({of}) {
-  const data = useStaticQuery(graphql`
-    query {
-      allComponentMetadata {
-        nodes {
-          id
-          name
-          props {
-            description
-            defaultValue
-            name
-            required
-            type
-          }
-        }
-      }
-    }
-  `)
-
-  const displayName = of?.displayName || of?.name || ''
-  const component = data.allComponentMetadata.nodes.find(node => node.name === displayName)
-
-  if (!component) {
-    // eslint-disable-next-line no-console
-    console.error(`Could not find component ${displayName}`)
-    return (
-      <>
-        <H3>{displayName}</H3>
-        <Flash variant="danger">Component not found</Flash>
-      </>
-    )
-  }
-
-  return (
-    <>
-      <H3>{component.name}</H3>
-      {component.props.length > 0 ? (
-        <Table>
-          <thead>
-            <tr>
-              <th align="left">Prop</th>
-              <th align="left">Type</th>
-              <th align="left">Default</th>
-              <th align="left">Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {component.props.map(prop => (
-              <tr key={prop.name}>
-                <td style={{whiteSpace: 'nowrap'}}>
-                  <InlineCode>{prop.name}</InlineCode>{' '}
-                  {prop.required ? <Label style={{verticalAlign: 'text-top'}}>Required</Label> : null}
-                </td>
-                <td>
-                  <InlineCode>{prop.type}</InlineCode>
-                </td>
-                <td>{prop.defaultValue ? <InlineCode>{prop.defaultValue}</InlineCode> : '–'}</td>
-                <td>{prop.description}</td>
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      ) : (
-        <Paragraph>No props</Paragraph>
-      )}
-    </>
-  )
-}

package/jest.config.js

@@ -1,13 +0,0 @@
-/* eslint-disable github/unescaped-html-literal */
-module.exports = {
-  testEnvironment: 'jsdom',
-  cacheDirectory: '.test',
-  collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**'],
-  setupFilesAfterEnv: [
-    '<rootDir>/src/utils/test-matchers.tsx',
-    '<rootDir>/src/utils/test-deprecations.tsx',
-    '<rootDir>/src/utils/test-helpers.tsx'
-  ],
-  testMatch: ['<rootDir>/(src|codemods)/__tests__/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)']
-}

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,288 +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");
-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',
-                hoverBg: constants_1.get('colors.actionListItem.danger.hoverBg'),
-                focusBg: constants_1.get('colors.actionListItem.danger.activeBg'),
-                hoverText: constants_1.get('colors.actionListItem.danger.hoverText')
-            };
-        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',
-                hoverBg: constants_1.get('colors.actionListItem.default.hoverBg'),
-                focusBg: constants_1.get('colors.actionListItem.default.activeBg')
-            };
-    }
-};
-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,
-        ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverBg}
-      );
-      color: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverText};
-      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: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
-  }
-  &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedIndirectly}'] {
-    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverBg};
-  }
-
-  &:focus {
-    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
-    outline: none;
-  }
-
-  &:active {
-    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
-  }
-
-  ${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 { 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}>
-      {!!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';