@primer/components 0.0.0-2021827223713 → 0.0.0-2021828162730

package/lib/ActionList/Item.d.ts

@@ -2,10 +2,12 @@ import { IconProps } from '@primer/octicons-react';
 import React from 'react';
 import { SxProp } from '../sx';
 import { ItemInput } from './List';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+import { AriaRole } from '../utils/types';
 /**
  * Contract for props passed to the `Item` component.
  */
-export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
+export interface ItemProps extends SxProp {
     /**
      * Primary text which names an `Item`.
      */
@@ -68,6 +70,18 @@ export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
      * An id associated with this item.  Should be unique between items
      */
     id?: number | string;
+    /**
+     * Node to be included inside the item before the text.
+     */
+    children?: React.ReactNode;
+    /**
+     * The ARIA role describing the function of `List` component. `option` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * An item to pass back in the `onAction` callback, meant as
+     */
+    item?: ItemInput;
 }
 export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
     dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
@@ -75,6 +89,5 @@ export declare const TextContainer: import("styled-components").StyledComponent<
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
-export declare function Item(itemProps: Partial<ItemProps> & {
-    item?: ItemInput;
-}): JSX.Element;
+declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
+export { Item };

package/lib/ActionList/Item.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Item = Item;
-exports.TextContainer = void 0;
+exports.Item = exports.TextContainer = void 0;
 
 var _octiconsReact = require("@primer/octicons-react");
 
