@primer/components 32.0.1-rc.c4c2c50a → 32.1.0

package/lib/ActionList/List.jsx

@@ -1,138 +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.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/ActionList2/Description.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.Description = void 0;
-const react_1 = __importDefault(require("react"));
-const Box_1 = __importDefault(require("../Box"));
-const sx_1 = require("../sx");
-const Truncate_1 = __importDefault(require("../Truncate"));
-const Item_1 = require("./Item");
-const Description = ({ variant = 'inline', sx = {}, ...props }) => {
-    const styles = {
-        fontSize: 0,
-        lineHeight: '16px',
-        flexGrow: 1,
-        flexBasis: 0,
-        minWidth: 0,
-        marginLeft: variant === 'block' ? 0 : 2
-    };
-    return (<Item_1.Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
-      {({ blockDescriptionId, inlineDescriptionId, disabled }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} id={blockDescriptionId}>
-            {props.children}
-          </Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} title={props.children} inline={true} maxWidth="100%">
-            {props.children}
-          </Truncate_1.default>)}
-    </Item_1.Slot>);
-};
-exports.Description = Description;

package/lib/ActionList2/Divider.jsx

@@ -1,22 +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 = void 0;
-const react_1 = __importDefault(require("react"));
-const Box_1 = __importDefault(require("../Box"));
-const constants_1 = require("../constants");
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-function Divider() {
-    return (<Box_1.default as="li" role="separator" sx={{
-            height: 1,
-            backgroundColor: 'actionListItem.inlineDivider',
-            marginTop: (theme) => `calc(${constants_1.get('space.2')(theme)} - 1px)`,
-            marginBottom: 2,
-            listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
-        }} data-component="ActionList.Divider"/>);
-}
-exports.Divider = Divider;

package/lib/ActionList2/Group.jsx

@@ -1,54 +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 = exports.GroupContext = void 0;
-const react_1 = __importDefault(require("react"));
-const ssr_1 = require("@react-aria/ssr");
-const Box_1 = __importDefault(require("../Box"));
-const List_1 = require("./List");
-exports.GroupContext = react_1.default.createContext({});
-const Group = ({ title, variant = 'subtle', auxiliaryText, selectionVariant, role, sx = {}, ...props }) => {
-    const labelId = ssr_1.useSSRSafeId();
-    return (<Box_1.default as="li" sx={{
-            '&:not(:first-child)': { marginTop: 2 },
-            listStyle: 'none',
-            ...sx
-        }} {...props}>
-      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId}/>}
-      <exports.GroupContext.Provider value={{ selectionVariant }}>
-        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }} aria-labelledby={title ? labelId : undefined} role={role}>
-          {props.children}
-        </Box_1.default>
-      </exports.GroupContext.Provider>
-    </Box_1.default>);
-};
-exports.Group = Group;
-/**
- * Displays the name and description of a `Group`.
- *
- * For visual presentation only. It's hidden from screen readers.
- */
-const Header = ({ variant, title, auxiliaryText, labelId, ...props }) => {
-    const { variant: listVariant } = react_1.default.useContext(List_1.ListContext);
-    const styles = {
-        paddingY: '6px',
-        paddingX: listVariant === 'full' ? 2 : 3,
-        fontSize: 0,
-        fontWeight: 'bold',
-        color: 'fg.muted',
-        ...(variant === 'filled' && {
-            backgroundColor: 'canvas.subtle',
-            marginX: 0,
-            marginBottom: 2,
-            borderTop: '1px solid',
-            borderBottom: '1px solid',
-            borderColor: 'neutral.muted'
-        })
-    };
-    return (<Box_1.default sx={styles} role="presentation" aria-hidden="true" {...props}>
-      <span id={labelId}>{title}</span>
-      {auxiliaryText && <span>{auxiliaryText}</span>}
-    </Box_1.default>);
-};

package/lib/ActionList2/Header.jsx

