@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib/Avatar.jsx

@@ -1,34 +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"));
-function getBorderRadius({ size, square }) {
-    if (square) {
-        return size && size <= 24 ? '4px' : '6px';
-    }
-    else {
-        return '50%';
-    }
-}
-const Avatar = styled_components_1.default.img.attrs(props => ({
-    height: props.size,
-    width: props.size
-})) `
-  display: inline-block;
-  overflow: hidden; // Ensure page layout in Firefox should images fail to load
-  line-height: ${constants_1.get('lineHeights.condensedUltra')};
-  vertical-align: middle;
-  border-radius: ${props => getBorderRadius(props)};
-  ${constants_1.COMMON};
-  ${sx_1.default}
-`;
-Avatar.defaultProps = {
-    size: 20,
-    alt: '',
-    square: false
-};
-exports.default = Avatar;

package/lib/AvatarPair.jsx

@@ -1,29 +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 = __importDefault(require("styled-components"));
-const Avatar_1 = __importDefault(require("./Avatar"));
-const constants_1 = require("./constants");
-const _1 = require(".");
-const ChildAvatar = styled_components_1.default(Avatar_1.default) `
-  position: absolute;
-  right: -15%;
-  bottom: -9%;
-  box-shadow: ${constants_1.get('shadows.avatar.childShadow')};
-`;
-const AvatarPair = ({ children, ...rest }) => {
-    const avatars = react_1.default.Children.map(children, (child, i) => {
-        if (!react_1.default.isValidElement(child))
-            return child;
-        return i === 0 ? (react_1.default.cloneElement(child, { size: 40 })) : (<ChildAvatar bg="canvas.default" {...child.props} size={20}/>);
-    });
-    return (<_1.Box position="relative" display="inline-flex" {...rest}>
-      {avatars}
-    </_1.Box>);
-};
-// styled() changes this
-AvatarPair.displayName = 'AvatarPair';
-exports.default = AvatarPair;

package/lib/AvatarStack.jsx

@@ -1,151 +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 classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("./constants");
-const _1 = require(".");
-const sx_1 = __importDefault(require("./sx"));
-const AvatarStackWrapper = styled_components_1.default.span `
-  display: flex;
-  position: relative;
-  height: 20px;
-  min-width: ${props => (props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px')};
-
-  .pc-AvatarItem {
-    flex-shrink: 0;
-    height: 20px;
-    width: 20px;
-    box-shadow: 0 0 0 1px ${constants_1.get('colors.canvas.default')};
-    margin-left: -11px;
-    position: relative;
-    overflow: hidden;
-    transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
-      box-shadow 0.1s ease-in-out;
-
-    &:first-child {
-      margin-left: 0;
-    }
-    &:nth-child(n + 4) {
-      display: none;
-    }
-  }
-
-  &.pc-AvatarStack--two {
-    min-width: 30px;
-    .pc-AvatarItem {
-      &:nth-child(n + 3) {
-        display: none;
-      }
-    }
-  }
-
-  &.pc-AvatarStack--three-plus {
-    min-width: 38px;
-    .pc-AvatarItem {
-      &:nth-child(3) {
-        opacity: ${100 - 3 * 15}%;
-        margin-left: -17px;
-      }
-      &:nth-child(4) {
-        opacity: ${100 - 4 * 15}%;
-        margin-left: -17px;
-      }
-      &:nth-child(5) {
-        opacity: ${100 - 5 * 15}%;
-        margin-left: -17px;
-      }
-      &:nth-child(n + 4) {
-        display: block;
-      }
-      &:nth-child(n + 6) {
-        opacity: 0;
-        visibility: hidden;
-      }
-    }
-  }
-
-  &.pc-AvatarStack--right {
-    justify-content: flex-end;
-    .pc-AvatarItem {
-      margin-left: 0 !important;
-      margin-right: -11px;
-
-      &:first-child {
-        margin-right: 0;
-      }
-    }
-
-    .pc-AvatarStackBody {
-      flex-direction: row-reverse;
-
-      &:hover {
-        .pc-AvatarItem {
-          margin-right: ${constants_1.get('space.1')}!important;
-          margin-left: 0 !important;
-
-          &:first-child {
-            margin-right: 0 !important;
-          }
-        }
-      }
-    }
-  }
-
-  &.pc-AvatarStack--three-plus.pc-AvatarStack--right {
-    .pc-AvatarItem {
-      &:nth-child(3) {
-        margin-right: -17px;
-      }
-      &:nth-child(4) {
-        margin-right: -17px;
-      }
-      &:nth-child(5) {
-        margin-right: -17px;
-      }
-    }
-  }
-
-  .pc-AvatarStackBody:hover {
-    width: auto;
-
-    .pc-AvatarItem {
-      margin-left: ${constants_1.get('space.1')};
-      opacity: 100%;
-      visibility: visible;
-      box-shadow: 0 0 0 4px ${constants_1.get('colors.canvas.default')};
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-
-  ${sx_1.default};
-`;
-const transformChildren = (children) => {
-    return react_1.default.Children.map(children, (child, index) => {
-        if (!react_1.default.isValidElement(child))
-            return child;
-        return react_1.default.cloneElement(child, {
-            className: classnames_1.default(child.props.className, 'pc-AvatarItem'),
-            sx: { zIndex: 10 - index, ...child.props.sx }
-        });
-    });
-};
-const AvatarStack = ({ children, alignRight, sx: sxProp }) => {
-    const count = react_1.default.Children.count(children);
-    const wrapperClassNames = classnames_1.default({
-        'pc-AvatarStack--two': count === 2,
-        'pc-AvatarStack--three-plus': count > 2,
-        'pc-AvatarStack--right': alignRight
-    });
-    return (<AvatarStackWrapper count={count} className={wrapperClassNames} sx={sxProp}>
-      <_1.Box position="absolute" display="flex" width="38px" className="pc-AvatarStackBody">
-        {transformChildren(children)}
-      </_1.Box>
-    </AvatarStackWrapper>);
-};
-exports.default = AvatarStack;

