@primer/components 31.2.0-rc.c53cfd9e → 31.2.0

package/lib/FilterList.d.ts

@@ -39,6 +39,26 @@ declare const _default: {
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
+        bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        sx?: import("./sx").BetterSystemStyleObject | undefined;
+        role?: React.AriaRole | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -46,17 +66,16 @@ declare const _default: {
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         className?: string | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         placeholder?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: number | undefined;
         radioGroup?: string | undefined;
-        role?: React.AriaRole | undefined;
         about?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
@@ -79,47 +98,47 @@ declare const _default: {
         inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
-        'aria-atomic'?: boolean | "true" | "false" | undefined;
-        'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
-        'aria-busy'?: boolean | "true" | "false" | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-atomic'?: boolean | "false" | "true" | undefined;
+        'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+        'aria-busy'?: boolean | "false" | "true" | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
         'aria-colindex'?: number | undefined;
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
-        'aria-disabled'?: boolean | "true" | "false" | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-disabled'?: boolean | "false" | "true" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
-        'aria-expanded'?: boolean | "true" | "false" | undefined;
+        'aria-expanded'?: boolean | "false" | "true" | undefined;
         'aria-flowto'?: string | undefined;
-        'aria-grabbed'?: boolean | "true" | "false" | undefined;
-        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
-        'aria-hidden'?: boolean | "true" | "false" | undefined;
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-grabbed'?: boolean | "false" | "true" | undefined;
+        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+        'aria-hidden'?: boolean | "false" | "true" | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
         'aria-label'?: string | undefined;
         'aria-labelledby'?: string | undefined;
         'aria-level'?: number | undefined;
         'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        'aria-modal'?: boolean | "true" | "false" | undefined;
-        'aria-multiline'?: boolean | "true" | "false" | undefined;
-        'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+        'aria-modal'?: boolean | "false" | "true" | undefined;
+        'aria-multiline'?: boolean | "false" | "true" | undefined;
+        'aria-multiselectable'?: boolean | "false" | "true" | undefined;
         'aria-orientation'?: "horizontal" | "vertical" | undefined;
         'aria-owns'?: string | undefined;
         'aria-placeholder'?: string | undefined;
         'aria-posinset'?: number | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-        'aria-readonly'?: boolean | "true" | "false" | undefined;
+        'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-readonly'?: boolean | "false" | "true" | undefined;
         'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-        'aria-required'?: boolean | "true" | "false" | undefined;
+        'aria-required'?: boolean | "false" | "true" | undefined;
         'aria-roledescription'?: string | undefined;
         'aria-rowcount'?: number | undefined;
         'aria-rowindex'?: number | undefined;
         'aria-rowspan'?: number | undefined;
-        'aria-selected'?: boolean | "true" | "false" | undefined;
+        'aria-selected'?: boolean | "false" | "true" | undefined;
         'aria-setsize'?: number | undefined;
         'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
         'aria-valuemax'?: number | undefined;
@@ -289,25 +308,6 @@ declare const _default: {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLUListElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLUListElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLUListElement> | undefined;
-        bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        sx?: import("./sx").BetterSystemStyleObject | undefined;
     } & {
         theme?: any;
     }>): JSX.Element;

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.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.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.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.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;