@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib-esm/Button/ButtonBase.js

@@ -1,11 +1,6 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { COMMON, LAYOUT } from '../constants';
-import theme from '../theme';
+import { variant } from 'styled-system';
 import buttonBaseStyles from './ButtonStyles';
-import { compose, variant, fontSize } from 'styled-system';
-import systemPropTypes from '@styled-system/prop-types';
-export const buttonSystemProps = compose(fontSize, COMMON, LAYOUT);
 const variants = variant({
   variants: {
     small: {
@@ -31,19 +26,6 @@ const ButtonBase = styled.button.attrs(({
   componentId: "sc-181ps9o-0"
 })(["", " ", ""], buttonBaseStyles, variants);
 ButtonBase.defaultProps = {
-  theme,
   variant: 'medium'
 };
-const propTypes = {
-  as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.elementType]),
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  fontSize: systemPropTypes.typography.fontSize,
-  onClick: PropTypes.func,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['small', 'medium', 'large']),
-  ...COMMON.propTypes,
-  ...LAYOUT.propTypes
-};
-ButtonBase.propTypes = propTypes;
 export default ButtonBase;

package/lib-esm/Button/ButtonClose.js

@@ -1,33 +1,18 @@
 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); }
 
-import { COMMON, LAYOUT, get } from '../constants';
-import defaultTheme from '../theme';
-import sx from '../sx';
 import { XIcon } from '@primer/octicons-react';
-import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
+import { get } from '../constants';
+import sx from '../sx';
 const StyledButton = styled.button.withConfig({
   displayName: "ButtonClose__StyledButton",
   componentId: "sc-13mzqph-0"
-})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;&:focus{box-shadow:", ";}&:active{color:", ";}", ";", ";", ";"], get('buttons.close.shadow.focus'), get('buttons.close.color.default'), COMMON, LAYOUT, sx);
-const ButtonClose = forwardRef(({
-  theme = defaultTheme,
-  ...props
-}, ref) => {
+})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";"], get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), get('colors.accent.fg'), sx);
+const ButtonClose = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
     ref: ref,
     "aria-label": "Close"
-  }, {
-    theme,
-    ...props
-  }), /*#__PURE__*/React.createElement(XIcon, null));
+  }, props), /*#__PURE__*/React.createElement(XIcon, null));
 });
-ButtonClose.propTypes = {
-  children: PropTypes.node,
-  onClick: PropTypes.func,
-  ...COMMON.propTypes,
-  ...LAYOUT.propTypes,
-  ...sx.propTypes
-};
 export default ButtonClose;

package/lib-esm/Button/ButtonDanger.js

@@ -1,16 +1,9 @@
 import styled from 'styled-components';
-import ButtonBase, { buttonSystemProps } from './ButtonBase';
 import { get } from '../constants';
-import theme from '../theme';
 import sx from '../sx';
+import ButtonBase from './ButtonBase';
 const ButtonDanger = styled(ButtonBase).withConfig({
   displayName: "ButtonDanger",
   componentId: "sc-13blgmk-0"
-})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:transparent;box-shadow:", ";}&:active{color:", ";background-color:", ";box-shadow:", ";border-color:", ";}&:disabled{color:", ";background-color:", ";border:1px solid ", ";}", ";", ";"], get('buttons.danger.color.default'), get('buttons.danger.border.default'), get('buttons.danger.bg.default'), get('buttons.danger.shadow.default'), get('buttons.danger.color.hover'), get('buttons.danger.bg.hover'), get('buttons.danger.border.hover'), get('buttons.danger.shadow.hover'), get('buttons.danger.shadow.focus'), get('buttons.danger.color.active'), get('buttons.danger.bg.active'), get('buttons.danger.shadow.active'), get('buttons.danger.border.active'), get('buttons.danger.color.disabled'), get('buttons.danger.bg.disabled'), get('buttons.danger.border.default'), buttonSystemProps, sx);
-ButtonDanger.defaultProps = {
-  theme
-};
-ButtonDanger.propTypes = { ...ButtonBase.propTypes,
-  ...sx.propTypes
-};
+})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{color:", ";background-color:", ";box-shadow:", ";border-color:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";"], get('colors.btn.danger.text'), get('colors.btn.border'), get('colors.btn.bg'), get('shadows.btn.shadow'), get('colors.btn.danger.hoverText'), get('colors.btn.danger.hoverBg'), get('colors.btn.danger.hoverBorder'), get('shadows.btn.danger.hoverShadow'), get('colors.btn.danger.focusBorder'), get('shadows.btn.danger.focusShadow'), get('colors.btn.danger.selectedText'), get('colors.btn.danger.selectedBg'), get('shadows.btn.danger.selectedShadow'), get('colors.btn.danger.selectedBorder'), get('colors.btn.danger.disabledText'), get('colors.btn.danger.disabledBg'), get('colors.btn.danger.disabledBorder'), sx);
 export default ButtonDanger;

