@primer/components 0.0.0-2021821174731 → 0.0.0-2021821193917

package/lib/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/Token/TokenLabel.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _TokenBase = _interopRequireDefault(require("./TokenBase"));
+
+var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
+
+var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const 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 = (0, _styledComponents.default)(_TokenBase.default).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 = (0, _styledComponents.default)('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
+  } = (0, _ThemeProvider.useTheme)(); // const colorScheme = 'dark';
+
+  const {
+    bgOpacity,
+    borderOpacity,
+    borderThreshold,
+    lightnessThreshold
+  } = colorModeConfig[colorScheme || 'light'];
+  let bgColor = fillColor;
+  let borderColor = fillColor;
+  let textColor = '#FFF';
+  const perceivedLightness = (0, _tinycolor.default)(fillColor).getLuminance();
+  const isFillColorLight = perceivedLightness >= lightnessThreshold;
+
+  if (colorScheme === 'dark') {
+    const lightenBy = (perceivedLightness - lightnessThreshold) * 100 * (isFillColorLight ? 1 : 0);
+    bgColor = isSelected ? (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity * 1.2).toRgbString() : (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity).toRgbString();
+    textColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy + 8).toString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).toString();
+    borderColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy).toRgbString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).setAlpha(borderOpacity).toRgbString();
+  } else {
+    const isFillColorDark = perceivedLightness < 0.1;
+    borderColor = perceivedLightness >= borderThreshold ? (0, _tinycolor.default)(fillColor).darken(25).toString() : 'transparent';
+
+    if (isFillColorLight) {
+      textColor = '#000';
+    }
+
+    if (isSelected) {
+      bgColor = isFillColorDark ? (0, _tinycolor.default)(fillColor).lighten(10).toString() : (0, _tinycolor.default)(fillColor).darken(10).toString();
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement(StyledTokenLabel, _extends({
+    fillColor: fillColor,
+    bgColor: bgColor,
+    borderColor: borderColor,
+    textColor: textColor,
+    isSelected: isSelected
+  }, tokenBaseProps), /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
+    parentTokenTag: as || 'span',
+    tabIndex: -1,
+    onClick: handleRemove,
+    variant: variant
+  }) : null);
+};
+
+TokenLabel.displayName = "TokenLabel";
+TokenLabel.defaultProps = {
+  fillColor: '#999' // TODO: pick a real color
+
+};
+var _default = TokenLabel;
+exports.default = _default;

package/lib/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/Token/TokenProfile.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _primitives = _interopRequireDefault(require("@primer/primitives"));
+
+var _TokenBase = require("./TokenBase");
+
+var _Token = _interopRequireDefault(require("./Token"));
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const StyledToken = (0, _styledComponents.default)(_Token.default).withConfig({
+  displayName: "TokenProfile__StyledToken",
+  componentId: "sc-1vf9jhf-0"
+})(["padding-left:", ";"], (0, _constants.get)('space.1')); // ${get('space.1')}
+
+const TokenProfile = ({
+  avatarSrc,
+  variant,
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(StyledToken, _extends({
+  leadingVisual: () => /*#__PURE__*/_react.default.createElement(_.Avatar, {
+    src: avatarSrc,
+    size: _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] - parseInt(_primitives.default.spacing.normal.spacer[1], 10) * 2
+  }),
+  variant: variant
+}, rest));
+
+TokenProfile.displayName = "TokenProfile";
+var _default = TokenProfile;
+exports.default = _default;

package/lib/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/Token/_AddTokenButton.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _TokenBase = require("./TokenBase");
+
+var _tokenButtonUtils = require("./_tokenButtonUtils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const AddTokenButton = _styledComponents.default.span.attrs(({
+  parentTokenTag,
+  variant,
+  ...rest
+}) => {
+  delete rest.children;
+  return {
+    as: parentTokenTag === 'span' ? 'button' : 'span',
+    tabIndex: -1,
+    className: '_TokenButton',
+    children: /*#__PURE__*/React.createElement(_octiconsReact.PlusIcon, {
+      size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
+    }) // TODO: figure out how to set `size` using `fontSizes` from Primitives
+
+  };
+}).withConfig({
+  displayName: "_AddTokenButton__AddTokenButton",
+  componentId: "elcc0o-0"
+})(["", " ", ""], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants);
+
+AddTokenButton.defaultProps = {
+  variant: _TokenBase.defaultTokenSize
+};
+var _default = AddTokenButton;
+exports.default = _default;

