@primer/components 0.0.0-2021821185159 → 0.0.0-2021821193917

package/lib-esm/Timeline.js

@@ -1,3 +1,5 @@
+import _styled from "styled-components";
+
 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';
@@ -15,22 +17,23 @@ const TimelineItem = styled(Box).attrs(props => ({
 })).withConfig({
   displayName: "Timeline__TimelineItem",
   componentId: "c4dq2e-1"
-})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], get('space.3'), get('space.3'), get('colors.border.muted'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.fg.muted'), get('colors.canvas.default')), COMMON, sx);
+})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], get('space.3'), get('space.3'), get('colors.border.secondary'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.icon.tertiary'), get('colors.bg.canvas')), COMMON, sx);
+
+var _StyledBox = styled(Box).withConfig({
+  displayName: "Timeline___StyledBox",
+  componentId: "c4dq2e-2"
+})(["border-radius:50%;border:2px solid ", ";"], p => p._css);
 
 const TimelineBadge = props => {
   return /*#__PURE__*/React.createElement(Box, {
     position: "relative",
     zIndex: 1
-  }, /*#__PURE__*/React.createElement(Box, _extends({
+  }, /*#__PURE__*/React.createElement(_StyledBox, _extends({
     display: "flex",
     className: classnames(props.className, 'TimelineItem-Badge'),
     flexShrink: 0,
-    borderRadius: "50%",
-    borderWidth: "2px",
-    borderStyle: "solid",
-    borderColor: "canvas.default",
     overflow: "hidden",
-    color: "fg.muted",
+    color: "icon.secondary",
     bg: "timeline.badgeBg",
     width: "32px",
     height: "32px",
@@ -38,18 +41,20 @@ const TimelineBadge = props => {
     ml: "-15px",
     alignItems: "center",
     justifyContent: "center"
-  }, props), props.children));
+  }, props, {
+    _css: get('colors.bg.canvas')
+  }), props.children));
 };
 
 TimelineBadge.displayName = "TimelineBadge";
 const TimelineBody = styled(Box).withConfig({
   displayName: "Timeline__TimelineBody",
-  componentId: "c4dq2e-2"
-})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], get('space.1'), get('colors.fg.muted'), get('fontSizes.1'), sx);
+  componentId: "c4dq2e-3"
+})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], get('space.1'), get('colors.timeline.text'), get('fontSizes.1'), sx);
 const TimelineBreak = styled(Box).withConfig({
   displayName: "Timeline__TimelineBreak",
-  componentId: "c4dq2e-3"
-})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], get('space.3'), get('colors.canvas.default'), get('space.1'), get('colors.border.default'), sx);
+  componentId: "c4dq2e-4"
+})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], get('space.3'), get('colors.bg.canvas'), get('space.1'), get('colors.border.primary'), sx);
 TimelineItem.displayName = 'Timeline.Item';
 TimelineBadge.displayName = 'Timeline.Badge';
 TimelineBody.displayName = 'Timeline.Body';

package/lib-esm/Token/Token.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TokenBaseProps } from './TokenBase';
+interface Props extends TokenBaseProps {
+    leadingVisual?: React.FunctionComponent<any>;
+}
+declare const Token: React.FC<Props>;
+export default Token;