package/lib-esm/Button/ButtonGroup.js

@@ -1,17 +1,12 @@
 import styled from 'styled-components';
-import { get } from '../constants';
 import Box from '../Box';
-import theme from '../theme';
+import { get } from '../constants';
 import sx from '../sx';
 const ButtonGroup = styled(Box).withConfig({
   displayName: "ButtonGroup",
   componentId: "peei04-0"
 })(["vertical-align:middle;&& > *{position:relative;border-right-width:0;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";margin-right:0;}:not(:first-child){margin-left:0;margin-right:0;}:last-child{border-right-width:1px;border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{border-right-width:1px;+ *{border-left-width:0;}}:focus,:active{z-index:1;}}", ";"], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx);
 ButtonGroup.defaultProps = {
-  display: 'inline-block',
-  theme
-};
-ButtonGroup.propTypes = { ...Box.propTypes,
-  ...sx.propTypes
+  display: 'inline-block'
 };
 export default ButtonGroup;

package/lib-esm/Button/ButtonInvisible.js

@@ -1,16 +1,9 @@
 import styled from 'styled-components';
-import sx from '../sx';
 import { get } from '../constants';
-import theme from '../theme';
-import ButtonBase, { buttonSystemProps } from './ButtonBase';
+import sx from '../sx';
+import ButtonBase from './ButtonBase';
 const ButtonInvisible = styled(ButtonBase).withConfig({
   displayName: "ButtonInvisible",
   componentId: "sc-1195tpn-0"
-})(["color:", ";background-color:transparent;border:0;border-radius:0;box-shadow:none;&:disabled{color:", ";}", ";", ""], get('colors.blue.5'), get('buttons.default.color.disabled'), buttonSystemProps, sx);
-ButtonInvisible.defaultProps = {
-  theme
-};
-ButtonInvisible.propTypes = { ...ButtonBase.propTypes,
-  ...sx.propTypes
-};
+})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}", ""], get('colors.accent.fg'), get('radii.2'), get('colors.primer.fg.disabled'), get('shadows.btn.focusShadow'), get('colors.btn.hoverBg'), get('colors.btn.selectedBg'), sx);
 export default ButtonInvisible;

package/lib-esm/Button/ButtonOutline.js

@@ -1,16 +1,9 @@
 import styled from 'styled-components';
-import ButtonBase, { buttonSystemProps } from './ButtonBase';
 import { get } from '../constants';
-import theme from '../theme';
 import sx from '../sx';
+import ButtonBase from './ButtonBase';
 const ButtonOutline = styled(ButtonBase).withConfig({
   displayName: "ButtonOutline",
   componentId: "sc-15gta9l-0"
-})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:transparent;box-shadow:", ";}&:active{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:disabled{color:", ";border-color:", ";background-color:", ";}", ";", ";"], get('buttons.outline.color.default'), get('buttons.outline.border.default'), get('buttons.outline.bg.default'), get('buttons.outline.shadow.default'), get('buttons.outline.color.hover'), get('buttons.outline.bg.hover'), get('buttons.outline.border.hover'), get('buttons.outline.shadow.hover'), get('buttons.outline.shadow.focus'), get('buttons.outline.color.active'), get('buttons.outline.bg.active'), get('buttons.outline.border.active'), get('buttons.outline.shadow.active'), get('buttons.outline.color.disabled'), get('buttons.outline.border.default'), get('buttons.outline.bg.disabled'), buttonSystemProps, sx);
-ButtonOutline.defaultProps = {
-  theme
-};
-ButtonOutline.propTypes = { ...ButtonBase.propTypes,
-  ...sx.propTypes
-};
+})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{color:", ";background-color:", ";box-shadow:", ";border-color:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";"], get('colors.btn.outline.text'), get('colors.btn.border'), get('colors.btn.bg'), get('shadows.btn.shadow'), get('colors.btn.outline.hoverText'), get('colors.btn.outline.hoverBg'), get('colors.btn.outline.hoverBorder'), get('shadows.btn.outline.hoverShadow'), get('colors.btn.outline.focusBorder'), get('shadows.btn.outline.focusShadow'), get('colors.btn.outline.selectedText'), get('colors.btn.outline.selectedBg'), get('shadows.btn.outline.selectedShadow'), get('colors.btn.outline.selectedBorder'), get('colors.btn.outline.disabledText'), get('colors.btn.outline.disabledBg'), get('colors.btn.border'), sx);
 export default ButtonOutline;

