npm - @atom-learning/components - Versions diffs - 2.32.2 → 2.33.0 - Mend

@atom-learning/components 2.32.2 → 2.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/CHANGELOG.md +55 -2
package/README.md +11 -5
package/dist/components/accordion/AccordionTrigger.js +1 -1
package/dist/components/chip/Chip.js +1 -1
package/dist/components/tabs/TabsTriggerList.js +1 -1
package/dist/docgen.json +1 -1
package/dist/index.cjs.js +1 -1
package/dist/index.d.ts +1 -0
package/dist/index.js +1 -1
package/package.json +6 -6
package/dist/docs/Accordion.mdx +0 -94
package/dist/docs/ActionIcon.mdx +0 -87
package/dist/docs/AlertDialog.mdx +0 -40
package/dist/docs/Avatar.mdx +0 -129
package/dist/docs/Badge.mdx +0 -55
package/dist/docs/Box.mdx +0 -52
package/dist/docs/Button.mdx +0 -68
package/dist/docs/CONTRIBUTING.md +0 -224
package/dist/docs/CSSWrapper.mdx +0 -10
package/dist/docs/Carousel.mdx +0 -88
package/dist/docs/Checkbox.mdx +0 -19
package/dist/docs/CheckboxField.mdx +0 -14
package/dist/docs/Chip.mdx +0 -118
package/dist/docs/ChipDismissibleGroup.mdx +0 -33
package/dist/docs/ChipToggleGroup.mdx +0 -27
package/dist/docs/Combobox.mdx +0 -44
package/dist/docs/DataTable.mdx +0 -279
package/dist/docs/DateField.mdx +0 -20
package/dist/docs/DateInput.mdx +0 -87
package/dist/docs/Dialog.mdx +0 -68
package/dist/docs/Dismissible.mdx +0 -48
package/dist/docs/DismissibleGroup.mdx +0 -29
package/dist/docs/Divider.mdx +0 -16
package/dist/docs/DropdownMenu.mdx +0 -30
package/dist/docs/EmptyState.mdx +0 -23
package/dist/docs/FieldWrapper.mdx +0 -30
package/dist/docs/FileInput.mdx +0 -45
package/dist/docs/Flex.mdx +0 -16
package/dist/docs/Form.mdx +0 -411
package/dist/docs/Grid.mdx +0 -28
package/dist/docs/Heading.mdx +0 -30
package/dist/docs/Icon.mdx +0 -30
package/dist/docs/Image.mdx +0 -14
package/dist/docs/InlineMessage.mdx +0 -52
package/dist/docs/Input.mdx +0 -24
package/dist/docs/InputField.mdx +0 -26
package/dist/docs/Label.mdx +0 -32
package/dist/docs/Link.mdx +0 -53
package/dist/docs/List.mdx +0 -38
package/dist/docs/Loader.mdx +0 -16
package/dist/docs/MarkdownContent.mdx +0 -77
package/dist/docs/NavigationMenu.mdx +0 -144
package/dist/docs/NotificationBadge.mdx +0 -35
package/dist/docs/NumberInput.mdx +0 -37
package/dist/docs/NumberInputField.mdx +0 -26
package/dist/docs/PasswordField.mdx +0 -23
package/dist/docs/PasswordInput.mdx +0 -15
package/dist/docs/Popover.mdx +0 -29
package/dist/docs/ProgressBar.mdx +0 -56
package/dist/docs/README.mdx +0 -79
package/dist/docs/RadioButton.mdx +0 -10
package/dist/docs/RadioButtonField.mdx +0 -25
package/dist/docs/RadioCard.mdx +0 -62
package/dist/docs/SearchField.mdx +0 -26
package/dist/docs/SearchInput.mdx +0 -13
package/dist/docs/Select.mdx +0 -56
package/dist/docs/SelectField.mdx +0 -17
package/dist/docs/Sidedrawer.mdx +0 -155
package/dist/docs/Slider.mdx +0 -117
package/dist/docs/SliderField.mdx +0 -35
package/dist/docs/Stack.mdx +0 -24
package/dist/docs/StackContent.mdx +0 -32
package/dist/docs/Stepper.mdx +0 -154
package/dist/docs/Styling.mdx +0 -85
package/dist/docs/Switch.mdx +0 -28
package/dist/docs/Table.mdx +0 -146
package/dist/docs/Tabs.mdx +0 -76
package/dist/docs/Text.mdx +0 -24
package/dist/docs/Textarea.mdx +0 -12
package/dist/docs/TextareaField.mdx +0 -21
package/dist/docs/Toast.mdx +0 -20
package/dist/docs/ToggleGroup.mdx +0 -88
package/dist/docs/Tooltip.mdx +0 -25
package/dist/docs/TopBar.mdx +0 -95
package/dist/docs/Video.mdx +0 -12
package/dist/docs/accessibility.mdx +0 -67
package/dist/docs/coreconcepts.mdx +0 -77
package/dist/docs/introduction.mdx +0 -33
package/dist/docs/versioning.mdx +0 -40

