@primer/components 0.0.0-2021102995710 → 0.0.0-202110303104

package/lib/SelectMenu/hooks/useKeyboardNav.js

@@ -1,101 +1,85 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
 // adapted from details-menu web component https://github.com/github/details-menu-element
 function useKeyboardNav(details, open, setOpen) {
-  const handleKeyDown = (0, _react.useCallback)(event => {
-    const closeDetails = () => {
-      setOpen(false);
-      const summary = details.current.querySelector('summary');
-      if (summary) summary.focus();
-    };
-
-    const openDetails = () => {
-      setOpen(true);
-    };
-
-    const focusItem = next => {
-      const options = Array.from(details.current.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])'));
-      const selected = document.activeElement;
-      const index = options.indexOf(selected);
-      const found = next ? options[index + 1] : options[index - 1];
-      const def = next ? options[0] : options[options.length - 1];
-      return found || def;
-    };
-
-    const isMenuItem = el => {
-      const role = el.getAttribute('role');
-      return role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio';
-    };
-
-    if (!(event instanceof KeyboardEvent)) return;
-    const isSummaryFocused = event.target instanceof Element && event.target.tagName === 'SUMMARY';
-
-    switch (event.key) {
-      case 'Escape':
-        if (open) {
-          closeDetails(details);
-          event.preventDefault();
-          event.stopPropagation();
+    const handleKeyDown = react_1.useCallback(event => {
+        const closeDetails = () => {
+            setOpen(false);
+            const summary = details.current.querySelector('summary');
+            if (summary)
+                summary.focus();
+        };
+        const openDetails = () => {
+            setOpen(true);
+        };
+        const focusItem = next => {
+            const options = Array.from(details.current.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])'));
+            const selected = document.activeElement;
+            const index = options.indexOf(selected);
+            const found = next ? options[index + 1] : options[index - 1];
+            const def = next ? options[0] : options[options.length - 1];
+            return found || def;
+        };
+        const isMenuItem = el => {
+            const role = el.getAttribute('role');
+            return role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio';
+        };
+        if (!(event instanceof KeyboardEvent))
+            return;
+        const isSummaryFocused = event.target instanceof Element && event.target.tagName === 'SUMMARY';
+        switch (event.key) {
+            case 'Escape':
+                if (open) {
+                    closeDetails(details);
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                break;
+            case 'ArrowDown':
+                {
+                    if (isSummaryFocused && !open) {
+                        openDetails(details);
+                    }
+                    const target = focusItem(true);
+                    if (target)
+                        target.focus();
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowUp':
+                {
+                    if (isSummaryFocused && !open) {
+                        openDetails();
+                    }
+                    const target = focusItem(false);
+                    if (target)
+                        target.focus();
+                    event.preventDefault();
+                }
+                break;
+            case ' ':
+            case 'Enter':
+                {
+                    const selected = document.activeElement;
+                    if (selected && isMenuItem(selected) && selected.closest('details') === details) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        selected.click();
+                    }
+                }
+                break;
+            default:
         }
-
-        break;
-
-      case 'ArrowDown':
-        {
-          if (isSummaryFocused && !open) {
-            openDetails(details);
-          }
-
-          const target = focusItem(true);
-          if (target) target.focus();
-          event.preventDefault();
-        }
-        break;
-
-      case 'ArrowUp':
-        {
-          if (isSummaryFocused && !open) {
-            openDetails();
-          }
-
-          const target = focusItem(false);
-          if (target) target.focus();
-          event.preventDefault();
-        }
-        break;
-
-      case ' ':
-      case 'Enter':
-        {
-          const selected = document.activeElement;
-
-          if (selected && isMenuItem(selected) && selected.closest('details') === details) {
-            event.preventDefault();
-            event.stopPropagation();
-            selected.click();
-          }
-        }
-        break;
-
-      default:
-    }
-  }, [details, open, setOpen]);
-  (0, _react.useEffect)(() => {
-    const current = details.current;
-    if (!current) return;
-    current.addEventListener('keydown', handleKeyDown);
-    return () => {
-      current.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [details, handleKeyDown]);
+    }, [details, open, setOpen]);
+    react_1.useEffect(() => {
+        const current = details.current;
+        if (!current)
+            return;
+        current.addEventListener('keydown', handleKeyDown);
+        return () => {
+            current.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [details, handleKeyDown]);
 }
-
-var _default = useKeyboardNav;
-exports.default = _default;
+exports.default = useKeyboardNav;

package/lib/SelectMenu/index.js

@@ -1,15 +1,8 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _SelectMenu.default;
-  }
-});
-
-var _SelectMenu = _interopRequireDefault(require("./SelectMenu"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SelectMenu_1 = require("./SelectMenu");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SelectMenu_1).default; } });