@@ -1,36 +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.Header = void 0;
-const react_1 = __importDefault(require("react"));
-const Box_1 = __importDefault(require("../Box"));
-const List_1 = require("./List");
-/**
- * Displays the name and description of a `Group`.
- */
-const Header = ({ variant = 'subtle', title, auxiliaryText, sx = {}, ...props }) => {
-    const { variant: listVariant } = react_1.default.useContext(List_1.ListContext);
-    const styles = {
-        paddingY: '6px',
-        paddingX: listVariant === 'full' ? 2 : 3,
-        fontSize: 0,
-        fontWeight: 'bold',
-        color: 'fg.muted',
-        ...(variant === 'filled' && {
-            backgroundColor: 'canvas.subtle',
-            marginX: 0,
-            marginBottom: 2,
-            borderTop: '1px solid',
-            borderBottom: '1px solid',
-            borderColor: 'neutral.muted'
-        }),
-        ...sx
-    };
-    return (<Box_1.default sx={styles} role="heading" {...props}>
-      {title}
-      {auxiliaryText && <span>{auxiliaryText}</span>}
-    </Box_1.default>);
-};
-exports.Header = Header;

package/lib/ActionList2/Item.jsx

@@ -1,174 +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.TEXT_ROW_HEIGHT = exports.Slot = exports.getVariantStyles = void 0;
-const react_1 = __importDefault(require("react"));
-const ssr_1 = require("@react-aria/ssr");
-const styled_components_1 = __importDefault(require("styled-components"));
-const ThemeProvider_1 = require("../ThemeProvider");
-const Box_1 = __importDefault(require("../Box"));
-const sx_1 = __importStar(require("../sx"));
-const create_slots_1 = __importDefault(require("../utils/create-slots"));
-const List_1 = require("./List");
-const Selection_1 = require("./Selection");
-const getVariantStyles = (variant, disabled) => {
-    if (disabled) {
-        return {
-            color: 'primer.fg.disabled',
-            iconColor: 'primer.fg.disabled',
-            annotationColor: 'primer.fg.disabled'
-        };
-    }
-    switch (variant) {
-        case 'danger':
-            return {
-                color: 'danger.fg',
-                iconColor: 'danger.fg',
-                annotationColor: 'fg.muted',
-                hoverColor: 'actionListItem.danger.hoverText'
-            };
-        default:
-            return {
-                color: 'fg.default',
-                iconColor: 'fg.muted',
-                annotationColor: 'fg.muted',
-                hoverColor: 'fg.default'
-            };
-    }
-};
-exports.getVariantStyles = getVariantStyles;
-const { Slots, Slot } = create_slots_1.default(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
-exports.Slot = Slot;
-const LiBox = styled_components_1.default.li(sx_1.default);
-exports.TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
-exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = false, selected = undefined, onSelect = () => null, sx: sxProp = {}, id, _PrivateItemWrapper, ...props }, forwardedRef) => {
-    const { variant: listVariant, showDividers } = react_1.default.useContext(List_1.ListContext);
-    const { theme } = ThemeProvider_1.useTheme();
-    const styles = {
-        display: 'flex',
-        paddingX: 2,
-        fontSize: 1,
-        paddingY: '6px',
-        lineHeight: exports.TEXT_ROW_HEIGHT,
-        minHeight: 5,
-        marginX: listVariant === 'inset' ? 2 : 0,
-        borderRadius: listVariant === 'inset' ? 2 : 0,
-        transition: 'background 33.333ms linear',
-        color: exports.getVariantStyles(variant, disabled).color,
-        cursor: 'pointer',
-        '&[aria-disabled]': { cursor: 'not-allowed' },
-        '@media (hover: hover) and (pointer: fine)': {
-            ':hover:not([aria-disabled])': {
-                backgroundColor: `actionListItem.${variant}.hoverBg`,
-                color: exports.getVariantStyles(variant, disabled).hoverColor
-            },
-            ':focus:not([data-focus-visible-added])': {
-                backgroundColor: `actionListItem.${variant}.selectedBg`,
-                color: exports.getVariantStyles(variant, disabled).hoverColor,
-                outline: 'none'
-            },
-            '&[data-focus-visible-added]': {
-                // we don't use :focus-visible because not all browsers (safari) have it yet
-                outline: 'none',
-                border: `2 solid`,
-                boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`
-            },
-            ':active:not([aria-disabled])': {
-                backgroundColor: `actionListItem.${variant}.activeBg`,
-                color: exports.getVariantStyles(variant, disabled).hoverColor
-            }
-        },
-        /** Divider styles */
-        '[data-component="ActionList.Item--DividerContainer"]': {
-            position: 'relative'
-        },
-        '[data-component="ActionList.Item--DividerContainer"]::before': {
-            content: '" "',
-            display: 'block',
-            position: 'absolute',
-            width: '100%',
-            top: '-7px',
-            border: '0 solid',
-            borderTopWidth: showDividers ? `1px` : '0',
-            borderColor: 'var(--divider-color, transparent)'
-        },
-        // show between 2 items
-        ':not(:first-of-type)': { '--divider-color': theme?.colors.actionListItem.inlineDivider },
-        // hide divider after dividers & group header, with higher importance!
-        '[data-component="ActionList.Divider"] + &': { '--divider-color': 'transparent !important' },
-        // hide border on current and previous item
-        '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
-            '--divider-color': 'transparent'
-        },
-        '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
-            '--divider-color': 'transparent'
-        }
-    };
-    const clickHandler = react_1.default.useCallback(event => {
-        if (disabled)
-            return;
-        if (!event.defaultPrevented)
-            onSelect(event);
-    }, [onSelect, disabled]);
-    const keyPressHandler = react_1.default.useCallback(event => {
-        if (disabled)
-            return;
-        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-            onSelect(event);
-        }
-    }, [onSelect, disabled]);
-    // use props.id if provided, otherwise generate one.
-    const labelId = ssr_1.useSSRSafeId(id);
-    const inlineDescriptionId = ssr_1.useSSRSafeId(id && `${id}--inline-description`);
-    const blockDescriptionId = ssr_1.useSSRSafeId(id && `${id}--block-description`);
-    const ItemWrapper = _PrivateItemWrapper || react_1.default.Fragment;
-    return (<Slots context={{ variant, disabled, inlineDescriptionId, blockDescriptionId }}>
-        {slots => (<LiBox ref={forwardedRef} sx={sx_1.merge(styles, sxProp)} onClick={clickHandler} onKeyPress={keyPressHandler} aria-selected={selected} aria-disabled={disabled ? true : undefined} tabIndex={disabled || _PrivateItemWrapper ? undefined : 0} aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`} aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined} {...props}>
-            <ItemWrapper>
-              <Selection_1.Selection selected={selected}/>
-              {slots.LeadingVisual}
-              <Box_1.default data-component="ActionList.Item--DividerContainer" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
-                <ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{ display: 'flex', flexGrow: 1 }}>
-                  <ConditionalBox if={Boolean(slots.InlineDescription)} sx={{ display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0 }}>
-                    <Box_1.default as="span" id={labelId} sx={{ flexGrow: slots.InlineDescription ? 0 : 1 }}>
-                      {props.children}
-                    </Box_1.default>
-                    {slots.InlineDescription}
-                  </ConditionalBox>
-                  {slots.TrailingVisual}
-                </ConditionalBox>
-                {slots.BlockDescription}
-              </Box_1.default>
-            </ItemWrapper>
-          </LiBox>)}
-      </Slots>);
-});
-exports.Item.displayName = 'ActionList.Item';
-const ConditionalBox = props => {
-    const { if: condition, ...rest } = props;
-    if (condition)
-        return <Box_1.default {...rest}>{props.children}</Box_1.default>;
-    else
-        return <>{props.children}</>;
-};

