@primer/components 0.0.0-2021102995710 → 0.0.0-202110303104

package/lib/FilterList.js

@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const FilterListBase = _styledComponents.default.ul.withConfig({
   displayName: "FilterList__FilterListBase",
   componentId: "sc-1l4pxmz-0"
-})(["list-style-type:none;margin:0;padding:0;", ";"], _sx.default);
+})(["list-style-type:none;", ";", ";"], _constants.COMMON, _sx.default);
 
 const FilterList = ({
   children,
@@ -36,7 +36,7 @@ FilterList.displayName = "FilterList";
 const FilterListItemBase = _styledComponents.default.a.withConfig({
   displayName: "FilterList__FilterListItemBase",
   componentId: "sc-1l4pxmz-1"
-})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";"], props => props.small ? `${(0, _constants.get)('space.1')(props)} 10px` : `${(0, _constants.get)('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', (0, _constants.get)('fontSizes.1'), props => props.selected ? (0, _constants.get)('colors.fg.onEmphasis') : (0, _constants.get)('colors.fg.muted'), props => props.selected ? (0, _constants.get)('colors.accent.emphasis') : '', (0, _constants.get)('radii.1'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('fontWeights.bold'), _sx.default);
+})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${(0, _constants.get)('space.1')(props)} 10px` : `${(0, _constants.get)('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', (0, _constants.get)('fontSizes.1'), props => props.selected ? (0, _constants.get)('colors.fg.onEmphasis') : (0, _constants.get)('colors.fg.muted'), props => props.selected ? (0, _constants.get)('colors.accent.emphasis') : '', (0, _constants.get)('radii.1'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('fontWeights.bold'), _constants.COMMON, _sx.default);
 
 function FilterListItem({
   children,
@@ -50,6 +50,10 @@ function FilterListItem({
 }
 
 FilterListItem.displayName = "FilterListItem";
+FilterList.defaultProps = {
+  m: 0,
+  p: 0
+};
 FilterListItem.displayName = 'FilterList.Item';
 
 var _default = Object.assign(FilterList, {

package/lib/FilterList.jsx

@@ -0,0 +1,63 @@
+"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 FilterListBase = styled_components_1.default.ul `
+  list-style-type: none;
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+const FilterList = ({ children, ...rest }) => {
+    const items = react_1.default.Children.map(children, child => {
+        return <li>{child}</li>;
+    });
+    return <FilterListBase {...rest}>{items}</FilterListBase>;
+};
+const FilterListItemBase = styled_components_1.default.a `
+  position: relative;
+  display: block;
+  padding: ${props => (props.small ? `${constants_1.get('space.1')(props)} 10px` : `${constants_1.get('space.2')(props)} 11px`)};
+  margin: ${props => (props.small ? '0 0 2px' : '0 0 5px 0')};
+  overflow: hidden;
+  font-size: ${constants_1.get('fontSizes.1')};
+  color: ${props => (props.selected ? constants_1.get('colors.fg.onEmphasis') : constants_1.get('colors.fg.muted'))};
+  background-color: ${props => (props.selected ? constants_1.get('colors.accent.emphasis') : '')}!important;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: ${constants_1.get('radii.1')};
+  &:hover {
+    text-decoration: none;
+    background-color: ${constants_1.get('colors.canvas.subtle')};
+  }
+  &:active {
+    color: ${constants_1.get('colors.fg.onEmphasis')};
+    background-color: ${constants_1.get('colors.accent.emphasis')};
+  }
+  .count {
+    float: right;
+    font-weight: ${constants_1.get('fontWeights.bold')};
+  }
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+function FilterListItem({ children, count, ...rest }) {
+    return (<FilterListItemBase {...rest}>
+      {count && (<span title="results" className="count">
+          {count}
+        </span>)}
+      {children}
+    </FilterListItemBase>);
+}
+FilterList.defaultProps = {
+    m: 0,
+    p: 0
+};
+FilterListItem.displayName = 'FilterList.Item';
+exports.default = Object.assign(FilterList, { Item: FilterListItem });

package/lib/FilteredActionList/FilteredActionList.jsx

@@ -0,0 +1,100 @@
+"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 });
+exports.FilteredActionList = void 0;
+const react_1 = __importStar(require("react"));
+const ssr_1 = require("@react-aria/ssr");
+const TextInput_1 = __importDefault(require("../TextInput"));
+const Box_1 = __importDefault(require("../Box"));
+const ActionList_1 = require("../ActionList");
+const Spinner_1 = __importDefault(require("../Spinner"));
+const useFocusZone_1 = require("../hooks/useFocusZone");
+const useProvidedStateOrCreate_1 = require("../hooks/useProvidedStateOrCreate");
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const useProvidedRefOrCreate_1 = require("../hooks/useProvidedRefOrCreate");
+const useScrollFlash_1 = __importDefault(require("../hooks/useScrollFlash"));
+const scrollIntoViewingArea_1 = require("../behaviors/scrollIntoViewingArea");
+const StyledHeader = styled_components_1.default.div `
+  box-shadow: 0 1px 0 ${constants_1.get('colors.border.default')};
+  z-index: 1;
+`;
+function FilteredActionList({ loading = false, placeholderText, filterValue: externalFilterValue, onFilterChange, items, textInputProps, inputRef: providedInputRef, sx, ...listProps }) {
+    const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(externalFilterValue, undefined, '');
+    const onInputChange = react_1.useCallback((e) => {
+        const value = e.target.value;
+        onFilterChange(value, e);
+        setInternalFilterValue(value);
+    }, [onFilterChange, setInternalFilterValue]);
+    const scrollContainerRef = react_1.useRef(null);
+    const listContainerRef = react_1.useRef(null);
+    const inputRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(providedInputRef);
+    const activeDescendantRef = react_1.useRef();
+    const listId = ssr_1.useSSRSafeId();
+    const onInputKeyPress = react_1.useCallback(event => {
+        if (event.key === 'Enter' && activeDescendantRef.current) {
+            event.preventDefault();
+            event.nativeEvent.stopImmediatePropagation();
+            // Forward Enter key press to active descendant so that item gets activated
+            const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
+            activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
+        }
+    }, [activeDescendantRef]);
+    useFocusZone_1.useFocusZone({
+        containerRef: listContainerRef,
+        focusOutBehavior: 'wrap',
+        focusableElementFilter: element => {
+            return !(element instanceof HTMLInputElement);
+        },
+        activeDescendantFocus: inputRef,
+        onActiveDescendantChanged: (current, previous, directlyActivated) => {
+            activeDescendantRef.current = current;
+            if (current && scrollContainerRef.current && directlyActivated) {
+                scrollIntoViewingArea_1.scrollIntoViewingArea(current, scrollContainerRef.current);
+            }
+        }
+    }, [
+        // List ref isn't set while loading.  Need to re-bind focus zone when it changes
+        loading
+    ]);
+    react_1.useEffect(() => {
+        // if items changed, we want to instantly move active descendant into view
+        if (activeDescendantRef.current && scrollContainerRef.current) {
+            scrollIntoViewingArea_1.scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
+        }
+    }, [items]);
+    useScrollFlash_1.default(scrollContainerRef);
+    return (<Box_1.default display="flex" flexDirection="column" overflow="hidden" sx={sx}>
+      <StyledHeader>
+        <TextInput_1.default ref={inputRef} block width="auto" color="fg.default" value={filterValue} onChange={onInputChange} onKeyPress={onInputKeyPress} placeholder={placeholderText} aria-label={placeholderText} aria-controls={listId} {...textInputProps}/>
+      </StyledHeader>
+      <Box_1.default ref={scrollContainerRef} overflow="auto">
+        {loading ? (<Box_1.default width="100%" display="flex" flexDirection="row" justifyContent="center" pt={6} pb={7}>
+            <Spinner_1.default />
+          </Box_1.default>) : (<ActionList_1.ActionList ref={listContainerRef} items={items} {...listProps} role="listbox" id={listId}/>)}
+      </Box_1.default>
+    </Box_1.default>);
+}
+exports.FilteredActionList = FilteredActionList;
+FilteredActionList.displayName = 'FilteredActionList';

package/lib/FilteredActionList/index.js

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

package/lib/FilteredSearch.d.ts

@@ -1,5 +1,6 @@
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const FilteredSearch: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+declare const FilteredSearch: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
 export declare type FilteredSearchProps = ComponentProps<typeof FilteredSearch>;
 export default FilteredSearch;

package/lib/FilteredSearch.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const FilteredSearch = _styledComponents.default.div.withConfig({
   displayName: "FilteredSearch",
   componentId: "sc-15qfedq-0"
-})(["display:flex;align-items:stretch;summary{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";z-index:1;}", ""], (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), _sx.default);
+})(["", ";display:flex;align-items:stretch;summary{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";z-index:1;}", ""], _constants.COMMON, (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), _sx.default);
 
 var _default = FilteredSearch;
 exports.default = _default;

package/lib/FilteredSearch.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const FilteredSearch = styled_components_1.default.div `
+  ${constants_1.COMMON};
+  display: flex;
+  align-items: stretch;
+
+  summary {
+    border-radius: 0;
+    border-top-left-radius: ${constants_1.get('radii.2')};
+    border-bottom-left-radius: ${constants_1.get('radii.2')};
+    border-right: 0;
+  }
+  .TextInput-wrapper {
+    border-radius: 0;
+    border-top-right-radius: ${constants_1.get('radii.2')};
+    border-bottom-right-radius: ${constants_1.get('radii.2')};
+    z-index: 1; // Allows the focus outline to show on top of the dropdown.
+  }
+
+  ${sx_1.default}
+`;
+exports.default = FilteredSearch;

package/lib/Flash.d.ts

@@ -1,8 +1,9 @@
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Flash: import("styled-components").StyledComponent<"div", any, {
     variant?: "success" | "danger" | "default" | "warning" | undefined;
     full?: boolean | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp, never>;
 export declare type FlashProps = ComponentProps<typeof Flash>;
 export default Flash;

package/lib/Flash.js

@@ -55,7 +55,7 @@ const variants = (0, _styledSystem.variant)({
 const Flash = _styledComponents.default.div.withConfig({
   displayName: "Flash",
   componentId: "sc-4y90bn-0"
-})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : (0, _constants.get)('radii.2'), props => props.full ? '-1px' : '0', (0, _constants.get)('space.2'), variants, _sx.default);
+})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : (0, _constants.get)('radii.2'), props => props.full ? '-1px' : '0', (0, _constants.get)('space.2'), _constants.COMMON, variants, _sx.default);
 
 Flash.defaultProps = {
   variant: 'default'

package/lib/Flash.jsx

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const variants = styled_system_1.variant({
+    variants: {
+        default: {
+            color: 'fg.default',
+            backgroundColor: 'accent.subtle',
+            borderColor: 'accent.muted',
+            svg: {
+                color: 'accent.fg'
+            }
+        },
+        success: {
+            color: 'fg.default',
+            backgroundColor: 'success.subtle',
+            borderColor: 'success.muted',
+            svg: {
+                color: 'success.fg'
+            }
+        },
+        danger: {
+            color: 'fg.default',
+            backgroundColor: 'danger.subtle',
+            borderColor: 'danger.muted',
+            svg: {
+                color: 'danger.fg'
+            }
+        },
+        warning: {
+            color: 'fg.default',
+            backgroundColor: 'attention.subtle',
+            borderColor: 'attention.muted',
+            svg: {
+                color: 'attention.fg'
+            }
+        }
+    }
+});
+const Flash = styled_components_1.default.div `
+  position: relative;
+  color: ${constants_1.get('colors.fg.default')};
+  padding: ${constants_1.get('space.3')};
+  border-style: solid;
+  border-width: ${props => (props.full ? '1px 0px' : '1px')};
+  border-radius: ${props => (props.full ? '0' : constants_1.get('radii.2'))};
+  margin-top: ${props => (props.full ? '-1px' : '0')};
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  svg {
+    margin-right: ${constants_1.get('space.2')};
+  }
+
+  ${constants_1.COMMON};
+  ${variants};
+  ${sx_1.default};
+`;
+Flash.defaultProps = {
+    variant: 'default'
+};
+exports.default = Flash;

package/lib/Flex.jsx

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = __importDefault(require("./Box"));
+/**
+ * @deprecated Use the Box component instead (i.e. <Flex> → <Box display="flex">)
+ */
+const Flex = styled_components_1.default(Box_1.default) ``;
+Flex.defaultProps = {
+    display: 'flex'
+};
+exports.default = Flex;

package/lib/FormGroup.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="hoist-non-react-statics" />
+import { SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const FormGroup: import("styled-components").StyledComponent<"div", any, SxProp, never>;
-declare const FormGroupLabel: import("styled-components").StyledComponent<"label", any, SxProp, never>;
+declare const FormGroup: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
+declare const FormGroupLabel: import("styled-components").StyledComponent<"label", any, SystemTypographyProps & SystemCommonProps & SxProp, never>;
 export declare type FormGroupProps = ComponentProps<typeof FormGroup>;
 export declare type FormGroupLabelProps = ComponentProps<typeof FormGroupLabel>;
-declare const _default: string & import("styled-components").StyledComponentBase<"div", any, SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
-    Label: import("styled-components").StyledComponent<"label", any, SxProp, never>;
+declare const _default: string & import("styled-components").StyledComponentBase<"div", any, SystemCommonProps & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Label: import("styled-components").StyledComponent<"label", any, SystemTypographyProps & SystemCommonProps & SxProp, never>;
 };
 export default _default;

package/lib/FormGroup.js

@@ -16,12 +16,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const FormGroup = _styledComponents.default.div.withConfig({
   displayName: "FormGroup",
   componentId: "sc-14z6yax-0"
-})(["margin:", " 0;font-weight:", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.normal'), _sx.default);
+})(["margin:", " 0;font-weight:", ";", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.normal'), _constants.COMMON, _sx.default);
 
 const FormGroupLabel = _styledComponents.default.label.withConfig({
   displayName: "FormGroup__FormGroupLabel",
   componentId: "sc-14z6yax-1"
-})(["display:block;margin:0 0 ", ";font-size:", ";font-weight:", ";", ";"], (0, _constants.get)('space.2'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'), _sx.default);
+})(["display:block;margin:0 0 ", ";font-size:", ";font-weight:", ";", ";", ";", ";"], (0, _constants.get)('space.2'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'), _constants.TYPOGRAPHY, _constants.COMMON, _sx.default);
 
 FormGroupLabel.displayName = 'FormGroup.Label';
 

package/lib/FormGroup.jsx

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const FormGroup = styled_components_1.default.div `
+  margin: ${constants_1.get('space.3')} 0;
+  font-weight: ${constants_1.get('fontWeights.normal')};
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+const FormGroupLabel = styled_components_1.default.label `
+  display: block;
+  margin: 0 0 ${constants_1.get('space.2')};
+  font-size: ${constants_1.get('fontSizes.1')};
+  font-weight: ${constants_1.get('fontWeights.bold')};
+  ${constants_1.TYPOGRAPHY};
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+FormGroupLabel.displayName = 'FormGroup.Label';
+exports.default = Object.assign(FormGroup, { Label: FormGroupLabel });

package/lib/Grid.jsx

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = __importDefault(require("./Box"));
+/**
+ * @deprecated Use the Box component instead (i.e. <Grid> → <Box display="grid">)
+ */
+const Grid = styled_components_1.default(Box_1.default) ``;
+Grid.defaultProps = {
+    display: 'grid'
+};
+exports.default = Grid;

package/lib/Header.d.ts

@@ -1,23 +1,24 @@
 /// <reference types="hoist-non-react-statics" />
 import * as History from 'history';
+import { SystemBorderProps, SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const Header: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+declare const Header: import("styled-components").StyledComponent<"div", any, SystemBorderProps & SystemCommonProps & SxProp, never>;
 declare const HeaderItem: import("styled-components").StyledComponent<"div", any, {
     full?: boolean | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp, never>;
 declare const HeaderLink: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp & SystemTypographyProps & SystemBorderProps, never>;
 export declare type HeaderProps = ComponentProps<typeof Header>;
 export declare type HeaderLinkProps = ComponentProps<typeof HeaderLink>;
 export declare type HeaderItemProps = ComponentProps<typeof HeaderItem>;
-declare const _default: string & import("styled-components").StyledComponentBase<"div", any, SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+declare const _default: string & import("styled-components").StyledComponentBase<"div", any, SystemBorderProps & SystemCommonProps & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
     Link: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
-    } & SxProp, never>;
+    } & SystemCommonProps & SxProp & SystemTypographyProps & SystemBorderProps, never>;
     Item: import("styled-components").StyledComponent<"div", any, {
         full?: boolean | undefined;
-    } & SxProp, never>;
+    } & SystemCommonProps & SxProp, never>;
 };
 export default _default;

package/lib/Header.js

@@ -21,14 +21,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const Header = _styledComponents.default.div.withConfig({
   displayName: "Header",
   componentId: "sc-217i47-0"
-})(["z-index:32;display:flex;padding:", ";font-size:", ";line-height:", ";color:", ";background-color:", ";align-items:center;flex-wrap:nowrap;", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.header.text'), (0, _constants.get)('colors.header.bg'), _sx.default);
+})(["z-index:32;display:flex;padding:", ";font-size:", ";line-height:", ";color:", ";background-color:", ";align-items:center;flex-wrap:nowrap;", " ", " ", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.header.text'), (0, _constants.get)('colors.header.bg'), _constants.COMMON, _constants.BORDER, _sx.default);
 
 const HeaderItem = _styledComponents.default.div.withConfig({
   displayName: "Header__HeaderItem",
   componentId: "sc-217i47-1"
-})(["display:flex;margin-right:", ";align-self:stretch;align-items:center;flex-wrap:nowrap;", ";", ";"], (0, _constants.get)('space.3'), ({
+})(["display:flex;margin-right:", ";align-self:stretch;align-items:center;flex-wrap:nowrap;", ";", ";", ";", ";"], (0, _constants.get)('space.3'), ({
   full
-}) => full && (0, _styledComponents.css)(["flex:auto;"]), _sx.default);
+}) => full && (0, _styledComponents.css)(["flex:auto;"]), _constants.COMMON, _constants.BORDER, _sx.default);
 
 HeaderItem.displayName = 'Header.Item';
 
@@ -49,7 +49,7 @@ const HeaderLink = _styledComponents.default.a.attrs(({
 }).withConfig({
   displayName: "Header__HeaderLink",
   componentId: "sc-217i47-2"
-})(["font-weight:", ";color:", ";white-space:nowrap;cursor:pointer;text-decoration:none;display:flex;align-items:center;&:hover,&:focus{color:", ";}", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.header.logo'), (0, _constants.get)('colors.header.text'), _sx.default);
+})(["font-weight:", ";color:", ";white-space:nowrap;cursor:pointer;text-decoration:none;display:flex;align-items:center;&:hover,&:focus{color:", ";}", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.header.logo'), (0, _constants.get)('colors.header.text'), _constants.COMMON, _constants.BORDER, _constants.TYPOGRAPHY, _sx.default);
 
 HeaderLink.displayName = 'Header.Link';
 

package/lib/Header.jsx

@@ -0,0 +1,90 @@
+"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 styled_components_1 = __importStar(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const Header = styled_components_1.default.div `
+  z-index: 32;
+  display: flex;
+  padding: ${constants_1.get('space.3')};
+  font-size: ${constants_1.get('fontSizes.1')};
+  line-height: ${constants_1.get('lineHeights.default')};
+  color: ${constants_1.get('colors.header.text')};
+  background-color: ${constants_1.get('colors.header.bg')};
+  align-items: center;
+  flex-wrap: nowrap;
+
+  ${constants_1.COMMON}
+  ${constants_1.BORDER}
+  ${sx_1.default};
+`;
+const HeaderItem = styled_components_1.default.div `
+  display: flex;
+  margin-right: ${constants_1.get('space.3')};
+  align-self: stretch;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  ${({ full }) => full &&
+    styled_components_1.css `
+      flex: auto;
+    `};
+
+  ${constants_1.COMMON};
+  ${constants_1.BORDER};
+  ${sx_1.default};
+`;
+HeaderItem.displayName = 'Header.Item';
+const HeaderLink = styled_components_1.default.a.attrs(({ to }) => {
+    const isReactRouter = typeof to === 'string';
+    if (isReactRouter) {
+        // 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 {};
+    }
+}) `
+  font-weight: ${constants_1.get('fontWeights.bold')};
+  color: ${constants_1.get('colors.header.logo')};
+  white-space: nowrap;
+  cursor: pointer;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    color: ${constants_1.get('colors.header.text')};
+  }
+
+  ${constants_1.COMMON};
+  ${constants_1.BORDER};
+  ${constants_1.TYPOGRAPHY};
+  ${sx_1.default};
+`;
+HeaderLink.displayName = 'Header.Link';
+exports.default = Object.assign(Header, { Link: HeaderLink, Item: HeaderItem });

package/lib/Heading.jsx

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const theme_1 = __importDefault(require("./theme"));
+const Heading = styled_components_1.default.h2 `
+  font-weight: ${constants_1.get('fontWeights.bold')};
+  font-size: ${constants_1.get('fontSizes.5')};
+  margin: 0;
+  ${constants_1.TYPOGRAPHY};
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+Heading.defaultProps = {
+    theme: theme_1.default
+};
+exports.default = Heading;

package/lib/Label.d.ts

@@ -1,10 +1,11 @@
 import { BorderColorProps } from 'styled-system';
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Label: import("styled-components").StyledComponent<"span", any, {
     variant?: "small" | "medium" | "large" | "xl" | undefined;
     dropshadow?: boolean | undefined;
     outline?: boolean | undefined;
-} & BorderColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & SxProp, never>;
+} & BorderColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & SystemCommonProps & SxProp, never>;
 export declare type LabelProps = ComponentProps<typeof Label>;
 export default Label;