@primer/components 0.0.0-2021113144816 → 0.0.0-2021113174023

package/lib/Pagination/Pagination.jsx

@@ -0,0 +1,163 @@
+"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 Box_1 = __importDefault(require("../Box"));
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+const model_1 = require("./model");
+const Page = styled_components_1.default.a `
+  display: inline-block;
+  min-width: 32px;
+  padding: 5px 10px;
+  font-style: normal;
+  line-height: 20px;
+  color: ${constants_1.get('colors.fg.default')};
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+
+  margin-right: ${constants_1.get('space.1')};
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  border: ${constants_1.get('borderWidths.1')} solid transparent;
+  border-radius: ${constants_1.get('radii.2')};
+  transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    border-color: ${constants_1.get('colors.border.default')};
+    outline: 0;
+    transition-duration: 0.1s;
+  }
+
+  &:active {
+    border-color: ${constants_1.get('colors.border.muted')};
+  }
+
+  &[rel='prev'],
+  &[rel='next'] {
+    color: ${constants_1.get('colors.accent.fg')};
+  }
+
+  &[aria-current],
+  &[aria-current]:hover {
+    color: ${constants_1.get('colors.fg.onEmphasis')};
+    background-color: ${constants_1.get('colors.accent.emphasis')};
+    border-color: transparent;
+  }
+
+  &[aria-disabled],
+  &[aria-disabled]:hover {
+    color: ${constants_1.get('colors.primer.fg.disabled')}; // check
+    cursor: default;
+    border-color: transparent;
+  }
+
+  @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
+    &[rel='prev']::before,
+    &[rel='next']::after {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      vertical-align: text-bottom;
+      content: '';
+      background-color: currentColor;
+    }
+
+    // chevron-left
+    &[rel='prev']::before {
+      margin-right: ${constants_1.get('space.1')};
+      clip-path: polygon(
+        9.8px 12.8px,
+        8.7px 12.8px,
+        4.5px 8.5px,
+        4.5px 7.5px,
+        8.7px 3.2px,
+        9.8px 4.3px,
+        6.1px 8px,
+        9.8px 11.7px,
+        9.8px 12.8px
+      );
+    }
+
+    // chevron-right
+    &[rel='next']::after {
+      margin-left: ${constants_1.get('space.1')};
+      clip-path: polygon(
+        6.2px 3.2px,
+        7.3px 3.2px,
+        11.5px 7.5px,
+        11.5px 8.5px,
+        7.3px 12.8px,
+        6.2px 11.7px,
+        9.9px 8px,
+        6.2px 4.3px,
+        6.2px 3.2px
+      );
+    }
+  }
+
+  ${constants_1.COMMON};
+`;
+function usePaginationPages({ theme, pageCount, currentPage, onPageChange, hrefBuilder, marginPageCount, showPages, surroundingPageCount }) {
+    const pageChange = react_1.default.useCallback(n => (e) => onPageChange(e, n), [onPageChange]);
+    const model = react_1.default.useMemo(() => {
+        return model_1.buildPaginationModel(pageCount, currentPage, !!showPages, marginPageCount, surroundingPageCount);
+    }, [pageCount, currentPage, showPages, marginPageCount, surroundingPageCount]);
+    const children = react_1.default.useMemo(() => {
+        return model.map(page => {
+            const { props, key, content } = model_1.buildComponentData(page, hrefBuilder, pageChange(page.num));
+            return (<Page {...props} key={key} theme={theme}>
+          {content}
+        </Page>);
+        });
+    }, [model, hrefBuilder, pageChange, theme]);
+    return children;
+}
+const PaginationContainer = styled_components_1.default.nav `
+  margin-top: 20px;
+  margin-bottom: 15px;
+  text-align: center;
+  ${sx_1.default};
+`;
+function Pagination({ theme, pageCount, currentPage, onPageChange = noop, hrefBuilder = defaultHrefBuilder, marginPageCount = 1, showPages = true, surroundingPageCount = 2, ...rest }) {
+    const pageElements = usePaginationPages({
+        theme,
+        pageCount,
+        currentPage,
+        onPageChange,
+        hrefBuilder,
+        marginPageCount,
+        showPages,
+        surroundingPageCount
+    });
+    return (<PaginationContainer aria-label="Pagination" {...rest} theme={theme}>
+      <Box_1.default display="inline-block" theme={theme}>
+        {pageElements}
+      </Box_1.default>
+    </PaginationContainer>);
+}
+function defaultHrefBuilder(pageNum) {
+    return `#${pageNum}`;
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() { }
+Pagination.defaultProps = {
+    hrefBuilder: defaultHrefBuilder,
+    marginPageCount: 1,
+    onPageChange: noop,
+    showPages: true,
+    surroundingPageCount: 2
+};
+exports.default = Pagination;

package/lib/Pagination/index.js

@@ -1,13 +1,7 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _Pagination = _interopRequireDefault(require("./Pagination"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _Pagination.default;
-exports.default = _default;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Pagination_1 = __importDefault(require("./Pagination"));
+exports.default = Pagination_1.default;

package/lib/Pagination/model.jsx

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildComponentData = exports.buildPaginationModel = void 0;
+function buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount) {
+    const pages = [];
+    if (showPages) {
+        const pageNums = [];
+        const addPage = (n) => {
+            if (n >= 1 && n <= pageCount) {
+                pageNums.push(n);
+            }
+        };
+        // Start by defining the window of pages to show around the current page.
+        // If the window goes off either edge, shift it until it fits.
+        let extentLeft = currentPage - surroundingPageCount;
+        let extentRight = currentPage + surroundingPageCount;
+        if (extentLeft < 1 && extentRight > pageCount) {
+            // Our window is larger than the entire range,
+            // so simply display every page.
+            extentLeft = 1;
+            extentRight = pageCount;
+        }
+        else if (extentLeft < 1) {
+            while (extentLeft < 1) {
+                extentLeft++;
+                extentRight++;
+            }
+        }
+        else if (extentRight > pageCount) {
+            while (extentRight > pageCount) {
+                extentLeft--;
+                extentRight--;
+            }
+        }
+        // Next, include the pages in the margins.
+        // If a margin page is already covered in the window,
+        // extend the window to the other direction.
+        for (let i = 1; i <= marginPageCount; i++) {
+            const leftPage = i;
+            const rightPage = pageCount - (i - 1);
+            if (leftPage >= extentLeft) {
+                extentRight++;
+            }
+            else {
+                addPage(leftPage);
+            }
+            if (rightPage <= extentRight) {
+                extentLeft--;
+            }
+            else {
+                addPage(rightPage);
+            }
+        }
+        for (let i = extentLeft; i <= extentRight; i++) {
+            addPage(i);
+        }
+        const sorted = pageNums
+            .slice()
+            .sort((a, b) => a - b)
+            .filter((item, idx, ary) => !idx || item !== ary[idx - 1]);
+        for (let idx = 0; idx < sorted.length; idx++) {
+            const num = sorted[idx];
+            const selected = num === currentPage;
+            if (idx === 0) {
+                if (num !== 1) {
+                    // If the first page isn't page one,
+                    // we need to add a break
+                    pages.push({
+                        type: 'BREAK',
+                        num: 1
+                    });
+                }
+                pages.push({
+                    type: 'NUM',
+                    num,
+                    selected
+                });
+            }
+            else {
+                const last = sorted[idx - 1];
+                const delta = num - last;
+                if (delta === 1) {
+                    pages.push({
+                        type: 'NUM',
+                        num,
+                        selected
+                    });
+                }
+                else {
+                    // We skipped some, so add a break
+                    pages.push({
+                        type: 'BREAK',
+                        num: num - 1
+                    });
+                    pages.push({
+                        type: 'NUM',
+                        num,
+                        selected
+                    });
+                }
+            }
+        }
+        const lastPage = pages[pages.length - 1];
+        if (lastPage.type === 'NUM' && lastPage.num !== pageCount) {
+            // The last page we rendered wasn't the actual last page,
+            // so we need an additional break
+            pages.push({
+                type: 'BREAK',
+                num: pageCount
+            });
+        }
+    }
+    const prev = { type: 'PREV', num: currentPage - 1, disabled: currentPage === 1 };
+    const next = { type: 'NEXT', num: currentPage + 1, disabled: currentPage === pageCount };
+    return [prev, ...pages, next];
+}
+exports.buildPaginationModel = buildPaginationModel;
+function buildComponentData(page, hrefBuilder, onClick) {
+    const props = {};
+    let content = '';
+    let key = '';
+    switch (page.type) {
+        case 'PREV': {
+            key = 'page-prev';
+            content = 'Previous';
+            if (page.disabled) {
+                Object.assign(props, { as: 'span', 'aria-disabled': 'true' });
+            }
+            else {
+                Object.assign(props, {
+                    rel: 'prev',
+                    href: hrefBuilder(page.num),
+                    'aria-label': 'Previous Page',
+                    onClick
+                });
+            }
+            break;
+        }
+        case 'NEXT': {
+            key = 'page-next';
+            content = 'Next';
+            if (page.disabled) {
+                Object.assign(props, { as: 'span', 'aria-disabled': 'true' });
+            }
+            else {
+                Object.assign(props, {
+                    rel: 'next',
+                    href: hrefBuilder(page.num),
+                    'aria-label': 'Next Page',
+                    onClick
+                });
+            }
+            break;
+        }
+        case 'NUM': {
+            key = `page-${page.num}`;
+            content = String(page.num);
+            if (page.selected) {
+                Object.assign(props, { as: 'em', 'aria-current': 'page' });
+            }
+            else {
+                Object.assign(props, { href: hrefBuilder(page.num), 'aria-label': `Page ${page.num}`, onClick });
+            }
+            break;
+        }
+        case 'BREAK': {
+            key = `page-${page.num}-break`;
+            content = '…';
+            Object.assign(props, { as: 'span', 'aria-disabled': true });
+        }
+    }
+    return { props, key, content };
+}
+exports.buildComponentData = buildComponentData;

package/lib/PointerBox.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 react_1 = __importDefault(require("react"));
+const BorderBox_1 = __importDefault(require("./BorderBox"));
+const Caret_1 = __importDefault(require("./Caret"));
+function PointerBox(props) {
+    // don't destructure these, just grab them
+    const { bg, border, borderColor, theme } = props;
+    const { caret, children, ...boxProps } = props;
+    const caretProps = {
+        bg,
+        borderColor,
+        borderWidth: border,
+        location: caret,
+        theme
+    };
+    return (<BorderBox_1.default sx={{ position: 'relative' }} {...boxProps}>
+      {children}
+      <Caret_1.default {...caretProps}/>
+    </BorderBox_1.default>);
+}
+exports.default = PointerBox;

package/lib/Popover.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="hoist-non-react-statics" />
+import { SystemCommonProps, SystemLayoutProps, SystemPositionProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare type CaretPosition = 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
@@ -6,15 +7,15 @@ declare const Popover: import("styled-components").StyledComponent<"div", any, {
     caret?: CaretPosition | undefined;
     relative?: boolean | undefined;
     open?: boolean | undefined;
-} & SxProp, never>;
-declare const PopoverContent: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+} & SystemCommonProps & SystemLayoutProps & SystemPositionProps & SxProp, never>;
+declare const PopoverContent: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
 export declare type PopoverProps = ComponentProps<typeof Popover>;
 export declare type PopoverContentProps = ComponentProps<typeof PopoverContent>;
 declare const _default: string & import("styled-components").StyledComponentBase<"div", any, {
     caret?: CaretPosition | undefined;
     relative?: boolean | undefined;
     open?: boolean | undefined;
-} & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
-    Content: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+} & SystemCommonProps & SystemLayoutProps & SystemPositionProps & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Content: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
 };
 export default _default;

