@primer/react 38.0.0-rc.7 → 38.0.0-rc.9

package/generated/components.json

@@ -54,6 +54,13 @@
           "required": false,
           "description": "Custom className",
           "defaultValue": ""
+        },
+        {
+          "name": "gap",
+          "type": "'none' | 'condensed'",
+          "required": false,
+          "defaultValue": "'condensed'",
+          "description": "Horizontal gap scale between items (restricted to none or condensed)."
         }
       ],
       "subcomponents": [
@@ -1151,11 +1158,6 @@
           "required": false,
           "description": "URL of the avatar image.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1359,6 +1361,11 @@
           "name": "layout",
           "type": "'default' | 'compact'",
           "description": "Specify the layout of the Banner. Compact layout will reduce the padding."
+        },
+        {
+          "name": "actionsLayout",
+          "type": "'default' | 'inline' | 'stacked'",
+          "description": "Override the responsive layout of the action buttons. 'inline' layout will display the buttons inline with the title and description, while 'stacked' layout will always render the buttons in a new row."
         }
       ],
       "subcomponents": [
@@ -1549,11 +1556,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"div\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1625,12 +1627,6 @@
           "required": false,
           "description": "How to handle overflow when breadcrumbs don't fit in the container. 'wrap' allows items to wrap to new lines. 'menu' collapses items into an overflow menu. 'menu-with-root' also collapses items into an overflow menu but includes the root (first) breadcrumb in the menu so only the last items remain visible.",
           "defaultValue": "'wrap'"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true,
-          "description": "System styles (deprecated, use CSS classes instead)"
         }
       ],
       "subcomponents": [
@@ -1670,11 +1666,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -3183,23 +3174,12 @@
         {
           "name": "wide",
           "type": "boolean"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
         {
           "name": "Dialog.Header",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
+          "props": []
         }
       ]
     },
@@ -3930,7 +3910,76 @@
       "name": "NavList",
       "status": "alpha",
       "a11yReviewed": "2025-01-08",
