@primer/react 38.1.0-rc.a72ba106c → 38.1.0-rc.b5ef6a423

package/CHANGELOG.md

@@ -8,10 +8,12 @@
 
 - [#7063](https://github.com/primer/react/pull/7063) [`247c66a`](https://github.com/primer/react/commit/247c66a3c297afba73c6e9e3842cc15ff8a845c1) Thanks [@francinelucca](https://github.com/francinelucca)! - Feat: popover implement click outside
 
-- [#7070](https://github.com/primer/react/pull/7070) [`f7dfa7d`](https://github.com/primer/react/commit/f7dfa7d5954961834d0ec360d6b218237e75bf96) Thanks [@hectahertz](https://github.com/hectahertz)! - Add SSR warnings to useMediaUnsafeSSR and useResponsiveValue.
+- [#7109](https://github.com/primer/react/pull/7109) [`34e7108`](https://github.com/primer/react/commit/34e71089ea7668d7b0ab4572f125d13b998e8754) Thanks [@adierkens](https://github.com/adierkens)! - Add support to ActionList for 'tablist' and 'tab' roles
 
 ### Patch Changes
 
+- [#7124](https://github.com/primer/react/pull/7124) [`a746a83`](https://github.com/primer/react/commit/a746a83e68da54a7f66161b0f1d68bfbdc071ce6) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Fixed Timeline.Break when followed by a condensed item and clip sidebar for condensed items.
+
 - [#7060](https://github.com/primer/react/pull/7060) [`3468793`](https://github.com/primer/react/commit/3468793e15269d6d9f226ee7844921e44bfc4622) Thanks [@francinelucca](https://github.com/francinelucca)! - @primer/react: chore(Dialog): allow direct children
 
 - [#7061](https://github.com/primer/react/pull/7061) [`e58e102`](https://github.com/primer/react/commit/e58e1027d7f3cdae5223c08d83f7b86918db370b) Thanks [@francinelucca](https://github.com/francinelucca)! - PageLayout: update wrapper dimensions to match PageLayout's root element

package/dist/ActionList/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/ActionList/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAEpD,CAAA;AAmSD,QAAA,MAAM,IAAI,IA3Qa,EAAE,SAAS,KAAK,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QjD,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/ActionList/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAEpD,CAAA;AAySD,QAAA,MAAM,IAAI,IAjRa,EAAE,SAAS,KAAK,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoRjD,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA"}

package/dist/ActionList/Item.js

@@ -118,6 +118,8 @@ const UnwrappedItem = ({
     if (selectionVariant === 'single') inferredItemRole = 'menuitemradio';else if (selectionVariant === 'multiple') inferredItemRole = 'menuitemcheckbox';else inferredItemRole = 'menuitem';
   } else if (listRole === 'listbox') {
     if (selectionVariant !== undefined && !role) inferredItemRole = 'option';
+  } else if (listRole === 'tablist') {
+    inferredItemRole = 'tab';
   }
   const itemRole = role || inferredItemRole;
   if (slots.trailingAction) {
@@ -129,7 +131,7 @@ const UnwrappedItem = ({
   if (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') inferredSelectionAttribute = 'aria-checked';else if (itemRole === 'option') inferredSelectionAttribute = 'aria-selected';
   const itemSelectionAttribute = selectionAttribute || inferredSelectionAttribute;
   // Ensures ActionList.Item retains list item semantics if a valid ARIA role is applied, or if item is inactive
-  const listItemSemantics = role === 'option' || role === 'menuitem' || role === 'menuitemradio' || role === 'menuitemcheckbox';
+  const listItemSemantics = itemRole === 'option' || itemRole === 'menuitem' || itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox' || itemRole === 'tab';
   const listRoleTypes = ['listbox', 'menu', 'list'];
   const listSemantics = listRole && listRoleTypes.includes(listRole) || inactive || listItemSemantics;
   const buttonSemantics = !listSemantics && !_PrivateItemWrapper;

package/dist/Timeline/Timeline-116393ee.css

@@ -0,0 +1,2 @@
+.prc-Timeline-Timeline-iQjcc{display:flex;flex-direction:column}.prc-Timeline-Timeline-iQjcc:where([data-clip-sidebar]) .prc-Timeline-TimelineItem-Sd-t-:first-child{padding-top:0}:is(.prc-Timeline-Timeline-iQjcc:where([data-clip-sidebar]) .prc-Timeline-TimelineItem-Sd-t-:first-child):where([data-condensed]):before{top:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-iQjcc:where([data-clip-sidebar]) .prc-Timeline-TimelineItem-Sd-t-:last-child{padding-bottom:0}:is(.prc-Timeline-Timeline-iQjcc:where([data-clip-sidebar]) .prc-Timeline-TimelineItem-Sd-t-:last-child):where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-TimelineItem-Sd-t-{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-Sd-t-:before{background-color:var(--borderColor-muted,var(--color-border-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-Sd-t-:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-Sd-t-:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-Sd-t-:where([data-condensed]) .prc-Timeline-TimelineBadge-BqMiN{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineBadgeWrapper-75vYD{position:relative;z-index:1}.prc-Timeline-TimelineBadge-BqMiN{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border-color:var(--bgColor-default,var(--color-canvas-default));border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-BqMiN,.prc-Timeline-TimelineBody-WWZY0{color:var(--fgColor-muted,var(--color-fg-muted))}.prc-Timeline-TimelineBody-WWZY0{flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-dPnDJ{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,var(--color-border-default));height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}.prc-Timeline-TimelineBreak-dPnDJ:has(+[data-condensed]){margin-bottom:calc(var(--base-size-12,.75rem)*-1)}
+/*# sourceMappingURL=Timeline-116393ee.css.map */

package/dist/Timeline/Timeline-116393ee.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Timeline/Timeline.module.css"],"names":[],"mappings":"AAAA,6BACE,YAAa,CACb,qBAmBF,CAhBI,qGACE,aAKF,CAHE,yIACE,8BACF,CAGF,oGACE,gBAKF,CAHE,wIACE,iCACF,CAKN,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAkCF,CA7BE,wCASE,mEAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAeF,CAZE,oEACE,uCACF,CAEA,2FAKE,mEAAwC,CACxC,QAAS,CAFT,gDAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAIJ,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,4EAA8C,CAE9C,+DAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAftC,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UAkBF,CAEA,mEAbE,gDAoBF,CAPA,iCAME,SAAU,CAFV,8CAAuC,CADvC,oCAA8B,CAD9B,cAAe,CADf,WAMF,CAEA,kCAOE,mEAAwC,CACxC,QAAS,CACT,yGAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAYF,CAHE,yDACE,iDACF","file":"Timeline-116393ee.css","sourcesContent":[".Timeline {\n  display: flex;\n  flex-direction: column;\n\n  &:where([data-clip-sidebar]) {\n    .TimelineItem:first-child {\n      padding-top: 0;\n\n      &:where([data-condensed])::before {\n        top: var(--base-size-12);\n      }\n    }\n\n    .TimelineItem:last-child {\n      padding-bottom: 0;\n\n      &:where([data-condensed])::before {\n        height: var(--base-size-12);\n      }\n    }\n  }\n}\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--base-size-16) 0;\n  margin-left: var(--base-size-16);\n\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: 2px;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:where([data-condensed]) {\n    padding-top: var(--base-size-4);\n    padding-bottom: 0;\n\n    &:last-child {\n      padding-bottom: var(--base-size-16);\n    }\n\n    .TimelineBadge {\n      height: 16px;\n      margin-top: var(--base-size-8);\n      margin-bottom: var(--base-size-8);\n      color: var(--fgColor-muted);\n      background-color: var(--bgColor-default);\n      border: 0;\n    }\n  }\n}\n\n.TimelineBadgeWrapper {\n  position: relative;\n  z-index: 1;\n}\n\n.TimelineBadge {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  margin-right: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -15px;\n  flex-shrink: 0;\n  overflow: hidden;\n  color: var(--fgColor-muted);\n\n  /* TODOl not quite sure if this is the correct migration for this line */\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--bgColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thick);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n}\n\n.TimelineBody {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4);\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineBreak {\n  position: relative;\n  z-index: 1;\n  height: var(--base-size-24);\n  margin: 0;\n  margin-bottom: calc(-1 * var(--base-size-16));\n  margin-left: 0;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n\n  &:has(+ [data-condensed]) {\n    margin-bottom: calc(-1 * var(--base-size-12));\n  }\n}\n"]}

package/dist/Timeline/Timeline.module.css.js

@@ -1,4 +1,4 @@
-import './Timeline-e8e88a13.css';
+import './Timeline-116393ee.css';
 
 var classes = {"Timeline":"prc-Timeline-Timeline-iQjcc","TimelineItem":"prc-Timeline-TimelineItem-Sd-t-","TimelineBadge":"prc-Timeline-TimelineBadge-BqMiN","TimelineBadgeWrapper":"prc-Timeline-TimelineBadgeWrapper-75vYD","TimelineBody":"prc-Timeline-TimelineBody-WWZY0","TimelineBreak":"prc-Timeline-TimelineBreak-dPnDJ"};
 

package/dist/hooks/{useMediaUnsafeSSR.d.ts → useMedia.d.ts}

@@ -1,21 +1,18 @@
 import React from 'react';
 /**
- * `useMediaUnsafeSSR` will use the given `mediaQueryString` with `matchMedia` to
+ * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
  * determine if the document matches the media query string.
  *
- * If `MatchMedia` is used as an ancestor, `useMediaUnsafeSSR` will instead use the
+ * If `MatchMedia` is used as an ancestor, `useMedia` will instead use the
  * value of the media query string, if available
  *
- * Warning: If rendering on the server, and no `defaultState` is provided,
- * this could cause a hydration mismatch between server and client.
- *
  * @example
  * function Example() {
- *   const coarsePointer = useMediaUnsafeSSR('(pointer: coarse)');
+ *   const coarsePointer = useMedia('(pointer: coarse)');
  *   // ...
  * }
  */
-export declare function useMediaUnsafeSSR(mediaQueryString: string, defaultState?: boolean): boolean;
+export declare function useMedia(mediaQueryString: string, defaultState?: boolean): boolean;
 type MediaQueryFeatures = {
     [key: string]: boolean | undefined;
 };
@@ -25,7 +22,7 @@ type MatchMediaProps = {
 };
 /**
  * Use `MatchMedia` to emulate media conditions by passing in feature
- * queries to the `features` prop. If a component uses `useMediaUnsafeSSR` with the
+ * queries to the `features` prop. If a component uses `useMedia` with the
  * feature passed in to `MatchMedia` it will force its value to match what is
  * provided to `MatchMedia`
  *
@@ -39,4 +36,4 @@ type MatchMediaProps = {
  */
 export declare function MatchMedia({ children, features }: MatchMediaProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=useMediaUnsafeSSR.d.ts.map
+//# sourceMappingURL=useMedia.d.ts.map

package/dist/hooks/useMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAI3E;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,WAoExE;AAED,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CACnC,CAAA;AAOD,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAC9B,CAAA;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAC,QAAQ,EAAE,QAA0B,EAAC,EAAE,eAAe,qBAGjF"}

package/dist/hooks/{useMediaUnsafeSSR.js → useMedia.js}

@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
 import React, { useContext, createContext, useEffect } from 'react';
 import 'react/jsx-runtime';
 
-function useMediaUnsafeSSR(mediaQueryString, defaultState) {
+function useMedia(mediaQueryString, defaultState) {
   const $ = c(12);
   const features = useContext(MatchMediaContext);
   let t0;
@@ -83,4 +83,4 @@ function useMediaUnsafeSSR(mediaQueryString, defaultState) {
 // unavailable through devtools
 const MatchMediaContext = /*#__PURE__*/createContext({});
 
-export { useMediaUnsafeSSR };
+export { useMedia };

package/dist/hooks/useResponsiveValue.d.ts

@@ -23,8 +23,6 @@ export declare function isResponsiveValue(value: any): value is ResponsiveValue<
  * Resolves responsive values based on the current viewport width.
  * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
  *
- * Warning: This hook is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.
- *
  * @example
  * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
  * console.log(value) // 'bar'

package/dist/hooks/useResponsiveValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../src/hooks/useResponsiveValue.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc;;;;CAI1B,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,KAAK,GAAG,QAAQ,IAAI;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAChC,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,QAAQ,EAAE,MAAM,OAAO,EAAE,MAAM,KAAK,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,GAE5G,OAAO,CAAC,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;AAEpC;;;GAGG;AAEH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,eAAe,CAAC,GAAG,CAAC,CAE3E;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,CAgC7F"}
+{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../src/hooks/useResponsiveValue.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc;;;;CAI1B,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,KAAK,GAAG,QAAQ,IAAI;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAChC,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,QAAQ,EAAE,MAAM,OAAO,EAAE,MAAM,KAAK,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,GAE5G,OAAO,CAAC,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;AAEpC;;;GAGG;AAEH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,eAAe,CAAC,GAAG,CAAC,CAE3E;AAED;;;;;;;GAOG;AAEH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,CA0B7F"}

package/dist/hooks/useResponsiveValue.js

@@ -1,6 +1,4 @@
-import { useMediaUnsafeSSR } from './useMediaUnsafeSSR.js';
-import { canUseDOM } from '../utils/environment.js';
-import { warning } from '../utils/warning.js';
+import { useMedia } from './useMedia.js';
 
 // This file contains utilities for working with responsive values.
 
@@ -35,17 +33,15 @@ function isResponsiveValue(value) {
  * Resolves responsive values based on the current viewport width.
  * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
  *
- * Warning: This hook is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.
- *
  * @example
  * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
  * console.log(value) // 'bar'
  */
+// TODO: Improve SSR support
 function useResponsiveValue(value, fallback) {
-  const isNarrowViewport = useMediaUnsafeSSR(viewportRanges.narrow, false);
-  const isRegularViewport = useMediaUnsafeSSR(viewportRanges.regular, false);
-  const isWideViewport = useMediaUnsafeSSR(viewportRanges.wide, false);
-  process.env.NODE_ENV !== "production" ? warning(!canUseDOM, "`useResponsiveValue` is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.") : void 0;
+  const isNarrowViewport = useMedia(viewportRanges.narrow, false);
+  const isRegularViewport = useMedia(viewportRanges.regular, false);
+  const isWideViewport = useMedia(viewportRanges.wide, false);
   if (isResponsiveValue(value)) {
     const responsiveValue = value;
     if (isNarrowViewport && "narrow" in responsiveValue) {

package/generated/components.json

@@ -7434,7 +7434,7 @@
         },
         {
           "id": "components-timeline-features--condensed-items",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Item condensed>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--timeline-break",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.1.0-rc.a72ba106c",
+  "version": "38.1.0-rc.b5ef6a423",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -96,13 +96,13 @@
   "devDependencies": {
     "@actions/core": "1.11.1",
     "@babel/cli": "7.28.3",
-    "@babel/core": "7.28.4",
-    "@babel/parser": "7.28.4",
+    "@babel/core": "7.28.5",
+    "@babel/parser": "7.28.5",
     "@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",
-    "@babel/preset-react": "7.27.1",
-    "@babel/preset-typescript": "7.27.1",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",
     "@primer/doc-gen": "^0.0.1",
@@ -164,7 +164,7 @@
     "micromark-extension-frontmatter": "2.0.0",
     "micromark-extension-mdxjs": "3.0.0",
     "postcss-preset-primer": "^0.0.0",
-    "publint": "^0.3.12",
+    "publint": "^0.3.15",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-is": "18.3.1",

package/dist/Timeline/Timeline-e8e88a13.css

@@ -1,2 +0,0 @@
-.prc-Timeline-Timeline-iQjcc{display:flex;flex-direction:column}.prc-Timeline-Timeline-iQjcc:where([data-clip-sidebar]) .prc-Timeline-TimelineItem-Sd-t-:first-child{padding-top:0}.prc-Timeline-Timeline-iQjcc:where([data-clip-sidebar]) .prc-Timeline-TimelineItem-Sd-t-:last-child{padding-bottom:0}.prc-Timeline-TimelineItem-Sd-t-{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-Sd-t-:before{background-color:var(--borderColor-muted,var(--color-border-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-Sd-t-:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-Sd-t-:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-Sd-t-:where([data-condensed]) .prc-Timeline-TimelineBadge-BqMiN{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineBadgeWrapper-75vYD{position:relative;z-index:1}.prc-Timeline-TimelineBadge-BqMiN{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border-color:var(--bgColor-default,var(--color-canvas-default));border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-BqMiN,.prc-Timeline-TimelineBody-WWZY0{color:var(--fgColor-muted,var(--color-fg-muted))}.prc-Timeline-TimelineBody-WWZY0{flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-dPnDJ{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,var(--color-border-default));height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}
-/*# sourceMappingURL=Timeline-e8e88a13.css.map */

package/dist/Timeline/Timeline-e8e88a13.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Timeline/Timeline.module.css"],"names":[],"mappings":"AAAA,6BACE,YAAa,CACb,qBAWF,CARI,qGACE,aACF,CAEA,oGACE,gBACF,CAIJ,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAkCF,CA7BE,wCASE,mEAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAeF,CAZE,oEACE,uCACF,CAEA,2FAKE,mEAAwC,CACxC,QAAS,CAFT,gDAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAIJ,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,4EAA8C,CAE9C,+DAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAftC,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UAkBF,CAEA,mEAbE,gDAoBF,CAPA,iCAME,SAAU,CAFV,8CAAuC,CADvC,oCAA8B,CAD9B,cAAe,CADf,WAMF,CAEA,kCAOE,mEAAwC,CACxC,QAAS,CACT,yGAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAQF","file":"Timeline-e8e88a13.css","sourcesContent":[".Timeline {\n  display: flex;\n  flex-direction: column;\n\n  &:where([data-clip-sidebar]) {\n    .TimelineItem:first-child {\n      padding-top: 0;\n    }\n\n    .TimelineItem:last-child {\n      padding-bottom: 0;\n    }\n  }\n}\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--base-size-16) 0;\n  margin-left: var(--base-size-16);\n\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: 2px;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:where([data-condensed]) {\n    padding-top: var(--base-size-4);\n    padding-bottom: 0;\n\n    &:last-child {\n      padding-bottom: var(--base-size-16);\n    }\n\n    .TimelineBadge {\n      height: 16px;\n      margin-top: var(--base-size-8);\n      margin-bottom: var(--base-size-8);\n      color: var(--fgColor-muted);\n      background-color: var(--bgColor-default);\n      border: 0;\n    }\n  }\n}\n\n.TimelineBadgeWrapper {\n  position: relative;\n  z-index: 1;\n}\n\n.TimelineBadge {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  margin-right: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -15px;\n  flex-shrink: 0;\n  overflow: hidden;\n  color: var(--fgColor-muted);\n\n  /* TODOl not quite sure if this is the correct migration for this line */\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--bgColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thick);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n}\n\n.TimelineBody {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4);\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineBreak {\n  position: relative;\n  z-index: 1;\n  height: var(--base-size-24);\n  margin: 0;\n  margin-bottom: calc(-1 * var(--base-size-16));\n  margin-left: 0;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n"]}

package/dist/hooks/useMediaUnsafeSSR.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMediaUnsafeSSR.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaUnsafeSSR.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAI3E;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,WAoEjF;AAED,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CACnC,CAAA;AAOD,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAC9B,CAAA;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAC,QAAQ,EAAE,QAA0B,EAAC,EAAE,eAAe,qBAGjF"}