package/dist/docs/CONTRIBUTING.md DELETED Viewed

@@ -1,224 +0,0 @@
----
-title: Contributing
-description: When contributing to this repository, use the following information to uphold the standards we have set for this project
-category: Overview
----
-Everyone is encouraged to contribute to the development of this project. If you spot a missing component or an additional feature, please raise an issue in GitHub using the [feature request template](https://github.com/atom-learning/components/issues/new?template=request-a-feature.md).
-In this document, you will find all the necessary information to develop and test the features. Therefore, please review this document and the `README.md` before you get started.
-## Getting started
-Clone the repo
-```bash
-git clone git@github.com:atom-learning/components.git
-```
-Install dependencies
-```bash
-yarn install
-```
-**Before starting to develop on this project, please consider the following:**
-- Read the entire contribution guide
-- Read the [accessibility section](https://design.atomlearning.technology/components/accessibility)
-- Read the [versioning section](https://design.atomlearning.technology/components/versioning)
-- Check that the `pre-commit` hooks work before pushing into a branch
-- Always commit your changes to a branch and request a code review by raising a PR.
-- Always include tests for the changes introduced
-### Available scripts
-- `dev`: Builds the libary in dev mode and watches for changes
-- `start:sandbox`: Starts up a simple sandbox to test changes
-- `build:lib`: Builds the library and populates the `dist` folder
-- `build:docs`: Builds the documentation and exports it to be consumed by the `documentation` project.
-- `clean`: Deletes the `dist` folder to ensure a clean build
-- `format`: Formats the code using `Prettier`
-- `lint`: Lints and fixes syntax issues with the code using `ESLint`
-- `test`: Runs the testing suite using `Jest`
-- `test:watch`: Runs the testing suite in watch mode
-- `validate`: Runs all the validate commands to: audit any additional dependencies, detect linting/syntax issues, detect typescript compilation errors, prints the output size and flags any potential build issues. See `package.json` for more details.
-## Commits
-This section is **very important**! Our releases and version numbers follow [Semantic Versioning](https://semver.org/) and are generated from the commit messages in PRs when they get merged into `main`, so make sure you follow our conventions.
-We use [`commitlint`](https://github.com/conventional-changelog/commitlint) to enforce rules about commit messages and [`semantic-release`](https://github.com/semantic-release/semantic-release) to generate releases and version numbers based on them. The configuration of these tools is spread between several plugins, but here's what you need to know.
-The structure of a commit message is as follows:
-```
-<type>(<scope>): <subject>
-<BLANK LINE>
-<body>
-<BLANK LINE>
-<footer>
-```
-All commit messages must have a type (a word followed by a colon at the start of the message) from this [list](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional#type-enum) (the scope is optional but strongly encouraged). Either of the following types will cause a new release to be published when your PR is merged into `main`:
-- `fix` for bug fixes (patch version)
-- `perf` for performance improvements (patch version)
-- `feat` for new features (minor version)
-Other subjects (such as `chore`) will not cause a new release **unless** the commit footer starts with `BREAKING CHANGE:` (followed by an explanation of the breaking change).
-Commits that introduce a breaking change should start with `feat!:` and include the `BREAKING CHANGE:` footer. Breaking changes will cause a major version increase.
-Here is an example of the release type that will be done based on a commit messages:
-| Commit message                                                                                                                                                                                        | Release type           |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
-| `fix(pencil): stop graphite breaking when too much pressure applied`                                                                                                                                  | Patch Release          |
-| `feat(pencil): add 'graphiteWidth' option`                                                                                                                                                            | Minor Release          |
-| `perf(pencil): remove graphiteWidth option`<br /><br />`BREAKING CHANGE: The graphiteWidth option has been removed.`<br/>`The default graphite width of 10mm is always used for performance reasons.` | Major Breaking Release |
-**Notes:**
-- A commit should contain at most one self-contained functional change and a functional change should be contained in exactly one commit.
-- When squashing commits make sure to rewrite the resulting commit message to be compliant with the project's commit message convention. **If the resulting squashed commit would encompasses multiple changes (for example multiple unrelated features or fixes) then it's probably not a good idea to squash those commits together**.
-## Directory structure
-Use the following directory structure and file naming conventions. You can automate this by running `yarn add-component` in the root directory and following the instructions. Once the `add-component` task has completed, you should have the following folder and files created:
-```
-src/
-  components/
-    component-name/
-      ComponentName.tsx
-      ComponentName.test.tsx
-      ComponentName.mdx
-      index.ts
-```
-## Component API
-### Prop validation
-All components should have fully typed props.
-### `css` prop
-All components should accept a `css` prop. Single-child components are styled directly, while components composed of multiple components/elements use the `css` prop only for styles that affect the whole component/its relationship to other components on the page:
-- If the component renders two or more sibling elements/components, wrap them in a `CSSWrapper` and pass the `css` prop to that.
-- Otherwise, pass the `css` prop value directly to the direct child.
-```jsx
-const SimpleComponent = ({ css }) => (
-  <Box css={css}>This box gets styled directly</Box>
-)
-const ComposedComponent = ({ css }) => (
-  <CSSWrapper css={css}>
-    <Box css={{ mb: '$3' }}>
-      The styling of these boxes is ComposedComponent's responsibility
-    </Box>
-    <Box css={{ color: '$primary' }}>
-      If we want to combine boxes differently, we can compose a new component
-    </Box>
-  </CSSWrapper>
-)
-```
-## Tests
-In this project, we follow the principles set out by the [`React Testing Library`]() where we focus on testing the user interactions with the component. The target is to have as much test coverage as possible.
-As a minimum, the following tests are required:
-- Tests to validate the user interactions with the component
-- Snapshots for the different states of the component (i.e., for an `accordion` cover both the collapsed and expanded states
-- Snapshots for each variant that outputs different HTML
-- Accessibility unit tests
-### Examples
-```jsx
-describe(`Box component`, () => {
-  it('renders', async () => {
-    const { container } = render(
-      <Box css={{ m: 'auto', height: 100, width: 100 }}>BOX</Box>
-    )
-    await screen.findByText('BOX')
-    expect(container).toMatchSnapshot()
-  })
-  it('has no programmatically detectable a11y issues', async () => {
-    render(<Box />, document.body)
-    const results = await axe(document.body)
-    expect(results).toHaveNoViolations()
-  })
-})
-```
-## Documentation
-Each component should have documentation that covers the following:
-- Variants
-- Available component-specific properties
-- When it should be used
-- When it _shouldn't_ be used (e.g. instead of using an `Input` directly, we'll often want to use an `InputField`)
-We use YAML frontmatter to add metadata to our documentation. The available fields are:
-- `title` - The title of the page, usually the name of the component. It can be made more readable, e.g. `CSS Wrapper` instead of `CSSWrapper`
-- `component` - The name of the component; this is used to extract prop-types, so must be exact. This can also be a comma separated list if additional components are exported or included in the root export. e.g. `Dialog,Dialog.Trigger,Dialog.Content`
-- `description` - A high-level description of the component and its usage will be shown as the page's opening statement.
-- `category` - A category to group with related components
-- `priority` - Provides the ability to prioritise the content within its category, e.g. `1` will be listed before other content that has higher or no `priority` defined
-There is no need to add a main `# Heading` to your page as the documentation site will add it automatically from your `title` field. Avoid manually adding a `PropsTable` as this will be automated, or adding custom `import`s as these will break the MDX parser.
-To show code examples and component previews in your documentation, use the code block syntax with a language, in our case, `tsx`.
-The following basic example will show just the code:
-````md
-```tsx
-<Button />
-```
-````
-Adding `preview` will also render the code above the code block:
-````md
-```tsx preview
-<Button />
-```
-````
-Adding `live` will render the code and adds the ability to live edit:
-````md
-```tsx live
-<Button />
-```
-````
-## Raising a PR
-In the PR, include:
-- A link to the ticket for the work
-- A brief description of the work you've done
-- Links to any designs provided
-- Screenshots of the built component
-- An explanation of any decisions that were made.
-If any of the patterns stated above weren't followed, please explain the reasons for it.
-**For a PR to be approved, tests and documentation are required as mentioned above.**
-After a PR has at least two thumbs-up and all the recommendations/conversations have been resolved, it can be merged into `main`.
-## Merging/Releasing
-After a PR was merged, releasing the changes is fully automated (please refer to the commits section). Once the pipeline has completed and the new version is released, you can then upgrade the package in the consuming project and use it.

package/dist/docs/CSSWrapper.mdx DELETED Viewed

@@ -1,10 +0,0 @@
----
-title: CSS Wrapper
-component: CSSWrapper
-category: Utilities
----
-If `CSSWrapper` is passed a truthy `css` prop, it renders its children wrapped in a `Box` with that `css`. If `css` is falsy, `CSSWrapper`
-just renders its children.
-Use `CSSWrapper` to wrap other components that have no natural container, but **only if the addition of a `<Box />` won’t change the component’s layout behaviour**.

package/dist/docs/Carousel.mdx DELETED Viewed

@@ -1,88 +0,0 @@
----
-title: Carousel
-component: Carousel,Carousel.Slider,Carousel.Slide,Carousel.Pagination,Carousel.ArrowPrevious,Carousel.ArrowNext
-description: The Carousel component displays a series of slides that can be swiped between or selected directly via buttons
-category: Media
----
-The `Carousel` must contain a `Carousel.Slider` with nested `Carousel.Slide`s and optionally can include a `Carousel.Pagination` and `Carousel.ArrowPrevious` / `Carousel.ArrowNext` for navigation between slides.
-`Carousel.Slider`’s optional `overflow` prop will cause it to render all slides at once, allowing the user to drag them into view. The `aria-selected` attribute can be used as a CSS selector to style slides according to whether they are currently selected (see below).
-Note that `Carousel.Slide`s must receive an `index` prop in order to correctly apply styling based on whether they are selected and that `Carousel.Arrows` should be rendered inside a parent with `position: relative` in order to be positioned correctly.
-```tsx preview
-<Carousel
-  slideWidth={200}
-  slideHeight={200}
-  numSlides={3}
-  css={{ position: 'relative' }}
->
-  <Carousel.ArrowPrevious css={{ position: 'absolute', left: '$2' }} />
-  <Carousel.ArrowNext css={{ position: 'absolute', right: '$2' }} />
-  <Carousel.Slider aria-label="Example carousel" css={{ mb: '$4' }}>
-    <Carousel.Slide index={1} aria-label="Slide 1">
-      <Box css={{ bg: '$primary', size: 200 }} />
-    </Carousel.Slide>
-    <Carousel.Slide index={2} aria-label="Slide 2">
-      <Box css={{ bg: '$primary', size: 200 }} />
-    </Carousel.Slide>
-    <Carousel.Slide index={3} aria-label="Slide 3">
-      <Box css={{ bg: '$primary', size: 200 }} />
-    </Carousel.Slide>
-  </Carousel.Slider>
-  <Carousel.Pagination css={{ mx: 'auto', width: 'max-content' }} />
-</Carousel>
-```
-### useCarousel hook
-useCarousel hook exposes the Carousel context outside.
-Documentation about the hook usage
-https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext
-Code snippet:
-```
-const Slider = ({ children }) => {
-  const carouselContext = useCarousel()
-  const [currentSlide, setCurrentSlide] = React.useState(
-    carouselContext.state.currentSlide
-  )
-  React.useEffect(() => {
-    function onChange() {
-      setCurrentSlide(carouselContext.state.currentSlide)
-    }
-    carouselContext.subscribe(onChange)
-    return () => carouselContext.unsubscribe(onChange)
-  }, [carouselContext])
-  console.log('carouselContext', carouselContext)
-  return (
-    <>
-      <div>Current slide: {currentSlide}</div>
-      {children}
-    </>
-  )
-}
-```
-```
- <Carousel
-  slideWidth={200}
-  slideHeight={200}
-  numSlides={2}
-  css={{ position: 'relative' }}
->
-  <Carousel.ArrowPrevious />
-  <Carousel.ArrowNext />
-  <Slider>
-    <Carousel.Slider>
-      // slides
-    </Carousel.Slider>
-  </Slider>
-</Carousel>
-```

package/dist/docs/Checkbox.mdx DELETED Viewed

@@ -1,19 +0,0 @@
----
-title: Checkbox
-component: Checkbox
-description: Checkbox provides a styled checkbox without  a label
-category: Form primitives
----
-Checkboxes should be accompanied by labels, so rather than using `Checkbox` directly in a UI,
-it’s normally best to the `CheckboxField` component, which combines a `Checkbox` with a `Label` and
-displays validation errors. Alternatively, use this `Checkbox` component to compose other field components
-with more specific requirements.
-```tsx preview
-<Checkbox />
-```
-```tsx preview
-<Checkbox checked="indeterminate"/>
-```

package/dist/docs/CheckboxField.mdx DELETED Viewed

@@ -1,14 +0,0 @@
----
-title: Checkbox Field
-component: CheckboxField
-description: Combines a Checkbox with a Label and InlineMessage
-category: Form fields
----
-`CheckboxField` renders a `Checkbox` inside an `InlineFieldWrapper`, providing a consistent layout for a checkbox, label and, when applicable, an error.
-```tsx preview
-<Form>
-  <CheckboxField label="Do you like checkboxes?" name="likeCheckboxes" />
-</Form>
-```

package/dist/docs/Chip.mdx DELETED Viewed

@@ -1,118 +0,0 @@
----
-title: Chip
-component: Chip, ChipGroup
-description: A component in the shape of a pill providing visual cues to prompt users to enter information or filter content.
-category: Feedback
----
-`Chip` itself is a primitive. It has no functional logic in itself, however, it is used to provide common styles for all the `Chip`-based components.
-```tsx preview
-<Chip>
-  <Chip.Content>Not the tasty kind</Chip.Content>
-</Chip>
-```
-## Gap
-`gap={ 1 | 2 | 3}`
-We provide three options for gap space between chips. `1` will be typically used within Input fields (multiselect) or when space is limited. `2` is the default option that provides a comfortable distance for the set.
-```tsx preview
-<ChipGroup gap={1}>
-  <Chip>
-    <Chip.Content>A</Chip.Content>
-  </Chip>
-  <Chip>
-    <Chip.Content>B</Chip.Content>
-  </Chip>
-  <Chip>
-    <Chip.Content>C</Chip.Content>
-  </Chip>
-</ChipGroup>
-```
-## Size
-`size="sm | md | lg"`
-```tsx preview
-<ChipGroup align="center">
-  <Chip size="sm">
-    <Chip.Content>
-      <Icon is={Upload} />A
-    </Chip.Content>
-  </Chip>
-  <Chip size="md">
-    <Chip.Content>
-      <Icon is={Upload} />B
-    </Chip.Content>
-  </Chip>
-  <Chip size="lg">
-    <Chip.Content>
-      <Icon is={Upload} />C
-    </Chip.Content>
-  </Chip>
-  <Chip
-    size={{
-      '@initial': 'lg',
-      '@md': 'md',
-      '@lg': 'sm'
-    }}
-  >
-    <Chip.Content>
-      <Icon is={Upload} />C
-    </Chip.Content>
-  </Chip>
-</ChipGroup>
-```
-## Icon
-When an `<Icon />` is used as an immediate child of `<Chip.Content />` we automatically transform it to
-a `<Chip.Icon />` which applies the correct styles and sizing to it.
-```tsx preview
-<ChipGroup>
-  <Chip>
-    <Chip.Content>
-      <Icon is={Upload} /> Icon
-    </Chip.Content>
-  </Chip>
-  <Chip>
-    <Chip.Content>
-      <Chip.Icon is={Upload} /> Chip.Icon
-    </Chip.Content>
-  </Chip>
-</ChipGroup>
-```
-If additional nesting is needed; you can use the `<Chip.Icon />` component directly.
-```tsx preview
-<ChipGroup>
-  <Chip>
-    <Chip.Content>
-      <div>
-        <Icon is={Upload} /> Icon (wrong sizing)
-      </div>
-    </Chip.Content>
-  </Chip>
-  <Chip>
-    <Chip.Content>
-      <div>
-        <Chip.Icon is={Upload} /> Chip.Icon
-      </div>
-    </Chip.Content>
-  </Chip>
-</ChipGroup>
-```
-## Disabled
-```tsx preview
-<Chip data-disabled>
-  <Chip.Content>Not the tasty kind</Chip.Content>
-</Chip>
-```

package/dist/docs/ChipDismissibleGroup.mdx DELETED Viewed

@@ -1,33 +0,0 @@
----
-title: Chip Dismissible Group
-component: ChipDismissibleGroupRoot,ChipDismissibleGroup.Item
-description: Combines the DismissibleGroup logic together with the Chip primitive styling
-category: Feedback
----
-Used to visualise groups of dismissible information, in fields such as an entity or different attributes. Can also be used to represent removable filtering criteria.
-```tsx preview
-<ChipDismissibleGroup
-  onDismiss={(value) => {
-    alert(`dismiss ${value}`)
-  }}
->
-  <ChipDismissibleGroup.Item value="a" dismissActionLabel="Dismiss 'A'">
-    <Icon is={Person} />
-    Dismissible
-  </ChipDismissibleGroup.Item>
-  <ChipDismissibleGroup.Item value="b" dismissActionLabel="Dismiss 'B'">
-    <Icon is={Person} />
-    Dismissible
-  </ChipDismissibleGroup.Item>
-  <ChipDismissibleGroup.Item
-    value="c"
-    dismissActionLabel="Dismiss 'C'"
-    disabled
-  >
-    <Icon is={Person} />
-    Dismissible
-  </ChipDismissibleGroup.Item>
-</ChipDismissibleGroup>
-```

package/dist/docs/ChipToggleGroup.mdx DELETED Viewed

@@ -1,27 +0,0 @@
----
-title: Chip Toggle Group
-component: ChipToggleGroupRoot,ChipToggleGroup.Item
-description: Combines the Toggle Group radix component with the Chip primitive styling
-category: Feedback
----
-Used as a method for filtering a collection of data. Acts like multiple or single selection. Each chip toggles between selected and unselected. When selected, a checkmark appears as the leading icon.
-```tsx preview
-<ChipToggleGroup
-  type="multiple"
-  defaultValue={['a', 'b']}
-  onValueChange={(value) => {
-    console.log(value)
-  }}
->
-  <ChipToggleGroup.Item value="a">A</ChipToggleGroup.Item>
-  <ChipToggleGroup.Item value="b" disabled>
-    B
-  </ChipToggleGroup.Item>
-  <ChipToggleGroup.Item value="c">C</ChipToggleGroup.Item>
-  <ChipToggleGroup.Item value="d" disabled>
-    D
-  </ChipToggleGroup.Item>
-</ChipToggleGroup>
-```

package/dist/docs/Combobox.mdx DELETED Viewed

@@ -1,44 +0,0 @@
----
-title: Combobox
-component: Combobox,Combobox.Input,Combobox.Popover,Combobox.List,Combobox.Option,Combobox.OptionText
-description: Combobox combines a text input with a list of suggested values
-category: Form primitives
----
-`Combobox` wraps Reach UI's `Combobox` component with default styling and accepts all the same props. See [the Reach UI docs](https://reach.tech/combobox/) for details.
-Arbitrary components can be nested inside the `Combobox.Popover` to allow for more advanced usecases, e.g. adding a new value to the list of suggestions
-Note that when combined with a `Label`, the `id` that matches the `Label`'s `htmlFor` prop should go on the `Combobox.Input`.
-```jsx live
-<Box css={{ width: '400px' }}>
-  <Label css={{ mb: '$3' }} htmlFor="someid">
-    What's your favourite fruit?
-  </Label>
-  <Combobox onSelect={console.log} openOnFocus>
-    <Combobox.Input id="someid" />
-    <Combobox.Popover>
-      <Combobox.List>
-        <Combobox.Option value="Apple" />
-        <Combobox.Option value="Banana" />
-        <Combobox.Option value="Cranberry" />
-        <Combobox.Option value="Dragon fruit" />
-        <Flex css={{ alignItems: 'center', p: '$2' }}>
-          <Input size="sm" placeholder="New fruit" />
-          <Button
-            size="sm"
-            css={{ ml: '$2' }}
-            onClick={() =>
-              alert('Nest other interactive UI here for advanced usecases')
-            }
-          >
-            Add a new fruit
-          </Button>
-        </Flex>
-      </Combobox.List>
-    </Combobox.Popover>
-  </Combobox>
-</Box>
-```