@primer/components 0.0.0-202111023745 → 0.0.0-2021111122934

package/lib/BaseStyles.js

@@ -5,42 +5,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _useMouseIntent = _interopRequireDefault(require("./hooks/useMouseIntent"));
-
-var _theme = _interopRequireDefault(require("./theme"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
   * { box-sizing: border-box; }
   body { margin: 0; }
   table { border-collapse: collapse; }
-  body.intent-mouse {
-    [role="button"]:focus,
-    [role="tabpanel"][tabindex="0"]:focus,
-    button:focus,
-    summary:focus,
-    a:focus {
-      outline: none;
-      box-shadow: none;
-    }
+  
+  [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,
-    details-dialog:focus {
-      outline: none;
-    }
+  [tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
+  details-dialog:focus:not(:focus-visible):not(.focus-visible) {
+    outline: none;
   }
 `;
 
@@ -53,21 +48,20 @@ function BaseStyles(props) {
   const {
     children,
     ...rest
-  } = props;
-  (0, _useMouseIntent.default)();
-  return /*#__PURE__*/_react.default.createElement(Base, rest, /*#__PURE__*/_react.default.createElement(GlobalStyle, null), children);
+  } = props; // load polyfill for :focus-visible
+
+  require('focus-visible');
+
+  return /*#__PURE__*/_react.default.createElement(Base, _extends({}, rest, {
+    "data-portal-root": true
+  }), /*#__PURE__*/_react.default.createElement(GlobalStyle, null), children);
 }
 
 BaseStyles.displayName = "BaseStyles";
 BaseStyles.defaultProps = {
-  color: 'gray.9',
+  color: 'fg.default',
   fontFamily: 'normal',
-  lineHeight: 'default',
-  theme: _theme.default
-};
-BaseStyles.propTypes = { ..._constants.TYPOGRAPHY.propTypes,
-  ..._constants.COMMON.propTypes,
-  theme: _propTypes.default.object
+  lineHeight: 'default'
 };
 var _default = BaseStyles;
 exports.default = _default;

package/lib/BorderBox.js

@@ -5,35 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-var _constants = require("./constants");
-
-var _sx = _interopRequireDefault(require("./sx"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/**
+ * @deprecated Use the Box component instead (i.e. <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>)
+ */
 const BorderBox = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "BorderBox",
   componentId: "oreju5-0"
-})(["", ";", ";"], _constants.BORDER, _sx.default);
+})([""]);
 BorderBox.defaultProps = {
-  theme: _theme.default,
   borderWidth: '1px',
   borderStyle: 'solid',
-  borderColor: 'gray.2',
+  borderColor: 'border.default',
   borderRadius: 2
 };
-BorderBox.propTypes = { ..._Box.default.propTypes,
-  ..._constants.BORDER.propTypes,
-  ..._sx.default.propTypes,
-  theme: _propTypes.default.object
-};
 var _default = BorderBox;
 exports.default = _default;

package/lib/Box.js

@@ -5,31 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _constants = require("./constants");
+var _styledSystem = require("styled-system");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Box = _styledComponents.default.div.withConfig({
   displayName: "Box",
   componentId: "nv15kw-0"
-})(["", " ", " ", " ", ";"], _constants.COMMON, _constants.FLEX, _constants.LAYOUT, _sx.default);
+})(_styledSystem.space, _styledSystem.color, _styledSystem.typography, _styledSystem.layout, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.background, _styledSystem.border, _styledSystem.position, _styledSystem.shadow, _sx.default);
 
-Box.defaultProps = {
-  theme: _theme.default
-};
-Box.propTypes = { ..._constants.COMMON.propTypes,
-  ..._constants.FLEX.propTypes,
-  ..._constants.LAYOUT.propTypes,
-  ..._sx.default.propTypes,
-  theme: _propTypes.default.object
-};
 var _default = Box;
 exports.default = _default;

package/lib/BranchName.js

@@ -5,31 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const BranchName = _styledComponents.default.a.withConfig({
   displayName: "BranchName",
   componentId: "sc-167ouzm-0"
-})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:rgba(27,31,35,0.6);background-color:#eaf5ff;border-radius:3px;", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), _constants.COMMON, _sx.default);
+})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.accent.subtle'), (0, _constants.get)('radii.2'), _sx.default);
 
-BranchName.defaultProps = {
-  theme: _theme.default
-};
-BranchName.propTypes = {
-  href: _propTypes.default.string,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes,
-  theme: _propTypes.default.object
-};
 var _default = BranchName;
 exports.default = _default;

package/lib/Breadcrumbs.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Breadcrumb = exports.default = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("./Box"));
+
+var _constants = require("./constants");
+
+var _sx = _interopRequireDefault(require("./sx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SELECTED_CLASS = 'selected';
+
+const Wrapper = _styledComponents.default.li.withConfig({
+  displayName: "Breadcrumbs__Wrapper",
+  componentId: "hwwoo0-0"
+})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'));
+
+const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsBase",
+  componentId: "hwwoo0-1"
+})(["display:flex;justify-content:space-between;", ";"], _sx.default);
+
+function Breadcrumbs({
+  className,
+  children,
+  sx: sxProp
+}) {
+  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, null, child));
+
+  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, {
+    className: className,
+    "aria-label": "Breadcrumbs",
+    sx: sxProp
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "ol",
+    my: 0,
+    pl: 0
+  }, wrappedChildren));
+}
+
+Breadcrumbs.displayName = "Breadcrumbs";
+
+const BreadcrumbsItem = _styledComponents.default.a.attrs(props => ({
+  activeClassName: typeof props.to === 'string' ? 'selected' : '',
+  className: (0, _classnames.default)(props.selected && SELECTED_CLASS, props.className),
+  'aria-current': props.selected ? 'page' : null
+})).withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsItem",
+  componentId: "hwwoo0-2"
+})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", ";"], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), _sx.default);
+
+Breadcrumbs.displayName = 'Breadcrumbs';
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+
+var _default = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
+});
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+
+
+exports.default = _default;
+const Breadcrumb = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
+});
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
+
+exports.Breadcrumb = Breadcrumb;

package/lib/Button/Button.js

@@ -7,29 +7,17 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _sx = _interopRequireDefault(require("../sx"));
-
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _ButtonBase = _interopRequireWildcard(require("./ButtonBase"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _sx = _interopRequireDefault(require("../sx"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Button = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
   displayName: "Button",
   componentId: "xjtz72-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";&:hover{background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:rgba(27,31,35,0.15);box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";border-color:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('buttons.default.color.default'), (0, _constants.get)('buttons.default.bg.default'), (0, _constants.get)('buttons.default.border.default'), (0, _constants.get)('buttons.default.shadow.default'), (0, _constants.get)('buttons.default.bg.hover'), (0, _constants.get)('buttons.default.border.hover'), (0, _constants.get)('buttons.default.shadow.hover'), (0, _constants.get)('buttons.default.shadow.focus'), (0, _constants.get)('buttons.default.bg.active'), (0, _constants.get)('buttons.default.shadow.active'), (0, _constants.get)('buttons.default.border.active'), (0, _constants.get)('buttons.default.color.disabled'), (0, _constants.get)('buttons.default.bg.disabled'), (0, _constants.get)('buttons.default.border.disabled'), _ButtonBase.buttonSystemProps, _sx.default);
-Button.defaultProps = {
-  theme: _theme.default
-};
-Button.propTypes = { ..._ButtonBase.default.propTypes,
-  ..._sx.default.propTypes
-};
+})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _sx.default);
 var _default = Button;
 exports.default = _default;

package/lib/Button/ButtonBase.js

@@ -3,26 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.buttonSystemProps = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _constants = require("../constants");
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _ButtonStyles = _interopRequireDefault(require("./ButtonStyles"));
-
 var _styledSystem = require("styled-system");
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _ButtonStyles = _interopRequireDefault(require("./ButtonStyles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const buttonSystemProps = (0, _styledSystem.compose)(_styledSystem.fontSize, _constants.COMMON, _constants.LAYOUT);
-exports.buttonSystemProps = buttonSystemProps;
 const variants = (0, _styledSystem.variant)({
   variants: {
     small: {
@@ -50,20 +40,7 @@ const ButtonBase = _styledComponents.default.button.attrs(({
 })(["", " ", ""], _ButtonStyles.default, variants);
 
 ButtonBase.defaultProps = {
-  theme: _theme.default,
   variant: 'medium'
 };
-const propTypes = {
-  as: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'a', 'summary', 'input']), _propTypes.default.elementType]),
-  children: _propTypes.default.node,
-  disabled: _propTypes.default.bool,
-  fontSize: _propTypes2.default.typography.fontSize,
-  onClick: _propTypes.default.func,
-  theme: _propTypes.default.object,
-  variant: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  ..._constants.COMMON.propTypes,
-  ..._constants.LAYOUT.propTypes
-};
-ButtonBase.propTypes = propTypes;
 var _default = ButtonBase;
 exports.default = _default;

package/lib/Button/ButtonClose.js

@@ -5,51 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _constants = require("../constants");
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _sx = _interopRequireDefault(require("../sx"));
-
 var _octiconsReact = require("@primer/octicons-react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _constants = require("../constants");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _sx = _interopRequireDefault(require("../sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const StyledButton = _styledComponents.default.button.withConfig({
   displayName: "ButtonClose__StyledButton",
   componentId: "sc-13mzqph-0"
-})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;&:focus{box-shadow:", ";}&:active{color:", ";}", ";", ";", ";"], (0, _constants.get)('buttons.close.shadow.focus'), (0, _constants.get)('buttons.close.color.default'), _constants.COMMON, _constants.LAYOUT, _sx.default);
+})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";"], (0, _constants.get)('radii.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.accent.fg'), _sx.default);
 
-const ButtonClose = (0, _react.forwardRef)(({
-  theme = _theme.default,
-  ...props
-}, ref) => {
+const ButtonClose = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(StyledButton, _extends({
     ref: ref,
     "aria-label": "Close"
-  }, {
-    theme,
-    ...props
-  }), /*#__PURE__*/_react.default.createElement(_octiconsReact.XIcon, null));
+  }, props), /*#__PURE__*/_react.default.createElement(_octiconsReact.XIcon, null));
 });
-ButtonClose.propTypes = {
-  children: _propTypes.default.node,
-  onClick: _propTypes.default.func,
-  ..._constants.COMMON.propTypes,
-  ..._constants.LAYOUT.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = ButtonClose;
 exports.default = _default;

package/lib/Button/ButtonDanger.js

@@ -7,29 +7,17 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _ButtonBase = _interopRequireWildcard(require("./ButtonBase"));
-
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _sx = _interopRequireDefault(require("../sx"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const ButtonDanger = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
   displayName: "ButtonDanger",
   componentId: "sc-13blgmk-0"
-})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:transparent;box-shadow:", ";}&:active{color:", ";background-color:", ";box-shadow:", ";border-color:", ";}&:disabled{color:", ";background-color:", ";border:1px solid ", ";}", ";", ";"], (0, _constants.get)('buttons.danger.color.default'), (0, _constants.get)('buttons.danger.border.default'), (0, _constants.get)('buttons.danger.bg.default'), (0, _constants.get)('buttons.danger.shadow.default'), (0, _constants.get)('buttons.danger.color.hover'), (0, _constants.get)('buttons.danger.bg.hover'), (0, _constants.get)('buttons.danger.border.hover'), (0, _constants.get)('buttons.danger.shadow.hover'), (0, _constants.get)('buttons.danger.shadow.focus'), (0, _constants.get)('buttons.danger.color.active'), (0, _constants.get)('buttons.danger.bg.active'), (0, _constants.get)('buttons.danger.shadow.active'), (0, _constants.get)('buttons.danger.border.active'), (0, _constants.get)('buttons.danger.color.disabled'), (0, _constants.get)('buttons.danger.bg.disabled'), (0, _constants.get)('buttons.danger.border.default'), _ButtonBase.buttonSystemProps, _sx.default);
-ButtonDanger.defaultProps = {
-  theme: _theme.default
-};
-ButtonDanger.propTypes = { ..._ButtonBase.default.propTypes,
-  ..._sx.default.propTypes
-};
+})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{color:", ";background-color:", ";box-shadow:", ";border-color:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";"], (0, _constants.get)('colors.btn.danger.text'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('colors.btn.danger.hoverText'), (0, _constants.get)('colors.btn.danger.hoverBg'), (0, _constants.get)('colors.btn.danger.hoverBorder'), (0, _constants.get)('shadows.btn.danger.hoverShadow'), (0, _constants.get)('colors.btn.danger.focusBorder'), (0, _constants.get)('shadows.btn.danger.focusShadow'), (0, _constants.get)('colors.btn.danger.selectedText'), (0, _constants.get)('colors.btn.danger.selectedBg'), (0, _constants.get)('shadows.btn.danger.selectedShadow'), (0, _constants.get)('colors.btn.danger.selectedBorder'), (0, _constants.get)('colors.btn.danger.disabledText'), (0, _constants.get)('colors.btn.danger.disabledBg'), (0, _constants.get)('colors.btn.danger.disabledBorder'), _sx.default);
 var _default = ButtonDanger;
 exports.default = _default;

package/lib/Button/ButtonGroup.js

@@ -7,11 +7,9 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _constants = require("../constants");
-
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _theme = _interopRequireDefault(require("../theme"));
+var _constants = require("../constants");
 
 var _sx = _interopRequireDefault(require("../sx"));
 
@@ -22,11 +20,7 @@ const ButtonGroup = (0, _styledComponents.default)(_Box.default).withConfig({
   componentId: "peei04-0"
 })(["vertical-align:middle;&& > *{position:relative;border-right-width:0;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";margin-right:0;}:not(:first-child){margin-left:0;margin-right:0;}:last-child{border-right-width:1px;border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{border-right-width:1px;+ *{border-left-width:0;}}:focus,:active{z-index:1;}}", ";"], (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), _sx.default);
 ButtonGroup.defaultProps = {
-  display: 'inline-block',
-  theme: _theme.default
-};
-ButtonGroup.propTypes = { ..._Box.default.propTypes,
-  ..._sx.default.propTypes
+  display: 'inline-block'
 };
 var _default = ButtonGroup;
 exports.default = _default;

package/lib/Button/ButtonInvisible.js

@@ -7,29 +7,17 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _sx = _interopRequireDefault(require("../sx"));
-
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _ButtonBase = _interopRequireWildcard(require("./ButtonBase"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _sx = _interopRequireDefault(require("../sx"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const ButtonInvisible = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
   displayName: "ButtonInvisible",
   componentId: "sc-1195tpn-0"
-})(["color:", ";background-color:transparent;border:0;border-radius:0;box-shadow:none;&:disabled{color:", ";}", ";", ""], (0, _constants.get)('colors.blue.5'), (0, _constants.get)('buttons.default.color.disabled'), _ButtonBase.buttonSystemProps, _sx.default);
-ButtonInvisible.defaultProps = {
-  theme: _theme.default
-};
-ButtonInvisible.propTypes = { ..._ButtonBase.default.propTypes,
-  ..._sx.default.propTypes
-};
+})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}", ""], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.selectedBg'), _sx.default);
 var _default = ButtonInvisible;
 exports.default = _default;

package/lib/Button/ButtonOutline.js

@@ -7,29 +7,17 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _ButtonBase = _interopRequireWildcard(require("./ButtonBase"));
-
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _sx = _interopRequireDefault(require("../sx"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const ButtonOutline = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
   displayName: "ButtonOutline",
   componentId: "sc-15gta9l-0"
-})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:transparent;box-shadow:", ";}&:active{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:disabled{color:", ";border-color:", ";background-color:", ";}", ";", ";"], (0, _constants.get)('buttons.outline.color.default'), (0, _constants.get)('buttons.outline.border.default'), (0, _constants.get)('buttons.outline.bg.default'), (0, _constants.get)('buttons.outline.shadow.default'), (0, _constants.get)('buttons.outline.color.hover'), (0, _constants.get)('buttons.outline.bg.hover'), (0, _constants.get)('buttons.outline.border.hover'), (0, _constants.get)('buttons.outline.shadow.hover'), (0, _constants.get)('buttons.outline.shadow.focus'), (0, _constants.get)('buttons.outline.color.active'), (0, _constants.get)('buttons.outline.bg.active'), (0, _constants.get)('buttons.outline.border.active'), (0, _constants.get)('buttons.outline.shadow.active'), (0, _constants.get)('buttons.outline.color.disabled'), (0, _constants.get)('buttons.outline.border.default'), (0, _constants.get)('buttons.outline.bg.disabled'), _ButtonBase.buttonSystemProps, _sx.default);
-ButtonOutline.defaultProps = {
-  theme: _theme.default
-};
-ButtonOutline.propTypes = { ..._ButtonBase.default.propTypes,
-  ..._sx.default.propTypes
-};
+})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{color:", ";background-color:", ";box-shadow:", ";border-color:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";"], (0, _constants.get)('colors.btn.outline.text'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('colors.btn.outline.hoverText'), (0, _constants.get)('colors.btn.outline.hoverBg'), (0, _constants.get)('colors.btn.outline.hoverBorder'), (0, _constants.get)('shadows.btn.outline.hoverShadow'), (0, _constants.get)('colors.btn.outline.focusBorder'), (0, _constants.get)('shadows.btn.outline.focusShadow'), (0, _constants.get)('colors.btn.outline.selectedText'), (0, _constants.get)('colors.btn.outline.selectedBg'), (0, _constants.get)('shadows.btn.outline.selectedShadow'), (0, _constants.get)('colors.btn.outline.selectedBorder'), (0, _constants.get)('colors.btn.outline.disabledText'), (0, _constants.get)('colors.btn.outline.disabledBg'), (0, _constants.get)('colors.btn.border'), _sx.default);
 var _default = ButtonOutline;
 exports.default = _default;

package/lib/Button/ButtonPrimary.js

@@ -7,30 +7,18 @@ exports.default = exports.ButtonPrimary = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _ButtonBase = _interopRequireWildcard(require("./ButtonBase"));
-
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _sx = _interopRequireDefault(require("../sx"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const ButtonPrimary = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
   displayName: "ButtonPrimary",
   componentId: "sc-1050ge1-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";&:hover{background-color:", ";border-color:", ";}&:focus{border-color:transparent;box-shadow:", ";background-color:", ";}&:active{background-color:", ";box-shadow:", ";border-color:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('buttons.primary.color.default'), (0, _constants.get)('buttons.primary.bg.default'), (0, _constants.get)('buttons.primary.border.default'), (0, _constants.get)('buttons.primary.shadow.default'), (0, _constants.get)('buttons.primary.bg.hover'), (0, _constants.get)('buttons.primary.border.hover'), (0, _constants.get)('buttons.primary.shadow.focus'), (0, _constants.get)('buttons.primary.bg.focus'), (0, _constants.get)('buttons.primary.bg.active'), (0, _constants.get)('buttons.primary.shadow.active'), (0, _constants.get)('buttons.primary.border.active'), (0, _constants.get)('buttons.primary.color.disabled'), (0, _constants.get)('buttons.primary.bg.disabled'), (0, _constants.get)('buttons.primary.border.disabled'), _ButtonBase.buttonSystemProps, _sx.default);
+})(["color:", ";border:1px solid ", ";background-color:", ";box-shadow:", ";&:hover{color:", ";background-color:", ";border-color:", ";box-shadow:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";"], (0, _constants.get)('colors.btn.primary.text'), (0, _constants.get)('colors.btn.primary.border'), (0, _constants.get)('colors.btn.primary.bg'), (0, _constants.get)('shadows.btn.primary.shadow'), (0, _constants.get)('colors.btn.primary.hoverText'), (0, _constants.get)('colors.btn.primary.hoverBg'), (0, _constants.get)('colors.btn.primary.hoverBorder'), (0, _constants.get)('shadows.btn.primary.hoverShadow'), (0, _constants.get)('colors.btn.primary.focusBorder'), (0, _constants.get)('shadows.btn.primary.focusShadow'), (0, _constants.get)('colors.btn.primary.selectedBg'), (0, _constants.get)('shadows.btn.primary.selectedShadow'), (0, _constants.get)('colors.btn.primary.disabledText'), (0, _constants.get)('colors.btn.primary.disabledBg'), (0, _constants.get)('colors.btn.primary.disabledBorder'), _sx.default);
 exports.ButtonPrimary = ButtonPrimary;
-ButtonPrimary.defaultProps = {
-  theme: _theme.default
-};
-ButtonPrimary.propTypes = { ..._ButtonBase.default.propTypes,
-  ..._sx.default.propTypes
-};
 var _default = ButtonPrimary;
 exports.default = _default;