@primer/components 0.0.0-2021113144816 → 0.0.0-2021113174023

package/lib/Autocomplete/AutocompleteOverlay.jsx

@@ -0,0 +1,55 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../hooks");
+const Overlay_1 = __importDefault(require("../Overlay"));
+const AutocompleteContext_1 = require("./AutocompleteContext");
+const useCombinedRefs_1 = require("../hooks/useCombinedRefs");
+function AutocompleteOverlay({ menuAnchorRef, overlayProps, children }) {
+    const autocompleteContext = react_1.useContext(AutocompleteContext_1.AutocompleteContext);
+    if (autocompleteContext === null) {
+        throw new Error('AutocompleteContext returned null values');
+    }
+    const { inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false } = autocompleteContext;
+    const { floatingElementRef, position } = hooks_1.useAnchoredPosition({
+        side: 'outside-bottom',
+        align: 'start',
+        anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef
+    }, [showMenu, selectedItemLength]);
+    const combinedOverlayRef = useCombinedRefs_1.useCombinedRefs(scrollContainerRef, floatingElementRef);
+    const closeOptionList = react_1.useCallback(() => {
+        setShowMenu(false);
+    }, [setShowMenu]);
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    return (<Overlay_1.default returnFocusRef={inputRef} preventFocusOnOpen={true} onClickOutside={closeOptionList} onEscape={closeOptionList} ref={combinedOverlayRef} top={position?.top} left={position?.left} visibility={showMenu ? 'visible' : 'hidden'} sx={{
+            overflow: 'auto'
+        }} {...overlayProps}>
+      {children}
+    </Overlay_1.default>);
+}
+AutocompleteOverlay.displayName = 'AutocompleteOverlay';
+exports.default = AutocompleteOverlay;

package/lib/Autocomplete/index.js

@@ -1,15 +1,8 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Autocomplete.default;
-  }
-});
-
-var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Autocomplete_1 = require("./Autocomplete");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Autocomplete_1).default; } });

package/lib/Avatar.d.ts