package/lib/BaseStyles.jsx

@@ -1,65 +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 react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("./constants");
-const GlobalStyle = styled_components_1.createGlobalStyle `
-  * { box-sizing: border-box; }
-  body { margin: 0; }
-  table { border-collapse: collapse; }
-  
-  [role="button"]:focus:not(:focus-visible):not(.focus-visible),
-  [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
-  button:focus:not(:focus-visible):not(.focus-visible),
-  summary:focus:not(:focus-visible):not(.focus-visible),
-  a:focus:not(:focus-visible):not(.focus-visible) {
-    outline: none;
-    box-shadow: none;
-  }
-
-  [tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
-  details-dialog:focus:not(:focus-visible):not(.focus-visible) {
-    outline: none;
-  }
-`;
-const Base = styled_components_1.default.div `
-  ${constants_1.TYPOGRAPHY};
-  ${constants_1.COMMON};
-`;
-function BaseStyles(props) {
-    const { children, ...rest } = props;
-    // load polyfill for :focus-visible
-    require('focus-visible');
-    return (<Base {...rest} data-portal-root>
-      <GlobalStyle />
-      {children}
-    </Base>);
-}
-BaseStyles.defaultProps = {
-    color: 'fg.default',
-    fontFamily: 'normal',
-    lineHeight: 'default'
-};
-exports.default = BaseStyles;

package/lib/BorderBox.jsx

@@ -1,18 +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"));
-/**
- * @deprecated Use the Box component instead (i.e. <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>)
- */
-const BorderBox = styled_components_1.default(Box_1.default) ``;
-BorderBox.defaultProps = {
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'border.default',
-    borderRadius: 2
-};
-exports.default = BorderBox;

package/lib/Box.jsx

@@ -1,10 +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 sx_1 = __importDefault(require("./sx"));
-const Box = styled_components_1.default.div(styled_system_1.space, styled_system_1.color, styled_system_1.typography, styled_system_1.layout, styled_system_1.flexbox, styled_system_1.grid, styled_system_1.background, styled_system_1.border, styled_system_1.position, styled_system_1.shadow, sx_1.default);
-exports.default = Box;

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,74 +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;
-  ${constants_1.COMMON};
-  ${constants_1.FLEX};
-  ${sx_1.default};
-`;
-function Breadcrumbs({ className, children, theme, ...rest }) {
-    const wrappedChildren = react_1.default.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>);
-    return (<BreadcrumbsBase className={className} aria-label="Breadcrumbs" theme={theme} {...rest}>
-      <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;
-  }
-  ${constants_1.COMMON}
-  ${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,60 +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 styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const ButtonBase_1 = __importStar(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')};
-  }
-
-  ${ButtonBase_1.buttonSystemProps};
-  ${sx_1.default};
-`;
-exports.default = Button;

package/lib/Button/ButtonBase.jsx

@@ -1,36 +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.buttonSystemProps = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const styled_system_1 = require("styled-system");
-const constants_1 = require("../constants");
-const ButtonStyles_1 = __importDefault(require("./ButtonStyles"));
-exports.buttonSystemProps = styled_system_1.compose(styled_system_1.fontSize, constants_1.COMMON, constants_1.LAYOUT);
-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,55 +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')};
-  }
-  ${constants_1.COMMON};
-  ${constants_1.LAYOUT};
-  ${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,63 +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 styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const ButtonBase_1 = __importStar(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')};
-  }
-
-  ${ButtonBase_1.buttonSystemProps};
-  ${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;