package/lib/ActionList2/LinkItem.jsx

@@ -1,28 +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.LinkItem = void 0;
-const react_1 = __importDefault(require("react"));
-const Link_1 = __importDefault(require("../Link"));
-const sx_1 = require("../sx");
-const Item_1 = require("./Item");
-exports.LinkItem = react_1.default.forwardRef(({ sx = {}, as: Component, ...props }, forwardedRef) => {
-    const styles = {
-        // occupy full size of Item
-        paddingX: 2,
-        paddingY: '6px',
-        display: 'flex',
-        flexGrow: 1,
-        borderRadius: 2,
-        // inherit Item styles
-        color: 'inherit',
-        '&:hover': { color: 'inherit', textDecoration: 'none' }
-    };
-    return (<Item_1.Item sx={{ paddingY: 0, paddingX: 0 }} _PrivateItemWrapper={({ children }) => (<Link_1.default as={Component} sx={sx_1.merge(styles, sx)} {...props} ref={forwardedRef}>
-          {children}
-        </Link_1.default>)}>
-      {props.children}
-    </Item_1.Item>);
-});

package/lib/ActionList2/List.jsx

@@ -1,41 +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.List = exports.ListContext = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const sx_1 = __importStar(require("../sx"));
-exports.ListContext = react_1.default.createContext({});
-const ListBox = styled_components_1.default.ul(sx_1.default);
-exports.List = react_1.default.forwardRef(({ variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props }, forwardedRef) => {
-    const styles = {
-        margin: 0,
-        paddingInlineStart: 0,
-        paddingY: variant === 'inset' ? 2 : 0
-    };
-    return (<ListBox sx={sx_1.merge(styles, sxProp)} aria-multiselectable={selectionVariant === 'multiple' ? true : undefined} {...props} ref={forwardedRef}>
-        <exports.ListContext.Provider value={{ variant, selectionVariant, showDividers }}>{props.children}</exports.ListContext.Provider>
-      </ListBox>);
-});
-exports.List.displayName = 'ActionList';