package/lib/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/Token/_RemoveTokenButton.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _TokenBase = require("./TokenBase");
+
+var _tokenButtonUtils = require("./_tokenButtonUtils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const RemoveTokenButton = _styledComponents.default.span.attrs(({
+  parentTokenTag,
+  variant,
+  ...rest
+}) => {
+  delete rest.children;
+  return {
+    as: parentTokenTag === 'span' ? 'button' : 'span',
+    tabIndex: -1,
+    className: '_TokenButton',
+    children: /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
+      size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
+    }) // TODO: figure out how to set `size` using `fontSizes` from Primitives
+
+  };
+}).withConfig({
+  displayName: "_RemoveTokenButton__RemoveTokenButton",
+  componentId: "sc-14lvcw1-0"
+})(["", " ", ""], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants);
+
+RemoveTokenButton.defaultProps = {
+  variant: _TokenBase.defaultTokenSize
+};
+var _default = RemoveTokenButton;
+exports.default = _default;

package/lib/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/Token/_tokenButtonUtils.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTokenButtonIconSize = exports.tokenButtonStyles = exports.variants = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _styledSystem = require("styled-system");
+
+var _constants = require("../constants");
+
+var _TokenBase = require("./TokenBase");
+
+const variants = (0, _styledSystem.variant)({
+  variants: {
+    sm: {
+      height: `${_TokenBase.tokenSizes.sm}px`,
+      width: `${_TokenBase.tokenSizes.sm}px`
+    },
+    md: {
+      height: `${_TokenBase.tokenSizes.md}px`,
+      width: `${_TokenBase.tokenSizes.md}px`
+    },
+    lg: {
+      height: `${_TokenBase.tokenSizes.lg}px`,
+      width: `${_TokenBase.tokenSizes.lg}px`
+    },
+    xl: {
+      height: `${_TokenBase.tokenSizes.xl}px`,
+      width: `${_TokenBase.tokenSizes.xl}px`
+    }
+  }
+});
+exports.variants = variants;
+const tokenButtonStyles = (0, _styledComponents.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:", ";}"], (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'));
+exports.tokenButtonStyles = tokenButtonStyles;
+
+const getTokenButtonIconSize = variant => _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] * 0.75;
+
+exports.getTokenButtonIconSize = getTokenButtonIconSize;

package/lib/Tooltip.js

@@ -22,7 +22,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const TooltipBase = _styledComponents.default.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;}", ";", ";"], (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('colors.neutral.emphasisPlus'), _constants.COMMON, _sx.default);
+})(["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;}", ";", ";"], (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.tooltip.text'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('colors.tooltip.bg'), _constants.COMMON, _sx.default);
 
 function Tooltip({
   direction = 'n',

package/lib/UnderlineNav.js

@@ -25,7 +25,7 @@ const SELECTED_CLASS = 'selected';
 const UnderlineNavBase = _styledComponents.default.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;}", ";", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
+})(["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;}", ";", ";"], (0, _constants.get)('colors.border.secondary'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
 
 function UnderlineNav({
   actions,
@@ -57,7 +57,7 @@ const UnderlineNavLink = _styledComponents.default.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:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.primer.border.active'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
+})(["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:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.underlinenav.text'), (0, _constants.get)('colors.underlinenav.textHover'), (0, _constants.get)('colors.border.tertiary'), (0, _constants.get)('colors.text.tertiary'), (0, _constants.get)('colors.underlinenav.textActive'), (0, _constants.get)('colors.underlinenav.borderActive'), (0, _constants.get)('colors.underlinenav.iconActive'), _constants.COMMON, _sx.default);
 
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 

package/lib/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/hooks/useOverlay.js

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

package/lib/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/index.js

@@ -453,18 +453,6 @@ Object.defineProperty(exports, "UnderlineNav", {
     return _UnderlineNav.default;
   }
 });
-Object.defineProperty(exports, "SSRProvider", {
-  enumerable: true,
-  get: function () {
-    return _ssr.SSRProvider;
-  }
-});
-Object.defineProperty(exports, "useSSRSafeId", {
-  enumerable: true,
-  get: function () {
-    return _ssr.useSSRSafeId;
-  }
-});
 
 var _theme = _interopRequireDefault(require("./theme"));
 
@@ -586,8 +574,6 @@ var _Truncate = _interopRequireDefault(require("./Truncate"));
 
 var _UnderlineNav = _interopRequireDefault(require("./UnderlineNav"));
 
-var _ssr = require("./utils/ssr");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/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 {};