@sanity/ui 3.2.0 → 3.3.0

package/dist/theme.d.mts

@@ -1,7 +1,7 @@
 import {ColorHueKey} from '@sanity/color'
 import {ColorTint} from '@sanity/color'
 import {ColorTintKey} from '@sanity/color'
-import type {StyledObject} from 'styled-components'
+import type * as CSS_2 from 'csstype'
 
 /**
  * @public
@@ -229,11 +229,17 @@ export declare function createColorTheme(
 ): ThemeColorSchemes
 
 /**
- * Work around types that are missing in `styled-components@6`
- * https://github.com/styled-components/styled-components/issues/4062
+ * A CSS-in-JS style object: standard CSS properties plus an index signature that allows nested
+ * selectors, at-rules and custom properties.
+ *
+ * This is a self-owned definition (based on `csstype`) so the published `.d.ts` types stay fully
+ * controlled by us and do not reference any external CSS-in-JS library types.
+ *
  * @internal
  */
-export declare type CSSObject = StyledObject<any>
+export declare interface CSSObject extends CSS_2.Properties<number | (string & {})> {
+  [key: string]: CSSObject | string | number | undefined
+}
 
 /** @internal */
 export declare function getContrastRatio(bg: string, fg: string): number

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
 import {ColorHueKey} from '@sanity/color'
 import {ColorTint} from '@sanity/color'
 import {ColorTintKey} from '@sanity/color'
-import type {StyledObject} from 'styled-components'
+import type * as CSS_2 from 'csstype'
 
 /**
  * @public
@@ -229,11 +229,17 @@ export declare function createColorTheme(
 ): ThemeColorSchemes
 
 /**
- * Work around types that are missing in `styled-components@6`
- * https://github.com/styled-components/styled-components/issues/4062
+ * A CSS-in-JS style object: standard CSS properties plus an index signature that allows nested
+ * selectors, at-rules and custom properties.
+ *
+ * This is a self-owned definition (based on `csstype`) so the published `.d.ts` types stay fully
+ * controlled by us and do not reference any external CSS-in-JS library types.
+ *
  * @internal
  */
