@primer/components 33.0.0-rc.cface7dc → 33.1.0

package/lib-esm/ActionList2/Selection.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { CheckIcon } from '@primer/octicons-react';
 import { ListContext } from './List';
 import { GroupContext } from './Group';
-import { MenuContext } from './MenuContext';
+import { ActionListContainerContext } from './ActionListContainerContext';
 import { LeadingVisualContainer } from './Visuals';
 export const Selection = ({
   selected
@@ -14,8 +14,8 @@ export const Selection = ({
     selectionVariant: groupSelectionVariant
   } = React.useContext(GroupContext);
   const {
-    parent
-  } = React.useContext(MenuContext);
+    container
+  } = React.useContext(ActionListContainerContext);
   /** selectionVariant in Group can override the selectionVariant in List root */
 
   const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
@@ -26,7 +26,7 @@ export const Selection = ({
     return null;
   }
 
-  if (parent === 'ActionMenu') {
+  if (container === 'ActionMenu') {
     throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
     return null;
   }

package/lib-esm/ActionMenu2.d.ts

@@ -1,10 +1,12 @@
 import { ButtonProps } from './Button';
 import React from 'react';
+import { AnchoredOverlayProps } from './AnchoredOverlay';
 import { OverlayProps } from './Overlay';
-import { AnchoredOverlayWrapperAnchorProps } from './AnchoredOverlay/AnchoredOverlay';
-declare type ActionMenuBaseProps = {
+declare type MenuContextProps = Pick<AnchoredOverlayProps, 'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'onClose'>;
+export declare const MenuContext: React.Context<MenuContextProps>;
+export declare type ActionMenuProps = {
     /**
-     * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with ActionList`
+     * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
      */
     children: React.ReactElement[] | React.ReactElement;
     /**
@@ -15,17 +17,18 @@ declare type ActionMenuBaseProps = {
      * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
      */
     onOpenChange?: (s: boolean) => void;
-    /**
-     * Props to be spread on the internal `Overlay` component.
-     */
-    overlayProps?: Partial<OverlayProps>;
-};
-export declare type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps;
+} & Pick<AnchoredOverlayProps, 'anchorRef'>;
 export declare type MenuAnchorProps = {
     children: React.ReactElement;
 };
 /** this component is syntactical sugar 🍭 */
 export declare type MenuButtonProps = ButtonProps;
+declare type MenuOverlayProps = Partial<OverlayProps> & {
+    /**
+     * Recommended: `ActionList`
+     */
+    children: React.ReactElement[] | React.ReactElement;
+};
 export declare const ActionMenu: React.FC<ActionMenuProps> & {
     Button: React.ForwardRefExoticComponent<Pick<{
         color?: string | undefined;
@@ -308,6 +311,7 @@ export declare const ActionMenu: React.FC<ActionMenuProps> & {
         variant?: "small" | "medium" | "large" | undefined;
     }> & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
     Anchor: React.ForwardRefExoticComponent<MenuAnchorProps & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
+    Overlay: React.FC<MenuOverlayProps>;
     Divider: React.FC<import("./sx").SxProp>;
 };
 export {};

package/lib-esm/ActionMenu2.js

@@ -1,49 +1,49 @@
 import Button from './Button';
 import React from 'react';
 import { AnchoredOverlay } from './AnchoredOverlay';
-import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate';
-import { useProvidedRefOrCreate } from './hooks';
+import { useProvidedRefOrCreate, useProvidedStateOrCreate } from './hooks';
 import { Divider } from './ActionList2/Divider';
-import { MenuContext as ActionListMenuContext } from './ActionList2/MenuContext';
+import { ActionListContainerContext } from './ActionList2/ActionListContainerContext';
+export const MenuContext = /*#__PURE__*/React.createContext({
+  renderAnchor: null,
+  open: false
+});
 
-const ActionMenuBase = ({
+const Menu = ({
   anchorRef: externalAnchorRef,
   open,
   onOpenChange,
-  overlayProps,
   children
 }) => {
   const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false);
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
   const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
   const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
-  let renderAnchor = null;
-  const contents = [];
-  React.Children.map(children, child => {
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
+  let renderAnchor = null; // 🚨 Hack for good API!
+  // we strip out Anchor from children and pass it to AnchoredOverlay to render
+  // with additional props for accessibility
+
+  const contents = React.Children.map(children, child => {
     if (child.type === MenuButton || child.type === Anchor) {
       renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, anchorProps);
-    } else {
-      contents.push(child);
+
+      return null;
     }
+
+    return child;
   });
-  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
-    renderAnchor: renderAnchor,
-    anchorRef: anchorRef,
-    open: combinedOpenState,
-    onOpen: onOpen,
-    onClose: onClose,
-    overlayProps: overlayProps
-  }, /*#__PURE__*/React.createElement(ActionListMenuContext.Provider, {
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: {
-      parent: 'ActionMenu',
-      listRole: 'menu',
-      itemRole: 'menuitem',
-      afterSelect: onClose
+      anchorRef,
+      renderAnchor,
+      open: combinedOpenState,
+      onOpen,
+      onClose
     }
-  }, contents));
+  }, contents);
 };
 
-ActionMenuBase.displayName = "ActionMenuBase";
+Menu.displayName = "Menu";
 const Anchor = /*#__PURE__*/React.forwardRef(({
   children,
   ...anchorProps
@@ -59,9 +59,42 @@ const MenuButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
     ref: anchorRef
   }, /*#__PURE__*/React.createElement(Button, props));
 });
-ActionMenuBase.displayName = 'ActionMenu';
-export const ActionMenu = Object.assign(ActionMenuBase, {
+
+const Overlay = ({
+  children,
+  ...overlayProps
+}) => {
+  // we typecast anchorRef as required instead of optional
+  // because we know that we're setting it in context in Menu
+  const {
+    anchorRef,
+    renderAnchor,
+    open,
+    onOpen,
+    onClose
+  } = React.useContext(MenuContext);
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
+    anchorRef: anchorRef,
+    renderAnchor: renderAnchor,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps
+  }, /*#__PURE__*/React.createElement(ActionListContainerContext.Provider, {
+    value: {
+      container: 'ActionMenu',
+      listRole: 'menu',
+      itemRole: 'menuitem',
+      afterSelect: onClose
+    }
+  }, children));
+};
+
+Overlay.displayName = "Overlay";
+Menu.displayName = 'ActionMenu';
+export const ActionMenu = Object.assign(Menu, {
   Button: MenuButton,
   Anchor,
+  Overlay,
   Divider
 });

package/lib-esm/BaseStyles.js

@@ -3,28 +3,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { COMMON, TYPOGRAPHY } from './constants';
-const GlobalStyle = createGlobalStyle`
-  * { box-sizing: border-box; }
-  body { margin: 0; }
-  table { border-collapse: collapse; }
-  
-  [role="button"]:focus:not(:focus-visible):not(.focus-visible),
-  [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
-  button:focus:not(:focus-visible):not(.focus-visible),
-  summary:focus:not(:focus-visible):not(.focus-visible),
-  a:focus:not(:focus-visible):not(.focus-visible) {
-    outline: none;
-    box-shadow: none;
-  }
-
-  [tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
-  details-dialog:focus:not(:focus-visible):not(.focus-visible) {
-    outline: none;
-  }
-`;
+const GlobalStyle = createGlobalStyle(["*{box-sizing:border-box;}body{margin:0;}table{border-collapse:collapse;}[role=\"button\"]:focus:not(:focus-visible):not(.focus-visible),[role=\"tabpanel\"][tabindex=\"0\"]:focus:not(:focus-visible):not(.focus-visible),button:focus:not(:focus-visible):not(.focus-visible),summary:focus:not(:focus-visible):not(.focus-visible),a:focus:not(:focus-visible):not(.focus-visible){outline:none;box-shadow:none;}[tabindex=\"0\"]:focus:not(:focus-visible):not(.focus-visible),details-dialog:focus:not(:focus-visible):not(.focus-visible){outline:none;}"]);
 const Base = styled.div.withConfig({
   displayName: "BaseStyles__Base",
-  componentId: "qvuaww-0"
+  componentId: "sc-qvuaww-0"
 })(["", ";", ";"], TYPOGRAPHY, COMMON);
 
 function BaseStyles(props) {

package/lib-esm/BorderBox.js

@@ -6,7 +6,7 @@ import Box from './Box';
  */
 const BorderBox = styled(Box).withConfig({
   displayName: "BorderBox",
-  componentId: "oreju5-0"
+  componentId: "sc-oreju5-0"
 })([""]);
 BorderBox.defaultProps = {
   borderWidth: '1px',

package/lib-esm/Box.js

@@ -3,6 +3,6 @@ import { background, border, color, flexbox, grid, layout, position, shadow, spa
 import sx from './sx';
 const Box = styled.div.withConfig({
   displayName: "Box",
-  componentId: "nv15kw-0"
+  componentId: "sc-nv15kw-0"
 })(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
 export default Box;

package/lib-esm/BranchName.js

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

package/lib-esm/Breadcrumbs.js

@@ -8,11 +8,11 @@ import sx from './sx';
 const SELECTED_CLASS = 'selected';
 const Wrapper = styled.li.withConfig({
   displayName: "Breadcrumbs__Wrapper",
-  componentId: "hwwoo0-0"
+  componentId: "sc-hwwoo0-0"
 })(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], get('colors.fg.muted'), get('fontSizes.1'));
 const BreadcrumbsBase = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
-  componentId: "hwwoo0-1"
+  componentId: "sc-hwwoo0-1"
 })(["display:flex;justify-content:space-between;", ";"], sx);
 
 function Breadcrumbs({
@@ -39,7 +39,7 @@ const BreadcrumbsItem = styled.a.attrs(props => ({
   'aria-current': props.selected ? 'page' : null
 })).withConfig({
   displayName: "Breadcrumbs__BreadcrumbsItem",
-  componentId: "hwwoo0-2"
+  componentId: "sc-hwwoo0-2"
 })(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), sx);
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';

package/lib-esm/Button/Button.js

@@ -4,6 +4,6 @@ import sx from '../sx';
 import ButtonBase from './ButtonBase';
 const Button = styled(ButtonBase).withConfig({
   displayName: "Button",
-  componentId: "xjtz72-0"
+  componentId: "sc-xjtz72-0"
 })(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.primer.fg.disabled'), get('colors.btn.bg'), get('colors.btn.border'), sx);
 export default Button;

package/lib-esm/Button/ButtonGroup.js

@@ -4,7 +4,7 @@ import { get } from '../constants';
 import sx from '../sx';
 const ButtonGroup = styled(Box).withConfig({
   displayName: "ButtonGroup",
-  componentId: "peei04-0"
+  componentId: "sc-peei04-0"
 })(["vertical-align:middle;&& > *{position:relative;border-right-width:0;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";margin-right:0;}:not(:first-child){margin-left:0;margin-right:0;}:last-child{border-right-width:1px;border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{border-right-width:1px;+ *{border-left-width:0;}}:focus,:active{z-index:1;}}", ";"], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx);
 ButtonGroup.defaultProps = {
   display: 'inline-block'

package/lib-esm/Checkbox.d.ts

@@ -25,5 +25,5 @@ export declare type CheckboxProps = {
 /**
  * An accessible, native checkbox component
  */
-declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/lib-esm/Checkbox.js

@@ -6,7 +6,7 @@ import React, { useLayoutEffect } from 'react';
 import sx from './sx';
 const StyledCheckbox = styled.input.withConfig({
   displayName: "Checkbox__StyledCheckbox",
-  componentId: "i51804-0"
+  componentId: "sc-i51804-0"
 })(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, sx);
 /**
  * An accessible, native checkbox component

package/lib-esm/Details.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import sx from './sx';
 const Details = styled.details.withConfig({
   displayName: "Details",
-  componentId: "ssy9qz-0"
+  componentId: "sc-ssy9qz-0"
 })(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx);
 Details.displayName = 'Details';
 export default Details;

package/lib-esm/FilteredActionList/FilteredActionList.js

@@ -15,7 +15,7 @@ import useScrollFlash from '../hooks/useScrollFlash';
 import { scrollIntoViewingArea } from '../behaviors/scrollIntoViewingArea';
 const StyledHeader = styled.div.withConfig({
   displayName: "FilteredActionList__StyledHeader",
-  componentId: "yg3jkv-0"
+  componentId: "sc-yg3jkv-0"
 })(["box-shadow:0 1px 0 ", ";z-index:1;"], get('colors.border.default'));
 export function FilteredActionList({
   loading = false,

package/lib-esm/Flex.js

@@ -6,7 +6,7 @@ import Box from './Box';
  */
 const Flex = styled(Box).withConfig({
   displayName: "Flex",
-  componentId: "arghxi-0"
+  componentId: "sc-arghxi-0"
 })([""]);
 Flex.defaultProps = {
   display: 'flex'

package/lib-esm/LabelGroup.js

@@ -3,6 +3,6 @@ import { get } from './constants';
 import sx from './sx';
 const LabelGroup = styled.span.withConfig({
   displayName: "LabelGroup",
-  componentId: "k6k3qa-0"
+  componentId: "sc-k6k3qa-0"
 })(["& *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], get('space.1'), sx);
 export default LabelGroup;

package/lib-esm/Overlay.js

@@ -60,7 +60,7 @@ function getSlideAnimationStartingVector(anchorSide) {
 
 const StyledOverlay = styled.div.withConfig({
   displayName: "Overlay__StyledOverlay",
-  componentId: "jhwkzw-0"
+  componentId: "sc-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'), sx);
 
 /**

package/lib-esm/Pagination/Pagination.js

@@ -8,7 +8,7 @@ import sx from '../sx';
 import { buildComponentData, buildPaginationModel } from './model';
 const Page = styled.a.withConfig({
   displayName: "Pagination__Page",
-  componentId: "b80nss-0"
+  componentId: "sc-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.primer.fg.disabled'), get('space.1'), get('space.1'));
 
 function usePaginationPages({
@@ -43,7 +43,7 @@ function usePaginationPages({
 
 const PaginationContainer = styled.nav.withConfig({
   displayName: "Pagination__PaginationContainer",
-  componentId: "b80nss-1"
+  componentId: "sc-b80nss-1"
 })(["margin-top:20px;margin-bottom:15px;text-align:center;", ";"], sx);
 
 function Pagination({

package/lib-esm/Position.js

@@ -9,7 +9,7 @@ import Box from './Box';
  */
 const Position = styled(Box).withConfig({
   displayName: "Position",
-  componentId: "fla1y3-0"
+  componentId: "sc-fla1y3-0"
 })([""]);
 
 /**

package/lib-esm/Radio.d.ts

@@ -0,0 +1,38 @@
+import React, { InputHTMLAttributes } from 'react';
+import { SxProp } from './sx';
+export declare type RadioProps = {
+    /**
+     * A unique value that is never shown to the user.
+     * Used during form submission and to identify which radio button in a group is selected
+     */
+    value: string;
+    /**
+     * Name attribute of the input element. Required for grouping radio inputs
+     */
+    name: string;
+    /**
+     * Apply inactive visual appearance to the radio button
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the radio button is selected
+     */
+    checked?: boolean;
+    /**
+     * Forward a ref to the underlying input element
+     */
+    ref?: React.RefObject<HTMLInputElement>;
+    /**
+     * Indicates whether the radio button must be checked before the form can be submitted
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the radio button validation state is non-standard
+     */
+    validationStatus?: 'error' | 'success';
+} & InputHTMLAttributes<HTMLInputElement> & SxProp;
+/**
+ * An accessible, native radio component for selecting one option from a list.
+ */
+declare const Radio: React.ForwardRefExoticComponent<Pick<RadioProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/lib-esm/Radio.js

@@ -0,0 +1,40 @@
+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 from 'react';
+import sx from './sx';
+const StyledRadio = styled.input.withConfig({
+  displayName: "Radio__StyledRadio",
+  componentId: "sc-1ak1fjg-0"
+})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, sx);
+/**
+ * An accessible, native radio component for selecting one option from a list.
+ */
+
+const Radio = /*#__PURE__*/React.forwardRef(({
+  checked,
+  disabled,
+  sx: sxProp,
+  required,
+  validationStatus,
+  value,
+  name,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/React.createElement(StyledRadio, _extends({
+    type: "radio",
+    value: value,
+    name: name,
+    ref: ref,
+    disabled: disabled,
+    "aria-disabled": disabled ? 'true' : 'false',
+    checked: checked,
+    "aria-checked": checked ? 'true' : 'false',
+    required: required,
+    "aria-required": required ? 'true' : 'false',
+    "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
+    sx: sxProp
+  }, rest));
+});
+Radio.displayName = 'Radio';
+export default Radio;

package/lib-esm/SelectMenu/SelectMenu.js

@@ -32,7 +32,7 @@ const wrapperStyles = `
 `;
 const StyledSelectMenu = styled.details.withConfig({
   displayName: "SelectMenu__StyledSelectMenu",
-  componentId: "i7h45b-0"
+  componentId: "sc-i7h45b-0"
 })(["", " ", ";"], wrapperStyles, sx);
 // 'as' is spread out because we don't want users to be able to change the tag.
 const SelectMenu = /*#__PURE__*/React.forwardRef(({

package/lib-esm/SelectMenu/SelectMenuFilter.js

@@ -8,7 +8,7 @@ import TextInput from '../TextInput';
 import { MenuContext } from './SelectMenuContext';
 const StyledForm = styled.form.withConfig({
   displayName: "SelectMenuFilter__StyledForm",
-  componentId: "s7ktlh-0"
+  componentId: "sc-s7ktlh-0"
 })(["padding:", ";margin:0;border-bottom:", " solid ", ";background-color:", ";@media (min-width:", "){padding:", ";}", ";"], get('space.3'), get('borderWidths.1'), get('colors.border.muted'), get('colors.canvas.overlay'), get('breakpoints.0'), get('space.2'), sx);
 const SelectMenuFilter = /*#__PURE__*/forwardRef(({
   theme,

package/lib-esm/SelectMenu/SelectMenuFooter.js

@@ -4,7 +4,7 @@ import sx from '../sx';
 const footerStyles = css(["margin-top:-1px;padding:", " ", ";font-size:", ";color:", ";text-align:center;border-top:", " solid ", ";@media (min-width:", "){padding:", " ", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.fg.muted'), get('borderWidths.1'), get('colors.border.muted'), get('breakpoints.0'), get('space.1'), get('space.2'));
 const SelectMenuFooter = styled.footer.withConfig({
   displayName: "SelectMenuFooter",
-  componentId: "rkvco1-0"
+  componentId: "sc-rkvco1-0"
 })(["", " ", ";"], footerStyles, sx);
 SelectMenuFooter.displayName = 'SelectMenu.Footer';
 export default SelectMenuFooter;

package/lib-esm/SelectMenu/SelectMenuItem.js

@@ -12,7 +12,7 @@ const StyledItem = styled.a.attrs(() => ({
   role: 'menuitemcheckbox'
 })).withConfig({
   displayName: "SelectMenuItem__StyledItem",
-  componentId: "gjymba-0"
+  componentId: "sc-gjymba-0"
 })(["", " ", ";"], listItemStyles, sx);
 const SelectMenuItem = /*#__PURE__*/forwardRef(({
   children,

package/lib-esm/SelectMenu/SelectMenuTab.js

@@ -9,7 +9,7 @@ import { MenuContext } from './SelectMenuContext';
 const tabStyles = css(["flex:1;padding:", " ", ";font-size:", ";font-weight:500;color:", ";text-align:center;background-color:transparent;border:0;box-shadow:inset 0 -1px 0 ", ";@media (min-width:", "){flex:none;padding:", " ", ";border:", " solid transparent;border-bottom-width:0;border-top-left-radius:", ";border-top-right-radius:", ";}&[aria-selected='true']{z-index:1;color:", ";background-color:", ";box-shadow:0 0 0 1px ", ";@media (min-width:", "){border-color:", ";box-shadow:none;}}&:focus{background-color:", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.fg.muted'), get('colors.border.muted'), get('breakpoints.0'), get('space.1'), get('space.3'), get('borderWidths.1'), get('radii.2'), get('radii.2'), get('colors.text-primary'), get('colors.canvas.overlay'), get('colors.border.muted'), get('breakpoints.0'), get('colors.border.muted'), get('colors.neutral.subtle'));
 const StyledTab = styled.button.withConfig({
   displayName: "SelectMenuTab__StyledTab",
-  componentId: "ga32sz-0"
+  componentId: "sc-ga32sz-0"
 })(["", " ", ";"], tabStyles, sx);
 
 const SelectMenuTab = ({

package/lib-esm/SelectMenu/SelectMenuTabPanel.js

@@ -8,7 +8,7 @@ import { MenuContext } from './SelectMenuContext';
 import SelectMenuList from './SelectMenuList';
 const TabPanelBase = styled.div.withConfig({
   displayName: "SelectMenuTabPanel__TabPanelBase",
-  componentId: "ck0ipe-0"
+  componentId: "sc-ck0ipe-0"
 })(["border-top:", " solid ", ";", ";"], get('borderWidths.1'), get('colors.border.muted'), sx);
 
 const TabPanel = ({

package/lib-esm/SelectMenu/SelectMenuTabs.js

@@ -7,7 +7,7 @@ import sx from '../sx';
 const tabWrapperStyles = css(["display:flex;flex-shrink:0;margin-bottom:-1px;-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:hidden;&::-webkit-scrollbar{display:none;}@media (min-width:", "){padding:0 ", ";margin-top:", ";}"], get('breakpoints.0'), get('space.2'), get('space.3'));
 const SelectMenuTabsBase = styled.div.withConfig({
   displayName: "SelectMenuTabs__SelectMenuTabsBase",
-  componentId: "kgg21o-0"
+  componentId: "sc-kgg21o-0"
 })(["", " ", ";"], tabWrapperStyles, sx);
 
 const SelectMenuTabs = ({

package/lib-esm/StateLabel.js

@@ -66,7 +66,7 @@ const sizeVariants = variant({
 });
 const StateLabelBase = styled.span.withConfig({
   displayName: "StateLabel__StateLabelBase",
-  componentId: "k4pd9e-0"
+  componentId: "sc-k4pd9e-0"
 })(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";"], get('fontWeights.bold'), get('colors.canvas.default'), get('radii.3'), colorVariants, sizeVariants, sx);
 
 function StateLabel({

package/lib-esm/StyledOcticon.js

@@ -12,7 +12,7 @@ function Octicon({
 Octicon.displayName = "Octicon";
 const StyledOcticon = styled(Octicon).withConfig({
   displayName: "StyledOcticon",
-  componentId: "uhnt7w-0"
+  componentId: "sc-uhnt7w-0"
 })(["", ""], sx);
 StyledOcticon.defaultProps = {
   size: 16

package/lib-esm/SubNav.js

@@ -10,7 +10,7 @@ const ITEM_CLASS = 'SubNav-item';
 const SELECTED_CLASS = 'selected';
 const SubNavBase = styled.nav.withConfig({
   displayName: "SubNav__SubNavBase",
-  componentId: "f7w0xa-0"
+  componentId: "sc-f7w0xa-0"
 })(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";"], get('space.2'), sx);
 
 function SubNav({
@@ -34,14 +34,14 @@ function SubNav({
 SubNav.displayName = "SubNav";
 const SubNavLinks = styled.div.withConfig({
   displayName: "SubNav__SubNavLinks",
-  componentId: "f7w0xa-1"
+  componentId: "sc-f7w0xa-1"
 })(["display:flex;", ";"], sx);
 const SubNavLink = styled.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
 })).withConfig({
   displayName: "SubNav__SubNavLink",
-  componentId: "f7w0xa-2"
+  componentId: "sc-f7w0xa-2"
 })(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";"], get('space.3'), get('space.3'), get('fontWeights.semibold'), get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('colors.border.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.subtle'), get('colors.fg.muted'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.accent.emphasis'), get('colors.fg.onEmphasis'), sx);
 SubNavLink.displayName = 'SubNav.Link';
 SubNavLinks.displayName = 'SubNav.Links';

package/lib-esm/ThemeProvider.d.ts

@@ -16,6 +16,7 @@ export declare function useTheme(): {
     colorScheme?: string | undefined;
     colorMode?: ColorModeWithAuto | undefined;
     resolvedColorMode?: ColorMode | undefined;
+    resolvedColorScheme?: string | undefined;
     dayScheme?: string | undefined;
     nightScheme?: string | undefined;
     setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>;