Repository: adobe/react-spectrum
File: examples/s2-vite-project/src/App.tsx (TypeScript)

Code before:
        styles={style({ font: "heading-xl", textAlign: "center" })}
        level={1}
      >
        Spectrum 2 + Vite
      </Heading>
      <div
        className={style({
          maxWidth: 288,
          margin: "auto",
        })}
      >
        <Divider />
      </div>
      <div
        className={style({
          display: "flex",
          flexDirection: "column",
          gap: 16,
          alignItems: "center"
        })}
      >
        <Section title="Buttons">
          <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
            <Button variant="primary">Primary</Button>
            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
            <ActionButton>
              <Edit />
              <Text>Action Button</Text>
            </ActionButton>
            <ToggleButton>Toggle Button</ToggleButton>
            <LinkButton
              variant="primary"
              href="https://adobe.com"
              target="_blank"
            >
              Link Button
            </LinkButton>
            <ActionButtonGroup density="compact">
              <ActionButton>Cut</ActionButton>
              <ActionButton>Copy</ActionButton>
              <ActionButton>Paste</ActionButton>
            </ActionButtonGroup>
            <ToggleButtonGroup density="compact" selectionMode="multiple">
              <ToggleButton id="bold">Bold</ToggleButton>
              <ToggleButton id="italic">Italic</ToggleButton>
              <ToggleButton id="underline">Underline</ToggleButton>
            </ToggleButtonGroup>
          </ButtonGroup>
        </Section>

        <Section title="Collections">

Review comment (suggestion):
```suggestion
            <Button variant="secondary">Secondary</Button>
```

same thing with the others

Code after:
      <Heading
        styles={style({ font: "heading-xl", textAlign: "center" })}
        level={1}
      >
        Spectrum 2 + Vite
      </Heading>
      <div
        className={style({
          maxWidth: 288,
          margin: "auto",
        })}
      >
        <Divider />
      </div>
      <div
        className={style({
          display: "flex",
          flexDirection: "column",
          gap: 16,
          alignItems: "center"
        })}
      >
        <Section title="Buttons">
          <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
            <Button variant="primary">Primary</Button>
            <Button variant="secondary"><Text>Secondary</Text></Button>
            <ActionButton>
              <Edit />
              <Text>Action Button</Text>
              <NotificationBadge value={2} />
            </ActionButton>
            <ToggleButton>Toggle Button</ToggleButton>
            <LinkButton
              variant="primary"
              href="https://adobe.com"
              target="_blank"
            >
              Link Button
            </LinkButton>
            <ActionButtonGroup density="compact">
              <ActionButton>Cut</ActionButton>
              <ActionButton>Copy</ActionButton>
              <ActionButton>Paste</ActionButton>
            </ActionButtonGroup>
            <ToggleButtonGroup density="compact" selectionMode="multiple">
              <ToggleButton id="bold">Bold</ToggleButton>
              <ToggleButton id="italic">Italic</ToggleButton>
              <ToggleButton id="underline">Underline</ToggleButton>
            </ToggleButtonGroup>
          </ButtonGroup>
        </Section>