@primer/components 29.1.1-rc.0f976d3a → 30.0.0-rc.48fd5c94

package/docs/content/TextInput.md

@@ -9,11 +9,13 @@ TextInput is a form component to add default styling to the native text input.
 ## Default example
 
 ```jsx live
-<TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
+<>
+  <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
 
-<TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
+  <TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
 
-<TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
+  <TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
+</>
 ```
 
 ## Component props

package/docs/content/Timeline.md

@@ -13,13 +13,13 @@ The Timeline.Item component is used to display items on a vertical timeline, con
       <StyledOcticon icon={FlameIcon} />
     </Timeline.Badge>
     <Timeline.Body>
-      <Link href="#" sx={{fontWeight: 'bold', color: 'text.primary', mr: 1}} muted>
+      <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
         Monalisa
       </Link>
-      created one <Link href="#" sx={{fontWeight: 'bold', color: 'text.primary', mr: 1}} muted>
+      created one <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
         hot potato
       </Link>
-      <Link href="#" color="timeline.text" muted>
+      <Link href="#" color="fg.muted" muted>
         Just now
       </Link>
     </Timeline.Body>
@@ -50,20 +50,20 @@ of the child `StyledOcticon` if necessary.
 ```jsx live
 <Timeline>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: 'prState.closed.bg'}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: 'prState.closed.text'}} />
+    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
+      <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: 'prState.closed.bg'}}>
-      <StyledOcticon icon={FlameIcon} color="prState.open.text" />
+    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
+      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: 'prState.closed.bg'}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: 'prState.merged.text'}} />
+    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
+      <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when pull requests are merged</Timeline.Body>
   </Timeline.Item>
@@ -98,15 +98,15 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo
 ```jsx live
 <Timeline>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: 'prState.closed.bg'}}>
-      <StyledOcticon icon={FlameIcon} color="prState.closed.text" />
+    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
+      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Break />
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: 'prState.open.bg'}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: 'prState.open.text'}} />
+    <Timeline.Badge sx={{bg: "success.emphasis"}}>
+      <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>

package/docs/content/Tooltip.md

@@ -15,7 +15,7 @@ Before adding a tooltip, please consider: Is this information essential and nece
 ## Default example
 
 ```jsx live
-<Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} p={3}>
+<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
   <Tooltip aria-label="Hello, Tooltip!">Text with a tooltip</Tooltip>
 </Box>
 ```

package/docs/content/Truncate.md

@@ -29,10 +29,9 @@ You can override the maximum width of the truncated text with the `maxWidth` pro
 You can use the `inline` boolean prop for inline (or inline-block) elements with a fixed maximum width (default: 125px).
 
 ```jsx live
-  Some text with a{' '}
-  <Truncate as="strong" inline title="branch-name-that-is-really-long">
-    branch-name-that-is-really-long
-  </Truncate>
+<Truncate as="strong" inline title="branch-name-that-is-really-long">
+  Some text with a branch-name-that-is-really-long
+</Truncate>
 ```
 
 ## Expandable example

package/docs/content/anchoredPosition.mdx

@@ -130,7 +130,7 @@ export const AnchoredPositionExample = () => {
       >
         Floating element
       </Box>
-      <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2} width={400} height={75} ref={anchorElementRef as React.RefObject<HTMLDivElement>}>
+      <Box borderWidth='1px' borderStyle='solid' borderColor='border.default' borderRadius={2} width={400} height={75} ref={anchorElementRef as React.RefObject<HTMLDivElement>}>
         Anchor Element
       </Box>
     </div>

package/docs/content/getting-started.md

@@ -19,7 +19,9 @@ You can now import Primer React from the main package module:
 ```javascript
 // using import syntax
 import {Box, Flex} from '@primer/components'
+```
 
+```javascript
 // using require syntax
 const {Box, Flex} = require('@primer/components')
 ```
@@ -40,7 +42,9 @@ Module bundlers that use ECMAScript modules (ESM) will automatically tree-shake
 // using import syntax
 import Box from '@primer/components/lib/Box'
 import Flex from '@primer/components/lib/Flex'
+```
 
+```javascript
 // using require syntax
 const Box = require('@primer/components/lib/Box')
 const Flex = require('@primer/components/lib/Flex')