package/lib-esm/Button/ButtonPrimary.js

@@ -1,16 +1,9 @@
 import styled from 'styled-components';
-import ButtonBase, { buttonSystemProps } from './ButtonBase';
 import { get } from '../constants';
-import theme from '../theme';
 import sx from '../sx';
+import ButtonBase from './ButtonBase';
 export const ButtonPrimary = styled(ButtonBase).withConfig({
   displayName: "ButtonPrimary",
   componentId: "sc-1050ge1-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";&:hover{background-color:", ";border-color:", ";}&:focus{border-color:transparent;box-shadow:", ";background-color:", ";}&:active{background-color:", ";box-shadow:", ";border-color:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('buttons.primary.color.default'), get('buttons.primary.bg.default'), get('buttons.primary.border.default'), get('buttons.primary.shadow.default'), get('buttons.primary.bg.hover'), get('buttons.primary.border.hover'), get('buttons.primary.shadow.focus'), get('buttons.primary.bg.focus'), get('buttons.primary.bg.active'), get('buttons.primary.shadow.active'), get('buttons.primary.border.active'), get('buttons.primary.color.disabled'), get('buttons.primary.bg.disabled'), get('buttons.primary.border.disabled'), buttonSystemProps, sx);
-ButtonPrimary.defaultProps = {
-  theme
-};
-ButtonPrimary.propTypes = { ...ButtonBase.propTypes,
-  ...sx.propTypes
-};
+})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";"], get('colors.btn.primary.text'), get('colors.btn.primary.border'), get('colors.btn.primary.bg'), get('shadows.btn.primary.shadow'), get('colors.btn.primary.hoverText'), get('colors.btn.primary.hoverBg'), get('colors.btn.primary.hoverBorder'), get('shadows.btn.primary.hoverShadow'), get('colors.btn.primary.focusBorder'), get('shadows.btn.primary.focusShadow'), get('colors.btn.primary.selectedBg'), get('shadows.btn.primary.selectedShadow'), get('colors.btn.primary.disabledText'), get('colors.btn.primary.disabledBg'), get('colors.btn.primary.disabledBorder'), sx);
 export default ButtonPrimary;

package/lib-esm/Button/ButtonTableList.js

@@ -1,20 +1,8 @@
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { COMMON, LAYOUT, TYPOGRAPHY, get } from '../constants';
-import theme from '../theme';
+import { get } from '../constants';
 import sx from '../sx';
 const ButtonTableList = styled.summary.withConfig({
   displayName: "ButtonTableList",
   componentId: "sc-1m4q8ia-0"
-})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.gray.6'), get('colors.gray.6'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
-ButtonTableList.defaultProps = {
-  theme
-};
-ButtonTableList.propTypes = {
-  theme: PropTypes.object,
-  ...sx.propTypes,
-  ...COMMON.propTypes,
-  ...TYPOGRAPHY.propTypes,
-  ...LAYOUT.propTypes
-};
+})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.primer.fg.disabled'), get('space.1'), sx);
 export default ButtonTableList;

package/lib-esm/Button/index.js

@@ -1,8 +1,8 @@
-export { default, ButtonProps } from './Button';
-export { default as ButtonDanger, ButtonDangerProps } from './ButtonDanger';
-export { default as ButtonGroup, ButtonGroupProps } from './ButtonGroup';
-export { default as ButtonOutline, ButtonOutlineProps } from './ButtonOutline';
-export { default as ButtonPrimary, ButtonPrimaryProps } from './ButtonPrimary';
-export { default as ButtonInvisible, ButtonInvisibleProps } from './ButtonInvisible';
-export { default as ButtonTableList, ButtonTableListProps } from './ButtonTableList';
-export { default as ButtonClose, ButtonCloseProps } from './ButtonClose';
+export { default } from './Button';
+export { default as ButtonDanger } from './ButtonDanger';
+export { default as ButtonGroup } from './ButtonGroup';
+export { default as ButtonOutline } from './ButtonOutline';
+export { default as ButtonPrimary } from './ButtonPrimary';
+export { default as ButtonInvisible } from './ButtonInvisible';
+export { default as ButtonTableList } from './ButtonTableList';
+export { default as ButtonClose } from './ButtonClose';

