@primer/components 31.2.0-rc.fbb10090 → 31.2.0

package/lib/ActionList/Divider.jsx

@@ -0,0 +1,29 @@
+"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

@@ -0,0 +1,23 @@
+"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

@@ -0,0 +1,66 @@
+"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

@@ -0,0 +1,301 @@
+"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')};
+`;
+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 MultiSelectInput = styled_components_1.default.input `
+  pointer-events: none;
+`;
+/**
+ * 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);
+        const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox';
+        if (isCheckbox && event.key === ' ') {
+            // space key on a checkbox will also trigger a click event.  Ignore the space key so we don't get double events
+            return;
+        }
+        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' ? (<>
+              {/*
+                 * readOnly is required because we are doing a one-way bind to `checked`.
+                 * aria-readonly="false" tells screen that they can still interact with the checkbox
+                 */}
+              <MultiSelectInput disabled={disabled} tabIndex={-1} type="checkbox" checked={selected} aria-label={text} readOnly aria-readonly="false"/>
+            </>) : (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';

package/lib/ActionList/List.jsx

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const react_1 = __importDefault(require("react"));
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const Divider_1 = require("./Divider");
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const focusZone_1 = require("../behaviors/focusZone");
+/**
+ * Asserts that the given value fulfills the `GroupedListProps` contract.
+ * @param props A value which fulfills either the `ListPropsBase` or the `GroupedListProps` contract.
+ */
+function isGroupedListProps(props) {
+    return 'groupMetadata' in props;
+}
+const StyledList = styled_components_1.default.div `
+  font-size: ${constants_1.get('fontSizes.1')};
+  /* 14px font-size * 1.428571429 = 20px line height
+   *
+   * TODO: When rem-based spacing on a 4px scale lands, replace
+   * hardcoded '20px'
+   */
+  line-height: 20px;
+
+  &[${focusZone_1.hasActiveDescendantAttribute}], &:focus-within {
+    --item-hover-bg-override: none;
+    --item-hover-divider-border-color-override: ${constants_1.get('colors.border.muted')};
+  }
+`;
+/**
+ * Returns `sx` prop values for `List` children matching the given `List` style variation.
+ * @param variant `List` style variation.
+ */
+function useListVariant(variant = 'inset') {
+    switch (variant) {
+        case 'full':
+            return {
+                headerStyle: { paddingX: constants_1.get('space.2') },
+                itemStyle: { borderRadius: 0 }
+            };
+        default:
+            return {
+                firstGroupStyle: { marginTop: constants_1.get('space.2') },
+                lastGroupStyle: { marginBottom: constants_1.get('space.2') },
+                itemStyle: { marginX: constants_1.get('space.2') }
+            };
+    }
+}
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+exports.List = react_1.default.forwardRef((props, forwardedRef) => {
+    // Get `sx` prop values for `List` children matching the given `List` style variation.
+    const { firstGroupStyle, lastGroupStyle, headerStyle, itemStyle } = useListVariant(props.variant);
+    /**
+     * Render a `Group` using the first of the following renderers that is defined:
+     * A `Group`-level or `List`-level custom `Group` renderer, or
+     * the default `Group` renderer.
+     */
+    const renderGroup = (groupProps) => {
+        const GroupComponent = (('renderGroup' in groupProps && groupProps.renderGroup) ?? props.renderGroup) || Group_1.Group;
+        return <GroupComponent {...groupProps} key={groupProps.groupId}/>;
+    };
+    /**
+     * Render an `Item` using the first of the following renderers that is defined:
+     * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
+     * or the default `Item` renderer.
+     */
+    const renderItem = (itemProps, item, itemIndex) => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const ItemComponent = ('renderItem' in itemProps && itemProps.renderItem) || props.renderItem || Item_1.Item;
+        const key = ('key' in itemProps ? itemProps.key : undefined) ?? itemProps.id?.toString() ?? itemIndex.toString();
+        return (<ItemComponent showDivider={props.showItemDividers} selectionVariant={props.selectionVariant} {...itemProps} key={key} sx={{ ...itemStyle, ...itemProps.sx }} item={item}/>);
+    };
+    /**
+     * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
+     */
+    let groups = [];
+    // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
+    if (!isGroupedListProps(props)) {
+        // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
+        groups = [{ items: props.items.map((item, index) => renderItem(item, item, index)), groupId: '0' }];
+    }
+    else {
+        // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
+        /**
+         * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
+         */
+        const groupMap = props.groupMetadata.reduce((groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata), new Map());
+        for (const itemProps of props.items) {
+            // Look up the group associated with the current item.
+            const group = groupMap.get(itemProps.groupId);
+            const itemIndex = group?.items?.length ?? 0;
+            // Upsert the group to include the current item (rendered).
+            groupMap.set(itemProps.groupId, {
+                ...group,
+                items: [
+                    ...(group?.items ?? []),
+                    renderItem({
+                        showDivider: group?.showItemDividers,
+                        ...(group && 'renderItem' in group && { renderItem: group.renderItem }),
+                        ...itemProps
+                    }, itemProps, itemIndex)
+                ]
+            });
+        }
+        groups = [...groupMap.values()];
+    }
+    return (<StyledList {...props} ref={forwardedRef}>
+      {groups.map(({ header, ...groupProps }, index) => {
+            const hasFilledHeader = header?.variant === 'filled';
+            const shouldShowDivider = index > 0 && !hasFilledHeader;
+            return (<react_1.default.Fragment key={groupProps.groupId}>
+            {shouldShowDivider ? <Divider_1.Divider key={`${groupProps.groupId}-divider`}/> : null}
+            {renderGroup({
+                    sx: {
+                        ...(index === 0 && firstGroupStyle),
+                        ...(index === groups.length - 1 && lastGroupStyle),
+                        ...(index > 0 && !shouldShowDivider && { mt: 2 })
+                    },
+                    ...(header && {
+                        header: {
+                            ...header,
+                            sx: { ...headerStyle, ...header.sx }
+                        }
+                    }),
+                    ...groupProps
+                })}
+          </react_1.default.Fragment>);
+        })}
+    </StyledList>);
+});
+exports.List.displayName = 'ActionList';

package/lib/ActionList/index.js

@@ -1,29 +1,18 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionList = void 0;
-
-var _List = require("./List");
-
-var _Group = require("./Group");
-
-var _Item = require("./Item");
-
-var _Divider = require("./Divider");
-
+const List_1 = require("./List");
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const Divider_1 = require("./Divider");
 /**
  * Collection of list-related components.
  */
-const ActionList = Object.assign(_List.List, {
-  /** Collects related `Items` in an `ActionList`. */
-  Group: _Group.Group,
-
-  /** An actionable or selectable `Item` with an optional icon and description. */
-  Item: _Item.Item,
-
-  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-  Divider: _Divider.Divider
+exports.ActionList = Object.assign(List_1.List, {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: Group_1.Group,
+    /** An actionable or selectable `Item` with an optional icon and description. */
+    Item: Item_1.Item,
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: Divider_1.Divider
 });
-exports.ActionList = ActionList;

package/lib/ActionList2/Description.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SxProp } from '../sx';
+export declare type DescriptionProps = {
+    /**
+     * Secondary text style variations.
+     *
+     * - `"inline"` - Secondary text is positioned beside primary text.
+     * - `"block"` - Secondary text is positioned below primary text.
+     */
+    variant?: 'inline' | 'block';
+} & SxProp;
+export declare const Description: React.FC<DescriptionProps>;

package/lib/ActionList2/Description.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Description = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = require("../sx");
+
+var _Truncate = _interopRequireDefault(require("../Truncate"));
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Description = ({
+  variant = 'inline',
+  sx = {},
+  ...props
+}) => {
+  const styles = {
+    color: 'fg.muted',
+    fontSize: 0,
+    lineHeight: '16px',
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    marginLeft: variant === 'block' ? 0 : 2
+  };
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
+  }, ({
+    blockDescriptionId,
+    inlineDescriptionId
+  }) => variant === 'block' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "span",
+    sx: (0, _sx.merge)(styles, sx),
+    id: blockDescriptionId
+  }, props.children) : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
+    id: inlineDescriptionId,
+    sx: (0, _sx.merge)(styles, sx),
+    title: props.children,
+    inline: true,
+    maxWidth: "100%"
+  }, props.children));
+};
+
+exports.Description = Description;
+Description.displayName = "Description";