@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib/ActionList/Item.js

@@ -35,39 +35,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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); }
 
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
-const customItemThemes = {
-  default: {
-    hover: {
-      light: 'rgba(46, 77, 108, 0.06)',
-      dark: 'rgba(201, 206, 212, 0.12)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-    },
-    focus: {
-      light: 'rgba(54, 77, 100, 0.16)',
-      dark: 'rgba(201, 206, 212, 0.24)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-    }
-  },
-  danger: {
-    hover: {
-      light: 'rgba(234, 74, 90, 0.08)',
-      dark: 'rgba(248, 81, 73, 0.16)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-    },
-    focus: {
-      light: 'rgba(234, 74, 90, 0.14)',
-      dark: 'rgba(248, 81, 73, 0.24)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-    }
-  }
-};
-/**
- * Contract for props passed to the `Item` component.
- */
-
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
@@ -84,7 +51,10 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: (0, _constants.get)('colors.danger.fg'),
         iconColor: (0, _constants.get)('colors.danger.fg'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.danger.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.danger.activeBg'),
+        hoverText: (0, _constants.get)('colors.actionListItem.danger.hoverText')
       };
 
     default:
@@ -92,7 +62,9 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: (0, _constants.get)('colors.fg.default'),
         iconColor: (0, _constants.get)('colors.fg.muted'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.default.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.default.activeBg')
       };
   }
 };
@@ -110,12 +82,16 @@ 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;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'), ({
+})(["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,", " );color:", ";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, ({
-  hoverBackground
-}) => hoverBackground, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, _Divider.StyledDivider, _Header.StyledHeader, ({
@@ -123,14 +99,18 @@ const StyledItem = _styledComponents.default.div.withConfig({
 }) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.border.muted'), ({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedDirectly, ({
-  focusBackground
-}) => focusBackground, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
-  hoverBackground
-}) => hoverBackground, ({
-  focusBackground
-}) => focusBackground, ({
-  focusBackground
-}) => focusBackground, _sx.default);
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _sx.default);
 
 const TextContainer = _styledComponents.default.span.withConfig({
   displayName: "Item__TextContainer",
@@ -229,9 +209,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
       onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
     }
   }, [onAction, disabled, itemProps, onClick]);