package/lib-esm/Caret.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
 import { style } from 'styled-system';
-import theme from './theme';
 const oppositeEdge = {
   top: 'Bottom',
   right: 'Left',
@@ -44,15 +43,21 @@ const getBorderWidth = style({
 });
 
 function Caret(props) {
+  var _props$theme;
+
+  const theme = React.useContext(ThemeContext);
+  const propsWithTheme = { ...props,
+    theme: (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : theme
+  };
   const {
     bg
-  } = getBg(props);
+  } = getBg(propsWithTheme);
   const {
     borderColor
-  } = getBorderColor(props);
+  } = getBorderColor(propsWithTheme);
   const {
     borderWidth
-  } = getBorderWidth(props);
+  } = getBorderWidth(propsWithTheme);
   const {
     size = 8,
     location = 'bottom'
@@ -101,16 +106,8 @@ function Caret(props) {
 Caret.displayName = "Caret";
 Caret.locations = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
 Caret.defaultProps = {
-  bg: 'white',
-  borderColor: 'gray.2',
-  borderWidth: 1,
-  theme
-};
-Caret.propTypes = {
-  bg: PropTypes.string,
-  borderColor: PropTypes.string,
-  borderWidth: PropTypes.number,
-  size: PropTypes.number,
-  location: PropTypes.oneOf(Caret.locations)
+  bg: 'canvas.default',
+  borderColor: 'border.default',
+  borderWidth: 1
 };
 export default Caret;

package/lib-esm/Checkbox.js

@@ -0,0 +1,44 @@
+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); }
+
+import styled from 'styled-components';
+import { useProvidedRefOrCreate } from './hooks';
+import React, { useLayoutEffect } from 'react';
+import sx from './sx';
+const StyledCheckbox = styled.input.withConfig({
+  displayName: "Checkbox__StyledCheckbox",
+  componentId: "i51804-0"
+})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, sx);
+/**
+ * An accessible, native checkbox component
+ */
+
+const Checkbox = /*#__PURE__*/React.forwardRef(({
+  checked,
+  indeterminate,
+  disabled,
+  sx: sxProp,
+  required,
+  validationStatus,
+  ...rest
+}, ref) => {
+  const checkboxRef = useProvidedRefOrCreate(ref);
+  useLayoutEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = indeterminate || false;
+    }
+  }, [indeterminate, checked, checkboxRef]);
+  return /*#__PURE__*/React.createElement(StyledCheckbox, _extends({
+    type: "checkbox",
+    disabled: disabled,
+    "aria-disabled": disabled ? 'true' : 'false',
+    ref: ref || checkboxRef,
+    checked: indeterminate ? false : checked,
+    "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false',
+    sx: sxProp,
+    required: required,
+    "aria-required": required ? 'true' : 'false',
+    "aria-invalid": validationStatus === 'error' ? 'true' : 'false'
+  }, rest));
+});
+Checkbox.displayName = 'Checkbox';
+export default Checkbox;

package/lib-esm/CircleBadge.js

@@ -1,9 +1,7 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import StyledOcticon from './StyledOcticon';
 import sx from './sx';
