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

package/generated/components.json

@@ -101,6 +101,16 @@
         {
           "name": "ActionBar.Divider",
           "props": []
+        },
+        {
+          "name": "ActionBar.Group",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "defaultValue": ""
+            }
+          ]
         }
       ]
     },
@@ -1518,48 +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\""
-        }
-      ],
-      "subcomponents": []
-    },
     "branch_name": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/BranchName",
       "id": "branch_name",
@@ -3122,67 +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"
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "Dialog.Header",
-          "props": []
-        }
-      ]
-    },
     "feature_flags": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/FeatureFlags",
       "id": "feature_flags",
@@ -5755,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",
@@ -5763,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",
@@ -5843,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",
@@ -8370,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.9",
+  "version": "38.0.0-rc.ac46326da",
   "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"]}

package/dist/Box/Box.d.ts

@@ -1,18 +0,0 @@
-import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
-import type { SxProp } from '../sx';
-import type { ComponentProps } from '../utils/types';
-type StyledBoxProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
-/**
- * @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
- */
-declare const Box: import("styled-components").StyledComponent<"div", any, StyledBoxProps, never>;
-/**
- * @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
- */
-export type BoxProps = ComponentProps<typeof Box>;
-export default Box;
-//# sourceMappingURL=Box.d.ts.map

package/dist/Box/Box.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EAChB,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,KAAK,cAAc,GAAG,MAAM,GAC1B,UAAU,GACV,UAAU,GACV,eAAe,GACf,WAAW,GACX,YAAY,GACZ,SAAS,GACT,eAAe,GACf,WAAW,GACX,aAAa,GACb,WAAW,CAAA;AAEb;;;;GAIG;AACH,QAAA,MAAM,GAAG,gFAYR,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,OAAO,GAAG,CAAC,CAAA;AACjD,eAAe,GAAG,CAAA"}

package/dist/Box/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './Box';
-export type { BoxProps } from './Box';
-//# sourceMappingURL=index.d.ts.map

package/dist/Box/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAA;AAC7B,YAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAA"}

