Migrated the design system to Radix (#20244)

ref DES-331

apps/admin-x-demo/src/ListPage.tsx

@@ -27,7 +27,7 @@ const ListPage = () => {
                     label: 'Open Rate'
                 }
             ]}
-            position="left"
+            position="start"
             onDirectionChange={() => {}}
             onSortChange={() => {}}
         />,

apps/admin-x-design-system/package.json

@@ -31,6 +31,7 @@
     "@storybook/addon-essentials": "7.6.20",
     "@storybook/addon-interactions": "7.6.20",
     "@storybook/addon-links": "7.6.20",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@storybook/addon-styling": "1.3.7",
     "@storybook/blocks": "7.6.20",
     "@storybook/react": "7.6.20",
@@ -60,6 +61,15 @@
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/sortable": "7.0.2",
     "@ebay/nice-modal-react": "1.2.13",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/react": "7.119.0",
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/line-clamp": "0.4.4",

apps/admin-x-design-system/src/assets/icons/hyperlink-circle.svg

@@ -1 +1 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.8640625 16.8684375a4.273125 4.273125 0 0 1 -5.6690625 2.041875h0a4.273125 4.273125 0 0 1 -2.041875 -5.6690625l1.2956249999999998 -2.7534375a4.2721875 4.2721875 0 0 1 5.668125 -2.041875h0a4.2590625 4.2590625 0 0 1 2.3540625 2.9915624999999997" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M11.105625 5.7253125a4.273125 4.273125 0 0 1 5.6690625 -2.041875h0a4.273125 4.273125 0 0 1 2.041875 5.668125l-1.2956249999999998 2.7534375a4.273125 4.273125 0 0 1 -5.6690625 2.041875h0a4.2496875 4.2496875 0 0 1 -2.205 -2.4553125000000002" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" id="Hyperlink-Circle--Streamline-Ultimate" height="20" width="20"><desc>Hyperlink Circle Streamline Icon: https://streamlinehq.com</desc><path d="M10.426416666666666 16.262500000000003C9.295 18.64975 6.448083333333334 19.675166666666666 4.054333333333333 18.55766666666667H4.054333333333333C1.6670833333333335 17.42625 0.6416666666666667 14.579250000000002 1.75925 12.185500000000001L3.2155 9.090583333333333C4.3465 6.7035 7.193166666666667 5.678 9.586583333333333 6.7955000000000005H9.586583333333333C10.948333333333334 7.437916666666666 11.928416666666667 8.6835 12.232583333333334 10.158083333333334" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M9.573916666666667 3.7375000000000003C10.705333333333334 1.3502500000000002 13.552333333333333 0.3248333333333333 15.946083333333334 1.442416666666667H15.946083333333334C18.33275 2.57375 19.358 5.4199166666666665 18.241166666666665 7.813416666666666L16.784833333333335 10.908333333333333C15.653416666666667 13.295583333333335 12.806500000000002 14.321 10.41275 13.203416666666666H10.41275C9.248583333333334 12.654916666666667 8.354916666666668 11.659916666666666 7.934333333333334 10.443666666666667" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>

apps/admin-x-design-system/src/global/Avatar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {ReactComponent as UserIcon} from '../assets/icons/single-user-fill.svg';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
 type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
@@ -44,21 +45,17 @@ const Avatar: React.FC<AvatarProps> = ({image, label, labelColor, bgColor, size,
         break;
     }
 
-    if (image) {
-        return (
-            <img alt="" className={`inline-flex shrink-0 items-center justify-center rounded-full object-cover font-semibold ${avatarSize} ${className && className}`} src={image}/>
-        );
-    } else if (label) {
-        return (
-            <div className={`${labelColor && `text-${labelColor}`} inline-flex items-center justify-center rounded-full p-2 font-semibold ${avatarSize} ${className && className}`} style={bgColor ? {backgroundColor: bgColor} : {}}>{label}</div>
-        );
-    } else {
-        return (
-            <div className={`inline-flex items-center justify-center overflow-hidden rounded-full bg-grey-100 p-1 font-semibold ${avatarSize} ${className && className}`}>
-                <UserIcon className={`${fallbackPosition} h-full w-full  text-grey-300`} />
-            </div>
-        );
-    }
+    return (
+        <AvatarPrimitive.Root className={`relative inline-flex select-none items-center justify-center overflow-hidden rounded-full align-middle ${avatarSize}`}>
+            {image ?
+                <AvatarPrimitive.Image className={`absolute z-20 h-full w-full object-cover ${className && className}`} src={image} /> :
+                <span className={`${labelColor && `text-${labelColor}`} relative z-10 inline-flex h-full w-full items-center justify-center p-2 font-semibold ${className && className}`} style={bgColor ? {backgroundColor: bgColor} : {}}>{label}</span>
+            }
+            <AvatarPrimitive.Fallback asChild>
+                <UserIcon className={`${fallbackPosition} absolute z-0 h-full w-full text-grey-300`} />
+            </AvatarPrimitive.Fallback>
+        </AvatarPrimitive.Root>
+    );
 };
 
 export default Avatar;

apps/admin-x-design-system/src/global/Button.tsx

@@ -30,7 +30,7 @@ export interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, 'label'
     testId?: string;
 }
 