@@ -83,7 +87,7 @@ In order to set baseline color, font-family, and line-heights across your projec
 ```jsx
 import {BaseStyles, Box, Heading} from '@primer/components'
 
-export default const MyApp = () => (
+export default () => (
   <BaseStyles>
     <Box m={4}>
       <Heading mb={2}>Hello, world!</Heading>
@@ -115,7 +119,7 @@ Ever since `@types/styled-components` version `4.1.19`, it has had a dependency
 
 You may run into this conflict even if you're not importing anything from `react-native` or don't have it installed. This is because some package managers hoist packages to the top-level `node_modules` folder, and the TypeScript compiler automatically includes types from all folders in `node_modules/@types` by default.
 
-The TypeScript compiler allows you to opt-out of this behavior [using the `typeRoots` and `types` configuration options](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types), and the best solution for this error — for now — seems to be to opt out the automatic inclusion of `node_modules/@types` and instead list the types you want to be included individually.
+The TypeScript compiler allows you to opt-out of this behavior [using the `typeRoots` and `types` configuration options](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types), and the best solution for this error — for now — seems to be to opt out the automatic inclusion of `node_modules/@types` and instead list the types you want to be included individually.
 
 In your `tsconfig.json`, set the `types` array under the `compilerOptions` like so:
 

package/docs/content/linting.md

@@ -23,7 +23,7 @@ description: Primer React offers an ESLint plugin to enforce best practices and
 
 2. In your [ESLint configuration file](https://eslint.org/docs/user-guide/configuring/configuration-files), extend the recommended Primer React ESLint config:
 
-   ```js
+   ```json
    {
      "extends": [
        // ...

package/docs/content/overriding-styles.mdx

@@ -18,17 +18,19 @@ The `sx` prop provides a lot of power, which means it is an easy tool to abuse.
 This example demonstrates applying a bottom border to `Heading`, a component that does not receive `BORDER` system props. The `borderBottomWidth` value comes from `theme.borderWidths` and `borderBottomColor` comes from `theme.colors`.
 
 ```jsx live
-<Heading pb={2}>Heading</Heading>
+<>
+  <Heading pb={2}>Heading</Heading>
 
-<Heading
-  pb={2}
-  sx={{
-    borderBottomWidth: 1,
-    borderBottomColor: 'border.primary',
-    borderBottomStyle: 'solid'
-  }}>
-    Heading with bottom border
-</Heading>
+  <Heading
+    pb={2}
+    sx={{
+      borderBottomWidth: 1,
+      borderBottomColor: 'border.primary',
+      borderBottomStyle: 'solid'
+    }}>
+      Heading with bottom border
+  </Heading>
+</>
 ```
 
 ## Responsive values
@@ -39,7 +41,7 @@ Just like [values passed to system props](https://styled-system.com/responsive-s
 <Box
   borderWidth="1px"
   borderStyle="solid"
-  borderColor="border.primary"
+  borderColor="border.default"
   borderRadius={2}
   p={2}
   sx={{
@@ -59,7 +61,7 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
   sx={{
     '> *': {
       borderWidth: 1,
-      borderColor: 'border.primary',
+      borderColor: "border.default",
       borderStyle: 'solid',
       borderBottomWidth: 0,
       padding: 2,
@@ -67,7 +69,7 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
         borderBottomWidth: 1
       },
       ':hover': {
-        bg: 'border.tertiary'
+        bg: "neutral.muted"
       }
     }
   }}

package/docs/content/primer-theme.md

@@ -51,7 +51,7 @@ There are two ways to change the theme of Primer components:
    import {ThemeProvider} from `styled-components`
    import {theme} from '@primer/components'
 
-   const customTheme = { ... }
+   const customTheme = {} // Theme overrides
 
    const App = (props) => {
      return (

package/docs/content/theming.md

@@ -66,8 +66,8 @@ const theme = {
 function App() {
   return (
     <ThemeProvider theme={theme}>
-      <Box bg="bg.primary"></Box>
-      <Box sx={{bg: 'bg.primary'}}></Box>
+      <Box bg="canvas.default"></Box>
+      <Box sx={{bg: "canvas.default"}}></Box>
     </ThemeProvider>
   )
 }
@@ -84,7 +84,7 @@ import {themeGet} from '@primer/components'
 import styled from 'styled-components'
 
 const Example = styled.div`
