@dxos/react-ui 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

package/src/components/Message/Message.tsx

@@ -8,7 +8,7 @@ import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useId } from '@dxos/react-hooks';
-import { type Elevation, type MessageValence } from '@dxos/react-ui-types';
+import { type Elevation, type MessageValence } from '@dxos/ui-types';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -31,9 +31,15 @@ type MessageRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.d
 };
 
 type MessageContextValue = { titleId?: string; descriptionId: string; valence: MessageValence };
+
 const MESSAGE_NAME = 'Message';
+
 const [MessageProvider, useMessageContext] = createContext<MessageContextValue>(MESSAGE_NAME);
 
+//
+// Root
+//
+
 const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
   (
     {
@@ -52,19 +58,20 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     const titleId = useId('message__title', propsTitleId);
     const descriptionId = useId('message__description', propsDescriptionId);
     const elevation = useElevationContext(propsElevation);
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
+
     return (
       <MessageProvider {...{ titleId, descriptionId, valence }}>
-        <Root
+        <Comp
           role={valence === 'neutral' ? 'paragraph' : 'alert'}
           {...props}
-          className={tx('message.root', 'message', { valence, elevation }, classNames)}
+          className={tx('message.root', { valence, elevation }, classNames)}
           aria-labelledby={titleId}
           aria-describedby={descriptionId}
           ref={forwardedRef}
         >
           {children}
-        </Root>
+        </Comp>
       </MessageProvider>
     );
   },
@@ -72,6 +79,10 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
 
 MessageRoot.displayName = MESSAGE_NAME;
 
+//
+// Title
+//
+
 type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
   icon?: string;
@@ -80,59 +91,57 @@ type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primi
 const MESSAGE_TITLE_NAME = 'MessageTitle';
 
 const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
-  ({ asChild, classNames, children, icon, ...props }, forwardedRef) => {
+  ({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-    const Root = asChild ? Slot : Primitive.h2;
+    const Comp = asChild ? Slot : Primitive.h2;
+    const icon = iconProp ?? messageIcons[valence];
     return (
-      <Root
-        {...props}
-        className={tx('message.title', 'message__title', {}, classNames)}
-        id={titleId}
-        ref={forwardedRef}
-      >
-        {!icon && valence === 'neutral' ? null : (
-          <Icon
-            size={5}
-            icon={icon ?? messageIcons[valence]}
-            classNames={tx('message.icon', 'message__icon', { valence })}
-          />
-        )}
-        <span>{children}</span>
-      </Root>
+      <Comp {...props} className={tx('message.header', {}, classNames)} id={titleId} ref={forwardedRef}>
+        {!icon && valence === 'neutral' ? <div /> : <Icon icon={icon} classNames={tx('message.icon', { valence })} />}
+        <span className={tx('message.title', {}, classNames)}>{children}</span>
+      </Comp>
     );
   },
 );
 
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 
+//
+// Content
+//
+
 type MessageContentProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
 };
 
-const MESSAGE_BODY_NAME = 'MessageContent';
+const MESSAGE_CONTENT_NAME = 'MessageContent';
 
 const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   ({ asChild, classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
-    const Root = asChild ? Slot : Primitive.p;
+    const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
+    const Comp = asChild ? Slot : Primitive.p;
     return (
-      <Root
-        {...props}
-        className={tx('message.content', 'message__content', {}, classNames)}
-        id={descriptionId}
-        ref={forwardedRef}
-      >
+      <Comp {...props} className={tx('message.content', {}, classNames)} id={descriptionId} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
 
-MessageContent.displayName = MESSAGE_BODY_NAME;
+MessageContent.displayName = MESSAGE_CONTENT_NAME;
+
+//
+// Message
+//
+
+export const Message = {
+  Root: MessageRoot,
+  Title: MessageTitle,
+  Content: MessageContent,
+};
 
-export const Message = { Root: MessageRoot, Title: MessageTitle, Content: MessageContent };
 export const Callout = Message;
 
 export type { MessageRootProps, MessageTitleProps, MessageContentProps };

package/src/components/Popover/Popover.stories.tsx

@@ -5,14 +5,13 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type PropsWithChildren, type ReactNode, useRef, useState } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { Popover } from './Popover';
 
-faker.seed(1234);
+random.seed(1234);
 
 const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
   return (
@@ -20,7 +19,7 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
       <Popover.Trigger asChild>{openTrigger}</Popover.Trigger>
       <Popover.Content>
         <Popover.Viewport>
-          <p className='pli-2 plb-1 min-is-[18rem] max-is-[38rem]'>{children}</p>
+          <p className='px-2 py-1 min-w-[18rem] max-w-[38rem]'>{children}</p>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -29,10 +28,10 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Popover',
+  title: 'ui/react-ui-core/components/Popover',
   component: Popover.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -42,7 +41,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     openTrigger: <Button>Open popover</Button>,
-    children: faker.lorem.paragraphs(3),
+    children: random.lorem.paragraphs(3),
   },
 };
 
@@ -59,7 +58,7 @@ export const VirtualTrigger = {
           <Popover.VirtualTrigger virtualRef={buttonRef} />
           <Popover.Content>
             <Popover.Viewport>
-              <p className='pli-2 plb-1 min-is-[18rem] max-is-[38rem]'>{faker.lorem.paragraphs(3)}</p>
+              <p className='px-2 py-1 min-w-[18rem] max-w-[38rem]'>{random.lorem.paragraphs(3)}</p>
             </Popover.Viewport>
             <Popover.Arrow />
           </Popover.Content>

package/src/components/Popover/Popover.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-// This is based upon `@radix-ui/react-popover` fetched 25 Oct 2024 at https://github.com/radix-ui/primitives at commit 374c7d7.
+// This is based upon `@radix-ui/react-popover` fetched Oct 25, 2024 at https://github.com/radix-ui/primitives at commit 374c7d7.
 
 import { composeEventHandlers } from '@radix-ui/primitive';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
@@ -23,9 +23,8 @@ import { hideOthers } from 'aria-hidden';
 import React, {
   type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
-  type ElementRef,
+  type ComponentRef,
   type FC,
-  type MutableRefObject,
   type ReactNode,
   type RefObject,
   forwardRef,
@@ -37,41 +36,46 @@ import React, {
 } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 
-import { useElevationContext, useThemeContext } from '../../hooks';
-import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
+import { useSafeCollisionPadding, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
-/* -------------------------------------------------------------------------------------------------
- * Popover
- * ----------------------------------------------------------------------------------------------- */
+//
+// Context
+//
+
+type ScopedProps<P> = P & { __scopePopover?: Scope };
 
 const POPOVER_NAME = 'Popover';
 
-type ScopedProps<P> = P & { __scopePopover?: Scope };
 const [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NAME, [createPopperScope]);
+
 const usePopperScope = createPopperScope();
 
 type PopoverContextValue = {
-  triggerRef: MutableRefObject<HTMLButtonElement>;
+  triggerRef: RefObject<HTMLButtonElement>;
   contentId: string;
+  hasCustomAnchor: boolean;
+  modal: boolean;
   open: boolean;
   onOpenChange(open: boolean): void;
   onOpenToggle(): void;
-  hasCustomAnchor: boolean;
   onCustomAnchorAdd(): void;
   onCustomAnchorRemove(): void;
-  modal: boolean;
 };
 
 const [PopoverProvider, usePopoverContext] = createPopoverContext<PopoverContextValue>(POPOVER_NAME);
 
-interface PopoverRootProps {
+//
+// PopoverRoot
+//
+
+type PopoverRootProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   modal?: boolean;
-}
+};
 
 const PopoverRoot: FC<PopoverRootProps> = (props: ScopedProps<PopoverRootProps>) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
@@ -89,7 +93,7 @@ const PopoverRoot: FC<PopoverRootProps> = (props: ScopedProps<PopoverRootProps>)
       <PopoverProvider
         scope={__scopePopover}
         contentId={useId()}
-        triggerRef={triggerRef as MutableRefObject<HTMLButtonElement>}
+        triggerRef={triggerRef as RefObject<HTMLButtonElement>}
         open={open}
         onOpenChange={setOpen}
         onOpenToggle={useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
@@ -106,15 +110,15 @@ const PopoverRoot: FC<PopoverRootProps> = (props: ScopedProps<PopoverRootProps>)
 
 PopoverRoot.displayName = POPOVER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverAnchor
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverAnchor
+//
 
 const ANCHOR_NAME = 'PopoverAnchor';
 
-type PopoverAnchorElement = ElementRef<typeof PopperPrimitive.Anchor>;
+type PopoverAnchorElement = ComponentRef<typeof PopperPrimitive.Anchor>;
 type PopperAnchorProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;
-interface PopoverAnchorProps extends PopperAnchorProps {}
+type PopoverAnchorProps = PopperAnchorProps;
 
 const PopoverAnchor = forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
   (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {
@@ -134,25 +138,28 @@ const PopoverAnchor = forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
 
 PopoverAnchor.displayName = ANCHOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverTrigger
+//
 
 const TRIGGER_NAME = 'PopoverTrigger';
 
-type PopoverTriggerElement = ElementRef<typeof Primitive.button>;
+type PopoverTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
-interface PopoverTriggerProps extends PrimitiveButtonProps {}
+type PopoverTriggerProps = PrimitiveButtonProps & {
+  asChild?: boolean;
+};
 
 const PopoverTrigger = forwardRef<PopoverTriggerElement, PopoverTriggerProps>(
   (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {
-    const { __scopePopover, ...triggerProps } = props;
+    const { __scopePopover, asChild, ...triggerProps } = props;
     const context = usePopoverContext(TRIGGER_NAME, __scopePopover);
     const popperScope = usePopperScope(__scopePopover);
     const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    const Comp = asChild ? Slot : Primitive.button;
 
     const trigger = (
-      <Primitive.button
+      <Comp
         type='button'
         aria-haspopup='dialog'
         aria-expanded={context.open}
@@ -176,15 +183,15 @@ const PopoverTrigger = forwardRef<PopoverTriggerElement, PopoverTriggerProps>(
 
 PopoverTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverVirtualTrigger
+//
 
 const VIRTUAL_TRIGGER_NAME = 'PopoverVirtualTrigger';
 
-interface PopoverVirtualTriggerProps {
+type PopoverVirtualTriggerProps = {
   virtualRef: RefObject<PopoverTriggerElement | null>;
-}
+};
 
 const PopoverVirtualTrigger = (props: ScopedProps<PopoverVirtualTriggerProps>) => {
   const { __scopePopover, virtualRef } = props;
@@ -200,9 +207,9 @@ const PopoverVirtualTrigger = (props: ScopedProps<PopoverVirtualTriggerProps>) =
 
 PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverPortal
+//
 
 const PORTAL_NAME = 'PopoverPortal';
 
@@ -212,7 +219,7 @@ const [PortalProvider, usePortalContext] = createPopoverContext<PortalContextVal
 });
 
 type PortalProps = ComponentPropsWithoutRef<typeof PortalPrimitive>;
-interface PopoverPortalProps {
+type PopoverPortalProps = {
   children?: ReactNode;
   /**
    * Specify a container element to portal the content into.
@@ -223,9 +230,9 @@ interface PopoverPortalProps {
    * controlling animation with React animation libraries.
    */
   forceMount?: true;
-}
+};
 
-const PopoverPortal: FC<PopoverPortalProps> = (props: ScopedProps<PopoverPortalProps>) => {
+const PopoverPortal = (props: ScopedProps<PopoverPortalProps>) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME, __scopePopover);
   return (
@@ -241,9 +248,9 @@ const PopoverPortal: FC<PopoverPortalProps> = (props: ScopedProps<PopoverPortalP
 
 PopoverPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverContent
+//
 
 const CONTENT_NAME = 'PopoverContent';
 
@@ -275,11 +282,11 @@ const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps
 
 PopoverContent.displayName = CONTENT_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
-
 type PopoverContentTypeElement = PopoverContentImplElement;
-export interface PopoverContentTypeProps
-  extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
+export interface PopoverContentTypeProps extends Omit<
+  PopoverContentImplProps,
+  'trapFocus' | 'disableOutsidePointerEvents'
+> {}
 
 const PopoverContentModal = forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
   (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {
@@ -301,8 +308,7 @@ const PopoverContentModal = forwardRef<PopoverContentTypeElement, PopoverContent
         <PopoverContentImpl
           {...props}
           ref={composedRefs}
-          // we make sure we're not trapping once it's been closed
-          // (closed !== unmounted when animating out)
+          // Make sure we're not trapping once it's been closed (closed !== unmounted when animating out).
           trapFocus={context.open}
           disableOutsidePointerEvents
           onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
@@ -391,34 +397,31 @@ const PopoverContentNonModal = forwardRef<PopoverContentTypeElement, PopoverCont
   },
 );
 
-/* ----------------------------------------------------------------------------------------------- */
-
-type PopoverContentImplElement = ElementRef<typeof PopperPrimitive.Content>;
+type PopoverContentImplElement = ComponentRef<typeof PopperPrimitive.Content>;
 type FocusScopeProps = ComponentPropsWithoutRef<typeof FocusScope>;
 type DismissableLayerProps = ComponentPropsWithoutRef<typeof DismissableLayer>;
 type PopperContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof PopperPrimitive.Content>>;
 
-interface PopoverContentImplProps
-  extends Omit<PopperContentProps, 'onPlaced'>,
-    Omit<DismissableLayerProps, 'onDismiss'> {
-  /**
-   * Whether focus should be trapped within the `Popover`
-   * (default: false)
-   */
-  trapFocus?: FocusScopeProps['trapped'];
-
-  /**
-   * Event handler called when auto-focusing on open.
-   * Can be prevented.
-   */
-  onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
-
-  /**
-   * Event handler called when auto-focusing on close.
-   * Can be prevented.
-   */
-  onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
-}
+type PopoverContentImplProps = Omit<PopperContentProps, 'onPlaced'> &
+  Omit<DismissableLayerProps, 'onDismiss'> & {
+    /**
+     * Whether focus should be trapped within the `Popover`
+     * (default: false)
+     */
+    trapFocus?: FocusScopeProps['trapped'];
+
+    /**
+     * Event handler called when auto-focusing on open.
+     * Can be prevented.
+     */
+    onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
+
+    /**
+     * Event handler called when auto-focusing on close.
+     * Can be prevented.
+     */
+    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
+  };
 
 const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentImplProps>(
   (props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {
@@ -485,7 +488,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             {...contentProps}
             collisionPadding={safeCollisionPadding}
             collisionBoundary={computedCollisionBoundary}
-            className={tx('popover.content', 'popover', { elevation }, classNames)}
+            className={tx('popover.content', { elevation }, classNames)}
             ref={forwardedRef}
             style={{
               ...contentProps.style,
@@ -505,14 +508,14 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
   },
 );
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverClose
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverClose
+//
 
 const CLOSE_NAME = 'PopoverClose';
 
-type PopoverCloseElement = ElementRef<typeof Primitive.button>;
-interface PopoverCloseProps extends PrimitiveButtonProps {}
+type PopoverCloseElement = ComponentRef<typeof Primitive.button>;
+type PopoverCloseProps = PrimitiveButtonProps;
 
 const PopoverClose = forwardRef<PopoverCloseElement, PopoverCloseProps>(
   (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {
@@ -531,15 +534,15 @@ const PopoverClose = forwardRef<PopoverCloseElement, PopoverCloseProps>(
 
 PopoverClose.displayName = CLOSE_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverArrow
+//
 
 const ARROW_NAME = 'PopoverArrow';
 
-type PopoverArrowElement = ElementRef<typeof PopperPrimitive.Arrow>;
+type PopoverArrowElement = ComponentRef<typeof PopperPrimitive.Arrow>;
 type PopperArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>>;
-interface PopoverArrowProps extends PopperArrowProps {}
+type PopoverArrowProps = PopperArrowProps;
 
 const PopoverArrow = forwardRef<PopoverArrowElement, PopoverArrowProps>(
   (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {
@@ -550,7 +553,7 @@ const PopoverArrow = forwardRef<PopoverArrowElement, PopoverArrowProps>(
       <PopperPrimitive.Arrow
         {...popperScope}
         {...arrowProps}
-        className={tx('popover.arrow', 'popover__arrow', {}, classNames)}
+        className={tx('popover.arrow', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -559,9 +562,9 @@ const PopoverArrow = forwardRef<PopoverArrowElement, PopoverArrowProps>(
 
 PopoverArrow.displayName = ARROW_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverViewport
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverViewport
+//
 
 type PopoverViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   asChild?: boolean;
@@ -572,25 +575,27 @@ type PopoverViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primiti
 const PopoverViewport = forwardRef<HTMLDivElement, PopoverViewportProps>(
   ({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root
+      <Comp
         {...props}
-        className={tx('popover.viewport', 'popover__viewport', { constrainInline, constrainBlock }, classNames)}
+        className={tx('popover.viewport', { constrainInline, constrainBlock }, classNames)}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
 
-/* ----------------------------------------------------------------------------------------------- */
-
 const getState = (open: boolean) => (open ? 'open' : 'closed');
 
 type PopoverContentInteractOutsideEvent = Parameters<NonNullable<PopoverContentProps['onInteractOutside']>>[0];
 
+//
+// Popver
+//
+
 export const Popover = {
   Root: PopoverRoot,
   Anchor: PopoverAnchor,