-const Button: React.FC<ButtonProps> = ({
+const Button: React.FC<ButtonProps> = React.forwardRef(({
     testId,
     size = 'md',
     label = '',
@@ -51,7 +51,7 @@ const Button: React.FC<ButtonProps> = ({
     outlineOnMobile = false,
     onClick,
     ...props
-}) => {
+}, ref) => {
     if (!color) {
         color = 'clear';
     }
@@ -155,9 +155,12 @@ const Button: React.FC<ButtonProps> = ({
         disabled: disabled,
         type: 'button',
         onClick: onClick,
+        ref: ref,
         ...props}, buttonChildren);
 
     return buttonElement;
-};
+});
+
+Button.displayName = 'Button';
 
 export default Button;

apps/admin-x-design-system/src/global/Menu.stories.tsx

@@ -24,7 +24,7 @@ export const Default: Story = {
     args: {
         trigger: <Button color='black' label="Click"></Button>,
         items: items,
-        position: 'left'
+        position: 'start'
     },
     decorators: [
         ThisStory => (
@@ -37,7 +37,7 @@ export const Right: Story = {
     args: {
         trigger: <Button color='black' label="Click"></Button>,
         items: items,
-        position: 'right'
+        position: 'end'
     },
     decorators: [
         ThisStory => (

apps/admin-x-design-system/src/global/Menu.tsx

@@ -20,7 +20,7 @@ const Menu: React.FC<MenuProps> = ({
     trigger,
     triggerButtonProps,
     items,
-    position = 'left'
+    position = 'start'
 }) => {
     if (!trigger) {
         trigger = <Button icon='ellipsis' label='Menu' hideLabel {...triggerButtonProps} />;

apps/admin-x-design-system/src/global/Popover.stories.tsx

@@ -32,3 +32,46 @@ export const Default: Story = {
         )
     }
 };
+
+export const CenterAlign: Story = {
+    args: {
+        position: 'center',
+        trigger: (
+            <Button color='grey' label='Open popover' />
+        ),
+        children: (
+            <div className='p-5 text-sm' style={{maxWidth: '320px'}}>
+                This is a popover. You can put anything in it. The styling of the content defines how it will look at the end.
+            </div>
+        )
+    }
+};
+
+export const RightAlign: Story = {
+    args: {
+        position: 'end',
+        trigger: (
+            <Button color='grey' label='Open popover' />
+        ),
+        children: (
+            <div className='p-5 text-sm' style={{maxWidth: '320px'}}>
+                This is a popover. You can put anything in it. The styling of the content defines how it will look at the end.
+            </div>
+        )
+    }
+};
+
+export const DismissOnClick: Story = {
+    args: {
+        position: 'start',
+        trigger: (
+            <Button color='grey' label='Open popover' />
+        ),
+        children: (
+            <div className='p-5 text-sm' style={{maxWidth: '320px'}}>
+                Click here to close the popover.
+            </div>
+        ),
+        closeOnItemClick: true
+    }
+};

apps/admin-x-design-system/src/global/Popover.tsx

@@ -1,8 +1,7 @@
-import clsx from 'clsx';
-import React, {useRef, useState} from 'react';
-import {createPortal} from 'react-dom';
+import React, {useState} from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-export type PopoverPosition = 'left' | 'right';
+export type PopoverPosition = 'center' | 'end' | 'start' | undefined;
 
 export interface PopoverProps {
     trigger: React.ReactNode;
@@ -11,55 +10,13 @@ export interface PopoverProps {
     closeOnItemClick?: boolean;
 }
 
-const getOffsetPosition = (element: HTMLDivElement | null) => {
-    // innerZoomElementWrapper fixes weird behaviour in Storybook - the preview container
-    // uses transform which changes how position:fixed works and means getBoundingClientRect
-    // won't return the right position
-    return element?.closest('.innerZoomElementWrapper')?.getBoundingClientRect() || {x: 0, y: 0};
-};
-
 const Popover: React.FC<PopoverProps> = ({
     trigger,
     children,
-    position = 'left',
+    position = 'start',
     closeOnItemClick
 }) => {
     const [open, setOpen] = useState(false);
-    const [positionX, setPositionX] = useState(0);
-    const [positionY, setPositionY] = useState(0);
-    const triggerRef = useRef<HTMLDivElement | null>(null);
-
-    const handleTriggerClick = () => {
-        if (!open && triggerRef.current) {
-            const parentRect = getOffsetPosition(triggerRef.current);
-            const {x, y, width, height} = triggerRef.current.getBoundingClientRect();
-            const relativeX = x - parentRect.x;
-            const relativeY = y - parentRect.y;
-
-            const finalX = (position === 'left') ? relativeX : window.innerWidth - (relativeX + width);
-            setOpen(true);
-            setPositionX(finalX);
-            setPositionY(relativeY + height);
-        } else {
-            setOpen(false);
-        }
-    };
-
-    const style: React.CSSProperties = {
-        top: `${positionY}px`
-    };
-
-    if (position === 'left') {
-        style.left = `${positionX}px`;
-    } else {
-        style.right = `${positionX}px`;
-    }
-
-    const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        if (e.target === e.currentTarget) {
-            setOpen(false);
-        }
-    };
 
     const handleContentClick = () => {
         if (closeOnItemClick) {
@@ -67,30 +24,17 @@ const Popover: React.FC<PopoverProps> = ({
         }
     };
 
-    let className = '';
-
-    className = clsx(
-        'fixed z-50 mt-2 origin-top-right rounded bg-white shadow-md ring-1 ring-[rgba(0,0,0,0.01)] focus:outline-none dark:bg-grey-900 dark:text-white',
-        className
-    );
-
-    const backdropClasses = clsx(
-        'fixed inset-0 z-40',
-        open ? 'block' : 'hidden'
-    );
-
     return (
-        <>
-            <div ref={triggerRef} onClick={handleTriggerClick}>
-                {trigger}
-            </div>
-            {open && createPortal(<div className='fixed z-[9999] inline-block' onClick={handleContentClick}>
-                <div className={backdropClasses} data-testid="popover-overlay" onClick={handleBackdropClick}></div>
-                <div className={className} data-testid='popover-content' style={style}>
-                    {children}
-                </div>
-            </div>, triggerRef.current?.closest('.admin-x-base') || document.body)}
-        </>
+        <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+            <PopoverPrimitive.Anchor asChild>
+                <PopoverPrimitive.Trigger asChild>
+                    {trigger}
+                </PopoverPrimitive.Trigger>
+            </PopoverPrimitive.Anchor>
+            <PopoverPrimitive.Content align={position} className="z-50 mt-2 origin-top-right rounded bg-white shadow-md ring-1 ring-[rgba(0,0,0,0.01)] focus:outline-none dark:bg-grey-900 dark:text-white" data-testid='popover-content' side="bottom" onClick={handleContentClick}>
+                {children}
+            </PopoverPrimitive.Content>
+        </PopoverPrimitive.Root>
     );
 };
 

apps/admin-x-design-system/src/global/Separator.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
 export interface SeparatorProps {
     className?: string;
@@ -8,7 +9,11 @@ const Separator: React.FC<SeparatorProps> = ({className}) => {
     if (!className) {
         className = 'border-grey-200 dark:border-grey-800';
     }
-    return <hr className={className} />;
+    return (
+        <SeparatorPrimitive.Root asChild decorative>
+            <hr className={className} />
+        </SeparatorPrimitive.Root>
+    );
 };
 
 export default Separator;

apps/admin-x-design-system/src/global/SortMenu.tsx

@@ -29,7 +29,7 @@ const SortMenu: React.FC<SortMenuProps> = ({
     onDirectionChange,
     trigger,
     triggerButtonProps,
-    position = 'left'
+    position = 'start'
 }) => {
     const [localItems, setLocalItems] = useState<SortItem[]>(items);
     const [localDirection, setLocalDirection] = useState<SortDirection>(direction || 'desc');

apps/admin-x-design-system/src/global/TabView.stories.tsx

@@ -29,6 +29,12 @@ const tabs = [
     {id: 'tab-6', title: 'Backstreet boys', contents: <div className='py-5'>Contents three</div>}
 ];
 
+const tabsWithIcons = [
+    {id: 'tab-1', title: 'Some items', icon: 'at-sign', contents: <div className='py-5'>Contents one</div>},
+    {id: 'tab-2', title: 'Lots of items', icon: 'hamburger', contents: <div className='py-5'>Contents two</div>},
+    {id: 'tab-3', title: 'No items', icon: 'laptop', contents: <div className='py-5'>Contents three</div>}
+];
+
 const tabsWithCounters = [
     {id: 'tab-1', title: 'Some items', counter: 4, contents: <div className='py-5'>Contents one</div>},
     {id: 'tab-2', title: 'Lots of items', counter: 12, contents: <div className='py-5'>Contents two</div>},
@@ -49,6 +55,12 @@ export const NoBorder: Story = {
     }
 };
 
+export const WithIcon: Story = {
+    args: {
+        tabs: tabsWithIcons
+    }
+};
+
 export const WithCounter: Story = {
     args: {
         tabs: tabsWithCounters

apps/admin-x-design-system/src/global/TabView.tsx

@@ -1,9 +1,12 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 import clsx from 'clsx';
 import React from 'react';
+import Icon from './Icon';
 
 export type Tab<ID = string> = {
     id: ID;
     title: string;
+    icon?: string;
     counter?: number | null;
     tabWrapperClassName?: string;
     containerClassName?: string;
@@ -20,8 +23,8 @@ export interface TabButtonProps<ID = string> {
     id: ID,
     title: string;
     onClick?: (e:React.MouseEvent<HTMLButtonElement>) => void;
-    selected: boolean;
     border?: boolean;
+    icon?: string;
     counter?: number | null;
 }
 
@@ -29,29 +32,26 @@ export const TabButton: React.FC<TabButtonProps> = ({
     id,
     title,
     onClick,
-    selected,
     border,
+    icon,
     counter
 }) => {
     return (
-        <button
-            key={id}
-            aria-selected={selected}
+        <TabsPrimitive.Trigger
             className={clsx(
-                '-m-b-px cursor-pointer appearance-none whitespace-nowrap py-1 text-sm transition-all after:invisible after:block after:h-px after:overflow-hidden after:font-bold after:text-transparent after:content-[attr(title)] dark:text-white',
-                border && 'border-b-[3px]',
-                selected && border ? 'border-black dark:border-white' : 'border-transparent hover:border-grey-500',
-                selected && 'font-bold'
+                '-m-b-px cursor-pointer appearance-none whitespace-nowrap py-1 text-md font-medium text-grey-700 transition-all after:invisible after:block after:h-px after:overflow-hidden after:font-bold after:text-transparent after:content-[attr(title)] data-[state=active]:font-bold data-[state=active]:text-black dark:text-white [&>span]:data-[state=active]:text-black',
+                border && 'border-b-2 border-transparent hover:border-grey-500 data-[state=active]:border-black data-[state=active]:dark:border-white'
             )}
             id={id}
             role='tab'
             title={title}
-            type="button"
+            value={id}
             onClick={onClick}
         >
+            {icon && <Icon className='mb-0.5 mr-1.5 inline' name={icon} size='sm' />}
             {title}
-            {(typeof counter === 'number') && <span className='ml-1.5 rounded-full bg-grey-200 px-1.5 py-[2px] text-xs font-normal text-grey-800 dark:bg-grey-900 dark:text-grey-300'>{counter}</span>}
-        </button>
+            {(typeof counter === 'number') && <span className='ml-1.5 rounded-full bg-grey-200 px-1.5 py-[2px] text-xs font-medium text-grey-800 dark:bg-grey-900 dark:text-grey-300'>{counter}</span>}
+        </TabsPrimitive.Trigger>
     );
 };
 
@@ -71,7 +71,6 @@ export const TabList: React.FC<TabListProps> = ({
     handleTabChange,
     border,
     buttonBorder,
-    selectedTab,
     topRightContent
 }) => {
     const containerClasses = clsx(
@@ -82,24 +81,26 @@ export const TabList: React.FC<TabListProps> = ({
         border && 'border-b border-grey-300 dark:border-grey-900'
     );
     return (
-        <div className={containerClasses} role='tablist'>
-            {tabs.map(tab => (
-                <div>
-                    <TabButton
-                        border={buttonBorder}
-                        counter={tab.counter}
-                        id={tab.id}
-                        selected={selectedTab === tab.id}
-                        title={tab.title}
-                        onClick={handleTabChange}
-                    />
-                </div>
-            ))}
-            {topRightContent !== null ?
-                <div className='ml-auto'>{topRightContent}</div> :
-                null
-            }
-        </div>
+        <TabsPrimitive.List>
+            <div className={containerClasses} role='tablist'>
+                {tabs.map(tab => (
+                    <div>
+                        <TabButton
+                            border={buttonBorder}
+                            counter={tab.counter}
+                            icon={tab.icon}
+                            id={tab.id}
+                            title={tab.title}
+                            onClick={handleTabChange}
+                        />
+                    </div>
+                ))}
+                {topRightContent !== null ?
+                    <div className='ml-auto'>{topRightContent}</div> :
+                    null
+                }
+            </div>
+        </TabsPrimitive.List>
     );
 };
 
@@ -140,7 +141,7 @@ function TabView<ID extends string = string>({
     };
 
     return (
-        <section className={containerClassName} data-testid={testId}>
+        <TabsPrimitive.Root className={containerClassName} data-testid={testId} value={selectedTab}>
             <TabList
                 border={border}
                 buttonBorder={buttonBorder}
@@ -152,16 +153,12 @@ function TabView<ID extends string = string>({
             />
             {tabs.map((tab) => {
                 return (
-                    <>
-                        {tab.contents &&
-                            <div key={tab.id} className={`${selectedTab === tab.id ? 'block' : 'hidden'} ${tab.tabWrapperClassName}`} role='tabpanel'>
-                                <div className={tab.containerClassName}>{tab.contents}</div>
-                            </div>
-                        }
-                    </>
+                    <TabsPrimitive.Content className={tab.tabWrapperClassName} value={tab.id}>
+                        <div className={tab.containerClassName}>{tab.contents}</div>
+                    </TabsPrimitive.Content>
                 );
             })}
-        </section>
+        </TabsPrimitive.Root>
     );
 };
 

apps/admin-x-design-system/src/global/Tooltip.stories.tsx

@@ -36,7 +36,7 @@ export const Left: Story = {
     args: {
         content: 'Hello tooltip on the left',
         children: <Button color='outline' label="Hover me" />,
-        origin: 'left'
+        origin: 'start'
     }
 };
 
@@ -52,7 +52,7 @@ export const Right: Story = {
     args: {
         content: 'Hello right tooltip',
         children: <Button color='outline' label="Hover me" />,
-        origin: 'right'
+        origin: 'end'
     }
 };
 
@@ -61,7 +61,7 @@ export const Long: Story = {
         content: `You're the best evil son an evil dad could ever ask for.`,
         children: <Button color='outline' label="Hover me" />,
         size: 'md',
-        origin: 'left'
+        origin: 'start'
     }
 };
 
@@ -71,4 +71,4 @@ export const OnText: Story = {
         children: 'Just hover me',
         origin: 'center'
     }
-};
+};

apps/admin-x-design-system/src/global/Tooltip.tsx

@@ -1,3 +1,4 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -7,29 +8,32 @@ export interface TooltipProps {
     children?: React.ReactNode;
     containerClassName?: string;
     tooltipClassName?: string;
-    origin?: 'right' | 'center' | 'left'
+    origin?: 'start' | 'center' | 'end'
 }
 
 const Tooltip: React.FC<TooltipProps> = ({content, size = 'sm', children, containerClassName, tooltipClassName, origin = 'center'}) => {
     containerClassName = clsx(
-        'group/tooltip relative',
+        'will-change-[opacity]',
         containerClassName
     );
 
     tooltipClassName = clsx(
-        'absolute -mt-1 -translate-y-full whitespace-nowrap rounded-sm bg-black px-2 py-0.5 leading-normal text-white opacity-0 transition-all group-hover/tooltip:opacity-100 dark:bg-grey-950',
+        'select-none rounded-sm bg-black px-2 py-0.5 leading-normal text-white will-change-[transform,opacity]',
         size === 'sm' && 'text-xs',
-        size === 'md' && 'text-sm',
-        origin === 'center' && 'left-1/2 -translate-x-1/2',
-        origin === 'left' && 'left-0',
-        origin === 'right' && 'right-0'
+        size === 'md' && 'text-sm'
     );
 
     return (
-        <span className={containerClassName}>
-            {children}
-            <span className={tooltipClassName}>{content}</span>
-        </span>
+        <TooltipPrimitive.Provider delayDuration={0}>
+            <TooltipPrimitive.Root>
+                <TooltipPrimitive.Trigger className={containerClassName} onClick={event => event.preventDefault()}>
+                    {children}
+                </TooltipPrimitive.Trigger>
+                <TooltipPrimitive.Content align={origin} className={tooltipClassName} sideOffset={4} onPointerDownOutside={event => event.preventDefault()}>
+                    {content}
+                </TooltipPrimitive.Content>
+            </TooltipPrimitive.Root>
+        </TooltipPrimitive.Provider>
     );
 };
 

apps/admin-x-design-system/src/global/form/Checkbox.tsx

@@ -1,6 +1,7 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import Heading from '../Heading';
 import Hint from '../Hint';
-import React, {useEffect, useId, useState} from 'react';
+import React, {useId} from 'react';
 import Separator from '../Separator';
 
 export interface CheckboxProps {
@@ -18,16 +19,9 @@ export interface CheckboxProps {
 
 const Checkbox: React.FC<CheckboxProps> = ({title, label, value, onChange, disabled, error, hint, checked, separator}) => {
     const id = useId();
-    const [isChecked, setIsChecked] = useState(checked);
 
-    useEffect(() => {
-        setIsChecked(checked);
-    }, [checked]);
-
-    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const checkedValue = event.target.checked;
-        setIsChecked(checkedValue);
-        onChange(checkedValue);
+    const handleCheckedChange = (isChecked: boolean | 'indeterminate') => {
+        onChange(isChecked === true);
     };
 
     return (
@@ -35,15 +29,13 @@ const Checkbox: React.FC<CheckboxProps> = ({title, label, value, onChange, disab
             <div className={`flex flex-col gap-1 ${separator && 'pb-2'}`}>
                 {title && <Heading grey={true} level={6}>{title}</Heading>}
                 <label className={`flex cursor-pointer items-start ${title && '-mb-1 mt-1'}`} htmlFor={id}>
-                    <input
-                        checked={isChecked}
-                        className="relative float-left mt-[3px] h-4 w-4 appearance-none border-2 border-solid border-grey-200 bg-grey-200 outline-none checked:border-black checked:bg-black checked:after:absolute checked:after:-mt-px checked:after:ml-[3px] checked:after:block checked:after:h-[11px] checked:after:w-[6px] checked:after:rotate-45 checked:after:border-[2px] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer focus:shadow-none focus:transition-[border-color_0.2s] dark:border-grey-800 dark:bg-grey-800 dark:checked:border-green dark:checked:bg-green"
-                        disabled={disabled}
-                        id={id}
-                        type='checkbox'
-                        value={value}
-                        onChange={handleOnChange}
-                    />
+                    <CheckboxPrimitive.Root className="mt-0.5 flex h-4 w-4 cursor-pointer appearance-none items-center justify-center rounded-[3px] border border-solid border-grey-500 bg-white outline-none data-[state=checked]:border-black data-[state=indeterminate]:border-black data-[state=checked]:bg-black data-[state=indeterminate]:bg-black" defaultChecked={checked} disabled={disabled} id={id} value={value} onCheckedChange={handleCheckedChange}>
+                        <CheckboxPrimitive.Indicator>
+                            <svg fill="none" height="11" viewBox="0 0 10 11" width="10">
+                                <path d="M1 5.88889L4.6 9L9 1" stroke="white" strokeLinecap="round" strokeWidth="2"/>
+                            </svg>
+                        </CheckboxPrimitive.Indicator>
+                    </CheckboxPrimitive.Root>
                     <div className={`ml-2 flex flex-col ${hint && 'mb-2'}`}>
                         <span className={`inline-block text-[1.425rem] dark:text-white ${hint && '-mb-1'}`}>{label}</span>
                         {hint && <Hint color={error ? 'red' : ''}>{hint}</Hint>}

apps/admin-x-design-system/src/global/form/Radio.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Heading from '../Heading';
 import Hint from '../Hint';
 import Separator from '../Separator';
+import * as RadioPrimitive from '@radix-ui/react-radio-group';
 
 export interface RadioOption {
     value: string;
@@ -21,25 +22,15 @@ export interface RadioProps {
 }
 
 const Radio: React.FC<RadioProps> = ({id, title, options, onSelect, error, hint, selectedOption, separator}) => {
-    const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        onSelect(event.target.value);
-    };
-
     return (
-        <div>
+        <RadioPrimitive.Root defaultValue={selectedOption} name={id} onValueChange={onSelect}>
             <div className={`flex flex-col gap-2 ${separator && 'pb-2'}`}>
                 {title && <Heading level={6}>{title}</Heading>}
                 {options.map(option => (
                     <label key={option.value} className={`flex cursor-pointer items-start ${title && '-mb-1 mt-1'}`} htmlFor={option.value}>
-                        <input
-                            checked={selectedOption === option.value}
-                            className="relative float-left mt-[3px] h-4 w-4 min-w-[16px] appearance-none rounded-full border-2 border-solid border-grey-300 after:absolute after:z-[1] after:block after:h-3 after:w-3 after:rounded-full after:content-[''] checked:border-green checked:after:absolute checked:after:left-1/2 checked:after:top-1/2 checked:after:h-[0.625rem] checked:after:w-[0.625rem] checked:after:rounded-full checked:after:border-green checked:after:bg-green checked:after:content-[''] checked:after:[transform:translate(-50%,-50%)] hover:cursor-pointer focus:shadow-none focus:outline-none focus:ring-0 checked:focus:border-green dark:border-grey-800 dark:text-white dark:checked:border-green dark:checked:after:border-green dark:checked:after:bg-green dark:checked:focus:border-green"
-                            id={option.value}
-                            name={id}
-                            type='radio'
-                            value={option.value}
-                            onChange={handleOptionChange}
-                        />
+                        <RadioPrimitive.Item className="relative float-left mt-[3px] h-4 w-4 min-w-[16px] appearance-none rounded-full border-2 border-solid border-grey-300 hover:cursor-pointer focus:shadow-none focus:outline-none focus:ring-0 data-[state=checked]:border-green data-[state=checked]:focus:border-green dark:border-grey-800 dark:text-white dark:data-[state=checked]:border-green dark:data-[state=checked]:focus:border-green" id={option.value} value={option.value}>
+                            <RadioPrimitive.Indicator className="flex h-full w-full items-center justify-center after:block after:h-[6px] after:w-[6px] after:rounded-full after:border-green after:bg-green after:content-[''] dark:after:border-green dark:after:bg-green" />
+                        </RadioPrimitive.Item>
                         <div className={`ml-2 flex flex-col ${option.hint && 'mb-2'}`}>
                             <span className={`inline-block text-md dark:text-white ${option.hint && '-mb-1'}`}>{option.label}</span>
                             {option.hint && <Hint>{option.hint}</Hint>}
@@ -49,7 +40,7 @@ const Radio: React.FC<RadioProps> = ({id, title, options, onSelect, error, hint,
                 {hint && <Hint color={error ? 'red' : ''}>{hint}</Hint>}
             </div>
             {(separator || error) && <Separator className={error ? 'border-red' : ''} />}
-        </div>
+        </RadioPrimitive.Root>
     );
 };
 

apps/admin-x-design-system/src/global/form/TextArea.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import {useFocusContext} from '../../providers/DesignSystemProvider';
 import Heading from '../Heading';
 import Hint from '../Hint';
+import * as FormPrimitive from '@radix-ui/react-form';
 
 type ResizeOptions = 'both' | 'vertical' | 'horizontal' | 'none';
 type FontStyles = 'sans' | 'mono';
@@ -80,23 +81,29 @@ const TextArea: React.FC<TextAreaProps> = ({
     }
 
     return (
-        <div className='flex flex-col'>
-            <textarea
-                ref={inputRef}
-                className={styles}
-                id={id}
-                maxLength={maxLength}
-                placeholder={placeholder}
-                rows={rows}
-                value={value}
-                onBlur={handleBlur}
-                onChange={onChange}
-                onFocus={handleFocus}
-                {...props}>
-            </textarea>
-            {title && <Heading className={'order-1'} htmlFor={id} useLabelTag={true}>{title}</Heading>}
-            {hint && <Hint className='order-3' color={error ? 'red' : ''}>{hint}</Hint>}
-        </div>
+        <FormPrimitive.Root asChild>
+            <div className='flex flex-col'>
+                <FormPrimitive.Field name={id} asChild>
+                    <FormPrimitive.Control asChild>
+                        <textarea
+                            ref={inputRef}
+                            className={styles}
+                            id={id}
+                            maxLength={maxLength}
+                            placeholder={placeholder}
+                            rows={rows}
+                            value={value}
+                            onBlur={handleBlur}
+                            onChange={onChange}
+                            onFocus={handleFocus}
+                            {...props}>
+                        </textarea>
+                    </FormPrimitive.Control>
+                </FormPrimitive.Field>
+                {title && <Heading className={'order-1'} htmlFor={id} useLabelTag={true}>{title}</Heading>}
+                {hint && <Hint className='order-3' color={error ? 'red' : ''}>{hint}</Hint>}
+            </div>
+        </FormPrimitive.Root>
     );
 };
 

apps/admin-x-design-system/src/global/form/TextField.tsx

@@ -3,6 +3,7 @@ import Hint from '../Hint';
 import React, {FocusEventHandler, useId} from 'react';
 import clsx from 'clsx';
 import {useFocusContext} from '../../providers/DesignSystemProvider';
+import * as FormPrimitive from '@radix-ui/react-form';
 
 export type TextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     inputRef?: React.RefObject<HTMLInputElement>;
@@ -105,11 +106,15 @@ const TextField: React.FC<TextFieldProps> = ({
         {...props} />;
 
     field = (
-        <div className={fieldContainerClasses}>
-            {inputField}
-            {!unstyled && !clearBg && <div className={bgClasses ? bgClasses : ''}></div>}
-            {rightPlaceholder && <span className={rightPlaceholderClasses || ''}>{rightPlaceholder}</span>}
-        </div>
+        <FormPrimitive.Field name={id} asChild>
+            <FormPrimitive.Control asChild>
+                <div className={fieldContainerClasses}>
+                    {inputField}
+                    {!unstyled && !clearBg && <div className={bgClasses ? bgClasses : ''}></div>}
+                    {rightPlaceholder && <span className={rightPlaceholderClasses || ''}>{rightPlaceholder}</span>}
+                </div>
+            </FormPrimitive.Control>
+        </FormPrimitive.Field>
     );
 
     hintClassName = clsx(
@@ -124,14 +129,20 @@ const TextField: React.FC<TextFieldProps> = ({
 
     if (title || hint) {
         return (
-            <div className={containerClassName}>
-                {field}
-                {title && <Heading className={hideTitle ? 'sr-only' : 'order-1'} htmlFor={id} useLabelTag={true}>{title}</Heading>}
-                {hint && <Hint className={hintClassName} color={error ? 'red' : 'default'}>{hint}</Hint>}
-            </div>
+            <FormPrimitive.Root asChild>
+                <div className={containerClassName}>
+                    {field}
+                    {title && <Heading className={hideTitle ? 'sr-only' : 'order-1'} htmlFor={id} useLabelTag={true}>{title}</Heading>}
+                    {hint && <Hint className={hintClassName} color={error ? 'red' : 'default'}>{hint}</Hint>}
+                </div>
+            </FormPrimitive.Root>
         );
     } else {
-        return (field);
+        return (
+            <FormPrimitive.Root asChild>
+                {field}
+            </FormPrimitive.Root>
+        );
     }
 };
 

apps/admin-x-design-system/src/global/form/Toggle.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React, {useId} from 'react';
 import {Heading6StylesGrey} from '../Heading';
 import Separator from '../Separator';
+import * as TogglePrimitive from '@radix-ui/react-switch';
 
 type ToggleSizes = 'sm' | 'md' | 'lg';
 export type ToggleDirections = 'ltr' | 'rtl';
@@ -40,20 +41,24 @@ const Toggle: React.FC<ToggleProps> = ({
     const id = useId();
 
     let sizeStyles = '';
+    let thumbSizeStyles = '';
     let labelStyles = '';
     switch (size) {
     case 'sm':
-        sizeStyles = ' h-3 w-5 after:h-2 after:w-2 checked:after:ml-[1.0rem]';
+        sizeStyles = ' h-3 w-5';
+        thumbSizeStyles = ' h-2 w-2 data-[state=checked]:translate-x-[10px]';
         labelStyles = 'mt-[-5.5px]';
         break;
 
     case 'lg':
-        sizeStyles = ' h-5 w-8 after:h-4 after:w-4 checked:after:ml-[1.4rem]';
+        sizeStyles = ' h-5 w-8';
+        thumbSizeStyles = ' h-4 w-4 data-[state=checked]:translate-x-[14px]';
         labelStyles = 'mt-[-1px]';
         break;
 
     default:
-        sizeStyles = ' min-w-[28px] h-4 w-7 after:h-3 after:w-3 checked:after:ml-[1.4rem]';
+        sizeStyles = ' min-w-[28px] h-4 w-7';
+        thumbSizeStyles = ' h-3 w-3 data-[state=checked]:translate-x-[14px]';
         labelStyles = 'mt-[-3px]';
         break;
     }
@@ -70,37 +75,42 @@ const Toggle: React.FC<ToggleProps> = ({
     let toggleBgClass;
     switch (toggleBg) {
     case 'stripetest':
-        toggleBgClass = 'checked:bg-[#EC6803] dark:checked:bg-[#EC6803]';
+        toggleBgClass = 'data-[state=checked]:bg-[#EC6803] dark:data-[state=checked]:bg-[#EC6803]';
         break;
 
     case 'green':
-        toggleBgClass = 'checked:bg-green';
+        toggleBgClass = 'data-[state=checked]:bg-green';
         break;
 
     default:
-        toggleBgClass = 'checked:bg-black dark:checked:bg-green';
+        toggleBgClass = 'data-[state=checked]:bg-black dark:data-[state=checked]:bg-green';
         break;
     }
 
+    const handleCheckedChange = (isChecked: boolean) => {
+        if (onChange) {
+            const event = {
+                target: {checked: isChecked}
+            } as React.ChangeEvent<HTMLInputElement>;
+            onChange(event);
+        }
+    };
+
     return (
         <div>
             <div className={`group flex items-start gap-2 dark:text-white ${direction === 'rtl' && 'justify-between'} ${separator && 'pb-2'}`}>
-                <input checked={checked}
-                    className={clsx(
-                        toggleBgClass,
-                        'appearance-none rounded-full bg-grey-300 transition dark:bg-grey-800',
-                        `after:absolute after:ml-0.5 after:mt-0.5 after:rounded-full after:border-none after:bg-white after:transition-[background-color_0.2s,transform_0.2s] after:content-['']`,
-                        `checked:after:absolute checked:after:rounded-full checked:after:border-none checked:after:bg-white checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-['']`,
-                        'enabled:hover:cursor-pointer disabled:opacity-40 enabled:group-hover:opacity-80',
-                        sizeStyles,
-                        direction === 'rtl' && ' order-2'
-                    )}
-                    disabled={disabled}
-                    id={id}
-                    name={name}
-                    role="switch"
-                    type="checkbox"
-                    onChange={onChange} />
+                <TogglePrimitive.Root className={clsx(
+                    toggleBgClass,
+                    'appearance-none rounded-full bg-grey-300 transition duration-100 dark:bg-grey-800',
+                    'enabled:hover:cursor-pointer disabled:opacity-40 enabled:group-hover:opacity-80',
+                    sizeStyles,
+                    direction === 'rtl' && ' order-2'
+                )} defaultChecked={checked} disabled={disabled} id={id} name={name} onCheckedChange={handleCheckedChange}>
+                    <TogglePrimitive.Thumb className={clsx(
+                        thumbSizeStyles,
+                        'block translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform'
+                    )} />
+                </TogglePrimitive.Root>
                 {label &&
                     <label className={`flex grow flex-col hover:cursor-pointer ${direction === 'rtl' && 'order-1'} ${labelStyles}`} htmlFor={id}>
                         {

apps/admin-x-design-system/src/global/modal/Modal.tsx

@@ -214,7 +214,7 @@ const Modal: React.FC<ModalProps> = ({
     if (stickyHeader) {
         headerClasses = clsx(
             headerClasses,
-            'sticky top-0 z-[200] -mb-4 bg-white !pb-4 dark:bg-black'
+            'sticky top-0 z-[300] -mb-4 bg-white !pb-4 dark:bg-black'
         );
     }
 

apps/admin-x-settings/src/components/settings/advanced/HistoryModal.tsx

@@ -77,7 +77,7 @@ const HistoryFilter: React.FC<{
 
     return (
         <div className='flex items-center gap-4'>
-            <Popover position='right' trigger={<Button color='outline' label='Filter' size='sm' />}>
+            <Popover position='end' trigger={<Button color='outline' label='Filter' size='sm' />}>
                 <div className='flex w-[220px] flex-col gap-8 p-5'>
                     <ToggleGroup>
                         <HistoryFilterToggle excludedItems={excludedEvents} item='added' label='Added' toggleItem={toggleEventType} />

apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx

@@ -85,7 +85,7 @@ export interface UserDetailProps {
     clearError: (key: keyof User) => void;
 }
 
-const UserMenuTrigger = () => (
+const UserMenuTrigger = (
     <button className='flex h-8 cursor-pointer items-center justify-center rounded bg-[rgba(0,0,0,0.75)] px-3 opacity-80 hover:opacity-100' type='button'>
         <span className='sr-only'>Actions</span>
         <Icon colorClass='text-white' name='ellipsis' size='md' />
@@ -435,7 +435,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
                                 }}
                             >Upload cover image</ImageUpload>
                             {showMenu && <div className="z-10">
-                                <Menu items={menuItems} position='right' trigger={<UserMenuTrigger />}></Menu>
+                                <Menu items={menuItems} position='end' trigger={UserMenuTrigger} />
                             </div>}
                         </div>
                     </div>

apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx

@@ -87,7 +87,7 @@ export const CopyLinkButton: React.FC<{offerCode: string}> = ({offerCode}) => {
         setTimeout(() => setIsCopied(false), 2000);
     };
 
-    return <Tooltip containerClassName='group-hover:opacity-100 opacity-0 inline-flex items-center -mr-1 justify-center leading-none w-5 h-5' content={isCopied ? 'Copied' : 'Copy link'} size='sm'><Button color='clear' hideLabel={true} icon={isCopied ? 'check-circle' : 'hyperlink-circle'} iconColorClass={isCopied ? 'text-green w-[14px] h-[14px]' : 'w-[18px] h-[18px]'} label={isCopied ? 'Copied' : 'Copy'} unstyled={true} onClick={handleCopyClick} /></Tooltip>;
+    return <Tooltip containerClassName='group-hover:opacity-100 opacity-0 inline-flex items-center -mr-1 justify-center leading-none w-5 h-5' content={isCopied ? 'Copied' : 'Copy link'} size='sm'><Button color='clear' hideLabel={true} icon={isCopied ? 'check-circle' : 'hyperlink-circle'} iconColorClass={isCopied ? 'text-green w-[14px] h-[14px]' : 'w-[14px] h-[14px]'} label={isCopied ? 'Copied' : 'Copy'} unstyled={true} onClick={handleCopyClick} /></Tooltip>;
 };
 
 export const EmptyState: React.FC<{title?: string, description: string, buttonAction: () => void, buttonLabel: string}> = ({title = 'No offers found', description, buttonAction, buttonLabel}) => (
@@ -252,7 +252,7 @@ export const OffersIndexModal = () => {
                                         {id: 'name', label: 'Name', selected: sortOption === 'name', direction: sortDirection as 'asc' | 'desc'},
                                         {id: 'redemptions', label: 'Redemptions', selected: sortOption === 'redemptions', direction: sortDirection as 'asc' | 'desc'}
                                     ]}
-                                    position='right'
+                                    position='end'
                                     triggerButtonProps={{
                                         link: true
                                     }}

apps/admin-x-settings/src/components/settings/site/theme/AdvancedThemeSettings.tsx

@@ -158,7 +158,7 @@ const ThemeActions: React.FC<ThemeActionProps> = ({
     return (
         <div className='-mr-3 flex items-center gap-4'>
             {actions}
-            <Menu items={menuItems} position='left' triggerButtonProps={buttonProps} />
+            <Menu items={menuItems} position='start' triggerButtonProps={buttonProps} />
         </div>
     );
 };

apps/admin-x-settings/test/acceptance/advanced/history.test.ts

@@ -32,14 +32,18 @@ test.describe('History', async () => {
 
         await historyModal.getByRole('button', {name: 'Filter'}).click();
 
-        await page.getByTestId('popover-content').getByLabel('Posts').uncheck();
+        const popoverContent = historyModal.getByTestId('popover-content');
+
+        await popoverContent.getByLabel('Posts').click();
+        await expect(popoverContent.getByLabel('Posts')).toHaveAttribute('data-state', 'unchecked');
 
         await expect(historyModal).not.toHaveText(/Page edited/);
         await expect(historyModal).toHaveText(/Settings edited/);
 
         expect(lastApiRequests.browseActionsFiltered?.url).toEqual('http://localhost:5173/ghost/api/admin/actions/?include=actor%2Cresource&limit=200&filter=resource_type%3A-%5Blabel%2Cpost%5D');
 
-        await page.getByTestId('popover-content').getByLabel('Deleted').uncheck();
+        await popoverContent.getByLabel('Deleted').click();
+        await expect(popoverContent.getByLabel('Deleted')).toHaveAttribute('data-state', 'unchecked');
 
         expect(lastApiRequests.browseActionsFiltered?.url).toEqual('http://localhost:5173/ghost/api/admin/actions/?include=actor%2Cresource&limit=200&filter=event%3A-%5Bdeleted%5D%2Bresource_type%3A-%5Blabel%2Cpost%5D');
     });

apps/admin-x-settings/test/acceptance/general/users/actions.test.ts

@@ -173,7 +173,7 @@ test.describe('User actions', async () => {
 
         await modal.getByRole('button', {name: 'Actions'}).click();
         await expect(page.getByTestId('popover-content').getByRole('button', {name: 'Make owner'})).toHaveCount(0);
-        await page.getByTestId('popover-overlay').click();
+        await modal.getByRole('button', {name: 'Actions'}).click();
 
         await modal.getByRole('button', {name: 'Close'}).click();
 

apps/admin-x-settings/test/acceptance/general/users/invite.test.ts

@@ -61,7 +61,7 @@ test.describe('User invitations', async () => {
         // Successful invitation
 
         await modal.getByLabel('Email address').fill('newuser@test.com');
-        await modal.locator('input[value=author]').check();
+        await modal.locator('button[value=author]').click();
         await modal.getByRole('button', {name: 'Retry'}).click();
 
         await expect(page.getByTestId('toast-success')).toHaveText(/Invitation sent/);
@@ -174,11 +174,11 @@ test.describe('User invitations', async () => {
 
         const modal = page.getByTestId('invite-user-modal');
 
-        await modal.locator('input[value=author]').check();
+        await modal.locator('button[value=author]').click();
 
         await expect(modal).toHaveText(/Your plan does not support more staff/);
 
-        await modal.locator('input[value=contributor]').check();
+        await modal.locator('button[value=contributor]').click();
 
         await expect(modal).not.toHaveText(/Your plan does not support more staff/);
     });

apps/admin-x-settings/test/acceptance/general/users/roles.test.ts

@@ -57,7 +57,7 @@ test.describe('User roles', async () => {
         await page.goto('/');
 
         const section = page.getByTestId('users');
-        const activeTab = section.locator('[role=tabpanel]:not(.hidden)');
+        const activeTab = section.locator('[role=tabpanel]:not([hidden])');
 
         await section.getByRole('tab', {name: 'Authors'}).click();
 
@@ -67,7 +67,7 @@ test.describe('User roles', async () => {
 
         const modal = page.getByTestId('user-detail-modal');
 
-        await modal.locator('input[value=editor]').check();
+        await modal.locator('button[value=editor]').click();
 
         await modal.getByRole('button', {name: 'Save'}).click();
 

apps/admin-x-settings/test/acceptance/site/announcementbar.test.ts

@@ -148,7 +148,7 @@ test.describe('Announcement Bar', async () => {
 
         // get checkbox input with value of free_members
 
-        const checkbox = await page.$('input[value="free_members"]');
+        const checkbox = await page.$('button[value="free_members"]');
 
         expect(checkbox).not.toBeNull();
 

yarn.lock

@@ -4876,6 +4876,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/primitive@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
+  integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==
+
 "@radix-ui/react-arrow@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
@@ -4884,6 +4889,37 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-arrow@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz#744f388182d360b86285217e43b6c63633f39e7a"
+  integrity sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
+"@radix-ui/react-avatar@^1.0.4":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz#457c81334c93f4608df15f081e7baa286558d6a2"
+  integrity sha512-Q/PbuSMk/vyAd/UoIShVGZ7StHHeRFYU7wXmi5GV+8cLXflZAEpHL/F697H1klrzxKXNtZ97vWiC0q3RKUH8UA==
+  dependencies:
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-checkbox@^1.0.4":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.1.1.tgz#a559c4303957d797acee99914480b755aa1f27d6"
+  integrity sha512-0i/EKJ222Afa1FE0C6pNJxDq1itzcl3HChE9DwskA4th4KRse8ojx8a1nVcOjwJdbpDLcz7uol77yYnQNMHdKw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
 "@radix-ui/react-collection@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"
@@ -4895,6 +4931,16 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-collection@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.0.tgz#f18af78e46454a2360d103c2251773028b7724ed"
+  integrity sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+
 "@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"
@@ -4902,6 +4948,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
 "@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"
@@ -4909,6 +4960,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-context@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8"
+  integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
+
 "@radix-ui/react-direction@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
@@ -4916,6 +4972,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-direction@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
+  integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
+
 "@radix-ui/react-dismissable-layer@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978"
@@ -4928,6 +4989,17 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-escape-keydown" "1.0.3"
 
+"@radix-ui/react-dismissable-layer@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz#2cd0a49a732372513733754e6032d3fb7988834e"
+  integrity sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-escape-keydown" "1.1.0"
+
 "@radix-ui/react-focus-guards@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
@@ -4935,6 +5007,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-focus-guards@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz#8e9abb472a9a394f59a1b45f3dd26cfe3fc6da13"
+  integrity sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==
+
 "@radix-ui/react-focus-scope@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz#9c2e8d4ed1189a1d419ee61edd5c1828726472f9"
@@ -4945,6 +5022,28 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-focus-scope@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2"
+  integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
+"@radix-ui/react-form@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-form/-/react-form-0.0.3.tgz#328e7163e723ccc748459d66a2d685d7b4f85d5a"
+  integrity sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==
+  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-id" "1.0.1"
+    "@radix-ui/react-label" "2.0.2"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-id@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
@@ -4953,6 +5052,42 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-id@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
+  integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-label@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.0.2.tgz#9c72f1d334aac996fdc27b48a8bdddd82108fb6d"
+  integrity sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-popover@^1.0.7":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.1.tgz#604b783cdb3494ed4f16a58c17f0e81e61ab7775"
+  integrity sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-focus-guards" "1.1.0"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.7"
+
 "@radix-ui/react-popper@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.2.tgz#4c0b96fcd188dc1f334e02dba2d538973ad842e9"
@@ -4970,6 +5105,22 @@
     "@radix-ui/react-use-size" "1.0.1"
     "@radix-ui/rect" "1.0.1"
 
+"@radix-ui/react-popper@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.0.tgz#a3e500193d144fe2d8f5d5e60e393d64111f2a7a"
+  integrity sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+    "@radix-ui/react-use-rect" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+    "@radix-ui/rect" "1.1.0"
+
 "@radix-ui/react-portal@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1"
@@ -4978,6 +5129,22 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-portal@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.1.tgz#1957f1eb2e1aedfb4a5475bd6867d67b50b1d15f"
+  integrity sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-presence@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.0.tgz#227d84d20ca6bfe7da97104b1a8b48a833bfb478"
+  integrity sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@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"
@@ -4986,6 +5153,29 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-primitive@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
+  integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.0"
+
+"@radix-ui/react-radio-group@^1.1.3":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.2.0.tgz#f937dd6b9436ded80c4bebdf3901c20cb8bcbb5a"
+  integrity sha512-yv+oiLaicYMBpqgfpSPw6q+RyXlLdIpQWDHZbUKURxe+nEh53hFXPPlfhfQQtYkS5MMK/5IWIa76SksleQZSzw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-roving-focus" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
 "@radix-ui/react-roving-focus@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
@@ -5002,6 +5192,21 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-roving-focus@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e"
+  integrity sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-collection" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-select@^1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-1.2.2.tgz#caa981fa0d672cf3c1b2a5240135524e69b32181"
@@ -5038,6 +5243,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-separator@^1.0.3":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.1.0.tgz#ee0f4d86003b0e3ea7bc6ccab01ea0adee32663e"
+  integrity sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==
+  dependencies:
+    "@radix-ui/react-primitive" "2.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"
@@ -5046,6 +5258,40 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-slot@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
+"@radix-ui/react-switch@^1.0.3":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.1.0.tgz#fcf8e778500f1d60d4b2bec2fc3fad77a7c118e3"
+  integrity sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
+"@radix-ui/react-tabs@^1.0.4":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.0.tgz#0a6db1caed56776a1176aae68532060e301cc1c0"
+  integrity sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-roving-focus" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-toggle-group@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz#f5b5c8c477831b013bec3580c55e20a68179d6ec"
@@ -5084,6 +5330,24 @@
     "@radix-ui/react-separator" "1.0.3"
     "@radix-ui/react-toggle-group" "1.0.4"
 
+"@radix-ui/react-tooltip@^1.0.7":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz#c42db2ffd7dcc6ff3d65407c8cb70490288f518d"
+  integrity sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-visually-hidden" "1.1.0"
+
 "@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"
@@ -5091,6 +5355,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-callback-ref@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
+  integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
+
 "@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"
@@ -5099,6 +5368,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-use-controllable-state@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
+  integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/react-use-escape-keydown@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
@@ -5107,6 +5383,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-use-escape-keydown@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
+  integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@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"
@@ -5114,6 +5397,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-layout-effect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
+
 "@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"
@@ -5121,6 +5409,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-previous@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c"
+  integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==
+
 "@radix-ui/react-use-rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
@@ -5129,6 +5422,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/rect" "1.0.1"
 
+"@radix-ui/react-use-rect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz#13b25b913bd3e3987cc9b073a1a164bb1cf47b88"
+  integrity sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==
+  dependencies:
+    "@radix-ui/rect" "1.1.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"
@@ -5137,6 +5437,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-use-size@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz#b4dba7fbd3882ee09e8d2a44a3eed3a7e555246b"
+  integrity sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-visually-hidden@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"
@@ -5145,6 +5452,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-visually-hidden@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz#ad47a8572580f7034b3807c8e6740cd41038a5a2"
+  integrity sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
@@ -5152,6 +5466,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/rect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
+  integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
+
 "@remirror/core-constants@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-2.0.2.tgz#f05eccdc69e3a65e7d524b52548f567904a11a1a"
@@ -27259,6 +27578,14 @@ react-remove-scroll-bar@^2.3.3:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
+react-remove-scroll-bar@^2.3.4:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
+  integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
 react-remove-scroll@2.5.5:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
@@ -27270,6 +27597,17 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-remove-scroll@2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"
+  integrity sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==
+  dependencies:
+    react-remove-scroll-bar "^2.3.4"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-select@5.8.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"