@primer/components 31.2.1-rc.48ecca6e → 32.0.0-next.0

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/Item.jsx

@@ -34,35 +34,6 @@ const Divider_1 = require("./Divider");
 const ThemeProvider_1 = require("../ThemeProvider");
 const focusZone_1 = require("../behaviors/focusZone");
 const ssr_1 = require("@react-aria/ssr");
-/**
- * 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)'
-        }
-    }
-};
 const getItemVariant = (variant = 'default', disabled) => {
     if (disabled) {
         return {
@@ -78,14 +49,19 @@ const getItemVariant = (variant = 'default', disabled) => {
                 color: constants_1.get('colors.danger.fg'),
                 iconColor: constants_1.get('colors.danger.fg'),
                 annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
+                hoverCursor: 'pointer',
+                hoverBg: constants_1.get('colors.actionListItem.danger.hoverBg'),
+                focusBg: constants_1.get('colors.actionListItem.danger.activeBg'),
+                hoverText: constants_1.get('colors.actionListItem.danger.hoverText')
             };
         default:
             return {
                 color: constants_1.get('colors.fg.default'),
                 iconColor: constants_1.get('colors.fg.muted'),
                 annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
+                hoverCursor: 'pointer',
+                hoverBg: constants_1.get('colors.actionListItem.default.hoverBg'),
+                focusBg: constants_1.get('colors.actionListItem.default.activeBg')
             };
     }
 };
@@ -121,7 +97,11 @@ const StyledItem = styled_components_1.default.div `
   @media (hover: hover) and (pointer: fine) {
     :hover {
       // allow override in case another item in the list is active/focused
-      background: var(--item-hover-bg-override, ${({ hoverBackground }) => hoverBackground});
+      background: var(
+        --item-hover-bg-override,
+        ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverBg}
+      );
+      color: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverText};
       cursor: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverCursor};
     }
   }
@@ -167,19 +147,19 @@ const StyledItem = styled_components_1.default.div `
 
   // Active Descendant
   &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedDirectly}'] {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
   }
   &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedIndirectly}'] {
-    background: ${({ hoverBackground }) => hoverBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverBg};
   }
 
   &:focus {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
     outline: none;
   }
 
   &:active {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
   }
 
   ${sx_1.default}
@@ -264,11 +244,8 @@ exports.Item = react_1.default.forwardRef((itemProps, ref) => {
             onAction?.(itemProps, event);
         }
     }, [onAction, disabled, itemProps, onClick]);
-    const customItemTheme = customItemThemes[variant];
-    const hoverBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.hover, 'inherit');
-    const focusBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.focus, 'inherit');
     const { theme } = ThemeProvider_1.useTheme();
-    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler} hoverBackground={disabled ? 'inherit' : hoverBackground} focusBackground={disabled ? 'inherit' : focusBackground}>
+    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler}>
       {!!selected === selected && (<BaseVisualContainer>
           {selectionVariant === 'multiple' ? (<>
               {/**

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/Group.jsx

@@ -5,21 +5,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group = exports.GroupContext = void 0;
 const react_1 = __importDefault(require("react"));
+const ssr_1 = require("@react-aria/ssr");
 const Box_1 = __importDefault(require("../Box"));
-const Header_1 = require("./Header");
+const List_1 = require("./List");
 exports.GroupContext = react_1.default.createContext({});
-const Group = ({ title, variant, auxiliaryText, selectionVariant, sx = {}, ...props }) => {
+const Group = ({ title, variant = 'subtle', auxiliaryText, selectionVariant, role, sx = {}, ...props }) => {
+    const labelId = ssr_1.useSSRSafeId();
     return (<Box_1.default as="li" sx={{
             '&:not(:first-child)': { marginTop: 2 },
             listStyle: 'none',
             ...sx
         }} {...props}>
-      {title && <Header_1.Header title={title} variant={variant} auxiliaryText={auxiliaryText}/>}
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId}/>}
       <exports.GroupContext.Provider value={{ selectionVariant }}>
-        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }}>
+        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }} aria-labelledby={title ? labelId : undefined} role={role}>
           {props.children}
         </Box_1.default>
       </exports.GroupContext.Provider>
     </Box_1.default>);
 };
 exports.Group = 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_1.default.useContext(List_1.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 (<Box_1.default sx={styles} role="presentation" aria-hidden="true" {...props}>
+      <span id={labelId}>{title}</span>
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box_1.default>);
+};

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/Autocomplete/Autocomplete.d.ts

@@ -20,7 +20,7 @@ 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" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
@@ -38,9 +38,9 @@ declare const _default: React.FC<{
         style?: React.CSSProperties | undefined;
         title?: string | 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;
@@ -295,7 +295,7 @@ declare const _default: React.FC<{
         contrast?: boolean | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
+    }, "maxWidth" | "minWidth" | "width" | "theme" | "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,7 +12,7 @@ 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" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
@@ -30,9 +30,9 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     style?: React.CSSProperties | undefined;
     title?: string | 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;
@@ -287,6 +287,6 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
 export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
 export default AutocompleteInput;

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/Breadcrumbs.jsx

@@ -34,13 +34,11 @@ const Wrapper = styled_components_1.default.li `
 const BreadcrumbsBase = styled_components_1.default.nav `
   display: flex;
   justify-content: space-between;
-  ${constants_1.COMMON};
-  ${constants_1.FLEX};
   ${sx_1.default};
 `;
-function Breadcrumbs({ className, children, theme, ...rest }) {
-    const wrappedChildren = react_1.default.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>);
-    return (<BreadcrumbsBase className={className} aria-label="Breadcrumbs" theme={theme} {...rest}>
+function Breadcrumbs({ className, children, sx: sxProp }) {
+    const wrappedChildren = react_1.default.Children.map(children, child => <Wrapper>{child}</Wrapper>);
+    return (<BreadcrumbsBase className={className} aria-label="Breadcrumbs" sx={sxProp}>
       <Box_1.default as="ol" my={0} pl={0}>
         {wrappedChildren}
       </Box_1.default>
@@ -62,7 +60,6 @@ const BreadcrumbsItem = styled_components_1.default.a.attrs(props => ({
     color: ${constants_1.get('colors.fg.default')};
     pointer-events: none;
   }
-  ${constants_1.COMMON}
   ${sx_1.default};
 `;
 Breadcrumbs.displayName = 'Breadcrumbs';

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;