-  background-color: ${themeGet('colors.bg.primary')};
+  background-color: ${themeGet("colors.canvas.default")};
 `
 ```
 
@@ -203,8 +203,8 @@ const customTheme = deepmerge(theme, {
     },
     // Add a new scheme
     my_scheme_name: {
-      colors: {...},
-      shadows: {...}
+      colors: {},
+      shadows: {}
     }
   }
 })

package/docs/content/useOnEscapePress.mdx

@@ -28,11 +28,11 @@ const OverlayDemo = ({onEscape, children}) => {
 function DemoComponent() {
   const [isOpen, setIsOpen] = React.useState(false)
   const toggleOverlay = React.useCallback(() => {
-    setIsOpen(!isOpen)
-  })
+    setIsOpen(isOpen => !isOpen)
+  }, [])
   const closeOverlay = React.useCallback(() => {
     setIsOpen(false)
-  })
+  }, [])
   return (
     <>
       <Button onClick={toggleOverlay}>toggle</Button>

package/docs/content/useOnOutsideClick.mdx

@@ -33,7 +33,7 @@ You can also pass an array of `ignoredRefs` to prevent calling the callback func
           <Box
             borderWidth="1px"
             borderStyle="solid"
-            borderColor="border.primary"
+            borderColor="border.default"
             borderRadius={2}
             height="200px"
             bg="green.4"

package/lib/Breadcrumbs.d.ts

@@ -0,0 +1,40 @@
+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, 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;
+} & 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;
+    } & SystemCommonProps & SxProp, never>;
+};
+export default _default;
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+export declare const Breadcrumb: typeof Breadcrumbs & {
+    Item: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+        selected?: boolean | undefined;
+    } & SystemCommonProps & SxProp, never>;
+};
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
+export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>;
+/**
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
+ */
+export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;

package/lib/{Breadcrumb.js → Breadcrumbs.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Breadcrumb = exports.default = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -24,30 +24,28 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const SELECTED_CLASS = 'selected';
 
 const Wrapper = _styledComponents.default.li.withConfig({
-  displayName: "Breadcrumb__Wrapper",
-  componentId: "c1r3ff-0"
+  displayName: "Breadcrumbs__Wrapper",
+  componentId: "hwwoo0-0"
 })(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'));
 
-const BreadcrumbBase = _styledComponents.default.nav.withConfig({
-  displayName: "Breadcrumb__BreadcrumbBase",
-  componentId: "c1r3ff-1"
+const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsBase",
+  componentId: "hwwoo0-1"
 })(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
 
-function Breadcrumb({
+function Breadcrumbs({
   className,
   children,
   theme,
   ...rest
 }) {
-  const classes = (0, _classnames.default)(className, 'Breadcrumb');
-
   const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
     theme: theme
   }, child));
 
-  return /*#__PURE__*/_react.default.createElement(BreadcrumbBase, _extends({
-    className: classes,
-    "aria-label": "breadcrumb",
+  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, _extends({
+    className: className,
+    "aria-label": "Breadcrumbs",
     theme: theme
   }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "ol",
@@ -56,22 +54,34 @@ function Breadcrumb({
   }, wrappedChildren));
 }
 
-Breadcrumb.displayName = "Breadcrumb";
+Breadcrumbs.displayName = "Breadcrumbs";
 
-const BreadcrumbItem = _styledComponents.default.a.attrs(props => ({
+const BreadcrumbsItem = _styledComponents.default.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: (0, _classnames.default)(props.selected && SELECTED_CLASS, props.className),
   'aria-current': props.selected ? 'page' : null
 })).withConfig({
-  displayName: "Breadcrumb__BreadcrumbItem",
-  componentId: "c1r3ff-2"
+  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'), _constants.COMMON, _sx.default);
 
-Breadcrumb.displayName = 'Breadcrumb';
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
+Breadcrumbs.displayName = 'Breadcrumbs';
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+
+var _default = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
+});
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+
 
-var _default = Object.assign(Breadcrumb, {
-  Item: BreadcrumbItem
+exports.default = _default;
+const Breadcrumb = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
 });
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
 
-exports.default = _default;
+exports.Breadcrumb = Breadcrumb;

package/lib/__tests__/{Breadcrumb.js → Breadcrumbs.js}

@@ -17,26 +17,24 @@ require("babel-polyfill");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 expect.extend(_jestAxe.toHaveNoViolations);
-describe('Breadcrumb', () => {
+describe('Breadcrumbs', () => {
   (0, _testing.behavesAsComponent)({
-    Component: _.Breadcrumb,
+    Component: _.Breadcrumbs,
     systemPropArray: [_constants.COMMON]
   });
-  (0, _testing.checkExports)('Breadcrumb', {
-    default: _.Breadcrumb
+  (0, _testing.checkExports)('Breadcrumbs', {
+    default: _.Breadcrumbs,
+    Breadcrumb: _.Breadcrumb
   });
   it('should have no axe violations', async () => {
     const {
       container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumb, null));
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumbs, null));
     const results = await (0, _jestAxe.axe)(container);
     expect(results).toHaveNoViolations();
     (0, _react2.cleanup)();
   });
   it('renders a <nav>', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumb, null)).type).toEqual('nav');
-  });
-  it('adds the Breadcrumb class', () => {
-    expect((0, _testing.rendersClass)( /*#__PURE__*/_react.default.createElement(_.Breadcrumb, null), 'Breadcrumb')).toEqual(true);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumbs, null)).type).toEqual('nav');
   });
 });

