@primer/components 0.0.0-202111023745 → 0.0.0-2021111122934

package/lib/SelectPanel/SelectPanel.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectPanel = SelectPanel;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FilteredActionList = require("../FilteredActionList");
+
+var _DropdownMenu = require("../DropdownMenu");
+
+var _AnchoredOverlay = require("../AnchoredOverlay");
+
+var _useProvidedStateOrCreate = require("../hooks/useProvidedStateOrCreate");
+
+var _hooks = require("../hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function isMultiSelectVariant(selected) {
+  return Array.isArray(selected);
+}
+
+const focusZoneSettings = {
+  // Let FilteredActionList handle focus zone
+  disabled: true
+};
+
+function SelectPanel({
+  open,
+  onOpenChange,
+  renderAnchor = props => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, props),
+  anchorRef: externalAnchorRef,
+  placeholder,
+  selected,
+  onSelectedChange,
+  filterValue: externalFilterValue,
+  onFilterChange: externalOnFilterChange,
+  items,
+  textInputProps,
+  overlayProps,
+  sx,
+  ...listProps
+}) {
+  const [filterValue, setInternalFilterValue] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(externalFilterValue, undefined, '');
+  const onFilterChange = (0, _react.useCallback)((value, e) => {
+    externalOnFilterChange(value, e);
+    setInternalFilterValue(value);
+  }, [externalOnFilterChange, setInternalFilterValue]);
+  const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
+  const onOpen = (0, _react.useCallback)(gesture => onOpenChange(true, gesture), [onOpenChange]);
+  const onClose = (0, _react.useCallback)(gesture => {
+    onOpenChange(false, gesture);
+  }, [onOpenChange]);
+  const renderMenuAnchor = (0, _react.useMemo)(() => {
+    if (renderAnchor === null) {
+      return null;
+    }
+
+    const selectedItems = Array.isArray(selected) ? selected : [...(selected ? [selected] : [])];
+    return props => {
+      return renderAnchor({ ...props,
+        children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder
+      });
+    };
+  }, [placeholder, renderAnchor, selected]);
+  const itemsToRender = (0, _react.useMemo)(() => {
+    return items.map(item => {
+      const isItemSelected = isMultiSelectVariant(selected) ? selected.includes(item) : selected === item;
+      return { ...item,
+        role: 'option',
+        selected: 'selected' in item && item.selected === undefined ? undefined : isItemSelected,
+        onAction: (itemFromAction, event) => {
+          var _item$onAction;
+
+          (_item$onAction = item.onAction) === null || _item$onAction === void 0 ? void 0 : _item$onAction.call(item, itemFromAction, event);
+
+          if (event.defaultPrevented) {
+            return;
+          }
+
+          if (isMultiSelectVariant(selected)) {
+            const otherSelectedItems = selected.filter(selectedItem => selectedItem !== item);
+            const newSelectedItems = selected.includes(item) ? otherSelectedItems : [...otherSelectedItems, item];
+            const multiSelectOnChange = onSelectedChange;
+            multiSelectOnChange(newSelectedItems);
+            return;
+          } // single select
+
+
+          const singleSelectOnChange = onSelectedChange;
+          singleSelectOnChange(item === selected ? undefined : item);
+          onClose('selection');
+        }
+      };
+    });
+  }, [onClose, onSelectedChange, items, selected]);
+
+  const inputRef = _react.default.useRef(null);
+
+  const focusTrapSettings = {
+    initialFocusRef: inputRef
+  };
+  const extendedTextInputProps = (0, _react.useMemo)(() => {
+    return {
+      sx: {
+        m: 2
+      },
+      contrast: true,
+      ...textInputProps
+    };
+  }, [textInputProps]);
+  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    renderAnchor: renderMenuAnchor,
+    anchorRef: anchorRef,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps,
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings
+  }, /*#__PURE__*/_react.default.createElement(_FilteredActionList.FilteredActionList, _extends({
+    filterValue: filterValue,
+    onFilterChange: onFilterChange
+  }, listProps, {
+    role: "listbox",
+    items: itemsToRender,
+    selectionVariant: isMultiSelectVariant(selected) ? 'multiple' : 'single',
+    textInputProps: extendedTextInputProps,
+    inputRef: inputRef // inheriting height and maxHeight ensures that the FilteredActionList is never taller
+    // than the Overlay (which would break scrolling the items)
+    ,
+    sx: { ...sx,
+      height: 'inherit',
+      maxHeight: 'inherit'
+    }
+  })));
+}
+
+SelectPanel.displayName = "SelectPanel";
+SelectPanel.displayName = 'SelectPanel';

