@primer/react 38.0.0-rc.8 → 38.0.0-rc.95d10bdfe

package/generated/components.json

@@ -101,6 +101,16 @@
         {
           "name": "ActionBar.Divider",
           "props": []
+        },
+        {
+          "name": "ActionBar.Group",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "defaultValue": ""
+            }
+          ]
         }
       ]
     },
@@ -1158,11 +1168,6 @@
           "required": false,
           "description": "URL of the avatar image.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1366,6 +1371,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": [
@@ -1518,53 +1528,6 @@
         }
       ]
     },
-    "box": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/Box",
-      "id": "box",
-      "name": "Box",
-      "status": "deprecated",
-      "a11yReviewed": "2025-01-08",
-      "stories": [
-        {
-          "id": "deprecated-components-box--default",
-          "code": "() => <Box>Default Box</Box>"
-        },
-        {
-          "id": "deprecated-components-box-features--border",
-          "code": "() => (\n  <Box\n    sx={{\n      borderWidth: 1,\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      p: 3,\n    }}\n  >\n    Box with border\n  </Box>\n)"
-        },
-        {
-          "id": "deprecated-components-box-features--border-bottom",
-          "code": "() => (\n  <Box\n    sx={{\n      borderBottomWidth: 1,\n      borderBottomStyle: 'solid',\n      borderColor: 'border.default',\n      p: 3,\n    }}\n  >\n    Box with bottom border\n  </Box>\n)"
-        },
-        {
-          "id": "deprecated-components-box-features--flexbox",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'flex',\n    }}\n  >\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      1\n    </Box>\n    <Box\n      sx={{\n        flexGrow: 1,\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      2\n    </Box>\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      3\n    </Box>\n  </Box>\n)"
-        },
-        {
-          "id": "deprecated-components-box-features--grid",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: '1fr 1fr',\n      gap: 3,\n    }}\n  >\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      1\n    </Box>\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      2\n    </Box>\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      3\n    </Box>\n  </Box>\n)"
-        }
-      ],
-      "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "ref",
-          "type": "React.RefObject<HTMLDivElement>"
-        },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"div\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
-      "subcomponents": []
-    },
     "branch_name": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/BranchName",
       "id": "branch_name",
@@ -1632,12 +1595,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": [
@@ -1677,11 +1634,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -3138,78 +3090,6 @@
         }
       ]
     },
-    "dialog": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/DialogV1",
-      "id": "dialog",
-      "docsId": "dialog",
-      "name": "Dialog",
-      "status": "deprecated",
-      "a11yReviewed": false,
-      "stories": [
-        {
-          "id": "components-dialog--default",
-          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const returnFocusRef = useRef(null)\n  return (\n    <div>\n      <div\n        style={{\n          marginBottom: 'var(--stack-gap-normal)',\n        }}\n      >\n        <Banner\n          title=\"This component is deprecated\"\n          description=\"We recommend using Dialog instead.\"\n          variant=\"warning\"\n        />\n      </div>\n      <Button\n        data-testid=\"trigger-button\"\n        ref={returnFocusRef}\n        onClick={() => setIsOpen(true)}\n      >\n        Show Dialog\n      </Button>\n      <Dialog\n        returnFocusRef={returnFocusRef}\n        isOpen={isOpen}\n        onDismiss={() => setIsOpen(false)}\n        aria-labelledby=\"header\"\n      >\n        <div data-testid=\"inner\">\n          <Dialog.Header id=\"header\">Title</Dialog.Header>\n          <div\n            style={{\n              padding: 'var(--stack-gap-normal)',\n            }}\n          >\n            <Text>Some content</Text>\n          </div>\n        </div>\n      </Dialog>\n    </div>\n  )\n}"
-        }
-      ],
-      "importPath": "@primer/react/deprecated",
-      "props": [
-        {
-          "name": "isOpen",
-          "type": "boolean",
-          "description": "Whether or not the dialog is open"
-        },
-        {
-          "name": "onDismiss",
-          "type": "() => void",
-          "description": "Function that will be called when the dialog is closed"
-        },
-        {
-          "name": "returnFocusRef",
-          "type": " React.RefObject<HTMLElement>",
-          "description": "The element to restore focus back to after the `Dialog` is closed"
-        },
-        {
-          "name": "initialFocusRef",
-          "type": " React.RefObject<HTMLElement>",
-          "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
-        },
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
-        },
-        {
-          "name": "narrow",
-          "type": "boolean"
-        },
-        {
-          "name": "wide",
-          "type": "boolean"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "Dialog.Header",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
-        }
-      ]
-    },
     "feature_flags": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/FeatureFlags",
       "id": "feature_flags",
