@primer/react 37.32.0-rc.705a7d2c6 → 37.32.0-rc.7e9c30881

package/generated/components.json

@@ -6175,7 +6175,7 @@
         },
         {
           "id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
-          "code": "() => (\n  <div className={classes.LabelAndCaptionContainer}>\n    <div className={classes.LabelAndCaption}>\n      <Text fontSize={2} fontWeight=\"bold\" id=\"scLabel-vert\" display=\"block\">\n        File view\n      </Text>\n      <Text color=\"fg.subtle\" fontSize={1} id=\"scCaption-vert\" display=\"block\">\n        Change the way the file is viewed\n      </Text>\n    </div>\n    <SegmentedControl\n      aria-labelledby=\"scLabel-vert\"\n      aria-describedby=\"scCaption-vert\"\n    >\n      <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n      <SegmentedControl.Button>Raw</SegmentedControl.Button>\n      <SegmentedControl.Button>Blame</SegmentedControl.Button>\n    </SegmentedControl>\n  </div>\n)"
+          "code": "() => (\n  <Box\n    display=\"flex\"\n    sx={(theme) => ({\n      flexDirection: 'column',\n      gap: theme.space[1],\n      [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {\n        flexDirection: 'row',\n      },\n    })}\n  >\n    <Box flexGrow={1}>\n      <Text fontSize={2} fontWeight=\"bold\" id=\"scLabel-vert\" display=\"block\">\n        File view\n      </Text>\n      <Text color=\"fg.subtle\" fontSize={1} id=\"scCaption-vert\" display=\"block\">\n        Change the way the file is viewed\n      </Text>\n    </Box>\n    <SegmentedControl\n      aria-labelledby=\"scLabel-vert\"\n      aria-describedby=\"scCaption-vert\"\n    >\n      <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n      <SegmentedControl.Button>Raw</SegmentedControl.Button>\n      <SegmentedControl.Button>Blame</SegmentedControl.Button>\n    </SegmentedControl>\n  </Box>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -8196,7 +8196,7 @@
         },
         {
           "id": "components-token-features--interactive-token",
-          "code": "() => {\n  return (\n    <div className={classes.TokenRow}>\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <Token as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </div>\n  )\n}"
+          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <Token as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </Box>\n  )\n}"
         },
         {
           "id": "components-token-features--token-with-leading-visual",
@@ -8204,7 +8204,7 @@
         },
         {
           "id": "components-token-features--token-with-on-remove-fn",
-          "code": "({ ...args }) => {\n  return (\n    <div className={classes.TokenRow}>\n      <Token text=\"token\" onRemove={action('remove me')} {...args} />\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n        {...args}\n      />\n      <Token\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n        {...args}\n      />\n    </div>\n  )\n}"
+          "code": "({ ...args }) => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <Token text=\"token\" onRemove={action('remove me')} {...args} />\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n        {...args}\n      />\n      <Token\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n        {...args}\n      />\n    </Box>\n  )\n}"
         },
         {
           "id": "components-token-features--default-issue-label-token",
@@ -8212,11 +8212,11 @@
         },
         {
           "id": "components-token-features--interactive-issue-label-token",
-          "code": "() => {\n  return (\n    <div className={classes.TokenRow}>\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <IssueLabelToken as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </div>\n  )\n}"
+          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <IssueLabelToken as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </Box>\n  )\n}"
         },
         {
           "id": "components-token-features--issue-label-token-with-on-remove-fn",
-          "code": "() => {\n  return (\n    <div className={classes.TokenRow}>\n      <IssueLabelToken text=\"token\" onRemove={action('remove me')} />\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n      />\n      <IssueLabelToken\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n      />\n    </div>\n  )\n}"
+          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <IssueLabelToken text=\"token\" onRemove={action('remove me')} />\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n      />\n      <IssueLabelToken\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n      />\n    </Box>\n  )\n}"
         },
         {
           "id": "components-token-features--small-token",
@@ -8232,7 +8232,7 @@
         },
         {
           "id": "components-token-features--issue-label-token-custom-colors",
-          "code": "() => {\n  return (\n    <div className={classes.TokenColumn}>\n      <div className={classes.TokenRow}>\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Link\"\n          fillColor=\"#0366d6\"\n        />\n        <IssueLabelToken\n          as=\"button\"\n          onClick={action('clicked')}\n          text=\"Button\"\n          fillColor=\"lightpink\"\n        />\n      </div>\n      <h3>Color examples</h3>\n      <div className={classes.TokenWrapRow}>\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"😀 Link\"\n          fillColor=\"#8c50c8\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Token\"\n          fillColor=\"#a9d3bc\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🚨 Problem\"\n          fillColor=\"#98afa7\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"📥 Inbox\"\n          fillColor=\"#573807\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"deeppink\"\n          fillColor=\"#b7b41e\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"👹 Link\"\n          fillColor=\"#0f65b1\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Tiger\"\n          fillColor=\"#e7bc68\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🐛 coral\"\n          fillColor=\"#D6F2DE\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Long label\"\n          fillColor=\"#161E37\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"✅ Done\"\n          fillColor=\"#232323\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Hello\"\n          fillColor=\"#E0E0E0\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#aed531\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#d980fc\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#e7f922\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🚀 Lorem\"\n          fillColor=\"#ef70e9\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#72ea84\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#87e50b\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🤷 Lorem\"\n          fillColor=\"#fcf646\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"💡 Light\"\n          fillColor=\"#E40C74\"\n        />\n      </div>\n    </div>\n  )\n}"
+          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        flexDirection: 'column',\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <Box\n        display=\"flex\"\n        sx={{\n          alignItems: 'start',\n          gap: get('space.2'),\n        }}\n      >\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Link\"\n          fillColor=\"#0366d6\"\n        />\n        <IssueLabelToken\n          as=\"button\"\n          onClick={action('clicked')}\n          text=\"Button\"\n          fillColor=\"lightpink\"\n        />\n      </Box>\n      <h3>Color examples</h3>\n      <Box\n        display=\"flex\"\n        flexWrap=\"wrap\"\n        sx={{\n          alignItems: 'start',\n          gap: get('space.2'),\n        }}\n      >\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"😀 Link\"\n          fillColor=\"#8c50c8\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Token\"\n          fillColor=\"#a9d3bc\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🚨 Problem\"\n          fillColor=\"#98afa7\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"📥 Inbox\"\n          fillColor=\"#573807\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"deeppink\"\n          fillColor=\"#b7b41e\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"👹 Link\"\n          fillColor=\"#0f65b1\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Tiger\"\n          fillColor=\"#e7bc68\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🐛 coral\"\n          fillColor=\"#D6F2DE\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Long label\"\n          fillColor=\"#161E37\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"✅ Done\"\n          fillColor=\"#232323\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Hello\"\n          fillColor=\"#E0E0E0\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#aed531\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#d980fc\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#e7f922\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🚀 Lorem\"\n          fillColor=\"#ef70e9\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#72ea84\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#87e50b\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🤷 Lorem\"\n          fillColor=\"#fcf646\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"💡 Light\"\n          fillColor=\"#E40C74\"\n        />\n      </Box>\n    </Box>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "37.32.0-rc.705a7d2c6",
+  "version": "37.32.0-rc.7e9c30881",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",