@primer/components 0.0.0-20219922627 → 0.0.0-2022530201059

package/lib/utils/deprecate.js

@@ -7,7 +7,7 @@ exports.Deprecations = exports.useDeprecation = exports.deprecate = void 0;
 
 var _react = require("react");
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
+/* eslint-disable no-console */
 const noop = () => {}; // eslint-disable-next-line import/no-mutable-exports
 
 
@@ -77,8 +77,7 @@ class Deprecations {
     message,
     version
   }) {
-    const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`; // eslint-disable-next-line no-console
-
+    const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`;
     console.warn(msg);
     this.get().deprecations.push({
       name,

package/lib/utils/isNumeric.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = isNumeric;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isNumeric(n) {
   return !isNaN(parseFloat(n)) && isFinite(n);
 }

package/lib/utils/iterateFocusableElements.js

@@ -109,5 +109,5 @@ function isFocusable(elem, strict = false) {
 
 
 function isTabbable(elem, strict = false) {
-  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+  return isFocusable(elem, strict) && elem.getAttribute("tabindex") !== "-1";
 }

package/lib/utils/test-deprecations.js

@@ -6,7 +6,6 @@ var _deprecate = require("./deprecate");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const ourVersion = require('../../package.json').version;
 
 beforeEach(() => {

package/lib/utils/test-matchers.js

@@ -13,7 +13,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 expect.addSnapshotSerializer(_serializer.styleSheetSerializer);
 
 const stringify = d => JSON.stringify(d, null, '  ');
+/**
+ * These are props that styled-system aliases for backwards compatibility.
+ * For some reason, they don't show up in our toImplementSystemProps() matcher,
+ * so we skip over them.
+ */
 
+
+const ALIAS_PROP_TYPES = ['w', 'align', 'justify', 'wrap'];
 expect.extend({
   toMatchKeys(obj, values) {
     return {
@@ -48,12 +55,14 @@ expect.extend({
       }
     };
 
-    const elem = /*#__PURE__*/_react.default.cloneElement(element, {
+    const elem = _react.default.cloneElement(element, {
       sx: sxPropValue
     });
 
+    const rendered = (0, _testing.render)(elem);
+
     function checkStylesDeep(rendered) {
-      const className = rendered.props.className;
+      const className = rendered !== null && rendered !== void 0 && rendered.props ? rendered.props.className : '';
       const styles = (0, _testing.getComputedStyles)(className);
       const mediaStyles = styles[mediaKey];
 
@@ -67,7 +76,7 @@ expect.extend({
     }
 
     return {
-      pass: checkStylesDeep((0, _testing.render)(elem)),
+      pass: checkStylesDeep(rendered),
       message: () => 'sx prop values did not change styles of component nor of any sub-components'
     };
   },

package/lib/utils/testing.js

@@ -226,6 +226,7 @@ function unloadCSS(path) {
 
 function behavesAsComponent({
   Component,
+  systemPropArray,
   toRender,
   options
 }) {
@@ -241,12 +242,12 @@ function behavesAsComponent({
 
   if (!options.skipAs) {
     it('respects the as prop', () => {
-      const As = /*#__PURE__*/_react.default.forwardRef((_props, ref) => /*#__PURE__*/_react.default.createElement("div", {
+      const As = _react.default.forwardRef((_props, ref) => /*#__PURE__*/_react.default.createElement("div", {
         className: "as-component",
         ref: ref
       }));
 
-      const elem = /*#__PURE__*/_react.default.cloneElement(getElement(), {
+      const elem = _react.default.cloneElement(getElement(), {
         as: As
       });
 
@@ -260,8 +261,7 @@ function behavesAsComponent({
   it('renders consistently', () => {
     expect(render(getElement())).toMatchSnapshot();
   });
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+}
 
 function checkExports(path, exports) {
   it('has declared exports', () => {

package/lib/utils/theme.js

@@ -16,7 +16,7 @@ function fontStack(fonts) {
 
 
 function isShadowValue(value) {
-  return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value);
+  return typeof value === 'string' && /(inset\s|)([0-9.empx\s]+){1,4}rgb[a]?\(.*\)/.test(value);
 }
 
 function isColorValue(value) {

package/lib/utils/uniqueId.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uniqueId = uniqueId;
-// Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.
 let idSeed = 10000;
 
 function uniqueId() {

package/lib-esm/AvatarPair.js

@@ -4,7 +4,7 @@ import React from 'react';
 import styled from 'styled-components';
 import Avatar from './Avatar';
 import { get } from './constants';
-import { Box } from '.';
+import { Relative } from './Position';
 const ChildAvatar = styled(Avatar).withConfig({
   displayName: "AvatarPair__ChildAvatar",
   componentId: "sc-1jbk273-0"
@@ -15,17 +15,16 @@ const AvatarPair = ({
   ...rest
 }) => {
   const avatars = React.Children.map(children, (child, i) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) return child;
-    return i === 0 ? /*#__PURE__*/React.cloneElement(child, {
+    if (!React.isValidElement(child)) return child;
+    return i === 0 ? React.cloneElement(child, {
       size: 40
     }) : /*#__PURE__*/React.createElement(ChildAvatar, _extends({
-      bg: "canvas.default"
+      bg: "bg.canvas"
     }, child.props, {
       size: 20
     }));
   });
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    position: "relative",
+  return /*#__PURE__*/React.createElement(Relative, _extends({
     display: "inline-flex"
   }, rest), avatars);
 };

package/lib-esm/AvatarStack.js

@@ -1,18 +1,20 @@
+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); }
+
 import classnames from 'classnames';
 import React from 'react';
 import styled from 'styled-components';
-import { get } from './constants';
-import { Box } from '.';
+import { COMMON, get } from './constants';
+import { Absolute } from './Position';
 import sx from './sx';
 const AvatarStackWrapper = styled.span.withConfig({
   displayName: "AvatarStack__AvatarStackWrapper",
   componentId: "sc-1qgzd2v-0"
-})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";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:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;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:", "!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:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, get('space.1'), get('space.1'), get('colors.canvas.default'), sx);
+})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";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:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;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:", "!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:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.bg.canvas'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, get('space.1'), get('space.1'), get('colors.bg.canvas'), COMMON, sx);
 
 const transformChildren = children => {
   return React.Children.map(children, (child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) return child;
-    return /*#__PURE__*/React.cloneElement(child, {
+    if (!React.isValidElement(child)) return child;
+    return React.cloneElement(child, {
       className: classnames(child.props.className, 'pc-AvatarItem'),
       sx: {
         zIndex: 10 - index,
@@ -25,7 +27,7 @@ const transformChildren = children => {
 const AvatarStack = ({
   children,
   alignRight,
-  sx: sxProp
+  ...rest
 }) => {
   const count = React.Children.count(children);
   const wrapperClassNames = classnames({
@@ -33,12 +35,10 @@ const AvatarStack = ({
     'pc-AvatarStack--three-plus': count > 2,
     'pc-AvatarStack--right': alignRight
   });
-  return /*#__PURE__*/React.createElement(AvatarStackWrapper, {
+  return /*#__PURE__*/React.createElement(AvatarStackWrapper, _extends({
     count: count,
-    className: wrapperClassNames,
-    sx: sxProp
-  }, /*#__PURE__*/React.createElement(Box, {
-    position: "absolute",
+    className: wrapperClassNames
+  }, rest), /*#__PURE__*/React.createElement(Absolute, {
     display: "flex",
     width: "38px",
     className: "pc-AvatarStackBody"

package/lib-esm/BaseStyles.js

@@ -3,23 +3,25 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { COMMON, TYPOGRAPHY } from './constants';
+import useMouseIntent from './hooks/useMouseIntent';
 const GlobalStyle = 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;
-  }
+  body.intent-mouse {
+    [role="button"]:focus,
+    [role="tabpanel"][tabindex="0"]:focus,
+    button:focus,
+    summary:focus,
+    a:focus {
+      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;
+    [tabindex="0"]:focus,
+    details-dialog:focus {
+      outline: none;
+    }
   }
 `;
 const Base = styled.div.withConfig({
@@ -31,10 +33,8 @@ function BaseStyles(props) {
   const {
     children,
     ...rest
-  } = props; // load polyfill for :focus-visible
-
-  require('focus-visible');
-
+  } = props;
+  useMouseIntent();
   return /*#__PURE__*/React.createElement(Base, _extends({}, rest, {
     "data-portal-root": true
   }), /*#__PURE__*/React.createElement(GlobalStyle, null), children);

package/lib-esm/BorderBox.js

@@ -1,13 +1,11 @@
 import styled from 'styled-components';
 import Box from './Box';
-
-/**
- * @deprecated Use the Box component instead (i.e. <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>)
- */
+import { BORDER } from './constants';
+import sx from './sx';
 const BorderBox = styled(Box).withConfig({
   displayName: "BorderBox",
   componentId: "oreju5-0"
-})([""]);
+})(["", ";", ";"], BORDER, sx);
 BorderBox.defaultProps = {
   borderWidth: '1px',
   borderStyle: 'solid',

package/lib-esm/Box.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from 'styled-system';
+import { COMMON, FLEX, LAYOUT } from './constants';
 import sx from './sx';
 const Box = styled.div.withConfig({
   displayName: "Box",
   componentId: "nv15kw-0"
-})(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
+})(["", " ", " ", " ", ";"], COMMON, FLEX, LAYOUT, sx);
 export default Box;

package/lib-esm/BranchName.js

@@ -4,5 +4,5 @@ import sx from './sx';
 const BranchName = styled.a.withConfig({
   displayName: "BranchName",
   componentId: "sc-167ouzm-0"
-})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.fg.muted'), get('colors.accent.subtle'), get('radii.2'), COMMON, sx);
+})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.branchName.text'), get('colors.branchName.bg'), get('radii.2'), COMMON, sx);
 export default BranchName;

package/lib-esm/{Breadcrumbs.js → Breadcrumb.js}

@@ -1,7 +1,6 @@
 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); }
 
-import classnames from 'classnames'; // eslint-disable-next-line import/no-namespace
-
+import classnames from 'classnames';
 import React from 'react';
 import styled from 'styled-components';
 import Box from './Box';
@@ -9,26 +8,27 @@ import { COMMON, FLEX, get } from './constants';
 import sx from './sx';
 const SELECTED_CLASS = 'selected';
 const Wrapper = styled.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;}}"], get('colors.fg.muted'), get('fontSizes.1'));
-const BreadcrumbsBase = styled.nav.withConfig({
-  displayName: "Breadcrumbs__BreadcrumbsBase",
-  componentId: "hwwoo0-1"
+  displayName: "Breadcrumb__Wrapper",
+  componentId: "c1r3ff-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;}}"], get('colors.text.disabled'), get('fontSizes.1'));
+const BreadcrumbBase = styled.nav.withConfig({
+  displayName: "Breadcrumb__BreadcrumbBase",
+  componentId: "c1r3ff-1"
 })(["display:flex;justify-content:space-between;", ";", ";", ";"], COMMON, FLEX, sx);
 
-function Breadcrumbs({
+function Breadcrumb({
   className,
   children,
   theme,
   ...rest
 }) {
+  const classes = classnames(className, 'Breadcrumb');
   const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, {
     theme: theme
   }, child));
-  return /*#__PURE__*/React.createElement(BreadcrumbsBase, _extends({
-    className: className,
-    "aria-label": "Breadcrumbs",
+  return /*#__PURE__*/React.createElement(BreadcrumbBase, _extends({
+    className: classes,
+    "aria-label": "breadcrumb",
     theme: theme
   }, rest), /*#__PURE__*/React.createElement(Box, {
     as: "ol",
@@ -37,27 +37,17 @@ function Breadcrumbs({
   }, wrappedChildren));
 }
 
-Breadcrumbs.displayName = "Breadcrumbs";
-const BreadcrumbsItem = styled.a.attrs(props => ({
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbItem = styled.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(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;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
-Breadcrumbs.displayName = 'Breadcrumbs';
-BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
-export default Object.assign(Breadcrumbs, {
-  Item: BreadcrumbsItem
-});
-/**
- * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
- */
-
-export const Breadcrumb = Object.assign(Breadcrumbs, {
-  Item: BreadcrumbsItem
-});
-/**
- * @deprecated Use the `BreadcrumbsProps` type instead
- */
+  displayName: "Breadcrumb__BreadcrumbItem",
+  componentId: "c1r3ff-2"
+})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.text.link'), get('fontSizes.1'), get('colors.text.primary'), COMMON, sx);
+Breadcrumb.displayName = 'Breadcrumb';
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
+export default Object.assign(Breadcrumb, {
+  Item: BreadcrumbItem
+});

package/lib-esm/Button/Button.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const Button = styled(ButtonBase).withConfig({
   displayName: "Button",
   componentId: "xjtz72-0"
-})(["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:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.fg.muted'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
+})(["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:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.text.disabled'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
 export default Button;

package/lib-esm/Button/ButtonClose.js

@@ -8,8 +8,8 @@ import sx from '../sx';
 const StyledButton = styled.button.withConfig({
   displayName: "ButtonClose__StyledButton",
   componentId: "sc-13mzqph-0"
-})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";", ";", ";"], get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), get('colors.accent.fg'), COMMON, LAYOUT, sx);
-const ButtonClose = /*#__PURE__*/forwardRef((props, ref) => {
+})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";", ";", ";"], get('radii.2'), get('colors.text.secondary'), get('shadows.btn.focusShadow'), get('colors.text.link'), COMMON, LAYOUT, sx);
+const ButtonClose = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
     ref: ref,
     "aria-label": "Close"

package/lib-esm/Button/ButtonInvisible.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const ButtonInvisible = styled(ButtonBase).withConfig({
   displayName: "ButtonInvisible",
   componentId: "sc-1195tpn-0"
-})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
+})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.text.link'), get('radii.2'), get('colors.text.disabled'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
 export default ButtonInvisible;

package/lib-esm/Button/ButtonTableList.js

@@ -4,5 +4,5 @@ import sx from '../sx';
 const ButtonTableList = styled.summary.withConfig({
   displayName: "ButtonTableList",
   componentId: "sc-1m4q8ia-0"
-})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.fg.muted'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
+})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.text.secondary'), get('colors.text.secondary'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
 export default ButtonTableList;

package/lib-esm/CircleBadge.js

@@ -23,7 +23,7 @@ const sizeStyles = ({
 const CircleBadge = styled.div.withConfig({
   displayName: "CircleBadge",
   componentId: "sc-1lho816-0"
-})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.canvas.default'), get('shadows.shadow.medium'), COMMON, sizeStyles, sx);
+})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.bg.canvas'), get('shadows.shadow.medium'), COMMON, sizeStyles, sx);
 const CircleBadgeIcon = styled(StyledOcticon).withConfig({
   displayName: "CircleBadge__CircleBadgeIcon",
   componentId: "sc-1lho816-1"

package/lib-esm/CircleOcticon.js

@@ -1,7 +1,8 @@
 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); }
 
 import React from 'react';
-import Box from './Box';
+import BorderBox from './BorderBox';
+import Flex from './Flex';
 
 function CircleOcticon(props) {
   const {
@@ -13,18 +14,14 @@ function CircleOcticon(props) {
     bg,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(BorderBox, {
     as: as,
     bg: bg,
     overflow: "hidden",
     borderWidth: 0,
     size: size,
-    borderRadius: "50%",
-    borderStyle: "solid",
-    borderColor: "border.default"
-  }, /*#__PURE__*/React.createElement(Box, _extends({
-    display: "flex"
-  }, rest, {
+    borderRadius: "50%"
+  }, /*#__PURE__*/React.createElement(Flex, _extends({}, rest, {
     alignItems: "center",
     justifyContent: "center"
   }), /*#__PURE__*/React.createElement(IconComponent, {
@@ -33,7 +30,7 @@ function CircleOcticon(props) {
 }
 
 CircleOcticon.displayName = "CircleOcticon";
-CircleOcticon.defaultProps = { ...Box.defaultProps,
+CircleOcticon.defaultProps = { ...Flex.defaultProps,
   size: 32
 };
 export default CircleOcticon;

package/lib-esm/CounterLabel.js

@@ -7,7 +7,7 @@ const colorStyles = ({
   ...props
 }) => {
   return {
-    color: scheme === 'secondary' ? get('colors.fg.default')(props) : scheme === 'primary' ? get('colors.fg.onEmphasis')(props) : get('colors.fg.default')(props)
+    color: scheme === 'secondary' ? get('colors.counter.text')(props) : scheme === 'primary' ? get('colors.counter.primary.text')(props) : get('colors.counter.text')(props)
   };
 };
 
@@ -16,7 +16,7 @@ const bgStyles = ({
   ...props
 }) => {
   return {
-    backgroundColor: scheme === 'secondary' ? get('colors.neutral.muted')(props) : scheme === 'primary' ? get('colors.neutral.emphasis')(props) : get('colors.neutral.muted')(props)
+    backgroundColor: scheme === 'secondary' ? get('colors.counter.bg')(props) : scheme === 'primary' ? get('colors.counter.primary.bg')(props) : get('colors.counter.bg')(props)
   };
 };
 

package/lib-esm/Dialog.js

@@ -4,22 +4,21 @@ import React, { forwardRef, useRef } from 'react';
 import styled from 'styled-components';
 import ButtonClose from './Button/ButtonClose';
 import { COMMON, get, LAYOUT } from './constants';
-import Box from './Box';
+import Flex from './Flex';
 import useDialog from './hooks/useDialog';
 import sx from './sx';
 import Text from './Text';
-import { useCombinedRefs } from './hooks/useCombinedRefs';
 
 const noop = () => null;
 
 const DialogBase = styled.div.withConfig({
   displayName: "Dialog__DialogBase",
   componentId: "sc-1vcjhsg-0"
-})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], get('shadows.shadow.large'), get('radii.2'), get('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', LAYOUT, COMMON, sx);
-const DialogHeaderBase = styled(Box).withConfig({
+})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], get('shadows.shadow.large'), get('radii.2'), get('colors.bg.primary'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', LAYOUT, COMMON, sx);
+const DialogHeaderBase = styled(Flex).withConfig({
   displayName: "Dialog__DialogHeaderBase",
   componentId: "sc-1vcjhsg-1"
-})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], get('radii.2'), get('radii.2'), get('colors.border.default'), sx);
+})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";@media screen and (max-width:750px){border-radius:0px;}", ";"], get('radii.2'), get('radii.2'), get('colors.border.primary'), sx);
 
 function DialogHeader({
   theme,
@@ -30,7 +29,7 @@ function DialogHeader({
   if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
     children = /*#__PURE__*/React.createElement(Text, {
       theme: theme,
-      color: "fg.default",
+      color: "text.primary",
       fontSize: 1,
       fontWeight: "bold",
       fontFamily: "sans-serif"
@@ -48,8 +47,8 @@ DialogHeader.displayName = "DialogHeader";
 const Overlay = styled.span.withConfig({
   displayName: "Dialog__Overlay",
   componentId: "sc-1vcjhsg-2"
-})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], get('colors.primer.canvas.backdrop'));
-const Dialog = /*#__PURE__*/forwardRef(({
+})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], get('colors.fade.black50'));
+const Dialog = forwardRef(({
   children,
   onDismiss = noop,
   isOpen,
@@ -57,8 +56,11 @@ const Dialog = /*#__PURE__*/forwardRef(({
   returnFocusRef,
   ...props
 }, forwardedRef) => {
+  var _ref;
+
+  const backupRef = useRef(null);
   const overlayRef = useRef(null);
-  const modalRef = useCombinedRefs(forwardedRef);
+  const modalRef = (_ref = forwardedRef) !== null && _ref !== void 0 ? _ref : backupRef;
   const closeButtonRef = useRef(null);
 
   const onCloseClick = () => {
@@ -100,7 +102,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
 DialogHeader.defaultProps = {
   backgroundColor: 'bg.tertiary'
 };
-DialogHeader.propTypes = { ...Box.propTypes
+DialogHeader.propTypes = { ...Flex.propTypes
 };
 DialogHeader.displayName = 'Dialog.Header';
 Dialog.displayName = 'Dialog';

package/lib-esm/Dropdown.js

@@ -48,11 +48,11 @@ const DropdownCaret = styled.div.withConfig({
 const DropdownMenu = styled.ul.withConfig({
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-16yoecj-2"
-})(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], get('colors.canvas.overlay'), get('colors.border.default'), get('radii.2'), get('shadows.shadow.large'), get('colors.canvas.overlay'), get('colors.canvas.overlay'), props => props.direction ? getDirectionStyles(props.theme, props.direction) : '', COMMON, sx);
+})(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], get('colors.bg.overlay'), get('colors.border.overlay'), get('radii.2'), get('shadows.dropdown.shadow'), get('colors.bg.overlay'), get('colors.bg.overlay'), props => props.direction ? getDirectionStyles(props.theme, props.direction) : '', COMMON, sx);
 const DropdownItem = styled.li.withConfig({
   displayName: "Dropdown__DropdownItem",
   componentId: "sc-16yoecj-3"
-})(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], get('space.1'), get('space.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), COMMON, sx);
+})(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], get('space.1'), get('space.1'), get('colors.text.primary'), get('colors.text.primary'), get('colors.text.primary'), get('colors.state.hover.primaryText'), get('colors.state.hover.primaryBg'), get('colors.state.hover.primaryText'), get('colors.state.hover.primaryBg'), COMMON, sx);
 DropdownMenu.defaultProps = {
   direction: 'sw'
 };