From 905c0fe4af178fbb5ab108d57f377cdc0ab93141 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 20 Feb 2024 01:04:40 +0100
Subject: [PATCH] wip

---
 package.json                                  |    3 +
 src/components/Contents/AddContentPopover.tsx |   29 +
 src/components/Contents/Contents.tsx          |  168 ++
 src/components/Contents/ContentsCell.tsx      |   77 +
 .../Contents/ItemActionsPopover.tsx           |   82 +
 .../Contents/styles/basic/BlockToolbar.css    |   52 +
 .../Contents/styles/basic/Breadcrumbs.css     |   59 +
 .../Contents/styles/basic/Button.css          |   44 +
 .../Contents/styles/basic/Calendar.css        |   81 +
 .../Contents/styles/basic/Checkbox.css        |  123 +
 .../Contents/styles/basic/CheckboxGroup.css   |   20 +
 .../Contents/styles/basic/ComboBox.css        |  125 +
 .../Contents/styles/basic/DateField.css       |   68 +
 .../Contents/styles/basic/DatePicker.css      |   71 +
 .../Contents/styles/basic/DateRangePicker.css |  104 +
 .../Contents/styles/basic/Dialog.css          |   14 +
 src/components/Contents/styles/basic/Form.css |   32 +
 .../Contents/styles/basic/GridList.css        |  188 ++
 .../Contents/styles/basic/Label.css           |   18 +
 src/components/Contents/styles/basic/Link.css |   41 +
 .../Contents/styles/basic/ListBox.css         |  228 ++
 src/components/Contents/styles/basic/Menu.css |  107 +
 .../Contents/styles/basic/Meter.css           |   38 +
 .../Contents/styles/basic/Modal.css           |   84 +
 .../Contents/styles/basic/NumberField.css     |   88 +
 .../Contents/styles/basic/Popover.css         |   88 +
 .../Contents/styles/basic/ProgressBar.css     |   50 +
 .../Contents/styles/basic/RadioGroup.css      |   87 +
 .../Contents/styles/basic/RangeCalendar.css   |  102 +
 .../Contents/styles/basic/SearchField.css     |   84 +
 .../Contents/styles/basic/Select.css          |  167 ++
 .../Contents/styles/basic/Slider.css          |  107 +
 .../Contents/styles/basic/Switch.css          |   74 +
 .../Contents/styles/basic/Table.css           |  279 ++
 src/components/Contents/styles/basic/Tabs.css |  102 +
 .../Contents/styles/basic/TagGroup.css        |   91 +
 .../Contents/styles/basic/TextField.css       |   50 +
 .../Contents/styles/basic/TimeField.css       |   68 +
 .../Contents/styles/basic/ToggleButton.css    |   54 +
 .../Contents/styles/basic/Toolbar.css         |   47 +
 .../Contents/styles/basic/Tooltip.css         |   69 +
 .../Contents/styles/basic/icons.css           |  108 +
 src/components/Contents/styles/basic/main.css |   43 +
 .../Contents/styles/basic/theme.css           |  133 +
 .../Contents/styles/quanta/Contents.css       |   94 +
 .../Contents/styles/quanta/Popover.css        |    3 +
 .../Contents/styles/quanta/Select.css         |   38 +
 .../Contents/styles/quanta/Table.css          |    4 +
 .../Contents/styles/quanta/TextField.css      |  164 ++
 .../Contents/styles/quanta/colors.css         |   47 +
 .../Contents/styles/quanta/main.css           |   14 +
 src/components/Table/Column.tsx               |   19 +
 src/components/Table/Row.tsx                  |   37 +
 src/components/Table/Table.tsx                |   87 +
 src/components/Table/TableHeader.tsx          |   29 +
 .../components/manage/Contents/Contents.jsx   | 2324 +++++++++++++++++
 src/helpers/indexes.ts                        |   40 +
 src/helpers/types.d.ts                        |   60 +
 yarn.lock                                     | 2078 +++++++++++++--
 59 files changed, 8608 insertions(+), 177 deletions(-)
 create mode 100644 src/components/Contents/AddContentPopover.tsx
 create mode 100644 src/components/Contents/Contents.tsx
 create mode 100644 src/components/Contents/ContentsCell.tsx
 create mode 100644 src/components/Contents/ItemActionsPopover.tsx
 create mode 100644 src/components/Contents/styles/basic/BlockToolbar.css
 create mode 100644 src/components/Contents/styles/basic/Breadcrumbs.css
 create mode 100644 src/components/Contents/styles/basic/Button.css
 create mode 100644 src/components/Contents/styles/basic/Calendar.css
 create mode 100644 src/components/Contents/styles/basic/Checkbox.css
 create mode 100644 src/components/Contents/styles/basic/CheckboxGroup.css
 create mode 100644 src/components/Contents/styles/basic/ComboBox.css
 create mode 100644 src/components/Contents/styles/basic/DateField.css
 create mode 100644 src/components/Contents/styles/basic/DatePicker.css
 create mode 100644 src/components/Contents/styles/basic/DateRangePicker.css
 create mode 100644 src/components/Contents/styles/basic/Dialog.css
 create mode 100644 src/components/Contents/styles/basic/Form.css
 create mode 100644 src/components/Contents/styles/basic/GridList.css
 create mode 100644 src/components/Contents/styles/basic/Label.css
 create mode 100644 src/components/Contents/styles/basic/Link.css
 create mode 100644 src/components/Contents/styles/basic/ListBox.css
 create mode 100644 src/components/Contents/styles/basic/Menu.css
 create mode 100644 src/components/Contents/styles/basic/Meter.css
 create mode 100644 src/components/Contents/styles/basic/Modal.css
 create mode 100644 src/components/Contents/styles/basic/NumberField.css
 create mode 100644 src/components/Contents/styles/basic/Popover.css
 create mode 100644 src/components/Contents/styles/basic/ProgressBar.css
 create mode 100644 src/components/Contents/styles/basic/RadioGroup.css
 create mode 100644 src/components/Contents/styles/basic/RangeCalendar.css
 create mode 100644 src/components/Contents/styles/basic/SearchField.css
 create mode 100644 src/components/Contents/styles/basic/Select.css
 create mode 100644 src/components/Contents/styles/basic/Slider.css
 create mode 100644 src/components/Contents/styles/basic/Switch.css
 create mode 100644 src/components/Contents/styles/basic/Table.css
 create mode 100644 src/components/Contents/styles/basic/Tabs.css
 create mode 100644 src/components/Contents/styles/basic/TagGroup.css
 create mode 100644 src/components/Contents/styles/basic/TextField.css
 create mode 100644 src/components/Contents/styles/basic/TimeField.css
 create mode 100644 src/components/Contents/styles/basic/ToggleButton.css
 create mode 100644 src/components/Contents/styles/basic/Toolbar.css
 create mode 100644 src/components/Contents/styles/basic/Tooltip.css
 create mode 100644 src/components/Contents/styles/basic/icons.css
 create mode 100644 src/components/Contents/styles/basic/main.css
 create mode 100644 src/components/Contents/styles/basic/theme.css
 create mode 100644 src/components/Contents/styles/quanta/Contents.css
 create mode 100644 src/components/Contents/styles/quanta/Popover.css
 create mode 100644 src/components/Contents/styles/quanta/Select.css
 create mode 100644 src/components/Contents/styles/quanta/Table.css
 create mode 100644 src/components/Contents/styles/quanta/TextField.css
 create mode 100644 src/components/Contents/styles/quanta/colors.css
 create mode 100644 src/components/Contents/styles/quanta/main.css
 create mode 100644 src/components/Table/Column.tsx
 create mode 100644 src/components/Table/Row.tsx
 create mode 100644 src/components/Table/Table.tsx
 create mode 100644 src/components/Table/TableHeader.tsx
 create mode 100644 src/customizations/volto/components/manage/Contents/Contents.jsx
 create mode 100644 src/helpers/indexes.ts
 create mode 100644 src/helpers/types.d.ts

diff --git a/package.json b/package.json
index 1cffd6c7f..50d4a4397 100644
--- a/package.json
+++ b/package.json
@@ -125,11 +125,13 @@
     "@eeacms/volto-taxonomy": "^1.0.0",
     "@loadable/babel-plugin": "5.13.2",
     "@plone-collective/volto-sentry": "0.3.0",
+    "@plone/components": "alpha",
     "bootstrap-italia": "2.6.1",
     "classnames": "^2.3.2",
     "design-react-kit": "5.0.0-1",
     "htmldiff-js": "1.0.5",
     "marked": "9.0.0",
+    "react-aria-components": "1.1.1",
     "react-dropzone": "11.0.1",
     "react-focus-lock": "2.9.4",
     "react-google-recaptcha-v3": "1.7.0",
@@ -166,6 +168,7 @@
     "@commitlint/cli": "17.6.6",
     "@commitlint/config-conventional": "17.6.6",
     "@plone/scripts": "*",
+    "@plone/types": "1.0.0-alpha.3",
     "@release-it/conventional-changelog": "5.1.1",
     "eslint": "8.54.0",
     "eslint-config-prettier": "9.0.0",