package/lib-esm/Token/Token.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+import { get } from '../constants';
+import TokenBase, { isTokenHoverable } from './TokenBase';
+import AddTokenButton from './_AddTokenButton';
+import RemoveTokenButton from './_RemoveTokenButton';
+const DefaultToken = styled(TokenBase).withConfig({
+  displayName: "Token__DefaultToken",
+  componentId: "sc-1dg52pw-0"
+})(["background-color:", ";border-color:", ";border-style:solid;border-width:", ";color:", ";padding-right:", ";&:hover{background-color:", ";}> ._TokenButton{color:", ";}"], get('colors.accent.subtle'), props => props.isSelected ? get('colors.accent.fg') : get('colors.accent.subtle'), props => props.isSelected ? '1px' : 0, get('colors.accent.fg'), props => props.handleRemove || props.handleAdd ? 0 : undefined, props => isTokenHoverable(props) ? get('colors.accent.muted') : undefined, get('colors.accent.fg')); // TODO: make this text truncate
+
+const TokenTextContainer = styled('span').withConfig({
+  displayName: "Token__TokenTextContainer",
+  componentId: "sc-1dg52pw-1"
+})(["flex-grow:1;white-space:nowrap;"]);
+const LeadingVisualContainer = styled('span').withConfig({
+  displayName: "Token__LeadingVisualContainer",
+  componentId: "sc-1dg52pw-2"
+})(["flex-shrink:0;line-height:0;"]);
+
+const Token = ({
+  /**
+   * A function that renders a component before the token text
+   */
+  leadingVisual: LeadingVisual,
+  ...tokenBaseProps
+}) => {
+  const {
+    handleRemove,
+    handleAdd,
+    text,
+    as,
+    variant
+  } = tokenBaseProps;
+  return /*#__PURE__*/React.createElement(DefaultToken, tokenBaseProps, LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
+    parentTokenTag: as || 'span',
+    tabIndex: -1,
+    onClick: handleRemove,
+    variant: variant
+  }) : null, handleAdd ? /*#__PURE__*/React.createElement(AddTokenButton, {
+    parentTokenTag: as || 'span',
+    tabIndex: -1,
+    onClick: handleAdd,
+    variant: variant
+  }) : null);
+};
+
+Token.displayName = "Token";
+export default Token;

package/lib-esm/Token/TokenBase.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type TokenSizeKeys = 'sm' | 'md' | 'lg' | 'xl';
+export declare const tokenSizes: Record<TokenSizeKeys, number>;
+export declare const defaultTokenSize = "md";
+export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size'> {
+    as?: 'button' | 'a' | 'span';
+    handleAdd?: () => void;
+    handleRemove?: () => void;
+    isSelected?: boolean;
+    tabIndex?: number;
+    text: string;
+    variant?: TokenSizeKeys;
+}
+export declare const isTokenHoverable: ({ as, onClick, onFocus }: TokenBaseProps) => boolean;
+declare const TokenBase: import("styled-components").StyledComponent<"span", any, TokenBaseProps, never>;
+export default TokenBase;

package/lib-esm/Token/TokenBase.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { variant } from 'styled-system';
+import { get } from '../constants';
+export const tokenSizes = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+export const defaultTokenSize = 'md';
+export const isTokenHoverable = ({
+  as = 'span',
+  onClick,
+  onFocus
+}) => Boolean(onFocus || onClick || ['a', 'button'].includes(as));
+const variants = variant({
+  variants: {
+    sm: {
+      fontSize: 0,
+      gap: 1,
+      height: `${tokenSizes.sm}px`,
+      paddingLeft: 1,
+      paddingRight: 1
+    },
+    md: {
+      fontSize: 0,
+      gap: 1,
+      height: `${tokenSizes.md}px`,
+      paddingLeft: 2,
+      paddingRight: 2
+    },
+    lg: {
+      fontSize: 0,
+      gap: 2,
+      height: `${tokenSizes.lg}px`,
+      paddingLeft: 2,
+      paddingRight: 2
+    },
+    xl: {
+      fontSize: 1,
+      gap: 2,
+      height: `${tokenSizes.xl}px`,
+      paddingLeft: 3,
+      paddingRight: 3
+    }
+  }
+});
+const TokenBase = styled.span.withConfig({
+  displayName: "TokenBase",
+  componentId: "opajvp-0"
+})(["align-items:center;border-radius:999px;cursor:", ";display:inline-flex;font-weight:", ";text-decoration:none;white-space:nowrap;", ""], props => isTokenHoverable(props) ? 'pointer' : 'auto', get('fontWeights.bold'), variants);
+TokenBase.defaultProps = {
+  as: 'span',
+  variant: defaultTokenSize
+};
+export default TokenBase;

