@primer/react 38.0.0-rc.1 → 38.0.0-rc.2

package/lib-esm/hooks/useMnemonics.js

@@ -1,4 +1,3 @@
-import { c } from 'react-compiler-runtime';
 import React from 'react';
 import { iterateFocusableElements } from '@primer/behaviors/utils';
 import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
@@ -10,103 +9,65 @@ import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
  */
 
 const useMnemonics = (open, providedRef) => {
-  const $ = c(9);
   const containerRef = useProvidedRefOrCreate(providedRef);
-  let t0;
-  let t1;
-  if ($[0] !== containerRef || $[1] !== open) {
-    t0 = function addAriaKeyshortcuts() {
-      if (!open || !containerRef.current) {
-        return;
-      }
-      const container = containerRef.current;
-      const focusableItems = [...iterateFocusableElements(container)];
-      focusableItems.map(_temp);
-    };
-    t1 = [open, containerRef];
-    $[0] = containerRef;
-    $[1] = open;
-    $[2] = t0;
-    $[3] = t1;
-  } else {
-    t0 = $[2];
-    t1 = $[3];
-  }
-  React.useEffect(t0, t1);
-  let t2;
-  if ($[4] !== containerRef || $[5] !== open) {
-    t2 = [open, containerRef];
-    $[4] = containerRef;
-    $[5] = open;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
+  React.useEffect(function addAriaKeyshortcuts() {
+    if (!open || !containerRef.current) return;
+    const container = containerRef.current;
+    const focusableItems = [...iterateFocusableElements(container)];
+    focusableItems.map(item => {
+      // if item already has aria-keyshortcuts defined by user, skip
+      if (item.getAttribute('aria-keyshortcuts')) return;
+      const firstLetter = item.textContent.toLowerCase()[0];
+      if (firstLetter) item.setAttribute('aria-keyshortcuts', firstLetter);
+    });
+  }, [open, containerRef]);
   React.useEffect(function handleKeyDown() {
-    if (!open || !containerRef.current) {
-      return;
-    }
+    if (!open || !containerRef.current) return;
     const container_0 = containerRef.current;
     const handler = event => {
       var _elementToFocus;
+      // skip if a TextInput has focus
       const activeElement = document.activeElement;
-      if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") {
-        return;
-      }
+      if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') return;
+
+      // skip if used with modifier to preserve shortcuts like ⌘ + F
       const hasModifier = event.ctrlKey || event.altKey || event.metaKey;
-      if (hasModifier) {
-        return;
-      }
-      if (!isAlphabetKey(event)) {
-        return;
-      }
+      if (hasModifier) return;
+
+      // skip if it's not a alphabet key
+      if (!isAlphabetKey(event)) return;
+
+      // if this is a typeahead event, don't propagate outside of menu
       event.stopPropagation();
       const query = event.key.toLowerCase();
       let elementToFocus;
       const focusableItems_0 = [...iterateFocusableElements(container_0)];
       const itemsMatchingKey = focusableItems_0.filter(item_0 => {
         var _item_0$getAttribute;
-        const keyshortcuts = (_item_0$getAttribute = item_0.getAttribute("aria-keyshortcuts")) === null || _item_0$getAttribute === void 0 ? void 0 : _item_0$getAttribute.split(" ").map(_temp2);
+        const keyshortcuts = (_item_0$getAttribute = item_0.getAttribute('aria-keyshortcuts')) === null || _item_0$getAttribute === void 0 ? void 0 : _item_0$getAttribute.split(' ').map(shortcut => shortcut.toLowerCase());
         return keyshortcuts && keyshortcuts.includes(query);
       });
       const currentActiveIndex = itemsMatchingKey.indexOf(activeElement);
+
+      // If the last element is already selected, cycle through the list
       if (currentActiveIndex === itemsMatchingKey.length - 1) {
         elementToFocus = itemsMatchingKey[0];
       } else {
-        elementToFocus = itemsMatchingKey.find((item_1, index) => index > currentActiveIndex);
+        elementToFocus = itemsMatchingKey.find((item_1, index) => {
+          return index > currentActiveIndex;
+        });
       }
       (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus();
     };
-    container_0.addEventListener("keydown", handler);
-    return () => container_0.removeEventListener("keydown", handler);
-  }, t2);
-  const isAlphabetKey = _temp3;
-  let t3;
-  if ($[7] !== containerRef) {
-    t3 = {
-      containerRef
-    };
-    $[7] = containerRef;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  return t3;
+    container_0.addEventListener('keydown', handler);
+    return () => container_0.removeEventListener('keydown', handler);
+  }, [open, containerRef]);
+  const isAlphabetKey = event_0 => {
+    return event_0.key.length === 1 && /[a-z\d]/i.test(event_0.key);
+  };
+  return {
+    containerRef
+  };
 };