package/lib/Popover.js

@@ -9,6 +9,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _Box = _interopRequireDefault(require("./Box"));
+
 var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
@@ -25,13 +27,12 @@ const Popover = _styledComponents.default.div.attrs(({
 }).withConfig({
   displayName: "Popover",
   componentId: "sc-1nxygy2-0"
-})(["position:", ";z-index:100;display:", ";", ";"], props => props.relative ? 'relative' : 'absolute', props => props.open ? 'block' : 'none', _sx.default);
+})(["position:", ";z-index:100;display:", ";", ";", ";", ";", ";"], props => props.relative ? 'relative' : 'absolute', props => props.open ? 'block' : 'none', _constants.COMMON, _constants.LAYOUT, _constants.POSITION, _sx.default);
 
-const PopoverContent = _styledComponents.default.div.withConfig({
+const PopoverContent = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Popover__PopoverContent",
   componentId: "sc-1nxygy2-1"
-})(["border:1px solid ", ";border-radius:", ";position:relative;width:232px;margin-right:auto;margin-left:auto;padding:", ";background-color:", ";&::before,&::after{position:absolute;left:50%;display:inline-block;content:'';}&::before{top:-", ";margin-left:-9px;border:", " solid transparent;border-bottom-color:", ";}&::after{top:-14px;margin-left:-", ";border:7px solid transparent;border-bottom-color:", ";}", ".caret-pos--bottom &,", ".caret-pos--bottom-right &,", ".caret-pos--bottom-left &{&::before,&::after{top:auto;border-bottom-color:transparent;}&::before{bottom:-", ";border-top-color:", ";}&::after{bottom:-14px;border-top-color:", ";}}", ".caret-pos--top-right &,", ".caret-pos--bottom-right &{right:-9px;margin-right:0;&::before,&::after{left:auto;margin-left:0;}&::before{right:20px;}&::after{right:21px;}}", ".caret-pos--top-left &,", ".caret-pos--bottom-left &{left:-9px;margin-left:0;&::before,&::after{left:", ";margin-left:0;}&::after{left:calc(", " + 1px);}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &,", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before,&::after{top:50%;left:auto;margin-left:0;border-bottom-color:transparent;}&::before{margin-top:calc((", " + 1px) * -1);}&::after{margin-top:-", ";}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &{&::before{right:-", ";border-left-color:", ";}&::after{right:-14px;border-left-color:", ";}}", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before{left:-", ";border-right-color:", ";}&::after{left:-14px;border-right-color:", ";}}", ".caret-pos--right-top &,", ".caret-pos--left-top &{&::before,&::after{top:", ";}}", ".caret-pos--right-bottom &,", ".caret-pos--left-bottom &{&::before,&::after{top:auto;}&::before{bottom:", ";}&::after{bottom:calc(", " + 1px);}}", ";"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('space.4'), (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, Popover, Popover, (0, _constants.get)('space.4'), (0, _constants.get)('space.4'), Popover, Popover, Popover, Popover, Popover, Popover, (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), Popover, Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, (0, _constants.get)('space.4'), Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), _sx.default);
-
+})(["border:1px solid ", ";border-radius:", ";position:relative;width:232px;margin-right:auto;margin-left:auto;padding:", ";background-color:", ";", ";", ";&::before,&::after{position:absolute;left:50%;display:inline-block;content:'';}&::before{top:-", ";margin-left:-9px;border:", " solid transparent;border-bottom-color:", ";}&::after{top:-14px;margin-left:-", ";border:7px solid transparent;border-bottom-color:", ";}", ".caret-pos--bottom &,", ".caret-pos--bottom-right &,", ".caret-pos--bottom-left &{&::before,&::after{top:auto;border-bottom-color:transparent;}&::before{bottom:-", ";border-top-color:", ";}&::after{bottom:-14px;border-top-color:", ";}}", ".caret-pos--top-right &,", ".caret-pos--bottom-right &{right:-9px;margin-right:0;&::before,&::after{left:auto;margin-left:0;}&::before{right:20px;}&::after{right:21px;}}", ".caret-pos--top-left &,", ".caret-pos--bottom-left &{left:-9px;margin-left:0;&::before,&::after{left:", ";margin-left:0;}&::after{left:calc(", " + 1px);}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &,", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before,&::after{top:50%;left:auto;margin-left:0;border-bottom-color:transparent;}&::before{margin-top:calc((", " + 1px) * -1);}&::after{margin-top:-", ";}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &{&::before{right:-", ";border-left-color:", ";}&::after{right:-14px;border-left-color:", ";}}", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before{left:-", ";border-right-color:", ";}&::after{left:-14px;border-right-color:", ";}}", ".caret-pos--right-top &,", ".caret-pos--left-top &{&::before,&::after{top:", ";}}", ".caret-pos--right-bottom &,", ".caret-pos--left-bottom &{&::before,&::after{top:auto;}&::before{bottom:", ";}&::after{bottom:calc(", " + 1px);}}", ";"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('space.4'), (0, _constants.get)('colors.canvas.overlay'), _constants.COMMON, _constants.LAYOUT, (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, Popover, Popover, (0, _constants.get)('space.4'), (0, _constants.get)('space.4'), Popover, Popover, Popover, Popover, Popover, Popover, (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), Popover, Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, (0, _constants.get)('space.4'), Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), _sx.default);
 Popover.defaultProps = {
   caret: 'top'
 };

package/lib/Popover.jsx

@@ -0,0 +1,210 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = __importDefault(require("./Box"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const Popover = styled_components_1.default.div.attrs(({ className, caret }) => {
+    return {
+        className: classnames_1.default(className, `caret-pos--${caret}`)
+    };
+}) `
+  position: ${props => (props.relative ? 'relative' : 'absolute')};
+  z-index: 100;
+  display: ${props => (props.open ? 'block' : 'none')};
+
+  ${constants_1.COMMON};
+  ${constants_1.LAYOUT};
+  ${constants_1.POSITION};
+  ${sx_1.default};
+`;
+const PopoverContent = styled_components_1.default(Box_1.default) `
+  border: 1px solid ${constants_1.get('colors.border.default')};
+  border-radius: ${constants_1.get('radii.2')};
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: ${constants_1.get('space.4')};
+  background-color: ${constants_1.get('colors.canvas.overlay')};
+
+  ${constants_1.COMMON};
+  ${constants_1.LAYOUT};
+
+  // Carets
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    top: -${constants_1.get('space.3')};
+    margin-left: -9px;
+    border: ${constants_1.get('space.2')} solid transparent; // TODO: solid?
+    border-bottom-color: ${constants_1.get('colors.border.default')};
+  }
+
+  &::after {
+    top: -14px;
+    margin-left: -${constants_1.get('space.2')};
+    border: 7px solid transparent; // todo: solid
+    border-bottom-color: ${constants_1.get('colors.canvas.overlay')};
+  }
+
+  // Bottom-oriented carets
+  ${Popover}.caret-pos--bottom & ,
+  ${Popover}.caret-pos--bottom-right & ,
+  ${Popover}.caret-pos--bottom-left & {
+    &::before,
+    &::after {
+      top: auto;
+      border-bottom-color: transparent;
+    }
+
+    &::before {
+      bottom: -${constants_1.get('space.3')};
+      border-top-color: ${constants_1.get('colors.border.default')};
+    }
+
+    &::after {
+      bottom: -14px;
+      // stylelint-disable-next-line primer/borders
+      border-top-color: ${constants_1.get('colors.canvas.overlay')};
+    }
+  }
+
+  // Top & Bottom: Right-oriented carets
+  ${Popover}.caret-pos--top-right & ,
+  ${Popover}.caret-pos--bottom-right & {
+    right: -9px;
+    margin-right: 0;
+
+    &::before,
+    &::after {
+      left: auto;
+      margin-left: 0;
+    }
+
+    &::before {
+      right: 20px;
+    }
+
+    &::after {
+      right: 21px;
+    }
+  }
+
+  // Top & Bottom: Left-oriented carets
+  ${Popover}.caret-pos--top-left & ,
+  ${Popover}.caret-pos--bottom-left & {
+    left: -9px;
+    margin-left: 0;
+
+    &::before,
+    &::after {
+      left: ${constants_1.get('space.4')};
+      margin-left: 0;
+    }
+
+    &::after {
+      left: calc(${constants_1.get('space.4')} + 1px);
+    }
+  }
+
+  // Right- & Left-oriented carets
+  ${Popover}.caret-pos--right & ,
+  ${Popover}.caret-pos--right-top & ,
+  ${Popover}.caret-pos--right-bottom & ,
+  ${Popover}.caret-pos--left & ,
+  ${Popover}.caret-pos--left-top & ,
+  ${Popover}.caret-pos--left-bottom & {
+    &::before,
+    &::after {
+      top: 50%;
+      left: auto;
+      margin-left: 0;
+      border-bottom-color: transparent;
+    }
+
+    &::before {
+      // stylelint-disable-next-line primer/spacing
+      margin-top: calc((${constants_1.get('space.2')} + 1px) * -1);
+    }
+
+    &::after {
+      margin-top: -${constants_1.get('space.2')};
+    }
+  }
+
+  // Right-oriented carets
+  ${Popover}.caret-pos--right & ,
+  ${Popover}.caret-pos--right-top & ,
+  ${Popover}.caret-pos--right-bottom & {
+    &::before {
+      right: -${constants_1.get('space.3')};
+      border-left-color: ${constants_1.get('colors.border.default')};
+    }
+
+    &::after {
+      right: -14px;
+      // stylelint-disable-next-line primer/borders
+      border-left-color: ${constants_1.get('colors.canvas.overlay')};
+    }
+  }
+
+  // Left-oriented carets
+  ${Popover}.caret-pos--left & ,
+  ${Popover}.caret-pos--left-top & ,
+  ${Popover}.caret-pos--left-bottom & {
+    &::before {
+      left: -${constants_1.get('space.3')};
+      border-right-color: ${constants_1.get('colors.border.default')};
+    }
+
+    &::after {
+      left: -14px;
+      // stylelint-disable-next-line primer/borders
+      border-right-color: ${constants_1.get('colors.canvas.overlay')};
+    }
+  }
+
+  // Right & Left: Top-oriented carets
+  ${Popover}.caret-pos--right-top & ,
+  ${Popover}.caret-pos--left-top & {
+    &::before,
+    &::after {
+      top: ${constants_1.get('space.4')};
+    }
+  }
+
+  // Right & Left: Bottom-oriented carets
+  ${Popover}.caret-pos--right-bottom & ,
+  ${Popover}.caret-pos--left-bottom & {
+    &::before,
+    &::after {
+      top: auto;
+    }
+
+    &::before {
+      bottom: ${constants_1.get('space.3')};
+    }
+
+    &::after {
+      bottom: calc(${constants_1.get('space.3')} + 1px);
+    }
+  }
+
+  ${sx_1.default};
+`;
+Popover.defaultProps = {
+    caret: 'top'
+};
+PopoverContent.displayName = 'Popover.Content';
+exports.default = Object.assign(Popover, { Content: PopoverContent });