@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/core/constants.ts

@@ -1,4 +1,4 @@
-import {Transition, Variant} from 'framer-motion'
+import type {Transition, Variant} from 'framer-motion'
 
 /**
  * @internal
@@ -10,39 +10,61 @@ export const EMPTY_ARRAY: never[] = []
  */
 export const EMPTY_RECORD: Record<string, never> = {}
 
-/**
- * @internal
- */
-export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity'
+const POPOVER_MOTION_DURATION = 0.2
 
 /**
  * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
  * @internal
  */
 export const POPOVER_MOTION_PROPS: {
-  animate: Variant
-  initial: Variant
-  exit: Variant
+  card: {
+    initial: Variant
+    hidden: Variant
+    visible: Variant
+    scaleIn: Variant
+    scaleOut: Variant
+  }
+  children: {
+    hidden: Variant
+    visible: Variant
+  }
   transition: Transition
 } = {
-  initial: {
-    opacity: 0.5,
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
-    scale: 0.97,
-    willChange: 'transform',
+  card: {
+    initial: {
+      scale: 0.97,
+      willChange: 'transform',
+    },
+    hidden: {
+      opacity: 0,
+    },
+    visible: {
+      opacity: 1,
+      transition: {
+        when: 'beforeChildren',
+        duration: POPOVER_MOTION_DURATION / 2,
+      },
+    },
+    scaleIn: {
+      scale: 1,
+    },
+    scaleOut: {
+      scale: 0.97,
+    },
   },
-  animate: {
-    opacity: [null, 1, 1],
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [null, null, 1],
-    scale: 1,
+  children: {
+    hidden: {
+      opacity: 0,
+    },
+    visible: {
+      opacity: 1,
+    },
   },
-  exit: {
-    // @ts-expect-error -- passing null a second time is valid: https://github.com/framer/motion/blob/b9ce4c42914c3916ea523609c5b032dfc72718bb/packages/framer-motion/src/animation/utils/keyframes.ts#L34C22-L34C22
-    opacity: [null, null, 0],
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [null, 0, 0],
-    scale: 0.97,
+  transition: {
+    type: 'spring',
+    visualDuration: POPOVER_MOTION_DURATION,
+    bounce: 0.25,
   },
-  transition: {duration: 0.4, type: 'spring'},
 }
 
 /**

package/src/core/helpers/focus.ts

@@ -1,8 +1,8 @@
 import {
-  isHTMLElement,
   isHTMLAnchorElement,
-  isHTMLInputElement,
   isHTMLButtonElement,
+  isHTMLElement,
+  isHTMLInputElement,
   isHTMLSelectElement,
   isHTMLTextAreaElement,
 } from './element'
@@ -60,7 +60,7 @@ export function attemptFocus(element: HTMLElement): boolean {
 
   try {
     element.focus()
-  } catch (_) {
+  } catch {
     // ignore
   }
 

package/src/core/helpers/index.ts

@@ -1,4 +1,5 @@
 export * from './animation'
 export * from './element'
 export * from './focus'
+export * from './props'
 export * from './scroll'

package/src/core/helpers/props.ts

@@ -0,0 +1,10 @@
+import {EMPTY_ARRAY} from '../constants'
+
+/**
+ * @internal
+ */
+export function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+  if (val === undefined) return defaultVal || EMPTY_ARRAY
+
+  return Array.isArray(val) ? val : [val]
+}

package/src/core/hooks/useArrayProp.ts

@@ -1,25 +1,29 @@
-import {useMemo} from 'react'
-import {_getArrayProp} from '../_compat'
+import {useState} from 'react'
+
+import {_getArrayProp} from '../helpers'
 
 /** @beta */
-export type ArrayPropPrimitive = string | number | boolean | undefined | null
+// export type ArrayPropPrimitive = string | number | boolean | undefined | null
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
-  val: T | T[] | undefined,
-  defaultVal?: T[],
-): T[] {
-  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
-  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
+// export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
+export function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+  const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
+    _getArrayProp(val, defaultVal),
+    JSON.stringify(val ?? defaultVal),
+  ])
+
+  const hash = JSON.stringify(val ?? defaultVal)
 