-  const customItemTheme = customItemThemes[variant];
-  const hoverBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.hover, 'inherit');
-  const focusBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.focus, 'inherit');
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();
@@ -247,9 +224,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
   }, props, {
     "data-id": id,
     onKeyPress: keyPressHandler,
-    onClick: clickHandler,
-    hoverBackground: disabled ? 'inherit' : hoverBackground,
-    focusBackground: disabled ? 'inherit' : focusBackground
+    onClick: clickHandler
   }), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MultiSelectIcon, {
     selected: selected,
     width: "16",

package/lib/ActionList/index.js

@@ -1,18 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ActionList = void 0;
-const List_1 = require("./List");
-const Group_1 = require("./Group");
-const Item_1 = require("./Item");
-const Divider_1 = require("./Divider");
+
+var _List = require("./List");
+
+var _Group = require("./Group");
+
+var _Item = require("./Item");
+
+var _Divider = require("./Divider");
+
 /**
  * Collection of list-related components.
  */
-exports.ActionList = Object.assign(List_1.List, {
-    /** Collects related `Items` in an `ActionList`. */
-    Group: Group_1.Group,
-    /** An actionable or selectable `Item` with an optional icon and description. */
-    Item: Item_1.Item,
-    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-    Divider: Divider_1.Divider
+const ActionList = Object.assign(_List.List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group: _Group.Group,
+
+  /** An actionable or selectable `Item` with an optional icon and description. */
+  Item: _Item.Item,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider: _Divider.Divider
 });
+exports.ActionList = ActionList;

package/lib/ActionList2/Group.d.ts

@@ -1,11 +1,37 @@
 import React from 'react';
 import { SxProp } from '../sx';
-import { HeaderProps } from './Header';
 import { ListProps } from './List';
-export declare type GroupProps = HeaderProps & SxProp & {
+import { AriaRole } from '../utils/types';
+export declare type GroupProps = {
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"filled"` - Superimposed on a background, offset from nearby content
+     * - `"subtle"` - Relatively less offset from nearby content
+     */
+    variant?: 'subtle' | 'filled';
+    /**
+     * Primary text which names a `Group`.
+     */
+    title?: string;
+    /**
+     * Secondary text which provides additional information about a `Group`.
+     */
+    auxiliaryText?: string;
+    /**
+     * The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
+     */
+    role?: AriaRole;
+} & SxProp & {
+    /**
+     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
+     */
     selectionVariant?: ListProps['selectionVariant'] | false;
 };
 declare type ContextProps = Pick<GroupProps, 'selectionVariant'>;
 export declare const GroupContext: React.Context<ContextProps>;
 export declare const Group: React.FC<GroupProps>;
+export declare type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
+    labelId: string;
+};
 export {};

package/lib/ActionList2/Group.js

@@ -7,9 +7,11 @@ exports.Group = exports.GroupContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _ssr = require("@react-aria/ssr");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _Header = require("./Header");
+var _List = require("./List");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,12 +23,14 @@ exports.GroupContext = GroupContext;
 
 const Group = ({
   title,
-  variant,
+  variant = 'subtle',
   auxiliaryText,
   selectionVariant,
+  role,
   sx = {},
   ...props
 }) => {
+  const labelId = (0, _ssr.useSSRSafeId)();
   return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
     as: "li",
     sx: {
@@ -37,10 +41,11 @@ const Group = ({
       // hide the ::marker inserted by browser's stylesheet
       ...sx
     }
-  }, props), title && /*#__PURE__*/_react.default.createElement(_Header.Header, {
+  }, props), title && /*#__PURE__*/_react.default.createElement(Header, {
     title: title,
     variant: variant,
-    auxiliaryText: auxiliaryText
+    auxiliaryText: auxiliaryText,
+    labelId: labelId
   }), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
     value: {
       selectionVariant
@@ -49,9 +54,53 @@ const Group = ({
     as: "ul",
     sx: {
       paddingInlineStart: 0
-    }
+    },
+    "aria-labelledby": title ? labelId : undefined,
+    role: role
   }, props.children)));
 };
 
 exports.Group = Group;
-Group.displayName = "Group";
+Group.displayName = "Group";
+
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header = ({
+  variant,
+  title,
+  auxiliaryText,
+  labelId,
+  ...props
+}) => {
+  const {
+    variant: listVariant
+  } = _react.default.useContext(_List.ListContext);
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    sx: styles,
+    role: "presentation",
+    "aria-hidden": "true"
+  }, props), /*#__PURE__*/_react.default.createElement("span", {
+    id: labelId
+  }, title), auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+};
+
+Header.displayName = "Header";

package/lib/ActionList2/List.d.ts

@@ -20,7 +20,7 @@ export declare type ListProps = {
      */
     role?: AriaRole;
 } & SxProp;
-declare type ContextProps = Omit<ListProps, 'sx'>;
+declare type ContextProps = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers'>;
 export declare const ListContext: React.Context<ContextProps>;
 export declare const List: PolymorphicForwardRefComponent<"ul", ListProps>;
 export {};

package/lib/ActionList2/List.js

@@ -42,8 +42,7 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
     paddingY: variant === 'inset' ? 2 : 0
   };
   return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
-    sx: (0, _sx.merge)(styles, sxProp),
-    "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
+    sx: (0, _sx.merge)(styles, sxProp)
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {

package/lib/ActionList2/index.js

@@ -1,29 +1,47 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ActionList = void 0;
-const List_1 = require("./List");
-const Group_1 = require("./Group");
-const Item_1 = require("./Item");
-const LinkItem_1 = require("./LinkItem");
-const Divider_1 = require("./Divider");
-const Description_1 = require("./Description");
-const Visuals_1 = require("./Visuals");
+
+var _List = require("./List");
+
+var _Group = require("./Group");
+
+var _Item = require("./Item");
+
+var _LinkItem = require("./LinkItem");
+
+var _Divider = require("./Divider");
+
+var _Description = require("./Description");
+
+var _Visuals = require("./Visuals");
+
 /**
  * Collection of list-related components.
  */
-exports.ActionList = Object.assign(List_1.List, {
-    /** Collects related `Items` in an `ActionList`. */
-    Group: Group_1.Group,
-    /** An actionable or selectable `Item` */
-    Item: Item_1.Item,
-    /** A `Item` that renders a full-size anchor inside ListItem */
-    LinkItem: LinkItem_1.LinkItem,
-    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-    Divider: Divider_1.Divider,
-    /** Secondary text which provides additional information about an `Item`. */
-    Description: Description_1.Description,
-    /** Icon (or similar) positioned before `Item` text. */
-    LeadingVisual: Visuals_1.LeadingVisual,
-    /** Icon (or similar) positioned after `Item` text. */
-    TrailingVisual: Visuals_1.TrailingVisual
+const ActionList = Object.assign(_List.List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group: _Group.Group,
+
+  /** An actionable or selectable `Item` */
+  Item: _Item.Item,
+
+  /** A `Item` that renders a full-size anchor inside ListItem */
+  LinkItem: _LinkItem.LinkItem,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider: _Divider.Divider,
+
+  /** Secondary text which provides additional information about an `Item`. */
+  Description: _Description.Description,
+
+  /** Icon (or similar) positioned before `Item` text. */
+  LeadingVisual: _Visuals.LeadingVisual,
+
+  /** Icon (or similar) positioned after `Item` text. */
+  TrailingVisual: _Visuals.TrailingVisual
 });
+exports.ActionList = ActionList;

package/lib/AnchoredOverlay/index.js

@@ -1,5 +1,13 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnchoredOverlay = void 0;
-var AnchoredOverlay_1 = require("./AnchoredOverlay");
-Object.defineProperty(exports, "AnchoredOverlay", { enumerable: true, get: function () { return AnchoredOverlay_1.AnchoredOverlay; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AnchoredOverlay", {
+  enumerable: true,
+  get: function () {
+    return _AnchoredOverlay.AnchoredOverlay;
+  }
+});
+
+var _AnchoredOverlay = require("./AnchoredOverlay");

package/lib/Autocomplete/Autocomplete.d.ts

@@ -20,11 +20,17 @@ declare const _default: React.FC<{
     } & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
-    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
+    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
         }> | undefined;
+        leadingIcon?: React.ComponentType<{
+            className?: string | undefined;
+        }> | undefined;
+        trailingIcon?: React.ComponentType<{
+            className?: string | undefined;
+        }> | undefined;
     } & Pick<{
         color?: string | undefined;
         maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -37,10 +43,11 @@ declare const _default: React.FC<{
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
+        size?: "small" | "large" | undefined;
         block?: boolean | undefined;
-        sx?: import("../sx").BetterSystemStyleObject | undefined;
         variant?: "small" | "large" | undefined;
         role?: React.AriaRole | undefined;
+        sx?: import("../sx").BetterSystemStyleObject | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -293,9 +300,10 @@ declare const _default: React.FC<{
         disabled?: boolean | undefined;
         hasIcon?: boolean | undefined;
         contrast?: boolean | undefined;
+        validationStatus?: "error" | "warning" | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
+    }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
         as?: React.ComponentType<any> | undefined;
     }>;
     Menu: typeof AutocompleteMenu;

package/lib/Autocomplete/AutocompleteInput.d.ts

@@ -12,11 +12,17 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
     }> | undefined;
+    leadingIcon?: React.ComponentType<{
+        className?: string | undefined;
+    }> | undefined;
+    trailingIcon?: React.ComponentType<{
+        className?: string | undefined;
+    }> | undefined;
 } & Pick<{
     color?: string | undefined;
     maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -29,10 +35,11 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
+    size?: "small" | "large" | undefined;
     block?: boolean | undefined;
-    sx?: import("../sx").BetterSystemStyleObject | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
+    sx?: import("../sx").BetterSystemStyleObject | undefined;
     key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -285,8 +292,9 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     disabled?: boolean | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
+    validationStatus?: "error" | "warning" | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
+}, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
 export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
 export default AutocompleteInput;

package/lib/Autocomplete/index.js

@@ -1,8 +1,15 @@
 "use strict";
-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; } });
+
+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 }; }

package/lib/Breadcrumbs.d.ts

@@ -1,24 +1,25 @@
 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 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 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>;
+} & 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>;
+    } & SxProp, never>;
 };
 export default _default;
 /**
@@ -28,7 +29,7 @@ export declare const Breadcrumb: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp, never>;
+    } & SxProp, never>;
 };
 /**
  * @deprecated Use the `BreadcrumbsProps` type instead

package/lib/Breadcrumbs.js

@@ -19,8 +19,6 @@ 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({
@@ -31,23 +29,20 @@ const Wrapper = _styledComponents.default.li.withConfig({
 const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
   componentId: "hwwoo0-1"
-})(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
+})(["display:flex;justify-content:space-between;", ";"], _sx.default);
 
 function Breadcrumbs({
   className,
   children,
-  theme,
-  ...rest
+  sx: sxProp
 }) {
-  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
-    theme: theme
-  }, child));
+  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, null, child));
 
-  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, _extends({
+  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, {
     className: className,
     "aria-label": "Breadcrumbs",
-    theme: theme
-  }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: sxProp
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "ol",
     my: 0,
     pl: 0
@@ -63,7 +58,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'), _constants.COMMON, _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'), _sx.default);
 
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';

package/lib/Button/Button.d.ts

@@ -4,9 +4,8 @@ import { ComponentProps } from '../utils/types';
 declare const Button: import("styled-components").StyledComponent<"button", any, {
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     variant?: "small" | "medium" | "large" | undefined;
-} & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+} & {
     color?: string | undefined;
-    fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     translate?: "yes" | "no" | undefined;
     hidden?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -279,6 +278,6 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     formTarget?: string | undefined;
 } & {
     theme?: any;
-} & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;
+} & SxProp, never>;
 export declare type ButtonProps = ComponentProps<typeof Button>;
 export default Button;