package/lib-esm/Token/TokenLabel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TokenBaseProps } from './TokenBase';
+interface Props extends TokenBaseProps {
+    /**
+     * The color that corresponds to the label
+     */
+    fillColor?: string;
+}
+declare const TokenLabel: React.FC<Props>;
+export default TokenLabel;

package/lib-esm/Token/TokenLabel.js

@@ -0,0 +1,99 @@
+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 styled from 'styled-components';
+import TokenBase from './TokenBase';
+import RemoveTokenButton from './_RemoveTokenButton';
+import tinycolor from 'tinycolor2';
+import { useTheme } from '../ThemeProvider';
+const colorModeConfig = {
+  dark: {
+    bgOpacity: 0.18,
+    borderThreshold: 0,
+    borderOpacity: 0.3,
+    lightnessThreshold: 0.6
+  },
+  light: {
+    bgOpacity: 1,
+    borderThreshold: 0.96,
+    borderOpacity: 1,
+    lightnessThreshold: 0.453
+  }
+};
+const tokenBorderWidthPx = 1; // TODO: do a nicer `isSelected` style
+
+const StyledTokenLabel = styled(TokenBase).withConfig({
+  displayName: "TokenLabel__StyledTokenLabel",
+  componentId: "sc-1bdmgzv-0"
+})(["background-color:", ";border-width:", "px;border-style:solid;border-color:", ";box-shadow:", ";color:", ";overflow:hidden;padding-right:", ";position:relative;> ._TokenButton{color:currentColor;transform:translate(", "px,-", "px);}"], props => props.bgColor, tokenBorderWidthPx, props => props.borderColor, props => props.isSelected ? `0 0 0 2px ${props.bgColor}` : undefined, props => props.textColor, props => props.handleRemove ? 0 : undefined, tokenBorderWidthPx, tokenBorderWidthPx); // TODO: make this text truncate
+
+const TokenTextContainer = styled('span').withConfig({
+  displayName: "TokenLabel__TokenTextContainer",
+  componentId: "sc-1bdmgzv-1"
+})(["white-space:nowrap;z-index:1;"]);
+
+const TokenLabel = ({
+  fillColor,
+  isSelected,
+  ...tokenBaseProps
+}) => {
+  const {
+    handleRemove,
+    text,
+    as,
+    variant
+  } = tokenBaseProps;
+  const {
+    colorScheme
+  } = useTheme(); // const colorScheme = 'dark';
+
+  const {
+    bgOpacity,
+    borderOpacity,
+    borderThreshold,
+    lightnessThreshold
+  } = colorModeConfig[colorScheme || 'light'];
+  let bgColor = fillColor;
+  let borderColor = fillColor;
+  let textColor = '#FFF';
+  const perceivedLightness = tinycolor(fillColor).getLuminance();
+  const isFillColorLight = perceivedLightness >= lightnessThreshold;
+
+  if (colorScheme === 'dark') {
+    const lightenBy = (perceivedLightness - lightnessThreshold) * 100 * (isFillColorLight ? 1 : 0);
+    bgColor = isSelected ? tinycolor(fillColor).setAlpha(bgOpacity * 1.2).toRgbString() : tinycolor(fillColor).setAlpha(bgOpacity).toRgbString();
+    textColor = isSelected ? tinycolor(fillColor).lighten(lightenBy + 8).toString() : tinycolor(fillColor).lighten(lightenBy).toString();
+    borderColor = isSelected ? tinycolor(fillColor).lighten(lightenBy).toRgbString() : tinycolor(fillColor).lighten(lightenBy).setAlpha(borderOpacity).toRgbString();
+  } else {
+    const isFillColorDark = perceivedLightness < 0.1;
+    borderColor = perceivedLightness >= borderThreshold ? tinycolor(fillColor).darken(25).toString() : 'transparent';
+
+    if (isFillColorLight) {
+      textColor = '#000';
+    }
+
+    if (isSelected) {
+      bgColor = isFillColorDark ? tinycolor(fillColor).lighten(10).toString() : tinycolor(fillColor).darken(10).toString();
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(StyledTokenLabel, _extends({
+    fillColor: fillColor,
+    bgColor: bgColor,
+    borderColor: borderColor,
+    textColor: textColor,
+    isSelected: isSelected
+  }, tokenBaseProps), /*#__PURE__*/React.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
+    parentTokenTag: as || 'span',
+    tabIndex: -1,
+    onClick: handleRemove,
+    variant: variant
+  }) : null);
+};
+
+TokenLabel.displayName = "TokenLabel";
+TokenLabel.defaultProps = {
+  fillColor: '#999' // TODO: pick a real color
+
+};
+export default TokenLabel;