-      "stories": [],
+      "stories": [
+        {
+          "id": "components-navlist--default",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item href=\"#\" aria-current=\"page\">\n          Item 1\n        </NavList.Item>\n        <NavList.Item href=\"#\">Item 2</NavList.Item>\n        <NavList.Item href=\"#\">Item 3</NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--expand-with-custom-items",
+          "code": "() => {\n  const items: {\n    href: string\n    text: string\n    'aria-current'?: 'page'\n  }[] = [\n    {\n      href: '#',\n      text: 'Item 4',\n      'aria-current': 'page',\n    },\n    {\n      href: '#',\n      text: 'Item 5',\n    },\n    {\n      href: '#',\n      text: 'Item 6',\n    },\n    {\n      href: '#',\n      text: 'Item 7',\n    },\n    {\n      href: '#',\n      text: 'Item 8',\n    },\n    {\n      href: '#',\n      text: 'Item 9',\n    },\n  ]\n  const Item = ({\n    leadingVisual,\n    text,\n    trailingVisual,\n    ...rest\n  }: CustomItemProps) => {\n    return (\n      <NavList.Item key={text} onClick={() => {}} href=\"#\" {...rest}>\n        {leadingVisual ? (\n          <NavList.LeadingVisual>\n            <Octicon icon={leadingVisual} />\n          </NavList.LeadingVisual>\n        ) : null}\n        {text}\n\n        {trailingVisual ? (\n          <NavList.TrailingVisual>\n            {typeof trailingVisual === 'string' ? (\n              trailingVisual\n            ) : (\n              <Octicon icon={trailingVisual as React.ElementType} />\n            )}\n            <VisuallyHidden>results</VisuallyHidden>\n          </NavList.TrailingVisual>\n        ) : null}\n      </NavList.Item>\n    )\n  }\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item href=\"#\">Item 1</NavList.Item>\n          <NavList.Item href=\"#\">Item 2</NavList.Item>\n          <NavList.Item href=\"#\">Item 3</NavList.Item>\n          <NavList.GroupExpand\n            label=\"Show more\"\n            items={items}\n            renderItem={Item}\n          />\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--expand-with-pages",
+          "code": "() => {\n  const items = [\n    {\n      href: '#',\n      text: 'Item 4',\n    },\n    {\n      href: '#',\n      text: 'Item 5',\n    },\n    {\n      href: '#',\n      text: 'Item 6',\n    },\n    {\n      href: '#',\n      text: 'Item 7',\n    },\n    {\n      href: '#',\n      text: 'Item 8',\n    },\n    {\n      href: '#',\n      text: 'Item 9',\n    },\n  ]\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item href=\"#\" aria-current=\"page\">\n            Item 1\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 2</NavList.Item>\n          <NavList.Item href=\"#\">Item 3</NavList.Item>\n          <NavList.GroupExpand pages={2} label=\"Show more\" items={items} />\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--group-with-expand-and-custom-items",
+          "code": "() => {\n  const Item = ({\n    leadingVisual: LeadingVisual,\n    text,\n    trailingVisual: TrailingVisual,\n    ...rest\n  }: CustomItemProps) => {\n    return (\n      <NavList.Item onClick={() => {}} href=\"#\" {...rest} key={text}>\n        {LeadingVisual ? (\n          <NavList.LeadingVisual>\n            <LeadingVisual />\n          </NavList.LeadingVisual>\n        ) : null}\n        {text}\n\n        {TrailingVisual ? (\n          <NavList.TrailingVisual>\n            {typeof TrailingVisual === 'string' ? (\n              TrailingVisual\n            ) : (\n              <TrailingVisual />\n            )}\n            <VisuallyHidden>results</VisuallyHidden>\n          </NavList.TrailingVisual>\n        ) : null}\n      </NavList.Item>\n    )\n  }\n  const items = [\n    {\n      href: '#',\n      text: 'Commits',\n      leadingVisual: GitCommitIcon,\n      trailingVisual: '32k',\n    },\n    {\n      href: '#',\n      text: 'Packages',\n      leadingVisual: PackageIcon,\n      trailingVisual: '1k',\n    },\n    {\n      href: '#',\n      text: 'Wikis',\n      leadingVisual: BookIcon,\n      trailingVisual: '121',\n    },\n    {\n      href: '#',\n      text: 'Topics',\n      leadingVisual: MilestoneIcon,\n      trailingVisual: '12k',\n    },\n    {\n      href: '#',\n      text: 'Marketplace',\n      leadingVisual: TelescopeIcon,\n      trailingVisual: ArrowRightIcon,\n    },\n  ]\n  return (\n    <NavList>\n      <NavList.Group>\n        <NavList.Item aria-current=\"page\">\n          <NavList.LeadingVisual>\n            <CodeIcon />\n          </NavList.LeadingVisual>\n          Code\n          <NavList.TrailingVisual>3k</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <RepoIcon />\n          </NavList.LeadingVisual>\n          Repositories\n          <NavList.TrailingVisual>713</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <IssueOpenedIcon />\n          </NavList.LeadingVisual>\n          Issues\n          <NavList.TrailingVisual>6k</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <GitPullRequestIcon />\n          </NavList.LeadingVisual>\n          Pull requests\n          <NavList.TrailingVisual>4k</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <CommentDiscussionIcon />\n          </NavList.LeadingVisual>\n          Discussions\n          <NavList.TrailingVisual>236</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <PeopleIcon />\n          </NavList.LeadingVisual>\n          Users\n          <NavList.TrailingVisual>10k</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.GroupExpand items={items} renderItem={Item} />\n      </NavList.Group>\n    </NavList>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-expand",
+          "code": "() => {\n  const items = [\n    {\n      href: '#',\n      text: 'Item 4',\n    },\n    {\n      href: '#',\n      text: 'Item 5',\n    },\n    {\n      href: '#',\n      text: 'Item 6',\n    },\n    {\n      href: '#',\n      text: 'Item 7',\n    },\n    {\n      href: '#',\n      text: 'Item 8',\n    },\n    {\n      href: '#',\n      text: 'Item 9',\n    },\n  ]\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item href=\"#\" aria-current=\"page\">\n            Item 1\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 2</NavList.Item>\n          <NavList.Item href=\"#\">Item 3</NavList.Item>\n          <NavList.GroupExpand label=\"Show more\" items={items} />\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-expand-and-icons",
+          "code": "() => {\n  const items = [\n    {\n      href: '#',\n      text: 'Item 4',\n    },\n    {\n      href: '#',\n      text: 'Item 5',\n    },\n    {\n      href: '#',\n      text: 'Item 6',\n    },\n    {\n      href: '#',\n      text: 'Item 7',\n    },\n    {\n      href: '#',\n      text: 'Item 8',\n    },\n    {\n      href: '#',\n      text: 'Item 9',\n    },\n  ]\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item href=\"#\" aria-current=\"page\">\n            Item 1\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 2</NavList.Item>\n          <NavList.Item href=\"#\">Item 3</NavList.Item>\n          <NavList.GroupExpand label=\"Show more\" items={items} />\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-group",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Group title=\"Group 1\">\n          <NavList.Item aria-current=\"true\" href=\"#\">\n            Item 1A\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 1B</NavList.Item>\n          <NavList.Item href=\"#\">Item 1C</NavList.Item>\n        </NavList.Group>\n        <NavList.Group title=\"Group 2\">\n          <NavList.Item href=\"#\">Item 2A</NavList.Item>\n          <NavList.Item href=\"#\">Item 2B</NavList.Item>\n          <NavList.Item href=\"#\">Item 2C</NavList.Item>\n        </NavList.Group>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-group-expand",
+          "code": "() => {\n  const items1 = [\n    {\n      href: '#',\n      text: 'Item 1D',\n    },\n    {\n      href: '#',\n      text: 'Item 1E',\n      trailingAction: {\n        label: 'Some action',\n        icon: ArrowRightIcon,\n      },\n    },\n  ]\n  const items2 = [\n    {\n      href: '#',\n      text: 'Item 2D',\n      trailingVisual: BookIcon,\n    },\n    {\n      href: '#',\n      text: 'Item 2E',\n      trailingVisual: FileDirectoryIcon,\n    },\n  ]\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Group title=\"Group 1\">\n            <NavList.Item aria-current=\"true\" href=\"#\">\n              Item 1A\n            </NavList.Item>\n            <NavList.Item href=\"#\">Item 1B</NavList.Item>\n            <NavList.Item href=\"#\">Item 1C</NavList.Item>\n            <NavList.GroupExpand label=\"More\" items={items1} />\n          </NavList.Group>\n          <NavList.Group title=\"Group 2\">\n            <NavList.Item href=\"#\">Item 2A</NavList.Item>\n            <NavList.Item href=\"#\">Item 2B</NavList.Item>\n            <NavList.Item href=\"#\">Item 2C</NavList.Item>\n            <NavList.GroupExpand label=\"Show\" items={items2} />\n          </NavList.Group>\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-group-heading-links",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Group>\n          <NavList.GroupHeading>\n            <a href=\"#group-1\">Group 1</a>\n          </NavList.GroupHeading>\n          <NavList.Item aria-current=\"true\" href=\"#\">\n            Item 1A\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 1B</NavList.Item>\n          <NavList.Item href=\"#\">Item 1C</NavList.Item>\n        </NavList.Group>\n        <NavList.Group>\n          <NavList.GroupHeading>\n            <a href=\"#group-2\">Group 2</a>\n          </NavList.GroupHeading>\n          <NavList.Item href=\"#\">Item 2A</NavList.Item>\n          <NavList.Item href=\"#\">Item 2B</NavList.Item>\n          <NavList.Item href=\"#\">Item 2C</NavList.Item>\n        </NavList.Group>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-inactive-items",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item href=\"#\" inactiveText=\"Unavailable due to an outage\">\n          Item 1\n        </NavList.Item>\n        <NavList.Item>\n          Item 2\n          <NavList.SubNav>\n            <NavList.Item href=\"#\" aria-current=\"page\">\n              Sub item 1\n            </NavList.Item>\n            <NavList.Item href=\"#\" inactiveText=\"Unavailable due to an outage\">\n              Sub item 2\n            </NavList.Item>\n          </NavList.SubNav>\n        </NavList.Item>\n        <NavList.Item href=\"#\">Item 3</NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-nested-sub-items",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item defaultOpen={true} href=\"#\">\n          Item 1\n          <NavList.SubNav>\n            <NavList.Item href=\"#\">Sub item 1</NavList.Item>\n          </NavList.SubNav>\n        </NavList.Item>\n        <NavList.Item href=\"#\">\n          Item 2{/* NOTE: Don't nest SubNavs. For testing purposes only */}\n          <NavList.SubNav>\n            <NavList.Item href=\"#\">\n              Sub item 1\n              <NavList.SubNav>\n                <NavList.Item href=\"#\">\n                  Sub item 1.1\n                  <NavList.SubNav>\n                    <NavList.Item href=\"#\">Sub item 1.1.1</NavList.Item>\n                    <NavList.Item href=\"#\">\n                      Sub item 1.1.2\n                      <NavList.SubNav>\n                        <NavList.Item href=\"#\">Sub item 1.1.2.1</NavList.Item>\n                        <NavList.Item href=\"#\" aria-current=\"page\">\n                          Sub item 1.1.2.2\n                        </NavList.Item>\n                      </NavList.SubNav>\n                    </NavList.Item>\n                  </NavList.SubNav>\n                </NavList.Item>\n                <NavList.Item href=\"#\">Sub item 1.2</NavList.Item>\n              </NavList.SubNav>\n            </NavList.Item>\n            <NavList.Item href=\"#\">Sub item 2</NavList.Item>\n          </NavList.SubNav>\n        </NavList.Item>\n        <NavList.Item href=\"#\">Item 3</NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-next-js-link",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NextJSLikeLink href=\"#\">\n          <NavList.Item aria-current=\"page\">Item 1</NavList.Item>\n        </NextJSLikeLink>\n        <NextJSLikeLink href=\"#\">\n          <NavList.Item>Item 2</NavList.Item>\n        </NextJSLikeLink>\n        <NextJSLikeLink href=\"#\">\n          <NavList.Item>Item 3</NavList.Item>\n        </NextJSLikeLink>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-react-router-link",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item as={ReactRouterLikeLink} to=\"#\" aria-current=\"page\">\n          Item 1\n        </NavList.Item>\n        <NavList.Item as={ReactRouterLikeLink} to=\"#\">\n          Item 2\n        </NavList.Item>\n        <NavList.Item as={ReactRouterLikeLink} to=\"#\">\n          Item 3\n        </NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-reloads",
+          "code": "() => {\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n  const location = window.location\n  const storyId = new URLSearchParams(location.search).get('id')\n  const urlBase = `${location.origin + location.pathname}?id=${storyId}`\n  const itemId = new URLSearchParams(location.search).get('itemId')\n  return (\n    <>\n      <PageLayout>\n        <PageLayout.Pane position=\"start\">\n          <NavList>\n            <NavList.Item\n              href={`${urlBase}&itemId=1`}\n              aria-current={itemId === '1' ? 'page' : 'false'}\n            >\n              Item 1\n            </NavList.Item>\n            <NavList.Item>\n              Item 2\n              <NavList.SubNav>\n                <NavList.Item\n                  href={`${urlBase}&itemId=2.1`}\n                  aria-current={itemId === '2.1' ? 'page' : 'false'}\n                >\n                  Sub item 2.1\n                </NavList.Item>\n                <NavList.Item\n                  href={`${urlBase}&itemId=2.2`}\n                  aria-current={itemId === '2.2' ? 'page' : 'false'}\n                >\n                  Sub item 2.2\n                </NavList.Item>\n              </NavList.SubNav>\n            </NavList.Item>\n            <NavList.Item>\n              Item 3\n              <NavList.SubNav>\n                <NavList.Item\n                  href={`${urlBase}&itemId=3.1`}\n                  aria-current={itemId === '3.1' ? 'page' : 'false'}\n                >\n                  Sub item 3.1\n                </NavList.Item>\n                <NavList.Item\n                  href={`${urlBase}&itemId=3.2`}\n                  aria-current={itemId === '3.2' ? 'page' : 'false'}\n                >\n                  Sub item 3.2\n                </NavList.Item>\n              </NavList.SubNav>\n            </NavList.Item>\n          </NavList>\n        </PageLayout.Pane>\n        <PageLayout.Content></PageLayout.Content>\n      </PageLayout>\n    </>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-sub-items",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item href=\"#\">Item 1</NavList.Item>\n        <NavList.Item>\n          Item 2\n          <NavList.SubNav>\n            <NavList.Item href=\"#\" aria-current=\"page\">\n              Sub item 1\n            </NavList.Item>\n            <NavList.Item href=\"#\">Sub item 2</NavList.Item>\n          </NavList.SubNav>\n        </NavList.Item>\n        <NavList.Item href=\"#\">Item 3</NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-trailing-action",
+          "code": "() => {\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item>\n            <NavList.LeadingVisual>\n              <FileDirectoryIcon />\n            </NavList.LeadingVisual>\n            Item 1\n            <NavList.TrailingAction\n              label=\"Expand sidebar\"\n              icon={ArrowLeftIcon}\n            />\n          </NavList.Item>\n          <NavList.Item>\n            Item 2\n            <NavList.TrailingAction\n              as=\"a\"\n              href=\"#\"\n              label=\"Some action\"\n              icon={ArrowRightIcon}\n            />\n          </NavList.Item>\n        </NavList>\n      </PageLayout.Pane>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-trailing-action-in-sub-item",
+          "code": "() => {\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item>\n            <NavList.LeadingVisual>\n              <FileDirectoryIcon />\n            </NavList.LeadingVisual>\n            Item 1\n            <NavList.TrailingAction\n              label=\"Expand sidebar\"\n              icon={ArrowLeftIcon}\n            />\n          </NavList.Item>\n          <NavList.Item>\n            Item 2\n            <NavList.TrailingAction\n              as=\"a\"\n              href=\"#\"\n              label=\"Some action\"\n              icon={ArrowRightIcon}\n            />\n          </NavList.Item>\n          <NavList.Item>\n            Item 3\n            <NavList.SubNav>\n              <NavList.Item href=\"#\">\n                Sub item 1\n                <NavList.TrailingAction\n                  label=\"Another action\"\n                  icon={BookIcon}\n                />\n              </NavList.Item>\n            </NavList.SubNav>\n          </NavList.Item>\n        </NavList>\n      </PageLayout.Pane>\n    </PageLayout>\n  )\n}"
+        }
+      ],
       "importPath": "@primer/react",
       "props": [
         {
@@ -4802,11 +4851,6 @@
           "type": "| 'none' | 'condensed' | 'normal'",
           "defaultValue": "'normal'",
           "description": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -4849,11 +4893,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the header is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4872,6 +4911,12 @@
               "description": "An id to an element which uniquely labels the rendered main landmark",
               "defaultValue": ""
             },
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "'main'",
+              "description": "Change the root node to another HTML element or custom component."
+            },
             {
               "name": "width",
               "type": "| 'full' | 'medium' | 'large' | 'xlarge'",
@@ -4889,11 +4934,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4977,11 +5017,6 @@
               "description": "Which side of the page the pane should be on. Can be changed for different viewport widths.",
               "defaultValue": ""
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLDivElement>"
@@ -5027,11 +5062,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the footer is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5180,11 +5210,6 @@
           "type": "boolean",
           "defaultValue": "false",
           "description": "Set to true to render the popover using relative positioning."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -5197,11 +5222,6 @@
               "defaultValue": "div",
               "description": "Sets the underlying HTML tag for the component"
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "width",
               "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'auto'",
@@ -5343,11 +5363,6 @@
           "type": "string",
           "defaultValue": "'bg.successInverse'",
           "description": "Set the progress bar color"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -5371,11 +5386,6 @@
               "type": "string | number",
               "description": "Used to set the size of the green bar",
               "defaultValue": "0"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5528,11 +5538,6 @@
           "type": "boolean",
           "defaultValue": "false",
           "description": "If true, the user must make a selection before the owning form can be submitted"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -5555,11 +5560,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The caption content"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5578,11 +5578,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Changes the visual style to match the validation status"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -6548,6 +6543,12 @@
               "description": "An id to an element which uniquely labels the rendered main landmark",
               "defaultValue": ""
             },
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "'main'",
+              "description": "Change the root node to another HTML element or custom component."
+            },
             {
               "name": "width",
               "type": "| 'full' | 'medium' | 'large' | 'xlarge'",
@@ -6924,11 +6925,6 @@
           "name": "aria-label",
           "type": "string",
           "description": "Used to set the `aria-label` on the top level `<nav>` element."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -6952,11 +6948,6 @@
               "name": "to",
               "type": "string | Partial<Path>",
               "description": "Used when the item is rendered using a component like React Router's `Link`. The path to navigate to."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -7219,11 +7210,6 @@
           "deprecated": true,
           "description": "(Use leadingVisual or trailingVisual) An Octicon React component. To be used inside of input. Positioned on the left edge."
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLInputElement>"
@@ -7266,11 +7252,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"button\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -7546,11 +7527,6 @@
           "name": "clipSidebar",
           "type": "boolean",
           "description": "Hides the sidebar above the first Timeline.Item and below the last Timeline.Item."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -7561,43 +7537,20 @@
               "name": "condensed",
               "type": "boolean",
               "description": "Reduces vertical padding and removes background from an item's badge."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
         {
           "name": "Timeline.Badge",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
+          "props": []
         },
         {
           "name": "Timeline.Body",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
+          "props": []
         },
         {
           "name": "Timeline.Break",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
+          "props": []
         }
       ]
     },