package/lib/SelectPanel/index.js

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

package/lib/SideNav.js

@@ -5,60 +5,57 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _constants = require("./constants");
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _constants = require("./constants");
-
-var _theme = _interopRequireDefault(require("./theme"));
+var _Box = _interopRequireDefault(require("./Box"));
 
 var _Link = _interopRequireDefault(require("./Link"));
 
-var _BorderBox = _interopRequireDefault(require("./BorderBox"));
-
-var _sx = _interopRequireDefault(require("./sx"));
+var _react = _interopRequireDefault(require("react"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// eslint-disable-next-line import/no-namespace
 function SideNavBase({
   variant,
   className,
   bordered,
   children,
-  ...props
+  'aria-label': ariaLabel
 }) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
   const newClassName = (0, _classnames.default)(className, `variant-${variantClassName}`);
-
-  if (!bordered) {
-    props = { ...props,
-      borderWidth: 0
-    };
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_BorderBox.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    borderWidth: bordered ? '1px' : 0,
+    borderStyle: "solid",
+    borderColor: "border.default",
+    borderRadius: 2,
     as: "nav",
-    className: newClassName
-  }, props), children);
+    className: newClassName,
+    "aria-label": ariaLabel
+  }, children);
 }
 
 SideNavBase.displayName = "SideNavBase";
 const SideNav = (0, _styledComponents.default)(SideNavBase).withConfig({
   displayName: "SideNav",
-  componentId: "upvvge-0"
-})(["background-color:", ";", " ", ";", ";"], (0, _constants.get)('colors.white'), props => props.bordered && (0, _styledComponents.css)(["& > &{border-left:0;border-right:0;border-bottom:0;}"]), _constants.COMMON, _sx.default);
-SideNav.Link = (0, _styledComponents.default)(_Link.default).attrs(props => {
+  componentId: "sc-15k667c-0"
+})(["background-color:", ";", " ", ";"], (0, _constants.get)('colors.canvas.subtle'), props => props.bordered && (0, _styledComponents.css)(["& > &{border-left:0;border-right:0;border-bottom:0;}"]), _sx.default);
+// used for variant normal hover, focus pseudo selectors
+const CommonAccessibilityVariantNormalStyles = (0, _styledComponents.css)(["background-color:", ";outline:none;text-decoration:none;"], (0, _constants.get)('colors.neutral.subtle')); // used for light weight hover, focus pseudo selectors
+
+const CommonAccessibilityVariantLightWeightStyles = (0, _styledComponents.css)(["color:", ";text-decoration:none;outline:none;"], (0, _constants.get)('colors.fg.default'));
+const SideNavLink = (0, _styledComponents.default)(_Link.default).attrs(props => {
   const isReactRouter = typeof props.to === 'string';
 
   if (isReactRouter || props.selected) {
@@ -71,32 +68,19 @@ SideNav.Link = (0, _styledComponents.default)(_Link.default).attrs(props => {
     return {};
   }
 }).withConfig({
-  displayName: "SideNav__Link",
-  componentId: "upvvge-1"
-})(["position:relative;display:block;", " width:100%;text-align:left;font-size:", ";& > ", "{border-bottom:none;}&:first-child{border-top-right-radius:", ";border-top-left-radius:", ";}&:last-child{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}", ".variant-normal > &{color:", ";padding:", ";border:0;border-top:", " solid ", ";&:first-child{border-top:0;}&::before{position:absolute;top:0;bottom:0;left:0;z-index:1;width:3px;pointer-events:none;content:'';}&:hover,&:focus{color:", ";text-decoration:none;background-color:", ";outline:none;}&[aria-current='page'],&[aria-selected='true']{font-weight:", ";color:", ";&::before{background-color:", ";}}}", ".variant-lightweight > &{padding:", " 0;color:", ";&:hover,&:focus{color:", ";text-decoration:none;outline:none;}&[aria-current='page'],&[aria-selected='true']{color:", ";font-weight:", ";}}", ";"], props => props.variant === 'full' && (0, _styledComponents.css)(["display:flex;align-items:center;justify-content:space-between;"]), (0, _constants.get)('fontSizes.1'), SideNav, (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), SideNav, (0, _constants.get)('colors.gray.6'), (0, _constants.get)('space.3'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.gray.2'), (0, _constants.get)('colors.gray.9'), (0, _constants.get)('colors.gray.1'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('colors.gray.9'), (0, _constants.get)('colors.accent'), SideNav, (0, _constants.get)('space.1'), (0, _constants.get)('colors.blue.5'), (0, _constants.get)('colors.gray.9'), (0, _constants.get)('colors.gray.9'), (0, _constants.get)('fontWeights.semibold'), _sx.default);
+  displayName: "SideNav__SideNavLink",
+  componentId: "sc-15k667c-1"
+})(["position:relative;display:block;", " width:100%;text-align:left;font-size:", ";& > ", "{border-bottom:none;}", ".variant-normal > &{color:", ";padding:", ";border:0;border-top:", " solid ", ";&:first-child{border-top:0;border-top-right-radius:", ";border-top-left-radius:", ";}&:last-child{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}&::before{position:absolute;top:0;bottom:0;left:0;z-index:1;width:3px;pointer-events:none;content:'';}&:hover{", "}&:focus{", " box-shadow:", ";z-index:1;}&[aria-current='page'],&[aria-selected='true']{background-color:", ";&::before{background-color:", ";}}}", ".variant-lightweight > &{padding:", " 0;color:", ";&:hover{", "}&:focus{", " box-shadow:", ";z-index:1;}&[aria-current='page'],&[aria-selected='true']{color:", ";font-weight:", ";}}", ";"], props => props.variant === 'full' && (0, _styledComponents.css)(["display:flex;align-items:center;justify-content:space-between;"]), (0, _constants.get)('fontSizes.1'), SideNav, SideNav, (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.3'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), CommonAccessibilityVariantNormalStyles, CommonAccessibilityVariantNormalStyles, (0, _constants.get)('shadows.primer.shadow.focus'), (0, _constants.get)('colors.sidenav.selectedBg'), (0, _constants.get)('colors.primer.border.active'), SideNav, (0, _constants.get)('space.1'), (0, _constants.get)('colors.accent.fg'), CommonAccessibilityVariantLightWeightStyles, CommonAccessibilityVariantLightWeightStyles, (0, _constants.get)('shadows.primer.shadow.focus'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('fontWeights.semibold'), _sx.default);
 SideNav.defaultProps = {
-  theme: _theme.default,
   variant: 'normal'
 };
-SideNav.propTypes = {
-  as: _propTypes.default.elementType,
-  bordered: _propTypes.default.bool,
-  children: _propTypes.default.node,
-  theme: _propTypes.default.object,
-  variant: _propTypes.default.oneOf(['normal', 'lightweight']),
-  ..._BorderBox.default.propTypes
-};
-SideNav.Link.defaultProps = {
-  theme: _theme.default,
+SideNavLink.defaultProps = {
   variant: 'normal'
 };
-SideNav.Link.propTypes = {
-  as: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  selected: _propTypes.default.bool,
-  theme: _propTypes.default.object,
-  variant: _propTypes.default.oneOf(['normal', 'full']),
-  ..._Link.default.propTypes
-};
-SideNav.Link.displayName = 'SideNav.Link';
-var _default = SideNav;
+SideNavLink.displayName = 'SideNav.Link';
+
+var _default = Object.assign(SideNav, {
+  Link: SideNavLink
+});
+
 exports.default = _default;

package/lib/Spinner.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+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 sizeMap = {
+  small: '16px',
+  medium: '32px',
+  large: '64px'
+};
+
+function Spinner({
+  size: sizeKey = 'medium',
+  ...props
+}) {
+  const size = sizeMap[sizeKey];
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    height: size,
+    width: size,
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, props), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    stroke: "currentColor",
+    strokeOpacity: "0.25",
+    strokeWidth: "2",
+    vectorEffect: "non-scaling-stroke"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M15 8a7.002 7.002 0 00-7-7",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    vectorEffect: "non-scaling-stroke"
+  }));
+}
+
+Spinner.displayName = "Spinner";
+const StyledSpinner = (0, _styledComponents.default)(Spinner).withConfig({
+  displayName: "Spinner__StyledSpinner",
+  componentId: "sc-14tspit-0"
+})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], _sx.default);
+StyledSpinner.displayName = 'Spinner';
+var _default = StyledSpinner;
+exports.default = _default;