package/lib-esm/Token/TokenProfile.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TokenBaseProps } from './TokenBase';
+interface Props extends TokenBaseProps {
+    avatarSrc: string;
+}
+declare const TokenProfile: React.FC<Props>;
+export default TokenProfile;

package/lib-esm/Token/TokenProfile.js

@@ -0,0 +1,28 @@
+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 styled from 'styled-components';
+import { get } from '../constants';
+import primitives from '@primer/primitives';
+import { defaultTokenSize, tokenSizes } from './TokenBase';
+import Token from './Token';
+import { Avatar } from '..';
+const StyledToken = styled(Token).withConfig({
+  displayName: "TokenProfile__StyledToken",
+  componentId: "sc-1vf9jhf-0"
+})(["padding-left:", ";"], get('space.1')); // ${get('space.1')}
+
+const TokenProfile = ({
+  avatarSrc,
+  variant,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledToken, _extends({
+  leadingVisual: () => /*#__PURE__*/React.createElement(Avatar, {
+    src: avatarSrc,
+    size: tokenSizes[variant || defaultTokenSize] - parseInt(primitives.spacing.normal.spacer[1], 10) * 2
+  }),
+  variant: variant
+}, rest));
+
+TokenProfile.displayName = "TokenProfile";
+export default TokenProfile;

package/lib-esm/Token/_AddTokenButton.d.ts

@@ -0,0 +1,3 @@
+import { TokenButtonProps } from './_tokenButtonUtils';
+declare const AddTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps, never>;
+export default AddTokenButton;

package/lib-esm/Token/_AddTokenButton.js

@@ -0,0 +1,27 @@
+import { PlusIcon } from '@primer/octicons-react';
+import styled from 'styled-components';
+import { defaultTokenSize } from "./TokenBase";
+import { tokenButtonStyles, variants, getTokenButtonIconSize } from './_tokenButtonUtils';
+const AddTokenButton = styled.span.attrs(({
+  parentTokenTag,
+  variant,
+  ...rest
+}) => {
+  delete rest.children;
+  return {
+    as: parentTokenTag === 'span' ? 'button' : 'span',
+    tabIndex: -1,
+    className: '_TokenButton',
+    children: /*#__PURE__*/React.createElement(PlusIcon, {
+      size: getTokenButtonIconSize(variant)
+    }) // TODO: figure out how to set `size` using `fontSizes` from Primitives
+
+  };
+}).withConfig({
+  displayName: "_AddTokenButton__AddTokenButton",
+  componentId: "elcc0o-0"
+})(["", " ", ""], tokenButtonStyles, variants);
+AddTokenButton.defaultProps = {
+  variant: defaultTokenSize
+};
+export default AddTokenButton;

package/lib-esm/Token/_RemoveTokenButton.d.ts

@@ -0,0 +1,3 @@
+import { TokenButtonProps } from './_tokenButtonUtils';
+declare const RemoveTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps, never>;
+export default RemoveTokenButton;

package/lib-esm/Token/_RemoveTokenButton.js

@@ -0,0 +1,27 @@
+import { XIcon } from '@primer/octicons-react';
+import styled from 'styled-components';
+import { defaultTokenSize } from "./TokenBase";
+import { tokenButtonStyles, variants, getTokenButtonIconSize } from './_tokenButtonUtils';
+const RemoveTokenButton = styled.span.attrs(({
+  parentTokenTag,
+  variant,
+  ...rest
+}) => {
+  delete rest.children;
+  return {
+    as: parentTokenTag === 'span' ? 'button' : 'span',
+    tabIndex: -1,
+    className: '_TokenButton',
+    children: /*#__PURE__*/React.createElement(XIcon, {
+      size: getTokenButtonIconSize(variant)
+    }) // TODO: figure out how to set `size` using `fontSizes` from Primitives
+
+  };
+}).withConfig({
+  displayName: "_RemoveTokenButton__RemoveTokenButton",
+  componentId: "sc-14lvcw1-0"
+})(["", " ", ""], tokenButtonStyles, variants);
+RemoveTokenButton.defaultProps = {
+  variant: defaultTokenSize
+};
+export default RemoveTokenButton;

package/lib-esm/Token/_tokenButtonUtils.d.ts

@@ -0,0 +1,8 @@
+import { TokenSizeKeys } from "./TokenBase";
+export interface TokenButtonProps {
+    parentTokenTag: 'span' | 'button' | 'a';
+    variant?: TokenSizeKeys;
+}
+export declare const variants: (...args: any[]) => any;
+export declare const tokenButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const getTokenButtonIconSize: (variant?: TokenSizeKeys | undefined) => number;

package/lib-esm/Token/_tokenButtonUtils.js

@@ -0,0 +1,26 @@
+import { css } from 'styled-components';
+import { variant } from 'styled-system';
+import { get } from '../constants';
+import { tokenSizes, defaultTokenSize } from "./TokenBase";
+export const variants = variant({
+  variants: {
+    sm: {
+      height: `${tokenSizes.sm}px`,
+      width: `${tokenSizes.sm}px`
+    },
+    md: {
+      height: `${tokenSizes.md}px`,
+      width: `${tokenSizes.md}px`
+    },
+    lg: {
+      height: `${tokenSizes.lg}px`,
+      width: `${tokenSizes.lg}px`
+    },
+    xl: {
+      height: `${tokenSizes.xl}px`,
+      width: `${tokenSizes.xl}px`
+    }
+  }
+});
+export const tokenButtonStyles = css(["background-color:transparent;font-family:inherit;cursor:pointer;user-select:none;appearance:none;text-decoration:none;padding:0;align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}"], get('colors.fade.fg10'), get('colors.fade.fg15'));
+export const getTokenButtonIconSize = variant => tokenSizes[variant || defaultTokenSize] * 0.75;

package/lib-esm/Tooltip.js

@@ -8,7 +8,7 @@ import sx from './sx';
 const TooltipBase = styled.span.withConfig({
   displayName: "Tooltip__TooltipBase",
   componentId: "kp39nc-0"
-})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";", ";"], get('colors.neutral.emphasisPlus'), get('fonts.normal'), get('colors.fg.onEmphasis'), get('colors.neutral.emphasisPlus'), get('radii.1'), get('colors.neutral.emphasisPlus'), get('space.3'), get('space.3'), get('colors.neutral.emphasisPlus'), get('space.3'), get('space.3'), get('colors.neutral.emphasisPlus'), get('colors.neutral.emphasisPlus'), COMMON, sx);
+})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";", ";"], get('colors.tooltip.bg'), get('fonts.normal'), get('colors.tooltip.text'), get('colors.tooltip.bg'), get('radii.1'), get('colors.tooltip.bg'), get('space.3'), get('space.3'), get('colors.tooltip.bg'), get('space.3'), get('space.3'), get('colors.tooltip.bg'), get('colors.tooltip.bg'), COMMON, sx);
 
 function Tooltip({
   direction = 'n',

package/lib-esm/UnderlineNav.js

@@ -11,7 +11,7 @@ const SELECTED_CLASS = 'selected';
 const UnderlineNavBase = styled.nav.withConfig({
   displayName: "UnderlineNav__UnderlineNavBase",
   componentId: "zrnxqt-0"
-})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], get('colors.border.muted'), get('space.3'), COMMON, sx);
+})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], get('colors.border.secondary'), get('space.3'), COMMON, sx);
 
 function UnderlineNav({
   actions,
@@ -42,7 +42,7 @@ const UnderlineNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "UnderlineNav__UnderlineNavLink",
   componentId: "zrnxqt-1"
-})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), COMMON, sx);
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.underlinenav.text'), get('colors.underlinenav.textHover'), get('colors.border.tertiary'), get('colors.text.tertiary'), get('colors.underlinenav.textActive'), get('colors.underlinenav.borderActive'), get('colors.underlinenav.iconActive'), COMMON, sx);
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 export default Object.assign(UnderlineNav, {
   Link: UnderlineNavLink

package/lib-esm/hooks/useOverlay.d.ts

@@ -7,8 +7,9 @@ export declare type UseOverlaySettings = {
     onEscape: (e: KeyboardEvent) => void;
     onClickOutside: (e: TouchOrMouseEvent) => void;
     overlayRef?: React.RefObject<HTMLDivElement>;
+    preventFocusOnOpen?: boolean;
 };
 export declare type OverlayReturnProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
-export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside }: UseOverlaySettings) => OverlayReturnProps;
+export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }: UseOverlaySettings) => OverlayReturnProps;

