@atom-learning/components 2.32.3-beta.0 → 2.33.0

package/dist/docs/DataTable.mdx

@@ -1,279 +0,0 @@
----
-title: DataTable
-component: DataTable, DataTable.Table, DataTable.Head, DataTable.HeaderCell, DataTable.Body, DataTable.Row, DataTable.DataCell, DataTable.GlobalFilter, DataTable.Loading, DataTable.Error
-description: Displays tabular data with features such as sorting and pagination
-category: Content
----
-
-`DataTable` provides complex features for tables, like sorting and pagination. It's built around the `@tanstack/react-table` library and exposes the `table` state from that library directly. All util functions from the library are also compatible with `DataTable`. It's worth a good read of [`@tanstack/react-table`'s documentation](https://tanstack.com/table/v8/docs/guide/introduction) too, since we won't be repeating much of it here.
-
-`DataTable` and its subcomponents are designed to be very simple to use. This is achieved by abstracting complex and/or boilerplate logic away from the consumer. For example, `DataTable.Pagination` can be dropped inside a `DataTable` to paginate the table's data without the need to add any configuration on `DataTable` itself. This is achieved by having `DataTable.Pagination` itself use the `applyPagination` and `setPageSize` methods exposed by `useDataTable` on its first render. This pattern should be replicated wherever practical to maintain the best developer experience possible.
-
-## Anatomy
-
-The root `DataTable` component manages the table's state and exposes it via the React Context API. This state can be accessed by any child components by calling `useDataTable`. You can pass an `initialState` prop to `DataTable` as described in the [`@tanstack/react-table` docs](https://tanstack.com/table/v8/docs/api/core/table#initialstate).
-
-Other `DataTable` components call `useDataTable` and provide useful default implementations for common patterns. For example, `DataTable.Head` will render a header for every column defined in the parent `DataTable`. `DataTable.Body` will render a row for every data item. `DataTable.Table` combines both `DataTable.Head` and `DataTable.Body`.
-
-### Using defaults vs rolling your own
-
-Here's a simple config for some table data and columns.
-
-```tsx
-// import { createColumnHelper } from '@tanstack/react-table'
-
-const columnHelper = createColumnHelper<{
-  name: string
-  hobby: string
-}>()
-
-const columns = [
-  columnHelper.accessor('name', {
-    cell: (info) => info.getValue()
-  }),
-  columnHelper.accessor('hobby', {
-    cell: (info) => info.getValue()
-  }),
-  // Columns created with columnHelper.display won't be sortable.
-  // They need a header to be set manually since they're not just reading
-  // a property from the row.
-  columnHelper.display({
-    cell: (info) => <button>do something</button>,
-    header: 'Actions'
-  })
-]
-
-const data = [
-  { name: 'chrissy', hobby: 'bare-knuckle boxing' },
-  { name: 'agatha', hobby: 'crossfit' },
-  { name: 'betty', hobby: 'acting' }
-]
-```
-
-There are basically two ways to use `DataTable` to build a table from this config. The first uses the highest-level components that are bundled into `DataTable` to provide useful default behaviours with minimal code. The second directly accesses the state from `DataTable` and combines it with the `Table` UI components to achieve the same thing. This demonstrates how you could create more custom table UIs without the need to extend the high-level components.
-
-#### With Defaults
-
-The following two examples are exactly equivalent in their output. The second example is included to demonstrate what `DataTable`'s subcomponents do: they bundle up UI components and logic to provide useful defaults. They exist at various levels of abstraction, e.g. `DataTable.Table` renders `DataTable.Body`, which renders `DataTable.Row`. This means that you can use whichever component provides useful functionality for your use case while still being low-level enough to let you combine it with your own custom logic.
-
-```tsx
-<DataTable columns={columns} data={data}>
-  <DataTable.Table sortable css={{mb: '$4'}}/>
-  <DataTable.Pagination pageSize={5} />
-</DataTable>
-
-<DataTable columns={columns} data={data}>
-  <Table>
-    <DataTable.Head sortable />
-    <DataTable.Body />
-  </Table>
-  <DataTable.Pagination pageSize={5} />
-</DataTable>
-```
-
-### Rolling your own
-
-If you need more flexibility than the default implementations provide, you can roll your own. Note that you can mix and match default implementations with your own. For example you could write your own table head implementation but use `DataTable.Body` for the body.
-
-Note also that `useDataTable` can only be called by a child component of `DataTable`. In a real example, you'll probably have a separate named component which makes the `useDataTable` call, because if you're not using the defaults as above then you probably have some complex logic involved. In this example we've got an inline child component for simplicity.
-
-Note that if you update the value of the `data` prop, it will reset the state of the table. This is useful if you are manipulating the data outside the context of the table.
-
-```tsx
-<DataTable columns={columns} data={data}>
-  {() => {
-    const { getHeaderGroups, getRowModel, setGlobalFilter, getState } =
-      useDataTable()
-    const { globalFilter } = getState()
-
-    return (
-      <>
-        <Label htmlFor="search">User search</Label>
-        <SearchInput
-          name="search"
-          value={globalFilter}
-          onChange={setGlobalFilter}
-        />
-        <Table>
-          <Table.Header>
-            {getHeaderGroups().map((headerGroup) => (
-              <Table.Row key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  const sort = header.column.getIsSorted()
-                  return (
-                    <Table.HeaderCell
-                      onClick={header.column.getToggleSortingHandler()}
-                      {...props}
-                    >
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                      {sort && { asc: '^', desc: 'v' }[sort as string]}
-                    </Table.HeaderCell>
-                  )
-                })}
-              </Table.Row>
-            ))}
-          </Table.Header>
-          <Table.Body>
-            {getRowModel().rows.map((row) => (
-              <Table.Row>
-                {row.getVisibleCells().map((cell) => (
-                  <Table.Cell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </Table.Cell>
-                ))}
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      </>
-      // Then you could build your own pagination here too I guess? If you really wanted to?
-    )
-  }}
-</DataTable>
-```
-
-### Server-side pagination and sorting
-
-`DataTable` can be used with local pagination or server-side pagination (getting only the data needed for the current page). To use one or the other, you have to use the `data` or `getAsyncData` prop respectively.
-
-The `getAsyncData` function accepts an object with the necessary parameters to get the relevant piece of data for the current page and order. All the parameters are optional, with these defaults:
-
-```
-{
-  pageIndex: 0,
-  pageSize: 10,
-  sortBy: undefined,
-  sortDirection: undefined,
-  globalFilter: ''
-}
-```
-
-The response from the `getAsyncData` function must match the following schema:
-
-```ts
-{
-  results: Array<Record<string, unknown>> // your current page data, sorted if specified
-  total: number // the total number of elements in your data
-}
-```
-
-A loading state using `<DataTable.Loading>` is automatically included in `DataTable` which is visible while the `getAsyncData` promise is pending.
-
-You can use `DataTable.Error` to display your own error component when the `getAsyncData` function promise rejects. Notice `DataTable.Error` doesn't render anything on its own, but whatever is passed as childern.
-
-```tsx
-<DataTable
-  columns={columns}
-  defaultPageSize={10}
-  defaultSort={{ column: 'name', direction: 'asc' }}
-  initialState={{ pagination: { pageIndex: 0, pageSize: 10 } }}
-  getAsyncData={async ({
-    pageIndex,
-    pageSize,
-    sortBy,
-    sortDirection,
-    globalFilter
-  }) => {
-    const params = new URLSearchParams({
-      page: pageIndex,
-      pageSize,
-      order: sortBy,
-      dir: sortDirection,
-      search: globalFilter
-    })
-    const response = await fetch(`https://your-api?${params.toString()}`)
-    const { results, total } = await response.json()
-
-    return { results, total }
-  }}
->
-  <DataTable.Table sortable css={{ mb: '$4', minWidth: '500px' }} />
-  <DataTable.Error>
-    {(retry) => <Button onClick={retry}>Try again</Button>}
-  </DataTable.Error>
-  <DataTable.Pagination />
-</DataTable>
-```
-
-`DataTable.Error` provides a `retry` function to the children which allows you to recall the `getAsyncData` function. The `retry` function can be called with all the paginated parameters as an optional object. If no parameters are provided, `retry` will be called with the last paginated options.
-
-```tsx
-<DataTable.Error>
-  {(retry) => (
-    <Button
-      onClick={() =>
-        retry?.({
-          pageIndex: 5,
-          pageSize: 10,
-          sortBy: 'name',
-          sortDirection: 'asc',
-          globalFilter: ''
-        })
-      }
-    >
-      Retry
-    </Button>
-  )}
-</DataTable.Error>
-```
-
-## Features
-
-### Search
-
-`DataTable.Search` renders a search input that filters the whole table by matching the input against values from any table column.
-
-### Sorting
-
-A `DataTable`'s data can be sorted by default and can also be sortable by the user. These two options are independent of each other.
-
-#### Default sorting
-
-`DataTable` takes an optional `defaultSort` prop to configure the column and direction for the table's default sorting, e.g. `{column: 'name', direction: 'asc'}`
-
-#### User sorting
-
-If `DataTable`'s `isSortable` state is `true`, then `DataTable.Header` will be clickable to toggle between ascending, descending and no sorting in any sortable columns. `DataTable.Head` and `DataTable.Table` take an optional boolean `sortable` prop to configure this option.
-
-### Pagination
-
-`DataTable.Pagination` can be passed as a child to `DataTable` to render the pagination UI and configure the parent `DataTable` to paginate its data. Note: there is currently a bug where `DataTable` will render all rows on the initial render, even when paginated. There is no visible effect, but it can cause performance issues on large tables. The workaround for this is to pass an `initialState` prop to `DataTable`. E.g. `initialState={pagination: {pageSize: 5, pageIndex: 0}}`. This will force pagination to apply properly on the initial render. Make sure the `pagination` prop matches the config you use in `DataTable.Pagination`, as the latter will take precedence after the initial render.
-
-### Drag and drop
-
-The `DataTable.DragAndDropTable` can be rendered in place of `DataTable.Table` to allow users to reorder table rows via drag and drop. It takes an optional `onDragAndDrop` prop which is a function that fires when rows have been re-ordered via drag-and-drop. Use this to sync those changes with external data sources.
-
-Note that column sorting conflicts with drag and drop behaviour. In any context where you allow drag and drop reordering, you probably want to disable column sorting (see User Sorting above). Similarly, you should probably disable pagination because users won't be able to drag rows across page boundaries.
-
-#### Row IDs
-
-Drag-and-drop functionality relies on each table row having a unique ID. `DataTable.DragAndDropContainer` will throw an error if your don't provide unique IDs for each row in the `data` provided to `DataTable`, so you should consider wrapping your table in an `ErrorBoundary` to reduce the impact on your user if there is a problem with your data. By default, `DataTable.DragAndDropContainer` will look for this id in an `id` property on each object in `data`. You can use the `idColumn` prop to provide the name of a different property, e.g. `userId`, that already exists on your data so that you don't have to generate new IDs just for the table. For example, you could provide data like this with no additional configuration:
-
-```tsx
-const data = [
-  { name: 'chrissy', hobby: 'bare-knuckle boxing', id: 1 },
-  { name: 'agatha', hobby: 'crossfit', id: 2 },
-  { name: 'betty', hobby: 'acting', id: 3 }
-]`
-
-<DataTable data={data} columns={columns}>
-  <DataTable.DragAndDropTable onDragAndDrop={(oldIndex, newIndex, newData) => console.log(oldIndex, newIndex, newData)}/>
-</DataTable>
-```
-
-Or you could provide this data and specify the id column accordingly:
-
-```tsx
-const data = [
-  { name: 'chrissy', hobby: 'bare-knuckle boxing', userId: 1 },
-  { name: 'agatha', hobby: 'crossfit', userId: 2 },
-  { name: 'betty', hobby: 'acting', userId: 3 }
-]`
-
-<DataTable data={data} columns={columns}>
-  <DataTable.DragAndDropTable idColumn="userId" onDragAndDrop={(oldIndex, newIndex, newData) => console.log(oldIndex, newIndex, newData)} />
-</DataTable>
-```

package/dist/docs/DateField.mdx

@@ -1,20 +0,0 @@
----
-title: Date Field
-component: DateField
-description: DateField renders a field composed of an DateInput, a Label and a InlineMessage
-category: Form fields
----
-
-`DateField` is the preferred way to render a form field for dates.
-
-In addition to text `Label` (required) and a validation error (optional), `DateField` accepts all the same props as `DateInput` and will pass them on to the `DateInput` it renders. However, as with all our composed components,
-`DateField`’s `css` prop will be applied to a containing `Box`—the styling of the individual components inside `DateField` cannot be altered.
-
-Err on the side of using consistent form fields, but if you really need something with different styling then consider composing your own field from the
-`DateInput`, `Label` and `InlineMessage` components.
-
-```tsx preview
-<Form>
-  <DateField name="exam-date" label="Exam date" initialDate={new Date()} />
-</Form>
-```

package/dist/docs/DateInput.mdx

@@ -1,87 +0,0 @@
----
-title: Date Input
-component: DateInput
-description: A form component that provides a styled date selector without a label
-category: Form primitives
----
-
-Date Inputs should be accompanied by labels, so rather than using `DateInput` directly in a UI,
-it’s normally best to the `DateField` component, which combines a `DateInput` with a `Label` and
-displays validation errors. Alternatively, use this `DateInput` component to compose other field components
-with more specific requirements.
-
-`DateInput` is composed from [Dayzed](https://github.com/deseretdigital/dayzed), so further reading on the API can be found there. Some options from Dayzed are set by default in order to provide a uniform experience. For example, the prop `showOutsideDays`, which shows days outside the current calendar month that would appear on the grid, defaults to true in order to avoid extra whitespace.
-
-```tsx preview
-<DateInput />
-```
-
-## Initial Date
-
-The `DateInput` component allows passing of an initial date, which will be selected by default. If you wish this to be the current date, you can use `new Date()` as per the preview below. Strings are also accepted and default to the `DD/MM/YYYY` format. It is recommended to use standard constructors for the date object as per MDN specifications.
-
-```tsx preview
-<DateInput initialDate={new Date()} />
-```
-
-## Date Format
-
-Any combination of date formats can be passed in as a string, such as `DD/MM/YY` or `YYYY/MM/DD`. The default is `DD/MM/YYYY`. A full list of possible formats can be found [here](https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens).
-
-```tsx
-<DateInput dateFormat="YYYY/MM/DD" />
-```
-
-## Dayzed customisation
-
-### First Day of Week
-
-The calendar that is rendered by this component can have its first day of the week customised for different locales. The default is 1 (Monday), but for locales such as the US, pass in `firstDayOfWeek={0}` to set it to Sunday.
-
-```tsx
-<DateInput firstDayOfWeek={0} />
-```
-
-## Translations
-
-The weekday and month names can be changed to anything you wish by passing in an array of strings to `weekdayNames` and `monthNames`.
-
-> NOTE: It is very important that you keep these labels in the right order. Weekdays must be `Sun -> Sat` and months must be `Jan -> Dec`.
-
-```tsx preview
-<DateInput
-  weekdayNames={['D', 'L', 'M', 'X', 'J', 'V', 'S']}
-  monthNames={[
-    'Enero',
-    'Febrero',
-    'Marzo',
-    'Abril',
-    'Mayo',
-    'Junio',
-    'Julio',
-    'Agosto',
-    'Septiembre',
-    'Octubre',
-    'Noviembre',
-    'Diciembre'
-  ]}
-/>
-```
-
-You can also translate the internal labels for accessibility purposes. The `labels` prop accepts an object containing three keys, `open`, `next`, and `previous`. These should all be strings.
-
-```tsx
-<DateInput
-  labels={{
-    open: 'Open label',
-    next: 'Next month label',
-    previous: 'Previous month label'
-  }}
-/>
-```
-
-If you need even finer control over what happens with the selected date, you can pass `onChange`, which takes a `Date` type as input.
-
-```tsx
-<DateInput onChange={(date) => doSomethingWith(date)} />
-```

package/dist/docs/Dialog.mdx

@@ -1,68 +0,0 @@
----
-title: Dialog
-component: Dialog,Dialog.Trigger,Dialog.Content,Dialog.Close
-description: The Dialog component renders its children inside a modal and puts a dimmer over the rest of the screen
-category: Surfaces
----
-
-`Dialog` exports many components that combine to create a modal. The `Dialog.Trigger` renders a `<button>` by default, but this can be overridden with the `asChild` prop, which will instead add all the functional and accessibility requirements to the child component instead (see the below example).
-
-Also, note that the component must accept a `ref`.
-
-Read more about the underlying UI component on the [Radix UI documentation site](https://radix-ui.com/primitives/docs/components/dialog).
-
-```tsx preview
-<Dialog>
-  <Dialog.Trigger asChild>
-    <Button>Open Dialog</Button>
-  </Dialog.Trigger>
-  <Dialog.Content>
-    <Heading size="sm" css={{ mb: '$3' }}>
-      Dialog
-    </Heading>
-    <Text size="sm" css={{ mb: '$3' }}>
-      The `Dialog` can display any type of element as a trigger and has the
-      content hidden by default
-    </Text>
-    <Button appearance="outline" size="sm" as={Dialog.Close}>
-      Close Dialog
-    </Button>
-  </Dialog.Content>
-</Dialog>
-```
-
-`Dialog` may be rendered without a close button. It's important to note that in case the default close button is hidden, one would need to provide an action button explicitly, to close the dialog.
-
-```tsx
-<Dialog>
-  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
-  <Dialog.Content showCloseButton={false}>
-    <Text>
-      Dialog.Close is used below to retain the correct accessible roles and
-      related logic
-    </Text>
-    <Button as={Dialog.Close}>Close</Button>
-  </Dialog.Content>
-</Dialog>
-```
-
-`Dialog` can also be rendered with a custom background. Important to note that `Dialog.Background` needs to be a child of `Dialog.Content`
-
-```tsx
-<Dialog>
-  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
-  <Dialog.Content>
-    <Dialog.Background>
-      <Text>
-        Custom Background Content
-      </Text>
-    </Dialog.Background>
-    <Text>
-      Dialog.Background will appear above the Overlay, but below the DialogContent
-    </Text>
-    <Button as={Dialog.Close}>Close</Button>
-  </Dialog.Content>
-</Dialog>
-```
-
-For any modifications of the default `Dialog` visuals, for example bypassing the panel design entirely, we recommend utilising the Radix UI Dialog component directly. You will need to wrap each exported component within a `styled()` function to enable `css` and `as`, and compose together `Dialog.Overlay` and `Dialog.Close` within `Dialog.Content` to mimic the behaviour of this modal.

package/dist/docs/Dismissible.mdx

@@ -1,48 +0,0 @@
----
-title: Dismissible
-component: DismissibleRoot,Dismissible.Trigger
-description: An element with a dismiss button which removes it from the view
-category: Primitives
----
-
-`Dismissible` itself is a primitive. It has not been designed so it should not be used out-of-the-box as a user facing component.
-Test the component is accessible depending on each implementation use case.
-
-```tsx preview
-<Dismissible
-  value="a"
-  onDismiss={(value) => {
-    alert(`dismiss ${value}`)
-  }}
->
-  Press the trigger to dismiss this ->
-  <Dismissible.Trigger aria-label="Dismiss 'a'" />
-</Dismissible>
-```
-
-```tsx preview
-<Dismissible
-  value="custom"
-  onDismiss={(value) => {
-    alert(`dismiss ${value}`)
-  }}
-  asChild
->
-  <Box
-    css={{
-      width: '100%',
-      fontFamily: 'system-ui',
-      border: '1px solid',
-      borderRadius: 4,
-      display: 'flex',
-      justifyContent: 'space-between',
-      padding: 8
-    }}
-  >
-    Basic custom implementation example
-    <Dismissible.Trigger asChild>
-      <button type="button">Custom Dismiss Trigger</button>
-    </Dismissible.Trigger>
-  </Box>
-</Dismissible>
-```

package/dist/docs/DismissibleGroup.mdx

@@ -1,29 +0,0 @@
----
-title: Dismissible Group
-component: DismissibleGroupRoot,DismissibleGroup.Item,DismissibleGroup.Trigger
-description: A set of dismissible elements.
-category: Primitives
----
-
-`DismissibleGroup` itself is a primitive. It has not been designed so it should not be used out-of-the-box as a user facing component.
-Test the component is accessible depending on each implementation use case.
-
-```tsx preview
-<DismissibleGroup
-  onDismiss={(value) => {
-    alert(`dismiss ${value}`)
-  }}
->
-  <DismissibleGroup.Item value="a">
-    A
-    <DismissibleGroup.Trigger aria-label="Dismiss A" />
-  </DismissibleGroup.Item>
-  <DismissibleGroup.Item value="b" disabled>
-    B
-    <DismissibleGroup.Trigger />
-  </DismissibleGroup.Item>
-  <DismissibleGroup.Item value="c" disabled>
-    C
-  </DismissibleGroup.Item>
-</DismissibleGroup>
-```

package/dist/docs/Divider.mdx

@@ -1,16 +0,0 @@
----
-title: Divider
-component: Divider
-description: Use Divider to render a horizontal or vertical line which will extend to parent node's width / height
-category: Content
----
-
-It adds default styling and the `css` prop. Provide `orientation` as `horizontal` or `vertical` to achieve desirable output
-
-```tsx preview
-<Divider />
-```
-
-```tsx preview
-<Divider orientation="vertical"/>
-```

package/dist/docs/DropdownMenu.mdx

@@ -1,30 +0,0 @@
----
-title: Dropdown Menu
-component: DropdownMenu,DropdownMenu.Trigger,DropdownMenu.Content,DropdownMenu.Item,DropdownMenu.Separator
-description: The DropdownMenu components can be composed to create flexible dropdown menus with different types of items.
-category: Surfaces
----
-
-`DropdownMenu` exports many components that combine to create a dropdown menu. The `DropdownMenu.Trigger` renders a `<button>` by default, but this can be overridden with the `asChild` prop, which will instead add all the functional and accessibility requirements to the child component instead (see the below example).
-
-Also, note that the component must accept a `ref`.
-
-Read more about the underlying UI component on the [Radix UI documentation site](https://radix-ui.com/primitives/docs/components/dropdown-menu).
-
-```tsx preview
-<DropdownMenu>
-  <DropdownMenu.Trigger asChild>
-    <Button>Click me</Button>
-  </DropdownMenu.Trigger>
-  <DropdownMenu.Content sideOffset={16}>
-    <DropdownMenu.Item onClick={() => alert('Great clicking!')}>
-      Item 1
-    </DropdownMenu.Item>
-    <DropdownMenu.Item>Item 2</DropdownMenu.Item>
-    <DropdownMenu.Separator />
-    <DropdownMenu.LinkItem href="/logout">Log Out</DropdownMenu.LinkItem>
-  </DropdownMenu.Content>
-</DropdownMenu>
-```
-
-For any modifications of the default `DropdownMenu` visuals, we recommend utilising the Radix UI DropdownMenu component directly. You will need to wrap each exported component within a `styled()` function to enable the `css` prop.

package/dist/docs/EmptyState.mdx

@@ -1,23 +0,0 @@
----
-title: Empty State
-component: EmptyState
-description: Empty states are messages that provide an explanation of an interface in absence of content.
-category: Content
----
-
-`EmptyState` exports a number of components that can be composed together to create an `EmptyState` message.
-The message can include Title and/or Body and sometimes they appear together with an illustration and actionable buttons.
-There are 5 different size variants of `EmptyState` ( 'xs', 'sm', 'md', 'lg' and 'xl').
-
-```jsx preview live
-<EmptyState size="lg">
-  <EmptyState.Image
-    src="https://app.atomlearning.com/dist/29a378dc127c669808f2.svg"
-    alt=""
-  />
-  <EmptyState.Title>No users found!</EmptyState.Title>
-  <EmptyState.Body>
-    You need to add some users before you can use this feature
-  </EmptyState.Body>
-</EmptyState>
-```

package/dist/docs/FieldWrapper.mdx

@@ -1,30 +0,0 @@
----
-title: Field Wrapper
-component: FieldWrapper,InlineFieldWrapper
-description: A utility component to help with composing consistent form fields
-category: Form primitives
----
-
-`FieldWrapper` renders a `Label` and (when applicable) a `InlineMessage`. Use it to wrap any type of input to create a consistent set of form fields.
-
-```tsx preview
-<FieldWrapper label="Example Field" fieldId="example">
-  <Input name="example" id="example" />
-</FieldWrapper>
-```
-
-`InlineFieldWrapper` does the same but renders the label inline with the input, for example:`Checkbox`es and `Radio`s.
-
-```tsx preview
-<InlineFieldWrapper label="Example Checkbox">
-  <Checkbox name="example2" id="example2" />
-</InlineFieldWrapper>
-```
-
-It can also be used alongside components like `Input`, `Select` or `Switch` when you may require some condensed inline fields. You can use the `direction` and `align` props to handle how the label is positioned relative to the component, in this case the label is placed on the right with `direction="reverse"` and it's aligned centrally with the switch.
-
-```tsx preview
-<InlineFieldWrapper direction="reverse" align="center" label="Toggle a field">
-  <Switch />
-</InlineFieldWrapper>
-```