@primer/components 0.0.0-2021111235020 → 0.0.0-202111136954

package/lib/CircleBadge.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
@@ -15,8 +13,6 @@ var _StyledOcticon = _interopRequireDefault(require("./StyledOcticon"));
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _isNumeric = _interopRequireDefault(require("./utils/isNumeric"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,28 +37,14 @@ const sizeStyles = ({
 const CircleBadge = _styledComponents.default.div.withConfig({
   displayName: "CircleBadge",
   componentId: "sc-1lho816-0"
-})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.white'), (0, _constants.get)('shadows.medium'), _constants.COMMON, sizeStyles, _sx.default);
+})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('shadows.shadow.medium'), sizeStyles, _sx.default);
 
 const CircleBadgeIcon = (0, _styledComponents.default)(_StyledOcticon.default).withConfig({
   displayName: "CircleBadge__CircleBadgeIcon",
   componentId: "sc-1lho816-1"
 })(["height:auto;max-width:60%;max-height:55%;"]);
 CircleBadge.defaultProps = {
-  inline: false,
-  theme: _theme.default
-};
-CircleBadge.propTypes = {
-  inline: _propTypes.default.bool,
-  size: _propTypes.default.number,
-  theme: _propTypes.default.object,
-  variant: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
-CircleBadgeIcon.defaultProps = {
-  theme: _theme.default
-};
-CircleBadgeIcon.propTypes = { ..._StyledOcticon.default.propTypes
+  inline: false
 };
 CircleBadgeIcon.displayName = 'CircleBadge.Icon';
 

package/lib/CircleOcticon.d.ts

@@ -0,0 +1,392 @@
+import { IconProps } from '@primer/octicons-react';
+import React from 'react';
+import { BoxProps } from './Box';
+export declare type CircleOcticonProps = {
+    as?: React.ElementType;
+    size?: number;
+    icon: React.ComponentType<{
+        size?: IconProps['size'];
+    }>;
+} & BoxProps;
+declare function CircleOcticon(props: CircleOcticonProps): JSX.Element;
+declare namespace CircleOcticon {
+    var defaultProps: {
+        size: number;
+        lineHeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        border?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
+        bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        property?: string | undefined;
+        alignContent?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignContent, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        alignItems?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignItems, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        alignSelf?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignSelf, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        backgroundImage?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundImage, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        backgroundRepeat?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundRepeat, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        backgroundSize?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundSize<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderBottomColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderBottomLeftRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderBottomRightRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderBottomStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderBottomStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderBottomWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderLeftColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderLeftStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderLeftStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderLeftWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderRightColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderRightStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderRightStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderRightWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderTopColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderTopLeftRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderTopRightRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderTopStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderTopStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderTopWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        bottom?: import("styled-system").ResponsiveValue<import("csstype").Property.Bottom<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        boxShadow?: import("styled-system").ResponsiveValue<number | import("csstype").Property.BoxShadow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        flexBasis?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexBasis<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        flexDirection?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexDirection, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        flexGrow?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexGrow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        flexShrink?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexShrink, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        flexWrap?: import("styled-system").ResponsiveValue<import("csstype").Property.FlexWrap, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        fontFamily?: import("styled-system").ResponsiveValue<import("csstype").Property.FontFamily, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        fontStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.FontStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        fontWeight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridAutoColumns?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoColumns<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridAutoFlow?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoFlow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridAutoRows?: import("styled-system").ResponsiveValue<import("csstype").Property.GridAutoRows<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridTemplateAreas?: import("styled-system").ResponsiveValue<import("csstype").Property.GridTemplateAreas, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridTemplateColumns?: import("styled-system").ResponsiveValue<import("csstype").Property.GridTemplateColumns<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridTemplateRows?: import("styled-system").ResponsiveValue<import("csstype").Property.GridTemplateRows<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        height?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        justifyContent?: import("styled-system").ResponsiveValue<import("csstype").Property.JustifyContent, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        justifyItems?: import("styled-system").ResponsiveValue<import("csstype").Property.JustifyItems, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        justifySelf?: import("styled-system").ResponsiveValue<import("csstype").Property.JustifySelf, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        left?: import("styled-system").ResponsiveValue<import("csstype").Property.Left<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        letterSpacing?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        maxHeight?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxHeight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        minHeight?: import("styled-system").ResponsiveValue<import("csstype").Property.MinHeight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        order?: import("styled-system").ResponsiveValue<import("csstype").Property.Order, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        overflowX?: import("styled-system").ResponsiveValue<import("csstype").Property.OverflowX, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        overflowY?: import("styled-system").ResponsiveValue<import("csstype").Property.OverflowY, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        position?: import("styled-system").ResponsiveValue<import("csstype").Property.Position, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        right?: import("styled-system").ResponsiveValue<import("csstype").Property.Right<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        textAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.TextAlign, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        textShadow?: import("styled-system").ResponsiveValue<number | import("csstype").Property.TextShadow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        top?: import("styled-system").ResponsiveValue<import("csstype").Property.Top<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        translate?: "yes" | "no" | undefined;
+        verticalAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.VerticalAlign<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        width?: import("styled-system").ResponsiveValue<import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        zIndex?: import("styled-system").ResponsiveValue<import("csstype").Property.ZIndex, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        background?: import("styled-system").ResponsiveValue<import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        backgroundPosition?: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderBottom?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderBottom<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderLeft?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderLeft<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderRight?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderRight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderStyle?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderStyle, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderTop?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderTop<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        flex?: import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridArea?: import("styled-system").ResponsiveValue<import("csstype").Property.GridArea, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridColumn?: import("styled-system").ResponsiveValue<import("csstype").Property.GridColumn, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridRow?: import("styled-system").ResponsiveValue<import("csstype").Property.GridRow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        overflow?: import("styled-system").ResponsiveValue<import("csstype").Property.Overflow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridColumnGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridColumnGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        gridRowGap?: import("styled-system").ResponsiveValue<import("csstype").Property.GridRowGap<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        hidden?: boolean | undefined;
+        borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        children?: React.ReactNode;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
+        role?: React.AriaRole | undefined;
+        sx?: import("./sx").BetterSystemStyleObject | undefined;
+        key?: React.Key | null | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        className?: string | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        tabIndex?: number | undefined;
+        radioGroup?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: boolean | "false" | "true" | undefined;
+        'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+        'aria-busy'?: boolean | "false" | "true" | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: boolean | "false" | "true" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: boolean | "false" | "true" | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: boolean | "false" | "true" | undefined;
+        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+        'aria-hidden'?: boolean | "false" | "true" | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: boolean | "false" | "true" | undefined;
+        'aria-multiline'?: boolean | "false" | "true" | undefined;
+        'aria-multiselectable'?: boolean | "false" | "true" | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-readonly'?: boolean | "false" | "true" | undefined;
+        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: boolean | "false" | "true" | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: boolean | "false" | "true" | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+        css?: import("@emotion/core").InterpolationWithTheme<any>;
+        theme?: any;
+    };
+}
+export default CircleOcticon;

package/lib/CircleOcticon.js

@@ -7,13 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Flex = _interopRequireDefault(require("./Flex"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
-var _BorderBox = _interopRequireDefault(require("./BorderBox"));
+var _Box = _interopRequireDefault(require("./Box"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,14 +23,18 @@ function CircleOcticon(props) {
     bg,
     ...rest
   } = props;
-  return /*#__PURE__*/_react.default.createElement(_BorderBox.default, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: as,
     bg: bg,
     overflow: "hidden",
     borderWidth: 0,
     size: size,
-    borderRadius: "50%"
-  }, /*#__PURE__*/_react.default.createElement(_Flex.default, _extends({}, rest, {
+    borderRadius: "50%",
+    borderStyle: "solid",
+    borderColor: "border.default"
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    display: "flex"
+  }, rest, {
     alignItems: "center",
     justifyContent: "center"
   }), /*#__PURE__*/_react.default.createElement(IconComponent, {
@@ -45,15 +43,8 @@ function CircleOcticon(props) {
 }
 
 CircleOcticon.displayName = "CircleOcticon";
-CircleOcticon.defaultProps = {
-  theme: _theme.default,
-  ..._Flex.default.defaultProps,
+CircleOcticon.defaultProps = { ..._Box.default.defaultProps,
   size: 32
 };
-CircleOcticon.propTypes = { ..._Flex.default.propTypes,
-  icon: _propTypes.default.elementType.isRequired,
-  size: _propTypes.default.number,
-  theme: _propTypes.default.object
-};
 var _default = CircleOcticon;
 exports.default = _default;

package/lib/CounterLabel.d.ts

@@ -0,0 +1,7 @@
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const CounterLabel: import("styled-components").StyledComponent<"span", any, {
+    scheme?: "primary" | "secondary" | undefined;
+} & SxProp, never>;
+export declare type CounterLabelProps = ComponentProps<typeof CounterLabel>;
+export default CounterLabel;

package/lib/CounterLabel.js

@@ -5,16 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const colorStyles = ({
@@ -22,7 +18,7 @@ const colorStyles = ({
   ...props
 }) => {
   return {
-    color: scheme === 'gray-light' ? (0, _constants.get)('colors.gray.9')(props) : scheme === 'gray' ? (0, _constants.get)('colors.white')(props) : (0, _constants.get)('colors.gray.6')(props)
+    color: scheme === 'secondary' ? (0, _constants.get)('colors.fg.default')(props) : scheme === 'primary' ? (0, _constants.get)('colors.fg.onEmphasis')(props) : (0, _constants.get)('colors.fg.default')(props)
   };
 };
 
@@ -31,24 +27,14 @@ const bgStyles = ({
   ...props
 }) => {
   return {
-    backgroundColor: scheme === 'gray-light' ? (0, _constants.get)('colors.blackfade15')(props) : scheme === 'gray' ? (0, _constants.get)('colors.gray.5')(props) : (0, _constants.get)('colors.counter.bg')(props)
+    backgroundColor: scheme === 'secondary' ? (0, _constants.get)('colors.neutral.muted')(props) : scheme === 'primary' ? (0, _constants.get)('colors.neutral.emphasis')(props) : (0, _constants.get)('colors.neutral.muted')(props)
   };
 };
 
 const CounterLabel = _styledComponents.default.span.withConfig({
   displayName: "CounterLabel",
   componentId: "sc-1ubx52d-0"
-})(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";", ";&:empty{display:none;}", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('lineHeights.condensedUltra'), colorStyles, bgStyles, _constants.COMMON, _sx.default);
+})(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";&:empty{display:none;}", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('lineHeights.condensedUltra'), colorStyles, bgStyles, _sx.default);
 
-CounterLabel.defaultProps = {
-  theme: _theme.default
-};
-CounterLabel.propTypes = {
-  children: _propTypes.default.node,
-  scheme: _propTypes.default.oneOf(['gray', 'gray-light']),
-  theme: _propTypes.default.object,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = CounterLabel;
 exports.default = _default;

package/lib/Details.d.ts

@@ -0,0 +1,5 @@
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const Details: import("styled-components").StyledComponent<"details", any, SxProp, never>;
+export declare type DetailsProps = ComponentProps<typeof Details>;
+export default Details;

package/lib/Details.js

@@ -7,25 +7,15 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
-var _constants = require("./constants");
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Details = _styledComponents.default.details.withConfig({
   displayName: "Details",
-  componentId: "ssy9qz-0"
-})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", " ", ";"], _constants.COMMON, _sx.default);
+  componentId: "sc-ssy9qz-0"
+})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], _sx.default);
 
 Details.displayName = 'Details';
-Details.defaultProps = {
-  theme: _theme.default
-};
-Details.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = Details;
 exports.default = _default;