package/lib-esm/hooks/useOverlay.js

@@ -8,14 +8,19 @@ export const useOverlay = ({
   initialFocusRef,
   onEscape,
   ignoreClickRefs,
-  onClickOutside
+  onClickOutside,
+  preventFocusOnOpen
 }) => {
   const overlayRef = useProvidedRefOrCreate(_overlayRef);
-  useOpenAndCloseFocus({
-    containerRef: overlayRef,
-    returnFocusRef,
-    initialFocusRef
-  });
+
+  if (!preventFocusOnOpen) {
+    useOpenAndCloseFocus({
+      containerRef: overlayRef,
+      returnFocusRef,
+      initialFocusRef
+    });
+  }
+
   useOnOutsideClick({
     containerRef: overlayRef,
     ignoreClickRefs,

package/lib-esm/index.d.ts

@@ -108,4 +108,3 @@ export { default as Truncate } from './Truncate';
 export type { TruncateProps } from './Truncate';
 export { default as UnderlineNav } from './UnderlineNav';
 export type { UnderlineNavProps, UnderlineNavLinkProps } from './UnderlineNav';
-export { SSRProvider, useSSRSafeId } from './utils/ssr';

package/lib-esm/index.js

@@ -65,5 +65,4 @@ export { default as Text } from './Text';
 export { default as Timeline } from './Timeline';
 export { default as Tooltip } from './Tooltip';
 export { default as Truncate } from './Truncate';
-export { default as UnderlineNav } from './UnderlineNav';
-export { SSRProvider, useSSRSafeId } from './utils/ssr';
+export { default as UnderlineNav } from './UnderlineNav';

package/lib-esm/theme-preval.d.ts

@@ -22,10 +22,6 @@ export namespace theme {
             export { darkDimmedColors as colors };
             export { darkDimmedShadows as shadows };
         }
-        namespace dark_high_contrast {
-            export { darkHighContrastColors as colors };
-            export { darkHighContrastShadows as shadows };
-        }
     }
 }
 declare namespace animation {
@@ -83,21 +79,19 @@ declare const darkDimmedColors: Partial<typeof primitives.colors.dark_dimmed>;
  * @type Partial<typeof primitives.colors.dark_dimmed>
  */
 declare const darkDimmedShadows: Partial<typeof primitives.colors.dark_dimmed>;
-/**
- * @type Partial<typeof primitives.colors.dark_dimmed>
- */
-declare const darkHighContrastColors: Partial<typeof primitives.colors.dark_dimmed>;
-/**
- * @type Partial<typeof primitives.colors.dark_high_contrast>
- */
-declare const darkHighContrastShadows: Partial<typeof primitives.colors.dark_high_contrast>;
 import { default as primitives } from "@primer/primitives";
 declare const light_2: {
     colors: {};
+    /**
+     * @type Partial<typeof primitives.colors.light>
+     */
     shadows: {};
 };
 declare const dark_1: {
     colors: {};
+    /**
+     * @type Partial<typeof primitives.colors.light>
+     */
     shadows: {};
 };
 export {};