package/lib/SelectPanel/SelectPanel.jsx

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectPanel = void 0;
+const react_1 = __importStar(require("react"));
+const FilteredActionList_1 = require("../FilteredActionList");
+const DropdownMenu_1 = require("../DropdownMenu");
+const AnchoredOverlay_1 = require("../AnchoredOverlay");
+const useProvidedStateOrCreate_1 = require("../hooks/useProvidedStateOrCreate");
+const hooks_1 = require("../hooks");
+function isMultiSelectVariant(selected) {
+    return Array.isArray(selected);
+}
+const focusZoneSettings = {
+    // Let FilteredActionList handle focus zone
+    disabled: true
+};
+function SelectPanel({ open, onOpenChange, renderAnchor = props => <DropdownMenu_1.DropdownButton {...props}/>, anchorRef: externalAnchorRef, placeholder, selected, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, textInputProps, overlayProps, sx, ...listProps }) {
+    const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(externalFilterValue, undefined, '');
+    const onFilterChange = react_1.useCallback((value, e) => {
+        externalOnFilterChange(value, e);
+        setInternalFilterValue(value);
+    }, [externalOnFilterChange, setInternalFilterValue]);
+    const anchorRef = hooks_1.useProvidedRefOrCreate(externalAnchorRef);
+    const onOpen = react_1.useCallback(gesture => onOpenChange(true, gesture), [onOpenChange]);
+    const onClose = react_1.useCallback((gesture) => {
+        onOpenChange(false, gesture);
+    }, [onOpenChange]);
+    const renderMenuAnchor = react_1.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 = react_1.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) => {
+                    item.onAction?.(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_1.default.useRef(null);
+    const focusTrapSettings = {
+        initialFocusRef: inputRef
+    };
+    const extendedTextInputProps = react_1.useMemo(() => {
+        return {
+            sx: { m: 2 },
+            contrast: true,
+            ...textInputProps
+        };
+    }, [textInputProps]);
+    return (<AnchoredOverlay_1.AnchoredOverlay renderAnchor={renderMenuAnchor} anchorRef={anchorRef} open={open} onOpen={onOpen} onClose={onClose} overlayProps={overlayProps} focusTrapSettings={focusTrapSettings} focusZoneSettings={focusZoneSettings}>
+      <FilteredActionList_1.FilteredActionList 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' }}/>
+    </AnchoredOverlay_1.AnchoredOverlay>);
+}
+exports.SelectPanel = SelectPanel;
+SelectPanel.displayName = 'SelectPanel';

package/lib/SelectPanel/index.js

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

package/lib/SideNav.d.ts

@@ -1,17 +1,14 @@
 /// <reference types="hoist-non-react-statics" />
+/// <reference types="react" />
 import * as History from 'history';
+import Box from './Box';
 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>;
+} & ComponentProps<typeof Box>;
+declare function SideNavBase({ variant, className, bordered, children, ...props }: SideNavBaseProps): JSX.Element;
+declare const SideNav: import("styled-components").StyledComponent<typeof SideNavBase, any, {}, never>;
 declare type StyledSideNavLinkProps = {
     to?: History.LocationDescriptor;
     selected?: boolean;
@@ -21,14 +18,14 @@ declare const SideNavLink: import("styled-components").StyledComponent<"a", any,
     hoverColor?: string | undefined;
     muted?: boolean | undefined;
     underline?: boolean | undefined;
-} & SxProp & StyledSideNavLinkProps, never>;
+} & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & 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, {}> & {
+declare const _default: string & import("styled-components").StyledComponentBase<typeof SideNavBase, any, {}, 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>;
+    } & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & StyledSideNavLinkProps, never>;
 };
 export default _default;

package/lib/SideNav.js