package/lib/ActionList2/Selection.jsx

@@ -1,50 +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.Selection = void 0;
-const react_1 = __importDefault(require("react"));
-const octicons_react_1 = require("@primer/octicons-react");
-const List_1 = require("./List");
-const Group_1 = require("./Group");
-const Visuals_1 = require("./Visuals");
-const Selection = ({ selected }) => {
-    const { selectionVariant: listSelectionVariant } = react_1.default.useContext(List_1.ListContext);
-    const { selectionVariant: groupSelectionVariant } = react_1.default.useContext(Group_1.GroupContext);
-    /** selectionVariant in Group can override the selectionVariant in List root */
-    const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant;
-    // if selectionVariant is not set on List, don't show selection
-    if (!selectionVariant) {
-        // to avoid confusion, fail loudly instead of silently ignoring
-        if (selected)
-            throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
-        return null;
-    }
-    if (selectionVariant === 'single') {
-        return <Visuals_1.LeadingVisualContainer>{selected && <octicons_react_1.CheckIcon />}</Visuals_1.LeadingVisualContainer>;
-    }
-    /**
-     * selectionVariant is 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
-     */
-    return (<Visuals_1.LeadingVisualContainer sx={{
-            rect: {
-                fill: selected ? 'accent.fg' : 'canvas.default',
-                stroke: selected ? 'accent.fg' : 'border.default'
-            },
-            path: {
-                fill: 'fg.onEmphasis',
-                boxShadow: 'shadow.small',
-                opacity: selected ? 1 : 0
-            }
-        }}>
-      <svg 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"/>
-      </svg>
-    </Visuals_1.LeadingVisualContainer>);
-};
-exports.Selection = Selection;

package/lib/ActionList2/Visuals.jsx

@@ -1,48 +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.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
-const react_1 = __importDefault(require("react"));
-const Box_1 = __importDefault(require("../Box"));
-const sx_1 = require("../sx");
-const constants_1 = require("../constants");
-const Item_1 = require("./Item");
-const LeadingVisualContainer = ({ sx = {}, ...props }) => {
-    return (<Box_1.default as="span" sx={sx_1.merge({
-            height: Item_1.TEXT_ROW_HEIGHT,
-            minWidth: constants_1.get('space.3'),
-            maxWidth: Item_1.TEXT_ROW_HEIGHT,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexShrink: 0,
-            marginRight: 2
-        }, sx)} {...props}/>);
-};
-exports.LeadingVisualContainer = LeadingVisualContainer;
-const LeadingVisual = ({ sx = {}, ...props }) => {
-    return (<Item_1.Slot name="LeadingVisual">
-      {({ variant, disabled }) => (<exports.LeadingVisualContainer sx={sx_1.merge({
-                color: Item_1.getVariantStyles(variant, disabled).iconColor,
-                svg: { fontSize: 0 }
-            }, sx)} {...props}>
-          {props.children}
-        </exports.LeadingVisualContainer>)}
-    </Item_1.Slot>);
-};
-exports.LeadingVisual = LeadingVisual;
-const TrailingVisual = ({ sx = {}, ...props }) => {
-    return (<Item_1.Slot name="TrailingVisual">
-      {({ variant, disabled }) => (<Box_1.default as="span" sx={sx_1.merge({
-                height: '20px',
-                flexShrink: 0,
-                color: Item_1.getVariantStyles(variant, disabled).annotationColor,
-                marginLeft: 2
-            }, sx)} {...props}>
-          {props.children}
-        </Box_1.default>)}
-    </Item_1.Slot>);
-};
-exports.TrailingVisual = TrailingVisual;