@@ -8302,11 +8255,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "'div'"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.0.0-rc.7",
+  "version": "38.0.0-rc.9",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -118,11 +118,11 @@
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.4",
     "@rollup/plugin-virtual": "3.0.2",
-    "@storybook/addon-a11y": "^9.1.8",
-    "@storybook/addon-docs": "^9.1.8",
-    "@storybook/addon-links": "^9.1.8",
+    "@storybook/addon-a11y": "^9.1.10",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-links": "^9.1.10",
     "@storybook/icons": "^1.6.0",
-    "@storybook/react-vite": "^9.1.8",
+    "@storybook/react-vite": "^9.1.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -182,7 +182,7 @@
     "rollup-plugin-import-css": "^0.0.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "6.0.3",
-    "storybook": "^9.1.8",
+    "storybook": "^9.1.10",
     "styled-components": "5.3.11",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",

package/dist/ActionBar/ActionBar-e6a5d54e.css

@@ -1,2 +0,0 @@
-.prc-ActionBar-List-Z4LzW{gap:var(--base-size-8,.5rem);list-style:none;margin-bottom:-1px;min-width:0;position:relative;white-space:nowrap}.prc-ActionBar-List-Z4LzW,.prc-ActionBar-Nav-hc-9G{align-items:center;display:flex}.prc-ActionBar-Nav-hc-9G{justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-hc-9G:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-CcBO8:before{background:var(--borderColor-muted,var(--color-border-muted));content:"";display:block;height:var(--base-size-20,1.25rem);width:var(--borderWidth-thin,.0625rem)}
-/*# sourceMappingURL=ActionBar-e6a5d54e.css.map */

package/dist/ActionBar/ActionBar-e6a5d54e.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionBar/ActionBar.module.css"],"names":[],"mappings":"AAAA,0BAWE,4BAAuB,CAFvB,eAAgB,CAFhB,kBAAmB,CAJnB,WAAY,CAFZ,iBAAkB,CAOlB,kBAIF,CAEA,mDAJE,kBAAmB,CARnB,YAqBF,CATA,yBAGE,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6DAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAD3B,sCAKF","file":"ActionBar-e6a5d54e.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--base-size-8);\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n  }\n}\n"]}

