@primer/components 0.0.0-20219922627 → 0.0.0-2022530201059

package/lib-esm/DropdownStyles.js

@@ -15,7 +15,7 @@ const getDirectionStyles = (theme, direction) => {
         right: -16px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${get('colors.border.default')(theme)};
+        border-left-color: ${get('colors.border.overlay')(theme)};
       }
 
       &::after {
@@ -23,7 +23,7 @@ const getDirectionStyles = (theme, direction) => {
         right: -14px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${get('colors.border.default')(theme)};
+        border-left-color: ${get('colors.border.overlay')(theme)};
       }
     `,
     e: `
@@ -37,14 +37,14 @@ const getDirectionStyles = (theme, direction) => {
         top: 10px;
         left: -16px;
         border-color: transparent;
-        border-right-color: ${get('colors.border.default')(theme)};
+        border-right-color: ${get('colors.border.overlay')(theme)};
       }
 
       &::after {
         top: 11px;
         left: -14px;
         border-color: transparent;
-        border-right-color: ${get('colors.border.default')(theme)};
+        border-right-color: ${get('colors.border.overlay')(theme)};
       }
     `,
     ne: `
@@ -62,7 +62,7 @@ const getDirectionStyles = (theme, direction) => {
       &::before {
         bottom: -8px;
         left: 9px;
-        border-top: 8px solid ${get('colors.border.default')(theme)};
+        border-top: 8px solid ${get('colors.border.overlay')(theme)};
         border-bottom: 0;
         border-left: 8px solid transparent;
       }
@@ -70,7 +70,7 @@ const getDirectionStyles = (theme, direction) => {
       &::after {
         bottom: -7px;
         left: 10px;
-        border-top: 7px solid ${get('colors.border.default')(theme)};
+        border-top: 7px solid ${get('colors.border.overlay')(theme)};
         border-right: 7px solid transparent;
         border-bottom: 0;
         border-left: 7px solid transparent;

package/lib-esm/FilterList.js

@@ -21,7 +21,7 @@ FilterList.displayName = "FilterList";
 const FilterListItemBase = styled.a.withConfig({
   displayName: "FilterList__FilterListItemBase",
   componentId: "sc-1l4pxmz-1"
-})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', get('fontSizes.1'), props => props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'), props => props.selected ? get('colors.accent.emphasis') : '', get('radii.1'), get('colors.canvas.subtle'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('fontWeights.bold'), COMMON, sx);
+})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', get('fontSizes.1'), props => props.selected ? get('colors.state.selected.primaryText') : get('colors.text.secondary'), props => props.selected ? get('colors.state.selected.primaryBg') : '', get('radii.1'), get('colors.bg.tertiary'), get('colors.state.selected.primaryText'), get('colors.state.selected.primaryBg'), get('fontWeights.bold'), COMMON, sx);
 
 function FilterListItem({
   children,

package/lib-esm/Flash.js

@@ -41,7 +41,7 @@ const variants = variant({
 const Flash = styled.div.withConfig({
   displayName: "Flash",
   componentId: "sc-4y90bn-0"
-})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";", ";"], get('colors.fg.default'), get('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : get('radii.2'), props => props.full ? '-1px' : '0', get('space.2'), COMMON, variants, sx);
+})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";", ";"], get('colors.text.primary'), get('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : get('radii.2'), props => props.full ? '-1px' : '0', get('space.2'), COMMON, variants, sx);
 Flash.defaultProps = {
   variant: 'default'
 };

package/lib-esm/Flex.js

@@ -1,9 +1,5 @@
 import styled from 'styled-components';
 import Box from './Box';
-
-/**
- * @deprecated Use the Box component instead (i.e. <Flex> → <Box display="flex">)
- */
 const Flex = styled(Box).withConfig({
   displayName: "Flex",
   componentId: "arghxi-0"

package/lib-esm/Grid.js

@@ -1,13 +1,10 @@
 import styled from 'styled-components';
 import Box from './Box';
-
-/**
- * @deprecated Use the Box component instead (i.e. <Grid> → <Box display="grid">)
- */
+import { GRID } from './constants';
 const Grid = styled(Box).withConfig({
   displayName: "Grid",
   componentId: "sc-1i6s5ye-0"
-})([""]);
+})(["", ";"], GRID);
 Grid.defaultProps = {
   display: 'grid'
 };

package/lib-esm/Header.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-namespace
 import styled, { css } from 'styled-components';
 import { BORDER, COMMON, get, TYPOGRAPHY } from './constants';
 import sx from './sx';

package/lib-esm/Label.js

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { borderColor, variant } from 'styled-system';
 import { COMMON, get } from './constants';
 import sx from './sx';
-const outlineStyles = css(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";", ";background-color:transparent;"], get('colors.fg.muted'), get('borderWidths.1'), get('colors.border.default'), borderColor, COMMON);
+const outlineStyles = css(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";", ";background-color:transparent;"], get('colors.label.secondary.text'), get('borderWidths.1'), get('colors.label.border'), borderColor, COMMON);
 const sizeVariant = variant({
   variants: {
     small: {
@@ -31,7 +31,7 @@ const sizeVariant = variant({
 const Label = styled.span.withConfig({
   displayName: "Label",
   componentId: "sc-1t3ykp0-0"
-})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", "  ", ""], get('fontWeights.semibold'), get('colors.fg.onEmphasis'), get('radii.3'), sizeVariant, COMMON, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', sx);
+})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", "  ", ""], get('fontWeights.semibold'), get('colors.text.inverse'), get('radii.3'), sizeVariant, COMMON, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', sx);
 Label.defaultProps = {
   bg: 'label.primary.border',
   variant: 'medium'

package/lib-esm/Link.js

@@ -2,6 +2,17 @@ import styled from 'styled-components';
 import { system } from 'styled-system';
 import { COMMON, get, TYPOGRAPHY } from './constants';
 import sx from './sx';
+const buttonStyles = `
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+`;
 const hoverColor = system({
   hoverColor: {
     property: 'color',
@@ -11,5 +22,5 @@ const hoverColor = system({
 const Link = styled.a.withConfig({
   displayName: "Link",
   componentId: "sc-1brdqhf-0"
-})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '', TYPOGRAPHY, COMMON, sx);
+})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? get('colors.text.secondary')(props) : get('colors.text.link')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.text.link')(props)}` : '', TYPOGRAPHY, COMMON, sx);
 export default Link;

package/lib-esm/Overlay.js

@@ -1,156 +1,78 @@
 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 styled from 'styled-components';
-import React, { useEffect, useLayoutEffect, useRef } from 'react';
-import { get, COMMON } from './constants';
+import React from 'react';
+import { get, COMMON, POSITION } from './constants';
 import { useOverlay } from './hooks';
 import Portal from './Portal';
 import sx from './sx';
-import { useCombinedRefs } from './hooks/useCombinedRefs';
-import { useTheme } from './ThemeProvider';
 const heightMap = {
-  xsmall: '192px',
-  small: '256px',
-  medium: '320px',
-  large: '432px',
-  xlarge: '600px',
-  auto: 'auto',
-  initial: 'auto' // Passing 'initial' initially applies 'auto'
-
+  sm: '480px',
+  md: '640px',
+  auto: 'auto'
 };
 const widthMap = {
-  small: '256px',
-  medium: '320px',
-  large: '480px',
-  xlarge: '640px',
-  xxlarge: '960px',
+  sm: '256px',
+  md: '320px',
+  lg: '480px',
+  xl: '640px',
   auto: 'auto'
 };
-const animationDuration = 200;
-
-function getSlideAnimationStartingVector(anchorSide) {
-  if (anchorSide !== null && anchorSide !== void 0 && anchorSide.endsWith('bottom')) {
-    return {
-      x: 0,
-      y: -1
-    };
-  } else if (anchorSide !== null && anchorSide !== void 0 && anchorSide.endsWith('top')) {
-    return {
-      x: 0,
-      y: 1
-    };
-  } else if (anchorSide !== null && anchorSide !== void 0 && anchorSide.endsWith('right')) {
-    return {
-      x: -1,
-      y: 0
-    };
-  } else if (anchorSide !== null && anchorSide !== void 0 && anchorSide.endsWith('left')) {
-    return {
-      x: 1,
-      y: 0
-    };
-  }
-
-  return {
-    x: 0,
-    y: 0
-  };
-}
+/*TODO replace with shadow functional color variable when it's shipped to primer/primitives*/
 
 const StyledOverlay = styled.div.withConfig({
   displayName: "Overlay__StyledOverlay",
   componentId: "jhwkzw-0"
-})(["background-color:", ";box-shadow:", ";position:absolute;min-width:192px;max-width:640px;height:", ";max-height:", ";width:", ";border-radius:12px;overflow:hidden;animation:overlay-appear ", "ms ", ";@keyframes overlay-appear{0%{opacity:0;}100%{opacity:1;}}visibility:var(--styled-overlay-visibility);:focus{outline:none;}", ";", ";"], get('colors.canvas.overlay'), get('shadows.overlay.shadow'), props => heightMap[props.height || 'auto'], props => props.maxHeight && heightMap[props.maxHeight], props => widthMap[props.width || 'auto'], animationDuration, get('animation.easeOutCubic'), COMMON, sx);
+})(["background-color:", ";box-shadow:0px 1px 3px rgba(0,0,0,0.12),0px 8px 24px rgba(149,157,165,0.2);position:absolute;min-width:192px;max-width:640px;height:", ";width:", ";border-radius:12px;overflow:hidden;animation:overlay-appear 200ms ", ";@keyframes overlay-appear{0%{opacity:0;transform:translateY(", ");}100%{opacity:1;}}visibility:", ";", ";", ";", ";"], get('colors.bg.overlay'), props => heightMap[props.height || 'auto'], props => widthMap[props.width || 'auto'], get('animation.easeOutCubic'), get('space.2'), props => props.visibility, COMMON, POSITION, sx);
 
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
  * selection options, dialogs, and more. Overlays use shadows to express elevation. The `Overlay`
  * component handles all behaviors needed by overlay UIs as well as the common styles that all overlays * should have.
+ * @param positionSettings Settings for calculating the anchored position.
+ * @param positionDeps Dependencies to determine when to re-calculate the position of the overlay.
  * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
  * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
+ * @param anchorRef Required. Element the `Overlay` should be anchored to.
  * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
- * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function removes the Overlay.
- * @param onEscape Required. Function to call when user presses `Escape`. Typically this function removes the Overlay.
- * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
- * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
- * @param maxHeight Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
- * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
- * @param top Optional. Vertical position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
- * @param left Optional. Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
- * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
+ * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`.
+ * @param onEscape Required. Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`.
+ * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `sm` corresponds to `256px`, `md` corresponds to `320px`, `lg` corresponds to `480px`, and `xl` corresponds to `640px`.
+ * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `sm` corresponds to `480px` and `md` corresponds to `640px`.
  */
-const Overlay = /*#__PURE__*/React.forwardRef(({
+const Overlay = ({
   onClickOutside,
-  role = 'none',
+  role = 'dialog',
+  positionSettings,
+  positionDeps,
+  anchorRef,
   initialFocusRef,
   returnFocusRef,
   ignoreClickRefs,
   onEscape,
-  visibility = 'visible',
-  height,
-  top,
-  left,
-  anchorSide,
-  portalContainerName,
   ...rest
-}, forwardedRef) => {
-  const overlayRef = useRef(null);
-  const combinedRef = useCombinedRefs(overlayRef, forwardedRef);
+}) => {
   const {
-    theme
-  } = useTheme();
-  const slideAnimationDistance = parseInt(get('space.2')(theme).replace('px', ''));
-  const slideAnimationEasing = get('animation.easeOutCubic')(theme);
-  useOverlay({
-    overlayRef,
+    position,
+    ...overlayRest
+  } = useOverlay({
+    anchorRef,
+    positionSettings,
+    positionDeps,
     returnFocusRef,
     onEscape,
     ignoreClickRefs,
     onClickOutside,
     initialFocusRef
   });
-  useEffect(() => {
-    var _combinedRef$current;
-
-    if (height === 'initial' && (_combinedRef$current = combinedRef.current) !== null && _combinedRef$current !== void 0 && _combinedRef$current.clientHeight) {
-      combinedRef.current.style.height = `${combinedRef.current.clientHeight}px`;
-    }
-  }, [height, combinedRef]);
-  useLayoutEffect(() => {
-    var _overlayRef$current;
-
-    const {
-      x,
-      y
-    } = getSlideAnimationStartingVector(anchorSide);
-
-    if (!x && !y || !((_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.animate) || visibility === 'hidden') {
-      return;
-    } // JS animation is required because Safari does not allow css animations to start paused and then run
-
-
-    overlayRef.current.animate({
-      transform: [`translate(${slideAnimationDistance * x}px, ${slideAnimationDistance * y}px)`, `translate(0, 0)`]
-    }, {
-      duration: animationDuration,
-      easing: slideAnimationEasing
-    });
-  }, [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility]);
-  return /*#__PURE__*/React.createElement(Portal, {
-    containerName: portalContainerName
-  }, /*#__PURE__*/React.createElement(StyledOverlay, _extends({
-    height: height,
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledOverlay, _extends({}, overlayRest, position, {
+    visibility: position ? 'visible' : 'hidden',
+    "aria-modal": "true",
     role: role
-  }, rest, {
-    ref: combinedRef,
-    style: {
-      top: `${top || 0}px`,
-      left: `${left || 0}px`,
-      ...rest.style,
-      '--styled-overlay-visibility': visibility
-    }
-  })));
-});
+  }, rest)));
+};
+
+Overlay.displayName = "Overlay";
 Overlay.defaultProps = {
   height: 'auto',
   width: 'auto'

package/lib-esm/Pagehead.js

@@ -4,5 +4,5 @@ import sx from './sx';
 const Pagehead = styled.div.withConfig({
   displayName: "Pagehead",
   componentId: "sc-1ntn78e-0"
-})(["position:relative;padding-top:", ";padding-bottom:", ";margin-bottom:", ";border-bottom:1px solid ", ";", ";", ";"], get('space.4'), get('space.4'), get('space.4'), get('colors.border.default'), COMMON, sx);
+})(["position:relative;padding-top:", ";padding-bottom:", ";margin-bottom:", ";border-bottom:1px solid ", ";", ";", ";"], get('space.4'), get('space.4'), get('space.4'), get('colors.border.primary'), COMMON, sx);
 export default Pagehead;

package/lib-esm/Pagination/Pagination.js

@@ -9,7 +9,7 @@ import { buildComponentData, buildPaginationModel } from './model';
 const Page = styled.a.withConfig({
   displayName: "Pagination__Page",
   componentId: "b80nss-0"
-})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.muted'), get('space.1'), get('space.1'), COMMON);
+})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.text.primary'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.primary'), get('colors.border.secondary'), get('colors.text.link'), get('colors.state.selected.primaryText'), get('colors.state.selected.primaryBg'), get('colors.text.disabled'), get('space.1'), get('space.1'), COMMON);
 
 function usePaginationPages({
   theme,
@@ -81,8 +81,7 @@ Pagination.displayName = "Pagination";
 
 function defaultHrefBuilder(pageNum) {
   return `#${pageNum}`;
-} // eslint-disable-next-line @typescript-eslint/no-empty-function
-
+}
 
 function noop() {}
 

package/lib-esm/Popover.js

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

package/lib-esm/Portal/Portal.js

@@ -10,24 +10,23 @@ const portalRootRegistry = {};
  * If name is not specified, registers the default portal root.
  */
 
-export function registerPortalRoot(root, name = DEFAULT_PORTAL_CONTAINER_NAME) {
-  portalRootRegistry[name] = root;
+export function registerPortalRoot(root, name) {
+  if (root instanceof Element) {
+    portalRootRegistry[name !== null && name !== void 0 ? name : DEFAULT_PORTAL_CONTAINER_NAME] = root;
+  } else {
+    delete portalRootRegistry[name !== null && name !== void 0 ? name : DEFAULT_PORTAL_CONTAINER_NAME];
+  }
 } // Ensures that a default portal root exists and is registered. If a DOM element exists
-// with id __primerPortalRoot__, allow that element to serve as the default portal root.
+// with id __primerPortalRoot__, allow that element to serve as the default portl root.
 // Otherwise, create that element and attach it to the end of document.body.
 
 function ensureDefaultPortal() {
-  const existingDefaultPortalContainer = portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME];
-
-  if (!existingDefaultPortalContainer || !document.body.contains(existingDefaultPortalContainer)) {
+  if (!(DEFAULT_PORTAL_CONTAINER_NAME in portalRootRegistry)) {
     let defaultPortalContainer = document.getElementById(PRIMER_PORTAL_ROOT_ID);
 
     if (!(defaultPortalContainer instanceof Element)) {
       defaultPortalContainer = document.createElement('div');
       defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID);
-      defaultPortalContainer.style.position = 'absolute';
-      defaultPortalContainer.style.top = '0';
-      defaultPortalContainer.style.left = '0';
       const suitablePortalRoot = document.querySelector('[data-portal-root]');
 
       if (suitablePortalRoot) {
@@ -37,7 +36,7 @@ function ensureDefaultPortal() {
       }
     }
 
-    registerPortalRoot(defaultPortalContainer);
+    portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME] = defaultPortalContainer;
   }
 }
 
@@ -50,17 +49,11 @@ export const Portal = ({
   onMount,
   containerName: _containerName
 }) => {
-  const hostElement = document.createElement('div'); // Portaled content should get their own stacking context so they don't interfere
-  // with each other in unexpected ways. One should never find themselves tempted
-  // to change the zIndex to a value other than "1".
-
-  hostElement.style.position = 'relative';
-  hostElement.style.zIndex = '1';
-  const elementRef = React.useRef(hostElement);
+  const elementRef = React.useRef(document.createElement('div'));
   React.useLayoutEffect(() => {
     let containerName = _containerName;
 
-    if (containerName === undefined) {
+    if (containerName == undefined) {
       containerName = DEFAULT_PORTAL_CONTAINER_NAME;
       ensureDefaultPortal();
     }
@@ -78,5 +71,5 @@ export const Portal = ({
       parentElement.removeChild(element);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [elementRef]);
-  return /*#__PURE__*/createPortal(children, elementRef.current);
+  return createPortal(children, elementRef.current);
 };

package/lib-esm/Portal/index.js

@@ -1,3 +1,3 @@
-import { Portal, registerPortalRoot } from './Portal';
+import { Portal, registerPortalRoot } from "./Portal";
 export default Portal;
 export { registerPortalRoot };

package/lib-esm/Position.js

@@ -3,64 +3,39 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import styled from 'styled-components';
 import Box from './Box';
-
-/**
- * @deprecated Use the Box component instead (i.e. <Position> → <Box>)
- */
+import { POSITION } from './constants';
+import sx from './sx';
 const Position = styled(Box).withConfig({
   displayName: "Position",
   componentId: "fla1y3-0"
-})([""]);
-
-/**
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
- */
+})(["", ";", ";"], POSITION, sx);
 export default Position; // Absolute
 
-/**
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
- */
-export const Absolute = /*#__PURE__*/React.forwardRef((props, ref) => {
+export function Absolute(props) {
   return /*#__PURE__*/React.createElement(Position, _extends({}, props, {
-    position: "absolute",
-    ref: ref
+    position: "absolute"
   }));
-});
-Absolute.displayName = 'Absolute'; // Fixed
-
-/**
- * @deprecated Use the Box component instead (i.e. <Fixed> → <Box position="fixed">)
- */
-export const Fixed = /*#__PURE__*/React.forwardRef((props, ref) => {
+}
+Absolute.displayName = "Absolute";
+export function Fixed(props) {
   return /*#__PURE__*/React.createElement(Position, _extends({}, props, {
-    position: "fixed",
-    ref: ref
+    position: "fixed"
   }));
-});
-Fixed.displayName = 'Fixed'; // Relative
-
-/**
- * @deprecated Use the Box component instead (i.e. <Relative> → <Box position="relative">)
- */
-export const Relative = /*#__PURE__*/React.forwardRef((props, ref) => {
+}
+Fixed.displayName = "Fixed";
+export function Relative(props) {
   return /*#__PURE__*/React.createElement(Position, _extends({}, props, {
-    position: "relative",
-    ref: ref
+    position: "relative"
   }));
-});
-Relative.displayName = 'Relative'; // Sticky
-
-/**
- * @deprecated Use the Box component instead (i.e. <Sticky> → <Box position="sticky">)
- */
-export const Sticky = /*#__PURE__*/React.forwardRef((props, ref) => {
+}
+Relative.displayName = "Relative";
+export function Sticky(props) {
   return /*#__PURE__*/React.createElement(Position, _extends({}, props, {
-    position: "sticky",
-    ref: ref
+    position: "sticky"
   }));
-});
+}
+Sticky.displayName = "Sticky";
 Sticky.defaultProps = {
   top: 0,
   zIndex: 1
-};
-Sticky.displayName = 'Sticky';
+};

package/lib-esm/ProgressBar.js

@@ -17,7 +17,7 @@ const sizeMap = {
 const ProgressContainer = styled.span.withConfig({
   displayName: "ProgressBar__ProgressContainer",
   componentId: "sc-1tiva13-1"
-})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], COMMON, width, sx);
+})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.primary'), get('radii.1'), props => sizeMap[props.barSize || 'default'], COMMON, width, sx);
 
 function ProgressBar({
   progress,

package/lib-esm/SelectMenu/SelectMenu.js

@@ -36,10 +36,10 @@ const StyledSelectMenu = styled.details.withConfig({
   componentId: "i7h45b-0"
 })(["", " ", " ", ";"], wrapperStyles, COMMON, sx);
 // 'as' is spread out because we don't want users to be able to change the tag.
-const SelectMenu = /*#__PURE__*/React.forwardRef(({
+const SelectMenu = React.forwardRef(({
   children,
   initialTab = '',
-  as: _ignoredAs,
+  as,
   ...rest
 }, forwardedRef) => {
   const backupRef = useRef(null);
@@ -86,7 +86,7 @@ const SelectMenu = /*#__PURE__*/React.forwardRef(({
 });
 SelectMenu.displayName = 'SelectMenu';
 export default Object.assign(SelectMenu, {
-  MenuContext,
+  MenuContext: MenuContext,
   List: SelectMenuList,
   Divider: SelectMenuDivider,
   Filter: SelectMenuFilter,

package/lib-esm/SelectMenu/SelectMenuContext.js

@@ -1,2 +1,2 @@
 import { createContext } from 'react';
-export const MenuContext = /*#__PURE__*/createContext({});
+export const MenuContext = createContext({});

package/lib-esm/SelectMenu/SelectMenuDivider.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { COMMON, get } from '../constants';
 import sx from '../sx';
-const dividerStyles = css(["padding:", " ", ";margin:0;font-size:", ";font-weight:", ";color:", ";background-color:", ";border-bottom:", " solid ", ";"], get('space.1'), get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.fg.muted'), get('colors.canvas.subtle'), get('borderWidths.1'), get('colors.border.muted'));
+const dividerStyles = css(["padding:", " ", ";margin:0;font-size:", ";font-weight:", ";color:", ";background-color:", ";border-bottom:", " solid ", ";"], get('space.1'), get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.text.tertiary'), get('colors.bg.tertiary'), get('borderWidths.1'), get('colors.selectMenu.borderSecondary'));
 const SelectMenuDivider = styled.div.withConfig({
   displayName: "SelectMenuDivider",
   componentId: "sc-2p0bwt-0"