package/dist/DialogV1/Dialog-dce13989.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/DialogV1/Dialog.module.css"],"names":[],"mappings":"AACE,mCAUE,wEAA2C,CAN3C,QAAS,CAKT,WAAY,CADZ,cAAe,CADf,aAAc,CAFd,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,UAKF,CAGF,8BACE,iBAAkB,CAElB,8BAA0B,CAD1B,4BAEF,CAEA,2BAOE,mEAAwC,CACxC,gDAAyC,CAEzC,iEAAwC,CAPxC,QAAS,CAGT,gBAAiB,CADjB,eAAgB,CAIhB,YAAa,CARb,cAAe,CACf,KAAM,CASN,0BAA2B,CAP3B,WA6BF,CApBE,uDAEE,WACF,CAEA,sDACE,WACF,CAEA,oDAEE,WACF,CAEA,oCA3BF,2BA+BI,eAAgB,CAFhB,aAAc,CACd,QAAS,CAFT,YAKJ,CADE,CAGF,2BAGE,0DAAgC,CAChC,2GAAuE,CACvE,uFAAwE,CAJxE,YAAa,CACb,gCAQF,CAHE,oCAPF,2BAQI,eAEJ,CADE,CAGF,gCACE,8CAAuC,CACvC,gDACF","file":"Dialog-dce13989.css","sourcesContent":[".Overlay {\n  &::before {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 99;\n    display: block;\n    cursor: default;\n    content: ' ';\n    background: var(--overlay-backdrop-bgColor);\n  }\n}\n\n.CloseIcon {\n  position: absolute;\n  top: var(--base-size-8);\n  right: var(--base-size-16);\n}\n\n.Dialog {\n  position: fixed;\n  top: 0;\n  left: 50%;\n  z-index: 999;\n  max-height: 80vh;\n  margin: 10vh auto;\n  background-color: var(--bgColor-default);\n  border-radius: var(--borderRadius-medium);\n  outline: none;\n  box-shadow: var(--shadow-floating-large);\n  transform: translateX(-50%);\n\n  &:where([data-width='default']) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 440px;\n  }\n\n  &:where([data-width='narrow']) {\n    width: 320px;\n  }\n\n  &:where([data-width='wide']) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 640px;\n  }\n\n  @media screen and (max-width: 750px) {\n    width: 100dvw;\n    height: 100dvh;\n    margin: 0;\n    border-radius: 0;\n  }\n}\n\n.Header {\n  display: flex;\n  padding: var(--base-size-16);\n  background: var(--bgColor-muted);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n  @media screen and (max-width: 750px) {\n    border-radius: 0;\n  }\n}\n\n.HeaderChild {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n"]}

package/dist/DialogV1/Dialog.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/DialogV1/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAGpE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AASlD,KAAK,qBAAqB,GAAG;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAAG;IACxF,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,iBAAS,YAAY,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,SAAiB,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,qBAU7F;kBAVQ,YAAY;;;AAqBrB,QAAA,MAAM,MAAM;aARD,OAAO;gBACJ,MAAM,IAAI;sBACJ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;qBAC7B,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;SACxC,KAAK,CAAC,WAAW;uGAyDvB,CAAA;AAKD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAA;;aAlE5C,OAAO;gBACJ,MAAM,IAAI;sBACJ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;qBAC7B,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;SACxC,KAAK,CAAC,WAAW;;;;AA+DxB,wBAA4D"}

package/dist/DialogV1/Dialog.module.css.js

@@ -1,5 +0,0 @@
-import './Dialog-dce13989.css';
-
-var classes = {"Overlay":"prc-DialogV1-Overlay-8fcHY","CloseIcon":"prc-DialogV1-CloseIcon-B1Z79","Dialog":"prc-DialogV1-Dialog-5Fgol","Header":"prc-DialogV1-Header-o4U-V","HeaderChild":"prc-DialogV1-HeaderChild-QCbQj"};
-
-export { classes as default };

package/dist/DialogV1/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DialogV1/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAC1C,YAAY,EAAC,WAAW,EAAE,iBAAiB,EAAC,MAAM,UAAU,CAAA"}

package/dist/constants.d.ts

@@ -1,15 +0,0 @@
-import * as styledSystem from 'styled-system';
-export declare const get: (key: string) => (props: any) => any;
-export declare const COMMON: styledSystem.styleFn;
-export interface SystemCommonProps extends styledSystem.ColorProps, styledSystem.SpaceProps, styledSystem.DisplayProps {
-}
-export declare const TYPOGRAPHY: styledSystem.styleFn;
-export interface SystemTypographyProps extends styledSystem.TypographyProps {
-    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line';
-}
-export declare const BORDER: styledSystem.styleFn;
-export interface SystemBorderProps extends styledSystem.BorderProps, styledSystem.ShadowProps {
-}
-export declare const LAYOUT: styledSystem.styleFn;
-export type SystemLayoutProps = styledSystem.LayoutProps;
-//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,YAAY,MAAM,eAAe,CAAA;AAK7C,eAAO,MAAM,GAAG,GAAI,KAAK,MAAM,wBAAsC,CAAA;AAIrE,eAAO,MAAM,MAAM,sBAAwE,CAAA;AAE3F,MAAM,WAAW,iBACf,SAAQ,YAAY,CAAC,UAAU,EAC7B,YAAY,CAAC,UAAU,EACvB,YAAY,CAAC,YAAY;CAAG;AAWhC,eAAO,MAAM,UAAU,sBAA+C,CAAA;AAEtE,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,eAAe;IACzE,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAA;CACnE;AAID,eAAO,MAAM,MAAM,sBAAoD,CAAA;AAEvE,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,WAAW;CAAG;AAIhG,eAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,WAAW,CAAA"}

package/dist/constants.js

@@ -1,28 +0,0 @@
-import { themeGet } from '@styled-system/theme-get';
-import * as styledSystem from 'styled-system';
-import theme from './theme.js';
-
-const {
-  get: getKey,
-  compose,
-  system
-} = styledSystem;
-const get = key => themeGet(key, getKey(theme, key));
-
-// Common props
-
-compose(styledSystem.space, styledSystem.color, styledSystem.display);
-// Typography props
-
-const whiteSpace = system({
-  whiteSpace: {
-    property: 'whiteSpace'
-    // cssProperty: 'whiteSpace',
-  }
-});
-compose(styledSystem.typography, whiteSpace);
-// Border props
-
-compose(styledSystem.border, styledSystem.shadow);
-
-export { get };

package/dist/sx.d.ts

@@ -1,24 +0,0 @@
-import type { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
-import type { ThemeColorPaths, ThemeShadowPaths } from './theme';
-import type { ColorProps, BorderColorProps, ShadowProps } from 'styled-system';
-export type BetterCssProperties = {
-    [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof BorderColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
-};
-export type CSSCustomProperties = {
-    [key: `--${string}`]: string | number;
-};
-type CSSSelectorObject = {
-    [cssSelector: string]: SystemStyleObject | CSSCustomProperties;
-};
-export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject;
-export interface SxProp {
-    /**
-     * @deprecated The `sx` prop is deprecated. Replace with a `div` or
-     * appropriate HTML element instead, with a CSS class for styling.
-     * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
-     * */
-    sx?: BetterSystemStyleObject;
-}
-declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
-export default sx;
-//# sourceMappingURL=sx.d.ts.map

package/dist/sx.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sx.d.ts","sourceRoot":"","sources":["../src/sx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,mBAAmB,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAA;AAE9E,OAAO,KAAK,EAAC,eAAe,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAA;AAC9D,OAAO,KAAK,EAAC,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;AAE5E,MAAM,MAAM,mBAAmB,GAAG;KAC/B,CAAC,IAAI,MAAM,mBAAmB,GAAG,CAAC,SAAS,MAAM,UAAU,GACxD,eAAe,GAAG,mBAAmB,CAAC,CAAC,CAAC,GACxC,CAAC,SAAS,MAAM,gBAAgB,GAC9B,eAAe,GAAG,mBAAmB,CAAC,CAAC,CAAC,GACxC,CAAC,SAAS,MAAM,WAAW,GACzB,gBAAgB,GAAG,mBAAmB,CAAC,CAAC,CAAC,GACzC,mBAAmB,CAAC,CAAC,CAAC;CAC/B,CAAA;AAGD,MAAM,MAAM,mBAAmB,GAAG;IAChC,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;CACtC,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,CAAC,WAAW,EAAE,MAAM,GAAG,iBAAiB,GAAG,mBAAmB,CAAA;CAC/D,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,iBAAiB,CAAA;AAEvH,MAAM,WAAW,MAAM;IACrB;;;;SAIK;IACL,EAAE,CAAC,EAAE,uBAAuB,CAAA;CAC7B;AAED,QAAA,MAAM,EAAE,GAAI,OAAO,MAAM,uDAAkB,CAAA;AAE3C,eAAe,EAAE,CAAA"}

package/dist/utils/layout.d.ts

@@ -1,21 +0,0 @@
-export declare const PrimerBreakpoints: {
-    xsmall: {
-        width: string;
-    };
-    small: {
-        width: string;
-    };
-    medium: {
-        width: string;
-    };
-    large: {
-        width: string;
-    };
-    xlarge: {
-        width: string;
-    };
-    xxlarge: {
-        width: string;
-    };
-};
-//# sourceMappingURL=layout.d.ts.map

package/dist/utils/layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/utils/layout.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAmB7B,CAAA"}