@@ -90,7 +89,7 @@ const getItemVariant = (variant = 'default', disabled) => {
 
     default:
       return {
-        color: 'inherit',
+        color: (0, _constants.get)('colors.fg.default'),
         iconColor: (0, _constants.get)('colors.fg.muted'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
         hoverCursor: 'pointer'
@@ -111,7 +110,7 @@ const MainContent = _styledComponents.default.div.withConfig({
 const StyledItem = _styledComponents.default.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
@@ -178,8 +177,9 @@ const MultiSelectInput = _styledComponents.default.input.withConfig({
  */
 
 
-function Item(itemProps) {
+const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
   const {
+    as: Component,
     text,
     description,
     descriptionVariant = 'inline',
@@ -235,6 +235,8 @@ function Item(itemProps) {
     theme
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/_react.default.createElement(StyledItem, _extends({
+    ref: ref,
+    as: Component,
     tabIndex: disabled ? undefined : -1,
     variant: variant,
     showDivider: showDivider,
@@ -280,6 +282,6 @@ function Item(itemProps) {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));
-}
+});
 
-Item.displayName = "Item";
+exports.Item = Item;

package/lib/ActionList/List.d.ts

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { Key } from 'react';
 import type { AriaRole } from '../utils/types';
 import { Group, GroupProps } from './Group';
-import { Item, ItemProps } from './Item';
-export declare type ItemInput = ItemProps | (Partial<ItemProps> & {
-    renderItem: typeof Item;
+import { ItemProps } from './Item';
+declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
+export declare type ItemInput = ItemProps | ((Partial<ItemProps> & {
+    renderItem: RenderItemFn;
+}) & {
+    key?: Key;
 });
 /**
  * Contract for props passed to the `List` component.
@@ -26,7 +29,7 @@ export interface ListPropsBase {
      * without a `Group`-level or `Item`-level custom `Item` renderer will be
      * rendered using this function component.
      */
-    renderItem?: typeof Item;
+    renderItem?: RenderItemFn;
     /**
      * A `List`-level custom `Group` renderer. Every `Group` within this `List`
      * without a `Group`-level custom `Item` renderer will be rendered using
@@ -58,7 +61,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Group`-level custom `Item` or `Group` renderers.
      */
     groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
-        renderItem?: typeof Item;
+        renderItem?: RenderItemFn;
         renderGroup?: typeof Group;
     }, 'items'>) & {
         groupId: string;
@@ -68,7 +71,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Item`-level custom `Item` renderers.
      */
     items: ((ItemProps | (Partial<ItemProps> & {
-        renderItem: typeof Item;
+        renderItem: RenderItemFn;
     })) & {
         groupId: string;
     })[];
@@ -81,3 +84,4 @@ export declare type ListProps = ListPropsBase | GroupedListProps;
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
  */
 export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/ActionList/List.js

@@ -106,11 +106,11 @@ const List = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) => {
 
 
   const renderItem = (itemProps, item, itemIndex) => {
-    var _ref2, _itemProps$key, _itemProps$id;
+    var _ref2, _ref3, _itemProps$id;
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || _Item.Item;
-    const key = (_ref2 = (_itemProps$key = itemProps.key) !== null && _itemProps$key !== void 0 ? _itemProps$key : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
+    const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
     return /*#__PURE__*/_react.default.createElement(ItemComponent, _extends({
       showDivider: props.showItemDividers,
       selectionVariant: props.selectionVariant

package/lib/ActionList/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { Group } from './Group';
-import { Item } from './Item';
 import { Divider } from './Divider';
 export type { ListProps as ActionListProps } from './List';
 export type { GroupProps } from './Group';
@@ -12,7 +11,7 @@ export declare const ActionList: import("react").ForwardRefExoticComponent<impor
     /** Collects related `Items` in an `ActionList`. */
     Group: typeof Group;
     /** An actionable or selectable `Item` with an optional icon and description. */
-    Item: typeof Item;
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
     /** Visually separates `Item`s or `Group`s in an `ActionList`. */
     Divider: typeof Divider;
 };

package/lib/Breadcrumbs.d.ts

@@ -1,25 +1,24 @@
 import * as History from 'history';
 import React from 'react';
+import { SystemCommonProps, SystemFlexProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
-export declare type BreadcrumbsProps = React.PropsWithChildren<{
-    className?: string;
-} & SxProp>;
-declare function Breadcrumbs({ className, children, sx: sxProp }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
+declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
+declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
 declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp, never>;
 export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
 declare const _default: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SxProp, never>;
+    } & SystemCommonProps & SxProp, never>;
 };
 export default _default;
 /**
@@ -29,7 +28,7 @@ export declare const Breadcrumb: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SxProp, never>;
+    } & SystemCommonProps & SxProp, never>;
 };
 /**
  * @deprecated Use the `BreadcrumbsProps` type instead

package/lib/Breadcrumbs.js

@@ -19,6 +19,8 @@ var _sx = _interopRequireDefault(require("./sx"));
 
 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 SELECTED_CLASS = 'selected';
 
 const Wrapper = _styledComponents.default.li.withConfig({
@@ -29,20 +31,23 @@ const Wrapper = _styledComponents.default.li.withConfig({
 const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
   componentId: "hwwoo0-1"
-})(["display:flex;justify-content:space-between;", ";"], _sx.default);
+})(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
 
 function Breadcrumbs({
   className,
   children,
-  sx: sxProp
+  theme,
+  ...rest
 }) {
-  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, null, child));
+  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
+    theme: theme
+  }, child));
 
-  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, {
+  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, _extends({
     className: className,
     "aria-label": "Breadcrumbs",
-    sx: sxProp
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    theme: theme
+  }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "ol",
     my: 0,
     pl: 0
@@ -58,7 +63,7 @@ const BreadcrumbsItem = _styledComponents.default.a.attrs(props => ({
 })).withConfig({
   displayName: "Breadcrumbs__BreadcrumbsItem",
   componentId: "hwwoo0-2"
-})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", ";"], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), _sx.default);
+})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
 
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';

package/lib-esm/ActionList/Item.d.ts

@@ -2,10 +2,12 @@ import { IconProps } from '@primer/octicons-react';
 import React from 'react';
 import { SxProp } from '../sx';
 import { ItemInput } from './List';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+import { AriaRole } from '../utils/types';
 /**
  * Contract for props passed to the `Item` component.
  */
-export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
+export interface ItemProps extends SxProp {
     /**
      * Primary text which names an `Item`.
      */
@@ -68,6 +70,18 @@ export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
      * An id associated with this item.  Should be unique between items
      */
     id?: number | string;
+    /**
+     * Node to be included inside the item before the text.
+     */
+    children?: React.ReactNode;
+    /**
+     * The ARIA role describing the function of `List` component. `option` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * An item to pass back in the `onAction` callback, meant as
+     */
+    item?: ItemInput;
 }
 export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
     dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
@@ -75,6 +89,5 @@ export declare const TextContainer: import("styled-components").StyledComponent<
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
-export declare function Item(itemProps: Partial<ItemProps> & {
-    item?: ItemInput;
-}): JSX.Element;
+declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
+export { Item };

package/lib-esm/ActionList/Item.js

@@ -11,10 +11,10 @@ import { StyledDivider } from './Divider';
 import { useColorSchemeVar, useTheme } from '../ThemeProvider';
 import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
 import { useSSRSafeId } from '@react-aria/ssr';
+
 /**
  * These colors are not yet in our default theme.  Need to remove this once they are added.
  */
-
 const customItemThemes = {
   default: {
     hover: {
@@ -66,7 +66,7 @@ const getItemVariant = (variant = 'default', disabled) => {
 
     default:
       return {
-        color: 'inherit',
+        color: get('colors.fg.default'),
         iconColor: get('colors.fg.muted'),
         annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
@@ -85,7 +85,7 @@ const MainContent = styled.div.withConfig({
 const StyledItem = styled.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
@@ -144,8 +144,9 @@ const MultiSelectInput = styled.input.withConfig({
  * An actionable or selectable `Item` with an optional icon and description.
  */
 
-export function Item(itemProps) {
+const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
   const {
+    as: Component,
     text,
     description,
     descriptionVariant = 'inline',
@@ -201,6 +202,8 @@ export function Item(itemProps) {
     theme
   } = useTheme();
   return /*#__PURE__*/React.createElement(StyledItem, _extends({
+    ref: ref,
+    as: Component,
     tabIndex: disabled ? undefined : -1,
     variant: variant,
     showDivider: showDivider,
@@ -246,5 +249,5 @@ export function Item(itemProps) {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
-}
-Item.displayName = "Item";
+});
+export { Item };

package/lib-esm/ActionList/List.d.ts

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { Key } from 'react';
 import type { AriaRole } from '../utils/types';
 import { Group, GroupProps } from './Group';
-import { Item, ItemProps } from './Item';
-export declare type ItemInput = ItemProps | (Partial<ItemProps> & {
-    renderItem: typeof Item;
+import { ItemProps } from './Item';
+declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
+export declare type ItemInput = ItemProps | ((Partial<ItemProps> & {
+    renderItem: RenderItemFn;
+}) & {
+    key?: Key;
 });
 /**
  * Contract for props passed to the `List` component.
@@ -26,7 +29,7 @@ export interface ListPropsBase {
      * without a `Group`-level or `Item`-level custom `Item` renderer will be
      * rendered using this function component.
      */
-    renderItem?: typeof Item;
+    renderItem?: RenderItemFn;
     /**
      * A `List`-level custom `Group` renderer. Every `Group` within this `List`
      * without a `Group`-level custom `Item` renderer will be rendered using
@@ -58,7 +61,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Group`-level custom `Item` or `Group` renderers.
      */
     groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
-        renderItem?: typeof Item;
+        renderItem?: RenderItemFn;
         renderGroup?: typeof Group;
     }, 'items'>) & {
         groupId: string;
@@ -68,7 +71,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Item`-level custom `Item` renderers.
      */
     items: ((ItemProps | (Partial<ItemProps> & {
-        renderItem: typeof Item;
+        renderItem: RenderItemFn;
     })) & {
         groupId: string;
     })[];
@@ -81,3 +84,4 @@ export declare type ListProps = ListPropsBase | GroupedListProps;
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
  */
 export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib-esm/ActionList/List.js

@@ -90,11 +90,11 @@ export const List = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
 
 
   const renderItem = (itemProps, item, itemIndex) => {
-    var _ref2, _itemProps$key, _itemProps$id;
+    var _ref2, _ref3, _itemProps$id;
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || Item;
-    const key = (_ref2 = (_itemProps$key = itemProps.key) !== null && _itemProps$key !== void 0 ? _itemProps$key : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
+    const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
     return /*#__PURE__*/React.createElement(ItemComponent, _extends({
       showDivider: props.showItemDividers,
       selectionVariant: props.selectionVariant

package/lib-esm/ActionList/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { Group } from './Group';
-import { Item } from './Item';
 import { Divider } from './Divider';
 export type { ListProps as ActionListProps } from './List';
 export type { GroupProps } from './Group';
@@ -12,7 +11,7 @@ export declare const ActionList: import("react").ForwardRefExoticComponent<impor
     /** Collects related `Items` in an `ActionList`. */
     Group: typeof Group;
     /** An actionable or selectable `Item` with an optional icon and description. */
-    Item: typeof Item;
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
     /** Visually separates `Item`s or `Group`s in an `ActionList`. */
     Divider: typeof Divider;
 };

package/lib-esm/Breadcrumbs.d.ts

@@ -1,25 +1,24 @@
 import * as History from 'history';
 import React from 'react';
+import { SystemCommonProps, SystemFlexProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
-export declare type BreadcrumbsProps = React.PropsWithChildren<{
-    className?: string;
-} & SxProp>;
-declare function Breadcrumbs({ className, children, sx: sxProp }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
+declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
+declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
 declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp, never>;
 export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
 declare const _default: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SxProp, never>;
+    } & SystemCommonProps & SxProp, never>;
 };
 export default _default;
 /**
@@ -29,7 +28,7 @@ export declare const Breadcrumb: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SxProp, never>;
+    } & SystemCommonProps & SxProp, never>;
 };
 /**
  * @deprecated Use the `BreadcrumbsProps` type instead

package/lib-esm/Breadcrumbs.js

@@ -1,9 +1,11 @@
+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); }
+
 import classnames from 'classnames'; // eslint-disable-next-line import/no-namespace
 
 import React from 'react';
 import styled from 'styled-components';
 import Box from './Box';
-import { get } from './constants';
+import { COMMON, FLEX, get } from './constants';
 import sx from './sx';
 const SELECTED_CLASS = 'selected';
 const Wrapper = styled.li.withConfig({
@@ -13,19 +15,22 @@ const Wrapper = styled.li.withConfig({
 const BreadcrumbsBase = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
   componentId: "hwwoo0-1"
-})(["display:flex;justify-content:space-between;", ";"], sx);
+})(["display:flex;justify-content:space-between;", ";", ";", ";"], COMMON, FLEX, sx);
 
 function Breadcrumbs({
   className,
   children,
-  sx: sxProp
+  theme,
+  ...rest
 }) {
-  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, null, child));
-  return /*#__PURE__*/React.createElement(BreadcrumbsBase, {
+  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, {
+    theme: theme
+  }, child));
+  return /*#__PURE__*/React.createElement(BreadcrumbsBase, _extends({
     className: className,
     "aria-label": "Breadcrumbs",
-    sx: sxProp
-  }, /*#__PURE__*/React.createElement(Box, {
+    theme: theme
+  }, rest), /*#__PURE__*/React.createElement(Box, {
     as: "ol",
     my: 0,
     pl: 0
@@ -40,7 +45,7 @@ const BreadcrumbsItem = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "Breadcrumbs__BreadcrumbsItem",
   componentId: "hwwoo0-2"
-})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), sx);
+})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 export default Object.assign(Breadcrumbs, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021827223713",
+  "version": "0.0.0-2021828162730",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,6 +45,7 @@
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
     "@primer/primitives": "4.7.1",
+    "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",