package/lib/StateLabel.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _octiconsReact = require("@primer/octicons-react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -21,8 +19,6 @@ var _StyledOcticon = _interopRequireDefault(require("./StyledOcticon"));
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 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); }
@@ -33,52 +29,86 @@ const octiconMap = {
   issueClosed: _octiconsReact.IssueClosedIcon,
   pullClosed: _octiconsReact.GitPullRequestIcon,
   pullMerged: _octiconsReact.GitMergeIcon,
-  draft: _octiconsReact.GitPullRequestIcon
+  draft: _octiconsReact.GitPullRequestIcon,
+  issueDraft: _octiconsReact.IssueDraftIcon
 };
 const colorVariants = (0, _styledSystem.variant)({
   prop: 'status',
-  scale: 'stateLabels.status'
+  variants: {
+    issueClosed: {
+      backgroundColor: 'danger.emphasis',
+      color: 'fg.onEmphasis'
+    },
+    pullClosed: {
+      backgroundColor: 'danger.emphasis',
+      color: 'fg.onEmphasis'
+    },
+    pullMerged: {
+      backgroundColor: 'done.emphasis',
+      color: 'fg.onEmphasis'
+    },
+    issueOpened: {
+      backgroundColor: 'success.emphasis',
+      color: 'fg.onEmphasis'
+    },
+    pullOpened: {
+      backgroundColor: 'success.emphasis',
+      color: 'fg.onEmphasis'
+    },
+    draft: {
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis'
+    },
+    issueDraft: {
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis'
+    }
+  }
 });
 const sizeVariants = (0, _styledSystem.variant)({
   prop: 'variant',
-  scale: 'stateLabels.sizes'
+  variants: {
+    small: {
+      paddingX: 2,
+      paddingY: 1,
+      fontSize: 0
+    },
+    normal: {
+      paddingX: '12px',
+      paddingY: 2,
+      fontSize: 1
+    }
+  }
 });
 
 const StateLabelBase = _styledComponents.default.span.withConfig({
   displayName: "StateLabel__StateLabelBase",
   componentId: "k4pd9e-0"
-})(["display:inline-flex;align-items:center;font-weight:600;line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";", ";"], (0, _constants.get)('colors.white'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _constants.COMMON, _sx.default);
+})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _sx.default);
 
 function StateLabel({
   children,
   status,
-  variant,
+  variant: variantProp,
   ...rest
 }) {
-  const octiconProps = variant === 'small' ? {
+  const octiconProps = variantProp === 'small' ? {
     width: '1em'
   } : {};
   return /*#__PURE__*/_react.default.createElement(StateLabelBase, _extends({}, rest, {
-    variant: variant,
+    variant: variantProp,
     status: status
-  }), status && /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, _extends({
-    mr: 1
-  }, octiconProps, {
-    icon: octiconMap[status] || _octiconsReact.QuestionIcon
+  }), status && /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, _extends({}, octiconProps, {
+    icon: octiconMap[status] || _octiconsReact.QuestionIcon,
+    sx: {
+      mr: 1
+    }
   })), children);
 }
 
 StateLabel.displayName = "StateLabel";
 StateLabel.defaultProps = {
-  theme: _theme.default,
   variant: 'normal'
 };