package/dist/ActionMenu/ActionMenu-5fe972e2.css

@@ -1,2 +0,0 @@
-.prc-ActionMenu-ActionMenuContainer-XdFHv:where([data-variant=fullscreen]){padding-top:var(--base-size-36,2.25rem)}
-/*# sourceMappingURL=ActionMenu-5fe972e2.css.map */

package/dist/ActionMenu/ActionMenu-5fe972e2.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionMenu/ActionMenu.module.css"],"names":[],"mappings":"AACE,2EACE,uCACF","file":"ActionMenu-5fe972e2.css","sourcesContent":[".ActionMenuContainer {\n  &:where([data-variant='fullscreen']) {\n    padding-top: var(--base-size-36);\n  }\n}\n"]}

package/dist/Banner/Banner-459c533a.css

@@ -1,2 +0,0 @@
-.prc-Banner-Banner-IR8eJ{align-items:start;background-color:var(--banner-bgColor);border:var(--borderWidth-thin,.0625rem) solid var(--banner-borderColor);border-radius:var(--borderRadius-medium,.375rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding:var(--base-size-8,.5rem)}@supports (container-type:inline-size){.prc-Banner-Banner-IR8eJ{container:banner/inline-size}}.prc-Banner-Banner-IR8eJ[data-layout=compact]{padding:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-variant=critical]{--banner-bgColor:var(--bgColor-danger-muted,var(--color-danger-subtle));--banner-borderColor:var(--borderColor-danger-muted,var(--color-danger-muted));--banner-icon-fgColor:var(--fgColor-danger,var(--color-danger-fg))}.prc-Banner-Banner-IR8eJ[data-variant=info]{--banner-bgColor:var(--bgColor-accent-muted,var(--color-accent-subtle));--banner-borderColor:var(--borderColor-accent-muted,var(--color-accent-muted));--banner-icon-fgColor:var(--fgColor-accent,var(--color-accent-fg))}.prc-Banner-Banner-IR8eJ[data-variant=success]{--banner-bgColor:var(--bgColor-success-muted,var(--color-success-subtle));--banner-borderColor:var(--borderColor-success-muted,var(--color-success-muted));--banner-icon-fgColor:var(--fgColor-success,var(--color-success-fg))}.prc-Banner-Banner-IR8eJ[data-variant=upsell]{--banner-bgColor:var(--bgColor-upsell-muted,#fbefff);--banner-borderColor:var(--borderColor-upsell-muted,#c297ff66);--banner-icon-fgColor:var(--fgColor-upsell,#8250df)}.prc-Banner-Banner-IR8eJ[data-variant=warning]{--banner-bgColor:var(--bgColor-attention-muted,var(--color-attention-subtle));--banner-borderColor:var(--borderColor-attention-muted,var(--color-attention-muted));--banner-icon-fgColor:var(--fgColor-attention,var(--color-attention-fg))}.prc-Banner-BannerContainer-lbx3d{align-items:start;column-gap:var(--base-size-4,.25rem);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ :where(.prc-Banner-BannerContainer-lbx3d){display:flex;flex-wrap:wrap;justify-content:space-between}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden=""]) .prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto;grid-template-rows:auto}.prc-Banner-BannerContent-zTITK{display:grid;grid-column-start:1;margin-block:var(--base-size-8,.5rem);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerContent-zTITK{margin-block:var(--base-size-6,.375rem)}@media screen and (min-width:544px){.prc-Banner-BannerContent-zTITK{flex:1 1 0%}}.prc-Banner-BannerTitle-TcuJl{font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-Banner-BannerIcon-WuOyf{display:grid;padding:var(--base-size-8,.5rem);place-items:center}.prc-Banner-BannerIcon-WuOyf svg{color:var(--banner-icon-fgColor);height:var(--base-size-20,1.25rem);fill:var(--banner-icon-fgColor)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerIcon-WuOyf svg{height:var(--base-size-16,1rem)}.prc-Banner-BannerDismiss-uBZVm{display:grid;margin-inline-start:var(--base-size-4,.25rem);padding:var(--base-size-8,.5rem);place-items:center}:where(.prc-Banner-Banner-IR8eJ):has(.prc-Banner-BannerActions-XCfHL) .prc-Banner-BannerDismiss-uBZVm{margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerDismiss-uBZVm svg{color:var(--banner-icon-fgColor)}.prc-Banner-BannerActionsContainer-ukGMH{align-items:center;column-gap:var(--base-size-12,.75rem);display:flex;margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:none}@media screen and (min-width:48rem){.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:flex}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=leading]){display:none}}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]{display:none}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=leading]{display:flex}@container banner (max-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid}.prc-Banner-BannerContainer-lbx3d:has(.prc-Banner-BannerActionsContainer-ukGMH){grid-template-rows:auto auto}.prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:none}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:flex}}@container banner (min-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto auto}:where(.prc-Banner-Banner-IR8eJ):not([data-dismissible]) :where(.prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]) :where([data-variant=link]:only-child){padding-inline:0 var(--base-size-12,.75rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:flex;min-height:var(--base-size-32,2rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:none}}
-/*# sourceMappingURL=Banner-459c533a.css.map */

package/dist/Banner/Banner-459c533a.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Banner/Banner.module.css"],"names":[],"mappings":"AAAA,yBASE,iBAAkB,CALlB,sCAAuC,CAEvC,uEAA+D,CAC/D,gDAAyC,CANzC,YAAa,CAOb,6CAA+C,CAN/C,gCA8CF,CArCE,uCAXF,yBAYI,4BAoCJ,CAnCE,CAEA,8CACE,iCACF,CAEA,gDACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,4CACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,+CACE,yEAA8C,CAC9C,gFAAsD,CACtD,oEACF,CAEA,8CACE,oDAA6C,CAC7C,8DAAqD,CACrD,mDACF,CAEA,+CACE,6EAAgD,CAChD,oFAAwD,CACxD,wEACF,CAKF,kCAEE,iBAAkB,CAGlB,oCAA8B,CAJ9B,8CAAuC,CAEvC,qDAA+C,CAC/C,iCAEF,CAEA,mEACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,yGACE,YAAa,CACb,0BAA2B,CAC3B,uBACF,CAIA,gCACE,YAAa,CAEb,mBAAoB,CACpB,qCAAgC,CAFhC,iCAGF,CAEA,uHACE,uCACF,CAEA,oCACE,gCACE,WACF,CACF,CAEA,8BAEE,iBAAkB,CAClB,gDAA6C,CAF7C,QAGF,CAIA,6BACE,YAAa,CAEb,gCAA2B,CAD3B,kBAEF,CAEA,iCAIE,gCAAiC,CAFjC,kCAA2B,CAI3B,+BACF,CAGA,wHACE,+BACF,CAIA,gCACE,YAAa,CAGb,6CAAuC,CADvC,gCAA2B,CAD3B,kBAGF,CAEA,sGACE,uCACF,CAEA,oCAEE,gCACF,CAIA,yCAGE,kBAAmB,CADnB,qCAA+B,CAD/B,YAAa,CAGb,uCACF,CAEA,uEACE,YACF,CAEA,oCACE,uEACE,YACF,CAEA,sEACE,YACF,CACF,CAEA,oGACE,2CACF,CAGA,2IACE,YACF,CAGA,0IACE,YACF,CAIA,qCACE,kCACE,YACF,CAEA,gFACE,4BACF,CAEA,gCACE,2CACF,CAEA,+DACE,YACF,CAEA,8DACE,YACF,CACF,CAEA,qCACE,kCACE,YAAa,CACb,+BACF,CAEA,+KAGE,2CACF,CAEA,+DACE,YAAa,CACb,mCACF,CAEA,8DACE,YACF,CACF","file":"Banner-459c533a.css","sourcesContent":[".Banner {\n  display: grid;\n  padding: var(--base-size-8);\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--banner-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border: var(--borderWidth-thin) solid var(--banner-borderColor);\n  border-radius: var(--borderRadius-medium);\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: start;\n\n  @supports (container-type: inline-size) {\n    container: banner / inline-size;\n  }\n\n  &[data-layout='compact'] {\n    padding: var(--base-size-4);\n  }\n\n  &[data-variant='critical'] {\n    --banner-bgColor: var(--bgColor-danger-muted);\n    --banner-borderColor: var(--borderColor-danger-muted);\n    --banner-icon-fgColor: var(--fgColor-danger);\n  }\n\n  &[data-variant='info'] {\n    --banner-bgColor: var(--bgColor-accent-muted);\n    --banner-borderColor: var(--borderColor-accent-muted);\n    --banner-icon-fgColor: var(--fgColor-accent);\n  }\n\n  &[data-variant='success'] {\n    --banner-bgColor: var(--bgColor-success-muted);\n    --banner-borderColor: var(--borderColor-success-muted);\n    --banner-icon-fgColor: var(--fgColor-success);\n  }\n\n  &[data-variant='upsell'] {\n    --banner-bgColor: var(--bgColor-upsell-muted);\n    --banner-borderColor: var(--borderColor-upsell-muted);\n    --banner-icon-fgColor: var(--fgColor-upsell);\n  }\n\n  &[data-variant='warning'] {\n    --banner-bgColor: var(--bgColor-attention-muted);\n    --banner-borderColor: var(--borderColor-attention-muted);\n    --banner-icon-fgColor: var(--fgColor-attention);\n  }\n}\n\n/* BannerContainer -------------------------------------------------------- */\n\n.BannerContainer {\n  font-size: var(--text-body-size-medium);\n  align-items: start;\n  line-height: var(--text-body-lineHeight-medium);\n  row-gap: var(--base-size-4);\n  column-gap: var(--base-size-4);\n}\n\n.Banner :where(.BannerContainer) {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden='']) .BannerContainer {\n  display: grid;\n  grid-template-columns: auto;\n  grid-template-rows: auto;\n}\n\n/* BannerContent ---------------------------------------------------------- */\n\n.BannerContent {\n  display: grid;\n  row-gap: var(--base-size-4);\n  grid-column-start: 1;\n  margin-block: var(--base-size-8);\n}\n\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent {\n  margin-block: var(--base-size-6);\n}\n\n@media screen and (min-width: 544px) {\n  .BannerContent {\n    flex: 1 1 0%;\n  }\n}\n\n.BannerTitle {\n  margin: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n}\n\n/* BannerIcon ------------------------------------------------------------- */\n\n.BannerIcon {\n  display: grid;\n  place-items: center;\n  padding: var(--base-size-8);\n}\n\n.BannerIcon svg {\n  /* 20px is the line box height of the trailing action buttons */\n  height: var(--base-size-20);\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--banner-icon-fgColor);\n  /* stylelint-disable-next-line primer/colors */\n  fill: var(--banner-icon-fgColor);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg {\n  height: var(--base-size-16);\n}\n\n/* BannerDismiss ---------------------------------------------------------- */\n\n.BannerDismiss {\n  display: grid;\n  place-items: center;\n  padding: var(--base-size-8);\n  margin-inline-start: var(--base-size-4);\n}\n\n:where(.Banner):has(.BannerActions) .BannerDismiss {\n  margin-block: var(--base-size-2);\n}\n\n.BannerDismiss svg {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--banner-icon-fgColor);\n}\n\n/* BannerActions ---------------------------------------------------------- */\n\n.BannerActionsContainer {\n  display: flex;\n  column-gap: var(--base-size-12);\n  align-items: center;\n  margin-block: var(--base-size-2);\n}\n\n.BannerActions :where([data-primary-action='trailing']) {\n  display: none;\n}\n\n@media screen and (--viewportRange-regular) {\n  .BannerActions :where([data-primary-action='trailing']) {\n    display: flex;\n  }\n\n  .BannerActions :where([data-primary-action='leading']) {\n    display: none;\n  }\n}\n\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActions {\n  margin-block-end: var(--base-size-6);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='trailing'] {\n  display: none;\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='leading'] {\n  display: flex;\n}\n\n/* Layout ------------------------------------------------------------------- */\n\n@container banner (max-width: 500px) {\n  .BannerContainer {\n    display: grid;\n  }\n\n  .BannerContainer:has(.BannerActionsContainer) {\n    grid-template-rows: auto auto;\n  }\n\n  .BannerActions {\n    margin-block-end: var(--base-size-6);\n  }\n\n  .BannerActions [data-primary-action='trailing'] {\n    display: none;\n  }\n\n  .BannerActions [data-primary-action='leading'] {\n    display: flex;\n  }\n}\n\n@container banner (min-width: 500px) {\n  .BannerContainer {\n    display: grid;\n    grid-template-columns: auto auto;\n  }\n\n  :where(.Banner):not([data-dismissible])\n    :where(.BannerActionsContainer[data-primary-action='trailing'])\n    :where([data-variant='link']:only-child) {\n    padding-inline: 0 var(--base-size-12);\n  }\n\n  .BannerActions [data-primary-action='trailing'] {\n    display: flex;\n    min-height: var(--base-size-32, 2rem);\n  }\n\n  .BannerActions [data-primary-action='leading'] {\n    display: none;\n  }\n}\n"]}

package/dist/Box/Box.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-import { space, color, typography, layout, flexbox, grid, background, border, position, shadow } from 'styled-system';
-import sx from '../sx.js';
-
-/**
- * @deprecated The Box component is deprecated. Replace with a `div` or
- * appropriate HTML element instead, with CSS modules for styling.
- * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
- */
-const Box = styled.div.withConfig({
-  displayName: "Box",
-  componentId: "sc-g0xbh4-0"
-})(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
-
-export { Box as default };

package/dist/Breadcrumbs/Breadcrumbs-7cbdf03c.css

@@ -1,2 +0,0 @@
-.prc-Breadcrumbs-BreadcrumbsBase-6gqOz{display:flex;justify-content:space-between;width:100%}.prc-Breadcrumbs-BreadcrumbsList-K7eeK{margin-bottom:0;margin-top:0;padding-left:0}:is([data-overflow=menu],[data-overflow=menu-with-root]) .prc-Breadcrumbs-BreadcrumbsList-K7eeK{display:flex;flex-direction:row;white-space:nowrap}.prc-Breadcrumbs-ItemSeparator-nYObp{align-self:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap}.prc-Breadcrumbs-ItemWrapper-Mfwuj{list-style:none}.prc-Breadcrumbs-ItemWrapper-Mfwuj,.prc-Breadcrumbs-ItemWrapper-Mfwuj:after{display:inline-block;font-size:var(--text-body-size-medium,.875rem)}.prc-Breadcrumbs-ItemWrapper-Mfwuj:after{border-right:.1em solid var(--fgColor-muted,var(--color-fg-muted));content:"";height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.prc-Breadcrumbs-ItemWrapper-Mfwuj:first-child{margin-left:0}.prc-Breadcrumbs-ItemWrapper-Mfwuj:last-child:after{content:none}.prc-Breadcrumbs-Item-7BKO-{display:inline-block;font-size:var(--text-body-size-medium,.875rem)}.prc-Breadcrumbs-Item-7BKO-:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:1px}[data-variant=normal] .prc-Breadcrumbs-Item-7BKO-{color:var(--fgColor-link,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none}:is([data-variant=normal] .prc-Breadcrumbs-Item-7BKO-):not([aria-current]):hover{-webkit-text-decoration:underline;text-decoration:underline}:is([data-variant=normal] .prc-Breadcrumbs-Item-7BKO-):focus-visible{-webkit-text-decoration:none;text-decoration:none}[aria-current]:is([data-variant=normal] .prc-Breadcrumbs-Item-7BKO-){color:var(--fgColor-default,var(--color-fg-default))}[data-variant=spacious] .prc-Breadcrumbs-Item-7BKO-{border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-6,.375rem);-webkit-text-decoration:none;text-decoration:none}:is([data-variant=spacious] .prc-Breadcrumbs-Item-7BKO-):hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));-webkit-text-decoration:none;text-decoration:none}[aria-current]:is([data-variant=spacious] .prc-Breadcrumbs-Item-7BKO-){font-weight:var(--base-text-weight-semibold,600)}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr{align-items:center;display:inline-grid;flex:0 99999 auto;grid-auto-flow:column;list-style:none;min-width:auto;white-space:nowrap}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr:has(.prc-Breadcrumbs-MenuOverlay-aCOyl){white-space:normal}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr:first-child{margin-left:0}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr:last-child .prc-Breadcrumbs-ItemSeparator-nYObp{display:none}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuDetails-TXUai{display:inline-block;position:relative}:is(.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuDetails-TXUai) summary{cursor:pointer;list-style:none}:is(:is(.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuDetails-TXUai) summary)::-webkit-details-marker{display:none}.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuOverlay-aCOyl{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));max-height:100vh;max-width:var(--overlay-width-small,20rem);min-width:var(--overlay-width-xsmall,12rem);overflow:hidden;position:absolute;top:calc(var(--overlay-offset,.25rem) + var(--control-small-size,1.75rem));z-index:1}@media (prefers-reduced-motion:no-preference){.prc-Breadcrumbs-BreadcrumbsItem-FHLFr .prc-Breadcrumbs-MenuOverlay-aCOyl{animation:prc-Breadcrumbs-overlay-appear-Ct2Xv .2s cubic-bezier(.33,1,.68,1)}}
-/*# sourceMappingURL=Breadcrumbs-7cbdf03c.css.map */

