@primer/components 0.0.0-20211030175556 → 0.0.0-20211030182910

package/lib/BranchName.jsx

@@ -1,20 +0,0 @@
-"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 BranchName = styled_components_1.default.a `
-  display: inline-block;
-  padding: 2px 6px;
-  font-size: ${constants_1.get('fontSizes.0')};
-  font-family: ${constants_1.get('fonts.mono')};
-  color: ${constants_1.get('colors.fg.muted')};
-  background-color: ${constants_1.get('colors.accent.subtle')};
-  border-radius: ${constants_1.get('radii.2')};
-  ${constants_1.COMMON};
-  ${sx_1.default};
-`;
-exports.default = BranchName;

package/lib/Breadcrumbs.jsx

@@ -1,71 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Breadcrumb = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-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 SELECTED_CLASS = 'selected';
-const Wrapper = styled_components_1.default.li `
-  display: inline-block;
-  white-space: nowrap;
-  list-style: none;
-  &::after {
-    padding-right: 0.5em;
-    padding-left: 0.5em;
-    color: ${constants_1.get('colors.fg.muted')};
-    font-size: ${constants_1.get('fontSizes.1')};
-    content: '/';
-  }
-  &:first-child {
-    margin-left: 0;
-  }
-  &:last-child {
-    &::after {
-      content: none;
-    }
-  }
-`;
-const BreadcrumbsBase = styled_components_1.default.nav `
-  display: flex;
-  justify-content: space-between;
-  ${sx_1.default};
-`;
-function Breadcrumbs({ className, children, sx: sxProp }) {
-    const wrappedChildren = react_1.default.Children.map(children, child => <Wrapper>{child}</Wrapper>);
-    return (<BreadcrumbsBase className={className} aria-label="Breadcrumbs" sx={sxProp}>
-      <Box_1.default as="ol" my={0} pl={0}>
-        {wrappedChildren}
-      </Box_1.default>
-    </BreadcrumbsBase>);
-}
-const BreadcrumbsItem = styled_components_1.default.a.attrs(props => ({
-    activeClassName: typeof props.to === 'string' ? 'selected' : '',
-    className: classnames_1.default(props.selected && SELECTED_CLASS, props.className),
-    'aria-current': props.selected ? 'page' : null
-})) `
-  color: ${constants_1.get('colors.accent.fg')};
-  display: inline-block;
-  font-size: ${constants_1.get('fontSizes.1')};
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-  &.selected {
-    color: ${constants_1.get('colors.fg.default')};
-    pointer-events: none;
-  }
-  ${sx_1.default};
-`;
-Breadcrumbs.displayName = 'Breadcrumbs';
-BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
-exports.default = Object.assign(Breadcrumbs, { Item: BreadcrumbsItem });
-/**
- * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
- */
-exports.Breadcrumb = Object.assign(Breadcrumbs, { Item: BreadcrumbsItem });

package/lib/Button/Button.jsx

@@ -1,40 +0,0 @@
-"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 ButtonBase_1 = __importDefault(require("./ButtonBase"));
-const Button = styled_components_1.default(ButtonBase_1.default) `
-  color: ${constants_1.get('colors.btn.text')};
-  background-color: ${constants_1.get('colors.btn.bg')};
-  border: 1px solid ${constants_1.get('colors.btn.border')};
-  box-shadow: ${constants_1.get('shadows.btn.shadow')}, ${constants_1.get('shadows.btn.insetShadow')}};
-
-  &:hover {
-    background-color: ${constants_1.get('colors.btn.hoverBg')};
-    border-color: ${constants_1.get('colors.btn.hoverBorder')};
-  }
-
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${constants_1.get('colors.btn.focusBorder')};
-    box-shadow: ${constants_1.get('shadows.btn.focusShadow')};
-  }
-
-  &:active {
-    background-color: ${constants_1.get('colors.btn.selectedBg')};
-    box-shadow: ${constants_1.get('shadows.btn.shadowActive')};
-  }
-
-  &:disabled {
-    color: ${constants_1.get('colors.primer.fg.disabled')};
-    background-color: ${constants_1.get('colors.btn.bg')};
-    border-color: ${constants_1.get('colors.btn.border')};
-  }
-
-  ${sx_1.default};
-`;
-exports.default = Button;

package/lib/Button/ButtonBase.jsx

@@ -1,33 +0,0 @@
-"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 ButtonStyles_1 = __importDefault(require("./ButtonStyles"));
-const variants = styled_system_1.variant({
-    variants: {
-        small: {
-            p: '4px 12px',
-            fontSize: 0
-        },
-        medium: {
-            fontSize: 1
-        },
-        large: {
-            fontSize: 2,
-            p: '10px 20px'
-        }
-    }
-});
-const ButtonBase = styled_components_1.default.button.attrs(({ disabled, onClick }) => ({
-    onClick: disabled ? undefined : onClick
-})) `
-  ${ButtonStyles_1.default}
-  ${variants}
-`;
-ButtonBase.defaultProps = {
-    variant: 'medium'
-};
-exports.default = ButtonBase;

package/lib/Button/ButtonClose.jsx

@@ -1,53 +0,0 @@
-"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 octicons_react_1 = require("@primer/octicons-react");
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const StyledButton = styled_components_1.default.button `
-  border: none;
-  padding: 0;
-  background: transparent;
-  outline: none;
-  cursor: pointer;
-  border-radius: ${constants_1.get('radii.2')};
-  color: ${constants_1.get('colors.fg.muted')};
-
-  &:focus {
-    box-shadow: ${constants_1.get('shadows.btn.focusShadow')};
-  }
-
-  &:hover {
-    color: ${constants_1.get('colors.accent.fg')};
-  }
-  ${sx_1.default};
-`;
-const ButtonClose = react_1.forwardRef((props, ref) => {
-    return (<StyledButton ref={ref} aria-label="Close" {...props}>
-      <octicons_react_1.XIcon />
-    </StyledButton>);
-});
-exports.default = ButtonClose;

package/lib/Button/ButtonDanger.jsx

@@ -1,43 +0,0 @@
-"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 ButtonBase_1 = __importDefault(require("./ButtonBase"));
-const ButtonDanger = styled_components_1.default(ButtonBase_1.default) `
-  color: ${constants_1.get('colors.btn.danger.text')};
-  border: 1px solid ${constants_1.get('colors.btn.border')};
-  background-color: ${constants_1.get('colors.btn.bg')};
-  box-shadow: ${constants_1.get('shadows.btn.shadow')};
-
-  &:hover {
-    color: ${constants_1.get('colors.btn.danger.hoverText')};
-    background-color: ${constants_1.get('colors.btn.danger.hoverBg')};
-    border-color: ${constants_1.get('colors.btn.danger.hoverBorder')};
-    box-shadow: ${constants_1.get('shadows.btn.danger.hoverShadow')};
-  }
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${constants_1.get('colors.btn.danger.focusBorder')};
-    box-shadow: ${constants_1.get('shadows.btn.danger.focusShadow')};
-  }
-
-  &:active {
-    color: ${constants_1.get('colors.btn.danger.selectedText')};
-    background-color: ${constants_1.get('colors.btn.danger.selectedBg')};
-    box-shadow: ${constants_1.get('shadows.btn.danger.selectedShadow')};
-    border-color: ${constants_1.get('colors.btn.danger.selectedBorder')};
-  }
-
-  &:disabled {
-    color: ${constants_1.get('colors.btn.danger.disabledText')};
-    background-color: ${constants_1.get('colors.btn.danger.disabledBg')};
-    border-color: ${constants_1.get('colors.btn.danger.disabledBorder')};
-  }
-
-  ${sx_1.default};
-`;
-exports.default = ButtonDanger;

package/lib/Button/ButtonGroup.jsx

@@ -1,55 +0,0 @@
-"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"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const ButtonGroup = styled_components_1.default(Box_1.default) `
-  vertical-align: middle;
-
-  && > * {
-    position: relative;
-    border-right-width: 0;
-    border-radius: 0;
-
-    :first-child {
-      border-top-left-radius: ${constants_1.get('radii.2')};
-      border-bottom-left-radius: ${constants_1.get('radii.2')};
-      margin-right: 0;
-    }
-
-    :not(:first-child) {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    :last-child {
-      border-right-width: 1px;
-      border-top-right-radius: ${constants_1.get('radii.2')};
-      border-bottom-right-radius: ${constants_1.get('radii.2')};
-    }
-
-    :focus,
-    :active,
-    :hover {
-      border-right-width: 1px;
-      + * {
-        border-left-width: 0;
-      }
-    }
-
-    :focus,
-    :active {
-      z-index: 1;
-    }
-  }
-
-  ${sx_1.default};
-`;
-ButtonGroup.defaultProps = {
-    display: 'inline-block'
-};
-exports.default = ButtonGroup;

package/lib/Button/ButtonInvisible.jsx

@@ -1,32 +0,0 @@
-"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 ButtonBase_1 = __importDefault(require("./ButtonBase"));
-const ButtonInvisible = styled_components_1.default(ButtonBase_1.default) `
-  color: ${constants_1.get('colors.accent.fg')};
-  background-color: transparent;
-  border: 0;
-  border-radius: ${constants_1.get('radii.2')};
-  box-shadow: none;
-
-  &:disabled {
-    color: ${constants_1.get('colors.primer.fg.disabled')};
-  }
-  &:focus {
-    box-shadow: ${constants_1.get('shadows.btn.focusShadow')};
-  }
-  &:hover {
-    background-color: ${constants_1.get('colors.btn.hoverBg')};
-  }
-  &:active {
-    background-color: ${constants_1.get('colors.btn.selectedBg')};
-  }
-
-  ${sx_1.default}
-`;
-exports.default = ButtonInvisible;

package/lib/Button/ButtonOutline.jsx

@@ -1,43 +0,0 @@
-"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 ButtonBase_1 = __importDefault(require("./ButtonBase"));
-const ButtonOutline = styled_components_1.default(ButtonBase_1.default) `
-  color: ${constants_1.get('colors.btn.outline.text')};
-  border: 1px solid ${constants_1.get('colors.btn.border')};
-  background-color: ${constants_1.get('colors.btn.bg')};
-  box-shadow: ${constants_1.get('shadows.btn.shadow')};
-
-  &:hover {
-    color: ${constants_1.get('colors.btn.outline.hoverText')};
-    background-color: ${constants_1.get('colors.btn.outline.hoverBg')};
-    border-color: ${constants_1.get('colors.btn.outline.hoverBorder')};
-    box-shadow: ${constants_1.get('shadows.btn.outline.hoverShadow')};
-  }
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${constants_1.get('colors.btn.outline.focusBorder')};
-    box-shadow: ${constants_1.get('shadows.btn.outline.focusShadow')};
-  }
-
-  &:active {
-    color: ${constants_1.get('colors.btn.outline.selectedText')};
-    background-color: ${constants_1.get('colors.btn.outline.selectedBg')};
-    box-shadow: ${constants_1.get('shadows.btn.outline.selectedShadow')};
-    border-color: ${constants_1.get('colors.btn.outline.selectedBorder')};
-  }
-
-  &:disabled {
-    color: ${constants_1.get('colors.btn.outline.disabledText')};
-    background-color: ${constants_1.get('colors.btn.outline.disabledBg')};
-    border-color: ${constants_1.get('colors.btn.border')};
-  }
-
-  ${sx_1.default};
-`;
-exports.default = ButtonOutline;

package/lib/Button/ButtonPrimary.jsx

@@ -1,42 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonPrimary = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const ButtonBase_1 = __importDefault(require("./ButtonBase"));
-exports.ButtonPrimary = styled_components_1.default(ButtonBase_1.default) `
-  color: ${constants_1.get('colors.btn.primary.text')};
-  border: 1px solid ${constants_1.get('colors.btn.primary.border')};
-  background-color: ${constants_1.get('colors.btn.primary.bg')};
-  box-shadow: ${constants_1.get('shadows.btn.primary.shadow')};
-
-  &:hover {
-    color: ${constants_1.get('colors.btn.primary.hoverText')};
-    background-color: ${constants_1.get('colors.btn.primary.hoverBg')};
-    border-color: ${constants_1.get('colors.btn.primary.hoverBorder')};
-    box-shadow: ${constants_1.get('shadows.btn.primary.hoverShadow')};
-  }
-  // focus must come before :active so that the active box shadow overrides
-  &:focus {
-    border-color: ${constants_1.get('colors.btn.primary.focusBorder')};
-    box-shadow: ${constants_1.get('shadows.btn.primary.focusShadow')};
-  }
-
-  &:active {
-    background-color: ${constants_1.get('colors.btn.primary.selectedBg')};
-    box-shadow: ${constants_1.get('shadows.btn.primary.selectedShadow')};
-  }
-
-  &:disabled {
-    color: ${constants_1.get('colors.btn.primary.disabledText')};
-    background-color: ${constants_1.get('colors.btn.primary.disabledBg')};
-    border-color: ${constants_1.get('colors.btn.primary.disabledBorder')};
-  }
-
-  ${sx_1.default};
-`;
-exports.default = exports.ButtonPrimary;

package/lib/Button/ButtonStyles.jsx

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const styled_components_1 = require("styled-components");
-const constants_1 = require("../constants");
-exports.default = styled_components_1.css `
-  position: relative;
-  display: inline-block;
-  padding: 6px 16px;
-  font-family: inherit;
-  font-weight: ${constants_1.get('fontWeights.bold')};
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  border-radius: ${constants_1.get('radii.2')};
-  appearance: none;
-  text-decoration: none;
-  text-align: center;
-
-  &:hover {
-    // needed to override link styles
-    text-decoration: none;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:disabled {
-    cursor: default;
-  }
-
-  &:disabled svg {
-    opacity: 0.6;
-  }
-`;

package/lib/Button/ButtonTableList.jsx

@@ -1,46 +0,0 @@
-"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 ButtonTableList = styled_components_1.default.summary `
-  display: inline-block;
-  padding: 0;
-  font-size: ${constants_1.get('fontSizes.1')};
-  color: ${constants_1.get('colors.fg.muted')};
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  appearance: none; // Corrects inability to style clickable input types in iOS.
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:disabled {
-    &,
-    &:hover {
-      color: ${constants_1.get('colors.primer.fg.disabled')};
-      cursor: default;
-    }
-  }
-
-  &:after {
-    display: inline-block;
-    margin-left: ${constants_1.get('space.1')};
-    width: 0;
-    height: 0;
-    vertical-align: -2px;
-    content: '';
-    border: 4px solid transparent;
-    border-top-color: currentcolor;
-  }
-  ${sx_1.default};
-`;
-exports.default = ButtonTableList;

package/lib/Caret.jsx

@@ -1,93 +0,0 @@
-"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 = require("styled-components");
-const styled_system_1 = require("styled-system");
-const oppositeEdge = {
-    top: 'Bottom',
-    right: 'Left',
-    bottom: 'Top',
-    left: 'Right'
-};
-const perpendicularEdge = {
-    top: 'Left',
-    right: 'Top',
-    bottom: 'Left',
-    left: 'Top'
-};
-function getEdgeAlign(location) {
-    const [edge, align] = location.split('-');
-    return [edge, align];
-}
-function getPosition(edge, align, spacing) {
-    const opposite = oppositeEdge[edge].toLowerCase();
-    const perp = perpendicularEdge[edge].toLowerCase();
-    return {
-        [opposite]: '100%',
-        [align || perp]: align ? spacing : '50%'
-    };
-}
-const getBg = styled_system_1.style({ prop: 'bg', key: 'colors' });
-const getBorderColor = styled_system_1.style({ prop: 'borderColor', key: 'colors' });
-const getBorderWidth = styled_system_1.style({ prop: 'borderWidth', key: 'borderWidths', scale: [0, 1] });
-function Caret(props) {
-    const theme = react_1.default.useContext(styled_components_1.ThemeContext);
-    const propsWithTheme = { ...props, theme: props.theme ?? theme };
-    const { bg } = getBg(propsWithTheme);
-    const { borderColor } = getBorderColor(propsWithTheme);
-    const { borderWidth } = getBorderWidth(propsWithTheme);
-    const { size = 8, location = 'bottom' } = props;
-    const [edge, align] = getEdgeAlign(location);
-    const perp = perpendicularEdge[edge];
-    // note: these arrays represent points in the form [x, y]
-    const a = [-size, 0];
-    const b = [0, size];
-    const c = [size, 0];
-    // spaces are optional in path `d` attribute, and points are
-    // represented in the form `x,y` -- which is what the arrays above
-    // become when stringified!
-    const triangle = `M${a}L${b}L${c}L${a}Z`;
-    const line = `M${a}L${b}L${c}`;
-    const transform = {
-        top: `translate(${[size, size * 2]}) rotate(180)`,
-        right: `translate(${[0, size]}) rotate(-90)`,
-        bottom: `translate(${[size, 0]})`,
-        left: `translate(${[size * 2, size]}) rotate(90)`
-    }[edge];
-    return (<svg width={size * 2} height={size * 2} style={{
-            pointerEvents: 'none',
-            position: 'absolute',
-            ...getPosition(edge, align, size),
-            // if align is set (top|right|bottom|left),
-            // then we don't need an offset margin
-            [`margin${perp}`]: align ? null : -size
-        }}>
-      <g transform={transform}>
-        <path d={triangle} fill={bg}/>
-        <path d={line} fill="none" stroke={borderColor} strokeWidth={borderWidth}/>
-      </g>
-    </svg>);
-}
-Caret.locations = [
-    'top',
-    'top-left',
-    'top-right',
-    'right',
-    'right-top',
-    'right-bottom',
-    'bottom',
-    'bottom-left',
-    'bottom-right',
-    'left',
-    'left-top',
-    'left-bottom'
-];
-Caret.defaultProps = {
-    bg: 'canvas.default',
-    borderColor: 'border.default',
-    borderWidth: 1
-};
-exports.default = Caret;

package/lib/CircleBadge.jsx

@@ -1,42 +0,0 @@
-"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 StyledOcticon_1 = __importDefault(require("./StyledOcticon"));
-const sx_1 = __importDefault(require("./sx"));
-const isNumeric_1 = __importDefault(require("./utils/isNumeric"));
-const variantSizes = {
-    small: 56,
-    medium: 96,
-    large: 128
-};
-const sizeStyles = ({ size, variant = 'medium' }) => {
-    const calc = isNumeric_1.default(size) ? size : variantSizes[variant];
-    return {
-        width: calc,
-        height: calc
-    };
-};
-const CircleBadge = styled_components_1.default.div `
-  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
-  align-items: center;
-  justify-content: center;
-  background-color: ${constants_1.get('colors.canvas.default')};
-  border-radius: 50%;
-  box-shadow: ${constants_1.get('shadows.shadow.medium')};
-  ${sizeStyles};
-  ${sx_1.default};
-`;
-const CircleBadgeIcon = styled_components_1.default(StyledOcticon_1.default) `
-  height: auto;
-  max-width: 60%;
-  max-height: 55%;
-`;
-CircleBadge.defaultProps = {
-    inline: false
-};
-CircleBadgeIcon.displayName = 'CircleBadge.Icon';
-exports.default = Object.assign(CircleBadge, { Icon: CircleBadgeIcon });