@@ -1,3 +1,4 @@
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Avatar: import("styled-components").StyledComponent<"img", any, {
@@ -9,6 +10,6 @@ declare const Avatar: import("styled-components").StyledComponent<"img", any, {
     src: string;
     /** Provide alt text when the Avatar is used without the user's name next to it. */
     alt?: string | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp, never>;
 export declare type AvatarProps = ComponentProps<typeof Avatar>;
 export default Avatar;

package/lib/Avatar.js

@@ -30,7 +30,7 @@ const Avatar = _styledComponents.default.img.attrs(props => ({
 })).withConfig({
   displayName: "Avatar",
   componentId: "sc-1waaaky-0"
-})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ""], (0, _constants.get)('lineHeights.condensedUltra'), props => getBorderRadius(props), _sx.default);
+})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ";", ""], (0, _constants.get)('lineHeights.condensedUltra'), props => getBorderRadius(props), _constants.COMMON, _sx.default);
 
 Avatar.defaultProps = {
   size: 20,

package/lib/Avatar.jsx

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+function getBorderRadius({ size, square }) {
+    if (square) {
+        return size && size <= 24 ? '4px' : '6px';
+    }
+    else {
+        return '50%';
+    }
+}
+const Avatar = styled_components_1.default.img.attrs(props => ({
+    height: props.size,
+    width: props.size
+})) `
+  display: inline-block;
+  overflow: hidden; // Ensure page layout in Firefox should images fail to load
+  line-height: ${constants_1.get('lineHeights.condensedUltra')};
+  vertical-align: middle;
+  border-radius: ${props => getBorderRadius(props)};
+  ${constants_1.COMMON};
+  ${sx_1.default}
+`;
+Avatar.defaultProps = {
+    size: 20,
+    alt: '',
+    square: false
+};
+exports.default = Avatar;

package/lib/AvatarPair.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Avatar_1 = __importDefault(require("./Avatar"));
+const constants_1 = require("./constants");
+const _1 = require(".");
+const ChildAvatar = styled_components_1.default(Avatar_1.default) `
+  position: absolute;
+  right: -15%;
+  bottom: -9%;
+  box-shadow: ${constants_1.get('shadows.avatar.childShadow')};
+`;
+const AvatarPair = ({ children, ...rest }) => {
+    const avatars = react_1.default.Children.map(children, (child, i) => {
+        if (!react_1.default.isValidElement(child))
+            return child;
+        return i === 0 ? (react_1.default.cloneElement(child, { size: 40 })) : (<ChildAvatar bg="canvas.default" {...child.props} size={20}/>);
+    });
+    return (<_1.Box position="relative" display="inline-flex" {...rest}>
+      {avatars}
+    </_1.Box>);
+};
+// styled() changes this
+AvatarPair.displayName = 'AvatarPair';
+exports.default = AvatarPair;

package/lib/AvatarStack.jsx

@@ -0,0 +1,151 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const _1 = require(".");
+const sx_1 = __importDefault(require("./sx"));
+const AvatarStackWrapper = styled_components_1.default.span `
+  display: flex;
+  position: relative;
+  height: 20px;
+  min-width: ${props => (props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px')};
+
+  .pc-AvatarItem {
+    flex-shrink: 0;
+    height: 20px;
+    width: 20px;
+    box-shadow: 0 0 0 1px ${constants_1.get('colors.canvas.default')};
+    margin-left: -11px;
+    position: relative;
+    overflow: hidden;
+    transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
+      box-shadow 0.1s ease-in-out;
+
+    &:first-child {
+      margin-left: 0;
+    }
+    &:nth-child(n + 4) {
+      display: none;
+    }
+  }
+
+  &.pc-AvatarStack--two {
+    min-width: 30px;
+    .pc-AvatarItem {
+      &:nth-child(n + 3) {
+        display: none;
+      }
+    }
+  }
+
+  &.pc-AvatarStack--three-plus {
+    min-width: 38px;
+    .pc-AvatarItem {
+      &:nth-child(3) {
+        opacity: ${100 - 3 * 15}%;
+        margin-left: -17px;
+      }
+      &:nth-child(4) {
+        opacity: ${100 - 4 * 15}%;
+        margin-left: -17px;
+      }
+      &:nth-child(5) {
+        opacity: ${100 - 5 * 15}%;
+        margin-left: -17px;
+      }
+      &:nth-child(n + 4) {
+        display: block;
+      }
+      &:nth-child(n + 6) {
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
+  }
+
+  &.pc-AvatarStack--right {
+    justify-content: flex-end;
+    .pc-AvatarItem {
+      margin-left: 0 !important;
+      margin-right: -11px;
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+
+    .pc-AvatarStackBody {
+      flex-direction: row-reverse;
+
+      &:hover {
+        .pc-AvatarItem {
+          margin-right: ${constants_1.get('space.1')}!important;
+          margin-left: 0 !important;
+
+          &:first-child {
+            margin-right: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.pc-AvatarStack--three-plus.pc-AvatarStack--right {
+    .pc-AvatarItem {
+      &:nth-child(3) {
+        margin-right: -17px;
+      }
+      &:nth-child(4) {
+        margin-right: -17px;
+      }
+      &:nth-child(5) {
+        margin-right: -17px;
+      }
+    }
+  }
+
+  .pc-AvatarStackBody:hover {
+    width: auto;
+
+    .pc-AvatarItem {
+      margin-left: ${constants_1.get('space.1')};
+      opacity: 100%;
+      visibility: visible;
+      box-shadow: 0 0 0 4px ${constants_1.get('colors.canvas.default')};
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  ${sx_1.default};
+`;
+const transformChildren = (children) => {
+    return react_1.default.Children.map(children, (child, index) => {
+        if (!react_1.default.isValidElement(child))
+            return child;
+        return react_1.default.cloneElement(child, {
+            className: classnames_1.default(child.props.className, 'pc-AvatarItem'),
+            sx: { zIndex: 10 - index, ...child.props.sx }
+        });
+    });
+};
+const AvatarStack = ({ children, alignRight, sx: sxProp }) => {
+    const count = react_1.default.Children.count(children);
+    const wrapperClassNames = classnames_1.default({
+        'pc-AvatarStack--two': count === 2,
+        'pc-AvatarStack--three-plus': count > 2,
+        'pc-AvatarStack--right': alignRight
+    });
+    return (<AvatarStackWrapper count={count} className={wrapperClassNames} sx={sxProp}>
+      <_1.Box position="absolute" display="flex" width="38px" className="pc-AvatarStackBody">
+        {transformChildren(children)}
+      </_1.Box>
+    </AvatarStackWrapper>);
+};
+exports.default = AvatarStack;

package/lib/BaseStyles.js

@@ -19,11 +19,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 GlobalStyle = (0, _styledComponents.createGlobalStyle)(["*{box-sizing:border-box;}body{margin:0;}table{border-collapse:collapse;}[role=\"button\"]:focus:not(:focus-visible):not(.focus-visible),[role=\"tabpanel\"][tabindex=\"0\"]:focus:not(:focus-visible):not(.focus-visible),button:focus:not(:focus-visible):not(.focus-visible),summary:focus:not(:focus-visible):not(.focus-visible),a:focus:not(:focus-visible):not(.focus-visible){outline:none;box-shadow:none;}[tabindex=\"0\"]:focus:not(:focus-visible):not(.focus-visible),details-dialog:focus:not(:focus-visible):not(.focus-visible){outline:none;}"]);
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  * { box-sizing: border-box; }
+  body { margin: 0; }
+  table { border-collapse: collapse; }
+  
+  [role="button"]:focus:not(:focus-visible):not(.focus-visible),
+  [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
+  button:focus:not(:focus-visible):not(.focus-visible),
+  summary:focus:not(:focus-visible):not(.focus-visible),
+  a:focus:not(:focus-visible):not(.focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  [tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
+  details-dialog:focus:not(:focus-visible):not(.focus-visible) {
+    outline: none;
+  }
+`;
 
 const Base = _styledComponents.default.div.withConfig({
   displayName: "BaseStyles__Base",
-  componentId: "sc-qvuaww-0"
+  componentId: "qvuaww-0"
 })(["", ";", ";"], _constants.TYPOGRAPHY, _constants.COMMON);
 
 function BaseStyles(props) {

package/lib/BaseStyles.jsx

@@ -0,0 +1,65 @@
+"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 });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const constants_1 = require("./constants");
+const GlobalStyle = styled_components_1.createGlobalStyle `
+  * { box-sizing: border-box; }
+  body { margin: 0; }
+  table { border-collapse: collapse; }
+  
+  [role="button"]:focus:not(:focus-visible):not(.focus-visible),
+  [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
+  button:focus:not(:focus-visible):not(.focus-visible),
+  summary:focus:not(:focus-visible):not(.focus-visible),
+  a:focus:not(:focus-visible):not(.focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  [tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
+  details-dialog:focus:not(:focus-visible):not(.focus-visible) {
+    outline: none;
+  }
+`;
+const Base = styled_components_1.default.div `
+  ${constants_1.TYPOGRAPHY};
+  ${constants_1.COMMON};
+`;
+function BaseStyles(props) {
+    const { children, ...rest } = props;
+    // load polyfill for :focus-visible
+    require('focus-visible');
+    return (<Base {...rest} data-portal-root>
+      <GlobalStyle />
+      {children}
+    </Base>);
+}
+BaseStyles.defaultProps = {
+    color: 'fg.default',
+    fontFamily: 'normal',
+    lineHeight: 'default'
+};
+exports.default = BaseStyles;

package/lib/BorderBox.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 const BorderBox = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "BorderBox",
-  componentId: "sc-oreju5-0"
+  componentId: "oreju5-0"
 })([""]);
 BorderBox.defaultProps = {
   borderWidth: '1px',

package/lib/BorderBox.jsx

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = __importDefault(require("./Box"));
+/**
+ * @deprecated Use the Box component instead (i.e. <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>)
+ */
+const BorderBox = styled_components_1.default(Box_1.default) ``;
+BorderBox.defaultProps = {
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'border.default',
+    borderRadius: 2
+};
+exports.default = BorderBox;

package/lib/Box.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const Box = _styledComponents.default.div.withConfig({
   displayName: "Box",
-  componentId: "sc-nv15kw-0"
+  componentId: "nv15kw-0"
 })(_styledSystem.space, _styledSystem.color, _styledSystem.typography, _styledSystem.layout, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.background, _styledSystem.border, _styledSystem.position, _styledSystem.shadow, _sx.default);
 
 var _default = Box;

package/lib/Box.jsx

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const sx_1 = __importDefault(require("./sx"));
+const Box = styled_components_1.default.div(styled_system_1.space, styled_system_1.color, styled_system_1.typography, styled_system_1.layout, styled_system_1.flexbox, styled_system_1.grid, styled_system_1.background, styled_system_1.border, styled_system_1.position, styled_system_1.shadow, sx_1.default);
+exports.default = Box;

package/lib/BranchName.d.ts

@@ -1,5 +1,6 @@
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const BranchName: import("styled-components").StyledComponent<"a", any, SxProp, never>;
+declare const BranchName: import("styled-components").StyledComponent<"a", any, SystemCommonProps & SxProp, never>;
 export declare type BranchNameProps = ComponentProps<typeof BranchName>;
 export default BranchName;

package/lib/BranchName.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const BranchName = _styledComponents.default.a.withConfig({
   displayName: "BranchName",
   componentId: "sc-167ouzm-0"
-})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.accent.subtle'), (0, _constants.get)('radii.2'), _sx.default);
+})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.accent.subtle'), (0, _constants.get)('radii.2'), _constants.COMMON, _sx.default);
 
 var _default = BranchName;
 exports.default = _default;

package/lib/BranchName.jsx

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const BranchName = styled_components_1.default.a `
+  display: inline-block;
+  padding: 2px 6px;
+  font-size: ${constants_1.get('fontSizes.0')};
+  font-family: ${constants_1.get('fonts.mono')};
+  color: ${constants_1.get('colors.fg.muted')};
+  background-color: ${constants_1.get('colors.accent.subtle')};
+  border-radius: ${constants_1.get('radii.2')};
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+exports.default = BranchName;

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,30 +19,35 @@ 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({
   displayName: "Breadcrumbs__Wrapper",
-  componentId: "sc-hwwoo0-0"
+  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 BreadcrumbsBase = _styledComponents.default.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
-  componentId: "sc-hwwoo0-1"
-})(["display:flex;justify-content:space-between;", ";"], _sx.default);
+  componentId: "hwwoo0-1"
+})(["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
@@ -57,8 +62,8 @@ const BreadcrumbsItem = _styledComponents.default.a.attrs(props => ({
   'aria-current': props.selected ? 'page' : null
 })).withConfig({
   displayName: "Breadcrumbs__BreadcrumbsItem",
-  componentId: "sc-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);
+  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);
 
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';