@primer/components 31.2.0-rc.fbb10090 → 31.2.0

package/lib/ActionList2/Item.jsx

@@ -0,0 +1,174 @@
+"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: 'fg.muted',
+            iconColor: 'fg.muted',
+            annotationColor: 'fg.muted'
+        };
+    }
+    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,
+        textDecoration: 'none',
+        ':not([aria-disabled])': { cursor: 'pointer' },
+        '@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} disabled={disabled}/>
+              {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.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+import { ItemProps } from './Item';
+declare type LinkProps = {
+    download?: string;
+    href?: string;
+    hrefLang?: string;
+    media?: string;
+    ping?: string;
+    rel?: string;
+    target?: string;
+    type?: string;
+    referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
+};
+declare type LinkItemProps = Pick<ItemProps, 'children' | 'sx'> & LinkProps;
+export declare const LinkItem: PolymorphicForwardRefComponent<"a", LinkItemProps>;
+export {};

package/lib/ActionList2/LinkItem.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkItem = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Link = _interopRequireDefault(require("../Link"));
+
+var _sx = require("../sx");
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const LinkItem = /*#__PURE__*/_react.default.forwardRef(({
+  sx = {},
+  as: Component,
+  ...props
+}, forwardedRef) => {
+  const styles = {
+    // occupy full size of Item
+    paddingX: 2,
+    paddingY: '6px',
+    // custom value off the scale
+    display: 'flex',
+    flexGrow: 1,
+    // full width
+    borderRadius: 2,
+    // inherit Item styles
+    color: 'inherit',
+    '&:hover': {
+      color: 'inherit',
+      textDecoration: 'none'
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Item.Item, {
+    sx: {
+      paddingY: 0,
+      paddingX: 0
+    },
+    _PrivateItemWrapper: ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_Link.default, _extends({
+      as: Component,
+      sx: (0, _sx.merge)(styles, sx)
+    }, props, {
+      ref: forwardedRef
+    }), children)
+  }, props.children);
+});
+
+exports.LinkItem = LinkItem;

package/lib/ActionList2/LinkItem.jsx

@@ -0,0 +1,28 @@
+"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.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+import { SxProp } from '../sx';
+import { AriaRole } from '../utils/types';
+export declare type ListProps = {
+    /**
+     * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
+     */
+    variant?: 'inset' | 'full';
+    /**
+     * Whether multiple Items or a single Item can be selected.
+     */
+    selectionVariant?: 'single' | 'multiple';
+    /**
+     * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
+     */
+    showDividers?: boolean;
+    /**
+     * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
+     */
+    role?: AriaRole;
+} & SxProp;
+declare type ContextProps = Omit<ListProps, 'sx'>;
+export declare const ListContext: React.Context<ContextProps>;
+export declare const List: PolymorphicForwardRefComponent<"ul", ListProps>;
+export {};

package/lib/ActionList2/List.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = exports.ListContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _sx = _interopRequireWildcard(require("../sx"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const ListContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.ListContext = ListContext;
+
+const ListBox = _styledComponents.default.ul.withConfig({
+  displayName: "List__ListBox",
+  componentId: "cvbq60-0"
+})(_sx.default);
+
+const List = /*#__PURE__*/_react.default.forwardRef(({
+  variant = 'inset',
+  selectionVariant,
+  showDividers = false,
+  sx: sxProp = {},
+  ...props
+}, forwardedRef) => {
+  const styles = {
+    margin: 0,
+    paddingInlineStart: 0,
+    // reset ul styles
+    paddingY: variant === 'inset' ? 2 : 0
+  };
+  return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
+    sx: (0, _sx.merge)(styles, sxProp),
+    "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
+  }, props, {
+    ref: forwardedRef
+  }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
+    value: {
+      variant,
+      selectionVariant,
+      showDividers
+    }
+  }, props.children));
+});
+
+exports.List = List;
+List.displayName = 'ActionList';

package/lib/ActionList2/List.jsx

@@ -0,0 +1,41 @@
+"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.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ItemProps } from './Item';
+declare type SelectionProps = Pick<ItemProps, 'selected' | 'disabled'>;
+export declare const Selection: React.FC<SelectionProps>;
+export {};

package/lib/ActionList2/Selection.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Selection = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _List = require("./List");
+
+var _Group = require("./Group");
+
+var _Visuals = require("./Visuals");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Selection = ({
+  selected,
+  disabled
+}) => {
+  const {
+    selectionVariant: listSelectionVariant
+  } = _react.default.useContext(_List.ListContext);
+
+  const {
+    selectionVariant: groupSelectionVariant
+  } = _react.default.useContext(_Group.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 /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
+  }
+  /**
+   * selectionVariant is 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
+   */
+
+
+  return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, {
+    sx: {
+      input: {
+        margin: 0,
+        pointerEvents: 'none'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    checked: selected,
+    disabled: disabled,
+    tabIndex: -1,
+    readOnly: true,
+    "aria-readonly": "false"
+  }));
+};
+
+exports.Selection = Selection;
+Selection.displayName = "Selection";

package/lib/ActionList2/Selection.jsx

@@ -0,0 +1,36 @@
+"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, disabled }) => {
+    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
+     * 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
+     */
+    return (<Visuals_1.LeadingVisualContainer sx={{ input: { margin: 0, pointerEvents: 'none' } }}>
+      <input type="checkbox" checked={selected} disabled={disabled} tabIndex={-1} readOnly aria-readonly="false"/>
+    </Visuals_1.LeadingVisualContainer>);
+};
+exports.Selection = Selection;

package/lib/ActionList2/Visuals.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SxProp } from '../sx';
+declare type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>;
+export declare const LeadingVisualContainer: React.FC<VisualProps>;
+export declare type LeadingVisualProps = VisualProps;
+export declare const LeadingVisual: React.FC<VisualProps>;
+export declare type TrailingVisualProps = VisualProps;
+export declare const TrailingVisual: React.FC<VisualProps>;
+export {};

package/lib/ActionList2/Visuals.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = require("../sx");
+
+var _constants = require("../constants");
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const LeadingVisualContainer = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "span",
+    sx: (0, _sx.merge)({
+      height: _Item.TEXT_ROW_HEIGHT,
+      // match height of text row
+      minWidth: (0, _constants.get)('space.3'),
+      maxWidth: _Item.TEXT_ROW_HEIGHT,
+      // square (same as height)
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 0,
+      marginRight: 2
+    }, sx)
+  }, props));
+};
+
+exports.LeadingVisualContainer = LeadingVisualContainer;
+LeadingVisualContainer.displayName = "LeadingVisualContainer";
+
+const LeadingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: "LeadingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, _extends({
+    sx: (0, _sx.merge)({
+      color: (0, _Item.getVariantStyles)(variant, disabled).iconColor,
+      svg: {
+        fontSize: 0
+      }
+    }, sx)
+  }, props), props.children));
+};
+
+exports.LeadingVisual = LeadingVisual;
+LeadingVisual.displayName = "LeadingVisual";
+
+const TrailingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: "TrailingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "span",
+    sx: (0, _sx.merge)({
+      height: '20px',
+      // match height of text row
+      flexShrink: 0,
+      color: (0, _Item.getVariantStyles)(variant, disabled).annotationColor,
+      marginLeft: 2
+    }, sx)
+  }, props), props.children));
+};
+
+exports.TrailingVisual = TrailingVisual;
+TrailingVisual.displayName = "TrailingVisual";

package/lib/ActionList2/Visuals.jsx

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