@@ -25,32 +25,39 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _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 SideNavBase({
   variant,
   className,
   bordered,
   children,
-  'aria-label': ariaLabel
+  ...props
 }) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
   const newClassName = (0, _classnames.default)(className, `variant-${variantClassName}`);
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
-    borderWidth: bordered ? '1px' : 0,
+
+  if (!bordered) {
+    props = { ...props,
+      borderWidth: 0
+    };
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    borderWidth: "1px",
     borderStyle: "solid",
     borderColor: "border.default",
     borderRadius: 2,
     as: "nav",
-    className: newClassName,
-    "aria-label": ariaLabel
-  }, children);
+    className: newClassName
+  }, props), children);
 }
 
 SideNavBase.displayName = "SideNavBase";
 const SideNav = (0, _styledComponents.default)(SideNavBase).withConfig({
   displayName: "SideNav",
   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);
+})(["background-color:", ";", " ", ";", ";"], (0, _constants.get)('colors.canvas.subtle'), props => props.bordered && (0, _styledComponents.css)(["& > &{border-left:0;border-right:0;border-bottom:0;}"]), _constants.COMMON, _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
 

package/lib/SideNav.jsx

@@ -0,0 +1,177 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("./constants");
+const styled_components_1 = __importStar(require("styled-components"));
+const Box_1 = __importDefault(require("./Box"));
+const Link_1 = __importDefault(require("./Link"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const sx_1 = __importDefault(require("./sx"));
+function SideNavBase({ variant, className, bordered, children, ...props }) {
+    const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
+    const newClassName = classnames_1.default(className, `variant-${variantClassName}`);
+    if (!bordered) {
+        props = { ...props, borderWidth: 0 };
+    }
+    return (<Box_1.default borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} as="nav" className={newClassName} {...props}>
+      {children}
+    </Box_1.default>);
+}
+const SideNav = styled_components_1.default(SideNavBase) `
+  background-color: ${constants_1.get('colors.canvas.subtle')};
+
+  ${props => props.bordered &&
+    styled_components_1.css `
+      // Remove duplicate borders from nested SideNavs
+      & > & {
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 0;
+      }
+    `}
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+// used for variant normal hover, focus pseudo selectors
+const CommonAccessibilityVariantNormalStyles = styled_components_1.css `
+  background-color: ${constants_1.get('colors.neutral.subtle')};
+  outline: none;
+  text-decoration: none;
+`;
+// used for light weight hover, focus pseudo selectors
+const CommonAccessibilityVariantLightWeightStyles = styled_components_1.css `
+  color: ${constants_1.get('colors.fg.default')};
+  text-decoration: none;
+  outline: none;
+`;
+const SideNavLink = styled_components_1.default(Link_1.default).attrs(props => {
+    const isReactRouter = typeof props.to === 'string';
+    if (isReactRouter || props.selected) {
+        // according to their docs, NavLink supports aria-current:
+        // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
+        return { 'aria-current': 'page' };
+    }
+    else {
+        return {};
+    }
+}) `
+  position: relative;
+  display: block;
+  ${props => props.variant === 'full' &&
+    styled_components_1.css `
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    `}
+  width: 100%;
+  text-align: left;
+  font-size: ${constants_1.get('fontSizes.1')};
+
+  & > ${SideNav} {
+    border-bottom: none;
+  }
+
+  ${SideNav}.variant-normal > & {
+    color: ${constants_1.get('colors.fg.default')};
+    padding: ${constants_1.get('space.3')};
+    border: 0;
+    border-top: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
+
+    &:first-child {
+      border-top: 0;
+      border-top-right-radius: ${constants_1.get('radii.2')};
+      border-top-left-radius: ${constants_1.get('radii.2')};
+    }
+
+    &:last-child {
+      border-bottom-right-radius: ${constants_1.get('radii.2')};
+      border-bottom-left-radius: ${constants_1.get('radii.2')};
+    }
+
+    // Bar on the left
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 3px;
+      pointer-events: none;
+      content: '';
+    }
+
+    &:hover {
+      ${CommonAccessibilityVariantNormalStyles}
+    }
+
+    &:focus {
+      ${CommonAccessibilityVariantNormalStyles}
+      box-shadow: ${constants_1.get('shadows.primer.shadow.focus')};
+      z-index: 1;
+    }
+
+    &[aria-current='page'],
+    &[aria-selected='true'] {
+      background-color: ${constants_1.get('colors.sidenav.selectedBg')};
+
+      // Bar on the left
+      &::before {
+        background-color: ${constants_1.get('colors.primer.border.active')};
+      }
+    }
+  }
+
+  ${SideNav}.variant-lightweight > & {
+    padding: ${constants_1.get('space.1')} 0;
+    color: ${constants_1.get('colors.accent.fg')};
+
+    &:hover {
+      ${CommonAccessibilityVariantLightWeightStyles}
+    }
+
+    &:focus {
+      ${CommonAccessibilityVariantLightWeightStyles}
+      box-shadow: ${constants_1.get('shadows.primer.shadow.focus')};
+      z-index: 1;
+    }
+
+    &[aria-current='page'],
+    &[aria-selected='true'] {
+      color: ${constants_1.get('colors.fg.default')};
+      font-weight: ${constants_1.get('fontWeights.semibold')};
+    }
+  }
+
+  ${sx_1.default};
+`;
+SideNav.defaultProps = {
+    variant: 'normal'
+};
+SideNavLink.defaultProps = {
+    variant: 'normal'
+};
+SideNavLink.displayName = 'SideNav.Link';
+exports.default = Object.assign(SideNav, { Link: SideNavLink });

package/lib/Spinner.jsx

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const sizeMap = {
+    small: '16px',
+    medium: '32px',
+    large: '64px'
+};
+function Spinner({ size: sizeKey = 'medium', ...props }) {
+    const size = sizeMap[sizeKey];
+    return (<svg height={size} width={size} viewBox="0 0 16 16" fill="none" {...props}>
+      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" vectorEffect="non-scaling-stroke"/>
+      <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" vectorEffect="non-scaling-stroke"/>
+    </svg>);
+}
+const StyledSpinner = styled_components_1.default(Spinner) `
+  @keyframes rotate-keyframes {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  animation: rotate-keyframes 1s linear infinite;
+
+  ${constants_1.COMMON}
+  ${sx_1.default}
+`;
+StyledSpinner.displayName = 'Spinner';
+exports.default = StyledSpinner;

package/lib/StateLabel.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { SystemCommonProps } from './constants';
 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>;
+} & SystemCommonProps & SxProp, never>;
 export declare type StateLabelProps = ComponentProps<typeof StateLabelBase>;
 declare function StateLabel({ children, status, variant: variantProp, ...rest }: StateLabelProps): JSX.Element;
 declare namespace StateLabel {