@@ -4878,11 +4758,6 @@
           "type": "| 'none' | 'condensed' | 'normal'",
           "defaultValue": "'normal'",
           "description": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -4925,11 +4800,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the header is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4971,11 +4841,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5059,11 +4924,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>"
@@ -5109,11 +4969,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the footer is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5262,11 +5117,6 @@
           "type": "boolean",
           "defaultValue": "false",
           "description": "Set to true to render the popover using relative positioning."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -5279,11 +5129,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'",
@@ -5425,11 +5270,6 @@
           "type": "string",
           "defaultValue": "'bg.successInverse'",
           "description": "Set the progress bar color"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -5453,11 +5293,6 @@
               "type": "string | number",
               "description": "Used to set the size of the green bar",
               "defaultValue": "0"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5610,11 +5445,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": [
@@ -5637,11 +5467,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The caption content"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5660,11 +5485,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Changes the visual style to match the validation status"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5842,7 +5662,7 @@
         },
         {
           "id": "components-segmentedcontrol-features--with-icons",
-          "code": "() => (\n  <SegmentedControl aria-label=\"File view\">\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl aria-label=\"File view\">\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--controlled",
@@ -5850,23 +5670,23 @@
         },
         {
           "id": "components-segmentedcontrol-features--variant-narrow-hide-labels",
-          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    variant={{\n      narrow: 'hideLabels',\n      regular: 'default',\n      wide: 'default',\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    variant={{\n      narrow: 'hideLabels',\n      regular: 'default',\n      wide: 'default',\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--variant-narrow-action-menu",
-          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    variant={{\n      narrow: 'dropdown',\n      regular: 'default',\n      wide: 'default',\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    variant={{\n      narrow: 'dropdown',\n      regular: 'default',\n      wide: 'default',\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--fullwidth-narrow",
-          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    fullWidth={{\n      narrow: true,\n      regular: false,\n      wide: false,\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    fullWidth={{\n      narrow: true,\n      regular: false,\n      wide: false,\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--fullwidth-regular",
-          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    fullWidth={{\n      narrow: false,\n      regular: true,\n      wide: false,\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    fullWidth={{\n      narrow: false,\n      regular: true,\n      wide: false,\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--fullwidth-all",
-          "code": "() => (\n  <SegmentedControl aria-label=\"File view\" fullWidth>\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl aria-label=\"File view\" fullWidth>\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--icon-only",
@@ -5930,11 +5750,18 @@
         {
           "name": "SegmentedControl.Button",
           "props": [
+            {
+              "name": "leadingVisual",
+              "type": "Component",
+              "defaultValue": "",
+              "description": "The leading visual comes before item label"
+            },
             {
               "name": "leadingIcon",
+              "deprecated": true,
               "type": "Component",
               "defaultValue": "",
-              "description": "The leading icon comes before item label"
+              "description": "Deprecated: use `leadingVisual` instead. The leading icon comes before item label."
             },
             {
               "name": "selected",
@@ -7012,11 +6839,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": [
@@ -7040,11 +6862,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
             }
           ]
         }
@@ -7307,11 +7124,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>"
@@ -7354,11 +7166,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"button\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -7634,11 +7441,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": [
@@ -7649,43 +7451,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": []
         }
       ]
     },
@@ -8390,11 +8169,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "'div'"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -8510,6 +8284,67 @@
         }
       ]
     },
+    "dialog": {
+      "source": "https://github.com/primer/react/tree/main/packages/react/src/deprecated/DialogV1",
+      "id": "dialog",
+      "docsId": "dialog",
+      "name": "Dialog",
+      "status": "deprecated",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-dialog--default",
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const returnFocusRef = useRef(null)\n  return (\n    <div>\n      <div\n        style={{\n          marginBottom: 'var(--stack-gap-normal)',\n        }}\n      >\n        <Banner\n          title=\"This component is deprecated\"\n          description=\"We recommend using Dialog instead.\"\n          variant=\"warning\"\n        />\n      </div>\n      <Button\n        data-testid=\"trigger-button\"\n        ref={returnFocusRef}\n        onClick={() => setIsOpen(true)}\n      >\n        Show Dialog\n      </Button>\n      <Dialog\n        returnFocusRef={returnFocusRef}\n        isOpen={isOpen}\n        onDismiss={() => setIsOpen(false)}\n        aria-labelledby=\"header\"\n      >\n        <div data-testid=\"inner\">\n          <Dialog.Header id=\"header\">Title</Dialog.Header>\n          <div\n            style={{\n              padding: 'var(--stack-gap-normal)',\n            }}\n          >\n            <Text>Some content</Text>\n          </div>\n        </div>\n      </Dialog>\n    </div>\n  )\n}"
+        }
+      ],
+      "importPath": "@primer/react/deprecated",
+      "props": [
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Whether or not the dialog is open"
+        },
+        {
+          "name": "onDismiss",
+          "type": "() => void",
+          "description": "Function that will be called when the dialog is closed"
+        },
+        {
+          "name": "returnFocusRef",
+          "type": " React.RefObject<HTMLElement>",
+          "description": "The element to restore focus back to after the `Dialog` is closed"
+        },
+        {
+          "name": "initialFocusRef",
+          "type": " React.RefObject<HTMLElement>",
+          "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
+        },
+        {
+          "name": "narrow",
+          "type": "boolean"
+        },
+        {
+          "name": "wide",
+          "type": "boolean"
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "Dialog.Header",
+          "props": []
+        }
+      ]
+    },
     "filtered_search": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/deprecated/FilteredSearch",
       "id": "filtered_search",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.0.0-rc.8",
+  "version": "38.0.0-rc.95d10bdfe",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -79,12 +79,6 @@
     "@primer/live-region-element": "^0.7.1",
     "@primer/octicons-react": "^19.13.0",
     "@primer/primitives": "10.x || 11.x",
-    "@styled-system/css": "^5.1.5",
-    "@styled-system/props": "^5.1.5",
-    "@styled-system/theme-get": "^5.1.2",
-    "@types/styled-system": "^5.1.23",
-    "@types/styled-system__css": "^5.0.16",
-    "@types/styled-system__theme-get": "^5.0.1",
     "clsx": "^2.1.1",
     "color2k": "^2.0.3",
     "deepmerge": "^4.3.1",
@@ -94,8 +88,7 @@
     "lodash.isempty": "^4.4.0",
     "lodash.isobject": "^3.0.2",
     "react-compiler-runtime": "^19.1.0-rc.2",
-    "react-intersection-observer": "^9.16.0",
-    "styled-system": "^5.1.5"
+    "react-intersection-observer": "^9.16.0"
   },
   "devDependencies": {
     "@actions/core": "1.11.1",
@@ -137,7 +130,6 @@
     "@types/react-dom": "18.3.1",
     "@types/react-is": "18.3.1",
     "@types/react-test-renderer": "18.3.1",
-    "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.3.3",
     "afterframe": "^1.0.2",
     "ajv": "8.16.0",
@@ -148,7 +140,6 @@
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
     "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",
     "chalk": "^5.4.1",
@@ -183,7 +174,6 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "6.0.3",
     "storybook": "^9.1.10",
-    "styled-components": "5.3.11",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.20.3",
@@ -199,11 +189,9 @@
     "@types/react": "18.x || 19.x",
     "@types/react-dom": "18.x || 19.x",
     "@types/react-is": "18.x || 19.x",
-    "@types/styled-components": "^5.1.11",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x",
-    "react-is": "18.x || 19.x",
-    "styled-components": "5.x"
+    "react-is": "18.x || 19.x"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -214,9 +202,6 @@
     },
     "@types/react-is": {
       "optional": true
-    },
-    "@types/styled-components": {
-      "optional": true
     }
   }
 }

package/dist/ActionBar/ActionBar-3069d5f1.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionBar/ActionBar.module.css"],"names":[],"mappings":"AAAA,0BAUE,kBAAmB,CARnB,YAAa,CASb,yDAAqD,CAFrD,eAAgB,CAFhB,kBAAmB,CAJnB,WAAY,CAFZ,iBAAkB,CAOlB,kBAaF,CAPE,iDACE,iBACF,CAEA,sDACE,iDACF,CAGF,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6DAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAD3B,sCAKF","file":"ActionBar-3069d5f1.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(--actionbar-gap, var(--stack-gap-condensed));\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\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"]}