@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

package/lib-esm/SelectMenu/SelectMenuTab.js

@@ -1,21 +1,19 @@
 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, { useContext, useEffect } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
+import React, { useContext, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { MenuContext } from './SelectMenuContext';
-import { get, COMMON } from '../constants';
-import theme from '../theme';
+import { get } from '../constants';
 import sx from '../sx';
-const tabStyles = css(["flex:1;padding:", " ", ";font-size:", ";font-weight:500;color:", ";text-align:center;background-color:", ";border:0;box-shadow:inset 0 -1px 0 ", ";@media (min-width:", "){flex:none;padding:", " ", ";border:", " solid transparent;border-bottom-width:0;border-top-left-radius:", ";border-top-right-radius:", ";background-color:", ";}&[aria-selected='true']{z-index:1;color:", ";background-color:", ";box-shadow:0 0 0 1px ", ";@media (min-width:", "){border-color:", ";box-shadow:none;}}&:focus{background-color:#dbedff;}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.gray.5'), get('colors.gray.1'), get('colors.border.gray'), get('breakpoints.0'), get('space.1'), get('space.3'), get('borderWidths.1'), get('radii.2'), get('radii.2'), get('colors.white'), get('colors.gray.9'), get('colors.white'), get('colors.border.gray'), get('breakpoints.0'), get('colors.border.gray'));
+import { MenuContext } from './SelectMenuContext';
+const tabStyles = css(["flex:1;padding:", " ", ";font-size:", ";font-weight:500;color:", ";text-align:center;background-color:transparent;border:0;box-shadow:inset 0 -1px 0 ", ";@media (min-width:", "){flex:none;padding:", " ", ";border:", " solid transparent;border-bottom-width:0;border-top-left-radius:", ";border-top-right-radius:", ";}&[aria-selected='true']{z-index:1;color:", ";background-color:", ";box-shadow:0 0 0 1px ", ";@media (min-width:", "){border-color:", ";box-shadow:none;}}&:focus{background-color:", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.fg.muted'), get('colors.border.muted'), get('breakpoints.0'), get('space.1'), get('space.3'), get('borderWidths.1'), get('radii.2'), get('radii.2'), get('colors.text-primary'), get('colors.canvas.overlay'), get('colors.border.muted'), get('breakpoints.0'), get('colors.border.muted'), get('colors.neutral.subtle'));
 const StyledTab = styled.button.withConfig({
   displayName: "SelectMenuTab__StyledTab",
-  componentId: "oezw3-0"
-})(["", " ", " ", ";"], tabStyles, COMMON, sx);
+  componentId: "ga32sz-0"
+})(["", " ", ";"], tabStyles, sx);
 
 const SelectMenuTab = ({
-  tabName,
+  tabName = '',
   index,
   className,
   onClick,
@@ -28,14 +26,18 @@ const SelectMenuTab = ({
     onClick && onClick(e);
 
     if (!e.defaultPrevented) {
-      menuContext.setSelectedTab(tabName);
+      var _menuContext$setSelec;
+
+      (_menuContext$setSelec = menuContext.setSelectedTab) === null || _menuContext$setSelec === void 0 ? void 0 : _menuContext$setSelec.call(menuContext, tabName);
     }
   }; // if no tab is selected when the component renders, show the first tab
 
 
   useEffect(() => {
     if (!menuContext.selectedTab && index === 0) {
-      menuContext.setSelectedTab(tabName);
+      var _menuContext$setSelec2;
+
+      (_menuContext$setSelec2 = menuContext.setSelectedTab) === null || _menuContext$setSelec2 === void 0 ? void 0 : _menuContext$setSelec2.call(menuContext, tabName);
     }
   }, [index, menuContext, tabName]);
   const isSelected = menuContext.selectedTab === tabName;
@@ -48,15 +50,5 @@ const SelectMenuTab = ({
 };
 
 SelectMenuTab.displayName = "SelectMenuTab";
-SelectMenuTab.defaultProps = {
-  theme
-};
-SelectMenuTab.propTypes = {
-  index: PropTypes.number,
-  onClick: PropTypes.func,
-  tabName: PropTypes.string,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
 SelectMenuTab.displayName = 'SelectMenu.Tab';
 export default SelectMenuTab;

package/lib-esm/SelectMenu/SelectMenuTabPanel.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+import { ComponentProps } from '../utils/types';
+declare const TabPanelBase: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+export declare type SelectMenuTabPanelProps = {
+    tabName?: string;
+} & ComponentProps<typeof TabPanelBase>;
+declare const TabPanel: {
+    ({ tabName, className, children, ...rest }: SelectMenuTabPanelProps): JSX.Element;
+    displayName: string;
+};
+export default TabPanel;

package/lib-esm/SelectMenu/SelectMenuTabPanel.js

@@ -1,40 +1,30 @@
 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, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { get } from '../constants';
+import sx from '../sx';
 import { MenuContext } from './SelectMenuContext';
 import SelectMenuList from './SelectMenuList';
-import theme from '../theme';
-import { COMMON, get } from '../constants';
-import sx from '../sx';
+const TabPanelBase = styled.div.withConfig({
+  displayName: "SelectMenuTabPanel__TabPanelBase",
+  componentId: "ck0ipe-0"
+})(["border-top:", " solid ", ";", ";"], get('borderWidths.1'), get('colors.border.muted'), sx);
 
-const TabPanelBase = ({
+const TabPanel = ({
   tabName,
   className,
   children,
   ...rest
 }) => {
   const menuContext = useContext(MenuContext);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement(TabPanelBase, _extends({
     role: "tabpanel",
     className: className,
     hidden: menuContext.selectedTab !== tabName
   }, rest), /*#__PURE__*/React.createElement(SelectMenuList, null, children));
 };
 
-TabPanelBase.displayName = "TabPanelBase";
-const TabPanel = styled(TabPanelBase).withConfig({
-  displayName: "SelectMenuTabPanel__TabPanel",
-  componentId: "hgx3vc-0"
-})(["border-top:", " solid ", ";", " ", ";"], get('borderWidths.1'), get('colors.border.gray'), COMMON, sx);
-TabPanel.defaultProps = {
-  theme
-};
-TabPanel.propTypes = {
-  tabName: PropTypes.string,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
+TabPanel.displayName = "TabPanel";
 TabPanel.displayName = 'SelectMenu.TabPanel';
 export default TabPanel;

package/lib-esm/SelectMenu/SelectMenuTabs.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+import { ComponentProps } from '../utils/types';
+declare const SelectMenuTabsBase: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+export declare type SelectMenuTabsProps = ComponentProps<typeof SelectMenuTabsBase>;
+declare const SelectMenuTabs: {
+    ({ children, ...rest }: SelectMenuTabsProps): JSX.Element;
+    displayName: string;
+};
+export default SelectMenuTabs;

package/lib-esm/SelectMenu/SelectMenuTabs.js

@@ -2,30 +2,23 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { COMMON, get } from '../constants';
-import theme from '../theme';
+import { get } from '../constants';
 import sx from '../sx';
 const tabWrapperStyles = css(["display:flex;flex-shrink:0;margin-bottom:-1px;-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:hidden;&::-webkit-scrollbar{display:none;}@media (min-width:", "){padding:0 ", ";margin-top:", ";}"], get('breakpoints.0'), get('space.2'), get('space.3'));
+const SelectMenuTabsBase = styled.div.withConfig({
+  displayName: "SelectMenuTabs__SelectMenuTabsBase",
+  componentId: "kgg21o-0"
+})(["", " ", ";"], tabWrapperStyles, sx);
 
-const Tabs = ({
+const SelectMenuTabs = ({
   children,
   ...rest
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement(SelectMenuTabsBase, _extends({
     role: "tablist"
   }, rest), children);
 };
 
-Tabs.displayName = "Tabs";
-const SelectMenuTabs = styled(Tabs).withConfig({
-  displayName: "SelectMenuTabs",
-  componentId: "sc-17uzpv2-0"
-})(["", " ", " ", ";"], tabWrapperStyles, COMMON, sx);
-SelectMenuTabs.defaultProps = {
-  theme
-};
-SelectMenuTabs.propTypes = { ...COMMON.propTypes,
-  ...sx.propTypes
-};
+SelectMenuTabs.displayName = "SelectMenuTabs";
 SelectMenuTabs.displayName = 'SelectMenu.Tabs';
 export default SelectMenuTabs;

package/lib-esm/SelectMenu/hooks/useKeyboardNav.d.ts

@@ -0,0 +1,2 @@
+export default useKeyboardNav;
+declare function useKeyboardNav(details: any, open: any, setOpen: any): void;

package/lib-esm/SelectMenu/hooks/useKeyboardNav.js

@@ -75,6 +75,8 @@ function useKeyboardNav(details, open, setOpen) {
           }
         }
         break;
+
+      default:
     }
   }, [details, open, setOpen]);
   useEffect(() => {

package/lib-esm/SelectMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SelectMenu';
+export type { SelectMenuProps, SelectMenuDividerProps, SelectMenuFilterProps, SelectMenuFooterProps, SelectMenuItemProps, SelectMenuListProps, SelectMenuModalProps, SelectMenuTabsProps, SelectMenuHeaderProps, SelectMenuTabProps, SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from './SelectMenu';

package/lib-esm/SelectMenu/index.js

@@ -1,2 +1 @@
-import SelectMenu from './SelectMenu';
-export default SelectMenu;
+export { default } from './SelectMenu';

package/lib-esm/SelectPanel/SelectPanel.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { FilteredActionListProps } from '../FilteredActionList';
+import { OverlayProps } from '../Overlay';
+import { ItemInput } from '../ActionList/List';
+import { AnchoredOverlayProps } from '../AnchoredOverlay';
+import { AnchoredOverlayWrapperAnchorProps } from '../AnchoredOverlay/AnchoredOverlay';
+interface SelectPanelSingleSelection {
+    selected: ItemInput | undefined;
+    onSelectedChange: (selected: ItemInput | undefined) => void;
+}
+interface SelectPanelMultiSelection {
+    selected: ItemInput[];
+    onSelectedChange: (selected: ItemInput[]) => void;
+}
+interface SelectPanelBaseProps {
+    onOpenChange: (open: boolean, gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection') => void;
+    placeholder?: string;
+    overlayProps?: Partial<OverlayProps>;
+}
+export declare type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant'> & Pick<AnchoredOverlayProps, 'open'> & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection);
+export declare function SelectPanel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, selected, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, textInputProps, overlayProps, sx, ...listProps }: SelectPanelProps): JSX.Element;
+export declare namespace SelectPanel {
+    var displayName: string;
+}
+export {};

package/lib-esm/SelectPanel/SelectPanel.js

@@ -0,0 +1,127 @@
+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, { useCallback, useMemo } from 'react';
+import { FilteredActionList } from '../FilteredActionList';
+import { DropdownButton } from '../DropdownMenu';
+import { AnchoredOverlay } from '../AnchoredOverlay';
+import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate';
+import { useProvidedRefOrCreate } from '../hooks';
+
+function isMultiSelectVariant(selected) {
+  return Array.isArray(selected);
+}
+
+const focusZoneSettings = {
+  // Let FilteredActionList handle focus zone
+  disabled: true
+};
+export function SelectPanel({
+  open,
+  onOpenChange,
+  renderAnchor = props => /*#__PURE__*/React.createElement(DropdownButton, props),
+  anchorRef: externalAnchorRef,
+  placeholder,
+  selected,
+  onSelectedChange,
+  filterValue: externalFilterValue,
+  onFilterChange: externalOnFilterChange,
+  items,
+  textInputProps,
+  overlayProps,
+  sx,
+  ...listProps
+}) {
+  const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '');
+  const onFilterChange = useCallback((value, e) => {
+    externalOnFilterChange(value, e);
+    setInternalFilterValue(value);
+  }, [externalOnFilterChange, setInternalFilterValue]);
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
+  const onOpen = useCallback(gesture => onOpenChange(true, gesture), [onOpenChange]);
+  const onClose = useCallback(gesture => {
+    onOpenChange(false, gesture);
+  }, [onOpenChange]);
+  const renderMenuAnchor = 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 = 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.useRef(null);
+  const focusTrapSettings = {
+    initialFocusRef: inputRef
+  };
+  const extendedTextInputProps = useMemo(() => {
+    return {
+      sx: {
+        m: 2
+      },
+      contrast: true,
+      ...textInputProps
+    };
+  }, [textInputProps]);
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
+    renderAnchor: renderMenuAnchor,
+    anchorRef: anchorRef,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps,
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings
+  }, /*#__PURE__*/React.createElement(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-esm/SelectPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectPanel } from './SelectPanel';
+export type { SelectPanelProps } from './SelectPanel';

package/lib-esm/SelectPanel/index.js

@@ -0,0 +1 @@
+export { SelectPanel } from './SelectPanel';

package/lib-esm/SideNav.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="hoist-non-react-statics" />
+import * as History from 'history';
+import { ComponentProps } from './utils/types';
+import React from 'react';
+import { SxProp } from './sx';
+declare type SideNavBaseProps = {
+    variant?: 'lightweight' | 'normal';
+    bordered?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    'aria-label'?: string;
+};
+declare function SideNavBase({ variant, className, bordered, children, 'aria-label': ariaLabel }: SideNavBaseProps): JSX.Element;
+declare const SideNav: import("styled-components").StyledComponent<typeof SideNavBase, any, SxProp, never>;
+declare type StyledSideNavLinkProps = {
+    to?: History.LocationDescriptor;
+    selected?: boolean;
+    variant?: 'full' | 'normal';
+};
+declare const SideNavLink: import("styled-components").StyledComponent<"a", any, {
+    hoverColor?: string | undefined;
+    muted?: boolean | undefined;
+    underline?: boolean | undefined;
+} & SxProp & StyledSideNavLinkProps, never>;
+export declare type SideNavProps = ComponentProps<typeof SideNav>;
+export declare type SideNavLinkProps = ComponentProps<typeof SideNavLink>;
+declare const _default: string & import("styled-components").StyledComponentBase<typeof SideNavBase, any, SxProp, never> & import("hoist-non-react-statics").NonReactStatics<typeof SideNavBase, {}> & {
+    Link: import("styled-components").StyledComponent<"a", any, {
+        hoverColor?: string | undefined;
+        muted?: boolean | undefined;
+        underline?: boolean | undefined;
+    } & SxProp & StyledSideNavLinkProps, never>;
+};
+export default _default;

package/lib-esm/SideNav.js

@@ -1,13 +1,10 @@
-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';
+// eslint-disable-next-line import/no-namespace
+import { get } from './constants';
 import styled, { css } from 'styled-components';
-import classnames from 'classnames';
-import { COMMON, get } from './constants';
+import Box from './Box';
 import Link from './Link';
-import BorderBox from './BorderBox';
-import theme from './theme';
+import React from 'react';
+import classnames from 'classnames';
 import sx from './sx';
 
 function SideNavBase({
@@ -15,28 +12,30 @@ function SideNavBase({
   className,
   bordered,
   children,
-  ...props
+  'aria-label': ariaLabel
 }) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
   const newClassName = classnames(className, `variant-${variantClassName}`);
-
-  if (!bordered) {
-    props = { ...props,
-      borderWidth: 0
-    };
-  }
-
-  return /*#__PURE__*/React.createElement(BorderBox, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
+    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 = styled(SideNavBase).withConfig({
   displayName: "SideNav",
   componentId: "sc-15k667c-0"
-})(["background-color:", ";", " ", ";", ";"], get('colors.white'), props => props.bordered && css(["& > &{border-left:0;border-right:0;border-bottom:0;}"]), COMMON, sx);
+})(["background-color:", ";", " ", ";"], get('colors.canvas.subtle'), props => props.bordered && css(["& > &{border-left:0;border-right:0;border-bottom:0;}"]), sx);
+// used for variant normal hover, focus pseudo selectors
+const CommonAccessibilityVariantNormalStyles = css(["background-color:", ";outline:none;text-decoration:none;"], get('colors.neutral.subtle')); // used for light weight hover, focus pseudo selectors
+
+const CommonAccessibilityVariantLightWeightStyles = css(["color:", ";text-decoration:none;outline:none;"], get('colors.fg.default'));
 const SideNavLink = styled(Link).attrs(props => {
   const isReactRouter = typeof props.to === 'string';
 
@@ -52,28 +51,13 @@ const SideNavLink = styled(Link).attrs(props => {
 }).withConfig({
   displayName: "SideNav__SideNavLink",
   componentId: "sc-15k667c-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' && css(["display:flex;align-items:center;justify-content:space-between;"]), get('fontSizes.1'), SideNav, get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), SideNav, get('colors.gray.6'), get('space.3'), get('borderWidths.1'), get('colors.gray.2'), get('colors.gray.9'), get('colors.gray.1'), get('fontWeights.semibold'), get('colors.gray.9'), get('colors.accent'), SideNav, get('space.1'), get('colors.blue.5'), get('colors.gray.9'), get('colors.gray.9'), get('fontWeights.semibold'), sx);
+})(["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' && css(["display:flex;align-items:center;justify-content:space-between;"]), get('fontSizes.1'), SideNav, SideNav, get('colors.fg.default'), get('space.3'), get('borderWidths.1'), get('colors.border.muted'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), CommonAccessibilityVariantNormalStyles, CommonAccessibilityVariantNormalStyles, get('shadows.primer.shadow.focus'), get('colors.sidenav.selectedBg'), get('colors.primer.border.active'), SideNav, get('space.1'), get('colors.accent.fg'), CommonAccessibilityVariantLightWeightStyles, CommonAccessibilityVariantLightWeightStyles, get('shadows.primer.shadow.focus'), get('colors.fg.default'), get('fontWeights.semibold'), sx);
 SideNav.defaultProps = {
-  theme,
   variant: 'normal'
 };
-SideNav.propTypes = {
-  bordered: PropTypes.bool,
-  children: PropTypes.node,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['normal', 'lightweight']),
-  ...BorderBox.propTypes
-};
 SideNavLink.defaultProps = {
-  theme,
   variant: 'normal'
 };
-SideNavLink.propTypes = {
-  selected: PropTypes.bool,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['normal', 'full']),
-  ...Link.propTypes
-};
 SideNavLink.displayName = 'SideNav.Link';
 export default Object.assign(SideNav, {
   Link: SideNavLink

package/lib-esm/Spinner.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const sizeMap: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export interface SpinnerInternalProps {
+    /** Sets the width and height of the spinner. */
+    size?: keyof typeof sizeMap;
+}
+declare function Spinner({ size: sizeKey, ...props }: SpinnerInternalProps): JSX.Element;
+declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any, SxProp, never>;
+export declare type SpinnerProps = ComponentProps<typeof StyledSpinner>;
+export default StyledSpinner;

package/lib-esm/Spinner.js

@@ -0,0 +1,45 @@
+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 styled from 'styled-components';
+import sx from './sx';
+const sizeMap = {
+  small: '16px',
+  medium: '32px',
+  large: '64px'
+};
+
+function Spinner({
+  size: sizeKey = 'medium',
+  ...props
+}) {
+  const size = sizeMap[sizeKey];
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    height: size,
+    width: size,
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    stroke: "currentColor",
+    strokeOpacity: "0.25",
+    strokeWidth: "2",
+    vectorEffect: "non-scaling-stroke"
+  }), /*#__PURE__*/React.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 = styled(Spinner).withConfig({
+  displayName: "Spinner__StyledSpinner",
+  componentId: "sc-14tspit-0"
+})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx);
+StyledSpinner.displayName = 'Spinner';
+export default StyledSpinner;

package/lib-esm/StateLabel.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const StateLabelBase: import("styled-components").StyledComponent<"span", any, {
+    variant?: "small" | "normal" | undefined;
+    status?: "issueClosed" | "pullClosed" | "pullMerged" | "issueOpened" | "pullOpened" | "draft" | "issueDraft" | undefined;
+} & SxProp, never>;
+export declare type StateLabelProps = ComponentProps<typeof StateLabelBase>;
+declare function StateLabel({ children, status, variant: variantProp, ...rest }: StateLabelProps): JSX.Element;
+declare namespace StateLabel {
+    var defaultProps: {
+        variant: string;
+    };
+}
+export default StateLabel;