package/dist/Breadcrumbs/Breadcrumbs-7cbdf03c.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Breadcrumbs/Breadcrumbs.module.css","../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"AAAA,uCACE,YAAa,CACb,6BAA8B,CAC9B,UACF,CAEA,uCAGE,eAAgB,CADhB,YAAa,CADb,cAGF,CAIE,gGAEE,YAAa,CACb,kBAAmB,CAFnB,kBAGF,CAGF,qCAGE,iBAAkB,CAFlB,gDAA2B,CAC3B,YAAa,CAEb,sBAAuB,CAEvB,wBAAiB,CAAjB,gBAAiB,CADjB,kBAEF,CAEA,mCAGE,eAuBF,CArBE,4EAJA,oBAAqB,CACrB,8CAaA,CAVA,yCAQE,kEAA8C,CAF9C,UAAW,CAJX,WAAa,CAEb,aAAe,CAKf,2CACF,CAEA,+CACE,aACF,CAGE,oDACE,YACF,CAIJ,4BACE,oBAAqB,CACrB,8CAKF,CAHE,0CC3DA,eAAgB,CAFhB,kEAAgC,CAChC,kBD8DA,CAIA,kDACE,gDAA0B,CAC1B,4BAAqB,CAArB,oBAeF,CAZI,iFACE,iCAA0B,CAA1B,yBACF,CAGF,qEACE,4BAAqB,CAArB,oBACF,CAEA,qEACE,oDACF,CAKF,oDAKE,gDAAyC,CAJzC,oDAA6B,CAG7B,uCAAiC,CADjC,yCAAkC,CADlC,4BAAqB,CAArB,oBAaF,CARE,+DACE,kGAAoD,CACpD,4BAAqB,CAArB,oBACF,CAEA,uEACE,gDACF,CAIJ,uCAGE,kBAAmB,CAFnB,mBAAoB,CAGpB,iBAAkB,CAFlB,qBAAsB,CAKtB,eAAgB,CAFhB,cAAe,CACf,kBAiDF,CA7CE,+EACE,kBACF,CAEA,mDACE,aACF,CAGE,uFACE,YACF,CAGF,0EAEE,oBAAqB,CADrB,iBAWF,CARE,uFAEE,cAAe,CADf,eAMF,CAHE,oHACE,YACF,CAIJ,0EAKE,mEAAwC,CADxC,8CAAwC,CADxC,mEAAwC,CAIxC,gBAAiB,CACjB,0CAAqC,CAFrC,2CAAsC,CAGtC,eAAgB,CARhB,iBAAkB,CAUlB,0EAA4D,CAT5D,SAcF,CAHE,8CAbF,0EAcI,4EAEJ,CADE","file":"Breadcrumbs-7cbdf03c.css","sourcesContent":[".BreadcrumbsBase {\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.BreadcrumbsList {\n  padding-left: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n[data-overflow='menu'],\n[data-overflow='menu-with-root'] {\n  & .BreadcrumbsList {\n    white-space: nowrap;\n    display: flex;\n    flex-direction: row;\n  }\n}\n\n.ItemSeparator {\n  color: var(--fgColor-muted);\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  white-space: nowrap;\n  user-select: none;\n}\n\n.ItemWrapper {\n  display: inline-block;\n  font-size: var(--text-body-size-medium);\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.5em;\n    font-size: var(--text-body-size-medium);\n    content: '';\n    /* stylelint-disable-next-line primer/borders, primer/colors */\n    border-right: 0.1em solid var(--fgColor-muted);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n\n  &:last-child {\n    &::after {\n      content: none;\n    }\n  }\n}\n\n.Item {\n  display: inline-block;\n  font-size: var(--text-body-size-medium);\n\n  &:focus-visible {\n    @mixin focusOutline 1px;\n  }\n}\n\n[data-variant='normal'] {\n  & .Item {\n    color: var(--fgColor-link);\n    text-decoration: none;\n\n    &:not([aria-current]) {\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    &:focus-visible {\n      text-decoration: none;\n    }\n\n    &[aria-current] {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n[data-variant='spacious'] {\n  & .Item {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    padding-inline: var(--base-size-6);\n    padding-block: var(--base-size-4);\n    border-radius: var(--borderRadius-medium);\n\n    &:hover {\n      background: var(--control-transparent-bgColor-hover);\n      text-decoration: none;\n    }\n\n    &[aria-current] {\n      font-weight: var(--base-text-weight-semibold);\n    }\n  }\n}\n\n.BreadcrumbsItem {\n  display: inline-grid;\n  grid-auto-flow: column;\n  align-items: center;\n  flex: 0 99999 auto;\n  min-width: auto;\n  white-space: nowrap;\n  list-style: none;\n\n  /* allow menu items to wrap line */\n  &:has(.MenuOverlay) {\n    white-space: normal;\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n\n  &:last-child {\n    .ItemSeparator {\n      display: none;\n    }\n  }\n\n  .MenuDetails {\n    position: relative;\n    display: inline-block;\n\n    & summary {\n      list-style: none;\n      cursor: pointer;\n\n      &::-webkit-details-marker {\n        display: none;\n      }\n    }\n  }\n\n  .MenuOverlay {\n    position: absolute;\n    z-index: 1;\n    box-shadow: var(--shadow-floating-small);\n    border-radius: var(--borderRadius-large);\n    background-color: var(--overlay-bgColor);\n    min-width: var(--overlay-width-xsmall);\n    max-height: 100vh;\n    max-width: var(--overlay-width-small);\n    overflow: hidden;\n    /* stylelint-disable-next-line primer/spacing */\n    top: calc(var(--overlay-offset) + var(--control-small-size));\n\n    @media (prefers-reduced-motion: no-preference) {\n      animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n    }\n  }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}