-  return useMemo(
-    () => _getArrayProp(val, defaultVal),
+  if (hash !== cachedHash) {
+    // If the cached hash has changed, update the cache right away.
+    // Calling setState during render is fine in this case, and preferred over a useEffect loop
+    // https://19.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+    setCache([_getArrayProp(val, defaultVal), hash])
+  }
 
-    // Improve performance: Keep object identify for a given hash of the value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [__perf_hash__],
-  )
+  return cachedVal
 }

package/src/core/hooks/useClickOutside.test.tsx

@@ -1,9 +1,8 @@
 /** @jest-environment jsdom */
-/* eslint-disable padding-line-between-statements, react/display-name */
 
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import {useEffect, useRef, useState} from 'react'
+import {MutableRefObject, useEffect, useRef, useState} from 'react'
 
 import {useClickOutside} from './useClickOutside'
 
@@ -290,7 +289,7 @@ describe('useClickOutside', () => {
      * When using the legacy version of the `useClickOutside` API it's necessary to synchronize mutable ref values
      * with a effect and state loop to ensure they're not stale
      */
-    const useElementsFromRefs = (refs: React.MutableRefObject<HTMLElement | null>[]) => {
+    const useElementsFromRefs = (refs: MutableRefObject<HTMLElement | null>[]) => {
       const [elements, setElements] = useState(() => refs.map((ref) => ref.current))
 
       useEffect(() => {
@@ -439,7 +438,7 @@ describe('useClickOutside', () => {
      * When using the legacy version of the `useClickOutside` API it's necessary to synchronize mutable ref values
      * with a effect and state loop to ensure they're not stale
      */
-    const useBoundaryElementFromRef = (ref: React.MutableRefObject<HTMLElement | null>) => {
+    const useBoundaryElementFromRef = (ref: MutableRefObject<HTMLElement | null>) => {
       const [element, setElement] = useState(() => ref.current)
 
       // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/core/hooks/useClickOutside.ts

@@ -1,4 +1,5 @@
 import {useEffect, useRef, useState} from 'react'
+
 import {EMPTY_ARRAY} from '../constants'
 
 /**

package/src/core/hooks/useClickOutsideEvent.test.tsx

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable padding-line-between-statements, react/display-name */
 
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'

package/src/core/hooks/useClickOutsideEvent.ts

@@ -1,5 +1,6 @@
 import {useDebugValue, useEffect} from 'react'
 import {useEffectEvent} from 'use-effect-event'
+
 import {EMPTY_ARRAY} from '../constants'
 
 /**
@@ -66,7 +67,7 @@ export function useClickOutsideEvent(
     return () => {
       document.removeEventListener('mousedown', handleEvent)
     }
-  }, [hasListener, onEvent])
+  }, [hasListener])
 
   useDebugValue(listener ? 'MouseDown On' : 'MouseDown Off')
 }

package/src/core/hooks/useDelayed.test.ts

@@ -1,6 +1,7 @@
 /** @jest-environment jsdom */
 
-import {renderHook, act} from '@testing-library/react'
+import {act, renderHook} from '@testing-library/react'
+
 import {useDelayedState} from './useDelayedState'
 
 describe('useDelayedState', () => {

package/src/core/hooks/useDelayedState.ts

@@ -1,5 +1,4 @@
-import {useRef} from 'react'
-import {useState, useCallback, SetStateAction} from 'react'
+import {SetStateAction, useCallback, useRef, useState} from 'react'
 
 /**
  * @beta
@@ -8,7 +7,7 @@ export function useDelayedState<S>(
   initialState: S | (() => S),
 ): [S, (nextState: SetStateAction<S>, delay?: number) => void] {
   const [state, setState] = useState(initialState)
-  const delayedAction = useRef<NodeJS.Timeout | undefined>()
+  const delayedAction = useRef<NodeJS.Timeout | undefined>(undefined)
 
   const onStateChange = useCallback((nextState: SetStateAction<S>, delay?: number) => {
     const action = () => {

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -1,11 +1,12 @@
 import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
-import {useMemo, useState} from 'react'
+import {useState} from 'react'
+
 import {Grid} from '../../../primitives'
 
 export default function ExampleStory() {
   const [element, setElement] = useState<HTMLElement | null>(null)
   const rect = useElementRect(element)
-  const size = useMemo(() => ({width: rect?.width || 0, height: rect?.height || 0}), [rect])
+  const size = {width: rect?.width || 0, height: rect?.height || 0}
 
   return (
     <Box padding={[3, 4, 5]}>

package/src/core/hooks/useElementSize.ts

@@ -1,5 +1,6 @@
 import {useEffect, useState} from 'react'
-import {ElementSize, _elementSizeObserver} from '../observers/elementSizeObserver'
+
+import {_elementSizeObserver, ElementSize} from '../observers/elementSizeObserver'
 
 /**
  * Subscribe to the size of a DOM element.

package/src/core/hooks/useForwardedRef.ts

@@ -1,4 +1,4 @@
-import {useImperativeHandle, useRef} from 'react'
+import {ForwardedRef, MutableRefObject, useImperativeHandle, useRef} from 'react'
 
 /**
  * @beta
@@ -10,7 +10,7 @@ import {useImperativeHandle, useRef} from 'react'
  * +useImperativeHandle(forwardedRef, () => ref.current)
  * ```
  */
-export function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null> {
+export function useForwardedRef<T>(ref: ForwardedRef<T>): MutableRefObject<T | null> {
   const innerRef = useRef<T | null>(null)
 
   useImperativeHandle(ref, () => innerRef.current!)

package/src/core/hooks/useGlobalKeyDown.ts

@@ -1,12 +1,17 @@
 import {useEffect} from 'react'
+import {useEffectEvent} from 'use-effect-event'
 
 /**
  * @beta
  */
 export function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void {
-  return useEffect(() => {
-    addEventListener('keydown', onKeyDown)
+  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))
 
-    return () => removeEventListener('keydown', onKeyDown)
-  }, [onKeyDown])
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => handleKeyDown(event)
+
+    window.addEventListener('keydown', handler)
+
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
 }

package/src/core/hooks/useMatchMedia.ts

@@ -3,7 +3,7 @@ import {useDebugValue, useMemo, useSyncExternalStore} from 'react'
 /**
  * Efficiently subscribes to `window.matchMedia` queries
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * @public
  */

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,8 +1,9 @@
 /** @jest-environment node */
 
 import {buildTheme} from '@sanity/ui/theme'
-import {renderToString, renderToStaticMarkup} from 'react-dom/server'
-import {ThemeProvider} from '../../theme'
+import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+
+import {ThemeProvider} from '../../_compat'
 import {useMediaIndex} from './useMediaIndex'
 
 const theme = buildTheme()

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,5 +1,6 @@
 import {useMemo, useSyncExternalStore} from 'react'
-import {useTheme_v2} from '../../theme'
+
+import {useTheme_v2} from '../../_compat'
 
 /**
  * @internal

package/src/core/hooks/usePrefersDark.hydration.test.tsx

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration

package/src/core/hooks/usePrefersDark.test.tsx

@@ -1,5 +1,6 @@
 /** @jest-environment node */
-import {renderToString, renderToStaticMarkup} from 'react-dom/server'
+import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+
 import {usePrefersDark} from './usePrefersDark'
 
 function Log() {

package/src/core/hooks/usePrefersDark.ts

@@ -3,7 +3,7 @@ import {useMatchMedia} from './useMatchMedia'
 /**
  * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
  * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme

package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration

package/src/core/hooks/usePrefersReducedMotion.test.tsx

@@ -1,5 +1,6 @@
 /** @jest-environment node */
-import {renderToString, renderToStaticMarkup} from 'react-dom/server'
+import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 
 function Log() {

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -3,7 +3,7 @@ import {useMatchMedia} from './useMatchMedia'
 /**
  * Returns true if motion should be reduced
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
  * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion

package/src/core/index.ts

@@ -1,10 +1,9 @@
 export * from './_compat'
-
-export * from './primitives'
 export * from './components'
 export * from './helpers'
 export * from './hooks'
 export * from './observers'
-export * from './theme'
+export * from './primitives'
+export * from './StyleTags'
 export * from './types'
 export * from './utils'

package/src/core/lib/createGlobalScopedContext.ts

@@ -8,7 +8,8 @@
  * It's also why it's vital that all changes to globally scoped providers remain fully backwards compatible to v1.
  */
 
-import {createContext, type Context} from 'react'
+import {type Context, createContext} from 'react'
+
 import {globalScope} from './globalScope'
 
 export function createGlobalScopedContext<ContextType, const T extends ContextType = ContextType>(

package/src/core/lib/globalScope.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Gets the global scope instance in a given environment.
  *

package/src/core/primitives/_selectable/selectable.tsx

@@ -1,16 +1,20 @@
-import {composeClassNames, selectable, SelectableStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, HTMLProps} from 'react'
-import {SelectableTone} from '../../types'
+import {_selectable, composeClassNames, SelectableStyleProps} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props, SelectableTone} from '../../types'
 import {Box, BoxProps} from '../box'
 
 /** @internal */
 export interface SelectableProps extends BoxProps, SelectableStyleProps {
+  disabled?: boolean
+  href?: string
   tone?: SelectableTone
+  type?: 'button'
 }
 
 /** @internal */
 export const Selectable = forwardRef(function Selectable(
-  props: SelectableProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'wrap' | 'width'>,
+  props: Props<SelectableProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {className, radius, tone, ...restProps} = props
@@ -18,7 +22,7 @@ export const Selectable = forwardRef(function Selectable(
   return (
     <Box
       {...restProps}
-      className={composeClassNames(className, selectable({radius, tone}))}
+      className={composeClassNames(className, _selectable({radius, tone}))}
       ref={ref}
     />
   )

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -1,6 +1,7 @@
 import {Avatar, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function AsButtonStory() {
   const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -1,6 +1,7 @@
 import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function StackStory() {
   const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -1,4 +1,5 @@
 import {useBoolean} from '@sanity/ui-workshop'
+
 import {Box} from '../../box'
 import {Button} from '../../button'
 import {Container} from '../../container'
@@ -15,7 +16,7 @@ export default function WithinButtonStory() {
     <Container width={1}>
       <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
         <Button disabled={disabled} padding={1}>
-          <Flex align="center" gap={3} padding={2}>
+          <Flex align="center" flex={1} gap={3} padding={2}>
             <Box flex={1}>
               <Text size={1}>Default button</Text>
             </Box>
@@ -29,7 +30,7 @@ export default function WithinButtonStory() {
           </Flex>
         </Button>
         <Button disabled={disabled} mode="ghost" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
+          <Flex align="center" flex={1} gap={3} padding={2}>
             <Box flex={1}>
               <Text size={1}>Ghost button</Text>
             </Box>
@@ -43,7 +44,7 @@ export default function WithinButtonStory() {
           </Flex>
         </Button>
         <Button disabled={disabled} mode="bleed" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
+          <Flex align="center" flex={1} gap={3} padding={2}>
             <Box flex={1}>
               <Text size={1}>Bleed button</Text>
             </Box>

package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx

@@ -1,13 +1,16 @@
+import {
+  Avatar,
+  AvatarStack,
+  Box,
+  Card,
+  Container,
+  Flex,
+  Layer,
+  Menu,
+  MenuItem,
+  Text,
+} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import {Menu, MenuItem} from '../../../components'
-import {Layer} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
 
 export default function WithinMenuItemStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
@@ -17,45 +20,45 @@ export default function WithinMenuItemStory() {
       <Layer>
         <Box paddingX={4} paddingY={[5, 6, 7]}>
           <Card radius={3} shadow={3}>
-            <Menu space={1}>
+            <Menu gap={1}>
               <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
+                <Flex align="center" gap={2} padding={1}>
+                  <Box flex={1} padding={2}>
                     <Text size={1}>Menu item 1</Text>
                   </Box>
                   <Box flex="none">
                     <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
+                      <Avatar color="purple" initials="AB" />
                       <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
+                      <Avatar color="orange" initials="EF" />
                     </AvatarStack>
                   </Box>
                 </Flex>
               </MenuItem>
               <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
+                <Flex align="center" gap={2} padding={1}>
+                  <Box flex={1} padding={2}>
                     <Text size={1}>Menu item 1</Text>
                   </Box>
                   <Box flex="none">
                     <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
+                      {/* <Avatar color="purple" initials="AB" /> */}
                       <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
+                      <Avatar color="orange" initials="EF" />
                     </AvatarStack>
                   </Box>
                 </Flex>
               </MenuItem>
               <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
+                <Flex align="center" gap={2} padding={1}>
+                  <Box flex={1} padding={2}>
                     <Text size={1}>Menu item 1</Text>
                   </Box>
                   <Box flex="none">
                     <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
+                      <Avatar color="purple" initials="AB" />
+                      {/* <Avatar color="magenta" initials="CD" /> */}
+                      {/* <Avatar color="orange" initials="EF" /> */}
                     </AvatarStack>
                   </Box>
                 </Flex>