-import theme from './theme';
 import isNumeric from './utils/isNumeric';
 const variantSizes = {
   small: 56,
@@ -25,27 +23,13 @@ const sizeStyles = ({
 const CircleBadge = styled.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', get('colors.white'), get('shadows.medium'), COMMON, sizeStyles, sx);
+})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.canvas.default'), get('shadows.shadow.medium'), sizeStyles, sx);
 const CircleBadgeIcon = styled(StyledOcticon).withConfig({
   displayName: "CircleBadge__CircleBadgeIcon",
   componentId: "sc-1lho816-1"
 })(["height:auto;max-width:60%;max-height:55%;"]);
 CircleBadge.defaultProps = {
-  inline: false,
-  theme
-};
-CircleBadge.propTypes = {
-  inline: PropTypes.bool,
-  size: PropTypes.number,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['small', 'medium', 'large']),
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
-CircleBadgeIcon.defaultProps = {
-  theme
-};
-CircleBadgeIcon.propTypes = { ...StyledOcticon.propTypes
+  inline: false
 };
 CircleBadgeIcon.displayName = 'CircleBadge.Icon';
 export default Object.assign(CircleBadge, {

package/lib-esm/CircleOcticon.js

@@ -1,10 +1,7 @@
 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); }
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import Flex from './Flex';
-import theme from './theme';
-import BorderBox from './BorderBox';
+import Box from './Box';
 
 function CircleOcticon(props) {
   const {
@@ -16,14 +13,18 @@ function CircleOcticon(props) {
     bg,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(BorderBox, {
+  return /*#__PURE__*/React.createElement(Box, {
     as: as,
     bg: bg,
     overflow: "hidden",
     borderWidth: 0,
     size: size,
-    borderRadius: "50%"
-  }, /*#__PURE__*/React.createElement(Flex, _extends({}, rest, {
+    borderRadius: "50%",
+    borderStyle: "solid",
+    borderColor: "border.default"
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    display: "flex"
+  }, rest, {
     alignItems: "center",
     justifyContent: "center"
   }), /*#__PURE__*/React.createElement(IconComponent, {
@@ -32,14 +33,7 @@ function CircleOcticon(props) {
 }
 
 CircleOcticon.displayName = "CircleOcticon";
-CircleOcticon.defaultProps = {
-  theme,
-  ...Flex.defaultProps,
+CircleOcticon.defaultProps = { ...Box.defaultProps,
   size: 32
 };
-CircleOcticon.propTypes = { ...Flex.propTypes,
-  icon: PropTypes.elementType.isRequired,
-  size: PropTypes.number,
-  theme: PropTypes.object
-};
 export default CircleOcticon;

package/lib-esm/CounterLabel.js

@@ -1,15 +1,13 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
-import theme from './theme';
 
 const colorStyles = ({
   scheme,
   ...props
 }) => {
   return {
-    color: scheme === 'gray-light' ? get('colors.gray.9')(props) : scheme === 'gray' ? get('colors.white')(props) : get('colors.gray.6')(props)
+    color: scheme === 'secondary' ? get('colors.fg.default')(props) : scheme === 'primary' ? get('colors.fg.onEmphasis')(props) : get('colors.fg.default')(props)
   };
 };
 
@@ -18,22 +16,12 @@ const bgStyles = ({
   ...props
 }) => {
   return {
-    backgroundColor: scheme === 'gray-light' ? get('colors.blackfade15')(props) : scheme === 'gray' ? get('colors.gray.5')(props) : get('colors.counter.bg')(props)
+    backgroundColor: scheme === 'secondary' ? get('colors.neutral.muted')(props) : scheme === 'primary' ? get('colors.neutral.emphasis')(props) : get('colors.neutral.muted')(props)
   };
 };
 
 const CounterLabel = styled.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;}", ";"], get('fontSizes.0'), get('fontWeights.bold'), get('lineHeights.condensedUltra'), colorStyles, bgStyles, COMMON, sx);
-CounterLabel.defaultProps = {
-  theme
-};
-CounterLabel.propTypes = {
-  children: PropTypes.node,
-  scheme: PropTypes.oneOf(['gray', 'gray-light']),
-  theme: PropTypes.object,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
+})(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";&:empty{display:none;}", ";"], get('fontSizes.0'), get('fontWeights.bold'), get('lineHeights.condensedUltra'), colorStyles, bgStyles, sx);
 export default CounterLabel;

package/lib-esm/Details.js

@@ -1,16 +1,8 @@
 import styled from 'styled-components';
-import { COMMON } from './constants';
-import theme from './theme';
 import sx from './sx';
 const Details = styled.details.withConfig({
   displayName: "Details",
-  componentId: "sc-1uozfty-0"
-})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", " ", ";"], COMMON, sx);
+  componentId: "ssy9qz-0"
+})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx);
 Details.displayName = 'Details';
-Details.defaultProps = {
-  theme
-};
-Details.propTypes = { ...COMMON.propTypes,
-  ...sx.propTypes
-};
 export default Details;