feat: adds checkbox and changes dropdown menu

apps/website/src/components/index.tsx

@@ -1,2 +1,4 @@
 export { Breadcrumbs } from './breadcrumbs/breadcrumbs'
+export { EpicOverview } from './epic-overview'
 export { SideBar } from './side-bar/side-bar'
+export { TableIssues } from './table-issues'

apps/website/src/components/table-issues/filters/filter-author.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+
+import { Avatar, Button, Input, Text } from '@status-im/components'
+import { DropdownMenu } from '@status-im/components/src/dropdown-menu'
+import { DropdownIcon, SearchIcon } from '@status-im/icons'
+
+type Props = {
+  authors: {
+    id: number
+    name: string
+    avatar?: string
+  }[]
+}
+const FilterAuthor = (props: Props) => {
+  const { authors } = props
+
+  const [authorFilterText, setAuthorFilterText] = useState('')
+  const filteredAuthors = authors.filter(author =>
+    author.name.toLowerCase().includes(authorFilterText.toLowerCase())
+  )
+
+  const [selectedAuthors, setSelectedAuthors] = useState<number[]>([])
+
+  return (
+    <div className="pr-3">
+      <DropdownMenu>
+        <Button
+          size={32}
+          variant="outline"
+          iconAfter={<DropdownIcon size={20} />}
+        >
+          Author
+        </Button>
+        <DropdownMenu.Content sideOffset={10} align="end">
+          <div className="p-2 px-1">
+            <Input
+              placeholder="Find Author"
+              icon={<SearchIcon size={20} />}
+              size={32}
+              value={authorFilterText}
+              onChangeText={setAuthorFilterText}
+            />
+          </div>
+          {filteredAuthors.map(author => (
+            <DropdownMenu.CheckboxItem
+              key={author.id}
+              icon={
+                <Avatar
+                  name={author.name}
+                  src={author.avatar}
+                  size={16}
+                  type="user"
+                />
+              }
+              label={author.name}
+              checked={selectedAuthors.includes(author.id)}
+              onSelect={() => {
+                if (selectedAuthors.includes(author.id)) {
+                  setSelectedAuthors(
+                    selectedAuthors.filter(id => id !== author.id)
+                  )
+                } else {
+                  setSelectedAuthors([...selectedAuthors, author.id])
+                }
+              }}
+            />
+          ))}
+          {filteredAuthors.length === 0 && (
+            <div className="p-2 py-1">
+              <Text size={13}> No authors found</Text>
+            </div>
+          )}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+export { FilterAuthor }

apps/website/src/components/table-issues/index.tsx

@@ -0,0 +1 @@
+export { TableIssues } from './table-issues'

apps/website/src/components/table-issues/table-issues.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react'
 
-import { Avatar, Button, Input, Tag, Text } from '@status-im/components'
+import { Avatar, Button, Tag, Text } from '@status-im/components'
-import { DropdownMenu } from '@status-im/components/src/dropdown-menu'
+import { OpenIcon } from '@status-im/icons'
-import { DropdownIcon, OpenIcon, SearchIcon } from '@status-im/icons'
 import Link from 'next/link'
 
+import { FilterAuthor } from './filters/filter-author'
+
 const issues = [
   {
     id: 5154,
@@ -92,11 +93,6 @@ const authors = [
 export const TableIssues = () => {
   const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open')
 
-  const [authorFilterText, setAuthorFilterText] = useState('')
-  const filteredAuthors = authors.filter(author =>
-    author.name.toLowerCase().includes(authorFilterText.toLowerCase())
-  )
-
   return (
     <div className="border-neutral-10  overflow-hidden rounded-2xl border">
       <div className="bg-neutral-5 border-neutral-10 flex border-b p-3">
@@ -123,48 +119,7 @@ export const TableIssues = () => {
         </div>
         <div className="flex-1">
           <div className="flex items-center justify-end">
-            <div className="pr-3">
+            <FilterAuthor authors={authors} />
-              <DropdownMenu>
-                <Button
-                  size={32}
-                  variant="outline"
-                  iconAfter={<DropdownIcon size={20} />}
-                >
-                  Author
-                </Button>
-                <DropdownMenu.Content sideOffset={10} align="end">
-                  <div className="p-2 px-1">
-                    <Input
-                      placeholder="Find Author"
-                      icon={<SearchIcon size={20} />}
-                      size={32}
-                      value={authorFilterText}
-                      onChangeText={setAuthorFilterText}
-                    />
-                  </div>
-                  {filteredAuthors.map(author => (
-                    <DropdownMenu.Item
-                      key={author.id}
-                      icon={
-                        <Avatar
-                          name={author.name}
-                          src={author.avatar}
-                          size={16}
-                          type="user"
-                        />
-                      }
-                      label={author.name}
-                      onSelect={() => alert('Author: ' + author.name)}
-                    />
-                  ))}
-                  {filteredAuthors.length === 0 && (
-                    <div className="p-2 py-1">
-                      <Text size={13}> No authors found</Text>
-                    </div>
-                  )}
-                </DropdownMenu.Content>
-              </DropdownMenu>
-            </div>
             <div className="pr-3">
               <Button size={32} variant="ghost">
                 Filter

apps/website/src/pages/insights/epics/[epic].tsx

@@ -1,6 +1,4 @@
-import { Breadcrumbs } from '@/components'
+import { Breadcrumbs, EpicOverview, TableIssues } from '@/components'
-import { EpicOverview } from '@/components/epic-overview'
-import { TableIssues } from '@/components/table-issues'
 import { InsightsLayout } from '@/layouts/insights-layout'
 
 import type { Page } from 'next'

apps/website/src/pages/insights/orphans.tsx

@@ -1,6 +1,6 @@
 import { Text } from '@status-im/components'
 
-import { TableIssues } from '@/components/table-issues'
+import { TableIssues } from '@/components'
 import { InsightsLayout } from '@/layouts/insights-layout'
 
 import type { Page } from 'next'

apps/website/src/pages/insights/workstreams/[workstream].tsx

@@ -1,6 +1,4 @@
-import { Breadcrumbs } from '@/components'
+import { Breadcrumbs, EpicOverview, TableIssues } from '@/components'
-import { EpicOverview } from '@/components/epic-overview'
-import { TableIssues } from '@/components/table-issues'
 import { InsightsLayout } from '@/layouts/insights-layout'
 
 import type { Page } from 'next'

packages/components/package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-popover": "^1.0.5",

packages/components/src/dropdown-menu/dropdown-menu.tsx

@@ -1,6 +1,7 @@
-import { cloneElement } from 'react'
+import { cloneElement, forwardRef } from 'react'
 
 import {
+  CheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
@@ -8,8 +9,9 @@ import {
   Root,
   Trigger,
 } from '@radix-ui/react-dropdown-menu'
-import { styled } from '@tamagui/core'
+import { Stack, styled } from '@tamagui/core'
 
+import { Checkbox } from '../selectors'
 import { Text } from '../text'
 
 interface Props {
@@ -35,6 +37,7 @@ interface DropdownMenuItemProps {
   icon: React.ReactElement
   label: string
   onSelect: () => void
+  selected?: boolean
   danger?: boolean
 }
 
@@ -54,6 +57,38 @@ const MenuItem = (props: DropdownMenuItemProps) => {
   )
 }
 
+interface DropdownMenuCheckboxItemProps {
+  icon: React.ReactElement
+  label: string
+  onSelect: () => void
+  checked?: boolean
+  danger?: boolean
+}
+
+const DropdownMenuCheckboxItem = forwardRef<
+  HTMLDivElement,
+  DropdownMenuCheckboxItemProps
+>(function _DropdownMenuCheckboxItem(props, forwardedRef) {
+  const { checked, label, icon, onSelect } = props
+
+  const handleSelect = (event: Event) => {
+    event.preventDefault()
+    onSelect()
+  }
+
+  return (
+    <ItemBaseCheckbox {...props} ref={forwardedRef} onSelect={handleSelect}>
+      <Stack flexDirection="row" gap={8} alignItems="center">
+        {cloneElement(icon, { color: '$neutral-50' })}
+        <Text size={15} weight="medium" color="$neutral-100">
+          {label}
+        </Text>
+      </Stack>
+      <Checkbox id={label} selected={checked} variant="outline" />
+    </ItemBaseCheckbox>
+  )
+})
+
 const Content = styled(DropdownMenuContent, {
   name: 'DropdownMenuContent',
   acceptsClassName: true,
@@ -90,6 +125,30 @@ const ItemBase = styled(DropdownMenuItem, {
   },
 })
 
+const ItemBaseCheckbox = styled(CheckboxItem, {
+  name: 'DropdownMenuCheckboxItem',
+  acceptsClassName: true,
+
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+
+  height: 32,
+  paddingHorizontal: 8,
+  borderRadius: '$10',
+  cursor: 'pointer',
+  userSelect: 'none',
+  gap: 8,
+
+  hoverStyle: {
+    backgroundColor: '$neutral-5',
+  },
+
+  pressStyle: {
+    backgroundColor: '$neutral-10',
+  },
+})
+
 const Separator = styled(DropdownMenuSeparator, {
   name: 'DropdownMenuSeparator',
   acceptsClassName: true,
@@ -104,6 +163,7 @@ const Separator = styled(DropdownMenuSeparator, {
 DropdownMenu.Content = Content
 DropdownMenu.Item = MenuItem
 DropdownMenu.Separator = Separator
+DropdownMenu.CheckboxItem = DropdownMenuCheckboxItem
 
 export { DropdownMenu }
 export type DropdownMenuProps = Omit<Props, 'children'>

packages/components/src/selectors/checkbox.stories.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+
+import { Checkbox } from './checkbox'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  argTypes: {},
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=180-9685&t=tDEqIV09qddTZgXF-4',
+    },
+  },
+}
+
+type Story = StoryObj<typeof Checkbox>
+
+const CheckBoxWithHookFilled = () => {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <Checkbox
+      id="checkbox"
+      selected={checked}
+      onCheckedChange={() => setChecked(!checked)}
+      variant="filled"
+    />
+  )
+}
+
+const CheckBoxWithHookOutlined = () => {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <Checkbox
+      id="checkbox"
+      selected={checked}
+      onCheckedChange={() => setChecked(!checked)}
+      variant="outline"
+    />
+  )
+}
+
+export const Filled: Story = {
+  render: () => {
+    return <CheckBoxWithHookFilled />
+  },
+}
+
+export const Outlined: Story = {
+  render: () => {
+    return <CheckBoxWithHookOutlined />
+  },
+}
+
+export default meta

packages/components/src/selectors/checkbox.tsx

@@ -0,0 +1,124 @@
+import { Indicator as _Indicator, Root } from '@radix-ui/react-checkbox'
+import { CheckIcon } from '@status-im/icons'
+import { styled } from '@tamagui/core'
+
+import type { GetVariants } from '../types'
+import type { IconProps } from '@status-im/icons'
+import type { ColorTokens } from '@tamagui/core'
+
+type Variants = GetVariants<typeof Base>
+
+interface Props {
+  selected?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  id: string
+  size?: 32 | 20
+  variant?: Variants['variant']
+}
+
+const iconColor: Record<Variants['variant'], ColorTokens> = {
+  filled: '$neutral-50',
+  outline: '$white-100',
+}
+
+const iconSize: Record<Variants['size'], IconProps['size']> = {
+  32: 20,
+  20: 16,
+}
+
+const Checkbox = (props: Props) => {
+  const { id, selected, onCheckedChange, size = 20, variant = 'filled' } = props
+
+  return (
+    <Base
+      id={id}
+      selected={selected ? variant : undefined}
+      size={size}
+      onCheckedChange={onCheckedChange}
+      variant={variant}
+      checked={selected}
+    >
+      <Indicator>
+        <CheckIcon size={iconSize[size]} color={iconColor[variant]} />
+      </Indicator>
+    </Base>
+  )
+}
+
+export { Checkbox }
+export type { Props as CheckboxProps }
+
+const Base = styled(Root, {
+  name: 'Checkbox',
+  tag: 'span',
+  accessibilityRole: 'checkbox',
+
+  backgroundColor: 'transparent',
+  borderRadius: '$2',
+
+  cursor: 'pointer',
+  animation: 'fast',
+
+  height: 32,
+  width: 32,
+  borderWidth: 1,
+
+  variants: {
+    size: {
+      32: {
+        height: 32,
+        width: 32,
+      },
+      20: {
+        height: 20,
+        width: 20,
+      },
+    },
+    variant: {
+      filled: {
+        backgroundColor: '$neutral-20',
+
+        hoverStyle: { backgroundColor: '$neutral-30' },
+        pressStyle: { backgroundColor: '$neutral-30' },
+      },
+      outline: {
+        borderColor: '$neutral-20',
+
+        hoverStyle: { borderColor: '$neutral-30' },
+        pressStyle: { borderColor: '$neutral-30' },
+      },
+    },
+    selected: {
+      filled: {
+        hoverStyle: { backgroundColor: '$primary-60' },
+        pressStyle: { backgroundColor: '$primary-60' },
+      },
+      outline: {
+        backgroundColor: '$primary-50',
+        borderColor: '$primary-50',
+
+        hoverStyle: {
+          backgroundColor: '$primary-60',
+        },
+        pressStyle: {
+          backgroundColor: '$primary-60',
+        },
+      },
+    },
+
+    disabled: {
+      true: {
+        opacity: 0.3,
+        cursor: 'default',
+      },
+    },
+  } as const,
+})
+
+const Indicator = styled(_Indicator, {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  width: '100%',
+})

packages/components/src/selectors/index.tsx

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox'

yarn.lock

@@ -4160,6 +4160,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
+  integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-accordion@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-accordion/-/react-accordion-1.1.1.tgz#fa1ab1b5c6a29aa75aefaf306a9e72fe3a482dbc"
@@ -4184,6 +4191,21 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.2"
 
+"@radix-ui/react-checkbox@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz#98f22c38d5010dd6df4c5744cac74087e3275f4b"
+  integrity sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
 "@radix-ui/react-collapsible@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.2.tgz#0583470c7caa8cd1ab6f606416288d19b3baf777"
@@ -4217,6 +4239,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-context@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
@@ -4224,6 +4253,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-context@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
+  integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dialog@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.3.tgz#a715bf30f35fcd80476c0a07fcc073c1968e6d3e"
@@ -4405,6 +4441,15 @@
     "@radix-ui/react-compose-refs" "1.0.0"
     "@radix-ui/react-use-layout-effect" "1.0.0"
 
+"@radix-ui/react-presence@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
+  integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-primitive@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz#54e22f49ca59ba88d8143090276d50b93f8a7053"
@@ -4413,6 +4458,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.1"
 
+"@radix-ui/react-primitive@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
+  integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.2"
+
 "@radix-ui/react-roving-focus@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz#0b4f4f9bd509f4510079e9e0734a734fd17cdce3"
@@ -4437,6 +4490,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.0"
 
+"@radix-ui/react-slot@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
 "@radix-ui/react-tabs@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.3.tgz#8b4158160a7c6633c893c74641e929d2708e709a"
@@ -4504,6 +4565,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-callback-ref@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
+  integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-controllable-state@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
@@ -4512,6 +4580,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.0"
 
+"@radix-ui/react-use-controllable-state@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
+  integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
 "@radix-ui/react-use-escape-keydown@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz#09ab6455ab240b4f0a61faf06d4e5132c4d639f6"
@@ -4535,6 +4611,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-layout-effect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
+  integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-previous@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
@@ -4542,6 +4625,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-previous@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66"
+  integrity sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-previous@^0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
@@ -4565,6 +4655,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.0"
 
+"@radix-ui/react-use-size@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
+  integrity sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-visually-hidden@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.2.tgz#29b117a59ef09a984bdad12cb98d81e8350be450"