@primer/components 33.0.0-rc.b3e4ccee → 33.0.0

package/docs/content/ActionList.mdx

@@ -1,99 +0,0 @@
----
-title: ActionList
-status: Alpha
-source: https://github.com/primer/react/tree/main/src/ActionList
----
-
-An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `DropdownMenu` and `ActionMenu`.
-
-## Minimal example
-
-```jsx live
-<ActionList
-  items={[
-    {text: 'New file'},
-    ActionList.Divider,
-    {text: 'Copy link'},
-    {text: 'Edit file'},
-    {text: 'Delete file', variant: 'danger'}
-  ]}
-/>
-```
-
-## Example with grouped items
-
-```jsx live
-<ActionList
-  groupMetadata={[
-    {groupId: '0'},
-    {groupId: '1', header: {title: 'Live query', variant: 'subtle'}},
-    {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
-    {groupId: '3'},
-    {groupId: '4'}
-  ]}
-  items={[
-    {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0', trailingVisual: '⌘R'},
-    {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
-    {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'},
-    {
-      key: '4',
-      leadingVisual: NoteIcon,
-      text: 'Table',
-      description: 'Information-dense table optimized for operations across teams',
-      descriptionVariant: 'block',
-      groupId: '2'
-    },
-    {
-      key: '5',
-      leadingVisual: ProjectIcon,
-      text: 'Board',
-      description: 'Kanban-style board focused on visual states',
-      descriptionVariant: 'block',
-      groupId: '2'
-    },
-    {
-      key: '6',
-      leadingVisual: FilterIcon,
-      text: 'Save sort and filters to current view',
-      disabled: true,
-      groupId: '3'
-    },
-    {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
-    {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4', trailingVisual: ArrowRightIcon}
-  ]}
-/>
-```
-
-## Example with custom item renderer
-
-```jsx
-<ActionList
-  items={[
-    {
-      text: 'Vanilla link',
-      renderItem: props => <ActionList.Item as="a" href="/about" {...props} />
-    },
-    {
-      text: 'React Router link',
-      renderItem: props => <ActionList.Item as={ReactRouterLikeLink} to="/about" {...props} />
-    },
-    {
-      text: 'NextJS style',
-      renderItem: props => (
-        <NextJSLikeLink href="/about">
-          <ActionList.Item as="a" {...props} />
-        </NextJSLikeLink>
-      )
-    }
-  ]}
-/>
-```
-
-## Props
-
-| Name             | Type                                                                                                                                              |      Default      | Description                                                                                                                                             |
-| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| items            | `(ItemProps & Omit<React.ComponentPropsWithoutRef<'div'>, keyof ItemProps>) \| ((Partial<ItemProps> & {renderItem: RenderItemFn}) & {key?: Key})` |    `undefined`    | Required. A list of item objects conforming to the `ActionList.Item` props interface.                                                                   |
-| renderItem       | `(props: ItemProps) => JSX.Element`                                                                                                               | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering.                       |
-| groupMetadata    | `GroupProps[]`                                                                                                                                    |    `undefined`    | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. |
-| showItemDividers | `boolean`                                                                                                                                         |      `false`      | Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider`        |

package/docs/content/ActionList2.mdx

@@ -1,379 +0,0 @@
----
-title: ActionList v2
-status: Alpha
-source: https://github.com/primer/react/tree/main/src/ActionList2
-storybook: '/react/storybook?path=/story/composite-components-actionlist2'
-description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including DropdownMenu and ActionMenu.
----
-
-import {BorderBox, Avatar} from '@primer/components'
-import {ActionList} from '@primer/components/drafts'
-import {ComponentChecklist} from '../src/component-checklist'
-
-import {ImageContainer} from '@primer/gatsby-theme-doctocat'
-import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
-
-<br />
-
-<BorderBox sx={{padding: 6}}>
-  <ActionList sx={{width: 320}}>
-    <ActionList.Item>
-      <ActionList.LeadingVisual>
-        <LinkIcon />
-      </ActionList.LeadingVisual>
-      github.com/primer
-      <ActionList.Description variant="block">
-        A React implementation of GitHub's Primer Design System
-      </ActionList.Description>
-    </ActionList.Item>
-    <ActionList.Item>
-      <ActionList.LeadingVisual>
-        <Avatar src="https://github.com/mona.png" />
-      </ActionList.LeadingVisual>
-      mona
-      <ActionList.Description>Monalisa Octocat</ActionList.Description>
-    </ActionList.Item>
-    <ActionList.Item variant="danger">
-      <ActionList.LeadingVisual>
-        <AlertIcon />
-      </ActionList.LeadingVisual>
-      4 vulnerabilities
-      <ActionList.TrailingVisual>
-        <ArrowRightIcon />
-      </ActionList.TrailingVisual>
-    </ActionList.Item>
-  </ActionList>
-</BorderBox>
-
-<br />
-
-```js
-import {ActionList} from '@primer/components/drafts'
-```
-
-<br />
-
-## Examples
-
-### Minimal example
-
-```javascript live noinline
-// import {ActionList} from '@primer/components/drafts'
-const {ActionList} = drafts // ignore docs silliness; import like that ↑
-
-render(
-  <ActionList>
-    <ActionList.Item>New file</ActionList.Item>
-    <ActionList.Item>Copy link</ActionList.Item>
-    <ActionList.Item>Edit file</ActionList.Item>
-    <ActionList.Divider />
-    <ActionList.Item variant="danger">Delete file</ActionList.Item>
-  </ActionList>
-)
-```
-
-<br />
-
-### With leading visual
-
-Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area.
-
-<!-- prettier-ignore -->
-```javascript live noinline
-// import {ActionList} from '@primer/components/drafts'
-const {ActionList} = drafts // ignore docs silliness; import like that ↑
-
-render(
-  <ActionList>
-    <ActionList.Item>
-      <ActionList.LeadingVisual><LinkIcon /></ActionList.LeadingVisual>
-      github.com/primer
-    </ActionList.Item>
-    <ActionList.Item variant="danger">
-      <ActionList.LeadingVisual><AlertIcon /></ActionList.LeadingVisual>
-      4 vulnerabilities
-    </ActionList.Item>
-    <ActionList.Item>
-      <ActionList.LeadingVisual><Avatar src="https://github.com/mona.png" /></ActionList.LeadingVisual>
-      mona
-    </ActionList.Item>
-  </ActionList>
-)
-```
-
-<br />
-
-### With trailing visual
-
-Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does.
-
-```javascript live noinline
-// import {ActionList} from '@primer/components/drafts'
-const {ActionList} = drafts // ignore docs silliness; import like that ↑
-
-render(
-  <ActionList>
-    <ActionList.Item>
-      New file
-      <ActionList.TrailingVisual>⌘ + N</ActionList.TrailingVisual>
-    </ActionList.Item>
-    <ActionList.Item>
-      Copy link
-      <ActionList.TrailingVisual>⌘ + C</ActionList.TrailingVisual>
-    </ActionList.Item>
-    <ActionList.Item>
-      Edit file
-      <ActionList.TrailingVisual>⌘ + E</ActionList.TrailingVisual>
-    </ActionList.Item>
-    <ActionList.Item variant="danger">
-      Delete file
-      <ActionList.TrailingVisual>⌫</ActionList.TrailingVisual>
-    </ActionList.Item>
-  </ActionList>
-)
-```
-
-<br />
-
-### With description and dividers
-
-Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present.
-
-```javascript live noinline
-// import {ActionList} from '@primer/components/drafts'
-const {ActionList} = drafts // ignore docs silliness; import like that ↑
-
-render(
-  <ActionList showDividers>
-    <ActionList.Item>
-      <ActionList.LeadingVisual>
-        <Avatar src="https://github.com/mona.png" />
-      </ActionList.LeadingVisual>
-      mona
-      <ActionList.Description>Monalisa Octocat</ActionList.Description>
-    </ActionList.Item>
-    <ActionList.Item>
-      <ActionList.LeadingVisual>
-        <Avatar src="https://github.com/hubot.png" />
-      </ActionList.LeadingVisual>
-      hubot
-      <ActionList.Description>Hubot</ActionList.Description>
-    </ActionList.Item>
-    <ActionList.Item>
-      <ActionList.LeadingVisual>
-        <Avatar src="https://github.com/primer-css.png" />
-      </ActionList.LeadingVisual>
-      primer-css
-      <ActionList.Description>GitHub Design Systems Bot</ActionList.Description>
-    </ActionList.Item>
-  </ActionList>
-)
-```
-
-### With links
-
-When you want to add links to the List instead of actions, use `ActionList.LinkItem`
-
-<!-- prettier-ignore -->
-```javascript live noinline
-// import {ActionList} from '@primer/components/drafts'
-const {ActionList} = drafts // ignore docs silliness; import like that ↑
-
-render(
-  <ActionList>
-    <ActionList.LinkItem href="https://github.com/primer">
-      <ActionList.LeadingVisual>
-        <LinkIcon />
-      </ActionList.LeadingVisual>
-      github/primer
-    </ActionList.LinkItem>
-    <ActionList.LinkItem as={ReactRouterLink} to="/">
-      <ActionList.LeadingVisual>
-        <LawIcon />
-      </ActionList.LeadingVisual>
-      MIT License
-    </ActionList.LinkItem>
-    <ActionList.LinkItem 
-      href="https://github.com/primer/react/stargazers"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <ActionList.LeadingVisual>
-        <StarIcon />
-      </ActionList.LeadingVisual>
-      1.4k stars
-    </ActionList.LinkItem>
-  </ActionList>
-)
-```
-
-<br />
-
-### With groups
-
-```javascript live noinline
-// import {ActionList} from '@primer/components/drafts'
-const {ActionList} = drafts // ignore docs silliness; import like that ↑
-
-const SelectFields = () => {
-  const [options, setOptions] = React.useState([
-    {text: 'Status', selected: true},
-    {text: 'Stage', selected: true},
-    {text: 'Assignee', selected: true},
-    {text: 'Team', selected: true},
-    {text: 'Estimate', selected: false},
-    {text: 'Due Date', selected: false}
-  ])
-
-  const visibleOptions = options.filter(option => option.selected)
-  const hiddenOptions = options.filter(option => !option.selected)
-
-  const toggle = text => {
-    setOptions(
-      options.map(option => {
-        if (option.text === text) option.selected = !option.selected
-        return option
-      })
-    )
-  }
-
-  return (
-    <ActionList selectionVariant="multiple">
-      <ActionList.Group title="Visible fields (can be reordered)">
-        {visibleOptions.map(option => (
-          <ActionList.Item key={option.text} selected={true} onSelect={() => toggle(option.text)}>
-            {option.text}
-          </ActionList.Item>
-        ))}
-      </ActionList.Group>
-      <ActionList.Group
-        title="Hidden fields"
-        selectionVariant={
-          /** selectionVariant override on Group: disable selection if there are no options */
-          hiddenOptions.length ? 'multiple' : false
-        }
-      >
-        {hiddenOptions.map((option, index) => (
-          <ActionList.Item key={option.text} selected={false} onSelect={() => toggle(option.text)}>
-            {option.text}
-          </ActionList.Item>
-        ))}
-        {hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
-      </ActionList.Group>
-    </ActionList>
-  )
-}
-
-render(<SelectFields />)
-```
-
-<br />
-
-## Props / API reference
-
-### ActionList
-
-| Name             | Type                                                                                              | Default | Description                                                                                                                                                                                |
-| :--------------- | :------------------------------------------------------------------------------------------------ | :-----: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| children\*       | `ActionList.Item[]` or ActionList.LinkItem[] or `ActionList.Group[]`                              |    -    | Required.                                                                                                                                                                                  |
-| variant          | `'inset'` or `'full'`                                                                             | 'inset' | Optional. Usage is discretionary, `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges |
-| selectionVariant | `'single'` or `'multiple'`                                                                        |    -    | Optional. Whether multiple Items or a single Item can be selected.                                                                                                                         |
-| showDivider      | boolean                                                                                           |  false  | Optional. Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.                                                                              |
-| sx               | sxProp                                                                                            |    -    | Optional. See guide to [Overriding styles](/overriding-styles)                                                                                                                             |
-| role             | [AriaRole](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles) |    -    | Optional. The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.                                                                              |
-
-<br />
-
-### ActionList.Item
-
-| Name       | Type                                                                                                          |   Default   | Description                                                                                      |
-| :--------- | :------------------------------------------------------------------------------------------------------------ | :---------: | :----------------------------------------------------------------------------------------------- |
-| children\* | one of [`React.ReactNode`, `ActionList.LeadingVisual`, `ActionList.Description`, `ActionList.TrailingVisual`] |      -      | Required.                                                                                        |
-| variant    | `'default'` or `'danger'`                                                                                     | `'default'` | Optional. variant="danger" creates a destructive action `Item`.                                  |
-| onSelect   | Function                                                                                                      |      -      | Optional. Callback that will trigger both on click selection and keyboard selection.             |
-| selected   | boolean                                                                                                       |    false    | Optional. For `Item`s which can be selected, whether the `Item` is currently selected.           |
-| disabled   | boolean                                                                                                       |    false    | Optional. Items that are disabled can not be clicked, selected, or navigated through.            |
-| role       | [AriaRole](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles)             |      -      | Optional. The ARIA role describing the function of `Item` component. `option` is a common value. |
-| sx         | sxProp                                                                                                        |      -      | Optional. See guide to [Overriding styles](/overriding-styles)                                   |
-
-<br />
-
-### ActionList.LinkItem
-
-| Name                                                | Type                                                                                                          | Default | Description                                                    |
-| :-------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ | :-----: | :------------------------------------------------------------- |
-| children\*                                          | one of [`React.ReactNode`, `ActionList.LeadingVisual`, `ActionList.Description`, `ActionList.TrailingVisual`] |    -    | Required.                                                      |
-| sx                                                  | sxProp                                                                                                        |    -    | Optional. See guide to [Overriding styles](/overriding-styles) |
-| + AnchorHTMLAttributes like href, target, rel, etc. |                                                                                                               |         |                                                                |
-
-<br />
-
-### ActionList.LeadingVisual
-
-| Name       | Type                | Default | Description                                                    |
-| :--------- | :------------------ | :-----: | :------------------------------------------------------------- |
-| children\* | `React.ReactNode` - |    -    | Required. Icon (or similar) positioned before `Item` text.     |
-| sx         | sxProp              |    -    | Optional. See guide to [Overriding styles](/overriding-styles) |
-
-### ActionList.TrailingVisual
-
-| Name       | Type                | Default | Description                                                    |
-| :--------- | :------------------ | :-----: | :------------------------------------------------------------- |
-| children\* | `React.ReactNode` - |    -    | Required. Visual positioned after `Item` text.                 |
-| sx         | sxProp              |    -    | Optional. See guide to [Overriding styles](/overriding-styles) |
-
-<br />
-
-### ActionList.Description
-
-| Name       | Type                    |  Default   | Description                                                                                                                       |
-| :--------- | :---------------------- | :--------: | :-------------------------------------------------------------------------------------------------------------------------------- |
-| children\* | `React.ReactNode` -     |     -      | Required. Visual positioned after `Item` text.                                                                                    |
-| variant    | `'inline'` or `'block'` | `'inline'` | Optional. `"inline"` secondary text is positioned beside primary text. `"block"` secondary text is positioned below primary text. |
-| sx         | sxProp                  |     -      | Optional. See guide to [Overriding styles](/overriding-styles)                                                                    |
-
-<br />
-
-### ActionList.Group
-
-| Name             | Type                                                                                              |  Default   | Description                                                                                                                              |
-| :--------------- | :------------------------------------------------------------------------------------------------ | :--------: | :--------------------------------------------------------------------------------------------------------------------------------------- |
-| children\*       | `ActionList.Item[] or ActionList.LinkItem[]`                                                      |     -      | Required.                                                                                                                                |
-| title            | string                                                                                            |     -      | Optional. Primary text which names a `Group`                                                                                             |
-| auxiliaryText    | string                                                                                            |     -      | Optional. Secondary text which provides additional information about a `Group`.                                                          |
-| variant          | `'filled'` or `'subtle'`                                                                          | `'subtle'` | Optional. `"filled"` - Superimposed on a background, offset from nearby content, `"subtle"` - Relatively less offset from nearby content |
-| selectionVariant | `'single'` or `'multiple'` or `false`                                                             |     -      | Optional. Set `selectionVariant` at the group level                                                                                      |
-| role             | [AriaRole](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles) |     -      | Optional. \* The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.        |
-
-<br />
-
-## Further reading
-
-- [Interface guidelines: Action List](https://primer.style/design/components/action-list)
-
-<br />
-
-## Related components
-
-- [ActionMenu](/ActionMenu)
-- [SelectPanel](/SelectPanel)
-
-## Component status
-
-<ComponentChecklist
-  items={{
-    propsDocumented: true,
-    noUnnecessaryDeps: true,
-    adaptsToThemes: true,
-    adaptsToScreenSizes: true,
-    fullTestCoverage: false,
-    usedInProduction: false,
-    usageExamplesDocumented: true,
-    designReviewed: false,
-    a11yReviewed: false,
-    stableApi: false,
-    addressedApiFeedback: false,
-    hasDesignGuidelines: true,
-    hasFigmaComponent: true
-  }}
-/>

package/docs/content/ActionMenu.mdx

@@ -1,80 +0,0 @@
----
-title: ActionMenu
----
-
-An `ActionMenu` is an ActionList-based component for creating a menu of actions that expands through a trigger button.
-
-## Default example
-
-```jsx live
-<ActionMenu
-  anchorContent="Menu"
-  onAction={({text}) => console.log(text)}
-  items={[
-    {text: 'New file', key: 'new-file'},
-    ActionMenu.Divider,
-    {text: 'Copy link', key: 'copy-link'},
-    {text: 'Edit file', key: 'edit-file'},
-    {text: 'Delete file', variant: 'danger', key: 'delete-file'}
-  ]}
-/>
-```
-
-## Example with grouped items
-
-```jsx live
-<ActionMenu
-  anchorContent="Menu"
-  onAction={({text}) => console.log(text)}
-  groupMetadata={[
-    {groupId: '0'},
-    {groupId: '1', header: {title: 'Live query', variant: 'subtle'}},
-    {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
-    {groupId: '3'},
-    {groupId: '4'}
-  ]}
-  items={[
-    {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
-    {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
-    {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'},
-    {
-      key: '4',
-      leadingVisual: NoteIcon,
-      text: 'Table',
-      description: 'Information-dense table optimized for operations across teams',
-      descriptionVariant: 'block',
-      groupId: '2'
-    },
-    {
-      key: '5',
-      leadingVisual: ProjectIcon,
-      text: 'Board',
-      description: 'Kanban-style board focused on visual states',
-      descriptionVariant: 'block',
-      groupId: '2'
-    },
-    {
-      key: '6',
-      leadingVisual: FilterIcon,
-      text: 'Save sort and filters to current view',
-      disabled: true,
-      groupId: '3'
-    },
-    {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
-    {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4'}
-  ]}
-/>
-```
-
-## Component props
-
-| Name          | Type                                  |      Default      | Description                                                                                                                                                                                        |
-| :------------ | :------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| items         | `ItemProps[]`                         |    `undefined`    | Required. A list of item objects conforming to the `ActionList.Item` props interface.                                                                                                              |
-| renderItem    | `(props: ItemProps) => JSX.Element`   | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering.                                                                  |
-| groupMetadata | `GroupProps[]`                        |    `undefined`    | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property.                                            |
-| renderAnchor  | `(props: ButtonProps) => JSX.Element` |     `Button`      | Optional. If defined, provided component will be used to render the menu anchor. Will receive the selected `Item` text as `children` prop when an item is activated.                               |
-| anchorContent | React.ReactNode                       |    `undefined`    | Optional. If defined, it will be passed to the trigger as the elements child.                                                                                                                      |
-| onAction      | (props: ItemProps) => void            |    `undefined`    | Optional. If defined, this function will be called when a menu item is activated either by a click or a keyboard press.                                                                            |
-| open          | boolean                               |    `undefined`    | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `setOpen` prop. |
-| setOpen       | (state: boolean) => void              |    `undefined`    | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `open` prop.    |

package/docs/content/AnchoredOverlay.mdx

@@ -1,37 +0,0 @@
----
-title: AnchoredOverlay
-status: Alpha
----
-
-An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
-The overlay can be opened and navigated using keyboard or mouse.
-
-See also [Overlay positioning](/Overlay#positioning).
-
-## Example
-
-```jsx live
-<State default={false}>
-  {([isOpen, setIsOpen]) => {
-    const openOverlay = React.useCallback(() => setIsOpen(true), [setIsOpen])
-    const closeOverlay = React.useCallback(() => setIsOpen(false), [setIsOpen])
-    return (
-      <AnchoredOverlay
-        renderAnchor={anchorProps => <DropdownButton {...anchorProps}>Click me to open</DropdownButton>}
-        open={isOpen}
-        onOpen={openOverlay}
-        onClose={closeOverlay}
-      >
-        <Box display="flex" flexDirection="column" maxWidth="300px" padding={2}>
-          <p>
-            This menu automatically receives a focus trap and focus zone. Use up/down keys to navigate between buttons
-          </p>
-          <Button mb={1}>Button 1</Button>
-          <Button mb={1}>Button 2</Button>
-          <Button>Button 3</Button>
-        </Box>
-      </AnchoredOverlay>
-    )
-  }}
-</State>
-```