package/lib/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js}

@@ -17,24 +17,24 @@ var _testing = require("../utils/testing");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 expect.extend(_jestAxe.toHaveNoViolations);
-describe('Breadcrumb.Item', () => {
+describe('Breadcrumbs.Item', () => {
   (0, _testing.behavesAsComponent)({
-    Component: _.Breadcrumb.Item,
+    Component: _.Breadcrumbs.Item,
     systemPropArray: [_constants.COMMON]
   });
   it('renders an <a> by default', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumb.Item, null)).type).toEqual('a');
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, null)).type).toEqual('a');
   });
   it('should have no axe violations', async () => {
     const {
       container
-    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumb.Item, null));
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, null));
     const results = await (0, _jestAxe.axe)(container);
     expect(results).toHaveNoViolations();
     (0, _react.cleanup)();
   });
   it('respects the "selected" prop', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumb.Item, {
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, {
       selected: true
     }))).toMatchSnapshot();
   });
@@ -44,7 +44,7 @@ describe('Breadcrumb.Item', () => {
       ...props
     }) => /*#__PURE__*/_react2.default.createElement("div", props);
 
-    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumb.Item, {
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, {
       as: Link,
       to: "#"
     }))).toMatchSnapshot();

package/lib/index.d.ts

@@ -32,8 +32,8 @@ export { default as AvatarStack } from './AvatarStack';
 export type { AvatarStackProps } from './AvatarStack';
 export { default as BranchName } from './BranchName';
 export type { BranchNameProps } from './BranchName';
-export { default as Breadcrumb } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';
+export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumbs';
 export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
 export type { ButtonProps, ButtonDangerProps, ButtonOutlineProps, ButtonPrimaryProps, ButtonInvisibleProps, ButtonTableListProps, ButtonCloseProps, ButtonGroupProps } from './Button';
 export { default as Caret } from './Caret';

package/lib/index.js

@@ -177,10 +177,16 @@ Object.defineProperty(exports, "BranchName", {
     return _BranchName.default;
   }
 });
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function () {
+    return _Breadcrumbs.default;
+  }
+});
 Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function () {
-    return _Breadcrumb.default;
+    return _Breadcrumbs.Breadcrumb;
   }
 });
 Object.defineProperty(exports, "Button", {
@@ -510,7 +516,7 @@ var _AvatarStack = _interopRequireDefault(require("./AvatarStack"));
 
 var _BranchName = _interopRequireDefault(require("./BranchName"));
 
-var _Breadcrumb = _interopRequireDefault(require("./Breadcrumb"));
+var _Breadcrumbs = _interopRequireWildcard(require("./Breadcrumbs"));
 
 var _Button = _interopRequireWildcard(require("./Button"));
 

package/lib-esm/Breadcrumbs.d.ts

@@ -0,0 +1,40 @@
+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, 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;
+} & 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;
+    } & SystemCommonProps & SxProp, never>;
+};
+export default _default;
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+export declare const Breadcrumb: typeof Breadcrumbs & {
+    Item: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+        selected?: boolean | undefined;
+    } & SystemCommonProps & SxProp, never>;
+};
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
+export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>;
+/**
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
+ */
+export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;