diff --git a/src/components/Contents/AddContentPopover.tsx b/src/components/Contents/AddContentPopover.tsx
new file mode 100644
index 000000000..579475fa5
--- /dev/null
+++ b/src/components/Contents/AddContentPopover.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link, ChevronrightIcon, Popover } from '@plone/components';
+
+interface Props {
+  addableTypes: {
+    '@id': string;
+    id: string;
+    title: string;
+  }[];
+}
+
+export const AddContentPopover = ({ addableTypes }: Props) => {
+  // const page = addableTypes.find((type) => type.id === 'Document');
+
+  return (
+    <Popover className="react-aria-Popover add-content-popover">
+      <ul className="add-content-list">
+        {addableTypes.map((type) => (
+          <li key={type.id} className="add-content-list-item">
+            <Link href={type['@id']}>
+              {type.title}
+              <ChevronrightIcon />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </Popover>
+  );
+};
diff --git a/src/components/Contents/Contents.tsx b/src/components/Contents/Contents.tsx
new file mode 100644
index 000000000..9ba5958e7
--- /dev/null
+++ b/src/components/Contents/Contents.tsx
@@ -0,0 +1,168 @@
+import React from 'react';
+import './styles/basic/main.css';
+import './styles/quanta/main.css';
+import type { ActionsResponse } from '@plone/types';
+import { ComponentProps, ReactNode, useState } from 'react';
+import {
+  DialogTrigger,
+  Tooltip,
+  TooltipTrigger,
+  useDragAndDrop,
+} from 'react-aria-components';
+import cx from 'classnames';
+import {
+  AddIcon,
+  Breadcrumbs,
+  Button,
+  Container,
+  QuantaTextField,
+} from '@plone/components';
+import { Table } from '../Table/Table';
+import { ContentsCell } from './ContentsCell';
+import { AddContentPopover } from './AddContentPopover';
+import { indexes, defaultIndexes } from '../../helpers/indexes';
+import type { ArrayElement, Brain } from '../../helpers/types';
+
+interface ContentsProps {
+  pathname: string;
+  objectActions: ActionsResponse['object'];
+  loading: boolean;
+  title: string;
+  items: Brain[];
+  orderContent: (baseUrl: string, id: string, delta: number) => Promise<void>;
+  addableTypes: ComponentProps<typeof AddContentPopover>['addableTypes'];
+}
+
+/**
+ * A table showing the contents of an object.
+ *
+ * It has a toolbar for interactions with the items and a searchbar for filtering.
+ * Items can be sorted by drag and drop.
+ */
+export function Contents({
+  pathname,
+  objectActions,
+  loading,
+  title,
+  items,
+  orderContent,
+  addableTypes,
+}: ContentsProps) {
+  const [selected, setSelected] = useState<string[]>([]);
+  // const path = getBaseUrl(pathname);
+  const path = pathname;
+
+  const folderContentsActions = objectActions.find(
+    (action) => action.id === 'folderContents',
+  );
+
+  if (!folderContentsActions) {
+    // TODO current volto returns the Unauthorized component here
+    // it would be best if the permissions check was done at a higher level
+    // and this remained null
+    return null;
+  }
+
+  const columns = [
+    {
+      id: 'title',
+      name: 'Title',
+      isRowHeader: true,
+    },
+    ...defaultIndexes.map((index) => ({
+      id: index,
+      name: indexes[index].label,
+    })),
+    {
+      id: '_actions',
+      name: 'Actions',
+    },
+  ] as const;
+
+  const rows = items.map((item) =>
+    columns.reduce<ArrayElement<ComponentProps<typeof Table>['rows']>>(
+      (cells, column) => ({
+        ...cells,
+        [column.id]: (
+          <ContentsCell key={column.id} item={item} column={column.id} />
+        ),
+      }),
+      { id: item['@id'] },
+    ),
+  );
+
+  const { dragAndDropHooks } = useDragAndDrop({
+    getItems: (keys) =>
+      [...keys].map((key) => ({
+        'text/plain': key.toString(),
+      })),
+    onReorder(e) {
+      if (e.keys.size !== 1) {
+        console.error('Only one item can be moved at a time');
+      }
+      const item = items.find((item) => item['@id'] === [...e.keys][0]);
+      if (!item) return;
+
+      const initialPosition = rows.findIndex((row) => row.id === item['@id']);
+      if (initialPosition === -1) return;
+
+      let finalPosition = rows.findIndex((row) => row.id === e.target.key);
+      if (e.target.dropPosition === 'after') finalPosition += 1;
+
+      orderContent(
+        path,
+        item.id.replace(/^.*\//, ''),
+        finalPosition - initialPosition,
+      );
+    },
+  });
+
+  return (
+    <Container
+      as="div"
+      // id="page-contents"
+      className="folder-contents"
+      aria-live="polite"
+      layout={false}
+      narrow={false}
+    >
+      {/* TODO better loader */}
+      {loading && <p>Loading...</p>}
+      {/* TODO helmet setting title here... or should we do it at a higher level? */}
+      <article id="content">
+        <section className="topbar">
+          <div className="title-block">
+            <Breadcrumbs includeRoot={true} items={[]} />
+            <h1>{title}</h1>
+          </div>
+          <QuantaTextField
+            name="sortable_title"
+            placeholder="Search site"
+            className="search-input"
+          />
+          <TooltipTrigger>
+            <DialogTrigger>
+              <Button className="react-aria-Button add">
+                <AddIcon />
+              </Button>
+              <AddContentPopover addableTypes={addableTypes} />
+            </DialogTrigger>
+            <Tooltip className="react-aria-Tooltip tooltip" placement="bottom">
+              Add content
+            </Tooltip>
+          </TooltipTrigger>
+        </section>
+        <section className="contents-table">
+          <Table
+            columns={[...columns]}
+            rows={rows}
+            selectionMode="multiple"
+            dragAndDropHooks={dragAndDropHooks}
+            // onRowSelection={onRowSelection}
+            // resizableColumns={true}
+          />
+        </section>
+      </article>
+    </Container>
+  );
+}
diff --git a/src/components/Contents/ContentsCell.tsx b/src/components/Contents/ContentsCell.tsx
new file mode 100644
index 000000000..b0134b8a0
--- /dev/null
+++ b/src/components/Contents/ContentsCell.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { DialogTrigger } from 'react-aria-components';
+import { Brain } from '../../helpers/types';
+import { Button, Link, MoreoptionsIcon, PageIcon } from '@plone/components';
+import { indexes } from '../../helpers/indexes';
+import { ItemActionsPopover } from './ItemActionsPopover';
+
+interface Props {
+  item: Brain;
+  column: keyof typeof indexes | 'title' | '_actions';
+}
+
+export function ContentsCell({ item, column }: Props) {
+  if (column === 'title') {
+    return (
+      <Link
+        className="title-link"
+        href={`${item['@id']}${item.is_folderish ? '/contents' : ''}`}
+      >
+        <PageIcon />
+        {item.title}
+        {item.ExpirationDate !== 'None' &&
+          new Date(item.ExpirationDate).getTime() < new Date().getTime() && (
+            <span className="expired">Expired</span>
+          )}
+        {item.EffectiveDate !== 'None' &&
+          new Date(item.EffectiveDate).getTime() > new Date().getTime() && (
+            <span className="future">Scheduled</span>
+          )}
+      </Link>
+    );
+  } else if (column === '_actions') {
+    return (
+      <DialogTrigger>
+        <Button aria-label="More options">
+          <MoreoptionsIcon />
+        </Button>
+        <ItemActionsPopover
+          editLink={`${item['@id']}/edit`}
+          viewLink={item['@id']}
+          onMoveToBottom={async () => {}}
+          onMoveToTop={async () => {}}
+          onCopy={async () => {}}
+          onCut={async () => {}}
+          onDelete={async () => {}}
+        />
+      </DialogTrigger>
+    );
+  } else {
+    if (indexes[column].type === 'boolean') {
+      return item[column] ? 'Yes' : 'No';
+    } else if (indexes[column].type === 'string') {
+      if (column !== 'review_state') {
+        return item[column];
+      } else {
+        return (
+          <div>
+            <span>
+              {/* <Dot color={getColor(item[index.id])} size="15px" /> */}
+            </span>
+            {item[column] || 'No workflow state'}
+          </div>
+        );
+      }
+    } else if (indexes[column].type === 'date') {
+      if (item[column] && item[column] !== 'None') {
+        // @ts-ignore TODO fix this, maybe a more strict type for the indexes?
+        return new Date(item[column]).toLocaleDateString();
+      } else {
+        return 'None';
+      }
+    } else if (indexes[column].type === 'array') {
+      const value = item[column];
+      return Array.isArray(value) ? value.join(', ') : value;
+    }
+  }
+}
diff --git a/src/components/Contents/ItemActionsPopover.tsx b/src/components/Contents/ItemActionsPopover.tsx
new file mode 100644
index 000000000..57de9babf
--- /dev/null
+++ b/src/components/Contents/ItemActionsPopover.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Link,
+  Button,
+  Popover,
+  EditIcon,
+  EyeIcon,
+  RowbeforeIcon,
+  RowafterIcon,
+  CutIcon,
+  CopyIcon,
+  BinIcon,
+} from '@plone/components';
+
+interface Props {
+  editLink: string;
+  viewLink: string;
+  onMoveToTop: () => Promise<void>;
+  onMoveToBottom: () => Promise<void>;
+  onCut: () => Promise<void>;
+  onCopy: () => Promise<void>;
+  onDelete: () => Promise<void>;
+}
+
+export function ItemActionsPopover({
+  editLink,
+  viewLink,
+  onMoveToTop,
+  onMoveToBottom,
+  onCut,
+  onCopy,
+  onDelete,
+}: Props) {
+  return (
+    <Popover className="react-aria-Popover item-actions-popover">
+      <ul className="item-actions-list">
+        <li className="item-actions-list-item edit">
+          <Link href={editLink}>
+            <EditIcon />
+            Edit
+          </Link>
+        </li>
+        <li className="item-actions-list-item view">
+          <Link href={viewLink}>
+            <EyeIcon />
+            View
+          </Link>
+        </li>
+        <li className="item-actions-list-item move-to-top">
+          <Button onPress={onMoveToTop}>
+            <RowbeforeIcon />
+            Move to top
+          </Button>
+        </li>
+        <li className="item-actions-list-item move-to-bottom">
+          <Button onPress={onMoveToBottom}>
+            <RowafterIcon />
+            Move to bottom
+          </Button>
+        </li>
+        <li className="item-actions-list-item cut">
+          <Button onPress={onCut}>
+            <CutIcon />
+            Cut
+          </Button>
+        </li>
+        <li className="item-actions-list-item copy">
+          <Button onPress={onCopy}>
+            <CopyIcon />
+            Copy
+          </Button>
+        </li>
+        <li className="item-actions-list-item delete">
+          <Button onPress={onDelete}>
+            <BinIcon />
+            Delete
+          </Button>
+        </li>
+      </ul>
+    </Popover>
+  );
+}
diff --git a/src/components/Contents/styles/basic/BlockToolbar.css b/src/components/Contents/styles/basic/BlockToolbar.css
new file mode 100644
index 000000000..ba28e1ca7
--- /dev/null
+++ b/src/components/Contents/styles/basic/BlockToolbar.css
@@ -0,0 +1,52 @@
+@import './Checkbox.css';
+@import './Button.css';
+@import './ToggleButton.css';
+@import './Menu.css';
+@import './theme.css';
+
+.blocks-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+
+  padding: 6px;
+  border-radius: 6px;
+  box-shadow:
+    0px 6px 12px 0px rgba(2, 19, 34, 0.06),
+    0px 9px 18px 0px rgba(2, 19, 34, 0.18);
+  gap: 5px;
+
+  &[data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+  .react-aria-Group {
+    display: contents;
+  }
+}
+
+.react-aria-Separator {
+  align-self: stretch;
+  background-color: var(--border-color);
+
+  &[aria-orientation='vertical'] {
+    width: 1px;
+    margin: 0px 10px;
+  }
+}
+
+.blocks-toolbar {
+  width: fit-content;
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+
+.react-aria-Separator {
+  &:not([aria-orientation='vertical']) {
+    width: 100%;
+    height: 1px;
+    border: none;
+    margin: 10px 0;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Breadcrumbs.css b/src/components/Contents/styles/basic/Breadcrumbs.css
new file mode 100644
index 000000000..6d62bb860
--- /dev/null
+++ b/src/components/Contents/styles/basic/Breadcrumbs.css
@@ -0,0 +1,59 @@
+@import './theme.css';
+
+.react-aria-Breadcrumbs {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  color: var(--text-color);
+  font-size: 18px;
+  list-style: none;
+
+  svg.home-icon {
+    margin-top: -5px;
+    margin-right: 5px;
+    vertical-align: middle;
+  }
+
+  .react-aria-Breadcrumb:not(:last-child)::after {
+    padding: 0 5px;
+    alt: ' ';
+    content: '›';
+    content: '›' / '';
+  }
+
+  .react-aria-Link {
+    position: relative;
+    color: var(--link-color-secondary);
+    cursor: pointer;
+    outline: none;
+    text-decoration: none;
+
+    &[data-hovered] {
+      text-decoration: underline;
+    }
+
+    &[data-current] {
+      color: var(--text-color);
+      font-weight: bold;
+    }
+
+    &[data-focus-visible]:after {
+      position: absolute;
+      border: 2px solid var(--focus-ring-color);
+      border-radius: 6px;
+      content: '';
+      inset: -2px -4px;
+    }
+  }
+
+  .react-aria-Link {
+    &[data-disabled] {
+      cursor: default;
+
+      &:not([data-current]) {
+        color: var(--text-color-disabled);
+      }
+    }
+  }
+}
diff --git a/src/components/Contents/styles/basic/Button.css b/src/components/Contents/styles/basic/Button.css
new file mode 100644
index 000000000..f3aa367be
--- /dev/null
+++ b/src/components/Contents/styles/basic/Button.css
@@ -0,0 +1,44 @@
+@import './theme.css';
+
+@layer components {
+  .react-aria-Button {
+    padding: 8px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    margin: 0;
+    appearance: none;
+    background: var(--button-background);
+    color: var(--text-color);
+    font-size: 1rem;
+    outline: none;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+
+    &[data-pressed] {
+      border-color: var(--border-color-pressed);
+      background: var(--button-background-pressed);
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+
+    .icon:not(:last-child) {
+      margin-right: 6px;
+    }
+
+    &:has(.icon) {
+      display: inline-flex;
+      align-items: center;
+      line-height: 0;
+    }
+  }
+}
diff --git a/src/components/Contents/styles/basic/Calendar.css b/src/components/Contents/styles/basic/Calendar.css
new file mode 100644
index 000000000..88676235d
--- /dev/null
+++ b/src/components/Contents/styles/basic/Calendar.css
@@ -0,0 +1,81 @@
+@import './Button.css';
+@import './theme.css';
+
+.react-aria-Calendar {
+  width: fit-content;
+  max-width: 100%;
+  color: var(--text-color);
+
+  header {
+    display: flex;
+    align-items: center;
+    margin: 0 4px 0.5rem 4px;
+
+    .react-aria-Heading {
+      flex: 1;
+      margin: 0;
+      font-size: 1.375rem;
+      text-align: center;
+    }
+  }
+
+  .react-aria-Button {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+  }
+
+  .react-aria-CalendarCell {
+    width: 2rem;
+    border-radius: 6px;
+    margin: 1px;
+    cursor: default;
+    forced-color-adjust: none;
+    line-height: 2rem;
+    outline: none;
+    text-align: center;
+
+    &[data-outside-month] {
+      display: none;
+    }
+
+    &[data-pressed] {
+      background: var(--gray-100);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 2px;
+    }
+
+    &[data-selected] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+    }
+  }
+
+  .react-aria-CalendarCell {
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
+  }
+
+  .react-aria-CalendarCell {
+    &[data-unavailable] {
+      color: var(--color-invalid);
+      text-decoration: line-through;
+    }
+  }
+
+  .react-aria-CalendarCell {
+    &[data-invalid] {
+      background: var(--color-invalid);
+      color: var(--highlight-foreground);
+    }
+  }
+
+  [slot='errorMessage'] {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Checkbox.css b/src/components/Contents/styles/basic/Checkbox.css
new file mode 100644
index 000000000..57d475fd1
--- /dev/null
+++ b/src/components/Contents/styles/basic/Checkbox.css
@@ -0,0 +1,123 @@
+@import './theme.css';
+
+.react-aria-Checkbox {
+  --selected-color: var(--highlight-background);
+  --selected-color-pressed: var(--highlight-background-pressed);
+  --checkmark-color: var(--highlight-foreground);
+
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+  font-size: 1.143rem;
+  forced-color-adjust: none;
+  gap: 0.571rem;
+
+  .checkbox {
+    display: flex;
+    width: 1.143rem;
+    height: 1.143rem;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    transition: all 200ms;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: var(--checkmark-color);
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    stroke-width: 3px;
+    transition: all 200ms;
+  }
+
+  &[data-pressed] .checkbox {
+    border-color: var(--border-color-pressed);
+  }
+
+  &[data-focus-visible] .checkbox {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-selected],
+  &[data-indeterminate] {
+    .checkbox {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+    svg {
+      stroke-dashoffset: 44;
+    }
+  }
+
+  &[data-indeterminate] {
+    & svg {
+      fill: var(--checkmark-color);
+      stroke: none;
+    }
+  }
+
+  &[data-invalid] {
+    color: var(--color-invalid);
+
+    .checkbox {
+      --checkmark-color: var(--gray-50);
+      border-color: var(--color-invalid);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--color-pressed-invalid);
+    }
+
+    &[data-selected],
+    &[data-indeterminate] {
+      .checkbox {
+        background: var(--color-invalid);
+      }
+
+      &[data-pressed] .checkbox {
+        background: var(--color-pressed-invalid);
+      }
+    }
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+
+    .checkbox {
+      border-color: var(--border-color-disabled);
+    }
+
+    & + [slot='description'] {
+      color: var(--text-color-disabled);
+    }
+  }
+
+  &[data-required]::after {
+    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="hsl(7, 90%, 59%)" d="M12 18a6 6 0 100-12 6 6 0 000 12z"/></svg>');
+  }
+}
+
+.react-aria-CheckboxField {
+  [slot='description'] {
+    /* For now, we want the error in under the description */
+    display: block;
+    padding-top: 3px;
+    font-size: 12px;
+  }
+
+  [slot='errorMessage'] {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/CheckboxGroup.css b/src/components/Contents/styles/basic/CheckboxGroup.css
new file mode 100644
index 000000000..d2a6801dd
--- /dev/null
+++ b/src/components/Contents/styles/basic/CheckboxGroup.css
@@ -0,0 +1,20 @@
+@import './Checkbox.css';
+@import './Form.css';
+@import './Button.css';
+@import './theme.css';
+
+.react-aria-CheckboxGroup {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+  gap: 0.571rem;
+
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/ComboBox.css b/src/components/Contents/styles/basic/ComboBox.css
new file mode 100644
index 000000000..770dbbfc5
--- /dev/null
+++ b/src/components/Contents/styles/basic/ComboBox.css
@@ -0,0 +1,125 @@
+@import './Checkbox.css';
+@import './ListBox.css';
+@import './Popover.css';
+@import './Form.css';
+@import './Button.css';
+@import './theme.css';
+
+.react-aria-ComboBox {
+  color: var(--text-color);
+
+  .react-aria-Input {
+    padding: 0.286rem 2rem 0.286rem 0.571rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    margin: 0;
+    background: var(--field-background);
+    color: var(--field-text-color);
+    font-size: 1.072rem;
+    vertical-align: middle;
+
+    &[data-focused] {
+      outline: none;
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  .react-aria-Button {
+    width: 1.429rem;
+    height: 1.429rem;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    margin-left: -1.714rem;
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    cursor: default;
+    font-size: 0.857rem;
+    forced-color-adjust: none;
+
+    &[data-pressed] {
+      background: var(--highlight-background);
+      box-shadow: none;
+    }
+  }
+}
+
+.react-aria-Popover[data-trigger='ComboBox'] {
+  width: var(--trigger-width);
+
+  .react-aria-ListBox {
+    display: block;
+    width: unset;
+    min-height: unset;
+    max-height: inherit;
+    border: none;
+
+    .react-aria-Header {
+      padding-left: 1.571rem;
+    }
+  }
+
+  .react-aria-ListBoxItem {
+    padding: 0.286rem 0.571rem 0.286rem 1.571rem;
+
+    &[data-focus-visible] {
+      outline: none;
+    }
+
+    &[data-selected] {
+      background: unset;
+      color: var(--text-color);
+      font-weight: 600;
+
+      &::before {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        alt: ' ';
+        content: '✓';
+        content: '✓' / '';
+      }
+    }
+
+    &[data-focused],
+    &[data-pressed] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+    }
+  }
+}
+
+.react-aria-ListBoxItem[href] {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.react-aria-ComboBox {
+  .react-aria-Input {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+    }
+  }
+
+  .react-aria-Button {
+    &[data-disabled] {
+      background: var(--border-color-disabled);
+    }
+  }
+
+  .react-aria-Input {
+    &[data-invalid]:not([data-focused]) {
+      border-color: var(--color-invalid);
+    }
+  }
+
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/DateField.css b/src/components/Contents/styles/basic/DateField.css
new file mode 100644
index 000000000..606c6e545
--- /dev/null
+++ b/src/components/Contents/styles/basic/DateField.css
@@ -0,0 +1,68 @@
+@import './Form.css';
+@import './Button.css';
+@import './theme.css';
+
+.react-aria-DateField {
+  color: var(--text-color);
+}
+
+.react-aria-DateInput {
+  display: flex;
+  width: fit-content;
+  min-width: 150px;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--field-background);
+  forced-color-adjust: none;
+  white-space: nowrap;
+
+  &[data-focus-within] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+}
+
+.react-aria-DateSegment {
+  padding: 0 2px;
+  color: var(--text-color);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+
+  &[data-type='literal'] {
+    padding: 0;
+  }
+
+  &[data-placeholder] {
+    color: var(--text-color-placeholder);
+    font-style: italic;
+  }
+
+  &:focus {
+    border-radius: 4px;
+    background: var(--highlight-background);
+    caret-color: transparent;
+    color: var(--highlight-foreground);
+    outline: none;
+  }
+
+  &[data-invalid] {
+    color: var(--color-invalid);
+
+    &:focus {
+      background: var(--highlight-background-invalid);
+      color: var(--highlight-foreground);
+    }
+  }
+}
+
+.react-aria-DateField {
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/DatePicker.css b/src/components/Contents/styles/basic/DatePicker.css
new file mode 100644
index 000000000..667472632
--- /dev/null
+++ b/src/components/Contents/styles/basic/DatePicker.css
@@ -0,0 +1,71 @@
+@import './Button.css';
+@import './Popover.css';
+@import './Dialog.css';
+@import './DateField.css';
+@import './Calendar.css';
+@import './Form.css';
+@import './theme.css';
+
+.react-aria-DatePicker {
+  color: var(--text-color);
+
+  .react-aria-Group {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+  }
+
+  .react-aria-Button {
+    width: 1.429rem;
+    height: 1.429rem;
+    box-sizing: content-box;
+    padding: 0;
+    border: 2px solid var(--field-background);
+    border: none;
+    border-radius: 4px;
+    margin-left: -1.929rem;
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    font-size: 0.857rem;
+    forced-color-adjust: none;
+
+    &[data-pressed] {
+      background: var(--highlight-background);
+      box-shadow: none;
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 2px;
+    }
+  }
+
+  .react-aria-DateInput {
+    padding: 4px 2.5rem 4px 8px;
+  }
+}
+
+.react-aria-Popover[data-trigger='DatePicker'] {
+  max-width: unset;
+}
+
+.react-aria-DatePicker {
+  &[data-invalid] {
+    .react-aria-DateInput:after {
+      flex: 1;
+      alt: ' ';
+      content: '🚫' / '';
+      content: '🚫';
+      text-align: end;
+    }
+  }
+
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/DateRangePicker.css b/src/components/Contents/styles/basic/DateRangePicker.css
new file mode 100644
index 000000000..cee0dd8fe
--- /dev/null
+++ b/src/components/Contents/styles/basic/DateRangePicker.css
@@ -0,0 +1,104 @@
+@import './Button.css';
+@import './Popover.css';
+@import './Dialog.css';
+@import './DateField.css';
+@import './RangeCalendar.css';
+@import './Form.css';
+@import './theme.css';
+
+.react-aria-DateRangePicker {
+  color: var(--text-color);
+
+  .react-aria-Group {
+    position: relative;
+    display: flex;
+    overflow: auto;
+    width: fit-content;
+    min-width: 220px;
+    max-width: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    padding: 4px 4px 4px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--field-background);
+    white-space: nowrap;
+
+    &[data-pressed] {
+      background: var(--highlight-background);
+      box-shadow: none;
+    }
+
+    &[data-focus-within] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  [slot='start'] + span {
+    padding: 0 4px;
+  }
+
+  [slot='end'] {
+    flex: 1;
+    margin-right: 2rem;
+  }
+
+  .react-aria-Button {
+    position: sticky;
+    right: 0;
+    width: 1.429rem;
+    height: 1.429rem;
+    box-sizing: content-box;
+    flex-shrink: 0;
+    padding: 0;
+    border: 2px solid var(--field-background);
+    border: none;
+    border-radius: 4px;
+    margin-left: auto;
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    font-size: 0.857rem;
+    forced-color-adjust: none;
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 2px;
+    }
+  }
+
+  .react-aria-DateInput {
+    width: unset;
+    min-width: unset;
+    padding: unset;
+    border: unset;
+    outline: unset;
+  }
+}
+
+.react-aria-Popover[data-trigger='DateRangePicker'] {
+  max-width: unset;
+}
+
+.react-aria-DateRangePicker {
+  &[data-invalid] {
+    [slot='end']:after {
+      flex: 1;
+      margin-right: -1.5rem;
+      margin-left: 1.5rem;
+      alt: ' ';
+      content: '🚫' / '';
+      content: '🚫';
+      text-align: end;
+    }
+  }
+
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Dialog.css b/src/components/Contents/styles/basic/Dialog.css
new file mode 100644
index 000000000..29ba60e55
--- /dev/null
+++ b/src/components/Contents/styles/basic/Dialog.css
@@ -0,0 +1,14 @@
+@import './Button.css';
+@import './TextField.css';
+@import './Modal.css';
+@import './theme.css';
+
+.react-aria-Dialog {
+  padding: 30px;
+  outline: none;
+
+  .react-aria-Heading[slot='title'] {
+    margin-top: 0;
+    line-height: 1em;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Form.css b/src/components/Contents/styles/basic/Form.css
new file mode 100644
index 000000000..4b65ea32c
--- /dev/null
+++ b/src/components/Contents/styles/basic/Form.css
@@ -0,0 +1,32 @@
+@import './TextField.css';
+@import './Button.css';
+@import './theme.css';
+
+.react-aria-Form {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+}
+
+.react-aria-Form [role='alert'] {
+  max-width: 250px;
+  padding: 12px;
+  border: 2px solid var(--color-invalid);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  outline: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/components/Contents/styles/basic/GridList.css b/src/components/Contents/styles/basic/GridList.css
new file mode 100644
index 000000000..ebb5518a7
--- /dev/null
+++ b/src/components/Contents/styles/basic/GridList.css
@@ -0,0 +1,188 @@
+@import './Button.css';
+@import './Checkbox.css';
+@import './ToggleButton.css';
+@import './theme.css';
+
+.react-aria-GridList {
+  display: flex;
+  overflow: auto;
+  width: 250px;
+  min-height: 100px;
+  max-height: inherit;
+  max-height: 300px;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  forced-color-adjust: none;
+  gap: 2px;
+  outline: none;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+
+  .react-aria-GridListItem {
+    position: relative;
+    display: flex;
+    min-height: 28px;
+    align-items: center;
+    padding: 0.286rem 0.286rem 0.286rem 0.571rem;
+    border-radius: 6px;
+    color: var(--text-color);
+    cursor: default;
+    font-size: 1.072rem;
+    gap: 0.571rem;
+    outline: none;
+    transform: translateZ(0);
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -2px;
+    }
+
+    &[data-pressed] {
+      background: var(---basic-300);
+    }
+
+    &[data-selected] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+      --focus-ring-color: var(--highlight-foreground);
+
+      &[data-focus-visible] {
+        outline-color: var(--highlight-foreground);
+        outline-offset: -4px;
+      }
+
+      .react-aria-Button {
+        color: var(--highlight-foreground);
+        --highlight-hover: rgb(255 255 255 / 0.1);
+        --highlight-pressed: rgb(255 255 255 / 0.2);
+      }
+    }
+
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
+
+    .react-aria-Button:not([slot]) {
+      margin-left: auto;
+    }
+
+    .react-aria-Button {
+      padding: 0.286rem 0.429rem;
+      border: none;
+      background: transparent;
+      font-size: 1.2rem;
+      line-height: 1.2em;
+      transition: background 200ms;
+
+      &[data-hovered] {
+        background: var(--highlight-hover);
+      }
+
+      &[data-pressed] {
+        background: var(--highlight-pressed);
+        box-shadow: none;
+      }
+    }
+  }
+
+  /* join selected items if :has selector is supported */
+  @supports selector(:has(.foo)) {
+    gap: 0;
+
+    .react-aria-GridListItem[data-selected]:has(+ [data-selected]),
+    .react-aria-GridListItem[data-selected]:has(
+        + .react-aria-DropIndicator + [data-selected]
+      ) {
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    .react-aria-GridListItem[data-selected] + [data-selected],
+    .react-aria-GridListItem[data-selected]
+      + .react-aria-DropIndicator
+      + [data-selected] {
+      border-start-end-radius: 0;
+      border-start-start-radius: 0;
+    }
+  }
+
+  :where(.react-aria-GridListItem) .react-aria-Checkbox {
+    --selected-color: var(--highlight-foreground);
+    --selected-color-pressed: var(--highlight-foreground-pressed);
+    --checkmark-color: var(--highlight-background);
+    --background-color: var(--highlight-background);
+  }
+}
+
+.react-aria-GridListItem[data-href] {
+  cursor: pointer;
+}
+
+.react-aria-GridList {
+  &[data-empty] {
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
+  }
+}
+
+.react-aria-GridListItem {
+  &[data-allows-dragging] {
+    padding-left: 4px;
+  }
+
+  &[data-dragging] {
+    opacity: 0.6;
+  }
+
+  [slot='drag'] {
+    all: unset;
+    width: 15px;
+    text-align: center;
+
+    &[data-focus-visible] {
+      border-radius: 4px;
+      outline: 2px solid var(--focus-ring-color);
+    }
+  }
+}
+
+.react-aria-DropIndicator {
+  &[data-drop-target] {
+    outline: 1px solid var(--highlight-background);
+  }
+
+  @supports not selector(:has(.foo)) {
+    /* Undo gap in browsers that don't support :has */
+    margin-bottom: -2px;
+  }
+}
+
+.react-aria-GridList[data-drop-target] {
+  background: var(--highlight-overlay);
+  outline: 2px solid var(--highlight-background);
+  outline-offset: -1px;
+}
+
+.react-aria-GridListItem[data-drop-target] {
+  background: var(--highlight-overlay);
+  outline: 2px solid var(--highlight-background);
+}
+
+.react-aria-DropIndicator {
+  &[data-drop-target] {
+    outline: 1px solid var(--highlight-background);
+  }
+
+  @supports not selector(:has(.foo)) {
+    /* Undo gap in browsers that don't support :has */
+    margin-bottom: -2px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Label.css b/src/components/Contents/styles/basic/Label.css
new file mode 100644
index 000000000..48348caec
--- /dev/null
+++ b/src/components/Contents/styles/basic/Label.css
@@ -0,0 +1,18 @@
+@import './theme.css';
+
+.react-aria-Label {
+  /* TODO: Review since taken from default quanta */
+  font-size: 0.9rem;
+  font-weight: 500;
+  letter-spacing: 0.012em;
+  line-height: 1.714285714285;
+
+  &::after {
+    /* Marks after Label (Required, etc) */
+    display: inline-block;
+    margin-left: 3px;
+    color: var(--basic-600);
+    line-height: 0;
+    vertical-align: middle;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Link.css b/src/components/Contents/styles/basic/Link.css
new file mode 100644
index 000000000..e626ff4c1
--- /dev/null
+++ b/src/components/Contents/styles/basic/Link.css
@@ -0,0 +1,41 @@
+@import './theme.css';
+
+.react-aria-Link {
+  position: relative;
+  color: var(--link-color);
+  cursor: pointer;
+  font-size: 18px;
+  outline: none;
+  text-decoration: underline;
+  transition: all 200ms;
+
+  /* TODO: review, but removing the fancyness for now */
+  /* &[data-hovered] {
+    text-decoration-style: wavy;
+  } */
+
+  &[data-pressed] {
+    color: var(--link-color-pressed);
+  }
+
+  &[data-hovered] {
+    color: var(--link-color-secondary);
+  }
+
+  &[data-focused] {
+    color: var(--link-color-secondary);
+  }
+
+  &[data-focus-visible]:after {
+    position: absolute;
+    border: 2px solid var(--focus-ring-color);
+    border-radius: 6px;
+    content: '';
+    inset: -3px -6px;
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+    cursor: default;
+  }
+}
diff --git a/src/components/Contents/styles/basic/ListBox.css b/src/components/Contents/styles/basic/ListBox.css
new file mode 100644
index 000000000..869a29ca3
--- /dev/null
+++ b/src/components/Contents/styles/basic/ListBox.css
@@ -0,0 +1,228 @@
+@import './Checkbox.css';
+@import './theme.css';
+
+.react-aria-ListBox {
+  display: flex;
+  overflow: auto;
+  width: 250px;
+  min-height: 100px;
+  max-height: inherit;
+  max-height: 300px;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 2px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  forced-color-adjust: none;
+  outline: none;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+}
+
+.react-aria-ListBoxItem {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 0.286rem 0.571rem;
+  border-radius: 6px;
+  margin: 2px;
+  color: var(--text-color);
+  cursor: default;
+  font-size: 1.072rem;
+  outline: none;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -2px;
+  }
+
+  &[data-selected] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+
+    &[data-focus-visible] {
+      outline-color: var(--highlight-foreground);
+      outline-offset: -4px;
+    }
+  }
+}
+
+.react-aria-ListBoxItem[href] {
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-touch-callout: none;
+}
+
+.react-aria-ListBox {
+  .react-aria-Section:not(:first-child) {
+    margin-top: 12px;
+  }
+
+  .react-aria-Header {
+    padding: 0 0.714rem;
+    font-size: 1.143rem;
+    font-weight: bold;
+  }
+}
+
+.react-aria-ListBoxItem {
+  [slot='label'] {
+    font-weight: bold;
+  }
+
+  [slot='description'] {
+    font-size: small;
+  }
+}
+
+.react-aria-ListBox[data-orientation='horizontal'],
+.react-aria-ListBox[data-layout='grid'] {
+  width: fit-content;
+  max-width: 100%;
+  flex-direction: row;
+  padding: 4px;
+
+  .react-aria-ListBoxItem {
+    position: relative;
+    padding: 4px;
+    margin: 0;
+
+    & img {
+      max-width: 150px;
+      border-radius: 4px;
+      margin-bottom: 4px;
+      aspect-ratio: 1/1;
+      object-fit: cover;
+      transition: box-shadow 200ms;
+    }
+
+    &[data-hovered] {
+      & img {
+        /* TODO: review */
+        /* box-shadow: 0 0 8px rgb(from slateblue r g b / 0.5); */
+        box-shadow: 0 0 8px var(--highlight-background-hover);
+      }
+    }
+
+    &[data-selected] {
+      background: none;
+      color: inherit;
+
+      & img {
+        /* TODO: review */
+        /* box-shadow: 0 0 12px rgb(from slateblue r g b / 0.8); */
+        box-shadow: 0 0 12px var(--highlight-background-hover);
+      }
+
+      &:after {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: flex;
+        width: 22px;
+        height: 22px;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid var(--highlight-foreground);
+        border-radius: 22px;
+        alt: ' ';
+        background: var(--highlight-background);
+        box-shadow: 0 0 8px rgb(0 0 0 / 0.5);
+        color: var(--highlight-foreground);
+        content: '✓';
+        content: '✓' / '';
+        font-size: 14px;
+        line-height: 1em;
+      }
+    }
+  }
+}
+
+.react-aria-ListBox[data-layout='grid'] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  scrollbar-gutter: stable;
+}
+
+.react-aria-ListBox[data-layout='grid'][data-orientation='horizontal'] {
+  display: grid;
+  width: 100%;
+  max-width: none;
+  max-height: 200px;
+  gap: 8px;
+  grid-auto-columns: 250px;
+  grid-auto-flow: column;
+  grid-template-columns: none;
+  grid-template-rows: 58px 58px;
+
+  .react-aria-ListBoxItem {
+    display: grid;
+    column-gap: 8px;
+    grid-template-areas:
+      'image .'
+      'image title'
+      'image description'
+      'image .';
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr auto auto 1fr;
+
+    & img {
+      width: 50px;
+      height: 50px;
+      margin-bottom: 0;
+      grid-area: image;
+    }
+
+    [slot='label'] {
+      grid-area: title;
+    }
+
+    [slot='description'] {
+      grid-area: description;
+    }
+  }
+}
+
+.react-aria-ListBoxItem {
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+  }
+}
+
+.react-aria-ListBox {
+  &[data-empty] {
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
+  }
+}
+
+.react-aria-ListBoxItem {
+  &[data-dragging] {
+    opacity: 0.6;
+  }
+}
+
+.react-aria-DropIndicator[data-drop-target] {
+  outline: 1px solid var(--highlight-background);
+}
+
+.react-aria-ListBox[data-drop-target] {
+  background: var(--highlight-overlay);
+  outline: 2px solid var(--highlight-background);
+  outline-offset: -1px;
+}
+
+.react-aria-ListBoxItem[data-drop-target] {
+  background: var(--highlight-overlay);
+  outline: 2px solid var(--highlight-background);
+}
+
+.react-aria-DropIndicator[data-drop-target] {
+  outline: 1px solid var(--highlight-background);
+}
diff --git a/src/components/Contents/styles/basic/Menu.css b/src/components/Contents/styles/basic/Menu.css
new file mode 100644
index 000000000..75f6399f0
--- /dev/null
+++ b/src/components/Contents/styles/basic/Menu.css
@@ -0,0 +1,107 @@
+@import './Button.css';
+@import './Popover.css';
+@import './theme.css';
+
+.react-aria-Menu {
+  overflow: auto;
+  min-width: 150px;
+  max-height: inherit;
+  box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 2px;
+  outline: none;
+}
+
+.react-aria-MenuItem {
+  position: relative;
+  display: grid;
+  align-items: center;
+  justify-content: start;
+  padding: 0.286rem 0.571rem;
+  border-radius: 6px;
+  margin: 2px;
+  color: var(--text-color);
+  column-gap: 20px;
+  cursor: default;
+  font-size: 1.072rem;
+  forced-color-adjust: none;
+  grid-template-areas: 'icon label kbd' 'icon desc kbd';
+  outline: none;
+
+  &[data-focused] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+  }
+}
+
+.react-aria-MenuItem {
+  &[data-selection-mode] {
+    padding-left: 24px;
+
+    &::before {
+      position: absolute;
+      left: 4px;
+      font-weight: 600;
+    }
+
+    &[data-selection-mode='multiple'][data-selected]::before {
+      position: absolute;
+      left: 4px;
+      alt: ' ';
+      content: '✓';
+      content: '✓' / '';
+      font-weight: 600;
+    }
+
+    &[data-selection-mode='single'][data-selected]::before {
+      content: '●';
+      content: '●' / '';
+      transform: scale(0.7);
+    }
+  }
+}
+
+.react-aria-MenuItem[href] {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.react-aria-Menu {
+  .react-aria-Section:not(:first-child) {
+    margin-top: 12px;
+  }
+
+  .react-aria-Header {
+    padding: 0 0.714rem;
+    font-size: 1.143rem;
+    font-weight: bold;
+  }
+
+  .react-aria-Separator {
+    height: 1px;
+    margin: 2px 4px;
+    background: var(--border-color);
+  }
+}
+
+.react-aria-MenuItem {
+  [slot='label'] {
+    /* font-weight: bold; */
+    grid-area: label;
+  }
+
+  [slot='description'] {
+    font-size: small;
+    grid-area: desc;
+  }
+
+  kbd {
+    font-family: monospace;
+    grid-area: kbd;
+    text-align: end;
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+  }
+}
diff --git a/src/components/Contents/styles/basic/Meter.css b/src/components/Contents/styles/basic/Meter.css
new file mode 100644
index 000000000..9e7a7bcce
--- /dev/null
+++ b/src/components/Contents/styles/basic/Meter.css
@@ -0,0 +1,38 @@
+@import './theme.css';
+
+.react-aria-Meter {
+  --fill-color: forestgreen;
+
+  display: grid;
+  width: 250px;
+  color: var(--text-color);
+  gap: 4px;
+  grid-template-areas:
+    'label value'
+    'bar bar';
+  grid-template-columns: 1fr auto;
+
+  .value {
+    grid-area: value;
+  }
+
+  .bar {
+    overflow: hidden;
+    height: 10px;
+    border-radius: 5px;
+    box-shadow: inset 0px 0px 0px 1px var(--border-color);
+    forced-color-adjust: none;
+    grid-area: bar;
+  }
+
+  .fill {
+    height: 100%;
+    background: var(--fill-color);
+  }
+}
+
+@media (forced-colors: active) {
+  .react-aria-Meter {
+    --fill-color: Highlight;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Modal.css b/src/components/Contents/styles/basic/Modal.css
new file mode 100644
index 000000000..dc0b75f39
--- /dev/null
+++ b/src/components/Contents/styles/basic/Modal.css
@@ -0,0 +1,84 @@
+@import './Button.css';
+@import './TextField.css';
+@import './theme.css';
+
+.react-aria-ModalOverlay {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100vw;
+  height: var(--visual-viewport-height);
+  align-items: center;
+  justify-content: center;
+  background: rgba(0 0 0 / 0.5);
+
+  &[data-entering] {
+    animation: modal-fade 200ms;
+  }
+
+  &[data-exiting] {
+    animation: modal-fade 150ms reverse ease-in;
+  }
+}
+
+.react-aria-Modal {
+  max-width: 300px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+  color: var(--text-color);
+  outline: none;
+
+  &[data-entering] {
+    animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .react-aria-TextField {
+    margin-bottom: 8px;
+  }
+}
+
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-zoom {
+  from {
+    transform: scale(0.8);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes mymodal-blur {
+  from {
+    backdrop-filter: blur(0);
+    background: rgba(45 0 0 / 0);
+  }
+
+  to {
+    backdrop-filter: blur(10px);
+    background: rgba(45 0 0 / 0.3);
+  }
+}
+
+@keyframes mymodal-slide {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
diff --git a/src/components/Contents/styles/basic/NumberField.css b/src/components/Contents/styles/basic/NumberField.css
new file mode 100644
index 000000000..4ae0d0f18
--- /dev/null
+++ b/src/components/Contents/styles/basic/NumberField.css
@@ -0,0 +1,88 @@
+@import './Button.css';
+@import './Form.css';
+@import './theme.css';
+
+.react-aria-NumberField {
+  margin-bottom: 8px;
+  color: var(--text-color);
+
+  .react-aria-Group {
+    display: flex;
+    width: fit-content;
+    border-radius: 6px;
+
+    &[data-focus-within] {
+      outline: 1px solid var(--focus-ring-color);
+      .react-aria-Input,
+      .react-aria-Button {
+        border-color: var(--focus-ring-color);
+      }
+    }
+  }
+
+  .react-aria-Button {
+    width: 2.3rem;
+    font-size: 1.4rem;
+
+    &[slot='decrement'] {
+      border-end-end-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    &[slot='increment'] {
+      border-end-start-radius: 0;
+      border-start-start-radius: 0;
+    }
+  }
+
+  .react-aria-Input {
+    z-index: 1;
+    width: 6rem;
+    flex: 1;
+    padding: 0.429rem 0.571rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0;
+    margin: 0 -1px;
+    background: var(--field-background);
+    color: var(--field-text-color);
+    font-size: 1rem;
+    outline: none;
+  }
+
+  &[data-invalid] {
+    .react-aria-Input,
+    .react-aria-Button {
+      border-color: var(--color-invalid);
+    }
+
+    &:focus-within {
+      .react-aria-Input,
+      .react-aria-Button {
+        border-color: var(--focus-ring-color);
+      }
+    }
+  }
+
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+  }
+
+  .react-aria-Button {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+
+  .react-aria-Input {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}
diff --git a/src/components/Contents/styles/basic/Popover.css b/src/components/Contents/styles/basic/Popover.css
new file mode 100644
index 000000000..66d00e48b
--- /dev/null
+++ b/src/components/Contents/styles/basic/Popover.css
@@ -0,0 +1,88 @@
+@import './Button.css';
+@import './Dialog.css';
+@import './Switch.css';
+@import './theme.css';
+
+.react-aria-Popover {
+  --background-color: var(--overlay-background);
+  max-width: 250px;
+  box-sizing: border-box;
+
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--background-color);
+  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+  color: var(--text-color);
+  outline: none;
+
+  .react-aria-OverlayArrow svg {
+    display: block;
+    fill: var(--background-color);
+    stroke: var(--border-color);
+    stroke-width: 1px;
+  }
+
+  &[data-placement='top'] {
+    --origin: translateY(8px);
+
+    &:has(.react-aria-OverlayArrow) {
+      margin-bottom: 6px;
+    }
+  }
+
+  &[data-placement='bottom'] {
+    --origin: translateY(-8px);
+
+    &:has(.react-aria-OverlayArrow) {
+      margin-top: 6px;
+    }
+
+    .react-aria-OverlayArrow svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  &[data-placement='right'] {
+    --origin: translateX(-8px);
+
+    &:has(.react-aria-OverlayArrow) {
+      margin-left: 6px;
+    }
+
+    .react-aria-OverlayArrow svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  &[data-placement='left'] {
+    --origin: translateX(8px);
+
+    &:has(.react-aria-OverlayArrow) {
+      margin-right: 6px;
+    }
+
+    .react-aria-OverlayArrow svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  &[data-entering] {
+    animation: popover-slide 200ms;
+  }
+
+  &[data-exiting] {
+    animation: popover-slide 200ms reverse ease-in;
+  }
+}
+
+@keyframes popover-slide {
+  from {
+    opacity: 0;
+    transform: var(--origin);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/src/components/Contents/styles/basic/ProgressBar.css b/src/components/Contents/styles/basic/ProgressBar.css
new file mode 100644
index 000000000..0ad1762e0
--- /dev/null
+++ b/src/components/Contents/styles/basic/ProgressBar.css
@@ -0,0 +1,50 @@
+@import './theme.css';
+
+.react-aria-ProgressBar {
+  display: grid;
+  width: 250px;
+  color: var(--text-color);
+  gap: 4px;
+  grid-template-areas:
+    'label value'
+    'bar bar';
+  grid-template-columns: 1fr auto;
+
+  .value {
+    grid-area: value;
+  }
+
+  .bar {
+    overflow: hidden;
+    height: 10px;
+    border-radius: 5px;
+    box-shadow: inset 0px 0px 0px 1px var(--border-color);
+    forced-color-adjust: none;
+    grid-area: bar;
+    will-change: transform;
+  }
+
+  .fill {
+    height: 100%;
+    background: var(--highlight-background);
+  }
+
+  &:not([aria-valuenow]) {
+    .fill {
+      width: 120px;
+      border-radius: inherit;
+      animation: indeterminate 1.5s infinite ease-in-out;
+      will-change: transform;
+    }
+  }
+}
+
+@keyframes indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(250px);
+  }
+}
diff --git a/src/components/Contents/styles/basic/RadioGroup.css b/src/components/Contents/styles/basic/RadioGroup.css
new file mode 100644
index 000000000..60fe72249
--- /dev/null
+++ b/src/components/Contents/styles/basic/RadioGroup.css
@@ -0,0 +1,87 @@
+@import './Button.css';
+@import './Form.css';
+@import './theme.css';
+
+.react-aria-RadioGroup {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+  gap: 8px;
+}
+
+.react-aria-Radio {
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+  font-size: 1.143rem;
+  forced-color-adjust: none;
+  gap: 0.571rem;
+
+  &:before {
+    display: block;
+    width: 1.286rem;
+    height: 1.286rem;
+    box-sizing: border-box;
+    border: 0.143rem solid var(--border-color);
+    border-radius: 1.286rem;
+    background: var(--field-background);
+    content: '';
+    transition: all 200ms;
+  }
+
+  &[data-pressed]:before {
+    border-color: var(--border-color-pressed);
+  }
+
+  &[data-selected] {
+    &:before {
+      border-width: 0.429rem;
+      border-color: var(--highlight-background);
+    }
+
+    &[data-pressed]:before {
+      border-color: var(--highlight-background-pressed);
+    }
+  }
+
+  &[data-focus-visible]:before {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-invalid] {
+    &:before {
+      border-color: var(--color-invalid);
+    }
+
+    &[data-pressed]:before {
+      border-color: var(--color-pressed-invalid);
+    }
+  }
+}
+
+.react-aria-RadioGroup {
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+  }
+
+  &[data-orientation='horizontal'] {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.react-aria-Radio {
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+
+    &:before {
+      border-color: var(--border-color-disabled);
+    }
+  }
+}
diff --git a/src/components/Contents/styles/basic/RangeCalendar.css b/src/components/Contents/styles/basic/RangeCalendar.css
new file mode 100644
index 000000000..ec9f4fe05
--- /dev/null
+++ b/src/components/Contents/styles/basic/RangeCalendar.css
@@ -0,0 +1,102 @@
+@import './Button.css';
+@import './theme.css';
+
+.react-aria-RangeCalendar {
+  width: fit-content;
+  max-width: 100%;
+  color: var(--text-color);
+
+  & header {
+    display: flex;
+    align-items: center;
+    margin: 0 4px 0.5rem 4px;
+
+    .react-aria-Heading {
+      flex: 1;
+      margin: 0;
+      font-size: 1.375rem;
+      text-align: center;
+    }
+  }
+
+  .react-aria-Button {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+  }
+
+  & table {
+    border-collapse: collapse;
+
+    & td {
+      padding: 2px 0;
+    }
+  }
+
+  .react-aria-CalendarCell {
+    width: 2.286rem;
+    border-radius: 6px;
+    cursor: default;
+    forced-color-adjust: none;
+    line-height: 2.286rem;
+    outline: none;
+    text-align: center;
+
+    &[data-outside-month] {
+      display: none;
+    }
+
+    &[data-pressed] {
+      background: var(--gray-100);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--highlight-background);
+      outline-offset: -2px;
+    }
+
+    &[data-selected] {
+      border-radius: 0;
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+
+      &[data-focus-visible] {
+        outline-color: var(--highlight-foreground);
+        outline-offset: -3px;
+      }
+    }
+
+    &[data-selection-start] {
+      border-end-start-radius: 6px;
+      border-start-start-radius: 6px;
+    }
+
+    &[data-selection-end] {
+      border-end-end-radius: 6px;
+      border-start-end-radius: 6px;
+    }
+  }
+
+  .react-aria-CalendarCell {
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
+  }
+
+  .react-aria-CalendarCell {
+    &[data-unavailable] {
+      color: var(--color-invalid);
+      text-decoration: line-through;
+    }
+
+    &[data-invalid] {
+      background: var(--color-invalid);
+      color: var(--highlight-foreground);
+    }
+  }
+
+  [slot='errorMessage'] {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/SearchField.css b/src/components/Contents/styles/basic/SearchField.css
new file mode 100644
index 000000000..7163ebd0a
--- /dev/null
+++ b/src/components/Contents/styles/basic/SearchField.css
@@ -0,0 +1,84 @@
+@import './Button.css';
+@import './Form.css';
+@import './theme.css';
+
+.react-aria-SearchField {
+  display: grid;
+  width: fit-content;
+  align-items: center;
+  color: var(--text-color);
+  grid-template-areas:
+    'label label'
+    'input button'
+    'help  help';
+  grid-template-columns: 1fr auto;
+
+  .react-aria-Input {
+    padding: 0.286rem 1.714rem 0.286rem 0.286rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    margin: 0;
+    background: var(--field-background);
+    color: var(--field-text-color);
+    font-size: 1.143rem;
+    grid-area: input;
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+      -webkit-appearance: none;
+    }
+
+    &[data-focused] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  .react-aria-Button {
+    width: 1.143rem;
+    height: 1.143rem;
+    padding: 0;
+    border: none;
+    border-radius: 1.143rem;
+    margin-left: -1.429rem;
+    background: var(--gray-500);
+    color: var(--gray-50);
+    font-size: 0.857rem;
+    grid-area: button;
+    line-height: 0.857rem;
+    text-align: center;
+    vertical-align: middle;
+
+    &[data-pressed] {
+      background: var(--gray-600);
+    }
+  }
+
+  &[data-empty] button {
+    display: none;
+  }
+
+  .react-aria-Input {
+    &[data-invalid] {
+      border-color: var(--color-invalid);
+    }
+  }
+
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+    grid-area: help;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+    grid-area: help;
+  }
+
+  .react-aria-Input {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}
diff --git a/src/components/Contents/styles/basic/Select.css b/src/components/Contents/styles/basic/Select.css
new file mode 100644
index 000000000..bea2939c6
--- /dev/null
+++ b/src/components/Contents/styles/basic/Select.css
@@ -0,0 +1,167 @@
+@import './ListBox.css';
+@import './Popover.css';
+@import './Button.css';
+@import './Form.css';
+@import './theme.css';
+
+.react-aria-Select {
+  color: var(--text-color);
+
+  .react-aria-Button {
+    display: flex;
+    max-width: 250px;
+    align-items: center;
+    padding: 0.286rem 0.286rem 0.286rem 0.571rem;
+    border-radius: 6px;
+    box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);
+    font-size: 1.072rem;
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  &[data-invalid] {
+    .react-aria-Button {
+      border: 1px solid var(--color-invalid);
+    }
+
+    .react-aria-Label {
+      color: var(--color-invalid);
+    }
+  }
+
+  &[data-disabled] {
+    .react-aria-Label {
+      color: var(--basic-400);
+    }
+
+    [slot='description'] {
+      color: var(--basic-400);
+    }
+  }
+
+  .react-aria-SelectValue {
+    &[data-placeholder] {
+      color: var(--text-color-placeholder);
+      font-style: italic;
+    }
+  }
+
+  span[aria-hidden] {
+    width: 1.5rem;
+    padding: 1px;
+    border-radius: 4px;
+    margin-left: 1rem;
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    font-size: 0.857rem;
+    forced-color-adjust: none;
+    line-height: 1.375rem;
+  }
+
+  &[data-required] .react-aria-Label::after {
+    /* https://yoksel.github.io/url-encoder/ */
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='hsl(7, 90%25, 59%25)' d='M12 18a6 6 0 100-12 6 6 0 000 12z'/%3E%3C/svg%3E");
+  }
+}
+
+.react-aria-Popover[data-trigger='Select'] {
+  min-width: var(--trigger-width);
+
+  .react-aria-ListBox {
+    display: block;
+    width: unset;
+    min-height: unset;
+    max-height: inherit;
+    border: none;
+
+    .react-aria-Header {
+      padding-left: 1.571rem;
+    }
+  }
+
+  .react-aria-ListBoxItem {
+    padding: 0.286rem 0.571rem 0.286rem 1.571rem;
+
+    &[data-focus-visible] {
+      outline: none;
+    }
+
+    &[data-selected] {
+      background: unset;
+      color: var(--text-color);
+      font-weight: 600;
+
+      &::before {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        alt: ' ';
+        content: '✓';
+        content: '✓' / '';
+      }
+    }
+
+    &[data-focused],
+    &[data-pressed] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+    }
+  }
+}
+
+.react-aria-ListBoxItem[href] {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.react-aria-Select {
+  .react-aria-SelectValue {
+    [slot='description'] {
+      display: none;
+    }
+  }
+
+  .react-aria-Button {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+      span[aria-hidden] {
+        background: var(--border-color-disabled);
+        color: var(--text-color-disabled);
+      }
+
+      .react-aria-SelectValue {
+        &[data-placeholder] {
+          color: var(--text-color-disabled);
+        }
+      }
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .react-aria-Select {
+    .react-aria-Button {
+      &[data-disabled] span[aria-hidden] {
+        background: 0 0;
+      }
+    }
+  }
+}
+
+.react-aria-Select {
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    /* For now, we want the error in under the description */
+    display: block;
+    padding-top: 3px;
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Slider.css b/src/components/Contents/styles/basic/Slider.css
new file mode 100644
index 000000000..857708de9
--- /dev/null
+++ b/src/components/Contents/styles/basic/Slider.css
@@ -0,0 +1,107 @@
+@import './NumberField.css';
+@import './theme.css';
+
+.react-aria-Slider {
+  display: grid;
+  max-width: 300px;
+  color: var(--text-color);
+  grid-template-areas:
+    'label output'
+    'track track';
+  grid-template-columns: 1fr auto;
+
+  .react-aria-Label {
+    grid-area: label;
+  }
+
+  .react-aria-SliderOutput {
+    grid-area: output;
+  }
+
+  .react-aria-SliderTrack {
+    position: relative;
+    grid-area: track;
+
+    /* track line */
+    &:before {
+      position: absolute;
+      display: block;
+      background: var(--border-color);
+      content: '';
+    }
+  }
+
+  .react-aria-SliderThumb {
+    width: 1.429rem;
+    height: 1.429rem;
+    border: 2px solid var(--background-color);
+    border-radius: 50%;
+    background: var(--highlight-background);
+    forced-color-adjust: none;
+
+    &[data-dragging] {
+      background: var(--highlight-background-pressed);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+    }
+  }
+
+  &[data-orientation='horizontal'] {
+    width: 300px;
+    flex-direction: column;
+
+    .react-aria-SliderTrack {
+      width: 100%;
+      height: 30px;
+
+      &:before {
+        top: 50%;
+        width: 100%;
+        height: 3px;
+        transform: translateY(-50%);
+      }
+    }
+
+    .react-aria-SliderThumb {
+      top: 50%;
+    }
+  }
+
+  &[data-orientation='vertical'] {
+    display: block;
+    height: 150px;
+
+    .react-aria-Label,
+    .react-aria-SliderOutput {
+      display: none;
+    }
+
+    .react-aria-SliderTrack {
+      width: 30px;
+      height: 100%;
+
+      &:before {
+        left: 50%;
+        width: 3px;
+        height: 100%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .react-aria-SliderThumb {
+      left: 50%;
+    }
+  }
+
+  &[data-disabled] {
+    .react-aria-SliderTrack:before {
+      background: var(--border-color-disabled);
+    }
+
+    .react-aria-SliderThumb {
+      background: var(--border-color-disabled);
+    }
+  }
+}
diff --git a/src/components/Contents/styles/basic/Switch.css b/src/components/Contents/styles/basic/Switch.css
new file mode 100644
index 000000000..97065a1ab
--- /dev/null
+++ b/src/components/Contents/styles/basic/Switch.css
@@ -0,0 +1,74 @@
+@import './theme.css';
+
+.react-aria-Switch {
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+  font-size: 1.143rem;
+  forced-color-adjust: none;
+  gap: 0.571rem;
+
+  .indicator {
+    width: 2rem;
+    height: 1.143rem;
+    border: 2px solid var(--border-color);
+    border-radius: 1.143rem;
+    background: var(--background-color);
+    transition: all 200ms;
+
+    &:before {
+      display: block;
+      width: 0.857rem;
+      height: 0.857rem;
+      border-radius: 16px;
+      margin: 0.143rem;
+      background: var(--highlight-background);
+      content: '';
+      transition: all 200ms;
+    }
+  }
+
+  &[data-pressed] .indicator {
+    border-color: var(--border-color-pressed);
+
+    &:before {
+      background: var(--highlight-background-pressed);
+    }
+  }
+
+  &[data-selected] {
+    .indicator {
+      border-color: var(--highlight-background);
+      background: var(--highlight-background);
+
+      &:before {
+        background: var(--field-background);
+        transform: translateX(100%);
+      }
+    }
+
+    &[data-pressed] {
+      .indicator {
+        border-color: var(--highlight-background-pressed);
+        background: var(--highlight-background-pressed);
+      }
+    }
+  }
+
+  &[data-focus-visible] .indicator {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+
+    .indicator {
+      border-color: var(--border-color-disabled);
+
+      &:before {
+        background: var(--border-color-disabled);
+      }
+    }
+  }
+}
diff --git a/src/components/Contents/styles/basic/Table.css b/src/components/Contents/styles/basic/Table.css
new file mode 100644
index 000000000..7523d531b
--- /dev/null
+++ b/src/components/Contents/styles/basic/Table.css
@@ -0,0 +1,279 @@
+@import './Button.css';
+@import './ToggleButton.css';
+@import './Checkbox.css';
+@import './Popover.css';
+@import './Menu.css';
+@import './theme.css';
+
+:root {
+  --plone-table-border: 0 none;
+  --plone-table-border-radius: 0;
+  --plone-table-padding: 0.286rem;
+  --plone-table-width: initial;
+  --plone-table-max-width: 100%;
+  --plone-table-background: var(--overlay-background);
+
+  --plone-table-header-color: var(--text-color);
+  --plone-table-header-font-size: 1rem;
+  --plone-table-header-border-bottom: 1px solid var(--border-color);
+
+  --plone-table-row-color: var(--text-color);
+  --plone-table-row-font-size: 1rem;
+  --plone-table-row-pressed: var(--highlight-pressed);
+  --plone-table-row-border-radius: 0;
+
+  --plone-table-column-font-weight: 500;
+
+  --plone-table-cell-padding: 18px 12px;
+  --plone-table-cell-border-bottom: 1px solid var(--smoke);
+}
+
+.react-aria-Table {
+  width: var(--plone-table-width);
+  max-width: 100%;
+  min-height: 100px;
+  align-self: start;
+  padding: var(--plone-table-padding);
+  border: var(--plone-table-border);
+  border-radius: var(--plone-table-border-radius);
+  background: var(--plone-table-background);
+  border-spacing: 0;
+  forced-color-adjust: none;
+  outline: none;
+  word-break: break-word;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+
+  .react-aria-TableHeader {
+    color: var(--plone-table-header-color);
+    font-size: var(--plone-table-header-font-size);
+
+    & tr:last-child .react-aria-Column {
+      border-bottom: var(--plone-table-header-border-bottom);
+      cursor: default;
+    }
+  }
+
+  .react-aria-Row {
+    --radius-top: 6px;
+    --radius-bottom: 6px;
+    --radius: var(--radius-top) var(--radius-top) var(--radius-bottom)
+      var(--radius-bottom);
+    position: relative;
+    border-radius: var(--plone-table-row-border-radius);
+    clip-path: inset(0 round var(--radius)); /* firefox */
+    color: var(--plone-table-row-color);
+    cursor: default;
+    font-size: var(--plone-table-row-font-size);
+    outline: none;
+    transform: scale(1);
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -2px;
+    }
+
+    &[data-pressed] {
+      background: var(--plone-table-row-pressed);
+    }
+
+    &[data-selected] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+      --focus-ring-color: var(--highlight-foreground);
+
+      &[data-focus-visible],
+      .react-aria-Cell[data-focus-visible] {
+        outline-offset: -4px;
+      }
+    }
+
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
+
+    &[data-dragging] {
+      opacity: 0.6;
+      transform: translateZ(0);
+    }
+
+    [slot='drag'] {
+      all: unset;
+      width: 1em;
+      text-align: center;
+
+      &[data-focus-visible] {
+        border-radius: 4px;
+        outline: 2px solid var(--focus-ring-color);
+      }
+    }
+
+    &[data-href] {
+      cursor: pointer;
+    }
+  }
+
+  .react-aria-Cell,
+  .react-aria-Column {
+    padding: var(--plone-table-cell-padding);
+    outline: none;
+    text-align: left;
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -2px;
+    }
+  }
+
+  .react-aria-Cell {
+    border-bottom: var(--plone-table-cell-border-bottom);
+    transform: translateZ(0);
+
+    &:first-child {
+      border-radius: var(--radius-top) 0 0 var(--radius-bottom);
+    }
+
+    &:last-child {
+      border-radius: 0 var(--radius-top) var(--radius-bottom) 0;
+    }
+  }
+
+  /* join selected items if :has selector is supported */
+  @supports selector(:has(.foo)) {
+    .react-aria-Row[data-selected]:has(+ [data-selected]),
+    .react-aria-Row[data-selected]:has(
+        + .react-aria-DropIndicator + [data-selected]
+      ) {
+      --radius-bottom: 0px;
+    }
+
+    .react-aria-Row[data-selected] + [data-selected],
+    .react-aria-Row[data-selected]
+      + .react-aria-DropIndicator
+      + [data-selected] {
+      --radius-top: 0px;
+    }
+  }
+}
+
+:where(.react-aria-Row) .react-aria-Checkbox {
+  --selected-color: var(--highlight-foreground);
+  --selected-color-pressed: var(--highlight-foreground-pressed);
+  --checkmark-color: var(--highlight-background);
+  --background-color: var(--highlight-background);
+}
+
+.react-aria-Column {
+  font-weight: var(--plone-table-column-font-weight);
+
+  .sort-indicator {
+    padding: 0 2px;
+  }
+
+  &:not([data-sort-direction]) .sort-indicator {
+    visibility: hidden;
+  }
+}
+
+.react-aria-ResizableTableContainer {
+  position: relative;
+  overflow: auto;
+  max-width: var(--plone-table-max-width);
+  border: var(--plone-table-border);
+  border-radius: var(--plone-table-border-radius);
+  background: var(--plone-table-background);
+
+  .react-aria-Table {
+    border: none;
+  }
+
+  .flex-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .column-name,
+  .react-aria-Button {
+    --background-color: var(--overlay-background);
+    overflow: hidden;
+    flex: 1;
+    border-color: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-overflow: ellipsis;
+    transition: background 200ms;
+    &[data-hovered] {
+      background: var(--highlight-hover);
+    }
+
+    &[data-pressed] {
+      background: var(--highlight-pressed);
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--focus-ring-color);
+    }
+  }
+
+  .react-aria-ColumnResizer {
+    width: 15px;
+    height: 25px;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    border: 5px;
+    border-style: none solid;
+    border-color: transparent;
+    background-clip: content-box;
+    background-color: grey;
+    touch-action: none;
+
+    &[data-resizable-direction='both'] {
+      cursor: ew-resize;
+    }
+
+    &[data-resizable-direction='left'] {
+      cursor: e-resize;
+    }
+
+    &[data-resizable-direction='right'] {
+      cursor: w-resize;
+    }
+
+    &[data-focus-visible] {
+      background-color: var(--focus-ring-color);
+    }
+
+    &[data-resizing] {
+      border-color: var(--focus-ring-color);
+      background-color: transparent;
+    }
+  }
+
+  .react-aria-Column,
+  .react-aria-Cell {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.react-aria-DropIndicator[data-drop-target] {
+  outline: 1px solid var(--highlight-background);
+  transform: translateZ(0);
+}
+
+.react-aria-Table[data-drop-target] {
+  background: var(--highlight-overlay);
+  outline: 2px solid var(--highlight-background);
+  outline-offset: -1px;
+}
+
+.react-aria-Row[data-drop-target] {
+  background: var(--highlight-overlay);
+  outline: 2px solid var(--highlight-background);
+}
diff --git a/src/components/Contents/styles/basic/Tabs.css b/src/components/Contents/styles/basic/Tabs.css
new file mode 100644
index 000000000..54bb15d50
--- /dev/null
+++ b/src/components/Contents/styles/basic/Tabs.css
@@ -0,0 +1,102 @@
+@import './Button.css';
+@import './Link.css';
+@import './theme.css';
+
+.react-aria-Tabs {
+  display: flex;
+  color: var(--text-color);
+
+  &[data-orientation='horizontal'] {
+    flex-direction: column;
+  }
+}
+
+.react-aria-TabList {
+  display: flex;
+
+  &[data-orientation='horizontal'] {
+    border-bottom: 1px solid var(--border-color);
+
+    .react-aria-Tab {
+      border-bottom: 3px solid var(--border-color);
+    }
+  }
+}
+
+.react-aria-Tab {
+  position: relative;
+  padding: 10px;
+  color: var(--text-color-base);
+  cursor: default;
+  forced-color-adjust: none;
+  outline: none;
+  transition: color 200ms;
+  --border-color: transparent;
+
+  &[data-hovered],
+  &[data-focused] {
+    color: var(--text-color-hover);
+  }
+
+  &[data-selected] {
+    --border-color: var(--highlight-background);
+    color: var(--text-color);
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+    &[data-selected] {
+      --border-color: var(--text-color-disabled);
+    }
+  }
+
+  &[data-focus-visible]:after {
+    position: absolute;
+    border: 2px solid var(--focus-ring-color);
+    border-radius: 4px;
+    content: '';
+    inset: 4px;
+  }
+}
+
+.react-aria-TabPanel {
+  padding: 10px;
+  border-radius: 4px;
+  margin-top: 4px;
+  outline: none;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+  }
+}
+
+.react-aria-Tabs {
+  &[data-orientation='vertical'] {
+    flex-direction: row;
+  }
+}
+
+.react-aria-TabList {
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+    border-inline-end: 1px solid gray;
+
+    .react-aria-Tab {
+      border-inline-end: 3px solid var(--border-color, transparent);
+    }
+  }
+}
+
+.react-aria-Tab {
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+    &[data-selected] {
+      --border-color: var(--border-color-disabled);
+    }
+  }
+}
+
+.react-aria-Tab[href] {
+  cursor: pointer;
+  text-decoration: none;
+}
diff --git a/src/components/Contents/styles/basic/TagGroup.css b/src/components/Contents/styles/basic/TagGroup.css
new file mode 100644
index 000000000..eab45234c
--- /dev/null
+++ b/src/components/Contents/styles/basic/TagGroup.css
@@ -0,0 +1,91 @@
+@import './ToggleButton.css';
+@import './theme.css';
+
+.react-aria-TagGroup {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+  font-size: small;
+  gap: 2px;
+}
+
+.react-aria-TagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.react-aria-Tag {
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  color: var(--text-color);
+  cursor: default;
+  font-size: 0.929rem;
+  forced-color-adjust: none;
+  outline: none;
+  transition: border-color 200ms;
+
+  &[data-hovered] {
+    border-color: var(--border-color-hover);
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-selected] {
+    border-color: var(--highlight-background);
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+  }
+
+  [slot='remove'] {
+    padding: 0;
+    border: none;
+    margin-left: 8px;
+    background: none;
+    color: var(--text-color-base);
+    font-size: 0.95em;
+    outline: none;
+    transition: color 200ms;
+
+    &[data-hovered] {
+      color: var(--text-color-hover);
+    }
+  }
+
+  &[data-selected] {
+    [slot='remove'] {
+      color: inherit;
+    }
+  }
+}
+
+.react-aria-Tag[data-href] {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.react-aria-TagList {
+  .react-aria-Tag {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}
+
+.react-aria-TagGroup {
+  [slot='description'] {
+    font-size: 12px;
+  }
+
+  [slot='errorMessage'] {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/TextField.css b/src/components/Contents/styles/basic/TextField.css
new file mode 100644
index 000000000..78abe9f37
--- /dev/null
+++ b/src/components/Contents/styles/basic/TextField.css
@@ -0,0 +1,50 @@
+@import './Button.css';
+@import './Label.css';
+@import './theme.css';
+
+.react-aria-TextField {
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  color: var(--text-color);
+
+  .react-aria-Input,
+  .react-aria-TextArea {
+    padding: 0.286rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    margin: 0;
+    background: var(--field-background);
+    color: var(--field-text-color);
+    font-size: 1.143rem;
+
+    &[data-focused] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  .react-aria-Input,
+  .react-aria-TextArea {
+    &[data-invalid] {
+      border-color: var(--color-invalid);
+    }
+  }
+
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+  }
+
+  .react-aria-Input,
+  .react-aria-TextArea {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}
diff --git a/src/components/Contents/styles/basic/TimeField.css b/src/components/Contents/styles/basic/TimeField.css
new file mode 100644
index 000000000..324881460
--- /dev/null
+++ b/src/components/Contents/styles/basic/TimeField.css
@@ -0,0 +1,68 @@
+@import './Form.css';
+@import './Button.css';
+@import './theme.css';
+
+.react-aria-TimeField {
+  color: var(--text-color);
+}
+
+.react-aria-DateInput {
+  display: flex;
+  width: fit-content;
+  min-width: 150px;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--field-background);
+  forced-color-adjust: none;
+  white-space: nowrap;
+
+  &[data-focus-within] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+}
+
+.react-aria-DateSegment {
+  padding: 0 2px;
+  color: var(--text-color);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+
+  &[data-type='literal'] {
+    padding: 0;
+  }
+
+  &[data-placeholder] {
+    color: var(--text-color-placeholder);
+    font-style: italic;
+  }
+
+  &:focus {
+    border-radius: 4px;
+    background: var(--highlight-background);
+    caret-color: transparent;
+    color: var(--highlight-foreground);
+    outline: none;
+  }
+
+  &[data-invalid] {
+    color: var(--color-invalid);
+
+    &:focus {
+      background: var(--highlight-background-invalid);
+      color: var(--highlight-foreground);
+    }
+  }
+}
+
+.react-aria-TimeField {
+  .react-aria-FieldError {
+    color: var(--color-invalid);
+    font-size: 12px;
+  }
+
+  [slot='description'] {
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Contents/styles/basic/ToggleButton.css b/src/components/Contents/styles/basic/ToggleButton.css
new file mode 100644
index 000000000..944a343d6
--- /dev/null
+++ b/src/components/Contents/styles/basic/ToggleButton.css
@@ -0,0 +1,54 @@
+@import './theme.css';
+
+.react-aria-ToggleButton {
+  padding: 8px 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  margin: 0;
+  appearance: none;
+  background: var(--button-background);
+  color: var(--text-color);
+  font-size: 1rem;
+  forced-color-adjust: none;
+  outline: none;
+  text-align: center;
+  vertical-align: middle;
+
+  &[data-pressed] {
+    border-color: var(--border-color-pressed);
+    background: var(--button-background-pressed);
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
+  }
+
+  &[data-selected] {
+    border-color: var(--highlight-background);
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+
+    &[data-pressed] {
+      border-color: var(--highlight-background-pressed);
+      background: var(--highlight-background-pressed);
+    }
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    border-color: var(--border-color-disabled);
+    background: var(--button-background);
+    color: var(--text-color-disabled);
+  }
+
+  .icon:not(:last-child) {
+    margin-right: 6px;
+  }
+
+  &:has(.icon) {
+    display: inline-flex;
+    align-items: center;
+    line-height: 0;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Toolbar.css b/src/components/Contents/styles/basic/Toolbar.css
new file mode 100644
index 000000000..b19359135
--- /dev/null
+++ b/src/components/Contents/styles/basic/Toolbar.css
@@ -0,0 +1,47 @@
+@import './Checkbox.css';
+@import './Button.css';
+@import './ToggleButton.css';
+@import './Menu.css';
+@import './theme.css';
+
+.react-aria-Toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+
+  &[data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  .react-aria-Group {
+    display: contents;
+  }
+}
+
+.react-aria-Separator {
+  align-self: stretch;
+  background-color: var(--border-color);
+
+  &[aria-orientation='vertical'] {
+    width: 1px;
+    margin: 0px 10px;
+  }
+}
+
+.react-aria-Toolbar {
+  width: fit-content;
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+
+.react-aria-Separator {
+  &:not([aria-orientation='vertical']) {
+    width: 100%;
+    height: 1px;
+    border: none;
+    margin: 10px 0;
+  }
+}
diff --git a/src/components/Contents/styles/basic/Tooltip.css b/src/components/Contents/styles/basic/Tooltip.css
new file mode 100644
index 000000000..b8294360f
--- /dev/null
+++ b/src/components/Contents/styles/basic/Tooltip.css
@@ -0,0 +1,69 @@
+@import './Button.css';
+@import './theme.css';
+
+.react-aria-Tooltip {
+  max-width: 150px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--highlight-background);
+  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+  color: var(--highlight-foreground);
+  forced-color-adjust: none;
+  outline: none;
+  /* fixes FF gap */
+  transform: translate3d(0, 0, 0);
+
+  &[data-placement='top'] {
+    margin-bottom: 8px;
+    --origin: translateY(4px);
+  }
+
+  &[data-placement='bottom'] {
+    margin-top: 8px;
+    --origin: translateY(-4px);
+    & .react-aria-OverlayArrow svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  &[data-placement='right'] {
+    margin-left: 8px;
+    --origin: translateX(-4px);
+    & .react-aria-OverlayArrow svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  &[data-placement='left'] {
+    margin-right: 8px;
+    --origin: translateX(4px);
+    & .react-aria-OverlayArrow svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  & .react-aria-OverlayArrow svg {
+    display: block;
+    fill: var(--highlight-background);
+  }
+
+  &[data-entering] {
+    animation: slide 200ms;
+  }
+
+  &[data-exiting] {
+    animation: slide 200ms reverse ease-in;
+  }
+}
+
+@keyframes slide {
+  from {
+    opacity: 0;
+    transform: var(--origin);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/src/components/Contents/styles/basic/icons.css b/src/components/Contents/styles/basic/icons.css
new file mode 100644
index 000000000..2174fefb9
--- /dev/null
+++ b/src/components/Contents/styles/basic/icons.css
@@ -0,0 +1,108 @@
+@import './theme.css';
+
+:root {
+  /* These has to be mapped to global css custom properties based on the SG scales */
+  --quanta-icon-default-size-s: 18px;
+  --quanta-icon-default-size-m: 24px;
+  --quanta-icon-size-s: var(--quanta-icon-default-size-s);
+  --quanta-icon-size-m: var(--quanta-icon-default-size-m);
+  --quanta-icon-size-xxs: calc(var(--quanta-icon-size-s) / 2);
+  --quanta-icon-size-xs: calc(var(--quanta-icon-size-m) / 2);
+  --quanta-icon-size-l: calc(var(--quanta-icon-size-s) * 2);
+  --quanta-icon-size-xl: calc(var(--quanta-icon-size-m) * 2);
+  --quanta-icon-size-xxl: calc(var(--quanta-icon-size-m) * 3);
+
+  --quanta-color-icon-informative: var(--quanta-sapphire);
+  --quanta-color-icon-negative: var(--quanta-candy);
+  --quanta-color-icon-positive: var(--quanta-neon);
+  --quanta-color-icon-notice: var(--quanta-lemmon);
+}
+
+.q.icon {
+  display: inline-block;
+
+  /* Inherit the text color */
+  color: inherit;
+
+  /* Fill should match the current text color */
+  fill: currentColor;
+
+  /* Hide the svg overflow in IE. */
+  &:not(:root) {
+    overflow: hidden;
+  }
+
+  /* Don't catch clicks or hover, otherwise they may not escape the SVG */
+  pointer-events: none;
+}
+@media (forced-colors: active) {
+  .q.icon {
+    /* Automatically adjust the SVG to pick up the text color for High Contrast mode */
+    forced-color-adjust: auto;
+  }
+}
+
+.q {
+  &.icon--sizeXXS {
+    &,
+    img,
+    svg {
+      block-size: var(--quanta-icon-size-xxs);
+      inline-size: var(--quanta-icon-size-xxs);
+    }
+  }
+
+  &.icon--sizeXS {
+    &,
+    img,
+    svg {
+      block-size: var(--quanta-icon-size-xs);
+      inline-size: var(--quanta-icon-size-xs);
+    }
+  }
+
+  &.icon--sizeS {
+    &,
+    img,
+    svg {
+      block-size: var(--quanta-icon-size-s);
+      inline-size: var(--quanta-icon-size-s);
+    }
+  }
+
+  &.icon--sizeM {
+    &,
+    img,
+    svg {
+      block-size: var(--quanta-icon-size-m);
+      inline-size: var(--quanta-icon-size-m);
+    }
+  }
+
+  &.icon--sizeL {
+    &,
+    img,
+    svg {
+      block-size: var(--quanta-icon-size-l);
+      inline-size: var(--quanta-icon-size-l);
+    }
+  }
+
+  &.icon--sizeXL {
+    &,
+    img,
+    svg {
+      block-size: var(--quanta-icon-size-xl);
+      inline-size: var(--quanta-icon-size-xl);
+    }
+  }
+
+  &.icon--sizeXXL {
+    &,
+    img,
+    svg {
+      block-size: var(--quanta-icon-size-xxl);
+      inline-size: var(--quanta-icon-size-xxl);
+    }
+  }
+}
diff --git a/src/components/Contents/styles/basic/main.css b/src/components/Contents/styles/basic/main.css
new file mode 100644
index 000000000..09a850cf6
--- /dev/null
+++ b/src/components/Contents/styles/basic/main.css
@@ -0,0 +1,43 @@
+@import './Link.css';
+@import './Button.css';
+@import './ToggleButton.css';
+@import './Label.css';
+@import './Checkbox.css';
+@import './CheckboxGroup.css';
+@import './Combobox.css';
+@import './NumberField.css';
+@import './RadioGroup.css';
+@import './Switch.css';
+@import './Slider.css';
+@import './Calendar.css';
+@import './DateField.css';
+@import './DatePicker.css';
+@import './DateRangePicker.css';
+@import './RangeCalendar.css';
+@import './Meter.css';
+@import './ProgressBar.css';
+@import './SearchField.css';
+@import './Select.css';
+@import './TimeField.css';
+@import './TextField.css';
+
+@import './Menu.css';
+@import './Listbox.css';
+@import './Gridlist.css';
+@import './Form.css';
+
+@import './Table.css';
+@import './Dialog.css';
+@import './Modal.css';
+@import './Popover.css';
+@import './Tabs.css';
+@import './TagGroup.css';
+@import './Toolbar.css';
+@import './Tooltip.css';
+
+@import './Breadcrumbs.css';
+@import './BlockToolbar.css';
+
+@import './icons.css';
+
+@import './theme.css';
diff --git a/src/components/Contents/styles/basic/theme.css b/src/components/Contents/styles/basic/theme.css
new file mode 100644
index 000000000..0191819f3
--- /dev/null
+++ b/src/components/Contents/styles/basic/theme.css
@@ -0,0 +1,133 @@
+@import '../quanta/colors.css';
+
+/* Base styles */
+:root {
+  --basic-font-family: system-ui;
+  --basic-font-size: 14px;
+  background: var(--background-color);
+  font-family: var(--basic-font-family);
+  font-size: var(--basic-font-size);
+  line-height: 1.5;
+}
+
+/* color themes for dark and light modes, generated with Leonardo.
+ * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
+:root {
+  --background-color: #fff;
+  --gray-50: #ffffff;
+  --gray-100: #d0d0d0;
+  --gray-200: #afafaf;
+  --gray-300: #8f8f8f;
+  --gray-400: #717171;
+  --gray-500: #555555;
+  --gray-600: #393939;
+  --purple-100: #d5c9fa;
+  --purple-200: #b8a3f6;
+  --purple-300: #997cf2;
+  --purple-400: #7a54ef;
+  --purple-500: #582ddc;
+  --purple-600: #3c1e95;
+  --red-100: #f7c4ba;
+  --red-200: #f29887;
+  --red-300: #eb664d;
+  --red-400: #de2300;
+  --red-500: #a81b00;
+  --red-600: #731200;
+  --highlight-hover: rgb(0 0 0 / 0.07);
+  --highlight-pressed: rgb(0 0 0 / 0.15);
+}
+
+/* ShadCN slate theme */
+:root {
+  --basic-50: #fff; /* was #f8fafc */
+  --basic-100: #f1f5f9;
+  --basic-200: #e2e8f0;
+  --basic-300: #cbd5e1;
+  --basic-400: #94a3b8;
+  --basic-500: #64748b;
+  --basic-600: #475569;
+  --basic-700: #334155;
+  --basic-800: #1e293b;
+  --basic-900: #0f172a;
+  --basic-950: #020617;
+}
+
+/* Semantic colors */
+:root {
+  /* Text */
+  --text-color: var(--basic-950); /* --gray-600 */
+  --text-color-base: var(--basic-600); /* --gray-500 */
+  --text-color-hover: var(--basic-950); /* --gray-600 */
+  --text-color-disabled: var(--basic-400); /* --gray-200 */
+  --text-color-placeholder: var(--gray-400);
+  /* Link */
+  --link-color: var(--quanta-sapphire);
+  --link-color-secondary: var(--quanta-royal);
+  --link-color-pressed: var(--quanta-cobalt);
+  /* Border */
+  --border-color: var(--basic-400); /* --gray-300 */
+  --border-color-hover: var(--basic-500); /* --gray-400 */
+  --border-color-pressed: var(--basic-500); /* --gray-400 */
+  --border-color-disabled: var(--basic-300); /* --gray-100 */
+  /* Input */
+  --focus-ring-color: var(--basic-400); /* --purple-400 */
+  --field-background: var(--basic-50); /* --purple-400 */
+  --field-text-color: var(--basic-950); /* --purple-600 */
+  /* Button */
+  --button-background: var(--basic-50); /* --gray-50 */
+  --button-background-pressed: var(--background-color); /* --background-color */
+
+  --overlay-background: var(--basic-50); /* --gray-50 */
+  /* these colors are the same between light and dark themes
+   * to ensure contrast with the foreground color */
+  --highlight-background: var(--basic-600); /* #6f46ed purple-300 */
+  --highlight-background-pressed: var(--basic-800); /* #522acd purple-200 */
+  --highlight-background-invalid: var(
+    --quanta-candy
+  ); /* red-300 from dark theme */
+  --highlight-background-hover: var(--basic-400); /* #6f46ed purple-300 */
+  --highlight-foreground: var(--basic-50); /* white */
+  --highlight-foreground-pressed: var(--basic-200); /* #ddd */
+  --highlight-overlay: var(--basic-400); /* rgb(from #6f46ed r g b / 15%) */
+  --color-invalid: var(--red-400); /* Renamed */
+  --color-pressed-invalid: var(--red-500); /* Renamed */
+}
+
+/* Layout properties */
+:root {
+  --layout-container-width: 1440px;
+  --default-container-width: 940px;
+  --narrow-container-width: 620px;
+}
+
+/* Windows high contrast mode overrides */
+@media (forced-colors: active) {
+  :root {
+    --background-color: Canvas;
+    --focus-ring-color: Highlight;
+    --text-color: ButtonText;
+    --text-color-base: ButtonText;
+    --text-color-hover: ButtonText;
+    --text-color-disabled: GrayText;
+    --text-color-placeholder: ButtonText;
+    --link-color: LinkText;
+    --link-color-secondary: LinkText;
+    --link-color-pressed: LinkText;
+    --border-color: ButtonBorder;
+    --border-color-hover: ButtonBorder;
+    --border-color-pressed: ButtonBorder;
+    --border-color-disabled: GrayText;
+    --field-background: Field;
+    --field-text-color: FieldText;
+    --overlay-background: Canvas;
+    --button-background: ButtonFace;
+    --button-background-pressed: ButtonFace;
+    --highlight-background: Highlight;
+    --highlight-background-pressed: Highlight;
+    --highlight-background-invalid: LinkText;
+    --highlight-foreground: HighlightText;
+    --highlight-foreground-pressed: HighlightText;
+    --color-invalid: LinkText;
+    --color-pressed-invalid: LinkText;
+  }
+}
diff --git a/src/components/Contents/styles/quanta/Contents.css b/src/components/Contents/styles/quanta/Contents.css
new file mode 100644
index 000000000..5f2bbc62c
--- /dev/null
+++ b/src/components/Contents/styles/quanta/Contents.css
@@ -0,0 +1,94 @@
+.folder-contents {
+  .topbar {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+
+  .search-input {
+    margin-inline-end: 3.75rem;
+    margin-inline-start: auto;
+  }
+
+  .contents-table {
+    --plone-table-width: 100%;
+  }
+
+  .add {
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0.375rem;
+    border: 0 none;
+    border-radius: 50%;
+    background: var(--quanta-sapphire);
+    color: var(--quanta-air);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--quanta-royal);
+    }
+  }
+
+  .tooltip {
+    padding: 0.1875rem 0.375rem;
+    border-radius: 3px;
+    margin-top: 0.25rem;
+    background-color: var(--quanta-denim);
+    color: var(--quanta-air);
+    line-height: 1.5;
+  }
+
+  .title-link {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.add-content-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.add-content-list-item {
+  padding: 12px;
+
+  & + .add-content-list-item {
+    border-top: 1px solid var(--quanta-smoke);
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    color: var(--quanta-sapphire);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--quanta-royal);
+      text-decoration: underline;
+    }
+  }
+
+  .icon {
+    margin-inline-start: auto;
+  }
+}
+
+.item-actions-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.item-actions-list-item {
+  padding: 12px 0;
+
+  .view,
+  .move-to-bottom {
+    border-bottom: 1px solid var(--quanta-smoke);
+  }
+
+  .icon {
+    margin-inline-end: 1rem;
+  }
+}
diff --git a/src/components/Contents/styles/quanta/Popover.css b/src/components/Contents/styles/quanta/Popover.css
new file mode 100644
index 000000000..caf9cee46
--- /dev/null
+++ b/src/components/Contents/styles/quanta/Popover.css
@@ -0,0 +1,3 @@
+.q.react-aria-Popover {
+  --border-color: transparent;
+}
diff --git a/src/components/Contents/styles/quanta/Select.css b/src/components/Contents/styles/quanta/Select.css
new file mode 100644
index 000000000..99855ac40
--- /dev/null
+++ b/src/components/Contents/styles/quanta/Select.css
@@ -0,0 +1,38 @@
+/* Quanta does not have to redefine colors, but it has to override the original ones coming
+from the basic styles. Then, if people override the basic ones, then they won't get overridden in Quanta. */
+.react-aria-Select {
+  .react-aria-Label {
+    color: var(--quanta-sapphire);
+  }
+
+  .react-aria-Button {
+    padding: 12px;
+    border: 0;
+    background-color: var(--basic-200);
+    box-shadow: 0 0 0 rgba(2, 19, 34, 0);
+    caret-color: var(--quanta-cobalt);
+
+    span[aria-hidden] {
+      background: transparent;
+      color: var(--text-color);
+    }
+
+    &[data-hovered] {
+      background-color: var(--basic-300);
+    }
+
+    &[data-focused],
+    &[data-pressed] {
+      background-color: var(--basic-50);
+      box-shadow: inset 0 0 0 2px var(--quanta-cobalt);
+      outline: 0;
+    }
+  }
+}
+
+.react-aria-Popover[data-trigger='Select'] {
+  .react-aria-ListBoxItem {
+    --highlight-background: var(--basic-300);
+    --highlight-foreground: var(--text-color);
+  }
+}
diff --git a/src/components/Contents/styles/quanta/Table.css b/src/components/Contents/styles/quanta/Table.css
new file mode 100644
index 000000000..53a8bfb77
--- /dev/null
+++ b/src/components/Contents/styles/quanta/Table.css
@@ -0,0 +1,4 @@
+:root {
+  --plone-table-header-color: var(--quanta-sapphire);
+  --plone-table-cell-border-bottom: 1px solid var(--quanta-smoke);
+}
diff --git a/src/components/Contents/styles/quanta/TextField.css b/src/components/Contents/styles/quanta/TextField.css
new file mode 100644
index 000000000..18162e070
--- /dev/null
+++ b/src/components/Contents/styles/quanta/TextField.css
@@ -0,0 +1,164 @@
+.q.react-aria-TextField,
+.q.react-aria-TextAreaField {
+  position: relative;
+
+  .react-aria-Label {
+    color: var(--quanta-sapphire);
+    pointer-events: none;
+    touch-action: none;
+    transition:
+      margin-top 0.15s ease-in-out,
+      margin-left 0.15s ease-in-out,
+      transform 0.15s ease-in-out;
+    user-select: none;
+  }
+
+  .react-aria-Label:has(+ .react-aria-Input, + .react-aria-TextArea) {
+    position: absolute;
+    top: 10px;
+    left: 12px;
+  }
+
+  .react-aria-Label:has(
+      + .react-aria-Input[data-focused],
+      + .react-aria-TextArea[data-focused]
+    ),
+  .react-aria-Label:has(
+      + .react-aria-Input:not(:placeholder-shown),
+      + .react-aria-TextArea:not(:placeholder-shown)
+    ) {
+    margin-top: -30px;
+    margin-left: -12px;
+    transform: scale(0.8571428571, 0.8571428571);
+    transform-origin: 0 0;
+  }
+
+  .react-aria-Label:has(
+      + .react-aria-Input:not(:placeholder-shown):not(:hover):not(:active):not(
+          :focus
+        ),
+      + .react-aria-TextArea:not(:placeholder-shown):not(:hover):not(
+          :active
+        ):not(:focus)
+    ) {
+    color: var(--basic-500);
+  }
+
+  .react-aria-Label:has(
+      + .react-aria-Input[required],
+      + .react-aria-TextArea[required]
+    )::after {
+    /* https://yoksel.github.io/url-encoder/ */
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='hsl(7, 90%25, 59%25)' d='M12 18a6 6 0 100-12 6 6 0 000 12z'/%3E%3C/svg%3E");
+  }
+
+  .react-aria-Label:has(
+      + .react-aria-Input[required]:not(:placeholder-shown):not(:hover):not(
+          :active
+        ):not(:focus),
+      + .react-aria-TextArea[required]:not(:placeholder-shown):not(:hover):not(
+          :active
+        ):not(:focus)
+    )::after {
+    filter: grayscale(1);
+  }
+
+  .react-aria-Label:has(
+      + .react-aria-Input[data-invalid],
+      + .react-aria-TextArea[data-invalid]
+    ) {
+    color: var(--quanta-candy) !important;
+
+    &::after {
+      filter: none !important;
+    }
+  }
+
+  .react-aria-Label:has(
+      + .react-aria-Input[data-disabled],
+      + .react-aria-TextArea[data-disabled]
+    ) {
+    color: var(--basic-400) !important;
+  }
+
+  .react-aria-Label:has(
+      + .react-aria-Input[readonly],
+      + .react-aria-TextArea[readonly]
+    ) {
+    color: var(--basic-500);
+  }
+
+  .react-aria-Input,
+  .react-aria-TextArea {
+    width: 100%;
+    padding: 12px;
+    border: 0;
+    border-radius: 6px;
+    background-color: var(--basic-200);
+    box-shadow: 0 0 0 rgba(2, 19, 34, 0);
+    caret-color: var(--quanta-cobalt);
+    color: var(--text-color);
+    cursor: text;
+    text-overflow: ellipsis;
+    transition:
+      background-color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
+
+    &[data-hovered] {
+      background-color: var(--basic-300);
+    }
+
+    &[data-focused] {
+      background-color: var(--basic-50);
+      box-shadow: inset 0 0 0 2px var(--quanta-cobalt);
+      outline: 0;
+    }
+
+    &[data-invalid] {
+      background-color: var(--quanta-ballet);
+      outline: 0;
+
+      &[data-focused] {
+        background-color: var(--basic-50);
+        box-shadow: inset 0 0 0 2px var(--quanta-rose);
+      }
+    }
+
+    &[data-disabled] {
+      background-color: var(--basic-50);
+      box-shadow: inset 0 0 0 1px var(--basic-300);
+      color: var(--basic-300);
+      pointer-events: none;
+
+      & + .react-aria-Text {
+        color: var(--basic-300);
+      }
+    }
+
+    &[readonly] {
+      border: 1px dashed var(--basic-400);
+      background-color: var(--basic-50);
+      box-shadow: none;
+    }
+
+    &::placeholder {
+      color: var(--basic-400);
+      opacity: 0;
+      transition: opacity $time-tiny ease-in-out;
+    }
+
+    &:active::placeholder,
+    &:focus::placeholder {
+      opacity: 1;
+    }
+  }
+
+  .react-aria-Text {
+    padding-top: 3px;
+    color: var(--basic-500);
+    font-size: 0.9rem;
+    font-weight: 500;
+    letter-spacing: 0.012em;
+    line-height: 1.714285714285;
+  }
+}
diff --git a/src/components/Contents/styles/quanta/colors.css b/src/components/Contents/styles/quanta/colors.css
new file mode 100644
index 000000000..f52193b71
--- /dev/null
+++ b/src/components/Contents/styles/quanta/colors.css
@@ -0,0 +1,47 @@
+:root {
+  --quanta-air: #fff;
+  --quanta-space: #000;
+  --quanta-denim: #021322;
+
+  --quanta-snow: #f3f5f7;
+  --quanta-smoke: #e4e8ec;
+  --quanta-silver: #c3cdd5;
+  --quanta-dolphin: #8296a6;
+  --quanta-pigeon: #617789;
+  --quanta-iron: #4a5b68;
+
+  --quanta-arctic: #e2f1fd;
+  --quanta-sky: #c5e3fc;
+  --quanta-azure: #7cc0f8;
+  --quanta-cobalt: #2597f4;
+  --quanta-sapphire: #0b78d0;
+  --quanta-royal: #085696;
+
+  --quanta-ballet: #fee9e7;
+  --quanta-flamingo: #fcd0ca;
+  --quanta-poppy: #f9a094;
+  --quanta-rose: #f54e38;
+  --quanta-candy: #d0220b;
+  --quanta-wine: #a91c09;
+
+  --quanta-cream: #fcf3cf;
+  --quanta-banana: #faeaad;
+  --quanta-lemmon: #f6d355;
+  --quanta-gold: #b48f09;
+  --quanta-dijon: #917308;
+  --quanta-bronze: #6b5506;
+
+  --quanta-daiquiri: #e2f7de;
+  --quanta-mint: #c5efbe;
+  --quanta-celery: #8bde7c;
+  --quanta-neon: #3da72a;
+  --quanta-emerald: #318722;
+  --quanta-turtle: #256619;
+
+  --quanta-aqua: #d6f5f2;
+  --quanta-spa: #baeee9;
+  --quanta-tiffany: #74dcd4;
+  --quanta-turquoise: #29a399;
+  --quanta-peacock: #207e77;
+  --quanta-puya: #175e58;
+}
diff --git a/src/components/Contents/styles/quanta/main.css b/src/components/Contents/styles/quanta/main.css
new file mode 100644
index 000000000..6ac0595fd
--- /dev/null
+++ b/src/components/Contents/styles/quanta/main.css
@@ -0,0 +1,14 @@
+@import './colors.css';
+
+/* Components */
+@import './TextField.css';
+@import './Select.css';
+@import './Table.css';
+@import './Popover.css';
+
+/* Views */
+@import './Contents.css';
+
+.it-header-wrapper {
+  display: none;
+}
diff --git a/src/components/Table/Column.tsx b/src/components/Table/Column.tsx
new file mode 100644
index 000000000..180f28a22
--- /dev/null
+++ b/src/components/Table/Column.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { type ColumnProps, Column as RACColumn } from 'react-aria-components';
+
+export function Column(props: ColumnProps) {
+  return (
+    <RACColumn {...props}>
+      {({ allowsSorting, sortDirection }) => (
+        <>
+          {props.children}
+          {allowsSorting && (
+            <span aria-hidden="true" className="sort-indicator">
+              {sortDirection === 'ascending' ? '▲' : '▼'}
+            </span>
+          )}
+        </>
+      )}
+    </RACColumn>
+  );
+}
diff --git a/src/components/Table/Row.tsx b/src/components/Table/Row.tsx
new file mode 100644
index 000000000..896c18ae6
--- /dev/null
+++ b/src/components/Table/Row.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  type RowProps,
+  Row as RACRow,
+  Cell,
+  Collection,
+  useTableOptions,
+  Button,
+} from 'react-aria-components';
+import { Checkbox, DraggableIcon } from '@plone/components';
+
+export function Row<T extends object>({
+  id,
+  columns,
+  children,
+  ...otherProps
+}: RowProps<T>) {
+  let { selectionBehavior, allowsDragging } = useTableOptions();
+
+  return (
+    <RACRow id={id} {...otherProps}>
+      {allowsDragging && (
+        <Cell>
+          <Button slot="drag" aria-label="Drag">
+            <DraggableIcon />
+          </Button>
+        </Cell>
+      )}
+      {selectionBehavior === 'toggle' && (
+        <Cell>
+          <Checkbox slot="selection" />
+        </Cell>
+      )}
+      <Collection items={columns}>{children}</Collection>
+    </RACRow>
+  );
+}
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
new file mode 100644
index 000000000..0a2c1d886
--- /dev/null
+++ b/src/components/Table/Table.tsx
@@ -0,0 +1,87 @@
+import React, { type ReactNode } from 'react';
+import {
+  type TableProps as RACTableProps,
+  ResizableTableContainer,
+  ColumnResizer,
+  Table as RACTable,
+  TableBody,
+  Cell,
+} from 'react-aria-components';
+import { TableHeader } from './TableHeader';
+import { Column } from './Column';
+import { Row } from './Row';
+
+interface ColumnType {
+  id: string;
+  name: string;
+  isRowHeader?: boolean;
+  // TODO support width constraints for resizable columns
+}
+
+interface RowType {
+  id: string;
+  [key: string]: ReactNode; // TODO can we make this more specific?
+}
+
+interface TableProps<C, R> extends RACTableProps {
+  columns?: C[];
+  rows?: R[];
+  resizableColumns?: boolean;
+  // TODO maybe a custom "selectall" component? Is it doable with react-aria-components?
+}
+
+/**
+ * A wrapper around the `react-aria-components` Table component.
+ *
+ * See https://react-spectrum.adobe.com/react-aria/Table.html
+ */
+export function Table<C extends ColumnType, R extends RowType>({
+  columns,
+  rows,
+  resizableColumns,
+  ...otherProps
+}: TableProps<C, R>) {
+  let table = null;
+  if (Array.isArray(columns) && Array.isArray(rows)) {
+    table = (
+      <RACTable {...otherProps}>
+        <TableHeader columns={columns}>
+          {(column) => (
+            <Column isRowHeader={column.isRowHeader}>
+              {resizableColumns && (
+                <div className="flex-wrapper">
+                  <span tabIndex={-1} className="column-name">
+                    {column.name}
+                  </span>
+                  <ColumnResizer />
+                </div>
+              )}
+              {!resizableColumns && column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody items={rows}>
+          {(item) => (
+            <Row columns={columns}>
+              {(column) => <Cell>{item[column.id]}</Cell>}
+            </Row>
+          )}
+        </TableBody>
+      </RACTable>
+    );
+  } else {
+    table = <RACTable {...otherProps} />;
+
+    if (Array.isArray(columns)) {
+      console.warn('The Table component was given columns but no rows');
+    } else if (Array.isArray(rows)) {
+      console.warn('The Table component was given rows but no columns');
+    }
+  }
+
+  if (resizableColumns) {
+    return <ResizableTableContainer>{table}</ResizableTableContainer>;
+  } else {
+    return table;
+  }
+}
diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx
new file mode 100644
index 000000000..b74f77a7b
--- /dev/null
+++ b/src/components/Table/TableHeader.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  type TableHeaderProps,
+  TableHeader as RACTableHeader,
+  useTableOptions,
+  Collection,
+} from 'react-aria-components';
+import { Checkbox } from '@plone/components';
+import { Column } from './Column';
+
+export function TableHeader<T extends object>({
+  columns,
+  children,
+}: TableHeaderProps<T>) {
+  let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
+
+  return (
+    <RACTableHeader>
+      {/* Add extra columns for drag and drop and selection. */}
+      {allowsDragging && <Column />}
+      {selectionBehavior === 'toggle' && (
+        <Column>
+          {selectionMode === 'multiple' && <Checkbox slot="selection" />}
+        </Column>
+      )}
+      <Collection items={columns}>{children}</Collection>
+    </RACTableHeader>
+  );
+}
diff --git a/src/customizations/volto/components/manage/Contents/Contents.jsx b/src/customizations/volto/components/manage/Contents/Contents.jsx
new file mode 100644
index 000000000..13bfae82d
--- /dev/null
+++ b/src/customizations/volto/components/manage/Contents/Contents.jsx
@@ -0,0 +1,2324 @@
+/**
+ * Contents component.
+ * @module components/manage/Contents/Contents
+ * Customizations:
+ * - New Contents component
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Portal } from 'react-portal';
+import { Link } from 'react-router-dom';
+import {
+  Button,
+  Confirm,
+  Container as SemanticContainer,
+  Divider,
+  Dropdown,
+  Menu,
+  Input,
+  Segment,
+  Table,
+  Loader,
+  Dimmer,
+} from 'semantic-ui-react';
+import {
+  concat,
+  filter,
+  find,
+  indexOf,
+  keys,
+  map,
+  mapValues,
+  pull,
+} from 'lodash';
+import move from 'lodash-move';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { asyncConnect } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import {
+  searchContent,
+  cut,
+  copy,
+  copyContent,
+  deleteContent,
+  listActions,
+  moveContent,
+  orderContent,
+  sortContent,
+  updateColumnsContent,
+  linkIntegrityCheck,
+  getContent,
+} from '@plone/volto/actions';
+import Indexes, { defaultIndexes } from '@plone/volto/constants/Indexes';
+import {
+  ContentsBreadcrumbs,
+  ContentsIndexHeader,
+  ContentsItem,
+  ContentsRenameModal,
+  ContentsUploadModal,
+  ContentsWorkflowModal,
+  ContentsTagsModal,
+  ContentsPropertiesModal,
+  Pagination,
+  Popup,
+  Toolbar,
+  Toast,
+  Icon,
+  Unauthorized,
+} from '@plone/volto/components';
+
+import { Helmet, getBaseUrl } from '@plone/volto/helpers';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import { Contents as ContentsTable } from 'design-comuni-plone-theme/components/Contents/Contents';
+
+import config from '@plone/volto/registry';
+
+import backSVG from '@plone/volto/icons/back.svg';
+import cutSVG from '@plone/volto/icons/cut.svg';
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import copySVG from '@plone/volto/icons/copy.svg';
+import tagSVG from '@plone/volto/icons/tag.svg';
+import renameSVG from '@plone/volto/icons/rename.svg';
+import semaphoreSVG from '@plone/volto/icons/semaphore.svg';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+import propertiesSVG from '@plone/volto/icons/properties.svg';
+import pasteSVG from '@plone/volto/icons/paste.svg';
+import zoomSVG from '@plone/volto/icons/zoom.svg';
+import checkboxUncheckedSVG from '@plone/volto/icons/checkbox-unchecked.svg';
+import checkboxCheckedSVG from '@plone/volto/icons/checkbox-checked.svg';
+import checkboxIndeterminateSVG from '@plone/volto/icons/checkbox-indeterminate.svg';
+import configurationSVG from '@plone/volto/icons/configuration-app.svg';
+import sortDownSVG from '@plone/volto/icons/sort-down.svg';
+import sortUpSVG from '@plone/volto/icons/sort-up.svg';
+import downKeySVG from '@plone/volto/icons/down-key.svg';
+import moreSVG from '@plone/volto/icons/more.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+const messages = defineMessages({
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  contents: {
+    id: 'Contents',
+    defaultMessage: 'Contents',
+  },
+  copy: {
+    id: 'Copy',
+    defaultMessage: 'Copy',
+  },
+  cut: {
+    id: 'Cut',
+    defaultMessage: 'Cut',
+  },
+  error: {
+    id: "You can't paste this content here",
+    defaultMessage: "You can't paste this content here",
+  },
+  delete: {
+    id: 'Delete',
+    defaultMessage: 'Delete',
+  },
+  deleteConfirmSingleItem: {
+    id: 'Delete this item?',
+    defaultMessage: 'Delete this item?',
+  },
+  deleteConfirmMultipleItems: {
+    id: 'Delete selected items?',
+    defaultMessage: 'Delete selected items?',
+  },
+  deleteError: {
+    id: 'The item could not be deleted.',
+    defaultMessage: 'The item could not be deleted.',
+  },
+  loading: {
+    id: 'loading',
+    defaultMessage: 'Loading',
+  },
+  home: {
+    id: 'Home',
+    defaultMessage: 'Home',
+  },
+  filter: {
+    id: 'Filter…',
+    defaultMessage: 'Filter…',
+  },
+  messageCopied: {
+    id: 'Item(s) copied.',
+    defaultMessage: 'Item(s) copied.',
+  },
+  messageCut: {
+    id: 'Item(s) cut.',
+    defaultMessage: 'Item(s) cut.',
+  },
+  messageUpdate: {
+    id: 'Item(s) has been updated.',
+    defaultMessage: 'Item(s) has been updated.',
+  },
+  messageReorder: {
+    id: 'Item succesfully moved.',
+    defaultMessage: 'Item successfully moved.',
+  },
+  messagePasted: {
+    id: 'Item(s) pasted.',
+    defaultMessage: 'Item(s) pasted.',
+  },
+  messageWorkflowUpdate: {
+    id: 'Item(s) state has been updated.',
+    defaultMessage: 'Item(s) state has been updated.',
+  },
+  paste: {
+    id: 'Paste',
+    defaultMessage: 'Paste',
+  },
+  properties: {
+    id: 'Properties',
+    defaultMessage: 'Properties',
+  },
+  rearrangeBy: {
+    id: 'Rearrange items by…',
+    defaultMessage: 'Rearrange items by…',
+  },
+  rename: {
+    id: 'Rename',
+    defaultMessage: 'Rename',
+  },
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  selected: {
+    id: '{count} selected',
+    defaultMessage: '{count} selected',
+  },
+  selectColumns: {
+    id: 'Select columns to show',
+    defaultMessage: 'Select columns to show',
+  },
+  sort: {
+    id: 'sort',
+    defaultMessage: 'sort',
+  },
+  state: {
+    id: 'State',
+    defaultMessage: 'State',
+  },
+  tags: {
+    id: 'Tags',
+    defaultMessage: 'Tags',
+  },
+  upload: {
+    id: 'Upload',
+    defaultMessage: 'Upload',
+  },
+  success: {
+    id: 'Success',
+    defaultMessage: 'Success',
+  },
+  publicationDate: {
+    id: 'Publication date',
+    defaultMessage: 'Publication date',
+  },
+  createdOn: {
+    id: 'Created on',
+    defaultMessage: 'Created on',
+  },
+  expirationDate: {
+    id: 'Expiration date',
+    defaultMessage: 'Expiration date',
+  },
+  id: {
+    id: 'ID',
+    defaultMessage: 'ID',
+  },
+  uid: {
+    id: 'UID',
+    defaultMessage: 'UID',
+  },
+  reviewState: {
+    id: 'Review state',
+    defaultMessage: 'Review state',
+  },
+  folder: {
+    id: 'Folder',
+    defaultMessage: 'Folder',
+  },
+  excludedFromNavigation: {
+    id: 'Excluded from navigation',
+    defaultMessage: 'Excluded from navigation',
+  },
+  objectSize: {
+    id: 'Object Size',
+    defaultMessage: 'Object Size',
+  },
+  lastCommentedDate: {
+    id: 'Last comment date',
+    defaultMessage: 'Last comment date',
+  },
+  totalComments: {
+    id: 'Total comments',
+    defaultMessage: 'Total comments',
+  },
+  creator: {
+    id: 'Creator',
+    defaultMessage: 'Creator',
+  },
+  endDate: {
+    id: 'End Date',
+    defaultMessage: 'End Date',
+  },
+  startDate: {
+    id: 'Start Date',
+    defaultMessage: 'Start Date',
+  },
+  all: {
+    id: 'All',
+    defaultMessage: 'All',
+  },
+});
+
+/**
+ * Contents class.
+ * @class Contents
+ * @extends Component
+ */
+class Contents extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    action: PropTypes.string,
+    source: PropTypes.arrayOf(PropTypes.string),
+    searchContent: PropTypes.func.isRequired,
+    cut: PropTypes.func.isRequired,
+    copy: PropTypes.func.isRequired,
+    copyContent: PropTypes.func.isRequired,
+    deleteContent: PropTypes.func.isRequired,
+    moveContent: PropTypes.func.isRequired,
+    orderContent: PropTypes.func.isRequired,
+    sortContent: PropTypes.func.isRequired,
+    updateColumnsContent: PropTypes.func.isRequired,
+    linkIntegrityCheck: PropTypes.func.isRequired,
+    clipboardRequest: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    deleteRequest: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    updateRequest: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    searchRequest: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        '@id': PropTypes.string,
+        '@type': PropTypes.string,
+        title: PropTypes.string,
+        description: PropTypes.string,
+      }),
+    ),
+    breadcrumbs: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string,
+      }),
+    ).isRequired,
+    total: PropTypes.number.isRequired,
+    pathname: PropTypes.string.isRequired,
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    items: [],
+    action: null,
+    source: null,
+    index: {
+      order: keys(Indexes),
+      values: mapValues(Indexes, (value, key) => ({
+        ...value,
+        selected: indexOf(defaultIndexes, key) !== -1,
+      })),
+      selectedCount: defaultIndexes.length + 1,
+    },
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs ContentsComponent
+   */
+  constructor(props) {
+    super(props);
+    this.onDeselect = this.onDeselect.bind(this);
+    this.onSelect = this.onSelect.bind(this);
+    this.onSelectAll = this.onSelectAll.bind(this);
+    this.onSelectIndex = this.onSelectIndex.bind(this);
+    this.onSelectNone = this.onSelectNone.bind(this);
+    this.onDeleteOk = this.onDeleteOk.bind(this);
+    this.onDeleteCancel = this.onDeleteCancel.bind(this);
+    this.onUploadOk = this.onUploadOk.bind(this);
+    this.onUploadCancel = this.onUploadCancel.bind(this);
+    this.onRenameOk = this.onRenameOk.bind(this);
+    this.onRenameCancel = this.onRenameCancel.bind(this);
+    this.onTagsOk = this.onTagsOk.bind(this);
+    this.onTagsCancel = this.onTagsCancel.bind(this);
+    this.onPropertiesOk = this.onPropertiesOk.bind(this);
+    this.onPropertiesCancel = this.onPropertiesCancel.bind(this);
+    this.onWorkflowOk = this.onWorkflowOk.bind(this);
+    this.onWorkflowCancel = this.onWorkflowCancel.bind(this);
+    this.onChangeFilter = this.onChangeFilter.bind(this);
+    this.onChangePage = this.onChangePage.bind(this);
+    this.onChangePageSize = this.onChangePageSize.bind(this);
+    this.onOrderIndex = this.onOrderIndex.bind(this);
+    this.onOrderItem = this.onOrderItem.bind(this);
+    this.onSortItems = this.onSortItems.bind(this);
+    this.onMoveToTop = this.onMoveToTop.bind(this);
+    this.onChangeSelected = this.onChangeSelected.bind(this);
+    this.onMoveToBottom = this.onMoveToBottom.bind(this);
+    this.cut = this.cut.bind(this);
+    this.copy = this.copy.bind(this);
+    this.delete = this.delete.bind(this);
+    this.upload = this.upload.bind(this);
+    this.rename = this.rename.bind(this);
+    this.tags = this.tags.bind(this);
+    this.properties = this.properties.bind(this);
+    this.workflow = this.workflow.bind(this);
+    this.paste = this.paste.bind(this);
+    this.fetchContents = this.fetchContents.bind(this);
+    this.orderTimeout = null;
+    this.deleteItemsToShowThreshold = 10;
+
+    this.state = {
+      selected: [],
+      showDelete: false,
+      showUpload: false,
+      showRename: false,
+      showTags: false,
+      showProperties: false,
+      showWorkflow: false,
+      itemsToDelete: [],
+      containedItemsToDelete: [],
+      brokenReferences: 0,
+      breaches: [],
+      showAllItemsToDelete: true,
+      items: this.props.items,
+      filter: '',
+      currentPage: 0,
+      pageSize: 50,
+      index: this.props.index || {
+        order: keys(Indexes),
+        values: mapValues(Indexes, (value, key) => ({
+          ...value,
+          selected: indexOf(defaultIndexes, key) !== -1,
+        })),
+        selectedCount: defaultIndexes.length + 1,
+      },
+      sort_on: this.props.sort?.on || 'getObjPositionInParent',
+      sort_order: this.props.sort?.order || 'ascending',
+      isClient: false,
+      linkIntegrityBreakages: [],
+    };
+    this.filterTimeout = null;
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.fetchContents();
+    this.setState({ isClient: true });
+  }
+  async componentDidUpdate(_, prevState) {
+    if (
+      this.state.itemsToDelete !== prevState.itemsToDelete &&
+      this.state.itemsToDelete.length > 0
+    ) {
+      const linkintegrityInfo = await this.props.linkIntegrityCheck(
+        map(this.state.itemsToDelete, (item) => this.getFieldById(item, 'UID')),
+      );
+      const containedItems = linkintegrityInfo
+        .map((result) => result.items_total ?? 0)
+        .reduce((acc, value) => acc + value, 0);
+      const breaches = linkintegrityInfo.flatMap((result) =>
+        result.breaches.map((source) => ({
+          source: source,
+          target: result,
+        })),
+      );
+      const source_by_uid = breaches.reduce(
+        (acc, value) => acc.set(value.source.uid, value.source),
+        new Map(),
+      );
+      const by_source = breaches.reduce((acc, value) => {
+        if (acc.get(value.source.uid) === undefined) {
+          acc.set(value.source.uid, new Set());
+        }
+        acc.get(value.source.uid).add(value.target);
+        return acc;
+      }, new Map());
+
+      this.setState({
+        containedItemsToDelete: containedItems,
+        brokenReferences: by_source.size,
+        linksAndReferencesViewLink: linkintegrityInfo.length
+          ? linkintegrityInfo[0]['@id'] + '/links-to-item'
+          : null,
+        breaches: Array.from(by_source, (entry) => ({
+          source: source_by_uid.get(entry[0]),
+          targets: Array.from(entry[1]),
+        })),
+        showAllItemsToDelete:
+          this.state.itemsToDelete.length < this.deleteItemsToShowThreshold,
+      });
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (
+      (this.props.clipboardRequest.loading &&
+        nextProps.clipboardRequest.loaded) ||
+      (this.props.deleteRequest.loading && nextProps.deleteRequest.loaded) ||
+      (this.props.updateRequest.loading && nextProps.updateRequest.loaded)
+    ) {
+      this.fetchContents(nextProps.pathname);
+    }
+    if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {
+      this.props.toastify.toast.success(
+        <Toast
+          success
+          title={this.props.intl.formatMessage(messages.success)}
+          content={this.props.intl.formatMessage(messages.messageUpdate)}
+        />,
+      );
+    }
+    if (this.props.pathname !== nextProps.pathname) {
+      // Refetching content to sync the current object in the toolbar
+      this.props.getContent(getBaseUrl(nextProps.pathname));
+      this.setState(
+        {
+          currentPage: 0,
+        },
+        () =>
+          this.setState({ filter: '' }, () =>
+            this.fetchContents(nextProps.pathname),
+          ),
+      );
+    }
+    if (this.props.searchRequest.loading && nextProps.searchRequest.loaded) {
+      this.setState({
+        items: nextProps.items,
+      });
+    }
+    if (
+      this.props.clipboardRequest.loading &&
+      nextProps.clipboardRequest.error
+    ) {
+      this.props.toastify.toast.error(
+        <Toast
+          error
+          title={this.props.intl.formatMessage(messages.error)}
+          content={this.props.intl.formatMessage(messages.error)}
+        />,
+      );
+    }
+
+    if (
+      this.props.clipboardRequest.loading &&
+      nextProps.clipboardRequest.loaded
+    ) {
+      this.props.toastify.toast.success(
+        <Toast
+          success
+          title={this.props.intl.formatMessage(messages.success)}
+          content={this.props.intl.formatMessage(messages.messagePasted)}
+        />,
+      );
+    }
+
+    if (this.props.deleteRequest.loading && nextProps.deleteRequest.error) {
+      this.props.toastify.toast.error(
+        <Toast
+          error
+          title={this.props.intl.formatMessage(messages.deleteError)}
+          content={this.props.intl.formatMessage(messages.deleteError)}
+        />,
+      );
+    }
+
+    if (this.props.orderRequest.loading && nextProps.orderRequest.loaded) {
+      this.props.toastify.toast.success(
+        <Toast
+          success
+          title={this.props.intl.formatMessage(messages.success)}
+          content={this.props.intl.formatMessage(messages.messageReorder)}
+        />,
+      );
+    }
+  }
+
+  /**
+   * On deselect handler
+   * @method onDeselect
+   * @param {object} event Event object
+   * @param {string} value Value
+   * @returns {undefined}
+   */
+  onDeselect(event, { value }) {
+    this.setState({
+      selected: pull(this.state.selected, value),
+    });
+  }
+
+  /**
+   * On select handler
+   * @method onSelect
+   * @param {object} event Event object
+   * @returns {undefined}
+   */
+  onSelect(event, id) {
+    if (indexOf(this.state.selected, id) === -1) {
+      this.setState({
+        selected: concat(this.state.selected, id),
+      });
+    } else {
+      this.setState({
+        selected: pull(this.state.selected, id),
+      });
+    }
+  }
+
+  /**
+   * On select all handler
+   * @method onSelectAll
+   * @returns {undefined}
+   */
+  onSelectAll() {
+    this.setState({
+      selected: map(this.state.items, (item) => item['@id']),
+    });
+  }
+
+  /**
+   * On select none handler
+   * @method onSelectNone
+   * @returns {undefined}
+   */
+  onSelectNone() {
+    this.setState({
+      selected: [],
+    });
+  }
+
+  /**
+   * On select index
+   * @method onSelectIndex
+   * @param {object} event Event object.
+   * @param {string} value Index value.
+   * @returns {undefined}
+   */
+  onSelectIndex(event, { value }) {
+    let newIndex = {
+      ...this.state.index,
+      selectedCount:
+        this.state.index.selectedCount +
+        (this.state.index.values[value].selected ? -1 : 1),
+      values: mapValues(this.state.index.values, (indexValue, indexKey) => ({
+        ...indexValue,
+        selected:
+          indexKey === value ? !indexValue.selected : indexValue.selected,
+      })),
+    };
+    this.setState({
+      index: newIndex,
+    });
+    this.props.updateColumnsContent(getBaseUrl(this.props.pathname), newIndex);
+  }
+
+  /**
+   * On change filter
+   * @method onChangeFilter
+   * @param {object} event Event object.
+   * @param {string} value Filter value.
+   * @returns {undefined}
+   */
+  onChangeFilter(event, { value }) {
+    const self = this;
+    clearTimeout(self.filterTimeout);
+    this.setState(
+      {
+        filter: value,
+      },
+      () => {
+        self.filterTimeout = setTimeout(() => {
+          self.fetchContents();
+        }, 200);
+      },
+    );
+  }
+
+  /**
+   * On change selected values (Filter)
+   * @method onChangeSelected
+   * @param {object} event Event object.
+   * @param {string} value Filter value.
+   * @returns {undefined}
+   */
+  onChangeSelected(event, { value }) {
+    event.stopPropagation();
+    const { items, selected } = this.state;
+
+    const filteredItems = filter(selected, (selectedItem) =>
+      find(items, (item) => item['@id'] === selectedItem)
+        .title.toLowerCase()
+        .includes(value.toLowerCase()),
+    );
+
+    this.setState({
+      filteredItems,
+      selectedMenuFilter: value,
+    });
+  }
+
+  /**
+   * On change page
+   * @method onChangePage
+   * @param {object} event Event object.
+   * @param {string} value Page value.
+   * @returns {undefined}
+   */
+  onChangePage(event, { value }) {
+    this.setState(
+      {
+        currentPage: value,
+      },
+      () => this.fetchContents(),
+    );
+  }
+
+  /**
+   * On change page size
+   * @method onChangePageSize
+   * @param {object} event Event object.
+   * @param {string} value Page size value.
+   * @returns {undefined}
+   */
+  onChangePageSize(event, { value }) {
+    this.setState(
+      {
+        pageSize: value,
+        currentPage: 0,
+      },
+      () => this.fetchContents(),
+    );
+  }
+
+  /**
+   * On order index
+   * @method onOrderIndex
+   * @param {number} index Index
+   * @param {number} delta Delta
+   * @returns {undefined}
+   */
+  onOrderIndex(index, delta) {
+    this.setState({
+      index: {
+        ...this.state.index,
+        order: move(this.state.index.order, index, index + delta),
+      },
+    });
+    this.props.updateColumnsContent(
+      getBaseUrl(this.props.pathname),
+      this.state.index,
+    );
+  }
+
+  /**
+   * On order item
+   * @method onOrderItem
+   * @param {string} id Item id
+   * @param {number} itemIndex Item index
+   * @param {number} delta Delta
+   * @returns {undefined}
+   */
+  onOrderItem(id, itemIndex, delta, backend) {
+    if (backend) {
+      this.props.orderContent(
+        getBaseUrl(this.props.pathname),
+        id.replace(/^.*\//, ''),
+        delta,
+      );
+    } else {
+      this.setState({
+        items: move(this.state.items, itemIndex, itemIndex + delta),
+      });
+    }
+  }
+
+  /**
+   * On sort items
+   * @method onSortItems
+   * @param {object} event Event object
+   * @param {string} value Item index
+   * @returns {undefined}
+   */
+  onSortItems(event, { value }) {
+    const values = value.split('|');
+    this.setState({
+      sort_on: values[0],
+      sort_order: values[1],
+    });
+    this.props.sortContent(
+      getBaseUrl(this.props.pathname),
+      values[0],
+      values[1],
+    );
+  }
+
+  /**
+   * On move to top
+   * @method onMoveToTop
+   * @param {object} event Event object
+   * @param {string} value Item index
+   * @returns {undefined}
+   */
+  onMoveToTop(event, { value }) {
+    const id = this.state.items[value]['@id'];
+    this.props
+      .orderContent(
+        getBaseUrl(this.props.pathname),
+        id.replace(/^.*\//, ''),
+        'top',
+      )
+      .then(() => {
+        this.setState(
+          {
+            currentPage: 0,
+          },
+          () => this.fetchContents(),
+        );
+      });
+  }
+
+  /**
+   * On move to bottom
+   * @method onMoveToBottom
+   * @param {object} event Event object
+   * @param {string} value Item index
+   * @returns {undefined}
+   */
+  onMoveToBottom(event, { value }) {
+    const id = this.state.items[value]['@id'];
+    this.props
+      .orderContent(
+        getBaseUrl(this.props.pathname),
+        id.replace(/^.*\//, ''),
+        'bottom',
+      )
+      .then(() => {
+        this.setState(
+          {
+            currentPage: 0,
+          },
+          () => this.fetchContents(),
+        );
+      });
+  }
+
+  /**
+   * On delete ok
+   * @method onDeleteOk
+   * @returns {undefined}
+   */
+  onDeleteOk() {
+    this.props.deleteContent(this.state.itemsToDelete);
+    this.setState({
+      showDelete: false,
+      itemsToDelete: [],
+      selected: [],
+    });
+  }
+
+  /**
+   * On delete cancel
+   * @method onDeleteCancel
+   * @returns {undefined}
+   */
+  onDeleteCancel() {
+    this.setState({
+      showDelete: false,
+      itemsToDelete: [],
+    });
+  }
+
+  /**
+   * On upload ok
+   * @method onUploadOk
+   * @returns {undefined}
+   */
+  onUploadOk() {
+    this.fetchContents();
+    this.setState({
+      showUpload: false,
+    });
+  }
+
+  /**
+   * On upload cancel
+   * @method onUploadCancel
+   * @returns {undefined}
+   */
+  onUploadCancel() {
+    this.setState({
+      showUpload: false,
+    });
+  }
+
+  /**
+   * On rename ok
+   * @method onRenameOk
+   * @returns {undefined}
+   */
+  onRenameOk() {
+    this.setState({
+      showRename: false,
+      selected: [],
+    });
+  }
+
+  /**
+   * On rename cancel
+   * @method onRenameCancel
+   * @returns {undefined}
+   */
+  onRenameCancel() {
+    this.setState({
+      showRename: false,
+    });
+  }
+
+  /**
+   * On tags ok
+   * @method onTagsOk
+   * @returns {undefined}
+   */
+  onTagsOk() {
+    this.setState({
+      showTags: false,
+      selected: [],
+    });
+  }
+
+  /**
+   * On tags cancel
+   * @method onTagsCancel
+   * @returns {undefined}
+   */
+  onTagsCancel() {
+    this.setState({
+      showTags: false,
+    });
+  }
+
+  /**
+   * On properties ok
+   * @method onPropertiesOk
+   * @returns {undefined}
+   */
+  onPropertiesOk() {
+    this.setState({
+      showProperties: false,
+      selected: [],
+    });
+  }
+
+  /**
+   * On properties cancel
+   * @method onPropertiesCancel
+   * @returns {undefined}
+   */
+  onPropertiesCancel() {
+    this.setState({
+      showProperties: false,
+    });
+  }
+
+  /**
+   * On workflow ok
+   * @method onWorkflowOk
+   * @returns {undefined}
+   */
+  onWorkflowOk() {
+    this.fetchContents();
+    this.setState({
+      showWorkflow: false,
+      selected: [],
+    });
+    this.props.toastify.toast.success(
+      <Toast
+        success
+        title={this.props.intl.formatMessage(messages.success)}
+        content={this.props.intl.formatMessage(messages.messageWorkflowUpdate)}
+      />,
+    );
+  }
+
+  /**
+   * On workflow cancel
+   * @method onWorkflowCancel
+   * @returns {undefined}
+   */
+  onWorkflowCancel() {
+    this.setState({
+      showWorkflow: false,
+    });
+  }
+
+  /**
+   * Get field by id
+   * @method getFieldById
+   * @param {string} id Id of object
+   * @param {string} field Field of object
+   * @returns {string} Field of object
+   */
+  getFieldById(id, field) {
+    const item = find(this.state.items, { '@id': id });
+    return item ? item[field] : '';
+  }
+
+  /**
+   * Fetch contents handler
+   * @method fetchContents
+   * @param {string} pathname Pathname to fetch contents.
+   * @returns {undefined}
+   */
+  fetchContents(pathname) {
+    if (this.state.pageSize === this.props.intl.formatMessage(messages.all)) {
+      //'All'
+      this.props.searchContent(getBaseUrl(pathname || this.props.pathname), {
+        'path.depth': 1,
+        sort_on: this.state.sort_on,
+        sort_order: this.state.sort_order,
+        metadata_fields: '_all',
+        b_size: 100000000,
+        show_inactive: true,
+        ...(this.state.filter && { SearchableText: `${this.state.filter}*` }),
+      });
+    } else {
+      this.props.searchContent(getBaseUrl(pathname || this.props.pathname), {
+        'path.depth': 1,
+        sort_on: this.state.sort_on,
+        sort_order: this.state.sort_order,
+        metadata_fields: '_all',
+        ...(this.state.filter && { SearchableText: `${this.state.filter}*` }),
+        b_size: this.state.pageSize,
+        b_start: this.state.currentPage * this.state.pageSize,
+        show_inactive: true,
+      });
+    }
+  }
+
+  /**
+   * Cut handler
+   * @method cut
+   * @param {Object} event Event object.
+   * @param {string} value Value of the event.
+   * @returns {undefined}
+   */
+  cut(event, { value }) {
+    this.props.cut(value ? [value] : this.state.selected);
+    this.onSelectNone();
+    this.props.toastify.toast.success(
+      <Toast
+        success
+        title={this.props.intl.formatMessage(messages.success)}
+        content={this.props.intl.formatMessage(messages.messageCut)}
+      />,
+    );
+  }
+
+  /**
+   * Copy handler
+   * @method copy
+   * @param {Object} event Event object.
+   * @param {string} value Value of the event.
+   * @returns {undefined}
+   */
+  copy(event, { value }) {
+    this.props.copy(value ? [value] : this.state.selected);
+    this.onSelectNone();
+    this.props.toastify.toast.success(
+      <Toast
+        success
+        title={this.props.intl.formatMessage(messages.success)}
+        content={this.props.intl.formatMessage(messages.messageCopied)}
+      />,
+    );
+  }
+
+  /**
+   * Delete handler
+   * @method delete
+   * @param {Object} event Event object.
+   * @param {string} value Value of the event.
+   * @returns {undefined}
+   */
+  delete(event, { value }) {
+    this.setState({
+      showDelete: true,
+      itemsToDelete: value ? [value] : this.state.selected,
+    });
+  }
+
+  /**
+   * Upload handler
+   * @method upload
+   * @returns {undefined}
+   */
+  upload() {
+    this.setState({
+      showUpload: true,
+    });
+  }
+
+  /**
+   * Rename handler
+   * @method rename
+   * @returns {undefined}
+   */
+  rename() {
+    this.setState({
+      showRename: true,
+    });
+  }
+
+  /**
+   * Tags handler
+   * @method tags
+   * @returns {undefined}
+   */
+  tags() {
+    this.setState({
+      showTags: true,
+    });
+  }
+
+  /**
+   * Properties handler
+   * @method properties
+   * @returns {undefined}
+   */
+  properties() {
+    this.setState({
+      showProperties: true,
+    });
+  }
+
+  /**
+   * Workflow handler
+   * @method workflow
+   * @returns {undefined}
+   */
+  workflow() {
+    this.setState({
+      showWorkflow: true,
+    });
+  }
+
+  /**
+   * Paste handler
+   * @method paste
+   * @returns {undefined}
+   */
+  paste() {
+    if (this.props.action === 'copy') {
+      this.props.copyContent(
+        this.props.source,
+        getBaseUrl(this.props.pathname),
+      );
+    }
+    if (this.props.action === 'cut') {
+      this.props.moveContent(
+        this.props.source,
+        getBaseUrl(this.props.pathname),
+      );
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const selected = this.state.selected.length > 0;
+    const filteredItems = this.state.filteredItems || this.state.selected;
+    const path = getBaseUrl(this.props.pathname);
+    const folderContentsAction = find(this.props.objectActions, {
+      id: 'folderContents',
+    });
+    const loading =
+      (this.props.clipboardRequest?.loading &&
+        !this.props.clipboardRequest?.error) ||
+      (this.props.deleteRequest?.loading && !this.props.deleteRequest?.error) ||
+      (this.props.updateRequest?.loading && !this.props.updateRequest?.error) ||
+      (this.props.orderRequest?.loading && !this.props.orderRequest?.error) ||
+      (this.props.searchRequest?.loading && !this.props.searchRequest?.error);
+
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+    return this.props.token && this.props.objectActions?.length > 0 ? (
+      <>
+        {folderContentsAction ? (
+          <>
+            <Helmet title={this.props.intl.formatMessage(messages.contents)} />
+            <ContentsTable
+              pathname={getBaseUrl(this.props.pathname)}
+              objectActions={this.props.objectActions}
+              loading={loading}
+              title={this.props.title}
+              items={this.state.items}
+              orderContent={this.props.orderContent}
+              addableTypes={this.props.addableTypes}
+            />
+          </>
+        ) : (
+          // <Container
+          //   id="page-contents"
+          //   className="folder-contents"
+          //   aria-live="polite"
+          // >
+          //   <Dimmer.Dimmable as="div" blurring dimmed={loading}>
+          //     <Dimmer active={loading} inverted>
+          //       <Loader indeterminate size="massive">
+          //         {this.props.intl.formatMessage(messages.loading)}
+          //       </Loader>
+          //     </Dimmer>
+
+          //     <Helmet
+          //       title={this.props.intl.formatMessage(messages.contents)}
+          //     />
+          //     <div className="container">
+          //       <article id="content">
+          //         <Confirm
+          //           open={this.state.showDelete}
+          //           confirmButton={
+          //             this.state.brokenReferences === 0
+          //               ? 'Delete'
+          //               : 'Delete item and break links'
+          //           }
+          //           header={
+          //             this.state.itemsToDelete.length === 1
+          //               ? this.props.intl.formatMessage(
+          //                   messages.deleteConfirmSingleItem,
+          //                 )
+          //               : this.props.intl.formatMessage(
+          //                   messages.deleteConfirmMultipleItems,
+          //                 )
+          //           }
+          //           content={
+          //             <div className="content">
+          //               {this.state.itemsToDelete.length > 1 ? (
+          //                 this.state.containedItemsToDelete > 0 ? (
+          //                   <>
+          //                     <FormattedMessage
+          //                       id="Some items are also a folder. By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
+          //                       defaultMessage="Some items are also a folder. By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
+          //                       values={{
+          //                         containedItemsToDelete: (
+          //                           <span>
+          //                             {this.state.containedItemsToDelete}
+          //                           </span>
+          //                         ),
+          //                         variation: (
+          //                           <span>
+          //                             {this.state.containedItemsToDelete ===
+          //                             1 ? (
+          //                               <FormattedMessage
+          //                                 id="item"
+          //                                 defaultMessage="item"
+          //                               />
+          //                             ) : (
+          //                               <FormattedMessage
+          //                                 id="items"
+          //                                 defaultMessage="items"
+          //                               />
+          //                             )}
+          //                           </span>
+          //                         ),
+          //                       }}
+          //                     />
+          //                     {this.state.brokenReferences > 0 && (
+          //                       <>
+          //                         <br />
+          //                         <FormattedMessage
+          //                           id="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+          //                           defaultMessage="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+          //                           values={{
+          //                             brokenReferences: (
+          //                               <span>
+          //                                 {this.state.brokenReferences}
+          //                               </span>
+          //                             ),
+          //                             variation: (
+          //                               <span>
+          //                                 {this.state.brokenReferences === 1 ? (
+          //                                   <FormattedMessage
+          //                                     id="reference"
+          //                                     defaultMessage="reference"
+          //                                   />
+          //                                 ) : (
+          //                                   <FormattedMessage
+          //                                     id="references"
+          //                                     defaultMessage="references"
+          //                                   />
+          //                                 )}
+          //                               </span>
+          //                             ),
+          //                           }}
+          //                         />
+          //                       </>
+          //                     )}
+          //                   </>
+          //                 ) : (
+          //                   <>
+          //                     {this.state.brokenReferences > 0 && (
+          //                       <>
+          //                         <FormattedMessage
+          //                           id="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+          //                           defaultMessage="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+          //                           values={{
+          //                             brokenReferences: (
+          //                               <span>
+          //                                 {this.state.brokenReferences}
+          //                               </span>
+          //                             ),
+          //                             variation: (
+          //                               <span>
+          //                                 {this.state.brokenReferences === 1 ? (
+          //                                   <FormattedMessage
+          //                                     id="reference"
+          //                                     defaultMessage="reference"
+          //                                   />
+          //                                 ) : (
+          //                                   <FormattedMessage
+          //                                     id="references"
+          //                                     defaultMessage="references"
+          //                                   />
+          //                                 )}
+          //                               </span>
+          //                             ),
+          //                           }}
+          //                         />
+          //                       </>
+          //                     )}
+          //                   </>
+          //                 )
+          //               ) : this.state.containedItemsToDelete > 0 ? (
+          //                 <>
+          //                   <FormattedMessage
+          //                     id="This item is also a folder. By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
+          //                     defaultMessage="This item is also a folder. By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
+          //                     values={{
+          //                       containedItemsToDelete: (
+          //                         <span>
+          //                           {this.state.containedItemsToDelete}
+          //                         </span>
+          //                       ),
+          //                       variation: (
+          //                         <span>
+          //                           {this.state.containedItemsToDelete === 1 ? (
+          //                             <FormattedMessage
+          //                               id="item"
+          //                               defaultMessage="item"
+          //                             />
+          //                           ) : (
+          //                             <FormattedMessage
+          //                               id="items"
+          //                               defaultMessage="items"
+          //                             />
+          //                           )}
+          //                         </span>
+          //                       ),
+          //                     }}
+          //                   />
+          //                   {this.state.brokenReferences > 0 && (
+          //                     <>
+          //                       <br />
+          //                       <FormattedMessage
+          //                         id="Deleting this item breaks {brokenReferences} {variation}."
+          //                         defaultMessage="Deleting this item breaks {brokenReferences} {variation}."
+          //                         values={{
+          //                           brokenReferences: (
+          //                             <span>{this.state.brokenReferences}</span>
+          //                           ),
+          //                           variation: (
+          //                             <span>
+          //                               {this.state.brokenReferences === 1 ? (
+          //                                 <FormattedMessage
+          //                                   id="reference"
+          //                                   defaultMessage="reference"
+          //                                 />
+          //                               ) : (
+          //                                 <FormattedMessage
+          //                                   id="references"
+          //                                   defaultMessage="references"
+          //                                 />
+          //                               )}
+          //                             </span>
+          //                           ),
+          //                         }}
+          //                       />
+          //                       <div className="broken-links-list">
+          //                         <FormattedMessage id="These items will have broken links" />
+          //                         <ul>
+          //                           {this.state.breaches.map((breach) => (
+          //                             <li key={breach.source['@id']}>
+          //                               <Link
+          //                                 to={flattenToAppURL(
+          //                                   breach.source['@id'],
+          //                                 )}
+          //                                 title="Navigate to this item"
+          //                               >
+          //                                 {breach.source.title}
+          //                               </Link>{' '}
+          //                               refers to{' '}
+          //                               {breach.targets
+          //                                 .map((target) => (
+          //                                   <Link
+          //                                     to={flattenToAppURL(
+          //                                       target['@id'],
+          //                                     )}
+          //                                     title="Navigate to this item"
+          //                                   >
+          //                                     {target.title}
+          //                                   </Link>
+          //                                 ))
+          //                                 .reduce((result, item) => (
+          //                                   <>
+          //                                     {result}, {item}
+          //                                   </>
+          //                                 ))}
+          //                             </li>
+          //                           ))}
+          //                         </ul>
+          //                         {this.state.linksAndReferencesViewLink && (
+          //                           <Link
+          //                             to={flattenToAppURL(
+          //                               this.state.linksAndReferencesViewLink,
+          //                             )}
+          //                           >
+          //                             <FormattedMessage
+          //                               id="View links and references to this item"
+          //                               defaultMessage="View links and references to this item"
+          //                             />
+          //                           </Link>
+          //                         )}
+          //                       </div>
+          //                     </>
+          //                   )}
+          //                 </>
+          //               ) : this.state.brokenReferences > 0 ? (
+          //                 <>
+          //                   <FormattedMessage
+          //                     id="Deleting this item breaks {brokenReferences} {variation}."
+          //                     defaultMessage="Deleting this item breaks {brokenReferences} {variation}."
+          //                     values={{
+          //                       brokenReferences: (
+          //                         <span>{this.state.brokenReferences}</span>
+          //                       ),
+          //                       variation: (
+          //                         <span>
+          //                           {this.state.brokenReferences === 1 ? (
+          //                             <FormattedMessage
+          //                               id="reference"
+          //                               defaultMessage="reference"
+          //                             />
+          //                           ) : (
+          //                             <FormattedMessage id="references" />
+          //                           )}
+          //                         </span>
+          //                       ),
+          //                     }}
+          //                   />
+          //                   <div className="broken-links-list">
+          //                     <FormattedMessage id="These items will have broken links" />
+          //                     <ul>
+          //                       {this.state.breaches.map((breach) => (
+          //                         <li key={breach.source['@id']}>
+          //                           <Link
+          //                             to={flattenToAppURL(breach.source['@id'])}
+          //                             title="Navigate to this item"
+          //                           >
+          //                             {breach.source.title}
+          //                           </Link>{' '}
+          //                           refers to{' '}
+          //                           {breach.targets
+          //                             .map((target) => (
+          //                               <Link
+          //                                 to={flattenToAppURL(target['@id'])}
+          //                                 title="Navigate to this item"
+          //                               >
+          //                                 {target.title}
+          //                               </Link>
+          //                             ))
+          //                             .reduce((result, item) => (
+          //                               <>
+          //                                 {result}, {item}
+          //                               </>
+          //                             ))}
+          //                         </li>
+          //                       ))}
+          //                     </ul>
+          //                     {this.state.linksAndReferencesViewLink && (
+          //                       <Link
+          //                         to={flattenToAppURL(
+          //                           this.state.linksAndReferencesViewLink,
+          //                         )}
+          //                       >
+          //                         <FormattedMessage
+          //                           id="View links and references to this item"
+          //                           defaultMessage="View links and references to this item"
+          //                         />
+          //                       </Link>
+          //                     )}
+          //                   </div>
+          //                 </>
+          //               ) : null}
+          //             </div>
+          //           }
+          //           onCancel={this.onDeleteCancel}
+          //           onConfirm={this.onDeleteOk}
+          //           size="medium"
+          //         />
+          //         <ContentsUploadModal
+          //           open={this.state.showUpload}
+          //           onCancel={this.onUploadCancel}
+          //           onOk={this.onUploadOk}
+          //           pathname={getBaseUrl(this.props.pathname)}
+          //         />
+          //         <ContentsRenameModal
+          //           open={this.state.showRename}
+          //           onCancel={this.onRenameCancel}
+          //           onOk={this.onRenameOk}
+          //           items={map(this.state.selected, (item) => ({
+          //             url: item,
+          //             title: this.getFieldById(item, 'title'),
+          //             id: this.getFieldById(item, 'id'),
+          //           }))}
+          //         />
+          //         <ContentsTagsModal
+          //           open={this.state.showTags}
+          //           onCancel={this.onTagsCancel}
+          //           onOk={this.onTagsOk}
+          //           items={map(this.state.selected, (item) => ({
+          //             url: item,
+          //             subjects: this.getFieldById(item, 'Subject'),
+          //           }))}
+          //         />
+          //         <ContentsPropertiesModal
+          //           open={this.state.showProperties}
+          //           onCancel={this.onPropertiesCancel}
+          //           onOk={this.onPropertiesOk}
+          //           items={this.state.selected}
+          //         />
+          //         {this.state.showWorkflow && (
+          //           <ContentsWorkflowModal
+          //             open={this.state.showWorkflow}
+          //             onCancel={this.onWorkflowCancel}
+          //             onOk={this.onWorkflowOk}
+          //             items={this.state.selected}
+          //           />
+          //         )}
+          //         <section id="content-core">
+          //           <Segment.Group raised>
+          //             <Menu secondary attached className="top-menu">
+          //               <Menu.Menu className="top-menu-menu">
+          //                 <Popup
+          //                   trigger={
+          //                     <Menu.Item
+          //                       icon
+          //                       as={Button}
+          //                       onClick={this.upload}
+          //                       className="upload"
+          //                       aria-label={this.props.intl.formatMessage(
+          //                         messages.upload,
+          //                       )}
+          //                     >
+          //                       <Icon
+          //                         name={uploadSVG}
+          //                         color="#007eb1"
+          //                         size="24px"
+          //                         className="upload"
+          //                       />
+          //                     </Menu.Item>
+          //                   }
+          //                   position="top center"
+          //                   content={this.props.intl.formatMessage(
+          //                     messages.upload,
+          //                   )}
+          //                   size="mini"
+          //                 />
+          //               </Menu.Menu>
+          //               <Menu.Menu className="top-menu-menu">
+          //                 <Popup
+          //                   trigger={
+          //                     <Menu.Item
+          //                       icon
+          //                       as={Button}
+          //                       onClick={this.rename}
+          //                       disabled={!selected}
+          //                       aria-label={this.props.intl.formatMessage(
+          //                         messages.rename,
+          //                       )}
+          //                     >
+          //                       <Icon
+          //                         name={renameSVG}
+          //                         color={selected ? '#826a6a' : 'grey'}
+          //                         size="24px"
+          //                         className="rename"
+          //                       />
+          //                     </Menu.Item>
+          //                   }
+          //                   position="top center"
+          //                   content={this.props.intl.formatMessage(
+          //                     messages.rename,
+          //                   )}
+          //                   size="mini"
+          //                 />
+          //                 <Popup
+          //                   trigger={
+          //                     <Menu.Item
+          //                       icon
+          //                       as={Button}
+          //                       onClick={this.workflow}
+          //                       disabled={!selected}
+          //                       aria-label={this.props.intl.formatMessage(
+          //                         messages.state,
+          //                       )}
+          //                     >
+          //                       <Icon
+          //                         name={semaphoreSVG}
+          //                         color={selected ? '#826a6a' : 'grey'}
+          //                         size="24px"
+          //                         className="semaphore"
+          //                       />
+          //                     </Menu.Item>
+          //                   }
+          //                   position="top center"
+          //                   content={this.props.intl.formatMessage(
+          //                     messages.state,
+          //                   )}
+          //                   size="mini"
+          //                 />
+          //                 <Popup
+          //                   trigger={
+          //                     <Menu.Item
+          //                       icon
+          //                       as={Button}
+          //                       onClick={this.tags}
+          //                       disabled={!selected}
+          //                       aria-label={this.props.intl.formatMessage(
+          //                         messages.tags,
+          //                       )}
+          //                     >
+          //                       <Icon
+          //                         name={tagSVG}
+          //                         color={selected ? '#826a6a' : 'grey'}
+          //                         size="24px"
+          //                         className="tag"
+          //                       />
+          //                     </Menu.Item>
+          //                   }
+          //                   position="top center"
+          //                   content={this.props.intl.formatMessage(
+          //                     messages.tags,
+          //                   )}
+          //                   size="mini"
+          //                 />
+
+          //                 <Popup
+          //                   trigger={
+          //                     <Menu.Item
+          //                       icon
+          //                       as={Button}
+          //                       onClick={this.properties}
+          //                       disabled={!selected}
+          //                       aria-label={this.props.intl.formatMessage(
+          //                         messages.properties,
+          //                       )}
+          //                     >
+          //                       <Icon
+          //                         name={propertiesSVG}
+          //                         color={selected ? '#826a6a' : 'grey'}
+          //                         size="24px"
+          //                         className="properties"
+          //                       />
+          //                     </Menu.Item>
+          //                   }
+          //                   position="top center"
+          //                   content={this.props.intl.formatMessage(
+          //                     messages.properties,
+          //                   )}
+          //                   size="mini"
+          //                 />
+          //               </Menu.Menu>
+          //               <Menu.Menu className="top-menu-menu">
+          //                 <Popup
+          //                   trigger={
+          //                     <Menu.Item
+          //                       icon
+          //                       as={Button}
+          //                       onClick={this.cut}
+          //                       disabled={!selected}
+          //                       aria-label={this.props.intl.formatMessage(
+          //                         messages.cut,
+          //                       )}
+          //                     >
+          //                       <Icon
+          //                         name={cutSVG}
+          //                         color={selected ? '#826a6a' : 'grey'}
+          //                         size="24px"
+          //                         className="cut"
+          //                       />
+          //                     </Menu.Item>
+          //                   }
+          //                   position="top center"
+          //                   content={this.props.intl.formatMessage(
+          //                     messages.cut,
+          //                   )}
+          //                   size="mini"
+          //                 />
+          //                 <Popup
+          //                   trigger={
+          //                     <Menu.Item
+          //                       icon
+          //                       as={Button}
+          //                       onClick={this.copy}
+          //                       disabled={!selected}
+          //                       aria-label={this.props.intl.formatMessage(
+          //                         messages.copy,
+          //                       )}
+          //                     >
+          //                       <Icon
+          //                         name={copySVG}
+          //                         color={selected ? '#826a6a' : 'grey'}
+          //                         size="24px"
+          //                         className="copy"
+          //                       />
+          //                     </Menu.Item>
+          //                   }
+          //                   position="top center"
+          //                   content={this.props.intl.formatMessage(
+          //                     messages.copy,
+          //                   )}
+          //                   size="mini"
+          //                 />
+
+          //                 <Popup
+          //                   trigger={
+          //                     <Menu.Item
+          //                       icon
+          //                       as={Button}
+          //                       onClick={this.paste}
+          //                       disabled={!this.props.action}
+          //                       aria-label={this.props.intl.formatMessage(
+          //                         messages.paste,
+          //                       )}
+          //                     >
+          //                       <Icon
+          //                         name={pasteSVG}
+          //                         color={selected ? '#826a6a' : 'grey'}
+          //                         size="24px"
+          //                         className="paste"
+          //                       />
+          //                     </Menu.Item>
+          //                   }
+          //                   position="top center"
+          //                   content={this.props.intl.formatMessage(
+          //                     messages.paste,
+          //                   )}
+          //                   size="mini"
+          //                 />
+
+          //                 <Popup
+          //                   trigger={
+          //                     <Menu.Item
+          //                       icon
+          //                       as={Button}
+          //                       onClick={this.delete}
+          //                       disabled={!selected}
+          //                       aria-label={this.props.intl.formatMessage(
+          //                         messages.delete,
+          //                       )}
+          //                     >
+          //                       <Icon
+          //                         name={deleteSVG}
+          //                         color={selected ? '#e40166' : 'grey'}
+          //                         size="24px"
+          //                         className="delete"
+          //                       />
+          //                     </Menu.Item>
+          //                   }
+          //                   position="top center"
+          //                   content={this.props.intl.formatMessage(
+          //                     messages.delete,
+          //                   )}
+          //                   size="mini"
+          //                 />
+          //               </Menu.Menu>
+          //               <Menu.Menu
+          //                 position="right"
+          //                 className="top-menu-searchbox"
+          //               >
+          //                 <div className="ui right aligned category search item">
+          //                   <Input
+          //                     type="text"
+          //                     transparent
+          //                     placeholder={this.props.intl.formatMessage(
+          //                       messages.filter,
+          //                     )}
+          //                     size="small"
+          //                     value={this.state.filter}
+          //                     onChange={this.onChangeFilter}
+          //                   />
+          //                   {this.state.filter && (
+          //                     <Button
+          //                       className="icon icon-container"
+          //                       onClick={() => {
+          //                         this.onChangeFilter('', { value: '' });
+          //                       }}
+          //                     >
+          //                       <Icon
+          //                         name={clearSVG}
+          //                         size="30px"
+          //                         color="#e40166"
+          //                       />
+          //                     </Button>
+          //                   )}
+          //                   <Icon
+          //                     name={zoomSVG}
+          //                     size="30px"
+          //                     color="#007eb1"
+          //                     className="zoom"
+          //                     style={{ flexShrink: '0' }}
+          //                   />
+          //                   <div className="results" />
+          //                 </div>
+          //               </Menu.Menu>
+          //             </Menu>
+          //             <Segment
+          //               secondary
+          //               attached
+          //               className="contents-breadcrumbs"
+          //             >
+          //               <ContentsBreadcrumbs items={this.props.breadcrumbs} />
+          //               <Dropdown
+          //                 item
+          //                 upward={false}
+          //                 icon={
+          //                   <Icon name={moreSVG} size="24px" color="#826a6a" />
+          //                 }
+          //                 className="right floating selectIndex"
+          //               >
+          //                 <Dropdown.Menu className="left">
+          //                   <Dropdown.Header
+          //                     content={this.props.intl.formatMessage(
+          //                       messages.selectColumns,
+          //                     )}
+          //                   />
+          //                   <Dropdown.Menu scrolling>
+          //                     {map(
+          //                       filter(
+          //                         this.state.index.order,
+          //                         (index) => index !== 'sortable_title',
+          //                       ),
+          //                       (index) => (
+          //                         <Dropdown.Item
+          //                           key={index}
+          //                           value={index}
+          //                           onClick={this.onSelectIndex}
+          //                           className="iconAlign"
+          //                         >
+          //                           {this.state.index.values[index].selected ? (
+          //                             <Icon
+          //                               name={checkboxCheckedSVG}
+          //                               size="24px"
+          //                               color="#007eb1"
+          //                               className={
+          //                                 this.state.index.values[index].label
+          //                               }
+          //                             />
+          //                           ) : (
+          //                             <Icon
+          //                               name={checkboxUncheckedSVG}
+          //                               className={
+          //                                 this.state.index.values[index].label
+          //                               }
+          //                               size="24px"
+          //                             />
+          //                           )}
+          //                           <span>
+          //                             {' '}
+          //                             {this.props.intl.formatMessage({
+          //                               id: this.state.index.values[index]
+          //                                 .label,
+          //                               defaultMessage:
+          //                                 this.state.index.values[index].label,
+          //                             })}
+          //                           </span>
+          //                         </Dropdown.Item>
+          //                       ),
+          //                     )}
+          //                   </Dropdown.Menu>
+          //                 </Dropdown.Menu>
+          //               </Dropdown>
+          //             </Segment>
+          //             <div className="contents-table-wrapper">
+          //               <Table selectable compact singleLine attached>
+          //                 <Table.Header>
+          //                   <Table.Row>
+          //                     <Table.HeaderCell>
+          //                       <Popup
+          //                         menu={true}
+          //                         position="bottom left"
+          //                         flowing={true}
+          //                         basic={true}
+          //                         on="click"
+          //                         popper={{
+          //                           className: 'dropdown-popup',
+          //                         }}
+          //                         trigger={
+          //                           <Icon
+          //                             name={configurationSVG}
+          //                             size="24px"
+          //                             color="#826a6a"
+          //                             className="dropdown-popup-trigger configuration-svg"
+          //                           />
+          //                         }
+          //                       >
+          //                         <Menu vertical borderless fluid>
+          //                           <Menu.Header
+          //                             content={this.props.intl.formatMessage(
+          //                               messages.rearrangeBy,
+          //                             )}
+          //                           />
+          //                           {map(
+          //                             [
+          //                               'id',
+          //                               'sortable_title',
+          //                               'EffectiveDate',
+          //                               'CreationDate',
+          //                               'ModificationDate',
+          //                               'portal_type',
+          //                             ],
+          //                             (index) => (
+          //                               <Dropdown
+          //                                 key={index}
+          //                                 item
+          //                                 simple
+          //                                 className={`sort_${index} icon-align`}
+          //                                 icon={
+          //                                   <Icon
+          //                                     name={downKeySVG}
+          //                                     size="24px"
+          //                                     className="left"
+          //                                   />
+          //                                 }
+          //                                 text={this.props.intl.formatMessage({
+          //                                   id: Indexes[index].label,
+          //                                 })}
+          //                               >
+          //                                 <Dropdown.Menu>
+          //                                   <Dropdown.Item
+          //                                     onClick={this.onSortItems}
+          //                                     value={`${Indexes[index].sort_on}|ascending`}
+          //                                     className={`sort_${Indexes[index].sort_on}_ascending icon-align`}
+          //                                   >
+          //                                     <Icon
+          //                                       name={sortDownSVG}
+          //                                       size="24px"
+          //                                     />{' '}
+          //                                     <FormattedMessage
+          //                                       id="Ascending"
+          //                                       defaultMessage="Ascending"
+          //                                     />
+          //                                   </Dropdown.Item>
+          //                                   <Dropdown.Item
+          //                                     onClick={this.onSortItems}
+          //                                     value={`${Indexes[index].sort_on}|descending`}
+          //                                     className={`sort_${Indexes[index].sort_on}_descending icon-align`}
+          //                                   >
+          //                                     <Icon
+          //                                       name={sortUpSVG}
+          //                                       size="24px"
+          //                                     />{' '}
+          //                                     <FormattedMessage
+          //                                       id="Descending"
+          //                                       defaultMessage="Descending"
+          //                                     />
+          //                                   </Dropdown.Item>
+          //                                 </Dropdown.Menu>
+          //                               </Dropdown>
+          //                             ),
+          //                           )}
+          //                         </Menu>
+          //                       </Popup>
+          //                     </Table.HeaderCell>
+          //                     <Table.HeaderCell>
+          //                       <Popup
+          //                         menu={true}
+          //                         position="bottom left"
+          //                         flowing={true}
+          //                         basic={true}
+          //                         on="click"
+          //                         popper={{
+          //                           className: 'dropdown-popup',
+          //                         }}
+          //                         trigger={
+          //                           <Icon
+          //                             name={
+          //                               this.state.selected.length === 0
+          //                                 ? checkboxUncheckedSVG
+          //                                 : this.state.selected.length ===
+          //                                     this.state.items.length
+          //                                   ? checkboxCheckedSVG
+          //                                   : checkboxIndeterminateSVG
+          //                             }
+          //                             color={
+          //                               this.state.selected.length > 0
+          //                                 ? '#007eb1'
+          //                                 : '#826a6a'
+          //                             }
+          //                             className="dropdown-popup-trigger"
+          //                             size="24px"
+          //                           />
+          //                         }
+          //                       >
+          //                         <Menu vertical borderless fluid>
+          //                           <Menu.Header
+          //                             content={this.props.intl.formatMessage(
+          //                               messages.select,
+          //                             )}
+          //                           />
+          //                           <Menu.Item onClick={this.onSelectAll}>
+          //                             <Icon
+          //                               name={checkboxCheckedSVG}
+          //                               color="#007eb1"
+          //                               size="24px"
+          //                             />{' '}
+          //                             <FormattedMessage
+          //                               id="All"
+          //                               defaultMessage="All"
+          //                             />
+          //                           </Menu.Item>
+          //                           <Menu.Item onClick={this.onSelectNone}>
+          //                             <Icon
+          //                               name={checkboxUncheckedSVG}
+          //                               size="24px"
+          //                             />{' '}
+          //                             <FormattedMessage
+          //                               id="None"
+          //                               defaultMessage="None"
+          //                             />
+          //                           </Menu.Item>
+          //                           <Divider />
+          //                           <Menu.Header
+          //                             content={this.props.intl.formatMessage(
+          //                               messages.selected,
+          //                               {
+          //                                 count: this.state.selected.length,
+          //                               },
+          //                             )}
+          //                           />
+          //                           <Input
+          //                             icon={<Icon name={zoomSVG} size="24px" />}
+          //                             iconPosition="left"
+          //                             className="item search"
+          //                             placeholder={this.props.intl.formatMessage(
+          //                               messages.filter,
+          //                             )}
+          //                             value={
+          //                               this.state.selectedMenuFilter || ''
+          //                             }
+          //                             onChange={this.onChangeSelected}
+          //                             onClick={(e) => {
+          //                               e.preventDefault();
+          //                               e.stopPropagation();
+          //                             }}
+          //                           />
+          //                           <Menu.Menu scrolling>
+          //                             {map(filteredItems, (item) => (
+          //                               <Menu.Item
+          //                                 key={item}
+          //                                 value={item}
+          //                                 onClick={this.onDeselect}
+          //                               >
+          //                                 <Icon
+          //                                   name={deleteSVG}
+          //                                   color="#e40166"
+          //                                   size="24px"
+          //                                 />{' '}
+          //                                 {this.getFieldById(item, 'title')}
+          //                               </Menu.Item>
+          //                             ))}
+          //                           </Menu.Menu>
+          //                         </Menu>
+          //                       </Popup>
+          //                     </Table.HeaderCell>
+          //                     <Table.HeaderCell
+          //                       width={Math.ceil(
+          //                         16 / this.state.index.selectedCount,
+          //                       )}
+          //                     >
+          //                       <FormattedMessage
+          //                         id="Title"
+          //                         defaultMessage="Title"
+          //                       />
+          //                     </Table.HeaderCell>
+          //                     {map(
+          //                       this.state.index.order,
+          //                       (index, order) =>
+          //                         this.state.index.values[index].selected && (
+          //                           <ContentsIndexHeader
+          //                             key={index}
+          //                             width={Math.ceil(
+          //                               16 / this.state.index.selectedCount,
+          //                             )}
+          //                             label={
+          //                               this.state.index.values[index].label
+          //                             }
+          //                             order={order}
+          //                             onOrderIndex={this.onOrderIndex}
+          //                           />
+          //                         ),
+          //                     )}
+          //                     <Table.HeaderCell textAlign="right">
+          //                       <FormattedMessage
+          //                         id="Actions"
+          //                         defaultMessage="Actions"
+          //                       />
+          //                     </Table.HeaderCell>
+          //                   </Table.Row>
+          //                 </Table.Header>
+          //                 <Table.Body>
+          //                   {this.state.items.map((item, order) => (
+          //                     <ContentsItem
+          //                       key={item['@id']}
+          //                       item={item}
+          //                       order={order}
+          //                       selected={
+          //                         indexOf(this.state.selected, item['@id']) !==
+          //                         -1
+          //                       }
+          //                       onClick={this.onSelect}
+          //                       indexes={filter(
+          //                         map(this.state.index.order, (index) => ({
+          //                           id: index,
+          //                           type: this.state.index.values[index].type,
+          //                         })),
+          //                         (index) =>
+          //                           this.state.index.values[index.id].selected,
+          //                       )}
+          //                       onCut={this.cut}
+          //                       onCopy={this.copy}
+          //                       onDelete={this.delete}
+          //                       onOrderItem={this.onOrderItem}
+          //                       onMoveToTop={this.onMoveToTop}
+          //                       onMoveToBottom={this.onMoveToBottom}
+          //                     />
+          //                   ))}
+          //                 </Table.Body>
+          //               </Table>
+          //             </div>
+
+          //             <div className="contents-pagination">
+          //               <Pagination
+          //                 current={this.state.currentPage}
+          //                 total={Math.ceil(
+          //                   this.props.total / this.state.pageSize,
+          //                 )}
+          //                 pageSize={this.state.pageSize}
+          //                 pageSizes={[
+          //                   50,
+          //                   this.props.intl.formatMessage(messages.all),
+          //                 ]}
+          //                 onChangePage={this.onChangePage}
+          //                 onChangePageSize={this.onChangePageSize}
+          //               />
+          //             </div>
+          //           </Segment.Group>
+          //         </section>
+          //       </article>
+          //     </div>
+          //     {this.state.isClient && (
+          //       <Portal node={document.getElementById('toolbar')}>
+          //         <Toolbar
+          //           pathname={this.props.pathname}
+          //           inner={
+          //             <Link
+          //               to={`${path}`}
+          //               aria-label={this.props.intl.formatMessage(
+          //                 messages.back,
+          //               )}
+          //             >
+          //               <Icon
+          //                 name={backSVG}
+          //                 className="contents circled"
+          //                 size="30px"
+          //                 title={this.props.intl.formatMessage(messages.back)}
+          //               />
+          //             </Link>
+          //           }
+          //         />
+          //       </Portal>
+          //     )}
+          //   </Dimmer.Dimmable>
+          // </Container>
+          <Unauthorized staticContext={this.props.staticContext} />
+        )}
+      </>
+    ) : (
+      <Unauthorized staticContext={this.props.staticContext} />
+    );
+  }
+}
+
+let dndContext;
+
+const DragDropConnector = (props) => {
+  const { DragDropContext } = props.reactDnd;
+  const HTML5Backend = props.reactDndHtml5Backend.default;
+
+  const DndConnectedContents = React.useMemo(() => {
+    if (!dndContext) {
+      dndContext = DragDropContext(HTML5Backend);
+    }
+    return dndContext(Contents);
+  }, [DragDropContext, HTML5Backend]);
+
+  return <DndConnectedContents {...props} />;
+};
+
+export const __test__ = compose(
+  injectIntl,
+  injectLazyLibs(['toastify', 'reactDnd']),
+  connect(
+    (store, props) => {
+      return {
+        token: store.userSession.token,
+        items: store.search.items,
+        sort: store.content.update.sort,
+        index: store.content.updatecolumns.idx,
+        breadcrumbs: store.breadcrumbs.items,
+        total: store.search.total,
+        searchRequest: {
+          loading: store.search.loading,
+          loaded: store.search.loaded,
+        },
+        pathname: props.location.pathname,
+        action: store.clipboard.action,
+        source: store.clipboard.source,
+        clipboardRequest: store.clipboard.request,
+        deleteRequest: store.content.delete,
+        updateRequest: store.content.update,
+        objectActions: store.actions.actions.object,
+        orderRequest: store.content.order,
+        addableTypes: store.types.types.filter((t) => t.addable),
+      };
+    },
+    {
+      searchContent,
+      cut,
+      copy,
+      copyContent,
+      deleteContent,
+      listActions,
+      moveContent,
+      orderContent,
+      sortContent,
+      updateColumnsContent,
+      linkIntegrityCheck,
+      getContent,
+    },
+  ),
+)(Contents);
+
+export default compose(
+  injectIntl,
+  connect(
+    (store, props) => {
+      return {
+        token: store.userSession.token,
+        items: store.search.items,
+        sort: store.content.update.sort,
+        index: store.content.updatecolumns.idx,
+        breadcrumbs: store.breadcrumbs.items,
+        total: store.search.total,
+        searchRequest: {
+          loading: store.search.loading,
+          loaded: store.search.loaded,
+        },
+        pathname: props.location.pathname,
+        action: store.clipboard.action,
+        source: store.clipboard.source,
+        clipboardRequest: store.clipboard.request,
+        deleteRequest: store.content.delete,
+        updateRequest: store.content.update,
+        objectActions: store.actions.actions.object,
+        orderRequest: store.content.order,
+        addableTypes: store.types.types.filter((t) => t.addable),
+      };
+    },
+    {
+      searchContent,
+      cut,
+      copy,
+      copyContent,
+      deleteContent,
+      listActions,
+      moveContent,
+      orderContent,
+      sortContent,
+      updateColumnsContent,
+      linkIntegrityCheck,
+      getContent,
+    },
+  ),
+  asyncConnect([
+    {
+      key: 'actions',
+      // Dispatch async/await to make the operation synchronous, otherwise it returns
+      // before the promise is resolved
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(listActions(getBaseUrl(location.pathname))),
+    },
+  ]),
+  injectLazyLibs(['toastify', 'reactDnd', 'reactDndHtml5Backend']),
+)(DragDropConnector);
diff --git a/src/helpers/indexes.ts b/src/helpers/indexes.ts
new file mode 100644
index 000000000..583b3729e
--- /dev/null
+++ b/src/helpers/indexes.ts
@@ -0,0 +1,40 @@
+/**
+ * Remove this file when @plone/components 2.0.0 is released with the new Contents view
+ */
+export const indexes = {
+  // sortable_title: { label: 'Title', type: 'string', sort_on: 'sortable_title' },
+  review_state: { label: 'Review state', type: 'string' },
+  ModificationDate: {
+    label: 'Last modified',
+    type: 'date',
+    sort_on: 'modified',
+  },
+  EffectiveDate: {
+    label: 'Publication date',
+    type: 'date',
+    sort_on: 'effective',
+  },
+  id: { label: 'ID', type: 'string', sort_on: 'id' },
+  ExpirationDate: { label: 'Expiration date', type: 'date' },
+  CreationDate: { label: 'Created on', type: 'date', sort_on: 'created' },
+  Subject: { label: 'Tags', type: 'array' },
+  portal_type: { label: 'Type', type: 'string', sort_on: 'portal_type' },
+  is_folderish: { label: 'Folder', type: 'boolean' },
+  exclude_from_nav: { label: 'Excluded from navigation', type: 'boolean' },
+  getObjSize: { label: 'Object Size', type: 'string' },
+  last_comment_date: { label: 'Last comment date', type: 'date' },
+  total_comments: { label: 'Total comments', type: 'number' },
+  end: { label: 'End Date', type: 'date' },
+  Description: { label: 'Description', type: 'string' },
+  Creator: { label: 'Creator', type: 'string' },
+  location: { label: 'Location', type: 'string' },
+  UID: { label: 'UID', type: 'string' },
+  start: { label: 'Start Date', type: 'date' },
+  Type: { label: 'Type', type: 'string' },
+};
+
+export const defaultIndexes: (keyof typeof indexes)[] = [
+  'review_state',
+  'ModificationDate',
+  'EffectiveDate',
+];
diff --git a/src/helpers/types.d.ts b/src/helpers/types.d.ts
new file mode 100644
index 000000000..9bfb77690
--- /dev/null
+++ b/src/helpers/types.d.ts
@@ -0,0 +1,60 @@
+/**
+ * Remove this file when @plone/components 2.0.0 is released with the new Contents view
+ */
+import type { PreviewImage } from '@plone/types';
+
+/**
+ * Get the type of the elements in an array
+ */
+export type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
+
+export interface Brain {
+  '@id': string;
+  '@type': string;
+  CreationDate: string;
+  Creator: string;
+  Date: string;
+  Description: string;
+  EffectiveDate: string | 'None'; // 'None' here is just for documentation
+  ExpirationDate: string | 'None'; // 'None' here is just for documentation
+  ModificationDate: string;
+  Subject: string[];
+  Title: string;
+  Type: string;
+  UID: string;
+  author_name: string | null;
+  cmf_uid: string | null;
+  commentators: string[];
+  created: string;
+  description: string;
+  effective: string | '1969-12-31T00:00:00+00:00'; // '1969-12-31T00:00:00+00:00' here is just for documentation
+  end: string | null;
+  exclude_from_nav: boolean;
+  expires: string | '2499-12-31T00:00:00+00:00'; // '2499-12-31T00:00:00+00:00' here is just for documentation
+  getIcon: string | null; // TODO is this correct?
+  getId: string;
+  getObjSize: string;
+  getPath: string;
+  getRemoteUrl: string | null;
+  getURL: string;
+  hasPreviewImage: boolean | null; // TODO is this correct?
+  head_title: string | null; // TODO is this correct?
+  id: string;
+  image_field: string; // TODO could this be more specific?
+  image_scales: Record<string, PreviewImage> | null; // TODO could this be more specific?
+  in_response_to: string | null; // TODO is this correct?
+  is_folderish: boolean;
+  last_comment_date: string | null;
+  listCreators: string[];
+  location: string | null; // TODO is this correct?
+  mime_type: string; // TODO could this be more specific?
+  modified: string;
+  nav_title: string | null; // TODO is this correct?
+  portal_type: string; // TODO could this be more specific?
+  review_state: string; // TODO could this be more specific?
+  start: string | null;
+  sync_uid: string | null;
+  title: string;
+  total_comments: number;
+  type_title: string; // TODO could this be more specific?
+}
diff --git a/yarn.lock b/yarn.lock
index 39c88a4ca..9806d70c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3469,6 +3469,55 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@formatjs/ecma402-abstract@npm:1.18.2":
+  version: 1.18.2
+  resolution: "@formatjs/ecma402-abstract@npm:1.18.2"
+  dependencies:
+    "@formatjs/intl-localematcher": 0.5.4
+    tslib: ^2.4.0
+  checksum: c664056ccab4e3407feabd5802276075eae2b614acb8c5979045ff5a70bfec4c04488188c30b311b6db0e0eb0b5c1ca328868d76472a14243c944bc0639e8a4d
+  languageName: node
+  linkType: hard
+
+"@formatjs/fast-memoize@npm:2.2.0":
+  version: 2.2.0
+  resolution: "@formatjs/fast-memoize@npm:2.2.0"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: 8697fe72a7ece252d600a7d08105f2a2f758e2dd96f54ac0a4c508b1205a559fc08835635e1f8e5ca9dcc3ee61ce1fca4a0e7047b402f29fc96051e293a280ff
+  languageName: node
+  linkType: hard
+
+"@formatjs/icu-messageformat-parser@npm:2.7.6":
+  version: 2.7.6
+  resolution: "@formatjs/icu-messageformat-parser@npm:2.7.6"
+  dependencies:
+    "@formatjs/ecma402-abstract": 1.18.2
+    "@formatjs/icu-skeleton-parser": 1.8.0
+    tslib: ^2.4.0
+  checksum: d537253cbfe0515c0b72495b1133528a6643f23f978f6d9576defe5150dbb4b9b4e4b7028e2ff1bfaa4d104b05aa1119688d3fb7a4cf9b1b78ba8019a6adfeb1
+  languageName: node
+  linkType: hard
+
+"@formatjs/icu-skeleton-parser@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.0"
+  dependencies:
+    "@formatjs/ecma402-abstract": 1.18.2
+    tslib: ^2.4.0
+  checksum: 85ca45148a8535c61f2667d24d3e59ab97cd2b4accee8383594872a319e875effae7d54e070fd0d3926fc1407b04f5685f94336c1d0d587fcb1064bb498e5319
+  languageName: node
+  linkType: hard
+
+"@formatjs/intl-localematcher@npm:0.5.4":
+  version: 0.5.4
+  resolution: "@formatjs/intl-localematcher@npm:0.5.4"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: a0af57874fcd163add5f7a0cb1c008e9b09feb1d24cbce1263379ae0393cddd6681197a7f2f512f351a97666fc8675ed52cc17d1834266ee8fc65e9edf3435f6
+  languageName: node
+  linkType: hard
+
 "@formatjs/intl-unified-numberformat@npm:^3.2.0":
   version: 3.3.7
   resolution: "@formatjs/intl-unified-numberformat@npm:3.3.7"
@@ -3541,6 +3590,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@internationalized/date@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "@internationalized/date@npm:3.5.2"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  checksum: 7cd31aebe1bfa7307cb31d24366a9cc18c598e38a7eb6cd68a86b3c2d9e7c4f03376fe8a3ac6c6556fb80e58fa7697238af2ee9d753058e063f9a136143dafc2
+  languageName: node
+  linkType: hard
+
+"@internationalized/message@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "@internationalized/message@npm:3.1.2"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+    intl-messageformat: ^10.1.0
+  checksum: 230fcd1688ce12bd244779f66a78167bd1c7e5c30a228fe3dc8d433428a64dda90085852bec38107795e9e81307c29e7dc3e584b5949f19536099aebc1ade19b
+  languageName: node
+  linkType: hard
+
+"@internationalized/number@npm:^3.5.1":
+  version: 3.5.1
+  resolution: "@internationalized/number@npm:3.5.1"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  checksum: c24dfe0bfef1bde551463f660ed58fa45709db878a0ffec2b183d464856d47f043699dc65adb339d40d4143f1029080fa8fd8d1a9532b90f475e7144d451963e
+  languageName: node
+  linkType: hard
+
+"@internationalized/string@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "@internationalized/string@npm:3.2.1"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  checksum: 967d5c4d03e2680082af591d085be741b9599527b088f444fef25d612f0960a501b6873d2f532e10b494d2ac0c2e29b6333a960a75f441170b53e1308cefdf76
+  languageName: node
+  linkType: hard
+
 "@jridgewell/gen-mapping@npm:^0.1.0":
   version: 0.1.1
   resolution: "@jridgewell/gen-mapping@npm:0.1.1"
@@ -3660,282 +3746,1743 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nodelib/fs.scandir@npm:2.1.5":
-  version: 2.1.5
-  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": 2.0.5
+    run-parallel: ^1.1.9
+  checksum: a970d595bd23c66c880e0ef1817791432dbb7acbb8d44b7e7d0e7a22f4521260d4a83f7f9fd61d44fda4610105577f8f58a60718105fb38352baed612fd79e59
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": 2.1.5
+    fastq: ^1.6.0
+  checksum: 190c643f156d8f8f277bf2a6078af1ffde1fd43f498f187c2db24d35b4b4b5785c02c7dc52e356497b9a1b65b13edc996de08de0b961c32844364da02986dc53
+  languageName: node
+  linkType: hard
+
+"@npmcli/fs@npm:^2.1.0":
+  version: 2.1.2
+  resolution: "@npmcli/fs@npm:2.1.2"
+  dependencies:
+    "@gar/promisify": ^1.1.3
+    semver: ^7.3.5
+  checksum: 405074965e72d4c9d728931b64d2d38e6ea12066d4fad651ac253d175e413c06fe4350970c783db0d749181da8fe49c42d3880bd1cbc12cd68e3a7964d820225
+  languageName: node
+  linkType: hard
+
+"@npmcli/move-file@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "@npmcli/move-file@npm:2.0.1"
+  dependencies:
+    mkdirp: ^1.0.4
+    rimraf: ^3.0.2
+  checksum: 52dc02259d98da517fae4cb3a0a3850227bdae4939dda1980b788a7670636ca2b4a01b58df03dd5f65c1e3cb70c50fa8ce5762b582b3f499ec30ee5ce1fd9380
+  languageName: node
+  linkType: hard
+
+"@octokit/auth-token@npm:^3.0.0":
+  version: 3.0.4
+  resolution: "@octokit/auth-token@npm:3.0.4"
+  checksum: 42f533a873d4192e6df406b3176141c1f95287423ebdc4cf23a38bb77ee00ccbc0e60e3fbd5874234fc2ed2e67bbc6035e3b0561dacc1d078adb5c4ced3579e3
+  languageName: node
+  linkType: hard
+
+"@octokit/core@npm:^4.2.1":
+  version: 4.2.4
+  resolution: "@octokit/core@npm:4.2.4"
+  dependencies:
+    "@octokit/auth-token": ^3.0.0
+    "@octokit/graphql": ^5.0.0
+    "@octokit/request": ^6.0.0
+    "@octokit/request-error": ^3.0.0
+    "@octokit/types": ^9.0.0
+    before-after-hook: ^2.2.0
+    universal-user-agent: ^6.0.0
+  checksum: ac8ab47440a31b0228a034aacac6994b64d6b073ad5b688b4c5157fc5ee0d1af1c926e6087bf17fd7244ee9c5998839da89065a90819bde4a97cb77d4edf58a6
+  languageName: node
+  linkType: hard
+
+"@octokit/endpoint@npm:^7.0.0":
+  version: 7.0.6
+  resolution: "@octokit/endpoint@npm:7.0.6"
+  dependencies:
+    "@octokit/types": ^9.0.0
+    is-plain-object: ^5.0.0
+    universal-user-agent: ^6.0.0
+  checksum: 7caebf30ceec50eb7f253341ed419df355232f03d4638a95c178ee96620400db7e4a5e15d89773fe14db19b8653d4ab4cc81b2e93ca0c760b4e0f7eb7ad80301
+  languageName: node
+  linkType: hard
+
+"@octokit/graphql@npm:^5.0.0":
+  version: 5.0.6
+  resolution: "@octokit/graphql@npm:5.0.6"
+  dependencies:
+    "@octokit/request": ^6.0.0
+    "@octokit/types": ^9.0.0
+    universal-user-agent: ^6.0.0
+  checksum: 7be545d348ef31dcab0a2478dd64d5746419a2f82f61459c774602bcf8a9b577989c18001f50b03f5f61a3d9e34203bdc021a4e4d75ff2d981e8c9c09cf8a65c
+  languageName: node
+  linkType: hard
+
+"@octokit/openapi-types@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "@octokit/openapi-types@npm:18.0.0"
+  checksum: d487d6c6c1965e583eee417d567e4fe3357a98953fc49bce1a88487e7908e9b5dbb3e98f60dfa340e23b1792725fbc006295aea071c5667a813b9c098185b56f
+  languageName: node
+  linkType: hard
+
+"@octokit/plugin-paginate-rest@npm:^6.1.2":
+  version: 6.1.2
+  resolution: "@octokit/plugin-paginate-rest@npm:6.1.2"
+  dependencies:
+    "@octokit/tsconfig": ^1.0.2
+    "@octokit/types": ^9.2.3
+  peerDependencies:
+    "@octokit/core": ">=4"
+  checksum: a7b3e686c7cbd27ec07871cde6e0b1dc96337afbcef426bbe3067152a17b535abd480db1861ca28c88d93db5f7bfdbcadd0919ead19818c28a69d0e194038065
+  languageName: node
+  linkType: hard
+
+"@octokit/plugin-request-log@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@octokit/plugin-request-log@npm:1.0.4"
+  peerDependencies:
+    "@octokit/core": ">=3"
+  checksum: 2086db00056aee0f8ebd79797b5b57149ae1014e757ea08985b71eec8c3d85dbb54533f4fd34b6b9ecaa760904ae6a7536be27d71e50a3782ab47809094bfc0c
+  languageName: node
+  linkType: hard
+
+"@octokit/plugin-rest-endpoint-methods@npm:^7.1.2":
+  version: 7.2.3
+  resolution: "@octokit/plugin-rest-endpoint-methods@npm:7.2.3"
+  dependencies:
+    "@octokit/types": ^10.0.0
+  peerDependencies:
+    "@octokit/core": ">=3"
+  checksum: 21dfb98514dbe900c29cddb13b335bbce43d613800c6b17eba3c1fd31d17e69c1960f3067f7bf864bb38fdd5043391f4a23edee42729d8c7fbabd00569a80336
+  languageName: node
+  linkType: hard
+
+"@octokit/request-error@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "@octokit/request-error@npm:3.0.3"
+  dependencies:
+    "@octokit/types": ^9.0.0
+    deprecation: ^2.0.0
+    once: ^1.4.0
+  checksum: 5db0b514732686b627e6ed9ef1ccdbc10501f1b271a9b31f784783f01beee70083d7edcfeb35fbd7e569fa31fdd6762b1ff6b46101700d2d97e7e48e749520d0
+  languageName: node
+  linkType: hard
+
+"@octokit/request@npm:^6.0.0":
+  version: 6.2.8
+  resolution: "@octokit/request@npm:6.2.8"
+  dependencies:
+    "@octokit/endpoint": ^7.0.0
+    "@octokit/request-error": ^3.0.0
+    "@octokit/types": ^9.0.0
+    is-plain-object: ^5.0.0
+    node-fetch: ^2.6.7
+    universal-user-agent: ^6.0.0
+  checksum: 3747106f50d7c462131ff995b13defdd78024b7becc40283f4ac9ea0af2391ff33a0bb476a05aa710346fe766d20254979079a1d6f626112015ba271fe38f3e2
+  languageName: node
+  linkType: hard
+
+"@octokit/rest@npm:19.0.13":
+  version: 19.0.13
+  resolution: "@octokit/rest@npm:19.0.13"
+  dependencies:
+    "@octokit/core": ^4.2.1
+    "@octokit/plugin-paginate-rest": ^6.1.2
+    "@octokit/plugin-request-log": ^1.0.4
+    "@octokit/plugin-rest-endpoint-methods": ^7.1.2
+  checksum: ca1553e3fe46efabffef60e68e4a228d4cc0f0d545daf7f019560f666d3e934c6f3a6402a42bbd786af4f3c0a6e69380776312f01b7d52998fe1bbdd1b068f69
+  languageName: node
+  linkType: hard
+
+"@octokit/tsconfig@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@octokit/tsconfig@npm:1.0.2"
+  checksum: 74d56f3e9f326a8dd63700e9a51a7c75487180629c7a68bbafee97c612fbf57af8347369bfa6610b9268a3e8b833c19c1e4beb03f26db9a9dce31f6f7a19b5b1
+  languageName: node
+  linkType: hard
+
+"@octokit/types@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "@octokit/types@npm:10.0.0"
+  dependencies:
+    "@octokit/openapi-types": ^18.0.0
+  checksum: 8aafba2ff0cd2435fb70c291bf75ed071c0fa8a865cf6169648732068a35dec7b85a345851f18920ec5f3e94ee0e954988485caac0da09ec3f6781cc44fe153a
+  languageName: node
+  linkType: hard
+
+"@octokit/types@npm:^9.0.0, @octokit/types@npm:^9.2.3":
+  version: 9.3.2
+  resolution: "@octokit/types@npm:9.3.2"
+  dependencies:
+    "@octokit/openapi-types": ^18.0.0
+  checksum: f55d096aaed3e04b8308d4422104fb888f355988056ba7b7ef0a4c397b8a3e54290d7827b06774dbe0c9ce55280b00db486286954f9c265aa6b03091026d9da8
+  languageName: node
+  linkType: hard
+
+"@pkgr/utils@npm:^2.3.1":
+  version: 2.4.2
+  resolution: "@pkgr/utils@npm:2.4.2"
+  dependencies:
+    cross-spawn: ^7.0.3
+    fast-glob: ^3.3.0
+    is-glob: ^4.0.3
+    open: ^9.1.0
+    picocolors: ^1.0.0
+    tslib: ^2.6.0
+  checksum: 24e04c121269317d259614cd32beea3af38277151c4002df5883c4be920b8e3490bb897748e844f9d46bf68230f86dabd4e8f093773130e7e60529a769a132fc
+  languageName: node
+  linkType: hard
+
+"@plone-collective/volto-sentry@npm:0.3.0":
+  version: 0.3.0
+  resolution: "@plone-collective/volto-sentry@npm:0.3.0"
+  dependencies:
+    "@sentry/browser": 7.15.0
+    "@sentry/integrations": 7.15.0
+    "@sentry/node": 7.15.0
+    "@sentry/webpack-plugin": 1.19.1
+  checksum: 99e5493e46fdc93d69dcdacfdbd7a4ca746952edca805ff095a5fd6789a41820510e4e73d0a4d218f9fbb9b65f80641ac4f2a0c65753a20f193f88e92a04ee1d
+  languageName: node
+  linkType: hard
+
+"@plone/components@npm:alpha":
+  version: 2.0.0-alpha.1
+  resolution: "@plone/components@npm:2.0.0-alpha.1"
+  dependencies:
+    "@react-aria/utils": ^3.22.0
+    "@react-spectrum/utils": ^3.11.1
+    classnames: ^2.3.2
+    clsx: ^2.0.0
+    lodash: ^4.17.21
+    react-aria-components: ^1.1.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: ebb8a473d0b201aeec0fd5c4c34f9a3b9c9e8d2bd636045f53566692d10af3f9260937b2c3d546e60b64abf259d81dfef1817f4f5bd1bdfd7e3ceb4ea121af8d
+  languageName: node
+  linkType: hard
+
+"@plone/scripts@npm:*":
+  version: 3.0.0
+  resolution: "@plone/scripts@npm:3.0.0"
+  dependencies:
+    babel-plugin-react-intl: 5.1.17
+    babel-preset-razzle: 4.2.17
+    chalk: 4
+    commander: 8.2.0
+    fs-extra: 10.1.0
+    git-url-parse: ^11.6.0
+    mrs-developer: "*"
+    pofile: 1.0.10
+  bin:
+    addon: addon/index.js
+    changelogupdater: changelogupdater.cjs
+    i18n: i18n.cjs
+  checksum: c5a03a68fd16f731fd40bbf94e3bc6addb4395a04049eb98fbb95f1e1ebcc2468e003149b829261a1b577d50cce032d80dc99c8e812a126621f730f6e431cb97
+  languageName: node
+  linkType: hard
+
+"@plone/types@npm:1.0.0-alpha.3":
+  version: 1.0.0-alpha.3
+  resolution: "@plone/types@npm:1.0.0-alpha.3"
+  peerDependencies:
+    history: ^5.3.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-intl: 3.8.0
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: f8fa979e3760b5aad6c05e65adc4ced7606c8d54d8da8d0289802388a1027846f073058d44bd1261aa23e513e3b72f3eb2428adf2ebd021310f03547f459fff3
+  languageName: node
+  linkType: hard
+
+"@pnpm/config.env-replace@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@pnpm/config.env-replace@npm:1.1.0"
+  checksum: a3d2b57e35eec9543d9eb085854f6e33e8102dac99fdef2fad2eebdbbfc345e93299f0c20e8eb61c1b4c7aa123bfd47c175678626f161cda65dd147c2b6e1fa0
+  languageName: node
+  linkType: hard
+
+"@pnpm/network.ca-file@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "@pnpm/network.ca-file@npm:1.0.2"
+  dependencies:
+    graceful-fs: 4.2.10
+  checksum: d8d0884646500576bd5390464d13db1bb9a62e32a1069293e5bddb2ad8354b354b7e2d2a35e12850025651e795e6a80ce9e601c66312504667b7e3ee7b52becc
+  languageName: node
+  linkType: hard
+
+"@pnpm/npm-conf@npm:^2.1.0":
+  version: 2.2.2
+  resolution: "@pnpm/npm-conf@npm:2.2.2"
+  dependencies:
+    "@pnpm/config.env-replace": ^1.1.0
+    "@pnpm/network.ca-file": ^1.0.1
+    config-chain: ^1.1.11
+  checksum: d64aa4464be584caa855eafa8f109509390489997e36d602d6215784e2973b896bef3968426bb00896cf4ae7d440fed2cee7bb4e0dbc90362f024ea3f9e27ab1
+  languageName: node
+  linkType: hard
+
+"@popperjs/core@npm:^2.11.2, @popperjs/core@npm:^2.6.0":
+  version: 2.11.6
+  resolution: "@popperjs/core@npm:2.11.6"
+  checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0
+  languageName: node
+  linkType: hard
+
+"@popperjs/core@npm:^2.9.2":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+  languageName: node
+  linkType: hard
+
+"@react-aria/breadcrumbs@npm:^3.5.11":
+  version: 3.5.11
+  resolution: "@react-aria/breadcrumbs@npm:3.5.11"
+  dependencies:
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/link": ^3.6.5
+    "@react-aria/utils": ^3.23.2
+    "@react-types/breadcrumbs": ^3.7.3
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 9100e1cd98c055e7758b971c9b6478bf186184b8e872d4fc39301fc532ca9cb43831552afb410038fd0621a8c5b77ec37a3f8776ffa51af5ca60fddd8078adcc
+  languageName: node
+  linkType: hard
+
+"@react-aria/button@npm:^3.9.3":
+  version: 3.9.3
+  resolution: "@react-aria/button@npm:3.9.3"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/toggle": ^3.7.2
+    "@react-types/button": ^3.9.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 336c7ac48b4e0cd7263d63eb7652db2856cd58cf491d7eb0890756adeae9a6f87edb4bad3b7c2230786f1f308c17ca58057dc73f14375468ca74aa8def408104
+  languageName: node
+  linkType: hard
+
+"@react-aria/calendar@npm:^3.5.6":
+  version: 3.5.6
+  resolution: "@react-aria/calendar@npm:3.5.6"
+  dependencies:
+    "@internationalized/date": ^3.5.2
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/live-announcer": ^3.3.2
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/calendar": ^3.4.4
+    "@react-types/button": ^3.9.2
+    "@react-types/calendar": ^3.4.4
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: f032491e8dfc66be86cb32ce18e1d9417c34f2c407dd1d6f1506d4a9142c312a79c7b20c5450df8e5046e5dbc00e6d0350703537d4d3ffc7ea487cf9d8c69b20
+  languageName: node
+  linkType: hard
+
+"@react-aria/checkbox@npm:^3.14.1":
+  version: 3.14.1
+  resolution: "@react-aria/checkbox@npm:3.14.1"
+  dependencies:
+    "@react-aria/form": ^3.0.3
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/label": ^3.7.6
+    "@react-aria/toggle": ^3.10.2
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/checkbox": ^3.6.3
+    "@react-stately/form": ^3.0.1
+    "@react-stately/toggle": ^3.7.2
+    "@react-types/checkbox": ^3.7.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: c08cd051dab2f3720c1bf2b6c097cb7f2a017adfcfd9c391058d9c53a865a60c1782c37da88bc39277887bce76b37c984561c11f8479756f7e6513cdda1faf1d
+  languageName: node
+  linkType: hard
+
+"@react-aria/combobox@npm:^3.8.4":
+  version: 3.8.4
+  resolution: "@react-aria/combobox@npm:3.8.4"
+  dependencies:
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/listbox": ^3.11.5
+    "@react-aria/live-announcer": ^3.3.2
+    "@react-aria/menu": ^3.13.1
+    "@react-aria/overlays": ^3.21.1
+    "@react-aria/selection": ^3.17.5
+    "@react-aria/textfield": ^3.14.3
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/combobox": ^3.8.2
+    "@react-stately/form": ^3.0.1
+    "@react-types/button": ^3.9.2
+    "@react-types/combobox": ^3.10.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a6f03ac162d1fe6b414d20803c67ca3f46c2175292b8b2d8300e5d3fad19e288a4419e7bb8dc33799be2db53dac4a1284232ae5738b103c5f60682161216a15c
+  languageName: node
+  linkType: hard
+
+"@react-aria/datepicker@npm:^3.9.3":
+  version: 3.9.3
+  resolution: "@react-aria/datepicker@npm:3.9.3"
+  dependencies:
+    "@internationalized/date": ^3.5.2
+    "@internationalized/number": ^3.5.1
+    "@internationalized/string": ^3.2.1
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/form": ^3.0.3
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/label": ^3.7.6
+    "@react-aria/spinbutton": ^3.6.3
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/datepicker": ^3.9.2
+    "@react-stately/form": ^3.0.1
+    "@react-types/button": ^3.9.2
+    "@react-types/calendar": ^3.4.4
+    "@react-types/datepicker": ^3.7.2
+    "@react-types/dialog": ^3.5.8
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ce45a5069ef69b1c5232eeed5cf6645ff02cd8bafae0c31e2607ad89f4869b1d547f3b6b086855e0fad6cd54c351ed30f7c23413cc35e4327ab44b7ff424b79c
+  languageName: node
+  linkType: hard
+
+"@react-aria/dialog@npm:^3.5.12":
+  version: 3.5.12
+  resolution: "@react-aria/dialog@npm:3.5.12"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/overlays": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-types/dialog": ^3.5.8
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b8f494227263d0f7ce2d25787d8992cef205420efc213449669d68cd95eb13ad052a6b76a65e6bb9b2c36a827ec8239414122c5fe41091182f1f421d192d0cda
+  languageName: node
+  linkType: hard
+
+"@react-aria/dnd@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "@react-aria/dnd@npm:3.5.3"
+  dependencies:
+    "@internationalized/string": ^3.2.1
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/live-announcer": ^3.3.2
+    "@react-aria/overlays": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/dnd": ^3.2.8
+    "@react-types/button": ^3.9.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 67adf9d6f49c087ea7e59f6a263d5079f7bb17fdbc553da2491de1a3d7d640a97eb80d7997ce956d3f5736c7036298a5646ce1694d3e087aeb4fecc48c99bcd0
+  languageName: node
+  linkType: hard
+
+"@react-aria/focus@npm:^3.16.2":
+  version: 3.16.2
+  resolution: "@react-aria/focus@npm:3.16.2"
+  dependencies:
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+    clsx: ^2.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: d97eabc981acd8b6e0e3984a0316ebafddffdd19732c3efc6890482f89dc06605202f682b7700a73292f71c80e8a2e846136a61dfbfead3053f92bb865272ad5
+  languageName: node
+  linkType: hard
+
+"@react-aria/form@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "@react-aria/form@npm:3.0.3"
+  dependencies:
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/form": ^3.0.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 1af8c0213ae9c8226685abc2485fe7c070a5cc58c20a12f1165a040a2fc3b1ae2106dd39633f51247e38bc6d327ba34a42f9c71e0203d3dad03d977795bd472c
+  languageName: node
+  linkType: hard
+
+"@react-aria/grid@npm:^3.8.8":
+  version: 3.8.8
+  resolution: "@react-aria/grid@npm:3.8.8"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/live-announcer": ^3.3.2
+    "@react-aria/selection": ^3.17.5
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/grid": ^3.8.5
+    "@react-stately/selection": ^3.14.3
+    "@react-stately/virtualizer": ^3.6.8
+    "@react-types/checkbox": ^3.7.1
+    "@react-types/grid": ^3.2.4
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 8a21a989b8dec75be241b3877fd1b91c8fa5745f2b9de2fdb8b1a296966e7fecc6e08d0239f85ff7a7d9686b698c6153c291d46bee78e66d88e89b15130c88db
+  languageName: node
+  linkType: hard
+
+"@react-aria/gridlist@npm:^3.7.5":
+  version: 3.7.5
+  resolution: "@react-aria/gridlist@npm:3.7.5"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/grid": ^3.8.8
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/selection": ^3.17.5
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/list": ^3.10.3
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a7868ab93e5cfe3bc02ae16ec20e7d45939436cbea0d538bdb2591d30c23ca993d907d5e7c6784e09e2afb946d8cd076ec9dcc560e539afe1f5663c8decd8639
+  languageName: node
+  linkType: hard
+
+"@react-aria/i18n@npm:^3.10.2":
+  version: 3.10.2
+  resolution: "@react-aria/i18n@npm:3.10.2"
+  dependencies:
+    "@internationalized/date": ^3.5.2
+    "@internationalized/message": ^3.1.2
+    "@internationalized/number": ^3.5.1
+    "@internationalized/string": ^3.2.1
+    "@react-aria/ssr": ^3.9.2
+    "@react-aria/utils": ^3.23.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 229b2c65f4e6346e06780d0d131ae3cb915fcf66f31f8fc7b00aa9aec451e57da4d3f28794958933950f9c7b97fcd808b6a0e75bef57d10b88eabef0d6b511d6
+  languageName: node
+  linkType: hard
+
+"@react-aria/interactions@npm:^3.21.1":
+  version: 3.21.1
+  resolution: "@react-aria/interactions@npm:3.21.1"
+  dependencies:
+    "@react-aria/ssr": ^3.9.2
+    "@react-aria/utils": ^3.23.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 73384b026ee0819cf37e4fa85ef7998c3b77d64ae9d97f4a0b78ee88d8ee6d44c6d43a44164485b90409cc065a24e9c9c1e2d06f152802d46714355dab74345d
+  languageName: node
+  linkType: hard
+
+"@react-aria/label@npm:^3.7.6":
+  version: 3.7.6
+  resolution: "@react-aria/label@npm:3.7.6"
+  dependencies:
+    "@react-aria/utils": ^3.23.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 580dddcfd88c5cd1a9778209c3c2b90960ef623f59a60634f0141d64c666bdcbaf6706fb8ee759f4fcab36bb74e3918b8da22a869bc4c102d04270d043efe611
+  languageName: node
+  linkType: hard
+
+"@react-aria/link@npm:^3.6.5":
+  version: 3.6.5
+  resolution: "@react-aria/link@npm:3.6.5"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-types/link": ^3.5.3
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 31dd44a3cc6f72d40132be5f0c8e650d80f9e4f49b324ece8eda681f71f805b37a266842dfb55dcf6263d5e25825701bd796d526693122f08759cc3f78040044
+  languageName: node
+  linkType: hard
+
+"@react-aria/listbox@npm:^3.11.5":
+  version: 3.11.5
+  resolution: "@react-aria/listbox@npm:3.11.5"
+  dependencies:
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/label": ^3.7.6
+    "@react-aria/selection": ^3.17.5
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/list": ^3.10.3
+    "@react-types/listbox": ^3.4.7
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 5de428edae7aaa66d463f77237e6f514c07e3c62dcea240982f05bd65df3d1704cff7c3bdd81fccfbfec896bb4287ec4844b2f614d37c10d51e72e16b7ff6d69
+  languageName: node
+  linkType: hard
+
+"@react-aria/live-announcer@npm:^3.3.2":
+  version: 3.3.2
+  resolution: "@react-aria/live-announcer@npm:3.3.2"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  checksum: d6729908ad4688ad32b09396510a8eef6665ccce027ee5ffdaa8d9c3f4cef7e116a95786742f5abce76c4204340dc85ae4a6278d45c87e9469cb56687beaaac3
+  languageName: node
+  linkType: hard
+
+"@react-aria/menu@npm:^3.13.1":
+  version: 3.13.1
+  resolution: "@react-aria/menu@npm:3.13.1"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/overlays": ^3.21.1
+    "@react-aria/selection": ^3.17.5
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/menu": ^3.6.1
+    "@react-stately/tree": ^3.7.6
+    "@react-types/button": ^3.9.2
+    "@react-types/menu": ^3.9.7
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 53928ede08a49ecf6f92b0e8613b06d63e7c7409727f2fa3acac09f732e0e4f972d2cc92fa180b8e1f9478bcd5e8a1a267884b095980869081320d5ca684e5d3
+  languageName: node
+  linkType: hard
+
+"@react-aria/meter@npm:^3.4.11":
+  version: 3.4.11
+  resolution: "@react-aria/meter@npm:3.4.11"
+  dependencies:
+    "@react-aria/progress": ^3.4.11
+    "@react-types/meter": ^3.3.7
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 890ac660c3f2b43f7ece92c6d15f87ee397d9c1c1908037b93f21f5f6420a9ab0aa87c330111e61a7872383dd9f2fcc1e3749676489395315ffbe46b56a026e7
+  languageName: node
+  linkType: hard
+
+"@react-aria/numberfield@npm:^3.11.1":
+  version: 3.11.1
+  resolution: "@react-aria/numberfield@npm:3.11.1"
+  dependencies:
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/spinbutton": ^3.6.3
+    "@react-aria/textfield": ^3.14.3
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/form": ^3.0.1
+    "@react-stately/numberfield": ^3.9.1
+    "@react-types/button": ^3.9.2
+    "@react-types/numberfield": ^3.8.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 153bc860c1a8b40c8ea7c5b03f05d79a0de0203583b983d52e10da55909e2b78f33da633218b32767b207b95ca23e911e8396c0a942d3bbf351a2e468e67f6e2
+  languageName: node
+  linkType: hard
+
+"@react-aria/overlays@npm:^3.21.1":
+  version: 3.21.1
+  resolution: "@react-aria/overlays@npm:3.21.1"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/ssr": ^3.9.2
+    "@react-aria/utils": ^3.23.2
+    "@react-aria/visually-hidden": ^3.8.10
+    "@react-stately/overlays": ^3.6.5
+    "@react-types/button": ^3.9.2
+    "@react-types/overlays": ^3.8.5
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 59819eaa63d4360367143c89ee1017001b9fcb7be23f4835d67bbb3051c7fa1951a1807671070df2729c8dafa6c95939ba804d66b8b356ec54bfaf066961f5f8
+  languageName: node
+  linkType: hard
+
+"@react-aria/progress@npm:^3.4.11":
+  version: 3.4.11
+  resolution: "@react-aria/progress@npm:3.4.11"
+  dependencies:
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/label": ^3.7.6
+    "@react-aria/utils": ^3.23.2
+    "@react-types/progress": ^3.5.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 4efa29fe2676b75ae972e62900f582e13ef50ad1b2df3a3da009f390343383a12a9bbc91f4acd911b3b0dbc11b817e11922f671b842b58c180241c98f78f75ed
+  languageName: node
+  linkType: hard
+
+"@react-aria/radio@npm:^3.10.2":
+  version: 3.10.2
+  resolution: "@react-aria/radio@npm:3.10.2"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/form": ^3.0.3
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/label": ^3.7.6
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/radio": ^3.10.2
+    "@react-types/radio": ^3.7.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a7109c18d9b3c6db1d8c6f5c89947dd9cc1f5d69c33c547080e134db4e781f090edeb2be64ec6ccc92a88ea1d25022a089a29a5dd94ffa26d57a99746cfcbed5
+  languageName: node
+  linkType: hard
+
+"@react-aria/searchfield@npm:^3.7.3":
+  version: 3.7.3
+  resolution: "@react-aria/searchfield@npm:3.7.3"
+  dependencies:
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/textfield": ^3.14.3
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/searchfield": ^3.5.1
+    "@react-types/button": ^3.9.2
+    "@react-types/searchfield": ^3.5.3
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: f8e9c66953e915b73b497aed1372224b1689ecf37b04cc2d30ff7b0f72dbef69e24c546af997765e6eb5fe62ac990dcdae3b832fb2fda21a98853535e09931a8
+  languageName: node
+  linkType: hard
+
+"@react-aria/select@npm:^3.14.3":
+  version: 3.14.3
+  resolution: "@react-aria/select@npm:3.14.3"
+  dependencies:
+    "@react-aria/form": ^3.0.3
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/label": ^3.7.6
+    "@react-aria/listbox": ^3.11.5
+    "@react-aria/menu": ^3.13.1
+    "@react-aria/selection": ^3.17.5
+    "@react-aria/utils": ^3.23.2
+    "@react-aria/visually-hidden": ^3.8.10
+    "@react-stately/select": ^3.6.2
+    "@react-types/button": ^3.9.2
+    "@react-types/select": ^3.9.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 2734c417080601d6c07ba66f4496630b0e24e707ebbd9cb4e877f70c7f7e77ee0ab6932e00945923caa89256e2c111be5f5174e97c93401bd6d7ea26d388bb17
+  languageName: node
+  linkType: hard
+
+"@react-aria/selection@npm:^3.17.5":
+  version: 3.17.5
+  resolution: "@react-aria/selection@npm:3.17.5"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/selection": ^3.14.3
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 317cd072ffd2fcf9213ccb255b0d8612e3f0a2b29de8f31fc685e693d21e84a369a7c1c346aea9a358ddb13fc33cfe1dea6c31defce19eb35f323d1eff85664f
+  languageName: node
+  linkType: hard
+
+"@react-aria/separator@npm:^3.3.11":
+  version: 3.3.11
+  resolution: "@react-aria/separator@npm:3.3.11"
+  dependencies:
+    "@react-aria/utils": ^3.23.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b3c10f2dbb0316f60eef7df60067d1d63939c83abbfa1610c4e7a89964a179acf09798d4093cad217b90ddd9d2da7d6f93dd3591c274c2d9ddb19c68ebd2b2f8
+  languageName: node
+  linkType: hard
+
+"@react-aria/slider@npm:^3.7.6":
+  version: 3.7.6
+  resolution: "@react-aria/slider@npm:3.7.6"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/label": ^3.7.6
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/slider": ^3.5.2
+    "@react-types/shared": ^3.22.1
+    "@react-types/slider": ^3.7.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 2ab262d75306c4d9804d9eb298c3ff4a08bf0bb7bf60043934356d64686f81acdf8f07f95038c8fd25ddbc8453e9b0f8f4fa4ba70785c533ff11033c6e004e44
+  languageName: node
+  linkType: hard
+
+"@react-aria/spinbutton@npm:^3.6.3":
+  version: 3.6.3
+  resolution: "@react-aria/spinbutton@npm:3.6.3"
+  dependencies:
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/live-announcer": ^3.3.2
+    "@react-aria/utils": ^3.23.2
+    "@react-types/button": ^3.9.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 87bec2925615031a8b934f784d31908cc5492e4580536ede0d60f69fb9b7a265292eb003691d18b1bad5e01490d86a08922a059e8756f82c073486abce8654f2
+  languageName: node
+  linkType: hard
+
+"@react-aria/ssr@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "@react-aria/ssr@npm:3.9.2"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ef11ef02195665f8a05cc430781da33509d6a20b88590e3ca018323f0824ce80f7cf470f99789cb6aeaeeeeac5d345d2eb671ff5b2d470b7c274f071e7c8abf5
+  languageName: node
+  linkType: hard
+
+"@react-aria/switch@npm:^3.6.2":
+  version: 3.6.2
+  resolution: "@react-aria/switch@npm:3.6.2"
+  dependencies:
+    "@react-aria/toggle": ^3.10.2
+    "@react-stately/toggle": ^3.7.2
+    "@react-types/switch": ^3.5.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 4e19d52e8fcdf455d9cdd1896def54bdfaa07fdfe78bd6ffd779ea674bfa859740d160212d537363859404f91401cd56d636f9cff45cafa92bc2d64e4f6d3233
+  languageName: node
+  linkType: hard
+
+"@react-aria/table@npm:^3.13.5":
+  version: 3.13.5
+  resolution: "@react-aria/table@npm:3.13.5"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/grid": ^3.8.8
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/live-announcer": ^3.3.2
+    "@react-aria/utils": ^3.23.2
+    "@react-aria/visually-hidden": ^3.8.10
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/flags": ^3.0.1
+    "@react-stately/table": ^3.11.6
+    "@react-stately/virtualizer": ^3.6.8
+    "@react-types/checkbox": ^3.7.1
+    "@react-types/grid": ^3.2.4
+    "@react-types/shared": ^3.22.1
+    "@react-types/table": ^3.9.3
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: d319c4f0b39e5d664b53f6c2e3c714858771cddad292504ee945a92d0c2439cb40c7647714ae6715cdc5253ce402a53839039650b474eb6156e3ea1c13f50de1
+  languageName: node
+  linkType: hard
+
+"@react-aria/tabs@npm:^3.8.5":
+  version: 3.8.5
+  resolution: "@react-aria/tabs@npm:3.8.5"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/selection": ^3.17.5
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/tabs": ^3.6.4
+    "@react-types/shared": ^3.22.1
+    "@react-types/tabs": ^3.3.5
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 352aa3b277e1a28ff81b830e1e6cf9f16cb6bc87c210e01402731c297c7eceaff7eaebd7fa0128d5704b9c7f89ac40eddf07b27e3e83e087f04705b8e794716c
+  languageName: node
+  linkType: hard
+
+"@react-aria/tag@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "@react-aria/tag@npm:3.3.3"
+  dependencies:
+    "@react-aria/gridlist": ^3.7.5
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/label": ^3.7.6
+    "@react-aria/selection": ^3.17.5
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/list": ^3.10.3
+    "@react-types/button": ^3.9.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e4b123c6bc6386bd8f594e221042a627e1f909769041aec24df626475b050a6a936c83a4be2faf529b67e71700699285a292671b48f9459be48ceea8b7b1be55
+  languageName: node
+  linkType: hard
+
+"@react-aria/textfield@npm:^3.14.3":
+  version: 3.14.3
+  resolution: "@react-aria/textfield@npm:3.14.3"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/form": ^3.0.3
+    "@react-aria/label": ^3.7.6
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/form": ^3.0.1
+    "@react-stately/utils": ^3.9.1
+    "@react-types/shared": ^3.22.1
+    "@react-types/textfield": ^3.9.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 658bdf363a2d7f794d8fdcf75ff476235cfb660509eeccb5c36d57ef601ebdeab47ca26a8950b17c5a09aacc6f20be3235f36da1d54a7e46233e57be2d3563d3
+  languageName: node
+  linkType: hard
+
+"@react-aria/toggle@npm:^3.10.2":
+  version: 3.10.2
+  resolution: "@react-aria/toggle@npm:3.10.2"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/toggle": ^3.7.2
+    "@react-types/checkbox": ^3.7.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 034d2148132208f9eed804a55890c4d5456cbfa572072495a2db0f11fb663db7f0e6bf7a0750eb8d389d635710123834983835c4814cdc39024f86146f8c76d5
+  languageName: node
+  linkType: hard
+
+"@react-aria/toolbar@npm:3.0.0-beta.3":
+  version: 3.0.0-beta.3
+  resolution: "@react-aria/toolbar@npm:3.0.0-beta.3"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/utils": ^3.23.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 032bc414a94e2c3630206f32458e38348f3fd65fd28926bcacef4807c3ea0bd1afeb3b75044b4a3f5a0667318a7be8d3e2cb5cf01548829d9e1adc43382b528e
+  languageName: node
+  linkType: hard
+
+"@react-aria/tooltip@npm:^3.7.2":
+  version: 3.7.2
+  resolution: "@react-aria/tooltip@npm:3.7.2"
+  dependencies:
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/tooltip": ^3.4.7
+    "@react-types/shared": ^3.22.1
+    "@react-types/tooltip": ^3.4.7
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ff4116d34b955c7803d196159d8d28cb8185313f5bd0897849bd8c72f2919c13d15c0a015fdd2bc4c15188f2cf9f5d5dac9b71ae42a11abed390c3facc1fd46d
+  languageName: node
+  linkType: hard
+
+"@react-aria/utils@npm:^3.22.0, @react-aria/utils@npm:^3.23.2":
+  version: 3.23.2
+  resolution: "@react-aria/utils@npm:3.23.2"
+  dependencies:
+    "@react-aria/ssr": ^3.9.2
+    "@react-stately/utils": ^3.9.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+    clsx: ^2.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 31a57fc3505879dde5da273e35a7f421b3473611e6b108a0a1a32f782c39b5c5a8cb99cc7f35afc742725e0a977165fec8462b127665be7d38d70d12fa40b544
+  languageName: node
+  linkType: hard
+
+"@react-aria/visually-hidden@npm:^3.8.10":
+  version: 3.8.10
+  resolution: "@react-aria/visually-hidden@npm:3.8.10"
+  dependencies:
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/utils": ^3.23.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 06cc318ac0239c888fe68cbdebd1ac9a6c5f79177df6fb5a7894fc2ce4d6a1c76fc10175e7dcc889942e747ed1cc040ed6f9fa5f25e25c3508aadb5e90a7c31d
+  languageName: node
+  linkType: hard
+
+"@react-spectrum/utils@npm:^3.11.1":
+  version: 3.11.5
+  resolution: "@react-spectrum/utils@npm:3.11.5"
+  dependencies:
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/ssr": ^3.9.2
+    "@react-aria/utils": ^3.23.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+    clsx: ^2.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: d11a1e833915f8b41b87aa3c00cadc4c8d95875fdeba14019250be71fce17bb29da579e79e7f6e75e7c31f87adb856547b9fd94adfbfa1d4c29ad1ede169c536
+  languageName: node
+  linkType: hard
+
+"@react-stately/calendar@npm:^3.4.4":
+  version: 3.4.4
+  resolution: "@react-stately/calendar@npm:3.4.4"
+  dependencies:
+    "@internationalized/date": ^3.5.2
+    "@react-stately/utils": ^3.9.1
+    "@react-types/calendar": ^3.4.4
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e4f4f2165fdb1e9420f4952febc490d13df617ada5b401af0cfafdf65e68d545f8abc90ba2039384e3a20b337c5dbb3627e9c9e8c2a13edefe69a264adcc3abe
+  languageName: node
+  linkType: hard
+
+"@react-stately/checkbox@npm:^3.6.3":
+  version: 3.6.3
+  resolution: "@react-stately/checkbox@npm:3.6.3"
+  dependencies:
+    "@react-stately/form": ^3.0.1
+    "@react-stately/utils": ^3.9.1
+    "@react-types/checkbox": ^3.7.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 75a5969a62372c84851355705ac48a0c5667acfb0720407e8605747c63c6a31414ca859f6d27c93fadf4179667e91403bb78e84707504f46a8ef394ef014f97e
+  languageName: node
+  linkType: hard
+
+"@react-stately/collections@npm:^3.10.5":
+  version: 3.10.5
+  resolution: "@react-stately/collections@npm:3.10.5"
+  dependencies:
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 871a943644c70e3e0c91a0fbdd37c8a211f2393e15caef68d030272ab792535c2707db42f2aa73acf0a586ba4af6648e0596983145e0da2bf5bb8fe6ffc4d93e
+  languageName: node
+  linkType: hard
+
+"@react-stately/combobox@npm:^3.8.2":
+  version: 3.8.2
+  resolution: "@react-stately/combobox@npm:3.8.2"
+  dependencies:
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/form": ^3.0.1
+    "@react-stately/list": ^3.10.3
+    "@react-stately/overlays": ^3.6.5
+    "@react-stately/select": ^3.6.2
+    "@react-stately/utils": ^3.9.1
+    "@react-types/combobox": ^3.10.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 43e7b500229b06a669fefd2421c43f8e7c4955206395edabd52a300699a57996e163f9f4fb419f8144df9458bdb36952a3507b45cb9e2cabb72c972067096698
+  languageName: node
+  linkType: hard
+
+"@react-stately/data@npm:^3.11.2":
+  version: 3.11.2
+  resolution: "@react-stately/data@npm:3.11.2"
+  dependencies:
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 435ebf885954d0d4a99a01f3d248e53862d9fb4aec2cdebe4d061e16d0d85740cc9f863351775f852228f9751fbfb7fe3152d51c9eec2412c4facd54bf385e1c
+  languageName: node
+  linkType: hard
+
+"@react-stately/datepicker@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "@react-stately/datepicker@npm:3.9.2"
+  dependencies:
+    "@internationalized/date": ^3.5.2
+    "@internationalized/string": ^3.2.1
+    "@react-stately/form": ^3.0.1
+    "@react-stately/overlays": ^3.6.5
+    "@react-stately/utils": ^3.9.1
+    "@react-types/datepicker": ^3.7.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 2773b82a4bbfeb3ca2790099b3dad83a72840aab1f589fb9af8cc9125821f58c8eb45ecfffe9b6372c931c8a59e93b7670befd10a7a38d12a89dec8064521c50
+  languageName: node
+  linkType: hard
+
+"@react-stately/dnd@npm:^3.2.8":
+  version: 3.2.8
+  resolution: "@react-stately/dnd@npm:3.2.8"
+  dependencies:
+    "@react-stately/selection": ^3.14.3
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: aeba60962502822a5d8df03461e34d0006c6c35a2211d1f03df1b6e1e1e8f427c90a51c2619d94bb8353f5637f2b1795d12734e99c33751e5efd04f7f7dc8773
+  languageName: node
+  linkType: hard
+
+"@react-stately/flags@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "@react-stately/flags@npm:3.0.1"
+  dependencies:
+    "@swc/helpers": ^0.4.14
+  checksum: 24bde3fcca2454854734107c4c3c924e1b4509b78a0fb9ff251a998cd9c482073ef11f31280f6a9645f44c4c2f4694cf70a6f79117d0690c27cd037b8e376ce6
+  languageName: node
+  linkType: hard
+
+"@react-stately/form@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "@react-stately/form@npm:3.0.1"
+  dependencies:
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 11b0721855bdd0d10802d63d06bca1af7624189a8240a901efb9ce24981d596e7a0375000d23c26428a9d02013209699d60ef3a700b01051322251661ad4ef9e
+  languageName: node
+  linkType: hard
+
+"@react-stately/grid@npm:^3.8.5":
+  version: 3.8.5
+  resolution: "@react-stately/grid@npm:3.8.5"
+  dependencies:
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/selection": ^3.14.3
+    "@react-types/grid": ^3.2.4
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 90a88fe753ef21d87c0f4e0ee64a8a801c7d5ecaef598a10147a843869b76d38dc1404831ea0f5895c81989269b03a53bcd56af86a017329341361a5a9122ff4
+  languageName: node
+  linkType: hard
+
+"@react-stately/list@npm:^3.10.3":
+  version: 3.10.3
+  resolution: "@react-stately/list@npm:3.10.3"
+  dependencies:
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/selection": ^3.14.3
+    "@react-stately/utils": ^3.9.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 1b99eede7c783c05cfc9d5b4bcea3877c816539856351400ca646d789655c931e39ab0150ce94f4a6f9259da141240f37f66ede76a44ac4161f8819fb4ab93e1
+  languageName: node
+  linkType: hard
+
+"@react-stately/menu@npm:^3.6.1":
+  version: 3.6.1
+  resolution: "@react-stately/menu@npm:3.6.1"
+  dependencies:
+    "@react-stately/overlays": ^3.6.5
+    "@react-types/menu": ^3.9.7
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a24cfbfd2b232369c9862f047e3c32a02b79dbf52e6c338d53a0c88c7758a1cbeaa4366aec81cb2bb2f60401c37d1101c9a6a5a77b196f9ec0523148903f45b7
+  languageName: node
+  linkType: hard
+
+"@react-stately/numberfield@npm:^3.9.1":
+  version: 3.9.1
+  resolution: "@react-stately/numberfield@npm:3.9.1"
+  dependencies:
+    "@internationalized/number": ^3.5.1
+    "@react-stately/form": ^3.0.1
+    "@react-stately/utils": ^3.9.1
+    "@react-types/numberfield": ^3.8.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e242c2ae9c3201dd08c9892920b984e6786803517e4626ef712d4b23e305a7fa94c6600d6ec15e9347213c0d3c0ff778db5348d7c4a3d6a7d4a06805cd56fdd8
+  languageName: node
+  linkType: hard
+
+"@react-stately/overlays@npm:^3.6.5":
+  version: 3.6.5
+  resolution: "@react-stately/overlays@npm:3.6.5"
+  dependencies:
+    "@react-stately/utils": ^3.9.1
+    "@react-types/overlays": ^3.8.5
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 30d665b93f093fb497d5177ff5ebf700c0fe976393504debd5924811fafba9bd0cd40b6b4943427c5f4c4d8cc45103417015b0fb8e5aed5559bc5c23fc8bbf50
+  languageName: node
+  linkType: hard
+
+"@react-stately/radio@npm:^3.10.2":
+  version: 3.10.2
+  resolution: "@react-stately/radio@npm:3.10.2"
+  dependencies:
+    "@react-stately/form": ^3.0.1
+    "@react-stately/utils": ^3.9.1
+    "@react-types/radio": ^3.7.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 72aaef7112c950d0476e893a173dd356d55e2deeaf7dff3969a85dc597291a64c653b29536ba0f7f912381effa8490249a35eeb51aaee7b9fcff41e067e9aec5
+  languageName: node
+  linkType: hard
+
+"@react-stately/searchfield@npm:^3.5.1":
+  version: 3.5.1
+  resolution: "@react-stately/searchfield@npm:3.5.1"
+  dependencies:
+    "@react-stately/utils": ^3.9.1
+    "@react-types/searchfield": ^3.5.3
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 443c9d036c4c140c8222726f453d9a461281e24a434cbaa7b9d4a19cecd3a9bd3f577e73e2651ecf5abe6567f19dfc2af38e048a89cd1d92fe7a6a0068542341
+  languageName: node
+  linkType: hard
+
+"@react-stately/select@npm:^3.6.2":
+  version: 3.6.2
+  resolution: "@react-stately/select@npm:3.6.2"
+  dependencies:
+    "@react-stately/form": ^3.0.1
+    "@react-stately/list": ^3.10.3
+    "@react-stately/overlays": ^3.6.5
+    "@react-types/select": ^3.9.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 5b01b757d0d2396096e1e8ea904583d5f2268e8652837562e698c21eb2ad8867c3d06ab45c23508086c833cbfe1b00ab80810f3e3614ca2d55c144ccc6bf5565
+  languageName: node
+  linkType: hard
+
+"@react-stately/selection@npm:^3.14.3":
+  version: 3.14.3
+  resolution: "@react-stately/selection@npm:3.14.3"
+  dependencies:
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/utils": ^3.9.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 8138fab2371448cfcef8c6f8623bc4175fb8b81261a7445f6986d2fd7da2ec791679ac6f9e90ab9be8f50c5c47b8843b55c6da95592c3525b0a38fa48d12f0d8
+  languageName: node
+  linkType: hard
+
+"@react-stately/slider@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "@react-stately/slider@npm:3.5.2"
+  dependencies:
+    "@react-stately/utils": ^3.9.1
+    "@react-types/shared": ^3.22.1
+    "@react-types/slider": ^3.7.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 78ec39dfb18a138c99a3ba2ad50d7d69b64688ca1aaa9432c912b4fc1bf268919f1db61a6d8d02a9a0afa6f25a09430cbf28d5ea40c04b4e23f666b3bd2f411f
+  languageName: node
+  linkType: hard
+
+"@react-stately/table@npm:^3.11.6":
+  version: 3.11.6
+  resolution: "@react-stately/table@npm:3.11.6"
+  dependencies:
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/flags": ^3.0.1
+    "@react-stately/grid": ^3.8.5
+    "@react-stately/selection": ^3.14.3
+    "@react-stately/utils": ^3.9.1
+    "@react-types/grid": ^3.2.4
+    "@react-types/shared": ^3.22.1
+    "@react-types/table": ^3.9.3
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: d4ad81b878372f0314818aac8ab0f32c123d601053bce5ea5158daebafe5af964dd83227578a58b0ab6d6936958f7fc6ec104e3dcd5bfbc9df5f36963faf1cdc
+  languageName: node
+  linkType: hard
+
+"@react-stately/tabs@npm:^3.6.4":
+  version: 3.6.4
+  resolution: "@react-stately/tabs@npm:3.6.4"
+  dependencies:
+    "@react-stately/list": ^3.10.3
+    "@react-types/shared": ^3.22.1
+    "@react-types/tabs": ^3.3.5
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e5fa492f81795f3da031b56ee18f0f5402e9f0be056ef40c78632b079dada3536af2ef776b5d8fe3a02461ce0b161485d7bad8c4707539d8eef804a6259f75b2
+  languageName: node
+  linkType: hard
+
+"@react-stately/toggle@npm:^3.7.2":
+  version: 3.7.2
+  resolution: "@react-stately/toggle@npm:3.7.2"
+  dependencies:
+    "@react-stately/utils": ^3.9.1
+    "@react-types/checkbox": ^3.7.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a59e44a0aee68f7588e8cf4bcf0f782200b1a978ca46a99d049117f5456726a904d710a38acae7c6ab7658911de0cf50652110e56b5069f543e95af8f235c212
+  languageName: node
+  linkType: hard
+
+"@react-stately/tooltip@npm:^3.4.7":
+  version: 3.4.7
+  resolution: "@react-stately/tooltip@npm:3.4.7"
+  dependencies:
+    "@react-stately/overlays": ^3.6.5
+    "@react-types/tooltip": ^3.4.7
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 3eb555996e55b3d74c51bfb6770da283221bf61c4d369edf16ccb7788e8b50f10156ed0d922b541ec34959679b07833b1cd7aea9711a92b9d6236f9785d726c2
+  languageName: node
+  linkType: hard
+
+"@react-stately/tree@npm:^3.7.6":
+  version: 3.7.6
+  resolution: "@react-stately/tree@npm:3.7.6"
+  dependencies:
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/selection": ^3.14.3
+    "@react-stately/utils": ^3.9.1
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 95884bb63bc44363d8091efa785b1092e1d18a309c31edb0a0fe4f1b261b308db8bf036ca6370069261e5aca4d80b96c452dae4be6a8e4c4d4767d8d896c46de
+  languageName: node
+  linkType: hard
+
+"@react-stately/utils@npm:^3.9.1":
+  version: 3.9.1
+  resolution: "@react-stately/utils@npm:3.9.1"
   dependencies:
-    "@nodelib/fs.stat": 2.0.5
-    run-parallel: ^1.1.9
-  checksum: a970d595bd23c66c880e0ef1817791432dbb7acbb8d44b7e7d0e7a22f4521260d4a83f7f9fd61d44fda4610105577f8f58a60718105fb38352baed612fd79e59
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 290445ec2b48e24951c7685320b2cfd21694c3d8edd6c6db3135b168f0344c0740b5ee90b920c9ca6163cff6a4162219fb74b236cf47e8bf8a237c1efbdc908a
   languageName: node
   linkType: hard
 
-"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
-  version: 2.0.5
-  resolution: "@nodelib/fs.stat@npm:2.0.5"
-  checksum: 012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+"@react-stately/virtualizer@npm:^3.6.8":
+  version: 3.6.8
+  resolution: "@react-stately/virtualizer@npm:3.6.8"
+  dependencies:
+    "@react-aria/utils": ^3.23.2
+    "@react-types/shared": ^3.22.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 8b5196a95deb23a7fbf86199a28fa237e00283a6f48f22e191e2685d09601a590822e8c798166ee91c20a6a5b5000986ead448a125884fb8068a05a6780a38c3
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
-  version: 1.2.8
-  resolution: "@nodelib/fs.walk@npm:1.2.8"
+"@react-types/breadcrumbs@npm:^3.7.3":
+  version: 3.7.3
+  resolution: "@react-types/breadcrumbs@npm:3.7.3"
   dependencies:
-    "@nodelib/fs.scandir": 2.1.5
-    fastq: ^1.6.0
-  checksum: 190c643f156d8f8f277bf2a6078af1ffde1fd43f498f187c2db24d35b4b4b5785c02c7dc52e356497b9a1b65b13edc996de08de0b961c32844364da02986dc53
+    "@react-types/link": ^3.5.3
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b8838296f9e01117ddfd63b4ec840cb8476ff4e3f4984dda7ecb458e07b6e22bccd4c81aa5201bcc0da69e00b2de9acbf9a63e07c1259ac203883f45a4ff5f08
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^2.1.0":
-  version: 2.1.2
-  resolution: "@npmcli/fs@npm:2.1.2"
+"@react-types/button@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "@react-types/button@npm:3.9.2"
   dependencies:
-    "@gar/promisify": ^1.1.3
-    semver: ^7.3.5
-  checksum: 405074965e72d4c9d728931b64d2d38e6ea12066d4fad651ac253d175e413c06fe4350970c783db0d749181da8fe49c42d3880bd1cbc12cd68e3a7964d820225
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 38955ab60a15c3da0d9a32fb7af204149dfb884508de76cebe0d1f527e4fa9ec04158826aeff45c7bc4650cbc54f6a0e539ae10abcdf6b2f7e084c28bdf3d685
   languageName: node
   linkType: hard
 
-"@npmcli/move-file@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "@npmcli/move-file@npm:2.0.1"
+"@react-types/calendar@npm:^3.4.4":
+  version: 3.4.4
+  resolution: "@react-types/calendar@npm:3.4.4"
   dependencies:
-    mkdirp: ^1.0.4
-    rimraf: ^3.0.2
-  checksum: 52dc02259d98da517fae4cb3a0a3850227bdae4939dda1980b788a7670636ca2b4a01b58df03dd5f65c1e3cb70c50fa8ce5762b582b3f499ec30ee5ce1fd9380
+    "@internationalized/date": ^3.5.2
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a9019d1cc006252cd5534cac10eef2695f0697a9a8404ed46d1f875b07caf9c9aa8afe5948c971382927a3b7a1be23583720f68b79f4ba78e1d910b87b247682
   languageName: node
   linkType: hard
 
-"@octokit/auth-token@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "@octokit/auth-token@npm:3.0.4"
-  checksum: 42f533a873d4192e6df406b3176141c1f95287423ebdc4cf23a38bb77ee00ccbc0e60e3fbd5874234fc2ed2e67bbc6035e3b0561dacc1d078adb5c4ced3579e3
+"@react-types/checkbox@npm:^3.7.1":
+  version: 3.7.1
+  resolution: "@react-types/checkbox@npm:3.7.1"
+  dependencies:
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 9caa368a6f3d7376b5f2943b61749fc3b5e67e94c31b18e47ba90a7bf7760e76be837ccc894b8883ed3714babfb6f6974c58d58b8f66d5dcb57550b919fcddc4
   languageName: node
   linkType: hard
 
-"@octokit/core@npm:^4.2.1":
-  version: 4.2.4
-  resolution: "@octokit/core@npm:4.2.4"
+"@react-types/combobox@npm:^3.10.1":
+  version: 3.10.1
+  resolution: "@react-types/combobox@npm:3.10.1"
   dependencies:
-    "@octokit/auth-token": ^3.0.0
-    "@octokit/graphql": ^5.0.0
-    "@octokit/request": ^6.0.0
-    "@octokit/request-error": ^3.0.0
-    "@octokit/types": ^9.0.0
-    before-after-hook: ^2.2.0
-    universal-user-agent: ^6.0.0
-  checksum: ac8ab47440a31b0228a034aacac6994b64d6b073ad5b688b4c5157fc5ee0d1af1c926e6087bf17fd7244ee9c5998839da89065a90819bde4a97cb77d4edf58a6
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 613f06abcbeacc2232aa4e7a205282c0f3cce1bfb6d7c285ea6607eb2caad68ed1f4853faf81107112ecb8bf7113f5ee3bf64243cf4e1958473944108798ff55
   languageName: node
   linkType: hard
 
-"@octokit/endpoint@npm:^7.0.0":
-  version: 7.0.6
-  resolution: "@octokit/endpoint@npm:7.0.6"
+"@react-types/datepicker@npm:^3.7.2":
+  version: 3.7.2
+  resolution: "@react-types/datepicker@npm:3.7.2"
   dependencies:
-    "@octokit/types": ^9.0.0
-    is-plain-object: ^5.0.0
-    universal-user-agent: ^6.0.0
-  checksum: 7caebf30ceec50eb7f253341ed419df355232f03d4638a95c178ee96620400db7e4a5e15d89773fe14db19b8653d4ab4cc81b2e93ca0c760b4e0f7eb7ad80301
+    "@internationalized/date": ^3.5.2
+    "@react-types/calendar": ^3.4.4
+    "@react-types/overlays": ^3.8.5
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: fce6ea0bd415e8865e8304044bbe826ea242e8d57cfc10fa4bb8d419d8e1749b49dff01507a068116df28a95130dd00f91d4e78bddefa0a64ce84c3a4117fd78
   languageName: node
   linkType: hard
 
-"@octokit/graphql@npm:^5.0.0":
-  version: 5.0.6
-  resolution: "@octokit/graphql@npm:5.0.6"
+"@react-types/dialog@npm:^3.5.8":
+  version: 3.5.8
+  resolution: "@react-types/dialog@npm:3.5.8"
   dependencies:
-    "@octokit/request": ^6.0.0
-    "@octokit/types": ^9.0.0
-    universal-user-agent: ^6.0.0
-  checksum: 7be545d348ef31dcab0a2478dd64d5746419a2f82f61459c774602bcf8a9b577989c18001f50b03f5f61a3d9e34203bdc021a4e4d75ff2d981e8c9c09cf8a65c
+    "@react-types/overlays": ^3.8.5
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 079f955ed8da84407823e4145bdc0c13a76c8fa63b886aff5a514de148bcbb8c833b217d2416e3d50139f5d382bde51be4af82f2f0200bb508a142126c08bc84
   languageName: node
   linkType: hard
 
-"@octokit/openapi-types@npm:^18.0.0":
-  version: 18.0.0
-  resolution: "@octokit/openapi-types@npm:18.0.0"
-  checksum: d487d6c6c1965e583eee417d567e4fe3357a98953fc49bce1a88487e7908e9b5dbb3e98f60dfa340e23b1792725fbc006295aea071c5667a813b9c098185b56f
+"@react-types/form@npm:^3.7.2":
+  version: 3.7.2
+  resolution: "@react-types/form@npm:3.7.2"
+  dependencies:
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 04848c097685bf8b3879f26a2b52018d4a92876a330c3d3453fda7b651d542d8bd7a501241bade74719a5968bba975b26d2b8d89b37d4b4982bdb573ce72e911
   languageName: node
   linkType: hard
 
-"@octokit/plugin-paginate-rest@npm:^6.1.2":
-  version: 6.1.2
-  resolution: "@octokit/plugin-paginate-rest@npm:6.1.2"
+"@react-types/grid@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "@react-types/grid@npm:3.2.4"
   dependencies:
-    "@octokit/tsconfig": ^1.0.2
-    "@octokit/types": ^9.2.3
+    "@react-types/shared": ^3.22.1
   peerDependencies:
-    "@octokit/core": ">=4"
-  checksum: a7b3e686c7cbd27ec07871cde6e0b1dc96337afbcef426bbe3067152a17b535abd480db1861ca28c88d93db5f7bfdbcadd0919ead19818c28a69d0e194038065
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b022bd9be91109c6b508b68abc9db89be028a73764073db56a7bcdcc5c5aa53f5c45241ba17e8ad8858d2a1993e7b5ac5861391a96a244392fb47e72004dce69
   languageName: node
   linkType: hard
 
-"@octokit/plugin-request-log@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "@octokit/plugin-request-log@npm:1.0.4"
+"@react-types/link@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "@react-types/link@npm:3.5.3"
+  dependencies:
+    "@react-types/shared": ^3.22.1
   peerDependencies:
-    "@octokit/core": ">=3"
-  checksum: 2086db00056aee0f8ebd79797b5b57149ae1014e757ea08985b71eec8c3d85dbb54533f4fd34b6b9ecaa760904ae6a7536be27d71e50a3782ab47809094bfc0c
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 5b2ebcf30bd7d3b9999d6fbeb624c66f229a5a42693e246dbac6d7f4c575bcd535fb1d6b307e57c8cd98794d27ebb01d4193c56e30ca7e9559550282c3bdcc4d
   languageName: node
   linkType: hard
 
-"@octokit/plugin-rest-endpoint-methods@npm:^7.1.2":
-  version: 7.2.3
-  resolution: "@octokit/plugin-rest-endpoint-methods@npm:7.2.3"
+"@react-types/listbox@npm:^3.4.7":
+  version: 3.4.7
+  resolution: "@react-types/listbox@npm:3.4.7"
   dependencies:
-    "@octokit/types": ^10.0.0
+    "@react-types/shared": ^3.22.1
   peerDependencies:
-    "@octokit/core": ">=3"
-  checksum: 21dfb98514dbe900c29cddb13b335bbce43d613800c6b17eba3c1fd31d17e69c1960f3067f7bf864bb38fdd5043391f4a23edee42729d8c7fbabd00569a80336
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 31dd308a8e7262d0b416124b9db01c4af19def0631fce60f8379800e186e9587f60ac7d08c39ec6c36b5aaa2ee10b3704f9040fccac630a4becce6e5f90189a8
   languageName: node
   linkType: hard
 
-"@octokit/request-error@npm:^3.0.0":
-  version: 3.0.3
-  resolution: "@octokit/request-error@npm:3.0.3"
+"@react-types/menu@npm:^3.9.7":
+  version: 3.9.7
+  resolution: "@react-types/menu@npm:3.9.7"
   dependencies:
-    "@octokit/types": ^9.0.0
-    deprecation: ^2.0.0
-    once: ^1.4.0
-  checksum: 5db0b514732686b627e6ed9ef1ccdbc10501f1b271a9b31f784783f01beee70083d7edcfeb35fbd7e569fa31fdd6762b1ff6b46101700d2d97e7e48e749520d0
+    "@react-types/overlays": ^3.8.5
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: da1a76d7014a3f404557a037b3acdcd435a5571254f2b4aff52a46da8d64998fbba374a4c6f69c4149624b0130485a3fe572cbecc1fbeafdebb67b8e96a5696b
   languageName: node
   linkType: hard
 
-"@octokit/request@npm:^6.0.0":
-  version: 6.2.8
-  resolution: "@octokit/request@npm:6.2.8"
+"@react-types/meter@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "@react-types/meter@npm:3.3.7"
   dependencies:
-    "@octokit/endpoint": ^7.0.0
-    "@octokit/request-error": ^3.0.0
-    "@octokit/types": ^9.0.0
-    is-plain-object: ^5.0.0
-    node-fetch: ^2.6.7
-    universal-user-agent: ^6.0.0
-  checksum: 3747106f50d7c462131ff995b13defdd78024b7becc40283f4ac9ea0af2391ff33a0bb476a05aa710346fe766d20254979079a1d6f626112015ba271fe38f3e2
+    "@react-types/progress": ^3.5.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 9fcce3d6ce84385542d86c8c4c65e017a26ae7bbd5563972ec93f116a342872aebb6b3c8354ed8d3af463cf7e7e531a5ebf5fb98ff214317b2f89ae66f67d30c
   languageName: node
   linkType: hard
 
-"@octokit/rest@npm:19.0.13":
-  version: 19.0.13
-  resolution: "@octokit/rest@npm:19.0.13"
+"@react-types/numberfield@npm:^3.8.1":
+  version: 3.8.1
+  resolution: "@react-types/numberfield@npm:3.8.1"
   dependencies:
-    "@octokit/core": ^4.2.1
-    "@octokit/plugin-paginate-rest": ^6.1.2
-    "@octokit/plugin-request-log": ^1.0.4
-    "@octokit/plugin-rest-endpoint-methods": ^7.1.2
-  checksum: ca1553e3fe46efabffef60e68e4a228d4cc0f0d545daf7f019560f666d3e934c6f3a6402a42bbd786af4f3c0a6e69380776312f01b7d52998fe1bbdd1b068f69
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 58586ef792675f84dd2868e05b85a16c23dee5c6f43b9a6aebe63d059fa51ded9bcae931cdcd7a4ce916575a1a5a9eb6da1a68a1660227c56b1cd896a52af4b1
   languageName: node
   linkType: hard
 
-"@octokit/tsconfig@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@octokit/tsconfig@npm:1.0.2"
-  checksum: 74d56f3e9f326a8dd63700e9a51a7c75487180629c7a68bbafee97c612fbf57af8347369bfa6610b9268a3e8b833c19c1e4beb03f26db9a9dce31f6f7a19b5b1
+"@react-types/overlays@npm:^3.8.5":
+  version: 3.8.5
+  resolution: "@react-types/overlays@npm:3.8.5"
+  dependencies:
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 7c4aba5abc21c79543e1f497e595da8e4fde8c0583336cc5ab7c961cfc5ce608de2c33f3566a4ad89b01571d3b8483b06a14d5ef30b736fd4066f70ffa0c139d
   languageName: node
   linkType: hard
 
-"@octokit/types@npm:^10.0.0":
-  version: 10.0.0
-  resolution: "@octokit/types@npm:10.0.0"
+"@react-types/progress@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "@react-types/progress@npm:3.5.2"
   dependencies:
-    "@octokit/openapi-types": ^18.0.0
-  checksum: 8aafba2ff0cd2435fb70c291bf75ed071c0fa8a865cf6169648732068a35dec7b85a345851f18920ec5f3e94ee0e954988485caac0da09ec3f6781cc44fe153a
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 7f8a09ee353f2fec2dc2e92c7d20af0e457a727a64c6e759f5f76cc360292a534968b21213322831dd0eb31cc19a1a358a16476e63496de722cae2ffa96dfffc
   languageName: node
   linkType: hard
 
-"@octokit/types@npm:^9.0.0, @octokit/types@npm:^9.2.3":
-  version: 9.3.2
-  resolution: "@octokit/types@npm:9.3.2"
+"@react-types/radio@npm:^3.7.1":
+  version: 3.7.1
+  resolution: "@react-types/radio@npm:3.7.1"
   dependencies:
-    "@octokit/openapi-types": ^18.0.0
-  checksum: f55d096aaed3e04b8308d4422104fb888f355988056ba7b7ef0a4c397b8a3e54290d7827b06774dbe0c9ce55280b00db486286954f9c265aa6b03091026d9da8
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 58935787e7e58f153bb8d94d54921d21e66be04b15e9cea4835f1b6f7716edfb743cf23a200ec15e9c4d575d2a94b01855a220372bb7fcfd891be871dd586c39
   languageName: node
   linkType: hard
 
-"@pkgr/utils@npm:^2.3.1":
-  version: 2.4.2
-  resolution: "@pkgr/utils@npm:2.4.2"
+"@react-types/searchfield@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "@react-types/searchfield@npm:3.5.3"
   dependencies:
-    cross-spawn: ^7.0.3
-    fast-glob: ^3.3.0
-    is-glob: ^4.0.3
-    open: ^9.1.0
-    picocolors: ^1.0.0
-    tslib: ^2.6.0
-  checksum: 24e04c121269317d259614cd32beea3af38277151c4002df5883c4be920b8e3490bb897748e844f9d46bf68230f86dabd4e8f093773130e7e60529a769a132fc
+    "@react-types/shared": ^3.22.1
+    "@react-types/textfield": ^3.9.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 525ee24179b6675dad02cdf211054ff346db285d632e4eb8951b93250bf7ec68af4d1b7fa6e18ff3f531d438e561b82a0d8785a451322626291fc2a1da644c9c
   languageName: node
   linkType: hard
 
-"@plone-collective/volto-sentry@npm:0.3.0":
-  version: 0.3.0
-  resolution: "@plone-collective/volto-sentry@npm:0.3.0"
+"@react-types/select@npm:^3.9.2":
+  version: 3.9.2
+  resolution: "@react-types/select@npm:3.9.2"
   dependencies:
-    "@sentry/browser": 7.15.0
-    "@sentry/integrations": 7.15.0
-    "@sentry/node": 7.15.0
-    "@sentry/webpack-plugin": 1.19.1
-  checksum: 99e5493e46fdc93d69dcdacfdbd7a4ca746952edca805ff095a5fd6789a41820510e4e73d0a4d218f9fbb9b65f80641ac4f2a0c65753a20f193f88e92a04ee1d
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 1f8c07cf506bb4060a91099260c8c9ecc3c1407c01a08828e4d7f96abf1064270ccceea87f544942bc254dfd9051c37bc5eed3ee4b8abff64e6e5d2f270c158b
   languageName: node
   linkType: hard
 
-"@plone/scripts@npm:*":
-  version: 3.0.0
-  resolution: "@plone/scripts@npm:3.0.0"
+"@react-types/shared@npm:^3.22.1":
+  version: 3.22.1
+  resolution: "@react-types/shared@npm:3.22.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 162031517b3b2762d23999ca7b2d4f1d404a1b1823037f28abd7b70138dfe7929beee8a56781ec171de12ec510ec64837e60cb7a83ec959796368e9f7dc51f78
+  languageName: node
+  linkType: hard
+
+"@react-types/slider@npm:^3.7.1":
+  version: 3.7.1
+  resolution: "@react-types/slider@npm:3.7.1"
   dependencies:
-    babel-plugin-react-intl: 5.1.17
-    babel-preset-razzle: 4.2.17
-    chalk: 4
-    commander: 8.2.0
-    fs-extra: 10.1.0
-    git-url-parse: ^11.6.0
-    mrs-developer: "*"
-    pofile: 1.0.10
-  bin:
-    addon: addon/index.js
-    changelogupdater: changelogupdater.cjs
-    i18n: i18n.cjs
-  checksum: c5a03a68fd16f731fd40bbf94e3bc6addb4395a04049eb98fbb95f1e1ebcc2468e003149b829261a1b577d50cce032d80dc99c8e812a126621f730f6e431cb97
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 76f11bbd00b14992614b0ae86af2efd6b0a49d0176277d63b42b2e2acd345bb954cc92752b90d5b4cabc4897f719dd9e1e4d7983b3f293a2183067ed80c85f32
   languageName: node
   linkType: hard
 
-"@pnpm/config.env-replace@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@pnpm/config.env-replace@npm:1.1.0"
-  checksum: a3d2b57e35eec9543d9eb085854f6e33e8102dac99fdef2fad2eebdbbfc345e93299f0c20e8eb61c1b4c7aa123bfd47c175678626f161cda65dd147c2b6e1fa0
+"@react-types/switch@npm:^3.5.1":
+  version: 3.5.1
+  resolution: "@react-types/switch@npm:3.5.1"
+  dependencies:
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e5dbebce4e5cfde776a2ec5e3b759b8fe308e43208daea100c2541f9aa635cc1941b6e7fab8c352bbc6c9ac55f2a3b8e4d77ef8fe8f5b190ad1e3a78307916de
   languageName: node
   linkType: hard
 
-"@pnpm/network.ca-file@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "@pnpm/network.ca-file@npm:1.0.2"
+"@react-types/table@npm:^3.9.3":
+  version: 3.9.3
+  resolution: "@react-types/table@npm:3.9.3"
   dependencies:
-    graceful-fs: 4.2.10
-  checksum: d8d0884646500576bd5390464d13db1bb9a62e32a1069293e5bddb2ad8354b354b7e2d2a35e12850025651e795e6a80ce9e601c66312504667b7e3ee7b52becc
+    "@react-types/grid": ^3.2.4
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 077bd6fbf0ac2a22dd8d3770b421ebd8faa7dbddd831e8f14426baccd85b5ba8db97c84d79e1df5267cab761a86731a130a04010e2938a45604db271c65ca9b2
   languageName: node
   linkType: hard
 
-"@pnpm/npm-conf@npm:^2.1.0":
-  version: 2.2.2
-  resolution: "@pnpm/npm-conf@npm:2.2.2"
+"@react-types/tabs@npm:^3.3.5":
+  version: 3.3.5
+  resolution: "@react-types/tabs@npm:3.3.5"
   dependencies:
-    "@pnpm/config.env-replace": ^1.1.0
-    "@pnpm/network.ca-file": ^1.0.1
-    config-chain: ^1.1.11
-  checksum: d64aa4464be584caa855eafa8f109509390489997e36d602d6215784e2973b896bef3968426bb00896cf4ae7d440fed2cee7bb4e0dbc90362f024ea3f9e27ab1
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 148806044e2a6dcaa32d8583a758c73681f4e80e0119633add4224ceaf1b3e3a9be61dceb7eabf0e60fb3b97bee0ed661e21e303c04ddbb1aa79e4c7cf8f66a7
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.11.2, @popperjs/core@npm:^2.6.0":
-  version: 2.11.6
-  resolution: "@popperjs/core@npm:2.11.6"
-  checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0
+"@react-types/textfield@npm:^3.9.1":
+  version: 3.9.1
+  resolution: "@react-types/textfield@npm:3.9.1"
+  dependencies:
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 85e53d9cfe4f7ebf1f7ec298019c6f80c71b736149f7d885c5fe9f74fb2a594ec1caedaafebcbd753aa4b5af0686575bb7c403f02e91fd8d79d7093e27d941b3
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.9.2":
-  version: 2.11.8
-  resolution: "@popperjs/core@npm:2.11.8"
-  checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+"@react-types/tooltip@npm:^3.4.7":
+  version: 3.4.7
+  resolution: "@react-types/tooltip@npm:3.4.7"
+  dependencies:
+    "@react-types/overlays": ^3.8.5
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 0350f3d74a95e60b90b353efdcae6879ebf2e308f511cbf707f69aa7c66a95ea8c59c4b598a0bcec1d4d6a33718d18c63ec46e50cb4be211d6cc8601481db79b
   languageName: node
   linkType: hard
 
@@ -4068,6 +5615,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/helpers@npm:^0.4.14":
+  version: 0.4.36
+  resolution: "@swc/helpers@npm:0.4.36"
+  dependencies:
+    legacy-swc-helpers: "npm:@swc/helpers@=0.4.14"
+    tslib: ^2.4.0
+  checksum: 20b9f021a9711633d709ef1c231423eb079cb7ed14ad191dc9583b0b46684a95d0e87c3efd7472e7673ddbd30eb200c21490ab43ad251df8f845cd09df3d236f
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:^0.5.0":
+  version: 0.5.6
+  resolution: "@swc/helpers@npm:0.5.6"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: 45de57097e1f6f356f571c7a4f55c692a46b0404c8601e5d9552e152000dfe541ff529d3d01c8a4abf60799d6e7d0078936e40be0a203ca356299d5d6adea765
+  languageName: node
+  linkType: hard
+
 "@szmarczak/http-timer@npm:^5.0.1":
   version: 5.0.1
   resolution: "@szmarczak/http-timer@npm:5.0.1"
@@ -5703,6 +7269,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"client-only@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "client-only@npm:0.0.1"
+  checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
+  languageName: node
+  linkType: hard
+
 "cliui@npm:^7.0.2":
   version: 7.0.4
   resolution: "cliui@npm:7.0.4"
@@ -5739,6 +7312,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "clsx@npm:2.1.0"
+  checksum: 43fefc29b6b49c9476fbce4f8b1cc75c27b67747738e598e6651dd40d63692135dc60b18fa1c5b78a2a9ba8ae6fd2055a068924b94e20b42039bd53b78b98e1d
+  languageName: node
+  linkType: hard
+
 "code-point-at@npm:^1.0.0":
   version: 1.1.0
   resolution: "code-point-at@npm:1.1.0"
@@ -6530,7 +8110,9 @@ __metadata:
     "@eeacms/volto-taxonomy": ^1.0.0
     "@loadable/babel-plugin": 5.13.2
     "@plone-collective/volto-sentry": 0.3.0
+    "@plone/components": alpha
     "@plone/scripts": "*"
+    "@plone/types": 1.0.0-alpha.3
     "@release-it/conventional-changelog": 5.1.1
     bootstrap-italia: 2.6.1
     classnames: ^2.3.2
@@ -6556,6 +8138,7 @@ __metadata:
     postcss-overrides: 3.1.4
     postcss-scss: 4.0.9
     prettier: 3.1.0
+    react-aria-components: 1.1.1
     react-dropzone: 11.0.1
     react-focus-lock: 2.9.4
     react-google-recaptcha-v3: 1.7.0
@@ -8776,6 +10359,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"intl-messageformat@npm:^10.1.0":
+  version: 10.5.11
+  resolution: "intl-messageformat@npm:10.5.11"
+  dependencies:
+    "@formatjs/ecma402-abstract": 1.18.2
+    "@formatjs/fast-memoize": 2.2.0
+    "@formatjs/icu-messageformat-parser": 2.7.6
+    tslib: ^2.4.0
+  checksum: b5574447a0d938170049042ec807344d57c72e9aabb2e72be0d5197baabeb763e05680b19b7607df93fadeec0e13c9bfcb450e9ba2fe7464b4f06600b612bf5e
+  languageName: node
+  linkType: hard
+
 "invariant@npm:^2.1.0, invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
@@ -9599,6 +11194,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"legacy-swc-helpers@npm:@swc/helpers@=0.4.14":
+  version: 0.4.14
+  resolution: "@swc/helpers@npm:0.4.14"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: 273fd3f3fc461a92f3790cc551ea054745c6d6959afbe1232e6d7aa1c722bbc114d308aab96bef5c78fc0303c85c7b472ef00e2253251cc89737f3b1af56e5a5
+  languageName: node
+  linkType: hard
+
 "levn@npm:^0.4.1":
   version: 0.4.1
   resolution: "levn@npm:0.4.1"
@@ -11683,6 +13287,84 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-aria-components@npm:1.1.1, react-aria-components@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "react-aria-components@npm:1.1.1"
+  dependencies:
+    "@internationalized/date": ^3.5.2
+    "@internationalized/string": ^3.2.1
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/menu": ^3.13.1
+    "@react-aria/toolbar": 3.0.0-beta.3
+    "@react-aria/utils": ^3.23.2
+    "@react-stately/menu": ^3.6.1
+    "@react-stately/table": ^3.11.6
+    "@react-stately/utils": ^3.9.1
+    "@react-types/form": ^3.7.2
+    "@react-types/grid": ^3.2.4
+    "@react-types/shared": ^3.22.1
+    "@react-types/table": ^3.9.3
+    "@swc/helpers": ^0.5.0
+    client-only: ^0.0.1
+    react-aria: ^3.32.1
+    react-stately: ^3.30.1
+    use-sync-external-store: ^1.2.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 8cfc06552809e87e4538b3b8cdeb8eba0e6ac870338f56f12dfbf1ec340dc8e0dc11b722e01033b962ace5ad1d8315d8aa79ee18b51f1b035bcf9e08d2fbd98c
+  languageName: node
+  linkType: hard
+
+"react-aria@npm:^3.32.1":
+  version: 3.32.1
+  resolution: "react-aria@npm:3.32.1"
+  dependencies:
+    "@internationalized/string": ^3.2.1
+    "@react-aria/breadcrumbs": ^3.5.11
+    "@react-aria/button": ^3.9.3
+    "@react-aria/calendar": ^3.5.6
+    "@react-aria/checkbox": ^3.14.1
+    "@react-aria/combobox": ^3.8.4
+    "@react-aria/datepicker": ^3.9.3
+    "@react-aria/dialog": ^3.5.12
+    "@react-aria/dnd": ^3.5.3
+    "@react-aria/focus": ^3.16.2
+    "@react-aria/gridlist": ^3.7.5
+    "@react-aria/i18n": ^3.10.2
+    "@react-aria/interactions": ^3.21.1
+    "@react-aria/label": ^3.7.6
+    "@react-aria/link": ^3.6.5
+    "@react-aria/listbox": ^3.11.5
+    "@react-aria/menu": ^3.13.1
+    "@react-aria/meter": ^3.4.11
+    "@react-aria/numberfield": ^3.11.1
+    "@react-aria/overlays": ^3.21.1
+    "@react-aria/progress": ^3.4.11
+    "@react-aria/radio": ^3.10.2
+    "@react-aria/searchfield": ^3.7.3
+    "@react-aria/select": ^3.14.3
+    "@react-aria/selection": ^3.17.5
+    "@react-aria/separator": ^3.3.11
+    "@react-aria/slider": ^3.7.6
+    "@react-aria/ssr": ^3.9.2
+    "@react-aria/switch": ^3.6.2
+    "@react-aria/table": ^3.13.5
+    "@react-aria/tabs": ^3.8.5
+    "@react-aria/tag": ^3.3.3
+    "@react-aria/textfield": ^3.14.3
+    "@react-aria/tooltip": ^3.7.2
+    "@react-aria/utils": ^3.23.2
+    "@react-aria/visually-hidden": ^3.8.10
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 04bc8868f1cc9783e90aeb21fa8e1c50bcf31f34bba86cdad7c95cfff81ebdefe114c02a5a637bceb633cd66cd822d04aefef8aa7021c54d937c21aa73996881
+  languageName: node
+  linkType: hard
+
 "react-clientside-effect@npm:^1.2.6":
   version: 1.2.6
   resolution: "react-clientside-effect@npm:1.2.6"
@@ -11920,6 +13602,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-stately@npm:^3.30.1":
+  version: 3.30.1
+  resolution: "react-stately@npm:3.30.1"
+  dependencies:
+    "@react-stately/calendar": ^3.4.4
+    "@react-stately/checkbox": ^3.6.3
+    "@react-stately/collections": ^3.10.5
+    "@react-stately/combobox": ^3.8.2
+    "@react-stately/data": ^3.11.2
+    "@react-stately/datepicker": ^3.9.2
+    "@react-stately/dnd": ^3.2.8
+    "@react-stately/form": ^3.0.1
+    "@react-stately/list": ^3.10.3
+    "@react-stately/menu": ^3.6.1
+    "@react-stately/numberfield": ^3.9.1
+    "@react-stately/overlays": ^3.6.5
+    "@react-stately/radio": ^3.10.2
+    "@react-stately/searchfield": ^3.5.1
+    "@react-stately/select": ^3.6.2
+    "@react-stately/selection": ^3.14.3
+    "@react-stately/slider": ^3.5.2
+    "@react-stately/table": ^3.11.6
+    "@react-stately/tabs": ^3.6.4
+    "@react-stately/toggle": ^3.7.2
+    "@react-stately/tooltip": ^3.4.7
+    "@react-stately/tree": ^3.7.6
+    "@react-types/shared": ^3.22.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 7622deb1dcc0a7fbedce57cf5f5c2105b172ac9efb082db4134537f577b0fb779c18bcfc7148df04c95b887b1991fc39b5da11b6b02c13b7977468b5a2336416
+  languageName: node
+  linkType: hard
+
 "react-stickup@npm:^1.12.1":
   version: 1.12.1
   resolution: "react-stickup@npm:1.12.1"
@@ -13806,7 +15521,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.5.0, tslib@npm:^2.6.0":
+"tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
@@ -14220,6 +15935,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "use-sync-external-store@npm:1.2.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"