diff --git a/packages/ui/src/components/banner/banner.tsx b/packages/ui/src/components/banner/banner.tsx
index 570dde959..bf16f82d5 100644
--- a/packages/ui/src/components/banner/banner.tsx
+++ b/packages/ui/src/components/banner/banner.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { createClassName } from '../../utilities/create-class-name.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -14,7 +14,7 @@ export type BannerVariant = 'success' | 'warning'
 export const Banner = createComponent<HTMLDivElement, BannerProps>(function (
   { children, icon, variant, ...rest },
   ref
-): JSX.Element {
+) {
   return (
     <div
       {...rest}
diff --git a/packages/ui/src/components/button/button.tsx b/packages/ui/src/components/button/button.tsx
index fb8ecc85e..66a9f4348 100644
--- a/packages/ui/src/components/button/button.tsx
+++ b/packages/ui/src/components/button/button.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../types/event-handler.js'
@@ -35,18 +35,17 @@ export const Button = createComponent<HTMLButtonElement, ButtonProps>(function (
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLButtonElement>): void {
+    function (event: Event.onKeyDown<HTMLButtonElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
@@ -72,10 +71,8 @@ export const Button = createComponent<HTMLButtonElement, ButtonProps>(function (
         {...rest}
         ref={ref}
         disabled={disabled === true}
-        onClick={disabled === true || loading === true ? undefined : onClick}
-        onKeyDown={
-          disabled === true || loading === true ? undefined : handleKeyDown
-        }
+        onClick={loading === true ? undefined : onClick}
+        onKeyDown={handleKeyDown}
         tabIndex={0}
       >
         <div class={styles.children}>{children}</div>
diff --git a/packages/ui/src/components/checkbox/checkbox.tsx b/packages/ui/src/components/checkbox/checkbox.tsx
index 75381e60a..b84d2747d 100644
--- a/packages/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/ui/src/components/checkbox/checkbox.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { IconControlCheckboxChecked12 } from '../../icons/icon-12/icon-control-checkbox-checked-12.js'
@@ -32,27 +32,26 @@ export const Checkbox = createComponent<HTMLInputElement, CheckboxProps>(
       ...rest
     },
     ref
-  ): JSX.Element {
+  ) {
     const handleChange = useCallback(
-      function (event: Event.onChange<HTMLInputElement>): void {
-        const newValue = event.currentTarget.checked
-        onValueChange(newValue)
+      function (event: Event.onChange<HTMLInputElement>) {
         onChange(event)
+        const newValue = event.currentTarget.checked === true
+        onValueChange(newValue)
       },
       [onChange, onValueChange]
     )
 
     const handleKeyDown = useCallback(
-      function (event: Event.onKeyDown<HTMLInputElement>): void {
+      function (event: Event.onKeyDown<HTMLInputElement>) {
         onKeyDown(event)
-        if (event.key !== 'Escape') {
-          return
-        }
-        if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
-        }
-        if (blurOnEscapeKeyDown === true) {
-          event.currentTarget.blur()
+        if (event.key === 'Escape') {
+          if (propagateEscapeKeyDown === false) {
+            event.stopPropagation()
+          }
+          if (blurOnEscapeKeyDown === true) {
+            event.currentTarget.blur()
+          }
         }
       },
       [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
diff --git a/packages/ui/src/components/disclosure/disclosure.tsx b/packages/ui/src/components/disclosure/disclosure.tsx
index eac7437f0..cc3b82c3d 100644
--- a/packages/ui/src/components/disclosure/disclosure.tsx
+++ b/packages/ui/src/components/disclosure/disclosure.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, Fragment, h, JSX } from 'preact'
+import { ComponentChildren, Fragment, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { IconCaretRight16 } from '../../icons/icon-16/icon-caret-right-16.js'
@@ -29,18 +29,17 @@ export const Disclosure = createComponent<HTMLInputElement, DisclosureProps>(
       ...rest
     },
     ref
-  ): JSX.Element {
+  ) {
     const handleKeyDown = useCallback(
-      function (event: Event.onKeyDown<HTMLInputElement>): void {
+      function (event: Event.onKeyDown<HTMLInputElement>) {
         onKeyDown(event)
-        if (event.key !== 'Escape') {
-          return
-        }
-        if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
-        }
-        if (blurOnEscapeKeyDown === true) {
-          event.currentTarget.blur()
+        if (event.key === 'Escape') {
+          if (propagateEscapeKeyDown === false) {
+            event.stopPropagation()
+          }
+          if (blurOnEscapeKeyDown === true) {
+            event.currentTarget.blur()
+          }
         }
       },
       [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
diff --git a/packages/ui/src/components/divider/divider.tsx b/packages/ui/src/components/divider/divider.tsx
index c3f175a64..5abde0821 100644
--- a/packages/ui/src/components/divider/divider.tsx
+++ b/packages/ui/src/components/divider/divider.tsx
@@ -1,10 +1,10 @@
-import { h, JSX } from 'preact'
+import { h } from 'preact'
 
 import { createComponent } from '../../utilities/create-component.js'
 import styles from './divider.module.css'
 
 export const Divider = createComponent<HTMLHRElement, Record<string, never>>(
-  function (rest, ref): JSX.Element {
+  function (rest, ref) {
     return <hr {...rest} ref={ref} class={styles.divider} />
   }
 )
diff --git a/packages/ui/src/components/dropdown/dropdown.tsx b/packages/ui/src/components/dropdown/dropdown.tsx
index 1e7d20bd4..d7d94063c 100644
--- a/packages/ui/src/components/dropdown/dropdown.tsx
+++ b/packages/ui/src/components/dropdown/dropdown.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX, RefObject } from 'preact'
+import { ComponentChildren, h, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
 import menuStyles from '../../css/menu.module.css'
@@ -58,7 +58,7 @@ export const Dropdown = createComponent<HTMLDivElement, DropdownProps>(
       ...rest
     },
     ref
-  ): JSX.Element {
+  ) {
     if (typeof icon === 'string' && icon.length !== 1) {
       throw new Error(`String \`icon\` must be a single character: "${icon}"`)
     }
@@ -91,11 +91,11 @@ export const Dropdown = createComponent<HTMLDivElement, DropdownProps>(
         setSelectedId: setSelectedId
       })
 
-    const triggerBlur = useCallback(function (): void {
+    const triggerBlur = useCallback(function () {
       getCurrentFromRef(rootElementRef).blur()
     }, [])
 
-    const triggerHideMenu = useCallback(function (): void {
+    const triggerHideMenu = useCallback(function () {
       setIsMenuVisible(false)
       setSelectedId(INVALID_ID)
     }, [])
@@ -166,7 +166,7 @@ export const Dropdown = createComponent<HTMLDivElement, DropdownProps>(
     )
 
     const handleRootKeyDown = useCallback(
-      function (event: Event.onKeyDown<HTMLDivElement>): void {
+      function (event: Event.onKeyDown<HTMLDivElement>) {
         const key = event.key
         if (key === 'ArrowUp' || key === 'ArrowDown') {
           if (isMenuVisible === false) {
@@ -239,7 +239,7 @@ export const Dropdown = createComponent<HTMLDivElement, DropdownProps>(
     [])
 
     const handleOptionChange = useCallback(
-      function (event: Event.onChange<HTMLInputElement>): void {
+      function (event: Event.onChange<HTMLInputElement>) {
         const id = event.currentTarget.getAttribute(
           ITEM_ID_DATA_ATTRIBUTE_NAME
         ) as string
@@ -343,10 +343,7 @@ export const Dropdown = createComponent<HTMLDivElement, DropdownProps>(
           ])}
           onMouseDown={handleMenuMouseDown}
         >
-          {options.map(function (
-            option: DropdownOption,
-            index: number
-          ): JSX.Element {
+          {options.map(function (option: DropdownOption, index: number) {
             if (typeof option === 'string') {
               return <hr key={index} class={menuStyles.optionSeparator} />
             }
diff --git a/packages/ui/src/components/file-upload/file-upload-button/file-upload-button.tsx b/packages/ui/src/components/file-upload/file-upload-button/file-upload-button.tsx
index f888adc54..79431be11 100644
--- a/packages/ui/src/components/file-upload/file-upload-button/file-upload-button.tsx
+++ b/packages/ui/src/components/file-upload/file-upload-button/file-upload-button.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../../types/event-handler.js'
@@ -21,6 +21,7 @@ export interface FileUploadButtonProps
   multiple?: boolean
   onChange?: EventHandler.onChange<HTMLInputElement>
   onClick?: EventHandler.onClick<HTMLInputElement>
+  onMouseDown?: EventHandler.onMouseDown<HTMLInputElement>
   onSelectedFiles?: EventHandler.onSelectedFiles
   secondary?: boolean
 }
@@ -39,50 +40,58 @@ export const FileUploadButton = createComponent<
     multiple = false,
     onChange = noop,
     onClick = noop,
-    onSelectedFiles = noop,
     onKeyDown = noop,
+    onMouseDown = noop,
+    onSelectedFiles = noop,
     propagateEscapeKeyDown = true,
     secondary = false,
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const handleChange = useCallback(
-    function (event: Event.onChange<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>) {
       onChange(event)
-      if (disabled === true || loading === true) {
-        return
+      const fileList = event.currentTarget.files
+      if (fileList === null) {
+        throw new Error('`event.currentTarget.files` is `null`')
+      }
+      const files = parseFileList(fileList)
+      if (files.length > 0) {
+        onSelectedFiles(files)
       }
-      const files = Array.prototype.slice
-        .call(event.currentTarget.files)
-        .sort(fileComparator)
-      onSelectedFiles(files)
     },
-    [disabled, loading, onChange, onSelectedFiles]
+    [onChange, onSelectedFiles]
   )
 
   const handleClick = useCallback(
-    function (event: Event.onClick<HTMLInputElement>): void {
+    function (event: Event.onClick<HTMLInputElement>) {
       onClick(event)
-      if (disabled === true || loading === true) {
-        return
+      if (loading === true) {
+        event.preventDefault()
       }
+    },
+    [onClick, loading]
+  )
+
+  const handleMouseDown = useCallback(
+    function (event: Event.onClick<HTMLInputElement>) {
+      onMouseDown(event)
       event.currentTarget.focus()
     },
-    [disabled, loading, onClick]
+    [onMouseDown]
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
@@ -121,6 +130,7 @@ export const FileUploadButton = createComponent<
         onChange={handleChange}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
+        onMouseDown={handleMouseDown}
         tabIndex={0}
         title=""
         type="file"
@@ -131,3 +141,7 @@ export const FileUploadButton = createComponent<
     </div>
   )
 })
+
+function parseFileList(fileList: FileList): Array<File> {
+  return Array.prototype.slice.call(fileList).sort(fileComparator)
+}
diff --git a/packages/ui/src/components/file-upload/file-upload-button/stories/file-upload-button-default.stories.tsx b/packages/ui/src/components/file-upload/file-upload-button/stories/file-upload-button-default.stories.tsx
index 9e8093ead..61ff7ac6d 100644
--- a/packages/ui/src/components/file-upload/file-upload-button/stories/file-upload-button-default.stories.tsx
+++ b/packages/ui/src/components/file-upload/file-upload-button/stories/file-upload-button-default.stories.tsx
@@ -59,8 +59,8 @@ export const Loading = function () {
 }
 
 export const LoadingFocused = function () {
-  function handleSelectedFiles(files: Array<File>) {
-    console.log(files)
+  function handleSelectedFiles() {
+    throw new Error('This function should not be called')
   }
   return (
     <FileUploadButton
diff --git a/packages/ui/src/components/file-upload/file-upload-button/stories/file-upload-button-secondary.stories.tsx b/packages/ui/src/components/file-upload/file-upload-button/stories/file-upload-button-secondary.stories.tsx
index cf9fc415a..d5259a28d 100644
--- a/packages/ui/src/components/file-upload/file-upload-button/stories/file-upload-button-secondary.stories.tsx
+++ b/packages/ui/src/components/file-upload/file-upload-button/stories/file-upload-button-secondary.stories.tsx
@@ -60,8 +60,8 @@ export const Loading = function () {
 }
 
 export const LoadingFocused = function () {
-  function handleSelectedFiles(files: Array<File>) {
-    console.log(files)
+  function handleSelectedFiles() {
+    throw new Error('This function should not be called')
   }
   return (
     <FileUploadButton
diff --git a/packages/ui/src/components/file-upload/file-upload-dropzone/file-upload-dropzone.tsx b/packages/ui/src/components/file-upload/file-upload-dropzone/file-upload-dropzone.tsx
index a629f424b..e0d9ce108 100644
--- a/packages/ui/src/components/file-upload/file-upload-dropzone/file-upload-dropzone.tsx
+++ b/packages/ui/src/components/file-upload/file-upload-dropzone/file-upload-dropzone.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback, useState } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../../types/event-handler.js'
@@ -44,11 +44,11 @@ export const FileUploadDropzone = createComponent<
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const [isDropActive, setIsDropActive] = useState<boolean>(false)
 
   const handleBlur = useCallback(
-    function (event: Event.onBlur<HTMLInputElement>): void {
+    function (event: Event.onBlur<HTMLInputElement>) {
       onBlur(event)
       setIsDropActive(false)
     },
@@ -56,13 +56,16 @@ export const FileUploadDropzone = createComponent<
   )
 
   const handleChange = useCallback(
-    function (event: Event.onChange<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>) {
       onChange(event)
-      const files = event.currentTarget.files
-      if (files === null) {
+      const fileList = event.currentTarget.files
+      if (fileList === null) {
         throw new Error('`event.currentTarget.files` is `null`')
       }
-      onSelectedFiles(filterFiles({ acceptedFileTypes, files }))
+      const files = parseFileList({ acceptedFileTypes, fileList })
+      if (files.length > 0) {
+        onSelectedFiles(files)
+      }
     },
     [acceptedFileTypes, onChange, onSelectedFiles]
   )
@@ -76,7 +79,7 @@ export const FileUploadDropzone = createComponent<
   )
 
   const handleDragOver = useCallback(
-    function (event: Event.onDragOver<HTMLInputElement>): void {
+    function (event: Event.onDragOver<HTMLInputElement>) {
       onDragOver(event)
       event.preventDefault()
       setIsDropActive(true)
@@ -85,7 +88,7 @@ export const FileUploadDropzone = createComponent<
   )
 
   const handleDragEnd = useCallback(
-    function (event: Event.onDragEnd<HTMLInputElement>): void {
+    function (event: Event.onDragEnd<HTMLInputElement>) {
       onDragEnd(event)
       event.preventDefault()
       setIsDropActive(false)
@@ -94,30 +97,32 @@ export const FileUploadDropzone = createComponent<
   )
 
   const handleDrop = useCallback(
-    function (event: Event.onDrop<HTMLInputElement>): void {
+    function (event: Event.onDrop<HTMLInputElement>) {
       onDrop(event)
       if (event.dataTransfer === null) {
         throw new Error('`event.dataTransfer` is `null`')
       }
       event.preventDefault()
-      const files = event.dataTransfer.files
-      onSelectedFiles(filterFiles({ acceptedFileTypes, files }))
+      const fileList = event.dataTransfer.files
+      const files = parseFileList({ acceptedFileTypes, fileList })
+      if (files.length > 0) {
+        onSelectedFiles(files)
+      }
       setIsDropActive(false)
     },
     [acceptedFileTypes, onDrop, onSelectedFiles]
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
@@ -158,12 +163,12 @@ export const FileUploadDropzone = createComponent<
   )
 })
 
-function filterFiles(options: {
-  files: FileList
+function parseFileList(options: {
+  fileList: FileList
   acceptedFileTypes: Array<string>
 }): Array<File> {
-  const { files, acceptedFileTypes } = options
-  const result = Array.prototype.slice.call(files).sort(fileComparator)
+  const { fileList, acceptedFileTypes } = options
+  const result = Array.prototype.slice.call(fileList).sort(fileComparator)
   if (acceptedFileTypes.length === 0) {
     return result
   }
diff --git a/packages/ui/src/components/icon-button/icon-button.tsx b/packages/ui/src/components/icon-button/icon-button.tsx
index aaf146297..ca685cfb2 100644
--- a/packages/ui/src/components/icon-button/icon-button.tsx
+++ b/packages/ui/src/components/icon-button/icon-button.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../types/event-handler.js'
@@ -26,18 +26,17 @@ export const IconButton = createComponent<HTMLButtonElement, IconButtonProps>(
       ...rest
     },
     ref
-  ): JSX.Element {
+  ) {
     const handleKeyDown = useCallback(
-      function (event: Event.onKeyDown<HTMLButtonElement>): void {
+      function (event: Event.onKeyDown<HTMLButtonElement>) {
         onKeyDown(event)
-        if (event.key !== 'Escape') {
-          return
-        }
-        if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
-        }
-        if (blurOnEscapeKeyDown === true) {
-          event.currentTarget.blur()
+        if (event.key === 'Escape') {
+          if (propagateEscapeKeyDown === false) {
+            event.stopPropagation()
+          }
+          if (blurOnEscapeKeyDown === true) {
+            event.currentTarget.blur()
+          }
         }
       },
       [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
@@ -49,8 +48,8 @@ export const IconButton = createComponent<HTMLButtonElement, IconButtonProps>(
         ref={ref}
         class={styles.iconButton}
         disabled={disabled === true}
-        onClick={disabled === true ? undefined : onClick}
-        onKeyDown={disabled === true ? undefined : handleKeyDown}
+        onClick={onClick}
+        onKeyDown={handleKeyDown}
         tabIndex={0}
       >
         <div class={styles.icon}>{children}</div>
diff --git a/packages/ui/src/components/icon-toggle-button/icon-toggle-button.tsx b/packages/ui/src/components/icon-toggle-button/icon-toggle-button.tsx
index 07d537e14..c884511ea 100644
--- a/packages/ui/src/components/icon-toggle-button/icon-toggle-button.tsx
+++ b/packages/ui/src/components/icon-toggle-button/icon-toggle-button.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../types/event-handler.js'
@@ -33,26 +33,26 @@ export const IconToggleButton = createComponent<
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const handleChange = useCallback(
-    function (event: Event.onChange<HTMLInputElement>): void {
-      onValueChange(!(value === true))
+    function (event: Event.onChange<HTMLInputElement>) {
       onChange(event)
+      const newValue = event.currentTarget.checked === true
+      onValueChange(newValue)
     },
-    [onChange, onValueChange, value]
+    [onChange, onValueChange]
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
@@ -72,7 +72,7 @@ export const IconToggleButton = createComponent<
         class={styles.input}
         disabled={disabled === true}
         onChange={handleChange}
-        onKeyDown={disabled === true ? undefined : handleKeyDown}
+        onKeyDown={handleKeyDown}
         tabIndex={0}
         type="checkbox"
       />
diff --git a/packages/ui/src/components/layer/layer.tsx b/packages/ui/src/components/layer/layer.tsx
index e80f148db..841bae153 100644
--- a/packages/ui/src/components/layer/layer.tsx
+++ b/packages/ui/src/components/layer/layer.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../types/event-handler.js'
@@ -35,9 +35,9 @@ export const Layer = createComponent<HTMLInputElement, LayerProps>(function (
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const handleChange = useCallback(
-    function (event: Event.onChange<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>) {
       onChange(event)
       const newValue = event.currentTarget.checked === true
       onValueChange(newValue)
@@ -46,16 +46,15 @@ export const Layer = createComponent<HTMLInputElement, LayerProps>(function (
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
diff --git a/packages/ui/src/components/layer/stories/layer-selected.stories.tsx b/packages/ui/src/components/layer/stories/layer-selected.stories.tsx
index fedbaa305..2d4b4be17 100644
--- a/packages/ui/src/components/layer/stories/layer-selected.stories.tsx
+++ b/packages/ui/src/components/layer/stories/layer-selected.stories.tsx
@@ -57,7 +57,6 @@ export const Bold = function () {
   return (
     <Layer
       bold
-      description="Description"
       icon={<IconLayerFrame16 />}
       onChange={handleChange}
       value={value}
diff --git a/packages/ui/src/components/layer/stories/layer-unselected.stories.tsx b/packages/ui/src/components/layer/stories/layer-unselected.stories.tsx
index c1d89e251..b086c218b 100644
--- a/packages/ui/src/components/layer/stories/layer-unselected.stories.tsx
+++ b/packages/ui/src/components/layer/stories/layer-unselected.stories.tsx
@@ -57,7 +57,6 @@ export const Bold = function () {
   return (
     <Layer
       bold
-      description="Description"
       icon={<IconLayerFrame16 />}
       onChange={handleChange}
       value={value}
diff --git a/packages/ui/src/components/loading-indicator/loading-indicator.tsx b/packages/ui/src/components/loading-indicator/loading-indicator.tsx
index eb4a1dd92..b227f9421 100644
--- a/packages/ui/src/components/loading-indicator/loading-indicator.tsx
+++ b/packages/ui/src/components/loading-indicator/loading-indicator.tsx
@@ -1,4 +1,4 @@
-import { h, JSX } from 'preact'
+import { h } from 'preact'
 
 import { IconColor } from '../../types/colors.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -11,7 +11,7 @@ export type LoadingIndicatorProps = {
 export const LoadingIndicator = createComponent<
   HTMLDivElement,
   LoadingIndicatorProps
->(function ({ color, ...rest }, ref): JSX.Element {
+>(function ({ color, ...rest }, ref) {
   return (
     <div {...rest} ref={ref} class={styles.loadingIndicator}>
       <svg
diff --git a/packages/ui/src/components/modal/modal.tsx b/packages/ui/src/components/modal/modal.tsx
index 6fdbd5cb1..538fb3a68 100644
--- a/packages/ui/src/components/modal/modal.tsx
+++ b/packages/ui/src/components/modal/modal.tsx
@@ -2,7 +2,9 @@ import { ComponentChild, Fragment, h, JSX, RefObject, render } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
 
 import { IconCross32 } from '../../icons/icon-32/icon-cross-32.js'
+import { EventHandler } from '../../types/event-handler.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
 import { createFocusTrapKeyDownHandler } from '../../utilities/private/create-focus-trap-key-down-handler.js'
 import { getFocusableElements } from '../../utilities/private/get-focusable-elements.js'
 import { IconButton } from '../icon-button/icon-button.js'
@@ -14,10 +16,10 @@ export type ModalProps = {
   closeButtonIcon?: ComponentChild
   closeButtonPosition?: ModalCloseButtonPosition
   open: boolean
-  noTransition?: boolean
-  onCloseButtonClick?: JSX.MouseEventHandler<HTMLButtonElement>
+  transition?: boolean
+  onCloseButtonClick?: EventHandler.onClick<HTMLButtonElement>
   onEscapeKeyDown?: (event: KeyboardEvent) => void
-  onOverlayClick?: JSX.MouseEventHandler<HTMLDivElement>
+  onOverlayClick?: EventHandler.onClick<HTMLDivElement>
   position?: ModalPosition
   title?: string
 }
@@ -26,33 +28,36 @@ export type ModalPosition = 'bottom' | 'center' | 'left' | 'right'
 
 const rootElements: Array<HTMLDivElement> = [] // Stack of currently-open modals
 
-export const Modal = function ({
-  children,
-  closeButtonIcon = <IconCross32 />,
-  closeButtonPosition = 'right',
-  open,
-  noTransition = false,
-  onCloseButtonClick,
-  onEscapeKeyDown,
-  onOverlayClick,
-  position = 'center',
-  title,
-  ...rest
-}: ModalProps): null {
+export const Modal = createComponent<HTMLDivElement, ModalProps>(function (
+  {
+    children,
+    closeButtonIcon = <IconCross32 />,
+    closeButtonPosition = 'right',
+    open,
+    transition = true,
+    onCloseButtonClick,
+    onEscapeKeyDown,
+    onOverlayClick,
+    position = 'center',
+    title,
+    ...rest
+  },
+  ref
+): null {
   const rootElementRef: RefObject<HTMLDivElement> = useRef(null)
   const previousFocusedElementRef: RefObject<HTMLElement> = useRef(null)
 
-  useEffect(function (): () => void {
+  useEffect(function () {
     const rootElement = document.createElement('div')
     document.body.appendChild(rootElement)
     rootElementRef.current = rootElement
-    return function (): void {
+    return function () {
       document.body.removeChild(rootElement)
     }
   }, [])
 
   useEffect(
-    function (): () => void {
+    function () {
       if (rootElementRef.current === null) {
         throw new Error('`rootElementRef.current` is `null`')
       }
@@ -65,7 +70,7 @@ export const Modal = function ({
         }
       }
       window.addEventListener('keydown', handleTabKeyDown)
-      return function (): void {
+      return function () {
         window.removeEventListener('keydown', handleTabKeyDown)
       }
     },
@@ -73,7 +78,7 @@ export const Modal = function ({
   )
 
   useEffect(
-    function (): () => void {
+    function () {
       function handleEscapeKeyDown(event: KeyboardEvent) {
         if (
           open === false ||
@@ -86,7 +91,7 @@ export const Modal = function ({
         onEscapeKeyDown(event)
       }
       window.addEventListener('keydown', handleEscapeKeyDown)
-      return function (): void {
+      return function () {
         window.removeEventListener('keydown', handleEscapeKeyDown)
       }
     },
@@ -94,7 +99,7 @@ export const Modal = function ({
   )
 
   useEffect(
-    function (): () => void {
+    function () {
       if (rootElementRef.current === null) {
         throw new Error('`rootElementRef.current` is `null`')
       }
@@ -126,7 +131,7 @@ export const Modal = function ({
         rootElements.pop()
         rootElementRef.current.style.cssText = 'position:static'
       }
-      return function (): void {
+      return function () {
         if (previousFocusedElementRef.current !== null) {
           previousFocusedElementRef.current.focus()
         }
@@ -136,7 +141,22 @@ export const Modal = function ({
   )
 
   useEffect(
-    function (): void {
+    function () {
+      if (ref === null) {
+        return
+      }
+      const rootElement = rootElementRef.current
+      if (typeof ref === 'function') {
+        ref(rootElement)
+        return
+      }
+      ref.current = rootElement
+    },
+    [ref]
+  )
+
+  useEffect(
+    function () {
       if (rootElementRef.current === null) {
         throw new Error('`rootElementRef.current` is `null`')
       }
@@ -147,7 +167,7 @@ export const Modal = function ({
             class={createClassName([
               styles.modal,
               open === true ? styles.open : null,
-              noTransition === true ? styles.noTransition : null,
+              transition === false ? styles.noTransition : null,
               styles[position]
             ])}
           >
@@ -192,15 +212,15 @@ export const Modal = function ({
       children,
       closeButtonIcon,
       closeButtonPosition,
-      noTransition,
       onCloseButtonClick,
       onOverlayClick,
       open,
       position,
       rest,
-      title
+      title,
+      transition
     ]
   )
 
   return null
-}
+})
diff --git a/packages/ui/src/components/modal/stories/modal-bottom.stories.tsx b/packages/ui/src/components/modal/stories/modal-bottom.stories.tsx
index 9e5d69fd0..7caec00a3 100644
--- a/packages/ui/src/components/modal/stories/modal-bottom.stories.tsx
+++ b/packages/ui/src/components/modal/stories/modal-bottom.stories.tsx
@@ -42,7 +42,7 @@ export const Default = function () {
   )
 }
 
-export const NoTransition = function () {
+export const TransitionFalse = function () {
   const [open, setOpen] = useState<boolean>(false)
   function handleOpenButtonClick(
     event: JSX.TargetedMouseEvent<HTMLButtonElement>
@@ -60,7 +60,7 @@ export const NoTransition = function () {
   return (
     <Fragment>
       <Button onClick={handleOpenButtonClick}>Open</Button>
-      <Modal noTransition open={open} position="bottom">
+      <Modal open={open} position="bottom" transition={false}>
         <div style={style}>
           <Button onClick={handleCloseButtonClick} secondary>
             Close
diff --git a/packages/ui/src/components/modal/stories/modal-default.stories.tsx b/packages/ui/src/components/modal/stories/modal-default.stories.tsx
index f03a14946..ed010d9c7 100644
--- a/packages/ui/src/components/modal/stories/modal-default.stories.tsx
+++ b/packages/ui/src/components/modal/stories/modal-default.stories.tsx
@@ -42,7 +42,7 @@ export const Default = function () {
   )
 }
 
-export const NoTransition = function () {
+export const TransitionFalse = function () {
   const [open, setOpen] = useState<boolean>(false)
   function handleOpenButtonClick(
     event: JSX.TargetedMouseEvent<HTMLButtonElement>
@@ -60,7 +60,7 @@ export const NoTransition = function () {
   return (
     <Fragment>
       <Button onClick={handleOpenButtonClick}>Open</Button>
-      <Modal noTransition open={open}>
+      <Modal open={open} transition={false}>
         <div style={style}>
           <Button onClick={handleCloseButtonClick} secondary>
             Close
diff --git a/packages/ui/src/components/modal/stories/modal-left.stories.tsx b/packages/ui/src/components/modal/stories/modal-left.stories.tsx
index c3da03728..c6f1ac3f6 100644
--- a/packages/ui/src/components/modal/stories/modal-left.stories.tsx
+++ b/packages/ui/src/components/modal/stories/modal-left.stories.tsx
@@ -42,7 +42,7 @@ export const Default = function () {
   )
 }
 
-export const NoTransition = function () {
+export const TransitionFalse = function () {
   const [open, setOpen] = useState<boolean>(false)
   function handleOpenButtonClick(
     event: JSX.TargetedMouseEvent<HTMLButtonElement>
@@ -60,7 +60,7 @@ export const NoTransition = function () {
   return (
     <Fragment>
       <Button onClick={handleOpenButtonClick}>Open</Button>
-      <Modal noTransition open={open} position="left">
+      <Modal open={open} position="left" transition={false}>
         <div style={style}>
           <Button onClick={handleCloseButtonClick} secondary>
             Close
diff --git a/packages/ui/src/components/modal/stories/modal-right.stories.tsx b/packages/ui/src/components/modal/stories/modal-right.stories.tsx
index eeea160ec..4138e1108 100644
--- a/packages/ui/src/components/modal/stories/modal-right.stories.tsx
+++ b/packages/ui/src/components/modal/stories/modal-right.stories.tsx
@@ -42,7 +42,7 @@ export const Default = function () {
   )
 }
 
-export const NoTransition = function () {
+export const TransitionFalse = function () {
   const [open, setOpen] = useState<boolean>(false)
   function handleOpenButtonClick(
     event: JSX.TargetedMouseEvent<HTMLButtonElement>
@@ -60,7 +60,7 @@ export const NoTransition = function () {
   return (
     <Fragment>
       <Button onClick={handleOpenButtonClick}>Open</Button>
-      <Modal noTransition open={open} position="right">
+      <Modal open={open} position="right" transition={false}>
         <div style={style}>
           <Button onClick={handleCloseButtonClick} secondary>
             Close
diff --git a/packages/ui/src/components/preview/preview.tsx b/packages/ui/src/components/preview/preview.tsx
index 45611f88b..ad94cd8c3 100644
--- a/packages/ui/src/components/preview/preview.tsx
+++ b/packages/ui/src/components/preview/preview.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { createComponent } from '../../utilities/create-component.js'
 import style from './preview.module.css'
@@ -10,7 +10,7 @@ export type PreviewProps = {
 export const Preview = createComponent<HTMLDivElement, PreviewProps>(function (
   { children, ...rest },
   ref
-): JSX.Element {
+) {
   return (
     <div {...rest} ref={ref} class={style.preview}>
       {children}
diff --git a/packages/ui/src/components/radio-buttons/radio-buttons.tsx b/packages/ui/src/components/radio-buttons/radio-buttons.tsx
index 176140292..7a7e8aa89 100644
--- a/packages/ui/src/components/radio-buttons/radio-buttons.tsx
+++ b/packages/ui/src/components/radio-buttons/radio-buttons.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Stack, StackSpace } from '../../layout/stack/stack.js'
@@ -41,30 +41,29 @@ export const RadioButtons = createComponent<HTMLDivElement, RadioButtonsProps>(
       ...rest
     },
     ref
-  ): JSX.Element {
+  ) {
     const handleChange = useCallback(
-      function (event: Event.onChange<HTMLInputElement>): void {
+      function (event: Event.onChange<HTMLInputElement>) {
+        onChange(event)
         const id = event.currentTarget.getAttribute(
           ITEM_ID_DATA_ATTRIBUTE_NAME
         ) as string
         const newValue = options[parseInt(id, 10)].value
         onValueChange(newValue)
-        onChange(event)
       },
       [onChange, onValueChange, options]
     )
 
     const handleKeyDown = useCallback(
-      function (event: Event.onKeyDown<HTMLInputElement>): void {
+      function (event: Event.onKeyDown<HTMLInputElement>) {
         onKeyDown(event)
-        if (event.key !== 'Escape') {
-          return
-        }
-        if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
-        }
-        if (blurOnEscapeKeyDown === true) {
-          event.currentTarget.blur()
+        if (event.key === 'Escape') {
+          if (propagateEscapeKeyDown === false) {
+            event.stopPropagation()
+          }
+          if (blurOnEscapeKeyDown === true) {
+            event.currentTarget.blur()
+          }
         }
       },
       [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
@@ -73,10 +72,7 @@ export const RadioButtons = createComponent<HTMLDivElement, RadioButtonsProps>(
     return (
       <div {...rest} ref={ref} class={styles.radioButtons}>
         <Stack space={space}>
-          {options.map(function (
-            option: RadioButtonsOption,
-            index: number
-          ): JSX.Element {
+          {options.map(function (option: RadioButtonsOption, index: number) {
             const children =
               typeof option.children === 'undefined'
                 ? `${option.value}`
diff --git a/packages/ui/src/components/range-slider/range-slider.tsx b/packages/ui/src/components/range-slider/range-slider.tsx
index 98eff21f3..c3b741623 100644
--- a/packages/ui/src/components/range-slider/range-slider.tsx
+++ b/packages/ui/src/components/range-slider/range-slider.tsx
@@ -1,4 +1,4 @@
-import { h, JSX } from 'preact'
+import { h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../types/event-handler.js'
@@ -37,7 +37,7 @@ export const RangeSlider = createComponent<HTMLInputElement, RangeSliderProps>(
       ...rest
     },
     ref
-  ): JSX.Element {
+  ) {
     const handleInput = useCallback(
       function (event: Event.onInput<HTMLInputElement>) {
         onInput(event)
@@ -49,16 +49,15 @@ export const RangeSlider = createComponent<HTMLInputElement, RangeSliderProps>(
     )
 
     const handleKeyDown = useCallback(
-      function (event: Event.onKeyDown<HTMLInputElement>): void {
+      function (event: Event.onKeyDown<HTMLInputElement>) {
         onKeyDown(event)
-        if (event.key !== 'Escape') {
-          return
-        }
-        if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
-        }
-        if (blurOnEscapeKeyDown === true) {
-          event.currentTarget.blur()
+        if (event.key === 'Escape') {
+          if (propagateEscapeKeyDown === false) {
+            event.stopPropagation()
+          }
+          if (blurOnEscapeKeyDown === true) {
+            event.currentTarget.blur()
+          }
         }
       },
       [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
diff --git a/packages/ui/src/components/search-textbox/search-textbox.tsx b/packages/ui/src/components/search-textbox/search-textbox.tsx
index 808656052..16a0396c1 100644
--- a/packages/ui/src/components/search-textbox/search-textbox.tsx
+++ b/packages/ui/src/components/search-textbox/search-textbox.tsx
@@ -1,4 +1,4 @@
-import { h, JSX, RefObject } from 'preact'
+import { h, RefObject } from 'preact'
 import { useCallback, useRef } from 'preact/hooks'
 
 import { IconCross32 } from '../../icons/icon-32/icon-cross-32.js'
@@ -45,10 +45,10 @@ export const SearchTextbox = createComponent<
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const inputElementRef: RefObject<HTMLInputElement> = useRef(null)
 
-  const handleClearButtonClick = useCallback(function (): void {
+  const handleClearButtonClick = useCallback(function () {
     const inputElement = getCurrentFromRef(inputElementRef)
     inputElement.value = EMPTY_STRING
     const inputEvent = new window.Event('input', {
@@ -60,7 +60,7 @@ export const SearchTextbox = createComponent<
   }, [])
 
   const handleFocus = useCallback(
-    function (event: Event.onFocus<HTMLInputElement>): void {
+    function (event: Event.onFocus<HTMLInputElement>) {
       onFocus(event)
       event.currentTarget.select()
     },
@@ -68,7 +68,7 @@ export const SearchTextbox = createComponent<
   )
 
   const handleInput = useCallback(
-    function (event: Event.onInput<HTMLInputElement>): void {
+    function (event: Event.onInput<HTMLInputElement>) {
       onValueInput(event.currentTarget.value)
       onInput(event)
     },
@@ -76,7 +76,7 @@ export const SearchTextbox = createComponent<
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
       if (event.key !== 'Escape') {
         return
diff --git a/packages/ui/src/components/segmented-control/segmented-control.tsx b/packages/ui/src/components/segmented-control/segmented-control.tsx
index 613e453b2..161632a41 100644
--- a/packages/ui/src/components/segmented-control/segmented-control.tsx
+++ b/packages/ui/src/components/segmented-control/segmented-control.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../types/event-handler.js'
@@ -37,9 +37,9 @@ export const SegmentedControl = createComponent<
   propagateEscapeKeyDown = true,
   value,
   ...rest
-}): JSX.Element {
+}) {
   const handleChange = useCallback(
-    function (event: Event.onChange<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>) {
       const id = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
       ) as string
@@ -51,16 +51,15 @@ export const SegmentedControl = createComponent<
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
@@ -74,10 +73,7 @@ export const SegmentedControl = createComponent<
       ])}
     >
       <div class={styles.labels}>
-        {options.map(function (
-          option: SegmentedControlOption,
-          index: number
-        ): JSX.Element {
+        {options.map(function (option: SegmentedControlOption, index: number) {
           const children =
             typeof option.children === 'undefined'
               ? `${option.value}`
diff --git a/packages/ui/src/components/selectable-item/selectable-item.tsx b/packages/ui/src/components/selectable-item/selectable-item.tsx
index 8c655393e..95a35feb9 100644
--- a/packages/ui/src/components/selectable-item/selectable-item.tsx
+++ b/packages/ui/src/components/selectable-item/selectable-item.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { IconMenuCheckmarkChecked16 } from '../../icons/icon-16/icon-menu-checkmark-checked-16.js'
@@ -38,26 +38,26 @@ export const SelectableItem = createComponent<
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const handleChange = useCallback(
-    function (event: Event.onChange<HTMLInputElement>): void {
-      onValueChange(!(value === true))
+    function (event: Event.onChange<HTMLInputElement>) {
       onChange(event)
+      const newValue = !(value === true)
+      onValueChange(newValue)
     },
     [onChange, onValueChange, value]
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
diff --git a/packages/ui/src/components/tabs/tabs.tsx b/packages/ui/src/components/tabs/tabs.tsx
index 9225f9131..208fbff40 100644
--- a/packages/ui/src/components/tabs/tabs.tsx
+++ b/packages/ui/src/components/tabs/tabs.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, Fragment, h, JSX } from 'preact'
+import { ComponentChildren, Fragment, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../types/event-handler.js'
@@ -32,9 +32,9 @@ export const Tabs = createComponent<HTMLDivElement, TabsProps>(function (
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const handleChange = useCallback(
-    function (event: Event.onChange<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>) {
       const id = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
       ) as string
@@ -46,16 +46,15 @@ export const Tabs = createComponent<HTMLDivElement, TabsProps>(function (
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
@@ -68,7 +67,7 @@ export const Tabs = createComponent<HTMLDivElement, TabsProps>(function (
   return (
     <Fragment>
       <div ref={ref} class={styles.tabs}>
-        {options.map(function (option: TabsOption, index: number): JSX.Element {
+        {options.map(function (option: TabsOption, index: number) {
           return (
             <label key={index} class={styles.label}>
               <input
diff --git a/packages/ui/src/components/text/text.tsx b/packages/ui/src/components/text/text.tsx
index a808c2c4d..238fb3a4a 100644
--- a/packages/ui/src/components/text/text.tsx
+++ b/packages/ui/src/components/text/text.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { createClassName } from '../../utilities/create-class-name.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -16,7 +16,7 @@ export const Text = createComponent<HTMLDivElement, TextProps>(function ({
   children,
   numeric = false,
   ...rest
-}): JSX.Element {
+}) {
   return (
     <div
       {...rest}
diff --git a/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx b/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx
index 05f7e2ffb..cd23459b8 100644
--- a/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx
+++ b/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX, RefObject } from 'preact'
+import { ComponentChildren, h, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
 import menuStyles from '../../../css/menu.module.css'
@@ -84,7 +84,7 @@ export const TextboxAutocomplete = createComponent<
     ...rest
   },
   ref
-): JSX.Element {
+) {
   if (typeof icon === 'string' && icon.length !== 1) {
     throw new Error(`String \`icon\` must be a single character: ${icon}`)
   }
@@ -107,7 +107,7 @@ export const TextboxAutocomplete = createComponent<
   // console.table([{ isMenuVisible, selectedId, originalValue, editedValue, value }])
 
   // Adjust the menu scroll position so that the selected option is always visible
-  const updateScrollPosition = useCallback(function (id: Id): void {
+  const updateScrollPosition = useCallback(function (id: Id) {
     const menuElement = getCurrentFromRef(menuElementRef)
     if (id === INVALID_ID) {
       menuElement.scrollTop = 0
@@ -133,7 +133,7 @@ export const TextboxAutocomplete = createComponent<
   }, [])
 
   const updateEditedValue = useCallback(
-    function (editedValue: string): void {
+    function (editedValue: string) {
       const newId = getIdByValue(options, editedValue)
       if (newId === INVALID_ID) {
         // `newValue` does not match any option in `options`
@@ -150,11 +150,11 @@ export const TextboxAutocomplete = createComponent<
     [options, updateScrollPosition]
   )
 
-  const triggerBlur = useCallback(function (): void {
+  const triggerBlur = useCallback(function () {
     getCurrentFromRef(inputElementRef).blur()
   }, [])
 
-  const triggerHideMenu = useCallback(function (): void {
+  const triggerHideMenu = useCallback(function () {
     setIsMenuVisible(false)
     setOriginalValue(EMPTY_STRING)
     setEditedValue(EMPTY_STRING)
@@ -162,7 +162,7 @@ export const TextboxAutocomplete = createComponent<
   }, [])
 
   const triggerShowMenu = useCallback(
-    function (): void {
+    function () {
       updateMenuElementMaxHeight(
         getCurrentFromRef(rootElementRef),
         getCurrentFromRef(menuElementRef),
@@ -176,7 +176,7 @@ export const TextboxAutocomplete = createComponent<
   )
 
   const handleFocus = useCallback(
-    function (event: Event.onFocus<HTMLInputElement>): void {
+    function (event: Event.onFocus<HTMLInputElement>) {
       event.currentTarget.select()
       if (isMenuVisible === false) {
         triggerShowMenu()
@@ -186,7 +186,7 @@ export const TextboxAutocomplete = createComponent<
   )
 
   const handleInput = useCallback(
-    function (event: Event.onInput<HTMLInputElement>): void {
+    function (event: Event.onInput<HTMLInputElement>) {
       if (isMenuVisible === false) {
         triggerShowMenu()
       }
@@ -199,7 +199,7 @@ export const TextboxAutocomplete = createComponent<
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       const inputElement = event.currentTarget
       const key = event.key
       if (key === 'ArrowUp' || key === 'ArrowDown') {
@@ -305,7 +305,7 @@ export const TextboxAutocomplete = createComponent<
   )
 
   const handleMouseDown = useCallback(
-    function (): void {
+    function () {
       if (isMenuVisible === false) {
         triggerShowMenu()
       }
@@ -314,7 +314,7 @@ export const TextboxAutocomplete = createComponent<
   )
 
   const handlePaste = useCallback(
-    function (event: Event.onPaste<HTMLInputElement>): void {
+    function (event: Event.onPaste<HTMLInputElement>) {
       if (strict === false) {
         return
       }
@@ -333,7 +333,7 @@ export const TextboxAutocomplete = createComponent<
   )
 
   const handleOptionChange = useCallback(
-    function (event: Event.onChange<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>) {
       const newId = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
       ) as string
@@ -357,7 +357,7 @@ export const TextboxAutocomplete = createComponent<
   )
 
   const handleOptionMouseMove = useCallback(
-    function (event: Event.onMouseMove<HTMLInputElement>): void {
+    function (event: Event.onMouseMove<HTMLInputElement>) {
       const newId = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
       ) as string
@@ -369,7 +369,7 @@ export const TextboxAutocomplete = createComponent<
   )
 
   const handleMouseDownOutside = useCallback(
-    function (): void {
+    function () {
       if (isMenuVisible === false) {
         return
       }
@@ -447,7 +447,7 @@ export const TextboxAutocomplete = createComponent<
               : textboxAutocompleteStyles.bottom
           ])}
         >
-          {options.map(function (option: Option, index: number): JSX.Element {
+          {options.map(function (option: Option, index: number) {
             if ('separator' in option) {
               return <hr key={index} class={menuStyles.optionSeparator} />
             }
diff --git a/packages/ui/src/components/textbox/textbox-color/textbox-color.tsx b/packages/ui/src/components/textbox/textbox-color/textbox-color.tsx
index cb632468c..fc3061dc0 100644
--- a/packages/ui/src/components/textbox/textbox-color/textbox-color.tsx
+++ b/packages/ui/src/components/textbox/textbox-color/textbox-color.tsx
@@ -1,5 +1,5 @@
 import { MIXED_NUMBER, MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX, RefObject } from 'preact'
+import { h, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../../types/event-handler.js'
@@ -69,16 +69,14 @@ export const TextboxColor = createComponent<HTMLDivElement, TextboxColorProps>(
       ...rest
     },
     ref
-  ): JSX.Element {
+  ) {
     const hexColorInputElementRef: RefObject<HTMLInputElement> = useRef(null)
     const opacityInputElementRef: RefObject<HTMLInputElement> = useRef(null)
     const revertOnEscapeKeyDownRef: RefObject<boolean> = useRef(false) // Boolean flag to exit early from `handleBlur`
 
     const [originalHexColor, setOriginalHexColor] = useState(EMPTY_STRING) // Value of the hex color textbox when it was initially focused
 
-    const setHexColorInputElementValue = useCallback(function (
-      value: string
-    ): void {
+    const setHexColorInputElementValue = useCallback(function (value: string) {
       const inputElement = getCurrentFromRef(hexColorInputElementRef)
       inputElement.value = value
       const inputEvent = new window.Event('input', {
@@ -86,19 +84,18 @@ export const TextboxColor = createComponent<HTMLDivElement, TextboxColorProps>(
         cancelable: true
       })
       inputElement.dispatchEvent(inputEvent)
-    },
-    [])
+    }, [])
 
     const handleHexColorSelectorFocus = useCallback(function (
       event: Event.onFocus<HTMLInputElement>
-    ): void {
+    ) {
       const hexColor = event.currentTarget.value.slice(1).toUpperCase()
       setOriginalHexColor(hexColor)
     },
     [])
 
     const handleHexColorSelectorInput = useCallback(
-      function (event: Event.onInput<HTMLInputElement>): void {
+      function (event: Event.onInput<HTMLInputElement>) {
         const hexColor = event.currentTarget.value.slice(1).toUpperCase()
         setHexColorInputElementValue(hexColor)
       },
@@ -106,7 +103,7 @@ export const TextboxColor = createComponent<HTMLDivElement, TextboxColorProps>(
     )
 
     const handleHexColorSelectorKeyDown = useCallback(
-      function (event: Event.onKeyDown<HTMLInputElement>): void {
+      function (event: Event.onKeyDown<HTMLInputElement>) {
         if (event.key !== 'Escape') {
           return
         }
@@ -131,7 +128,7 @@ export const TextboxColor = createComponent<HTMLDivElement, TextboxColorProps>(
     )
 
     const handleHexColorBlur = useCallback(
-      function (): void {
+      function () {
         if (revertOnEscapeKeyDownRef.current === true) {
           revertOnEscapeKeyDownRef.current = false
           return
@@ -157,7 +154,7 @@ export const TextboxColor = createComponent<HTMLDivElement, TextboxColorProps>(
     )
 
     const handleHexColorFocus = useCallback(
-      function (event: Event.onFocus<HTMLInputElement>): void {
+      function (event: Event.onFocus<HTMLInputElement>) {
         setOriginalHexColor(hexColor)
         event.currentTarget.select()
       },
@@ -185,7 +182,7 @@ export const TextboxColor = createComponent<HTMLDivElement, TextboxColorProps>(
     )
 
     const handleHexColorKeyDown = useCallback(
-      function (event: Event.onKeyDown<HTMLInputElement>): void {
+      function (event: Event.onKeyDown<HTMLInputElement>) {
         onHexColorKeyDown(event)
         const key = event.key
         if (key === 'Escape') {
@@ -236,7 +233,7 @@ export const TextboxColor = createComponent<HTMLDivElement, TextboxColorProps>(
     )
 
     const handleHexColorMouseUp = useCallback(
-      function (event: Event.onMouseUp<HTMLInputElement>): void {
+      function (event: Event.onMouseUp<HTMLInputElement>) {
         if (hexColor !== MIXED_STRING) {
           return
         }
diff --git a/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.tsx b/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.tsx
index f214e2fe2..047fa86a8 100644
--- a/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.tsx
+++ b/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.tsx
@@ -1,5 +1,5 @@
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX, RefObject } from 'preact'
+import { h, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../../types/event-handler.js'
@@ -52,13 +52,13 @@ export const TextboxMultiline = createComponent<
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const textAreaElementRef: RefObject<HTMLTextAreaElement> = useRef(null)
   const revertOnEscapeKeyDownRef: RefObject<boolean> = useRef(false) // Boolean flag to exit early from `handleBlur`
 
   const [originalValue, setOriginalValue] = useState(EMPTY_STRING) // Value of the textbox when it was initially focused
 
-  const setTextAreaElementValue = useCallback(function (value: string): void {
+  const setTextAreaElementValue = useCallback(function (value: string) {
     const textAreaElement = getCurrentFromRef(textAreaElementRef)
     textAreaElement.value = value
     const inputEvent = new window.Event('input', {
@@ -69,7 +69,7 @@ export const TextboxMultiline = createComponent<
   }, [])
 
   const handleBlur = useCallback(
-    function (): void {
+    function () {
       if (revertOnEscapeKeyDownRef.current === true) {
         revertOnEscapeKeyDownRef.current = false
         return
@@ -97,7 +97,7 @@ export const TextboxMultiline = createComponent<
   )
 
   const handleFocus = useCallback(
-    function (event: Event.onFocus<HTMLTextAreaElement>): void {
+    function (event: Event.onFocus<HTMLTextAreaElement>) {
       setOriginalValue(value)
       event.currentTarget.select()
     },
@@ -105,7 +105,7 @@ export const TextboxMultiline = createComponent<
   )
 
   const handleInput = useCallback(
-    function (event: Event.onInput<HTMLTextAreaElement>): void {
+    function (event: Event.onInput<HTMLTextAreaElement>) {
       onValueInput(event.currentTarget.value)
       onInput(event)
     },
@@ -113,7 +113,7 @@ export const TextboxMultiline = createComponent<
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLTextAreaElement>): void {
+    function (event: Event.onKeyDown<HTMLTextAreaElement>) {
       onKeyDown(event)
       if (event.key === 'Escape') {
         if (revertOnEscapeKeyDown === true) {
@@ -150,7 +150,7 @@ export const TextboxMultiline = createComponent<
   )
 
   const handleMouseUp = useCallback(
-    function (event: Event.onMouseUp<HTMLTextAreaElement>): void {
+    function (event: Event.onMouseUp<HTMLTextAreaElement>) {
       if (value === MIXED_STRING) {
         // Prevent changing the selection if `value` is `MIXED_STRING`
         event.preventDefault()
diff --git a/packages/ui/src/components/textbox/textbox-numeric/private/raw-textbox-numeric.tsx b/packages/ui/src/components/textbox/textbox-numeric/private/raw-textbox-numeric.tsx
index 64dd68a2b..3eb12d589 100644
--- a/packages/ui/src/components/textbox/textbox-numeric/private/raw-textbox-numeric.tsx
+++ b/packages/ui/src/components/textbox/textbox-numeric/private/raw-textbox-numeric.tsx
@@ -4,7 +4,7 @@ import {
   MIXED_NUMBER,
   MIXED_STRING
 } from '@create-figma-plugin/utilities'
-import { h, JSX, RefObject } from 'preact'
+import { h, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../../../types/event-handler.js'
@@ -62,7 +62,7 @@ export const RawTextboxNumeric = createComponent<
     ...rest
   },
   ref
-): JSX.Element {
+) {
   if (
     typeof minimum !== 'undefined' &&
     typeof maximum !== 'undefined' &&
@@ -76,7 +76,7 @@ export const RawTextboxNumeric = createComponent<
 
   const [originalValue, setOriginalValue] = useState(EMPTY_STRING) // Value of the textbox when it was initially focused
 
-  const setInputElementValue = useCallback(function (value: string): void {
+  const setInputElementValue = useCallback(function (value: string) {
     const inputElement = getCurrentFromRef(inputElementRef)
     inputElement.value = value
     const inputEvent = new window.Event('input', {
@@ -87,7 +87,7 @@ export const RawTextboxNumeric = createComponent<
   }, [])
 
   const handleBlur = useCallback(
-    function (): void {
+    function () {
       if (revertOnEscapeKeyDownRef.current === true) {
         revertOnEscapeKeyDownRef.current = false
         return
@@ -139,7 +139,7 @@ export const RawTextboxNumeric = createComponent<
   )
 
   const handleFocus = useCallback(
-    function (event: Event.onFocus<HTMLInputElement>): void {
+    function (event: Event.onFocus<HTMLInputElement>) {
       setOriginalValue(value)
       event.currentTarget.select()
     },
@@ -147,7 +147,7 @@ export const RawTextboxNumeric = createComponent<
   )
 
   const handleInput = useCallback(
-    function (event: Event.onInput<HTMLInputElement>): void {
+    function (event: Event.onInput<HTMLInputElement>) {
       onInput(event)
       const value = event.currentTarget.value
       onValueInput(value)
@@ -158,7 +158,7 @@ export const RawTextboxNumeric = createComponent<
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
       const key = event.key
       if (key === 'Escape') {
@@ -279,7 +279,7 @@ export const RawTextboxNumeric = createComponent<
   )
 
   const handleMouseUp = useCallback(
-    function (event: Event.onMouseUp<HTMLInputElement>): void {
+    function (event: Event.onMouseUp<HTMLInputElement>) {
       if (value !== MIXED_STRING) {
         return
       }
@@ -289,7 +289,7 @@ export const RawTextboxNumeric = createComponent<
   )
 
   const handlePaste = useCallback(
-    function (event: Event.onPaste<HTMLInputElement>): void {
+    function (event: Event.onPaste<HTMLInputElement>) {
       if (event.clipboardData === null) {
         throw new Error('`event.clipboardData` is `null`')
       }
diff --git a/packages/ui/src/components/textbox/textbox-numeric/textbox-numeric.tsx b/packages/ui/src/components/textbox/textbox-numeric/textbox-numeric.tsx
index 52f860531..91777c313 100644
--- a/packages/ui/src/components/textbox/textbox-numeric/textbox-numeric.tsx
+++ b/packages/ui/src/components/textbox/textbox-numeric/textbox-numeric.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { createClassName } from '../../../utilities/create-class-name.js'
 import { createComponent } from '../../../utilities/create-component.js'
@@ -19,7 +19,7 @@ export type TextboxNumericVariant = 'border' | 'underline'
 export const TextboxNumeric = createComponent<
   HTMLInputElement,
   TextboxNumericProps
->(function ({ icon, variant, ...rest }, ref): JSX.Element {
+>(function ({ icon, variant, ...rest }, ref) {
   if (typeof icon === 'string' && icon.length !== 1) {
     throw new Error(`String \`icon\` must be a single character: ${icon}`)
   }
diff --git a/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx b/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx
index dce8cb5ec..a54a9b577 100644
--- a/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx
+++ b/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx
@@ -1,5 +1,5 @@
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX, RefObject } from 'preact'
+import { h, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../../../types/event-handler.js'
@@ -49,13 +49,13 @@ export const RawTextbox = createComponent<HTMLInputElement, RawTextboxProps>(
       ...rest
     },
     ref
-  ): JSX.Element {
+  ) {
     const inputElementRef: RefObject<HTMLInputElement> = useRef(null)
     const revertOnEscapeKeyDownRef: RefObject<boolean> = useRef(false) // Boolean flag to exit early from `handleBlur`
 
     const [originalValue, setOriginalValue] = useState(EMPTY_STRING) // Value of the textbox when it was initially focused
 
-    const setInputElementValue = useCallback(function (value: string): void {
+    const setInputElementValue = useCallback(function (value: string) {
       const inputElement = getCurrentFromRef(inputElementRef)
       inputElement.value = value
       const inputEvent = new window.Event('input', {
@@ -66,7 +66,7 @@ export const RawTextbox = createComponent<HTMLInputElement, RawTextboxProps>(
     }, [])
 
     const handleBlur = useCallback(
-      function (event: Event.onBlur<HTMLInputElement>): void {
+      function (event: Event.onBlur<HTMLInputElement>) {
         if (revertOnEscapeKeyDownRef.current === true) {
           revertOnEscapeKeyDownRef.current = false
           return
@@ -97,7 +97,7 @@ export const RawTextbox = createComponent<HTMLInputElement, RawTextboxProps>(
     )
 
     const handleFocus = useCallback(
-      function (event: Event.onFocus<HTMLInputElement>): void {
+      function (event: Event.onFocus<HTMLInputElement>) {
         onFocus(event)
         setOriginalValue(value)
         event.currentTarget.select()
@@ -106,7 +106,7 @@ export const RawTextbox = createComponent<HTMLInputElement, RawTextboxProps>(
     )
 
     const handleInput = useCallback(
-      function (event: Event.onInput<HTMLInputElement>): void {
+      function (event: Event.onInput<HTMLInputElement>) {
         onInput(event)
         onValueInput(event.currentTarget.value)
       },
@@ -114,7 +114,7 @@ export const RawTextbox = createComponent<HTMLInputElement, RawTextboxProps>(
     )
 
     const handleKeyDown = useCallback(
-      function (event: Event.onKeyDown<HTMLInputElement>): void {
+      function (event: Event.onKeyDown<HTMLInputElement>) {
         onKeyDown(event)
         const key = event.key
         if (key === 'Escape') {
@@ -152,7 +152,7 @@ export const RawTextbox = createComponent<HTMLInputElement, RawTextboxProps>(
     )
 
     const handleMouseUp = useCallback(
-      function (event: Event.onMouseUp<HTMLInputElement>): void {
+      function (event: Event.onMouseUp<HTMLInputElement>) {
         onMouseUp(event)
         if (value === MIXED_STRING) {
           // Prevent changing the selection if `value` is `MIXED_STRING`
diff --git a/packages/ui/src/components/textbox/textbox/textbox.tsx b/packages/ui/src/components/textbox/textbox/textbox.tsx
index c7067aa90..a68bb4a1a 100644
--- a/packages/ui/src/components/textbox/textbox/textbox.tsx
+++ b/packages/ui/src/components/textbox/textbox/textbox.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { createClassName } from '../../../utilities/create-class-name.js'
 import { createComponent } from '../../../utilities/create-component.js'
@@ -13,7 +13,7 @@ export type TextboxProps = RawTextboxProps & {
 export type TextboxVariant = 'border' | 'underline'
 
 export const Textbox = createComponent<HTMLInputElement, TextboxProps>(
-  function ({ icon, variant, ...rest }, ref): JSX.Element {
+  function ({ icon, variant, ...rest }, ref) {
     if (typeof icon === 'string' && icon.length !== 1) {
       throw new Error(`String \`icon\` must be a single character: ${icon}`)
     }
diff --git a/packages/ui/src/components/toggle/toggle.tsx b/packages/ui/src/components/toggle/toggle.tsx
index 2487374c1..74d663745 100644
--- a/packages/ui/src/components/toggle/toggle.tsx
+++ b/packages/ui/src/components/toggle/toggle.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../types/event-handler.js'
@@ -26,9 +26,9 @@ export const Toggle = createComponent<HTMLInputElement, ToggleProps>(function ({
   propagateEscapeKeyDown = true,
   value = false,
   ...rest
-}): JSX.Element {
+}) {
   const handleChange = useCallback(
-    function (event: Event.onChange<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>) {
       onChange(event)
       const newValue = event.currentTarget.checked
       onValueChange(newValue)
@@ -37,16 +37,15 @@ export const Toggle = createComponent<HTMLInputElement, ToggleProps>(function ({
   )
 
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, propagateEscapeKeyDown, onKeyDown]
diff --git a/packages/ui/src/icons/create-icon.tsx b/packages/ui/src/icons/create-icon.tsx
index 767444b94..f1cd4cbfc 100644
--- a/packages/ui/src/icons/create-icon.tsx
+++ b/packages/ui/src/icons/create-icon.tsx
@@ -1,4 +1,4 @@
-import { h, JSX } from 'preact'
+import { h } from 'preact'
 
 import { IconColor } from '../types/colors.js'
 import { createComponent } from '../utilities/create-component.js'
@@ -16,7 +16,7 @@ export function createIcon(
   return createComponent<SVGSVGElement, IconProps>(function ({
     color,
     ...rest
-  }): JSX.Element {
+  }) {
     return (
       <svg
         {...rest}
diff --git a/packages/ui/src/inline-text/bold/bold.tsx b/packages/ui/src/inline-text/bold/bold.tsx
index 382ea4cfa..a5afc99e3 100644
--- a/packages/ui/src/inline-text/bold/bold.tsx
+++ b/packages/ui/src/inline-text/bold/bold.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { createComponent } from '../../utilities/create-component.js'
 import styles from './bold.module.css'
@@ -10,7 +10,7 @@ export type BoldProps = {
 export const Bold = createComponent<HTMLSpanElement, BoldProps>(function (
   { children, ...rest },
   ref
-): JSX.Element {
+) {
   return (
     <strong {...rest} ref={ref} class={styles.bold}>
       {children}
diff --git a/packages/ui/src/inline-text/code/code.tsx b/packages/ui/src/inline-text/code/code.tsx
index bce29fe9f..c3ae7d2e5 100644
--- a/packages/ui/src/inline-text/code/code.tsx
+++ b/packages/ui/src/inline-text/code/code.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { createComponent } from '../../utilities/create-component.js'
 import styles from './code.module.css'
@@ -10,7 +10,7 @@ export type CodeProps = {
 export const Code = createComponent<HTMLSpanElement, CodeProps>(function (
   { children, ...rest },
   ref
-): JSX.Element {
+) {
   return (
     <code {...rest} ref={ref} class={styles.code}>
       {children}
diff --git a/packages/ui/src/inline-text/link/link.tsx b/packages/ui/src/inline-text/link/link.tsx
index 1a2f6b6be..6b67f787d 100644
--- a/packages/ui/src/inline-text/link/link.tsx
+++ b/packages/ui/src/inline-text/link/link.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Event } from '../../types/event-handler.js'
@@ -27,18 +27,17 @@ export const Link = createComponent<HTMLAnchorElement, LinkProps>(function (
     ...rest
   },
   ref
-): JSX.Element {
+) {
   const handleKeyDown = useCallback(
-    function (event: Event.onKeyDown<HTMLAnchorElement>): void {
+    function (event: Event.onKeyDown<HTMLAnchorElement>) {
       onKeyDown(event)
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (blurOnEscapeKeyDown === true) {
-        event.currentTarget.blur()
+      if (event.key === 'Escape') {
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
       }
     },
     [blurOnEscapeKeyDown, propagateEscapeKeyDown, onKeyDown]
diff --git a/packages/ui/src/inline-text/muted/muted.tsx b/packages/ui/src/inline-text/muted/muted.tsx
index 7bd2a92c9..6e2ec7050 100644
--- a/packages/ui/src/inline-text/muted/muted.tsx
+++ b/packages/ui/src/inline-text/muted/muted.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { createComponent } from '../../utilities/create-component.js'
 import styles from './muted.module.css'
@@ -10,7 +10,7 @@ export type MutedProps = {
 export const Muted = createComponent<HTMLSpanElement, MutedProps>(function (
   { children, ...rest },
   ref
-): JSX.Element {
+) {
   return (
     <span {...rest} ref={ref} class={styles.muted}>
       {children}
diff --git a/packages/ui/src/layout/columns/columns.tsx b/packages/ui/src/layout/columns/columns.tsx
index 2252d2753..48aaf3ddc 100644
--- a/packages/ui/src/layout/columns/columns.tsx
+++ b/packages/ui/src/layout/columns/columns.tsx
@@ -1,4 +1,4 @@
-import { ComponentChild, h, JSX, toChildArray } from 'preact'
+import { ComponentChild, h, toChildArray } from 'preact'
 
 import { Space } from '../../types/space.js'
 import { createClassName } from '../../utilities/create-class-name.js'
@@ -14,7 +14,7 @@ export type ColumnsSpace = Space
 export const Columns = createComponent<HTMLDivElement, ColumnsProps>(function (
   { children, space, ...rest },
   ref
-): JSX.Element {
+) {
   return (
     <div
       {...rest}
@@ -27,7 +27,7 @@ export const Columns = createComponent<HTMLDivElement, ColumnsProps>(function (
       {toChildArray(children).map(function (
         element: ComponentChild,
         index: number
-      ): JSX.Element {
+      ) {
         return (
           <div key={index} class={styles.child}>
             {element}
diff --git a/packages/ui/src/layout/container/container.tsx b/packages/ui/src/layout/container/container.tsx
index d11954b4a..8acad78ad 100644
--- a/packages/ui/src/layout/container/container.tsx
+++ b/packages/ui/src/layout/container/container.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { Space } from '../../types/space.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -11,7 +11,7 @@ export type ContainerProps = {
 export type ContainerSpace = Space
 
 export const Container = createComponent<HTMLDivElement, ContainerProps>(
-  function ({ space, ...rest }, ref): JSX.Element {
+  function ({ space, ...rest }, ref) {
     return <div {...rest} ref={ref} class={styles[space]} />
   }
 )
diff --git a/packages/ui/src/layout/inline/inline.tsx b/packages/ui/src/layout/inline/inline.tsx
index 80669f0cb..ff76f3eaf 100644
--- a/packages/ui/src/layout/inline/inline.tsx
+++ b/packages/ui/src/layout/inline/inline.tsx
@@ -1,4 +1,4 @@
-import { ComponentChild, ComponentChildren, h, JSX, toChildArray } from 'preact'
+import { ComponentChild, ComponentChildren, h, toChildArray } from 'preact'
 
 import { Space } from '../../types/space.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -13,7 +13,7 @@ export type InlineSpace = Space
 export const Inline = createComponent<HTMLDivElement, InlineProps>(function (
   { children, space, ...rest },
   ref
-): JSX.Element {
+) {
   return (
     <div
       {...rest}
@@ -23,7 +23,7 @@ export const Inline = createComponent<HTMLDivElement, InlineProps>(function (
       {toChildArray(children).map(function (
         child: ComponentChild,
         index: number
-      ): JSX.Element {
+      ) {
         return (
           <div key={index} class={styles.child}>
             {child}
diff --git a/packages/ui/src/layout/middle-align/middle-align.tsx b/packages/ui/src/layout/middle-align/middle-align.tsx
index 407721efa..5d6c504e0 100644
--- a/packages/ui/src/layout/middle-align/middle-align.tsx
+++ b/packages/ui/src/layout/middle-align/middle-align.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, h, JSX } from 'preact'
+import { ComponentChildren, h } from 'preact'
 
 import { createComponent } from '../../utilities/create-component.js'
 import styles from './middle-align.module.css'
@@ -8,7 +8,7 @@ export type MiddleAlignProps = {
 }
 
 export const MiddleAlign = createComponent<HTMLDivElement, MiddleAlignProps>(
-  function ({ children, ...rest }, ref): JSX.Element {
+  function ({ children, ...rest }, ref) {
     return (
       <div {...rest} ref={ref} class={styles.middleAlign}>
         <div class={styles.children}>{children}</div>
diff --git a/packages/ui/src/layout/stack/stack.tsx b/packages/ui/src/layout/stack/stack.tsx
index cbb82971c..373eeb821 100644
--- a/packages/ui/src/layout/stack/stack.tsx
+++ b/packages/ui/src/layout/stack/stack.tsx
@@ -1,4 +1,4 @@
-import { ComponentChild, ComponentChildren, h, JSX, toChildArray } from 'preact'
+import { ComponentChild, ComponentChildren, h, toChildArray } from 'preact'
 
 import { Space } from '../../types/space.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -13,13 +13,13 @@ export type StackSpace = Space
 export const Stack = createComponent<HTMLDivElement, StackProps>(function (
   { children, space, ...rest },
   ref
-): JSX.Element {
+) {
   return (
     <div {...rest} ref={ref} class={styles[space]}>
       {toChildArray(children).map(function (
         element: ComponentChild,
         index: number
-      ): JSX.Element {
+      ) {
         return (
           <div key={index} class={styles.child}>
             {element}
diff --git a/packages/ui/src/layout/vertical-space/vertical-space.tsx b/packages/ui/src/layout/vertical-space/vertical-space.tsx
index fc6e890cd..cb4d107a8 100644
--- a/packages/ui/src/layout/vertical-space/vertical-space.tsx
+++ b/packages/ui/src/layout/vertical-space/vertical-space.tsx
@@ -1,4 +1,4 @@
-import { h, JSX } from 'preact'
+import { h } from 'preact'
 
 import { Space } from '../../types/space.js'
 import { createComponent } from '../../utilities/create-component.js'
@@ -12,6 +12,6 @@ export type VerticalSpaceSpace = Space
 export const VerticalSpace = createComponent<
   HTMLDivElement,
   VerticalSpaceProps
->(function ({ space, ...rest }, ref): JSX.Element {
+>(function ({ space, ...rest }, ref) {
   return <div {...rest} ref={ref} class={styles[space]} />
 })
diff --git a/packages/ui/src/utilities/render.tsx b/packages/ui/src/utilities/render.tsx
index 14bb1fd07..889da0a6c 100644
--- a/packages/ui/src/utilities/render.tsx
+++ b/packages/ui/src/utilities/render.tsx
@@ -3,10 +3,7 @@ import '!../css/base.css'
 import { FunctionComponent, h, JSX, render as preactRender } from 'preact'
 
 export function render<P>(Plugin: FunctionComponent<P>) {
-  return function (
-    rootNode: HTMLElement,
-    props: P & JSX.IntrinsicAttributes
-  ): void {
+  return function (rootNode: HTMLElement, props: P & JSX.IntrinsicAttributes) {
     preactRender(<Plugin {...props} />, rootNode)
   }
 }