-StateLabel.propTypes = {
-  status: _propTypes.default.oneOf(['issueOpened', 'pullOpened', 'issueClosed', 'pullClosed', 'pullMerged', 'draft']).isRequired,
-  theme: _propTypes.default.object,
-  variant: _propTypes.default.oneOf(['small', 'normal']),
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = StateLabel;
 exports.default = _default;

package/lib/StyledOcticon.js

@@ -7,14 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _constants = require("./constants");
-
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,17 +24,9 @@ Octicon.displayName = "Octicon";
 const StyledOcticon = (0, _styledComponents.default)(Octicon).withConfig({
   displayName: "StyledOcticon",
   componentId: "uhnt7w-0"
-})(["", " ", ""], _constants.COMMON, _sx.default);
+})(["", ""], _sx.default);
 StyledOcticon.defaultProps = {
-  theme: _theme.default,
   size: 16
 };
-StyledOcticon.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes,
-  icon: _propTypes.default.any.isRequired,
-  size: _propTypes.default.any,
-  theme: _propTypes.default.object,
-  verticalAlign: _propTypes.default.oneOf(['middle', 'text-bottom', 'text-top', 'top'])
-};
 var _default = StyledOcticon;
 exports.default = _default;

package/lib/SubNav.js

@@ -5,20 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _theme = _interopRequireDefault(require("./theme"));
-
-var _Flex = _interopRequireDefault(require("./Flex"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,16 +22,20 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const ITEM_CLASS = 'SubNav-item';
 const SELECTED_CLASS = 'selected';
 
-function SubNavBase({
+const SubNavBase = _styledComponents.default.nav.withConfig({
+  displayName: "SubNav__SubNavBase",
+  componentId: "f7w0xa-0"
+})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";"], (0, _constants.get)('space.2'), _sx.default);
+
+function SubNav({
   actions,
   className,
   children,
   label,
-  theme,
   ...rest
 }) {
   const classes = (0, _classnames.default)(className, 'SubNav');
-  return /*#__PURE__*/_react.default.createElement("nav", _extends({
+  return /*#__PURE__*/_react.default.createElement(SubNavBase, _extends({
     className: classes,
     "aria-label": label
   }, rest), /*#__PURE__*/_react.default.createElement("div", {
@@ -47,47 +45,27 @@ function SubNavBase({
   }, actions));
 }
 
-SubNavBase.displayName = "SubNavBase";
-const SubNav = (0, _styledComponents.default)(SubNavBase).withConfig({
-  displayName: "SubNav",
-  componentId: "sc-16bavxu-0"
-})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";", ";", ";"], (0, _constants.get)('space.2'), _constants.COMMON, _constants.FLEX, _sx.default);
+SubNav.displayName = "SubNav";
 
-SubNav.Links = props => /*#__PURE__*/_react.default.createElement(_Flex.default, props);
+const SubNavLinks = _styledComponents.default.div.withConfig({
+  displayName: "SubNav__SubNavLinks",
+  componentId: "f7w0xa-1"
+})(["display:flex;", ";"], _sx.default);
 
-SubNav.Link = _styledComponents.default.a.attrs(props => ({
+const SubNavLink = _styledComponents.default.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: (0, _classnames.default)(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
 })).withConfig({
-  displayName: "SubNav__Link",
-  componentId: "sc-16bavxu-1"
-})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border:0;.SubNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.gray.9'), (0, _constants.get)('colors.gray.2'), (0, _constants.get)('colors.gray.2'), (0, _constants.get)('colors.gray.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.gray.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.gray.1'), (0, _constants.get)('colors.gray.5'), (0, _constants.get)('colors.white'), (0, _constants.get)('colors.blue.5'), (0, _constants.get)('colors.gray.5'), _constants.COMMON, _sx.default);
-SubNav.defaultProps = {
-  theme: _theme.default
-};
-SubNav.propTypes = {
-  actions: _propTypes.default.node,
-  align: _propTypes.default.oneOf(['right']),
-  children: _propTypes.default.node,
-  full: _propTypes.default.bool,
-  label: _propTypes.default.string,
-  theme: _propTypes.default.object,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
-SubNav.Link.defaultProps = {
-  theme: _theme.default
-};
-SubNav.Link.propTypes = {
-  as: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.elementType]),
-  href: _propTypes.default.string,
-  selected: _propTypes.default.bool,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
-SubNav.Link.displayName = 'SubNav.Link';
-SubNav.Links.propTypes = { ..._Flex.default.propTypes
-};
-SubNav.Links.displayName = 'SubNav.Links';
-var _default = SubNav;
+  displayName: "SubNav__SubNavLink",
+  componentId: "f7w0xa-2"
+})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), _sx.default);
+
+SubNavLink.displayName = 'SubNav.Link';
+SubNavLinks.displayName = 'SubNav.Links';
+
+var _default = Object.assign(SubNav, {
+  Link: SubNavLink,
+  Links: SubNavLinks
+});
+
 exports.default = _default;