-function _temp(item) {
-  if (item.getAttribute("aria-keyshortcuts")) {
-    return;
-  }
-  const firstLetter = item.textContent.toLowerCase()[0];
-  if (firstLetter) {
-    item.setAttribute("aria-keyshortcuts", firstLetter);
-  }
-}
-function _temp2(shortcut) {
-  return shortcut.toLowerCase();
-}
-function _temp3(event_0) {
-  return event_0.key.length === 1 && /[a-z\d]/i.test(event_0.key);
-}
 
 export { useMnemonics };

package/lib-esm/hooks/useOpenAndCloseFocus.js

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { iterateFocusableElements } from '@primer/behaviors/utils';
 
 function useOpenAndCloseFocus(t0) {
-  const $ = c(10);
+  const $ = c(6);
   const {
     initialFocusRef,
     returnFocusRef,
@@ -11,7 +11,8 @@ function useOpenAndCloseFocus(t0) {
     preventFocusOnOpen
   } = t0;
   let t1;
-  if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef.current) {
+  let t2;
+  if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
     t1 = () => {
       if (!preventFocusOnOpen) {
         if (initialFocusRef && initialFocusRef.current) {
@@ -28,24 +29,16 @@ function useOpenAndCloseFocus(t0) {
         returnFocusRefCurrent === null || returnFocusRefCurrent === void 0 ? void 0 : returnFocusRefCurrent.focus();
       };
     };
+    t2 = [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen];
     $[0] = containerRef;
     $[1] = initialFocusRef;
     $[2] = preventFocusOnOpen;
-    $[3] = returnFocusRef.current;
+    $[3] = returnFocusRef;
     $[4] = t1;
+    $[5] = t2;
   } else {
     t1 = $[4];
-  }
-  let t2;
-  if ($[5] !== containerRef || $[6] !== initialFocusRef || $[7] !== preventFocusOnOpen || $[8] !== returnFocusRef) {
-    t2 = [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen];
-    $[5] = containerRef;
-    $[6] = initialFocusRef;
-    $[7] = preventFocusOnOpen;
-    $[8] = returnFocusRef;
-    $[9] = t2;
-  } else {
-    t2 = $[9];
+    t2 = $[5];
   }
   useEffect(t1, t2);
 }

package/lib-esm/hooks/useOverflow.js

@@ -2,10 +2,11 @@ import { c } from 'react-compiler-runtime';
 import { useState, useEffect } from 'react';
 
 function useOverflow(ref) {
-  const $ = c(4);
+  const $ = c(3);
   const [hasOverflow, setHasOverflow] = useState(false);
   let t0;
-  if ($[0] !== ref.current) {
+  let t1;
+  if ($[0] !== ref) {
     t0 = () => {
       if (ref.current === null) {
         return;
@@ -23,18 +24,13 @@ function useOverflow(ref) {
         observer.disconnect();
       };
     };
-    $[0] = ref.current;
+    t1 = [ref];
+    $[0] = ref;
     $[1] = t0;
+    $[2] = t1;
   } else {
     t0 = $[1];
-  }
-  let t1;
-  if ($[2] !== ref) {
-    t1 = [ref];
-    $[2] = ref;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
+    t1 = $[2];
   }
   useEffect(t0, t1);
   return hasOverflow;

package/lib-esm/hooks/useScrollFlash.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import { useEffect } from 'react';
 
 /**
@@ -5,20 +6,30 @@ import { useEffect } from 'react';
  * @param scrollContainerRef The ref of the scrollable content
  */
 function useScrollFlash(scrollContainerRef) {
-  // https://adxlv.computer/projects/flash-scrollers/
-  useEffect(() => {
-    const scrollContainer = scrollContainerRef.current;
-    if (!scrollContainer) {
-      return;
-    }
-    const currentScroll = scrollContainer.scrollTop;
-    const maxScroll = scrollContainer.scrollHeight;
-    const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
-
-    // eslint-disable-next-line react-compiler/react-compiler
-    scrollContainer.scrollTop = altScroll;
-    scrollContainer.scrollTop = currentScroll;
-  }, [scrollContainerRef]);
+  const $ = c(3);
+  let t0;
+  let t1;
+  if ($[0] !== scrollContainerRef) {
+    t0 = () => {
+      const scrollContainer = scrollContainerRef.current;
+      if (!scrollContainer) {
+        return;
+      }
+      const currentScroll = scrollContainer.scrollTop;
+      const maxScroll = scrollContainer.scrollHeight;
+      const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
+      scrollContainer.scrollTop = altScroll;
+      scrollContainer.scrollTop = currentScroll;
+    };
+    t1 = [scrollContainerRef];
+    $[0] = scrollContainerRef;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
 }
 
 export { useScrollFlash as default };

package/lib-esm/index.d.ts

@@ -43,6 +43,8 @@ export { default as Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { default as AvatarStack } from './AvatarStack';
 export type { AvatarStackProps } from './AvatarStack';
+export { Banner } from './Banner';
+export type { BannerProps } from './Banner';
 export { default as BranchName } from './BranchName';
 export type { BranchNameProps } from './BranchName';
 export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
@@ -50,8 +52,6 @@ export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, Breadcrum
 export { default as ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupProps } from './ButtonGroup';
 export type { CircleBadgeProps, CircleBadgeIconProps } from './CircleBadge';
-export { default as CircleOcticon } from './CircleOcticon';
-export type { CircleOcticonProps } from './CircleOcticon';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as CircleBadge } from './CircleBadge';
 export { default as CounterLabel } from './CounterLabel';
@@ -89,7 +89,7 @@ export type { PopoverProps, PopoverContentProps } from './Popover';
 export { default as Portal, registerPortalRoot } from './Portal';
 export type { PortalProps } from './Portal';
 export { ProgressBar } from './ProgressBar';
-export type { ProgressBarProps } from './ProgressBar';
+export type { ProgressBarProps, ProgressBarItemProps } from './ProgressBar';
 export { default as RadioGroup } from './RadioGroup';
 export type { RelativeTimeProps } from './RelativeTime';
 export { default as RelativeTime } from './RelativeTime';
@@ -107,6 +107,7 @@ export type { StateLabelProps } from './StateLabel';
 export { default as SubNav } from './SubNav';
 export type { SubNavProps, SubNavLinkProps, SubNavLinksProps } from './SubNav';
 export { default as ToggleSwitch } from './ToggleSwitch';
+export type { ToggleSwitchProps } from './ToggleSwitch';
 export { default as TextInput } from './TextInput';
 export type { TextInputProps } from './TextInput';
 export { default as TextInputWithTokens } from './TextInputWithTokens';

package/lib-esm/index.js

@@ -19,6 +19,7 @@ export { default as useIsomorphicLayoutEffect } from './utils/useIsomorphicLayou
 export { useProvidedRefOrCreate } from './hooks/useProvidedRefOrCreate.js';
 export { createComponent } from './utils/create-component.js';
 export { ActionList } from './ActionList/index.js';
+export { Banner } from './Banner/index.js';
 export { Dialog } from './Dialog/Dialog.js';
 export { default as Label } from './Label/Label.js';
 export { default as Pagination } from './Pagination/Pagination.js';
@@ -34,7 +35,6 @@ export { default as Radio } from './Radio/Radio.js';
 export { default as Avatar } from './Avatar/Avatar.js';
 export { default as AvatarStack } from './AvatarStack/AvatarStack.js';
 export { default as ButtonGroup } from './ButtonGroup/ButtonGroup.js';
-export { default as CircleOcticon } from './CircleOcticon/CircleOcticon.js';
 export { default as CounterLabel } from './CounterLabel/CounterLabel.js';
 export { default as Details } from './Details/Details.js';
 export { default as Flash } from './Flash/Flash.js';

package/lib-esm/internal/components/BoxWithFallback.js

@@ -6,60 +6,65 @@ import { jsx } from 'react/jsx-runtime';
 import Box from '../../Box/Box.js';
 
 const BoxWithFallback = /*#__PURE__*/React.forwardRef(function BoxWithFallback(t0, ref) {
-  const $ = c(13);
+  const $ = c(14);
+  let BaseComponent;
   let rest;
+  let sx;
   let t1;
-  let t2;
   if ($[0] !== t0) {
-    ({
-      as: t1,
-      sx: t2,
-      ...rest
-    } = t0);
+    const {
+      as: t2,
+      sx: t3,
+      ...t4
+    } = t0;
+    rest = t4;
+    BaseComponent = t2 === undefined ? "div" : t2;
+    sx = t3 === undefined ? defaultSxProp : t3;
+    t1 = sx !== defaultSxProp || includesSystemProps(rest);
     $[0] = t0;
-    $[1] = rest;
-    $[2] = t1;
-    $[3] = t2;
+    $[1] = BaseComponent;
+    $[2] = rest;
+    $[3] = sx;
+    $[4] = t1;
   } else {
-    rest = $[1];
-    t1 = $[2];
-    t2 = $[3];
+    BaseComponent = $[1];
+    rest = $[2];
+    sx = $[3];
+    t1 = $[4];
   }
-  const BaseComponent = t1 === undefined ? "div" : t1;
-  const sx = t2 === undefined ? defaultSxProp : t2;
-  if (sx !== defaultSxProp || includesSystemProps(rest)) {
-    let t3;
-    if ($[4] !== BaseComponent || $[5] !== ref || $[6] !== rest || $[7] !== sx) {
-      t3 = /*#__PURE__*/jsx(Box, {
+  if (t1) {
+    let t2;
+    if ($[5] !== BaseComponent || $[6] !== ref || $[7] !== rest || $[8] !== sx) {
+      t2 = /*#__PURE__*/jsx(Box, {
         ...rest,
         ref: ref,
         as: BaseComponent,
         sx: sx
       });
-      $[4] = BaseComponent;
-      $[5] = ref;
-      $[6] = rest;
-      $[7] = sx;
-      $[8] = t3;
+      $[5] = BaseComponent;
+      $[6] = ref;
+      $[7] = rest;
+      $[8] = sx;
+      $[9] = t2;
     } else {
-      t3 = $[8];
+      t2 = $[9];
     }
-    return t3;
+    return t2;
   }
-  let t3;
-  if ($[9] !== BaseComponent || $[10] !== ref || $[11] !== rest) {
-    t3 = /*#__PURE__*/jsx(BaseComponent, {
+  let t2;
+  if ($[10] !== BaseComponent || $[11] !== ref || $[12] !== rest) {
+    t2 = /*#__PURE__*/jsx(BaseComponent, {
       ...rest,
       ref: ref
     });
-    $[9] = BaseComponent;
-    $[10] = ref;
-    $[11] = rest;
-    $[12] = t3;
+    $[10] = BaseComponent;
+    $[11] = ref;
+    $[12] = rest;
+    $[13] = t2;
   } else {
-    t3 = $[12];
+    t2 = $[13];
   }
-  return t3;
+  return t2;
 });
 
 export { BoxWithFallback };

package/lib-esm/internal/components/Caret-e686f04c.css

@@ -0,0 +1,2 @@
+.prc-components-Caret-PNu-B{pointer-events:none;position:absolute}.prc-components-CaretTriangle-Iu0GY{fill:var(--caret-bg,var(--bgColor-default,var(--color-canvas-default)))}.prc-components-CaretBorder-o3vP2{fill:none;stroke:var(--caret-border-color,var(--borderColor-default,var(--color-border-default)));stroke-width:var(--caret-border-width,var(--borderWidth-thin,.0625rem))}
+/*# sourceMappingURL=Caret-e686f04c.css.map */

package/lib-esm/internal/components/Caret-e686f04c.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/components/Caret.module.css"],"names":[],"mappings":"AAAA,4BACE,mBAAoB,CACpB,iBACF,CAEA,oCAEE,uEACF,CAEA,kCACE,SAAU,CAEV,uFAA6D,CAC7D,uEACF","file":"Caret-e686f04c.css","sourcesContent":[".Caret {\n  pointer-events: none;\n  position: absolute;\n}\n\n.CaretTriangle {\n  /* stylelint-disable-next-line primer/colors */\n  fill: var(--caret-bg, var(--bgColor-default));\n}\n\n.CaretBorder {\n  fill: none;\n  /* stylelint-disable-next-line primer/colors */\n  stroke: var(--caret-border-color, var(--borderColor-default));\n  stroke-width: var(--caret-border-width, var(--borderWidth-thin));\n}\n"]}

package/lib-esm/internal/components/Caret.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { Theme } from '../../ThemeProvider';
+import type React from 'react';
 type Location = 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom';
 export type CaretProps = {
     bg?: string;
@@ -7,7 +6,6 @@ export type CaretProps = {
     borderWidth?: string | number;
     size?: number;
     location?: Location;
-    theme?: Theme;
 };
 declare function Caret(props: CaretProps): React.JSX.Element;
 declare namespace Caret {

package/lib-esm/internal/components/Caret.js

@@ -1,6 +1,4 @@
-import React from 'react';
-import { ThemeContext } from 'styled-components';
-import { style } from 'styled-system';
+import classes from './Caret.module.css.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const oppositeEdge = {
@@ -27,39 +25,11 @@ function getPosition(edge, align, spacing) {
     [align || perp]: align ? spacing : '50%'
   };
 }
-const getBg = style({
-  prop: 'bg',
-  key: 'colors'
-});
-const getBorderColor = style({
-  prop: 'borderColor',
-  key: 'colors'
-});
-const getBorderWidth = style({
-  prop: 'borderWidth',
-  key: 'borderWidths',
-  scale: [0, 1]
-});
 function Caret(props) {
-  var _props$theme;
-  const theme = React.useContext(ThemeContext);
-  const propsWithTheme = {
-    ...props,
-    bg: props.bg || 'canvas.default',
-    borderColor: props.borderColor || 'border.default',
-    borderWidth: props.borderWidth || 1,
-    theme: (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : theme
-  };
-  const {
-    bg
-  } = getBg(propsWithTheme);
-  const {
-    borderColor
-  } = getBorderColor(propsWithTheme);
-  const {
-    borderWidth
-  } = getBorderWidth(propsWithTheme);
   const {
+    bg,
+    borderColor,
+    borderWidth,
     size = 8,
     location = 'bottom'
   } = props;
@@ -83,30 +53,30 @@ function Caret(props) {
     left: `translate(${[size * 2, size]}) rotate(90)`
   }[edge];
   return /*#__PURE__*/jsx("svg", {
+    className: classes.Caret,
     width: size * 2,
     height: size * 2,
     style: {
-      pointerEvents: 'none',
-      position: 'absolute',
       ...getPosition(edge, align, size),
       // if align is set (top|right|bottom|left),
       // then we don't need an offset margin
-      [`margin${perp}`]: align ? null : -size
+      [`margin${perp}`]: align ? null : -size,
+      ...{
+        '--caret-bg': bg,
+        '--caret-border-color': borderColor,
+        '--caret-border-width': borderWidth
+      }
     },
     role: "presentation",
     children: /*#__PURE__*/jsxs("g", {
+      className: classes.CaretGroup,
       transform: transform,
       children: [/*#__PURE__*/jsx("path", {
         d: triangle,
-        fill: theme === null || theme === void 0 ? void 0 : theme.colors.canvas.default
-      }), /*#__PURE__*/jsx("path", {
-        d: triangle,
-        fill: bg
+        className: classes.CaretTriangle
       }), /*#__PURE__*/jsx("path", {
         d: line,
-        fill: "none",
-        stroke: borderColor,
-        strokeWidth: borderWidth
+        className: classes.CaretBorder
       })]
     })
   });

package/lib-esm/internal/components/Caret.module.css.js

@@ -0,0 +1,5 @@
+import './Caret-e686f04c.css';
+
+var classes = {"Caret":"prc-components-Caret-PNu-B","CaretTriangle":"prc-components-CaretTriangle-Iu0GY","CaretBorder":"prc-components-CaretBorder-o3vP2"};
+
+export { classes as default };

package/lib-esm/internal/components/LiveRegion.js

@@ -18,32 +18,30 @@ function LiveRegion(t0) {
   } = t0;
   const [message, setMessage] = React.useState("");
   let t1;
-  let t2;
   if ($[0] !== message) {
-    t2 = {
+    t1 = {
       announce: setMessage,
       message
     };
     $[0] = message;
-    $[1] = t2;
+    $[1] = t1;
   } else {
-    t2 = $[1];
+    t1 = $[1];
   }
-  t1 = t2;
   const value = t1;
-  let t3;
+  let t2;
   if ($[2] !== children || $[3] !== value) {
-    t3 = /*#__PURE__*/jsx(LiveRegionContext.Provider, {
+    t2 = /*#__PURE__*/jsx(LiveRegionContext.Provider, {
       value: value,
       children: children
     });
     $[2] = children;
     $[3] = value;
-    $[4] = t3;
+    $[4] = t2;
   } else {
-    t3 = $[4];
+    t2 = $[4];
   }
-  return t3;
+  return t2;
 }
 function LiveRegionOutlet() {
   const $ = c(2);

package/lib-esm/internal/utils/getGlobalFocusStyles.js

@@ -2,6 +2,6 @@ import { css } from 'styled-components';
 import { get } from '../../constants.js';
 
 const globalFocusStyle = css(["box-shadow:none;outline:2px solid ", ";"], get('colors.accent.fg'));
-const getGlobalFocusStyles = outlineOffset => css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset, globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset);
+const getGlobalFocusStyles = outlineOffset => css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, outlineOffset, globalFocusStyle, outlineOffset);
 
 export { getGlobalFocusStyles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "38.0.0-rc.1",
+  "version": "38.0.0-rc.2",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -112,8 +112,8 @@
   "devDependencies": {
     "@actions/core": "1.11.1",
     "@babel/cli": "7.28.3",
-    "@babel/core": "7.28.3",
-    "@babel/parser": "7.28.3",
+    "@babel/core": "7.28.4",
+    "@babel/parser": "7.28.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-transform-modules-commonjs": "7.27.1",
@@ -129,11 +129,11 @@
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.4",
     "@rollup/plugin-virtual": "3.0.2",
-    "@storybook/addon-a11y": "^9.1.2",
-    "@storybook/addon-docs": "^9.1.2",
-    "@storybook/addon-links": "^9.1.2",
+    "@storybook/addon-a11y": "^9.1.5",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-links": "^9.1.5",
     "@storybook/icons": "^1.4.0",
-    "@storybook/react-vite": "^9.1.2",
+    "@storybook/react-vite": "^9.1.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -158,7 +158,7 @@
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
-    "babel-plugin-react-compiler": "^19.1.0-rc.2",
+    "babel-plugin-react-compiler": "^19.1.0-rc.3",
     "babel-plugin-styled-components": "2.1.4",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
@@ -188,11 +188,11 @@
     "react-test-renderer": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rollup": "4.48.0",
+    "rollup": "4.50.1",
     "rollup-plugin-import-css": "^0.0.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "6.0.3",
-    "storybook": "^9.1.2",
+    "storybook": "^9.1.5",
     "styled-components": "5.3.11",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",