-export declare type CSSObject = StyledObject<any>
+export declare interface CSSObject extends CSS_2.Properties<number | (string & {})> {
+  [key: string]: CSSObject | string | number | undefined
+}
 
 /** @internal */
 export declare function getContrastRatio(bg: string, fg: string): number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "keywords": [
     "sanity",
     "ui",

package/src/core/components/autocomplete/autocomplete.tsx

@@ -190,7 +190,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const rootElementRef = useRef<HTMLDivElement | null>(null)
   const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
   const inputElementRef = useRef<HTMLInputElement | null>(null)
-  const listBoxElementRef = useRef<HTMLDivElement | null>(null)
+  const listBoxElementRef = useRef<HTMLUListElement | null>(null)
   // Element refs that need to be accessed during render
   const [inputElement, _setInputElement] = useState<HTMLInputElement | null>(null)
   /**

package/src/core/components/autocomplete/types.ts

@@ -1,9 +1,9 @@
-import {ButtonProps} from '../../primitives'
+import {ButtonOwnProps} from '../../primitives'
 
 /**
  * @public
  */
-export type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
+export type AutocompleteOpenButtonProps = ButtonOwnProps &
   Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
 
 /**

package/src/core/components/menu/__workshop__/asComponent.tsx

@@ -16,7 +16,7 @@ const CustomLink = forwardRef(function CustomLink(
 })
 
 export default function AsComponentStory() {
-  const props = {href: '#'}
+  const props = {href: '#', req: 'example'}
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/components/menu/menuDivider.ts

@@ -1,12 +1,23 @@
 import {styled} from 'styled-components'
 
-/**
- * @public
- */
-export const MenuDivider = styled.hr`
+import {ElementType, EmptyProps, Props} from '../../types'
+
+const StyledMenuDivider = styled.hr`
   height: 1px;
   border: 0;
   background: var(--card-hairline-soft-color);
   margin: 0;
 `
-MenuDivider.displayName = 'MenuDivider'
+StyledMenuDivider.displayName = 'MenuDivider'
+
+/**
+ * @public
+ */
+export type MenuDividerProps<E extends ElementType = 'hr'> = Props<EmptyProps, E>
+
+/**
+ * @public
+ */
+export const MenuDivider = StyledMenuDivider as unknown as <E extends ElementType = 'hr'>(
+  props: MenuDividerProps<E>,
+) => React.JSX.Element

package/src/core/components/menu/menuGroup.spacing.test.tsx

@@ -12,13 +12,7 @@ jest.mock('../../primitives', () => {
   return {
     ...actual,
     Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
-    Popover: jest.fn(
-      ({
-        children,
-      }: {
-        children?: React.ReactNode
-      }) => children,
-    ),
+    Popover: jest.fn(({children}: {children?: React.ReactNode}) => children),
   }
 })
 

package/src/core/components/menu/menuGroup.tsx

@@ -6,15 +6,14 @@ import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {_getArrayProp} from '../../styles'
 import {useRootTheme} from '../../theme'
-import {Radius, SelectableTone} from '../../types'
+import {ElementType, Props, Radius, SelectableTone} from '../../types'
 import {Menu, MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
 /**
  * @public
  */
-export interface MenuGroupProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface MenuGroupOwnProps {
   fontSize?: number | number[]
   icon?: React.ElementType | React.ReactNode
   menu?: Omit<
@@ -43,9 +42,11 @@ export interface MenuGroupProps {
 /**
  * @public
  */
-export function MenuGroup(
+export type MenuGroupProps<E extends ElementType = 'button'> = Props<MenuGroupOwnProps, E>
+
+function MenuGroupComponent(
   props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
-    MenuGroupProps,
+    MenuGroupOwnProps & {as?: ElementType},
 ): React.JSX.Element {
   const {
     as = 'button',
@@ -222,4 +223,11 @@ export function MenuGroup(
   )
 }
 
-MenuGroup.displayName = 'MenuGroup'
+MenuGroupComponent.displayName = 'MenuGroup'
+
+/**
+ * @public
+ */
+export const MenuGroup = MenuGroupComponent as unknown as <E extends ElementType = 'button'>(
+  props: MenuGroupProps<E>,
+) => React.JSX.Element

package/src/core/components/menu/menuItem.tsx

@@ -15,6 +15,7 @@ import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
 import {_getArrayProp} from '../../styles'
 import {useRootTheme} from '../../theme'
+import {ElementType, Props} from '../../types'
 import {SelectableTone} from '../../types/selectable'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
@@ -22,8 +23,7 @@ import {useMenu} from './useMenu'
 /**
  * @public
  */
-export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   hotkeys?: string[]
   icon?: React.ElementType | React.ReactNode
@@ -42,9 +42,13 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
 /**
  * @public
  */
-export const MenuItem = forwardRef(function MenuItem(
-  props: MenuItemProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex'>,
+export type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>
+
+const MenuItemComponent = forwardRef(function MenuItem(
+  props: MenuItemOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'selected' | 'tabIndex'
+    >,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -183,4 +187,11 @@ export const MenuItem = forwardRef(function MenuItem(
     </Selectable>
   )
 })
-MenuItem.displayName = 'ForwardRef(MenuItem)'
+MenuItemComponent.displayName = 'ForwardRef(MenuItem)'
+
+/**
+ * @public
+ */
+export const MenuItem = MenuItemComponent as unknown as <E extends ElementType = 'button'>(
+  props: MenuItemProps<E>,
+) => React.JSX.Element

package/src/core/components/skeleton/skeleton.tsx

@@ -1,7 +1,7 @@
 import {forwardRef, useEffect, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Box, BoxProps, ResponsiveRadiusProps} from '../../primitives'
+import {Box, BoxOwnProps, ResponsiveRadiusProps} from '../../primitives'
 import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
@@ -14,7 +14,7 @@ const StyledSkeleton = styled(Box)<
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxOwnProps, 'children'> {
   animated?: boolean
   delay?: number
 }

package/src/core/components/tab/tabList.tsx

@@ -1,12 +1,12 @@
 import {Children, cloneElement, forwardRef, isValidElement, useCallback, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Inline, InlineProps} from '../../primitives'
+import {Inline, InlineOwnProps} from '../../primitives'
 
 /**
  * @public
  */
-export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+export interface TabListProps extends Omit<InlineOwnProps, 'height'> {
   children: Array<React.JSX.Element | null | undefined | false>
 }
 

package/src/core/components/tab/tabPanel.tsx

@@ -1,11 +1,11 @@
 import {forwardRef} from 'react'
 
-import {Box, BoxProps} from '../../primitives'
+import {Box, BoxOwnProps} from '../../primitives'
 
 /**
  * @public
  */
-export interface TabPanelProps extends BoxProps {
+export interface TabPanelProps extends BoxOwnProps {
   /**
    * The `id` of the correlating `Tab` component.
    */

package/src/core/components/toast/styles.ts

@@ -1,7 +1,7 @@
 import {getTheme_v2, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {styled} from 'styled-components'
 
-import {Card, Flex} from '../../primitives'
+import {Card, type CardProps, Flex} from '../../primitives'
 import type {ButtonTone} from '../../types'
 
 const LOADING_BAR_HEIGHT = 2
@@ -61,7 +61,7 @@ export const LoadingBarMask = styled(Card)`
   z-index: 1;
 `
 
-type LoadingBarProgressProps = Omit<React.ComponentProps<typeof Card>, 'tone'> & {
+type LoadingBarProgressProps = Omit<CardProps, 'tone'> & {
   tone: ThemeColorStateToneKey
 }
 export const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`

package/src/core/components/tree/__workshop__/basic.perf.ts

@@ -9,7 +9,7 @@ function test<ElementType = unknown>(
 }
 
 export const perfTests = [
-  test('Toggle tree groups', async ({target}: {target: HTMLDivElement}) => {
+  test('Toggle tree groups', async ({target}: {target: HTMLUListElement}) => {
     const apples = await findByTestId(target, 'apples')
     const oranges = await findByTestId(target, 'oranges')
 

package/src/core/components/tree/__workshop__/tabFromElement.tsx

@@ -19,7 +19,7 @@ export default function BasicStory() {
     if (testid) setId(testid)
   }, [])
 
-  const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+  const handleFocus = useCallback((event: React.FocusEvent<HTMLElement>) => {
     const elementFocus = event.target.getAttribute('data-testid')
     if (elementFocus) setFocus(elementFocus)
   }, [])

package/src/core/components/tree/tree.tsx

@@ -31,12 +31,12 @@ export interface TreeProps {
  */
 export const Tree = forwardRef(function Tree(
   props: TreeProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+    Omit<React.HTMLProps<HTMLUListElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+  forwardedRef: React.ForwardedRef<HTMLUListElement>,
 ): React.JSX.Element {
   const {children, gap, space: deprecated_space = 1, onFocus, ...restProps} = props
   const spacing = gap === undefined ? deprecated_space : gap
-  const ref = useRef<HTMLDivElement | null>(null)
+  const ref = useRef<HTMLUListElement | null>(null)
   const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
   const focusedElementRef = useRef(focusedElement)
   const path: string[] = useMemo(() => [], [])
@@ -44,7 +44,10 @@ export const Tree = forwardRef(function Tree(
   const [state, setState] = useState<TreeState>({})
   const stateRef = useRef(state)
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLUListElement | null, HTMLUListElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
 
   useEffect(() => {
     focusedElementRef.current = focusedElement
@@ -102,7 +105,7 @@ export const Tree = forwardRef(function Tree(
   )
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: React.KeyboardEvent<HTMLUListElement>) => {
       if (!focusedElementRef.current) return
 
       if (event.key === 'ArrowDown') {
@@ -199,7 +202,7 @@ export const Tree = forwardRef(function Tree(
   )
 
   const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLDivElement>) => {
+    (event: React.FocusEvent<HTMLUListElement>) => {
       setFocusedElement(event.target)
 
       // Call the element's `focus` handler

package/src/core/components/tree/treeGroup.tsx

@@ -7,7 +7,7 @@ export interface TreeGroupProps {
 
 export function TreeGroup(
   props: TreeGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+    Omit<React.HTMLProps<HTMLUListElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
 ): React.JSX.Element {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()

package/src/core/components/tree/treeItem.tsx

@@ -3,7 +3,8 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {startTransition, useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Box, BoxProps, Flex, Text} from '../../primitives'
+import {Box, Flex, Text} from '../../primitives'
+import {ElementType} from '../../types'
 import {
   treeItemBoxStyle,
   TreeItemBoxStyleProps,
@@ -24,7 +25,7 @@ export interface TreeItemProps {
   /**
    * Allows passing a custom element type to the link component
    */
-  linkAs?: BoxProps['as']
+  linkAs?: ElementType
   padding?: number | number[]
   gap?: number | number[]
   /**

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

@@ -5,19 +5,18 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {useTheme_v2} from '../../theme'
-import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
+import {AvatarPosition, AvatarSize, AvatarStatus, ElementType, Props} from '../../types'
 import {Label} from '../label'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
 
 /**
  * @public
  */
-export interface AvatarProps {
+export interface AvatarOwnProps {
   /** @beta */
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
@@ -31,6 +30,11 @@ export interface AvatarProps {
   title?: string
 }
 
+/**
+ * @public
+ */
+export type AvatarProps<E extends ElementType = 'div'> = Props<AvatarOwnProps, E>
+
 const StyledAvatar = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
   responsiveAvatarSizeStyle,
   avatarStyle.root,
@@ -50,13 +54,8 @@ const InitialsLabel = styled(Label)({
 
 const AvatarImage = styled.svg(avatarStyle.image)
 
-/**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
- * @public
- */
-export const Avatar = forwardRef(function Avatar(
-  props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
+const AvatarComponent = forwardRef(function Avatar(
+  props: AvatarOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -189,4 +188,13 @@ export const Avatar = forwardRef(function Avatar(
     </StyledAvatar>
   )
 })
-Avatar.displayName = 'ForwardRef(Avatar)'
+AvatarComponent.displayName = 'ForwardRef(Avatar)'
+
+/**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
+ * @public
+ */
+export const Avatar = AvatarComponent as unknown as <E extends ElementType = 'div'>(
+  props: AvatarProps<E>,
+) => React.JSX.Element

package/src/core/primitives/badge/badge.tsx

@@ -3,8 +3,8 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {BadgeMode, BadgeTone} from '../../types'
-import {Box, BoxProps} from '../box'
+import {BadgeMode, BadgeTone, ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {Text} from '../text'
 import {ResponsiveRadiusProps} from '../types'
 import {badgeStyle} from './styles'
@@ -13,26 +13,25 @@ import {BadgeStyleProps} from './types'
 /**
  * @public
  */
-export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   /** @deprecated No longer used. */
   mode?: BadgeMode
   tone?: BadgeTone
 }
 
+/**
+ * @public
+ */
+export type BadgeProps<E extends ElementType = 'div'> = Props<BadgeOwnProps, E>
+
 const StyledBadge = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
   responsiveRadiusStyle,
   badgeStyle,
 )
 
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export const Badge = forwardRef(function Badge(
-  props: BadgeProps & React.HTMLProps<HTMLDivElement>,
+const BadgeComponent = forwardRef(function Badge(
+  props: BadgeOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,
   ref,
 ) {
   const {
@@ -59,4 +58,13 @@ export const Badge = forwardRef(function Badge(
     </StyledBadge>
   )
 })
-Badge.displayName = 'ForwardRef(Badge)'
+BadgeComponent.displayName = 'ForwardRef(Badge)'
+
+/**
+ * Badges are used to tag resources.
+ *
+ * @public
+ */
+export const Badge = BadgeComponent as unknown as <E extends ElementType = 'div'>(
+  props: BadgeProps<E>,
+) => React.JSX.Element

package/src/core/primitives/box/__workshop__/asComponent.tsx

@@ -0,0 +1,31 @@
+import {Box, Flex, Text} from '@sanity/ui'
+import {forwardRef} from 'react'
+
+// A custom component with its own props. When passed to `Box`'s `as` prop, these props are
+// inferred on `Box` itself: `href` is required and `target` is optional, and unknown props
+// are rejected by the type checker.
+const Link = forwardRef(function Link(
+  props: {href: string; target?: string} & Omit<
+    React.HTMLProps<HTMLAnchorElement>,
+    'as' | 'href' | 'target'
+  >,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+): React.JSX.Element {
+  const {children, ...restProps} = props
+
+  return (
+    <a {...restProps} ref={ref}>
+      {children}
+    </a>
+  )
+})
+
+export default function AsComponentStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Box as={Link} href="/" padding={4} target="_new">
+        <Text size={1}>As component</Text>
+      </Box>
+    </Flex>
+  )
+}

package/src/core/primitives/box/__workshop__/index.ts

@@ -15,5 +15,10 @@ export default defineScope({
       title: 'Responsive',
       component: lazy(() => import('./responsive')),
     },
+    {
+      name: 'as-component',
+      title: 'As component',
+      component: lazy(() => import('./asComponent')),
+    },
   ],
 })

package/src/core/primitives/box/box.test.tsx

@@ -25,20 +25,28 @@ describe('<Box />', () => {
   it('uses column when gridColumn is not provided', () => {
     render(<Box column={3} />)
 
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$column: [3]}))
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [3]}),
+    )
   })
 
   it('uses gridColumn when provided', () => {
     render(<Box gridColumn={4} />)
 
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$column: [4]}))
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [4]}),
+    )
   })
 
   it('prefers gridColumn over column when both are provided', () => {
     render(<Box column={3} gridColumn={5} />)
 
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$column: [5]}))
-    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(expect.objectContaining({$column: [3]}))
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [5]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$column: [3]}),
+    )
   })
 
   it('supports responsive arrays with gridColumn', () => {