diff --git a/types/wordpress__components/animate/index.d.ts b/types/wordpress__components/animate/index.d.ts
index 6b694dd68d..e090ceb908 100644
--- a/types/wordpress__components/animate/index.d.ts
+++ b/types/wordpress__components/animate/index.d.ts
@@ -1,28 +1,22 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
 declare namespace Animate {
     interface BaseProps {
-        type: "appear" | "slide-in";
+        type: 'appear' | 'slide-in';
         children(props: { className: string }): ReactNode;
     }
 
     interface AppearProps extends BaseProps {
-        type: "appear";
+        type: 'appear';
         options?: {
-            origin?:
-                | "top"
-                | "top left"
-                | "top right"
-                | "bottom"
-                | "bottom left"
-                | "bottom right";
+            origin?: 'top' | 'top left' | 'top right' | 'bottom' | 'bottom left' | 'bottom right';
         };
     }
 
     interface SlideInProps extends BaseProps {
-        type: "slide-in";
+        type: 'slide-in';
         options?: {
-            origin?: "left";
+            origin?: 'left';
         };
     }
 
diff --git a/types/wordpress__components/autocomplete/index.d.ts b/types/wordpress__components/autocomplete/index.d.ts
index cf2dbe97ad..36d30297da 100644
--- a/types/wordpress__components/autocomplete/index.d.ts
+++ b/types/wordpress__components/autocomplete/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 import { Value } from '@wordpress/rich-text';
 
 declare namespace Autocomplete {
@@ -8,12 +8,12 @@ declare namespace Autocomplete {
      *   - `replace`: Replace the current block with the block specified in
      *      the `value` property.
      */
-    type Action = "insert-at-caret" | "replace";
+    type Action = 'insert-at-caret' | 'replace';
 
     type OptionCompletion =
         | ReactNode
-        | { action: "insert-at-caret"; value: ReactNode }
-        | { action: "replace"; value: Value };
+        | { action: 'insert-at-caret'; value: ReactNode }
+        | { action: 'replace'; value: Value };
 
     interface Completer<T> {
         /**
@@ -37,9 +37,7 @@ declare namespace Autocomplete {
          * those options are rendered and what their completions should be when
          * selected.
          */
-        options:
-            | ((query: string) => PromiseLike<readonly T[]> | readonly T[])
-            | readonly T[];
+        options: ((query: string) => PromiseLike<readonly T[]> | readonly T[]) | readonly T[];
 
         /**
          * A class name to apply to the autocompletion popup menu.
diff --git a/types/wordpress__components/base-control/index.d.ts b/types/wordpress__components/base-control/index.d.ts
index 92dbbce50e..419b5ffce5 100644
--- a/types/wordpress__components/base-control/index.d.ts
+++ b/types/wordpress__components/base-control/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
 declare namespace BaseControl {
     interface ControlProps {
diff --git a/types/wordpress__components/button-group/index.d.ts b/types/wordpress__components/button-group/index.d.ts
index 554fde9072..e2a37c3c81 100644
--- a/types/wordpress__components/button-group/index.d.ts
+++ b/types/wordpress__components/button-group/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, HTMLProps, ReactNode } from "@wordpress/element";
+import { ComponentType, HTMLProps, ReactNode } from '@wordpress/element';
 
 declare namespace ButtonGroup {
     interface Props extends HTMLProps<HTMLDivElement> {
diff --git a/types/wordpress__components/button/index.d.ts b/types/wordpress__components/button/index.d.ts
index 36d5ea134a..3c07fd4bef 100644
--- a/types/wordpress__components/button/index.d.ts
+++ b/types/wordpress__components/button/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
 declare namespace Button {
     interface BaseProps {
diff --git a/types/wordpress__components/checkbox-control/index.d.ts b/types/wordpress__components/checkbox-control/index.d.ts
index 8e486d539c..e72f2bef82 100644
--- a/types/wordpress__components/checkbox-control/index.d.ts
+++ b/types/wordpress__components/checkbox-control/index.d.ts
@@ -1,19 +1,16 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
-import BaseControl from "../base-control";
+import BaseControl from '../base-control';
 
 declare namespace CheckboxControl {
     interface Props
-        extends Omit<
-                HTMLProps<HTMLInputElement>,
-                keyof BaseControl.ControlProps | "onChange"
-            >,
+        extends Omit<HTMLProps<HTMLInputElement>, keyof BaseControl.ControlProps | 'onChange'>,
             BaseControl.ControlProps {
         /**
          * A heading for the input field, that appears above the checkbox. If
          * the prop is not passed no heading will be rendered.
          */
-        heading?: BaseControl.ControlProps["label"];
+        heading?: BaseControl.ControlProps['label'];
         /**
          * A function that receives the checked state (boolean) as input.
          */
diff --git a/types/wordpress__components/clipboard-button/index.d.ts b/types/wordpress__components/clipboard-button/index.d.ts
index c38de18f7f..8154161a4b 100644
--- a/types/wordpress__components/clipboard-button/index.d.ts
+++ b/types/wordpress__components/clipboard-button/index.d.ts
@@ -1,5 +1,5 @@
-import { ComponentType } from "@wordpress/element";
-import Button from "../button";
+import { ComponentType } from '@wordpress/element';
+import Button from '../button';
 
 declare namespace ClipboardButton {
     interface Props extends Button.ButtonProps {
diff --git a/types/wordpress__components/color-palette/index.d.ts b/types/wordpress__components/color-palette/index.d.ts
index 4321678fd9..ebfb03adc4 100644
--- a/types/wordpress__components/color-palette/index.d.ts
+++ b/types/wordpress__components/color-palette/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace ColorPalette {
     interface Color {
diff --git a/types/wordpress__components/color-picker/index.d.ts b/types/wordpress__components/color-picker/index.d.ts
index f5535e8054..392401dd42 100644
--- a/types/wordpress__components/color-picker/index.d.ts
+++ b/types/wordpress__components/color-picker/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace ColorPicker {
     interface Props {
@@ -9,12 +9,7 @@ declare namespace ColorPicker {
         /**
          * Function to be called when color value changes.
          */
-        onChangeComplete(value: {
-            hex: string;
-            hsl: string;
-            hsv: string;
-            rgb: string;
-        }): void;
+        onChangeComplete(value: { hex: string; hsl: string; hsv: string; rgb: string }): void;
         /**
          * Should alpha be disabled?
          */
diff --git a/types/wordpress__components/dashicon/index.d.ts b/types/wordpress__components/dashicon/index.d.ts
index 1f6f862932..774df6ec1b 100644
--- a/types/wordpress__components/dashicon/index.d.ts
+++ b/types/wordpress__components/dashicon/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, SVGProps } from "@wordpress/element";
+import { ComponentType, SVGProps } from '@wordpress/element';
 
 declare namespace Dashicon {
     interface Props extends SVGProps<SVGSVGElement> {
@@ -13,295 +13,295 @@ declare namespace Dashicon {
         size?: number;
     }
     type Icon =
-        | "admin-appearance"
-        | "admin-collapse"
-        | "admin-comments"
-        | "admin-customizer"
-        | "admin-generic"
-        | "admin-home"
-        | "admin-links"
-        | "admin-media"
-        | "admin-multisite"
-        | "admin-network"
-        | "admin-page"
-        | "admin-plugins"
-        | "admin-post"
-        | "admin-settings"
-        | "admin-site-alt"
-        | "admin-site-alt2"
-        | "admin-site-alt3"
-        | "admin-site"
-        | "admin-tools"
-        | "admin-users"
-        | "album"
-        | "align-center"
-        | "align-full-width"
-        | "align-left"
-        | "align-none"
-        | "align-pull-left"
-        | "align-pull-right"
-        | "align-right"
-        | "align-wide"
-        | "analytics"
-        | "archive"
-        | "arrow-down-alt"
-        | "arrow-down-alt2"
-        | "arrow-down"
-        | "arrow-left-alt"
-        | "arrow-left-alt2"
-        | "arrow-left"
-        | "arrow-right-alt"
-        | "arrow-right-alt2"
-        | "arrow-right"
-        | "arrow-up-alt"
-        | "arrow-up-alt2"
-        | "arrow-up"
-        | "art"
-        | "awards"
-        | "backup"
-        | "block-default"
-        | "book-alt"
-        | "book"
-        | "buddicons-activity"
-        | "buddicons-bbpress-logo"
-        | "buddicons-buddypress-logo"
-        | "buddicons-community"
-        | "buddicons-forums"
-        | "buddicons-friends"
-        | "buddicons-groups"
-        | "buddicons-pm"
-        | "buddicons-replies"
-        | "buddicons-topics"
-        | "buddicons-tracking"
-        | "building"
-        | "businessman"
-        | "button"
-        | "calendar-alt"
-        | "calendar"
-        | "camera"
-        | "carrot"
-        | "cart"
-        | "category"
-        | "chart-area"
-        | "chart-bar"
-        | "chart-line"
-        | "chart-pie"
-        | "clipboard"
-        | "clock"
-        | "cloud-saved"
-        | "cloud-upload"
-        | "cloud"
-        | "columns"
-        | "controls-back"
-        | "controls-forward"
-        | "controls-pause"
-        | "controls-play"
-        | "controls-repeat"
-        | "controls-skipback"
-        | "controls-skipforward"
-        | "controls-volumeoff"
-        | "controls-volumeon"
-        | "cover-image"
-        | "dashboard"
-        | "desktop"
-        | "dismiss"
-        | "download"
-        | "edit"
-        | "editor-aligncenter"
-        | "editor-alignleft"
-        | "editor-alignright"
-        | "editor-bold"
-        | "editor-break"
-        | "editor-code"
-        | "editor-contract"
-        | "editor-customchar"
-        | "editor-expand"
-        | "editor-help"
-        | "editor-indent"
-        | "editor-insertmore"
-        | "editor-italic"
-        | "editor-justify"
-        | "editor-kitchensink"
-        | "editor-ltr"
-        | "editor-ol-rtl"
-        | "editor-ol"
-        | "editor-outdent"
-        | "editor-paragraph"
-        | "editor-paste-text"
-        | "editor-paste-word"
-        | "editor-quote"
-        | "editor-removeformatting"
-        | "editor-rtl"
-        | "editor-spellcheck"
-        | "editor-strikethrough"
-        | "editor-table"
-        | "editor-textcolor"
-        | "editor-ul"
-        | "editor-underline"
-        | "editor-unlink"
-        | "editor-video"
-        | "ellipsis"
-        | "email-alt"
-        | "email-alt2"
-        | "email"
-        | "embed-audio"
-        | "embed-generic"
-        | "embed-photo"
-        | "embed-post"
-        | "embed-video"
-        | "excerpt-view"
-        | "exit"
-        | "external"
-        | "facebook-alt"
-        | "facebook"
-        | "feedback"
-        | "filter"
-        | "flag"
-        | "format-aside"
-        | "format-audio"
-        | "format-chat"
-        | "format-gallery"
-        | "format-image"
-        | "format-quote"
-        | "format-status"
-        | "format-video"
-        | "forms"
-        | "googleplus"
-        | "grid-view"
-        | "groups"
-        | "hammer"
-        | "heading"
-        | "heart"
-        | "hidden"
-        | "html"
-        | "id-alt"
-        | "id"
-        | "image-crop"
-        | "image-filter"
-        | "image-flip-horizontal"
-        | "image-flip-vertical"
-        | "image-rotate-left"
-        | "image-rotate-right"
-        | "image-rotate"
-        | "images-alt"
-        | "images-alt2"
-        | "index-card"
-        | "info-outline"
-        | "info"
-        | "insert-after"
-        | "insert-before"
-        | "insert"
-        | "instagram"
-        | "keyboard-hide"
-        | "laptop"
-        | "layout"
-        | "leftright"
-        | "lightbulb"
-        | "list-view"
-        | "location-alt"
-        | "location"
-        | "lock"
-        | "marker"
-        | "media-archive"
-        | "media-audio"
-        | "media-code"
-        | "media-default"
-        | "media-document"
-        | "media-interactive"
-        | "media-spreadsheet"
-        | "media-text"
-        | "media-video"
-        | "megaphone"
-        | "menu-alt"
-        | "menu"
-        | "microphone"
-        | "migrate"
-        | "minus"
-        | "money"
-        | "move"
-        | "nametag"
-        | "networking"
-        | "no-alt"
-        | "no"
-        | "palmtree"
-        | "paperclip"
-        | "performance"
-        | "phone"
-        | "playlist-audio"
-        | "playlist-video"
-        | "plus-alt"
-        | "plus-light"
-        | "plus"
-        | "portfolio"
-        | "post-status"
-        | "pressthis"
-        | "products"
-        | "randomize"
-        | "redo"
-        | "remove"
-        | "rest-api"
-        | "rss"
-        | "saved"
-        | "schedule"
-        | "screenoptions"
-        | "search"
-        | "share-alt"
-        | "share-alt2"
-        | "share"
-        | "shield-alt"
-        | "shield"
-        | "shortcode"
-        | "slides"
-        | "smartphone"
-        | "smiley"
-        | "sort"
-        | "sos"
-        | "star-empty"
-        | "star-filled"
-        | "star-half"
-        | "sticky"
-        | "store"
-        | "table-col-after"
-        | "table-col-before"
-        | "table-col-delete"
-        | "table-row-after"
-        | "table-row-before"
-        | "table-row-delete"
-        | "tablet"
-        | "tag"
-        | "tagcloud"
-        | "testimonial"
-        | "text"
-        | "thumbs-down"
-        | "thumbs-up"
-        | "tickets-alt"
-        | "tickets"
-        | "tide"
-        | "translation"
-        | "trash"
-        | "twitter"
-        | "undo"
-        | "universal-access-alt"
-        | "universal-access"
-        | "unlock"
-        | "update"
-        | "upload"
-        | "vault"
-        | "video-alt"
-        | "video-alt2"
-        | "video-alt3"
-        | "visibility"
-        | "warning"
-        | "welcome-add-page"
-        | "welcome-comments"
-        | "welcome-learn-more"
-        | "welcome-view-site"
-        | "welcome-widgets-menus"
-        | "welcome-write-blog"
-        | "wordpress-alt"
-        | "wordpress"
-        | "yes-alt"
-        | "yes";
+        | 'admin-appearance'
+        | 'admin-collapse'
+        | 'admin-comments'
+        | 'admin-customizer'
+        | 'admin-generic'
+        | 'admin-home'
+        | 'admin-links'
+        | 'admin-media'
+        | 'admin-multisite'
+        | 'admin-network'
+        | 'admin-page'
+        | 'admin-plugins'
+        | 'admin-post'
+        | 'admin-settings'
+        | 'admin-site-alt'
+        | 'admin-site-alt2'
+        | 'admin-site-alt3'
+        | 'admin-site'
+        | 'admin-tools'
+        | 'admin-users'
+        | 'album'
+        | 'align-center'
+        | 'align-full-width'
+        | 'align-left'
+        | 'align-none'
+        | 'align-pull-left'
+        | 'align-pull-right'
+        | 'align-right'
+        | 'align-wide'
+        | 'analytics'
+        | 'archive'
+        | 'arrow-down-alt'
+        | 'arrow-down-alt2'
+        | 'arrow-down'
+        | 'arrow-left-alt'
+        | 'arrow-left-alt2'
+        | 'arrow-left'
+        | 'arrow-right-alt'
+        | 'arrow-right-alt2'
+        | 'arrow-right'
+        | 'arrow-up-alt'
+        | 'arrow-up-alt2'
+        | 'arrow-up'
+        | 'art'
+        | 'awards'
+        | 'backup'
+        | 'block-default'
+        | 'book-alt'
+        | 'book'
+        | 'buddicons-activity'
+        | 'buddicons-bbpress-logo'
+        | 'buddicons-buddypress-logo'
+        | 'buddicons-community'
+        | 'buddicons-forums'
+        | 'buddicons-friends'
+        | 'buddicons-groups'
+        | 'buddicons-pm'
+        | 'buddicons-replies'
+        | 'buddicons-topics'
+        | 'buddicons-tracking'
+        | 'building'
+        | 'businessman'
+        | 'button'
+        | 'calendar-alt'
+        | 'calendar'
+        | 'camera'
+        | 'carrot'
+        | 'cart'
+        | 'category'
+        | 'chart-area'
+        | 'chart-bar'
+        | 'chart-line'
+        | 'chart-pie'
+        | 'clipboard'
+        | 'clock'
+        | 'cloud-saved'
+        | 'cloud-upload'
+        | 'cloud'
+        | 'columns'
+        | 'controls-back'
+        | 'controls-forward'
+        | 'controls-pause'
+        | 'controls-play'
+        | 'controls-repeat'
+        | 'controls-skipback'
+        | 'controls-skipforward'
+        | 'controls-volumeoff'
+        | 'controls-volumeon'
+        | 'cover-image'
+        | 'dashboard'
+        | 'desktop'
+        | 'dismiss'
+        | 'download'
+        | 'edit'
+        | 'editor-aligncenter'
+        | 'editor-alignleft'
+        | 'editor-alignright'
+        | 'editor-bold'
+        | 'editor-break'
+        | 'editor-code'
+        | 'editor-contract'
+        | 'editor-customchar'
+        | 'editor-expand'
+        | 'editor-help'
+        | 'editor-indent'
+        | 'editor-insertmore'
+        | 'editor-italic'
+        | 'editor-justify'
+        | 'editor-kitchensink'
+        | 'editor-ltr'
+        | 'editor-ol-rtl'
+        | 'editor-ol'
+        | 'editor-outdent'
+        | 'editor-paragraph'
+        | 'editor-paste-text'
+        | 'editor-paste-word'
+        | 'editor-quote'
+        | 'editor-removeformatting'
+        | 'editor-rtl'
+        | 'editor-spellcheck'
+        | 'editor-strikethrough'
+        | 'editor-table'
+        | 'editor-textcolor'
+        | 'editor-ul'
+        | 'editor-underline'
+        | 'editor-unlink'
+        | 'editor-video'
+        | 'ellipsis'
+        | 'email-alt'
+        | 'email-alt2'
+        | 'email'
+        | 'embed-audio'
+        | 'embed-generic'
+        | 'embed-photo'
+        | 'embed-post'
+        | 'embed-video'
+        | 'excerpt-view'
+        | 'exit'
+        | 'external'
+        | 'facebook-alt'
+        | 'facebook'
+        | 'feedback'
+        | 'filter'
+        | 'flag'
+        | 'format-aside'
+        | 'format-audio'
+        | 'format-chat'
+        | 'format-gallery'
+        | 'format-image'
+        | 'format-quote'
+        | 'format-status'
+        | 'format-video'
+        | 'forms'
+        | 'googleplus'
+        | 'grid-view'
+        | 'groups'
+        | 'hammer'
+        | 'heading'
+        | 'heart'
+        | 'hidden'
+        | 'html'
+        | 'id-alt'
+        | 'id'
+        | 'image-crop'
+        | 'image-filter'
+        | 'image-flip-horizontal'
+        | 'image-flip-vertical'
+        | 'image-rotate-left'
+        | 'image-rotate-right'
+        | 'image-rotate'
+        | 'images-alt'
+        | 'images-alt2'
+        | 'index-card'
+        | 'info-outline'
+        | 'info'
+        | 'insert-after'
+        | 'insert-before'
+        | 'insert'
+        | 'instagram'
+        | 'keyboard-hide'
+        | 'laptop'
+        | 'layout'
+        | 'leftright'
+        | 'lightbulb'
+        | 'list-view'
+        | 'location-alt'
+        | 'location'
+        | 'lock'
+        | 'marker'
+        | 'media-archive'
+        | 'media-audio'
+        | 'media-code'
+        | 'media-default'
+        | 'media-document'
+        | 'media-interactive'
+        | 'media-spreadsheet'
+        | 'media-text'
+        | 'media-video'
+        | 'megaphone'
+        | 'menu-alt'
+        | 'menu'
+        | 'microphone'
+        | 'migrate'
+        | 'minus'
+        | 'money'
+        | 'move'
+        | 'nametag'
+        | 'networking'
+        | 'no-alt'
+        | 'no'
+        | 'palmtree'
+        | 'paperclip'
+        | 'performance'
+        | 'phone'
+        | 'playlist-audio'
+        | 'playlist-video'
+        | 'plus-alt'
+        | 'plus-light'
+        | 'plus'
+        | 'portfolio'
+        | 'post-status'
+        | 'pressthis'
+        | 'products'
+        | 'randomize'
+        | 'redo'
+        | 'remove'
+        | 'rest-api'
+        | 'rss'
+        | 'saved'
+        | 'schedule'
+        | 'screenoptions'
+        | 'search'
+        | 'share-alt'
+        | 'share-alt2'
+        | 'share'
+        | 'shield-alt'
+        | 'shield'
+        | 'shortcode'
+        | 'slides'
+        | 'smartphone'
+        | 'smiley'
+        | 'sort'
+        | 'sos'
+        | 'star-empty'
+        | 'star-filled'
+        | 'star-half'
+        | 'sticky'
+        | 'store'
+        | 'table-col-after'
+        | 'table-col-before'
+        | 'table-col-delete'
+        | 'table-row-after'
+        | 'table-row-before'
+        | 'table-row-delete'
+        | 'tablet'
+        | 'tag'
+        | 'tagcloud'
+        | 'testimonial'
+        | 'text'
+        | 'thumbs-down'
+        | 'thumbs-up'
+        | 'tickets-alt'
+        | 'tickets'
+        | 'tide'
+        | 'translation'
+        | 'trash'
+        | 'twitter'
+        | 'undo'
+        | 'universal-access-alt'
+        | 'universal-access'
+        | 'unlock'
+        | 'update'
+        | 'upload'
+        | 'vault'
+        | 'video-alt'
+        | 'video-alt2'
+        | 'video-alt3'
+        | 'visibility'
+        | 'warning'
+        | 'welcome-add-page'
+        | 'welcome-comments'
+        | 'welcome-learn-more'
+        | 'welcome-view-site'
+        | 'welcome-widgets-menus'
+        | 'welcome-write-blog'
+        | 'wordpress-alt'
+        | 'wordpress'
+        | 'yes-alt'
+        | 'yes';
 }
 declare const Dashicon: ComponentType<Dashicon.Props>;
 
diff --git a/types/wordpress__components/date-time/date.d.ts b/types/wordpress__components/date-time/date.d.ts
index b4f9161676..364d3706c2 100644
--- a/types/wordpress__components/date-time/date.d.ts
+++ b/types/wordpress__components/date-time/date.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace DatePicker {
     interface Props {
diff --git a/types/wordpress__components/date-time/index.d.ts b/types/wordpress__components/date-time/index.d.ts
index 50dcc0e7b7..d5a5bbf530 100644
--- a/types/wordpress__components/date-time/index.d.ts
+++ b/types/wordpress__components/date-time/index.d.ts
@@ -1,11 +1,11 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
-import { default as DatePicker } from "./date";
+import { default as DatePicker } from './date';
 
-export { default as TimePicker } from "./time";
-export { default as DatePicker } from "./date";
+export { default as TimePicker } from './time';
+export { default as DatePicker } from './date';
 
 export namespace DateTimePicker {
-    type Props = Omit<DatePicker.Props, "isInvalidDate">;
+    type Props = Omit<DatePicker.Props, 'isInvalidDate'>;
 }
 export const DateTimePicker: ComponentType<DateTimePicker.Props>;
diff --git a/types/wordpress__components/date-time/time.d.ts b/types/wordpress__components/date-time/time.d.ts
index f811e24926..1afdf7beed 100644
--- a/types/wordpress__components/date-time/time.d.ts
+++ b/types/wordpress__components/date-time/time.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace TimePicker {
     interface Props {
diff --git a/types/wordpress__components/disabled/index.d.ts b/types/wordpress__components/disabled/index.d.ts
index 459267622c..519b7d829d 100644
--- a/types/wordpress__components/disabled/index.d.ts
+++ b/types/wordpress__components/disabled/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, Consumer, ReactNode } from "@wordpress/element";
+import { ComponentType, Consumer, ReactNode } from '@wordpress/element';
 
 declare namespace Disabled {
     interface Props {
diff --git a/types/wordpress__components/draggable/index.d.ts b/types/wordpress__components/draggable/index.d.ts
index bf705339dd..f86ffb3ea1 100644
--- a/types/wordpress__components/draggable/index.d.ts
+++ b/types/wordpress__components/draggable/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, DragEventHandler, ReactNode } from "@wordpress/element";
+import { ComponentType, DragEventHandler, ReactNode } from '@wordpress/element';
 
 declare namespace Draggable {
     interface Props {
@@ -22,10 +22,7 @@ declare namespace Draggable {
          * Render prop providing `onDragStart` and `onDragEnd` for the
          * draggable element.
          */
-        children(props: {
-            onDraggableStart: DragEventHandler;
-            onDraggableEnd: DragEventHandler;
-        }): ReactNode;
+        children(props: { onDraggableStart: DragEventHandler; onDraggableEnd: DragEventHandler }): ReactNode;
     }
 }
 declare const Draggable: ComponentType<Draggable.Props>;
diff --git a/types/wordpress__components/drop-zone/index.d.ts b/types/wordpress__components/drop-zone/index.d.ts
index 895ab48707..8476e55385 100644
--- a/types/wordpress__components/drop-zone/index.d.ts
+++ b/types/wordpress__components/drop-zone/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, DragEvent } from "@wordpress/element";
+import { ComponentType, DragEvent } from '@wordpress/element';
 
 declare namespace DropZone {
     interface Props {
@@ -35,14 +35,11 @@ declare namespace DropZone {
          * @param position - Indicates whether the drop event happened closer
          *     to the top or bottom edges and left or right ones.
          */
-        onDrop?(
-            event: DragEvent<HTMLDivElement>,
-            position: HoverPosition
-        ): void;
+        onDrop?(event: DragEvent<HTMLDivElement>, position: HoverPosition): void;
     }
     type HoverPosition = {
-        x: "left" | "right";
-        y: "top" | "bottom";
+        x: 'left' | 'right';
+        y: 'top' | 'bottom';
     } | null;
 }
 declare const DropZone: ComponentType<DropZone.Props>;
diff --git a/types/wordpress__components/drop-zone/provider.d.ts b/types/wordpress__components/drop-zone/provider.d.ts
index 25b3b2f886..8fc42a2f76 100644
--- a/types/wordpress__components/drop-zone/provider.d.ts
+++ b/types/wordpress__components/drop-zone/provider.d.ts
@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode } from '@wordpress/element';
 
-declare const DropZoneProvider: ComponentType<{children: ReactNode}>;
+declare const DropZoneProvider: ComponentType<{ children: ReactNode }>;
 
 export default DropZoneProvider;
diff --git a/types/wordpress__components/dropdown-menu/index.d.ts b/types/wordpress__components/dropdown-menu/index.d.ts
index 2fccb5fc64..675d02f8cc 100644
--- a/types/wordpress__components/dropdown-menu/index.d.ts
+++ b/types/wordpress__components/dropdown-menu/index.d.ts
@@ -1,7 +1,7 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
-import Dashicon from "../dashicon";
-import Dropdown from "../dropdown";
+import Dashicon from '../dashicon';
+import Dropdown from '../dropdown';
 import Popover from '../popover';
 
 declare namespace DropdownMenu {
diff --git a/types/wordpress__components/dropdown/index.d.ts b/types/wordpress__components/dropdown/index.d.ts
index 12acea1fef..831c1a0af6 100644
--- a/types/wordpress__components/dropdown/index.d.ts
+++ b/types/wordpress__components/dropdown/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
 import Popover from '../popover';
 
@@ -41,7 +41,7 @@ declare namespace Dropdown {
          *
          * @defaultValue "firstElement"
          */
-        focusOnMount?: "firstElement" | "container" | false;
+        focusOnMount?: 'firstElement' | 'container' | false;
         renderToggle(props: RenderProps): JSX.Element;
         renderContent(props: RenderProps): JSX.Element;
     }
diff --git a/types/wordpress__components/external-link/index.d.ts b/types/wordpress__components/external-link/index.d.ts
index ae717fed93..aae64b2aa5 100644
--- a/types/wordpress__components/external-link/index.d.ts
+++ b/types/wordpress__components/external-link/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
 declare namespace ExternalLink {
     type Props = HTMLProps<HTMLAnchorElement>;
diff --git a/types/wordpress__components/focal-point-picker/index.d.ts b/types/wordpress__components/focal-point-picker/index.d.ts
index 9917632ee9..a681ba1aa1 100644
--- a/types/wordpress__components/focal-point-picker/index.d.ts
+++ b/types/wordpress__components/focal-point-picker/index.d.ts
@@ -1,6 +1,6 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
-import BaseControl from "../base-control";
+import BaseControl from '../base-control';
 
 declare namespace FocalPointPicker {
     interface Props extends BaseControl.ControlProps {
diff --git a/types/wordpress__components/focusable-iframe/index.d.ts b/types/wordpress__components/focusable-iframe/index.d.ts
index eff3303973..1845b0d78e 100644
--- a/types/wordpress__components/focusable-iframe/index.d.ts
+++ b/types/wordpress__components/focusable-iframe/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, HTMLProps, RefObject } from "@wordpress/element";
+import { ComponentType, HTMLProps, RefObject } from '@wordpress/element';
 
 declare namespace FocusableIframe {
     interface Props extends HTMLProps<HTMLIFrameElement> {
diff --git a/types/wordpress__components/font-size-picker/index.d.ts b/types/wordpress__components/font-size-picker/index.d.ts
index 44358428d4..ce5991ac83 100644
--- a/types/wordpress__components/font-size-picker/index.d.ts
+++ b/types/wordpress__components/font-size-picker/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace FontSizePicker {
     interface Props {
diff --git a/types/wordpress__components/form-file-upload/index.d.ts b/types/wordpress__components/form-file-upload/index.d.ts
index 9794c17622..276ce53b55 100644
--- a/types/wordpress__components/form-file-upload/index.d.ts
+++ b/types/wordpress__components/form-file-upload/index.d.ts
@@ -1,6 +1,6 @@
-import { ChangeEventHandler, ComponentType } from "@wordpress/element";
+import { ChangeEventHandler, ComponentType } from '@wordpress/element';
 
-import IconButton from "../icon-button";
+import IconButton from '../icon-button';
 
 declare namespace FormFileUpload {
     interface BaseProps {
@@ -20,9 +20,7 @@ declare namespace FormFileUpload {
          */
         onChange: ChangeEventHandler<HTMLInputElement>;
     }
-    interface IconButtonProps
-        extends BaseProps,
-            Partial<Omit<IconButton.Props, "onChange" | "icon">> {
+    interface IconButtonProps extends BaseProps, Partial<Omit<IconButton.Props, 'onChange'>> {
         render?: never;
     }
     interface RenderProps extends BaseProps {
diff --git a/types/wordpress__components/form-toggle/index.d.ts b/types/wordpress__components/form-toggle/index.d.ts
index b64e5e8352..4bed23c6b9 100644
--- a/types/wordpress__components/form-toggle/index.d.ts
+++ b/types/wordpress__components/form-toggle/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
 declare const FormToggle: ComponentType<HTMLProps<HTMLInputElement>>;
 
diff --git a/types/wordpress__components/form-token-field/index.d.ts b/types/wordpress__components/form-token-field/index.d.ts
index 512ce711ba..e26f214bd0 100644
--- a/types/wordpress__components/form-token-field/index.d.ts
+++ b/types/wordpress__components/form-token-field/index.d.ts
@@ -1,8 +1,4 @@
-import {
-    ComponentType,
-    FocusEventHandler,
-    MouseEventHandler
-} from "@wordpress/element";
+import { ComponentType, FocusEventHandler, MouseEventHandler } from '@wordpress/element';
 
 declare namespace FormTokenField {
     interface Props {
@@ -81,7 +77,7 @@ declare namespace FormTokenField {
               /**
                * Applies styles to token.
                */
-              status?: "error" | "validating" | "success";
+              status?: 'error' | 'validating' | 'success';
               /**
                * Adds a title to the token.
                */
diff --git a/types/wordpress__components/higher-order/navigate-regions/index.d.ts b/types/wordpress__components/higher-order/navigate-regions/index.d.ts
index 20d61ec9e6..a31b09613f 100644
--- a/types/wordpress__components/higher-order/navigate-regions/index.d.ts
+++ b/types/wordpress__components/higher-order/navigate-regions/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 // prettier-ignore
 export default function navigateRegions<T extends ComponentType<any>>(wrapped: T):
diff --git a/types/wordpress__components/higher-order/with-constrained-tabbing/index.d.ts b/types/wordpress__components/higher-order/with-constrained-tabbing/index.d.ts
index 2ba8381331..3d2bcf6dc2 100644
--- a/types/wordpress__components/higher-order/with-constrained-tabbing/index.d.ts
+++ b/types/wordpress__components/higher-order/with-constrained-tabbing/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 // prettier-ignore
 export default function withConstrainedTabbing<T>(wrapped: T):
diff --git a/types/wordpress__components/higher-order/with-fallback-styles/index.d.ts b/types/wordpress__components/higher-order/with-fallback-styles/index.d.ts
index f1a069b62a..9bfa6e871c 100644
--- a/types/wordpress__components/higher-order/with-fallback-styles/index.d.ts
+++ b/types/wordpress__components/higher-order/with-fallback-styles/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 // prettier-ignore
 export default function withFallbackStyles<FSP>(
diff --git a/types/wordpress__components/higher-order/with-filters/index.d.ts b/types/wordpress__components/higher-order/with-filters/index.d.ts
index 7cac2c6007..3137b89760 100644
--- a/types/wordpress__components/higher-order/with-filters/index.d.ts
+++ b/types/wordpress__components/higher-order/with-filters/index.d.ts
@@ -1,11 +1,9 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 // prettier-ignore
 declare function withFilters(hookName: string): <T>(wrapped: T) =>
     T extends ComponentType<infer U> ? ComponentType<U> : never;
 
-declare function withFilters<P>(
-    hookName: string
-): (wrapped: ComponentType<any>) => ComponentType<P>; // tslint:disable-line:no-unnecessary-generics
+declare function withFilters<P>(hookName: string): (wrapped: ComponentType<any>) => ComponentType<P>; // tslint:disable-line:no-unnecessary-generics
 
 export default withFilters;
diff --git a/types/wordpress__components/higher-order/with-focus-outside/index.d.ts b/types/wordpress__components/higher-order/with-focus-outside/index.d.ts
index e9f525796f..d56d8df808 100644
--- a/types/wordpress__components/higher-order/with-focus-outside/index.d.ts
+++ b/types/wordpress__components/higher-order/with-focus-outside/index.d.ts
@@ -1,4 +1,4 @@
-import { Component, ComponentClass, ComponentType } from "@wordpress/element";
+import { Component, ComponentClass, ComponentType } from '@wordpress/element';
 
 export interface HFOComponent<P = {}, S = any> extends ComponentClass<P, S> {
     new (props: P, context?: any): Component<P, S> & {
diff --git a/types/wordpress__components/higher-order/with-focus-return/index.d.ts b/types/wordpress__components/higher-order/with-focus-return/index.d.ts
index 5d592c093b..dee877d78a 100644
--- a/types/wordpress__components/higher-order/with-focus-return/index.d.ts
+++ b/types/wordpress__components/higher-order/with-focus-return/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 export interface WFROptions {
     onFocusReturn?(): boolean | void;
diff --git a/types/wordpress__components/higher-order/with-notices/index.d.ts b/types/wordpress__components/higher-order/with-notices/index.d.ts
index 5ed77c40a4..abf2037db4 100644
--- a/types/wordpress__components/higher-order/with-notices/index.d.ts
+++ b/types/wordpress__components/higher-order/with-notices/index.d.ts
@@ -1,15 +1,12 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
-import NoticeList from "../../notice/list";
+import NoticeList from '../../notice/list';
 
 declare namespace withNotices {
     interface Props {
         noticeList: readonly NoticeList.Notice[];
         noticeOperations: {
-            createNotice(
-                notice: Partial<NoticeList.Notice> &
-                    Pick<NoticeList.Notice, "content">
-            ): void;
+            createNotice(notice: Partial<NoticeList.Notice> & Pick<NoticeList.Notice, 'content'>): void;
             createErrorNotice(message: string): void;
             removeAllNotices(): void;
             removeNotice(noticeId: string): void;
diff --git a/types/wordpress__components/higher-order/with-spoken-messages/index.d.ts b/types/wordpress__components/higher-order/with-spoken-messages/index.d.ts
index 991b397b19..4266cb9bab 100644
--- a/types/wordpress__components/higher-order/with-spoken-messages/index.d.ts
+++ b/types/wordpress__components/higher-order/with-spoken-messages/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 // prettier-ignore
 export default function withSpokenMessages<T extends ComponentType<any>>(wrapped: T):
diff --git a/types/wordpress__components/icon-button/index.d.ts b/types/wordpress__components/icon-button/index.d.ts
index 8c2681adea..16567ccfb8 100644
--- a/types/wordpress__components/icon-button/index.d.ts
+++ b/types/wordpress__components/icon-button/index.d.ts
@@ -1,8 +1,8 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
-import Button from "../button";
-import Dashicon from "../dashicon";
-import Popover from "../popover";
+import Button from '../button';
+import Dashicon from '../dashicon';
+import Popover from '../popover';
 import Shortcut from '../shortcut';
 
 declare namespace IconButton {
diff --git a/types/wordpress__components/icon/index.d.ts b/types/wordpress__components/icon/index.d.ts
index 668872f704..2d655449d4 100644
--- a/types/wordpress__components/icon/index.d.ts
+++ b/types/wordpress__components/icon/index.d.ts
@@ -1,11 +1,6 @@
-import {
-    ComponentType,
-    SVGProps,
-    ReactComponentElement,
-    ReactDOM
-} from "@wordpress/element";
+import { ComponentType, SVGProps, ReactComponentElement, ReactDOM } from '@wordpress/element';
 
-import Dashicon from "../dashicon";
+import Dashicon from '../dashicon';
 
 declare namespace Icon {
     type IconType<P> = Dashicon.Icon | ComponentType<P> | JSX.Element;
diff --git a/types/wordpress__components/index.d.ts b/types/wordpress__components/index.d.ts
index 4538819ba4..d7655e301a 100644
--- a/types/wordpress__components/index.d.ts
+++ b/types/wordpress__components/index.d.ts
@@ -4,7 +4,7 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
 
-export * from "./primitives";
+export * from './primitives';
 
 //
 // Components
diff --git a/types/wordpress__components/isolated-event-container/index.d.ts b/types/wordpress__components/isolated-event-container/index.d.ts
index 0c7a501b14..36cdd00f77 100644
--- a/types/wordpress__components/isolated-event-container/index.d.ts
+++ b/types/wordpress__components/isolated-event-container/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
 declare namespace IsolatedEventContainer {
     type Props = HTMLProps<HTMLDivElement>;
diff --git a/types/wordpress__components/keyboard-shortcuts/index.d.ts b/types/wordpress__components/keyboard-shortcuts/index.d.ts
index 9d0a5c3721..f6539abcd2 100644
--- a/types/wordpress__components/keyboard-shortcuts/index.d.ts
+++ b/types/wordpress__components/keyboard-shortcuts/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
 declare namespace KeyboardShortcuts {
     interface BaseProps {
@@ -28,7 +28,7 @@ declare namespace KeyboardShortcuts {
          * To override this, pass `eventName` with the name of a specific keyboard
          * event.
          */
-        eventName?: "keydown" | "keypress" | "keyup";
+        eventName?: 'keydown' | 'keypress' | 'keyup';
     }
     interface PropsWithChildren extends BaseProps {
         children: ReactNode;
diff --git a/types/wordpress__components/menu-group/index.d.ts b/types/wordpress__components/menu-group/index.d.ts
index 006c34cd7d..e4b17a1436 100644
--- a/types/wordpress__components/menu-group/index.d.ts
+++ b/types/wordpress__components/menu-group/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
 declare namespace MenuGroup {
     interface Props {
diff --git a/types/wordpress__components/menu-item/index.d.ts b/types/wordpress__components/menu-item/index.d.ts
index 67e1186bb4..c1a69201a2 100644
--- a/types/wordpress__components/menu-item/index.d.ts
+++ b/types/wordpress__components/menu-item/index.d.ts
@@ -1,6 +1,6 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
-import IconButton from "../icon-button";
+import IconButton from '../icon-button';
 
 declare namespace MenuItem {
     interface Props extends Partial<IconButton.Props> {
diff --git a/types/wordpress__components/menu-items-choice/index.d.ts b/types/wordpress__components/menu-items-choice/index.d.ts
index 63ba978158..a3caf24b6c 100644
--- a/types/wordpress__components/menu-items-choice/index.d.ts
+++ b/types/wordpress__components/menu-items-choice/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 import Shortcut from '../shortcut';
 
diff --git a/types/wordpress__components/modal/index.d.ts b/types/wordpress__components/modal/index.d.ts
index e81970ecce..08685d8e4b 100644
--- a/types/wordpress__components/modal/index.d.ts
+++ b/types/wordpress__components/modal/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, HTMLProps, ReactNode } from "@wordpress/element";
+import { ComponentType, HTMLProps, ReactNode } from '@wordpress/element';
 
 declare namespace Modal {
     interface Props extends HTMLProps<HTMLDivElement> {
diff --git a/types/wordpress__components/navigable-container/menu.d.ts b/types/wordpress__components/navigable-container/menu.d.ts
index 2e5a81f08a..26c0a1ab83 100644
--- a/types/wordpress__components/navigable-container/menu.d.ts
+++ b/types/wordpress__components/navigable-container/menu.d.ts
@@ -1,6 +1,6 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
-import TabbableContainer from "./tabbable";
+import TabbableContainer from './tabbable';
 
 declare namespace NavigableMenu {
     interface Props extends TabbableContainer.Props {
@@ -8,7 +8,7 @@ declare namespace NavigableMenu {
          * The orientation of the menu.
          * @defaultValue "vertical"
          */
-        orientation?: "vertical" | "horizontal" | "both";
+        orientation?: 'vertical' | 'horizontal' | 'both';
     }
 }
 declare const NavigableMenu: ComponentType<NavigableMenu.Props>;
diff --git a/types/wordpress__components/navigable-container/tabbable.d.ts b/types/wordpress__components/navigable-container/tabbable.d.ts
index 6687ac3db3..a8dd733ddb 100644
--- a/types/wordpress__components/navigable-container/tabbable.d.ts
+++ b/types/wordpress__components/navigable-container/tabbable.d.ts
@@ -1,11 +1,7 @@
-import {
-    ComponentType,
-    KeyboardEventHandler,
-    ReactNode
-} from "@wordpress/element";
+import { ComponentType, HTMLProps, KeyboardEventHandler, ReactNode } from '@wordpress/element';
 
 declare namespace TabbableContainer {
-    interface Props {
+    interface Props extends HTMLProps<HTMLDivElement> {
         /**
          * A boolean which tells the component whether or not to cycle from the
          * end back to the beginning and vice versa.
diff --git a/types/wordpress__components/notice/index.d.ts b/types/wordpress__components/notice/index.d.ts
index 8ad69b63c7..40ad7f45c3 100644
--- a/types/wordpress__components/notice/index.d.ts
+++ b/types/wordpress__components/notice/index.d.ts
@@ -1,8 +1,4 @@
-import {
-    ComponentType,
-    MouseEventHandler,
-    ReactNode
-} from "@wordpress/element";
+import { ComponentType, MouseEventHandler, ReactNode } from '@wordpress/element';
 
 declare namespace Notice {
     interface Props {
@@ -20,7 +16,7 @@ declare namespace Notice {
          * @defaultValue true
          */
         isDismissible?: boolean;
-        status?: "success" | "warning" | "error";
+        status?: 'success' | 'warning' | 'error';
         /**
          * Function called when dismissing the notice.
          */
diff --git a/types/wordpress__components/notice/list.d.ts b/types/wordpress__components/notice/list.d.ts
index e8f04508a6..7aec222de8 100644
--- a/types/wordpress__components/notice/list.d.ts
+++ b/types/wordpress__components/notice/list.d.ts
@@ -1,6 +1,6 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
-import Notice from "./";
+import Notice from './';
 
 declare namespace NoticeList {
     interface Props {
@@ -14,7 +14,7 @@ declare namespace NoticeList {
         onRemove?(noticeId: string): void;
         className?: string;
     }
-    interface Notice extends Omit<Notice.Props, "children" | "onRemove"> {
+    interface Notice extends Omit<Notice.Props, 'children' | 'onRemove'> {
         id: string;
         content: ReactNode;
     }
diff --git a/types/wordpress__components/panel/body.d.ts b/types/wordpress__components/panel/body.d.ts
index 8458c154e7..e8319fe25c 100644
--- a/types/wordpress__components/panel/body.d.ts
+++ b/types/wordpress__components/panel/body.d.ts
@@ -1,6 +1,6 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
-import Icon from "../icon";
+import Icon from '../icon';
 
 declare namespace PanelBody {
     interface Props {
diff --git a/types/wordpress__components/panel/header.d.ts b/types/wordpress__components/panel/header.d.ts
index e884dcc154..3c00cf57c6 100644
--- a/types/wordpress__components/panel/header.d.ts
+++ b/types/wordpress__components/panel/header.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace PanelHeader {
     interface Props {
diff --git a/types/wordpress__components/panel/index.d.ts b/types/wordpress__components/panel/index.d.ts
index 199c8fd4d8..329d6a2e01 100644
--- a/types/wordpress__components/panel/index.d.ts
+++ b/types/wordpress__components/panel/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
 declare namespace Panel {
     interface Props {
diff --git a/types/wordpress__components/panel/row.d.ts b/types/wordpress__components/panel/row.d.ts
index 3ff662d025..68994333e7 100644
--- a/types/wordpress__components/panel/row.d.ts
+++ b/types/wordpress__components/panel/row.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace PanelRow {
     interface Props {
diff --git a/types/wordpress__components/placeholder/index.d.ts b/types/wordpress__components/placeholder/index.d.ts
index 4b666fea86..8f25cd5533 100644
--- a/types/wordpress__components/placeholder/index.d.ts
+++ b/types/wordpress__components/placeholder/index.d.ts
@@ -1,6 +1,6 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
-import Icon from "../icon";
+import Icon from '../icon';
 
 declare namespace Placeholder {
     interface Props extends HTMLProps<HTMLDivElement> {
diff --git a/types/wordpress__components/popover/index.d.ts b/types/wordpress__components/popover/index.d.ts
index ee62715419..d32646989a 100644
--- a/types/wordpress__components/popover/index.d.ts
+++ b/types/wordpress__components/popover/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, HTMLProps, ReactNode } from "@wordpress/element";
+import { ComponentType, HTMLProps, ReactNode } from '@wordpress/element';
 
 declare namespace Popover {
     interface Props extends HTMLProps<HTMLDivElement> {
@@ -35,7 +35,7 @@ declare namespace Popover {
          *
          * @defaultValue "firstElement"
          */
-        focusOnMount?: "firstElement" | "container" | false;
+        focusOnMount?: 'firstElement' | 'container' | false;
         /**
          * Set this to customize the text that is shown in popover's header
          * when it is fullscreen on mobile.
@@ -57,9 +57,7 @@ declare namespace Popover {
          * Function that should return a `DOMRect` of where to position the
          * popover.
          */
-        getAnchorRect?(
-            currentAnchorElement: HTMLSpanElement | null
-        ): DOMRect | ClientRect | undefined;
+        getAnchorRect?(currentAnchorElement: HTMLSpanElement | null): DOMRect | ClientRect | undefined;
         /**
          * A callback invoked when the popover should be closed.
          */
@@ -77,15 +75,15 @@ declare namespace Popover {
      * node. Specify y- and x-axis as a space-separated string.
      */
     type Position =
-        | "top left"
-        | "top right"
-        | "top center"
-        | "middle left"
-        | "middle right"
-        | "middle center"
-        | "bottom left"
-        | "bottom right"
-        | "bottom center";
+        | 'top left'
+        | 'top right'
+        | 'top center'
+        | 'middle left'
+        | 'middle right'
+        | 'middle center'
+        | 'bottom left'
+        | 'bottom right'
+        | 'bottom center';
 }
 declare const Popover: ComponentType<Popover.Props>;
 
diff --git a/types/wordpress__components/primitives/block-quotation/index.d.ts b/types/wordpress__components/primitives/block-quotation/index.d.ts
index 2155788ecf..21daa15bf6 100644
--- a/types/wordpress__components/primitives/block-quotation/index.d.ts
+++ b/types/wordpress__components/primitives/block-quotation/index.d.ts
@@ -1 +1 @@
-export const BlockQuotation: "blockquote";
+export const BlockQuotation: 'blockquote';
diff --git a/types/wordpress__components/primitives/svg/index.d.ts b/types/wordpress__components/primitives/svg/index.d.ts
index e02c6d9c08..3812e07081 100644
--- a/types/wordpress__components/primitives/svg/index.d.ts
+++ b/types/wordpress__components/primitives/svg/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 export const Circle: ComponentType<JSX.IntrinsicElements['circle']>;
 export const G: ComponentType<JSX.IntrinsicElements['g']>;
diff --git a/types/wordpress__components/query-controls/index.d.ts b/types/wordpress__components/query-controls/index.d.ts
index 0e47decf4f..ce58bf9724 100644
--- a/types/wordpress__components/query-controls/index.d.ts
+++ b/types/wordpress__components/query-controls/index.d.ts
@@ -1,8 +1,8 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace QueryControls {
-    type Order = "asc" | "desc";
-    type OrderBy = "date" | "title";
+    type Order = 'asc' | 'desc';
+    type OrderBy = 'date' | 'title';
     type CategoryProps =
         | {
               categoriesList: ReadonlyArray<{
diff --git a/types/wordpress__components/radio-control/index.d.ts b/types/wordpress__components/radio-control/index.d.ts
index 62d84aa77d..1e5ffb1bbf 100644
--- a/types/wordpress__components/radio-control/index.d.ts
+++ b/types/wordpress__components/radio-control/index.d.ts
@@ -1,21 +1,21 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 import BaseControl from '../base-control';
 
 declare namespace RadioControl {
-    interface Props extends BaseControl.ControlProps {
-        options?: readonly Option[];
+    interface Props<T> extends BaseControl.ControlProps {
+        options?: ReadonlyArray<Option<T>>;
         /**
          * The value property of the currently selected option.
          */
-        selected?: Option["value"];
+        selected?: T;
         /**
          * A function that receives the value of the new option that is being
          * selected as input.
          */
-        onChange(value: Option["value"]): void;
+        onChange(value?: T): void;
     }
-    interface Option {
+    interface Option<T> {
         /**
          * The label to be shown to the user.
          */
@@ -23,9 +23,10 @@ declare namespace RadioControl {
         /**
          * The internal value compared against select and passed to `onChange`.
          */
-        value: string;
+        value: T;
     }
 }
-declare const RadioControl: ComponentType<RadioControl.Props>;
+// tslint:disable-next-line:no-unnecessary-generics
+declare function RadioControl<T>(props: RadioControl.Props<T>): JSX.Element;
 
 export default RadioControl;
diff --git a/types/wordpress__components/range-control/index.d.ts b/types/wordpress__components/range-control/index.d.ts
index a6d8053d4e..522de0fc62 100644
--- a/types/wordpress__components/range-control/index.d.ts
+++ b/types/wordpress__components/range-control/index.d.ts
@@ -1,14 +1,11 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
-import BaseControl from "../base-control";
-import Dashicon from "../dashicon";
+import BaseControl from '../base-control';
+import Dashicon from '../dashicon';
 
 declare namespace RangeControl {
     interface Props
-        extends Omit<
-                HTMLProps<HTMLInputElement>,
-                keyof BaseControl.ControlProps | "onChange"
-            >,
+        extends Omit<HTMLProps<HTMLInputElement>, keyof BaseControl.ControlProps | 'onChange'>,
             BaseControl.ControlProps {
         /**
          * If this property is added, a `DashIcon` component will be rendered
diff --git a/types/wordpress__components/resizable-box/index.d.ts b/types/wordpress__components/resizable-box/index.d.ts
index 8bfb80a814..a942c5ad44 100644
--- a/types/wordpress__components/resizable-box/index.d.ts
+++ b/types/wordpress__components/resizable-box/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 import { ResizableProps } from 're-resizable';
 
 declare namespace ResizableBox {
diff --git a/types/wordpress__components/responsive-wrapper/index.d.ts b/types/wordpress__components/responsive-wrapper/index.d.ts
index 357aa20c04..49345bcf38 100644
--- a/types/wordpress__components/responsive-wrapper/index.d.ts
+++ b/types/wordpress__components/responsive-wrapper/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, ReactChild } from "@wordpress/element";
+import { ComponentType, ReactChild } from '@wordpress/element';
 
 declare namespace ResponsiveWrapper {
     interface Props {
diff --git a/types/wordpress__components/sandbox/index.d.ts b/types/wordpress__components/sandbox/index.d.ts
index 008694da7d..9885935998 100644
--- a/types/wordpress__components/sandbox/index.d.ts
+++ b/types/wordpress__components/sandbox/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, FocusEventHandler } from "@wordpress/element";
+import { ComponentType, FocusEventHandler } from '@wordpress/element';
 
 declare namespace SandBox {
     interface Props {
diff --git a/types/wordpress__components/scroll-lock/index.d.ts b/types/wordpress__components/scroll-lock/index.d.ts
index 02404d31fc..535951ca4e 100644
--- a/types/wordpress__components/scroll-lock/index.d.ts
+++ b/types/wordpress__components/scroll-lock/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace ScrollLock {
     interface Props {
diff --git a/types/wordpress__components/select-control/index.d.ts b/types/wordpress__components/select-control/index.d.ts
index 227babd8fc..fc1d8eb921 100644
--- a/types/wordpress__components/select-control/index.d.ts
+++ b/types/wordpress__components/select-control/index.d.ts
@@ -1,6 +1,6 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
-import BaseControl from "../base-control";
+import BaseControl from '../base-control';
 
 declare namespace SelectControl {
     interface Option {
@@ -16,7 +16,7 @@ declare namespace SelectControl {
     }
     type Props<T extends string | readonly string[]> = Omit<
         HTMLProps<HTMLSelectElement>,
-        keyof BaseControl.ControlProps | "multiple" | "onChange" | "value"
+        keyof BaseControl.ControlProps | 'multiple' | 'onChange' | 'value'
     > &
         BaseControl.ControlProps & {
             options?: readonly Option[];
@@ -28,9 +28,7 @@ declare namespace SelectControl {
              * is a single value with the new selected value.
              */
             onChange(value: T): void;
-        } & (T extends readonly string[]
-            ? { multiple: true }
-            : { multiple?: false });
+        } & (T extends readonly string[] ? { multiple: true } : { multiple?: false });
 }
 declare function SelectControl<T extends string | readonly string[]>(
     // tslint:disable-next-line:no-unnecessary-generics
diff --git a/types/wordpress__components/shortcut/index.d.ts b/types/wordpress__components/shortcut/index.d.ts
index 741197a6a6..1c1172098f 100644
--- a/types/wordpress__components/shortcut/index.d.ts
+++ b/types/wordpress__components/shortcut/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace Shortcut {
     interface ShortcutObj {
diff --git a/types/wordpress__components/slot-fill/context.d.ts b/types/wordpress__components/slot-fill/context.d.ts
index 067531314d..d717b4ef6e 100644
--- a/types/wordpress__components/slot-fill/context.d.ts
+++ b/types/wordpress__components/slot-fill/context.d.ts
@@ -1,8 +1,4 @@
-import {
-    Component,
-    ComponentType,
-    Consumer as ContextConsumer
-} from "@wordpress/element";
+import { Component, ComponentType, Consumer as ContextConsumer } from '@wordpress/element';
 
 export interface SlotFillContext {
     registerSlot(name: string, instance: Component): void;
@@ -12,10 +8,7 @@ export interface SlotFillContext {
     // FIXME: instance is not correctly typed. but there's a bug in the code that assumes this type.
     unregisterFill(name: string, instance: Component): void;
     getSlot(name: string): Component;
-    getFills(
-        name: string,
-        instance: Component
-    ): ReadonlyArray<Component & { occurrence?: number }>;
+    getFills(name: string, instance: Component): ReadonlyArray<Component & { occurrence?: number }>;
 }
 
 declare const SlotFillProvider: ComponentType;
diff --git a/types/wordpress__components/slot-fill/fill.d.ts b/types/wordpress__components/slot-fill/fill.d.ts
index 95eb1198c5..9236aa4244 100644
--- a/types/wordpress__components/slot-fill/fill.d.ts
+++ b/types/wordpress__components/slot-fill/fill.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode, ReactPortal } from "@wordpress/element";
+import { ComponentType, ReactNode, ReactPortal } from '@wordpress/element';
 
 declare namespace Fill {
     interface Props {
diff --git a/types/wordpress__components/slot-fill/index.d.ts b/types/wordpress__components/slot-fill/index.d.ts
index c55390a4a2..57d0b1ba37 100644
--- a/types/wordpress__components/slot-fill/index.d.ts
+++ b/types/wordpress__components/slot-fill/index.d.ts
@@ -1,8 +1,8 @@
-import { FC } from "@wordpress/element";
+import { FC } from '@wordpress/element';
 
-import Slot from "./slot";
-import Fill from "./fill";
-import Provider, { Consumer } from "./context";
+import Slot from './slot';
+import Fill from './fill';
+import Provider, { Consumer } from './context';
 
 export { Slot, Fill, Provider, Consumer };
 
diff --git a/types/wordpress__components/slot-fill/slot.d.ts b/types/wordpress__components/slot-fill/slot.d.ts
index f19ac673df..07ecdd8647 100644
--- a/types/wordpress__components/slot-fill/slot.d.ts
+++ b/types/wordpress__components/slot-fill/slot.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace Slot {
     interface Props {
@@ -13,9 +13,7 @@ declare namespace Slot {
          * `Fill`s as a param. It allows to perform additional processing and
          * wrap `fills` conditionally.
          */
-        children?(
-            fills: ReadonlyArray<readonly JSX.Element[]>
-        ): JSX.Element | null;
+        children?(fills: ReadonlyArray<readonly JSX.Element[]>): JSX.Element | null;
         /**
          * Changes event bubbling behavior.
          *
diff --git a/types/wordpress__components/snackbar/index.d.ts b/types/wordpress__components/snackbar/index.d.ts
index 24fc216c1d..00f30289a4 100644
--- a/types/wordpress__components/snackbar/index.d.ts
+++ b/types/wordpress__components/snackbar/index.d.ts
@@ -1,6 +1,6 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
-import Notice from "../notice";
+import Notice from '../notice';
 
 declare namespace Snackbar {
     interface Props {
diff --git a/types/wordpress__components/snackbar/list.d.ts b/types/wordpress__components/snackbar/list.d.ts
index 800a6a9c01..fd288980e6 100644
--- a/types/wordpress__components/snackbar/list.d.ts
+++ b/types/wordpress__components/snackbar/list.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 import NoticeList from '../notice/list';
 
diff --git a/types/wordpress__components/spinner/index.d.ts b/types/wordpress__components/spinner/index.d.ts
index 2612e73d3d..7c1c363112 100644
--- a/types/wordpress__components/spinner/index.d.ts
+++ b/types/wordpress__components/spinner/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace Spinner {
     interface Props {
diff --git a/types/wordpress__components/tab-panel/index.d.ts b/types/wordpress__components/tab-panel/index.d.ts
index 7d2c9136ae..982b0a60f3 100644
--- a/types/wordpress__components/tab-panel/index.d.ts
+++ b/types/wordpress__components/tab-panel/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
 declare namespace TabPanel {
     interface Tab {
@@ -46,7 +46,7 @@ declare namespace TabPanel {
          * The orientation of the tablist.
          * @defaultValue "horizontal"
          */
-        orientation?: "horizontal" | "vertical";
+        orientation?: 'horizontal' | 'vertical';
         tabs: readonly Tab[];
         /**
          * The function called when a tab has been selected. It is passed the
diff --git a/types/wordpress__components/text-control/index.d.ts b/types/wordpress__components/text-control/index.d.ts
index 9361e0d6c6..c79d9005dd 100644
--- a/types/wordpress__components/text-control/index.d.ts
+++ b/types/wordpress__components/text-control/index.d.ts
@@ -1,13 +1,10 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
-import BaseControl from "../base-control";
+import BaseControl from '../base-control';
 
 declare namespace TextControl {
     interface Props
-        extends Omit<
-                HTMLProps<HTMLInputElement>,
-                keyof BaseControl.ControlProps | "onChange"
-            >,
+        extends Omit<HTMLProps<HTMLInputElement>, keyof BaseControl.ControlProps | 'onChange'>,
             BaseControl.ControlProps {
         /**
          * The current value of the input.
diff --git a/types/wordpress__components/textarea-control/index.d.ts b/types/wordpress__components/textarea-control/index.d.ts
index 4ccefdf156..f7ee81c8cc 100644
--- a/types/wordpress__components/textarea-control/index.d.ts
+++ b/types/wordpress__components/textarea-control/index.d.ts
@@ -1,13 +1,10 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
-import BaseControl from "../base-control";
+import BaseControl from '../base-control';
 
 declare namespace TextareaControl {
     interface Props
-        extends Omit<
-                HTMLProps<HTMLTextAreaElement>,
-                keyof BaseControl.ControlProps | "onChange"
-            >,
+        extends Omit<HTMLProps<HTMLTextAreaElement>, keyof BaseControl.ControlProps | 'onChange'>,
             BaseControl.ControlProps {
         /**
          * The number of rows the textarea should contain.
diff --git a/types/wordpress__components/toggle-control/index.d.ts b/types/wordpress__components/toggle-control/index.d.ts
index 3b54be010d..4fdb258e26 100644
--- a/types/wordpress__components/toggle-control/index.d.ts
+++ b/types/wordpress__components/toggle-control/index.d.ts
@@ -1,6 +1,6 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
-import BaseControl from "../base-control";
+import BaseControl from '../base-control';
 
 declare namespace ToggleControl {
     interface Props extends BaseControl.ControlProps {
diff --git a/types/wordpress__components/toolbar-button/index.d.ts b/types/wordpress__components/toolbar-button/index.d.ts
index e0751e355b..fc67190465 100644
--- a/types/wordpress__components/toolbar-button/index.d.ts
+++ b/types/wordpress__components/toolbar-button/index.d.ts
@@ -1,12 +1,10 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
-import DropdownMenu from "../dropdown-menu";
-import IconButton from "../icon-button";
+import DropdownMenu from '../dropdown-menu';
+import IconButton from '../icon-button';
 
 declare namespace ToolbarButton {
-    interface Props
-        extends DropdownMenu.Control,
-            Pick<IconButton.Props, "shortcut"> {
+    interface Props extends DropdownMenu.Control, Pick<IconButton.Props, 'shortcut'> {
         /**
          * Anything to add into the containing element after the button.
          */
diff --git a/types/wordpress__components/toolbar/index.d.ts b/types/wordpress__components/toolbar/index.d.ts
index 74ad5def27..0728ca7616 100644
--- a/types/wordpress__components/toolbar/index.d.ts
+++ b/types/wordpress__components/toolbar/index.d.ts
@@ -1,12 +1,12 @@
-import { ComponentType, HTMLProps } from "@wordpress/element";
+import { ComponentType, HTMLProps } from '@wordpress/element';
 
-import DropdownMenu from "../dropdown-menu";
+import DropdownMenu from '../dropdown-menu';
 import ToolbarButton from '../toolbar-button';
 
 declare namespace Toolbar {
     interface Props
-        extends Omit<HTMLProps<HTMLDivElement>, "controls" | "label">,
-            Pick<DropdownMenu.Props, "icon" | "label"> {
+        extends Omit<HTMLProps<HTMLDivElement>, 'controls' | 'label'>,
+            Partial<Pick<DropdownMenu.Props, 'icon' | 'label'>> {
         /**
          * Class to set on the container div.
          */
diff --git a/types/wordpress__components/tooltip/index.d.ts b/types/wordpress__components/tooltip/index.d.ts
index b76be4dc6c..df515cfe58 100644
--- a/types/wordpress__components/tooltip/index.d.ts
+++ b/types/wordpress__components/tooltip/index.d.ts
@@ -1,7 +1,7 @@
-import { ComponentType, ReactNode } from "@wordpress/element";
+import { ComponentType, ReactNode } from '@wordpress/element';
 
-import Popover from "../popover";
-import Shortcut from "../shortcut";
+import Popover from '../popover';
+import Shortcut from '../shortcut';
 
 declare namespace Tooltip {
     interface Props {
diff --git a/types/wordpress__components/tree-select/index.d.ts b/types/wordpress__components/tree-select/index.d.ts
index 7b33bf5f6d..51b846e945 100644
--- a/types/wordpress__components/tree-select/index.d.ts
+++ b/types/wordpress__components/tree-select/index.d.ts
@@ -1,10 +1,9 @@
-import { ComponentType } from "@wordpress/element";
+import { ComponentType } from '@wordpress/element';
 
-import SelectControl from "../select-control";
+import SelectControl from '../select-control';
 
 declare namespace TreeSelect {
-    interface Props
-        extends Omit<SelectControl.Props<string>, "options" | "value"> {
+    interface Props extends Omit<SelectControl.Props<string>, 'options' | 'value'> {
         /**
          * If this property is added, an option will be added with this label
          * to represent empty selection.
diff --git a/types/wordpress__components/wordpress__components-tests.tsx b/types/wordpress__components/wordpress__components-tests.tsx
index b2711f6b7d..0e26dafda4 100644
--- a/types/wordpress__components/wordpress__components-tests.tsx
+++ b/types/wordpress__components/wordpress__components-tests.tsx
@@ -1,5 +1,5 @@
-import * as C from "@wordpress/components";
-import { Component } from "@wordpress/element";
+import * as C from '@wordpress/components';
+import { Component } from '@wordpress/element';
 
 //
 // primitives
@@ -10,7 +10,7 @@ import { Component } from "@wordpress/element";
 //
 // animate
 //
-<C.Animate type="appear" options={{ origin: "top left" }}>
+<C.Animate type="appear" options={{ origin: 'top left' }}>
     {({ className }) => <h1 className={className}>Hello World</h1>}
 </C.Animate>;
 
@@ -25,14 +25,14 @@ interface MyCompleteOption {
 <C.Autocomplete<MyCompleteOption>
     completers={[
         {
-            name: "fruit",
+            name: 'fruit',
             // The prefix that triggers this completer
-            triggerPrefix: "~",
+            triggerPrefix: '~',
             // The option data
             options: [
-                { visual: "🍎", name: "Apple", id: 1 },
-                { visual: "🍊", name: "Orange", id: 2 },
-                { visual: "🍇", name: "Grapes", id: 3 }
+                { visual: '🍎', name: 'Apple', id: 1 },
+                { visual: '🍊', name: 'Orange', id: 2 },
+                { visual: '🍇', name: 'Grapes', id: 3 },
             ],
             // Returns a label for an option like "🍊 Orange"
             getOptionLabel: option => (
@@ -44,12 +44,10 @@ interface MyCompleteOption {
             // Declares that options should be matched by their name
             getOptionKeywords: option => [option.name],
             // Declares that the Grapes option is disabled
-            isOptionDisabled: option => option.name === "Grapes",
+            isOptionDisabled: option => option.name === 'Grapes',
             // Declares completions should be inserted as abbreviations
-            getOptionCompletion: option => (
-                <abbr title={option.name}>{option.visual}</abbr>
-            )
-        }
+            getOptionCompletion: option => <abbr title={option.name}>{option.visual}</abbr>,
+        },
     ]}
 >
     {({ isExpanded, listBoxId, activeId }) => (
@@ -97,11 +95,7 @@ interface MyCompleteOption {
 //
 // clipboard-button
 //
-<C.ClipboardButton
-    isPrimary
-    text="Copy this"
-    onFinishCopy={() => console.log("copied!")}
-/>;
+<C.ClipboardButton isPrimary text="Copy this" onFinishCopy={() => console.log('copied!')} />;
 
 //
 // color-indicator
@@ -113,21 +107,18 @@ interface MyCompleteOption {
 //
 <C.ColorPalette
     colors={[
-        { name: "red", color: "#ff0000" },
-        { name: "green", color: "#00ff00" },
-        { name: "blue", color: "#0000ff" }
+        { name: 'red', color: '#ff0000' },
+        { name: 'green', color: '#00ff00' },
+        { name: 'blue', color: '#0000ff' },
     ]}
-    value={{ name: "red", color: "#ff0000" }}
+    value={{ name: 'red', color: '#ff0000' }}
     onChange={color => color && console.log(color.name)}
 />;
 
 //
 // color-picker
 //
-<C.ColorPicker
-    color="#ff0000"
-    onChangeComplete={color => console.log(color.hex)}
-/>;
+<C.ColorPicker color="#ff0000" onChangeComplete={color => console.log(color.hex)} />;
 
 //
 // dashicon
@@ -137,15 +128,8 @@ interface MyCompleteOption {
 //
 // date-time
 //
-<C.DatePicker
-    isInvalidDate={date => isNaN(date.valueOf())}
-    onChange={date => console.log(date.toUpperCase())}
-/>;
-<C.TimePicker
-    currentTime={new Date().toISOString()}
-    onChange={time => console.log(time.toUpperCase())}
-    is12Hour
-/>;
+<C.DatePicker isInvalidDate={date => isNaN(date.valueOf())} onChange={date => console.log(date.toUpperCase())} />;
+<C.TimePicker currentTime={new Date().toISOString()} onChange={time => console.log(time.toUpperCase())} is12Hour />;
 <C.DateTimePicker onChange={date => console.log(date.toUpperCase())} />;
 
 //
@@ -154,20 +138,14 @@ interface MyCompleteOption {
 <C.Disabled>
     <input type="text" />
 </C.Disabled>;
-<C.Disabled.Consumer>
-    {isDisabled => <button style={{ opacity: isDisabled ? 0.5 : 1 }} />}
-</C.Disabled.Consumer>;
+<C.Disabled.Consumer>{isDisabled => <button style={{ opacity: isDisabled ? 0.5 : 1 }} />}</C.Disabled.Consumer>;
 
 //
 // draggable
 //
 <C.Draggable elementId="draggable-panel" transferData={{}}>
     {({ onDraggableStart, onDraggableEnd }) => (
-        <div
-            onDragStart={onDraggableStart}
-            onDragEnd={onDraggableEnd}
-            draggable={true}
-        />
+        <div onDragStart={onDraggableStart} onDragEnd={onDraggableEnd} draggable={true} />
     )}
 </C.Draggable>;
 
@@ -212,25 +190,25 @@ interface MyCompleteOption {
     label="Select a direction"
     controls={[
         {
-            title: "Up",
-            icon: "arrow-up-alt",
-            onClick: () => console.log("up")
+            title: 'Up',
+            icon: 'arrow-up-alt',
+            onClick: () => console.log('up'),
         },
         {
-            title: "Right",
-            icon: "arrow-right-alt",
-            onClick: () => console.log("right")
+            title: 'Right',
+            icon: 'arrow-right-alt',
+            onClick: () => console.log('right'),
         },
         {
-            title: "Down",
-            icon: "arrow-down-alt",
-            onClick: () => console.log("down")
+            title: 'Down',
+            icon: 'arrow-down-alt',
+            onClick: () => console.log('down'),
         },
         {
-            title: "Left",
-            icon: "arrow-left-alt",
-            onClick: () => console.log("left")
-        }
+            title: 'Left',
+            icon: 'arrow-left-alt',
+            onClick: () => console.log('left'),
+        },
     ]}
 />;
 
@@ -251,10 +229,7 @@ interface MyCompleteOption {
 //
 // focusable-iframe
 //
-<C.FocusableIframe
-    src="/my-iframe-url"
-    onFocus={() => console.log("iframe is focused")}
-/>;
+<C.FocusableIframe src="/my-iframe-url" onFocus={() => console.log('iframe is focused')} />;
 
 //
 // font-size-picker
@@ -262,15 +237,15 @@ interface MyCompleteOption {
 <C.FontSizePicker
     fontSizes={[
         {
-            name: "Small",
-            slug: "small",
-            size: 12
+            name: 'Small',
+            slug: 'small',
+            size: 12,
         },
         {
-            name: "Big",
-            slug: "big",
-            size: 26
-        }
+            name: 'Big',
+            slug: 'big',
+            size: 26,
+        },
     ]}
     value={16}
     fallbackFontSize={16}
@@ -280,39 +255,37 @@ interface MyCompleteOption {
 //
 // form-file-upload
 //
-<C.FormFileUpload accept="image/*" onChange={() => console.log("new image")}>
+<C.FormFileUpload accept="image/*" icon="welcome-learn-more" onChange={() => console.log('new image')}>
     Upload
 </C.FormFileUpload>;
 <C.FormFileUpload
     multiple
     accept="application/pdf"
-    onChange={() => console.log("changed")}
-    render={({ openFileDialog }) => (
-        <button onClick={openFileDialog}>Open dialog</button>
-    )}
+    onChange={() => console.log('changed')}
+    render={({ openFileDialog }) => <button onClick={openFileDialog}>Open dialog</button>}
 />;
 
 //
 // form-toggle
 //
-<C.FormToggle checked={true} onChange={() => console.log("changed")} />;
+<C.FormToggle checked={true} onChange={() => console.log('changed')} />;
 
 //
 // form-token-field
 //
 <C.FormTokenField
     value={[
-        "foo",
+        'foo',
         {
-            value: "bar",
-            status: "success"
+            value: 'bar',
+            status: 'success',
         },
-        "baz",
+        'baz',
         {
-            value: "qux"
-        }
+            value: 'qux',
+        },
     ]}
-    suggestions={["foo", "bar", "baz", "qux"]}
+    suggestions={['foo', 'bar', 'baz', 'qux']}
     onChange={tokens => console.log(tokens)}
 />;
 
@@ -341,16 +314,16 @@ const IconFunctionComponent = (props: { foo: number; bar: number }) => (
 // icon-button
 //
 <C.IconButton icon="ellipsis" label="More" />;
-<C.IconButton icon={() => <i>foo</i>} onClick={() => console.log("clicked")} />;
+<C.IconButton icon={() => <i>foo</i>} onClick={() => console.log('clicked')} />;
 
 //
 // keyboard-shortcuts
 //
-const kbshortcutActionOne = () => console.log("action 1");
-const kbshortcutActionTwo = () => console.log("action 1");
+const kbshortcutActionOne = () => console.log('action 1');
+const kbshortcutActionTwo = () => console.log('action 1');
 const kbshortcuts = {
-    "mod+a": kbshortcutActionOne,
-    "ctrl+shift+j": kbshortcutActionTwo
+    'mod+a': kbshortcutActionOne,
+    'ctrl+shift+j': kbshortcutActionTwo,
 };
 <C.KeyboardShortcuts shortcuts={kbshortcuts} eventName="keyup">
     <div>Hello world</div>
@@ -361,12 +334,7 @@ const kbshortcuts = {
 // menu-group, menu-item
 //
 <C.MenuGroup>
-    <C.MenuItem
-        icon="yes"
-        isSelected={true}
-        onClick={() => console.log("clicked")}
-        isLarge
-    >
+    <C.MenuItem icon="yes" isSelected={true} onClick={() => console.log('clicked')} isLarge>
         Toggle
     </C.MenuItem>
 </C.MenuGroup>;
@@ -377,22 +345,22 @@ const kbshortcuts = {
 <C.MenuItemsChoice
     choices={[
         {
-            value: "visual",
-            label: "Visual Editor"
+            value: 'visual',
+            label: 'Visual Editor',
         },
         {
-            value: "text",
-            label: "Code Editor",
-            shortcut: "ctrl+shift+c"
+            value: 'text',
+            label: 'Code Editor',
+            shortcut: 'ctrl+shift+c',
         },
         {
-            value: "other",
-            label: "Other Editor",
+            value: 'other',
+            label: 'Other Editor',
             shortcut: {
-                display: "ctrl+alt+o",
-                ariaLabel: "use some other editor"
-            }
-        }
+                display: 'ctrl+alt+o',
+                ariaLabel: 'use some other editor',
+            },
+        },
     ]}
     value="visual"
     onSelect={value => console.log(`selected value is ${value}`)}
@@ -401,22 +369,14 @@ const kbshortcuts = {
 //
 // modal
 //
-<C.Modal
-    title="This is my modal"
-    onRequestClose={() => console.log("closing modal")}
->
-    <button onClick={() => console.log("clicked")}>
-        My custom close button
-    </button>
+<C.Modal title="This is my modal" onRequestClose={() => console.log('closing modal')}>
+    <button onClick={() => console.log('clicked')}>My custom close button</button>
 </C.Modal>;
 
 //
 // navigable-container
 //
-<C.NavigableMenu
-    onNavigate={(idx, el) => console.log(el.nodeName)}
-    orientation="horizontal"
->
+<C.NavigableMenu onNavigate={(idx, el) => console.log(el.nodeName)} orientation="horizontal">
     <button>Item 1</button>
     <button>Item 2</button>
     <button>Item 3</button>
@@ -434,20 +394,20 @@ const kbshortcuts = {
 <C.Notice
     actions={[
         {
-            label: "Action One",
-            className: "foo",
+            label: 'Action One',
+            className: 'foo',
             onClick() {
-                console.log("clicked");
-            }
+                console.log('clicked');
+            },
         },
         {
-            label: "Action Two",
-            url: "https://wordpress.org",
-            noDefaultClasses: true
-        }
+            label: 'Action Two',
+            url: 'https://wordpress.org',
+            noDefaultClasses: true,
+        },
     ]}
     status="success"
-    onRemove={() => console.log("notice removed")}
+    onRemove={() => console.log('notice removed')}
 >
     <h1>Hello World</h1>
 </C.Notice>;
@@ -455,10 +415,10 @@ const kbshortcuts = {
     className="my-notice-list"
     notices={[
         {
-            id: "1",
-            content: "Hello",
-            actions: [{ label: "Action One", url: "https://wordpress.org" }]
-        }
+            id: '1',
+            content: 'Hello',
+            actions: [{ label: 'Action One', url: 'https://wordpress.org' }],
+        },
     ]}
 ></C.NoticeList>;
 
@@ -466,20 +426,12 @@ const kbshortcuts = {
 // panel
 //
 <C.Panel header="My Panel" className="foo">
-    <C.PanelBody
-        title="Panel Body One"
-        icon={() => <i>icon</i>}
-        initialOpen={true}
-    >
+    <C.PanelBody title="Panel Body One" icon={() => <i>icon</i>} initialOpen={true}>
         <C.PanelRow>My Panel Inputs and Labels</C.PanelRow>
     </C.PanelBody>
 </C.Panel>;
 <C.Panel header="My Other Panel">
-    <C.PanelBody
-        title="Panel Body Two"
-        icon="welcome-widgets-menus"
-        initialOpen={true}
-    >
+    <C.PanelBody title="Panel Body Two" icon="welcome-widgets-menus" initialOpen={true}>
         <C.PanelRow className="foo">My Panel Inputs and Labels</C.PanelRow>
     </C.PanelBody>
 </C.Panel>;
@@ -509,10 +461,7 @@ const kbshortcuts = {
 //
 // query-controls
 //
-<C.QueryControls
-    numberOfItems={3}
-    onNumberOfItemsChange={n => console.log(Math.floor(n))}
-/>;
+<C.QueryControls numberOfItems={3} onNumberOfItemsChange={n => console.log(Math.floor(n))} />;
 <C.QueryControls
     orderBy="title"
     order="asc"
@@ -522,19 +471,19 @@ const kbshortcuts = {
     categoriesList={[
         {
             id: 1,
-            name: "Category 1",
-            parent: 0
+            name: 'Category 1',
+            parent: 0,
         },
         {
             id: 2,
-            name: "Category 1b",
-            parent: 1
+            name: 'Category 1b',
+            parent: 1,
         },
         {
             id: 3,
-            name: "Category 2",
-            parent: 0
-        }
+            name: 'Category 2',
+            parent: 0,
+        },
     ]}
     selectedCategoryId={1}
     onCategoryChange={categoryId => console.log(Math.floor(categoryId))}
@@ -548,21 +497,21 @@ const kbshortcuts = {
     label="User type"
     help="The type of the current user"
     selected="a"
-    options={[{ label: "Author", value: "a" }, { label: "Editor", value: "e" }]}
-    onChange={value => console.log(value.toUpperCase())}
+    options={[{ label: 'Author', value: 'a' }, { label: 'Editor', value: 'e' }]}
+    onChange={value => value && console.log(value.toUpperCase())}
+/>;
+<C.RadioControl
+    label="User type"
+    help="The type of the current user"
+    selected={{ foo: 'bar' }}
+    options={[{ label: 'Author', value: { foo: 'bar' } }, { label: 'Editor', value: { foo: 'baz' } }]}
+    onChange={value => value && console.log(value.foo)}
 />;
 
 //
 // range-control
 //
-<C.RangeControl
-    beforeIcon="move"
-    label="Columns"
-    value={5}
-    min={2}
-    max={10}
-    onChange={value => console.log(value)}
-/>;
+<C.RangeControl beforeIcon="move" label="Columns" value={5} min={2} max={10} onChange={value => console.log(value)} />;
 
 //
 // resizable-box
@@ -570,7 +519,7 @@ const kbshortcuts = {
 <C.ResizableBox
     size={{
         height: 100,
-        width: 100
+        width: 100,
     }}
     minHeight="50"
     minWidth={50}
@@ -582,7 +531,7 @@ const kbshortcuts = {
         topRight: false,
         bottomRight: true,
         bottomLeft: false,
-        topLeft: false
+        topLeft: false,
     }}
 />;
 
@@ -590,10 +539,7 @@ const kbshortcuts = {
 // responsive-wrapper
 //
 <C.ResponsiveWrapper naturalWidth={2000} naturalHeight={680}>
-    <img
-        src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
-        alt="WordPress"
-    />
+    <img src="https://s.w.org/style/images/about/WordPress-logotype-standard.png" alt="WordPress" />
 </C.ResponsiveWrapper>;
 
 //
@@ -612,22 +558,14 @@ const kbshortcuts = {
 <C.SelectControl
     label="Size"
     value="50%"
-    options={[
-        { label: "Big", value: "100%" },
-        { label: "Medium", value: "50%" },
-        { label: "Small", value: "25%" }
-    ]}
+    options={[{ label: 'Big', value: '100%' }, { label: 'Medium', value: '50%' }, { label: 'Small', value: '25%' }]}
     onChange={size => console.log(size)}
 />;
 <C.SelectControl
     label="Size"
-    value={["50%"]}
+    value={['50%']}
     multiple
-    options={[
-        { label: "Big", value: "100%" },
-        { label: "Medium", value: "50%" },
-        { label: "Small", value: "25%" }
-    ]}
+    options={[{ label: 'Big', value: '100%' }, { label: 'Medium', value: '50%' }, { label: 'Small', value: '25%' }]}
     onChange={size => console.log(size)}
 />;
 
@@ -638,19 +576,19 @@ const kbshortcuts = {
 <C.Snackbar
     actions={[
         {
-            label: "Action One",
-            className: "foo",
+            label: 'Action One',
+            className: 'foo',
             onClick() {
-                console.log("clicked");
-            }
+                console.log('clicked');
+            },
         },
         {
-            label: "Action Two",
-            url: "https://wordpress.org",
-            noDefaultClasses: true
-        }
+            label: 'Action Two',
+            url: 'https://wordpress.org',
+            noDefaultClasses: true,
+        },
     ]}
-    onRemove={() => console.log("removed")}
+    onRemove={() => console.log('removed')}
 >
     Post published successfully.
 </C.Snackbar>;
@@ -658,10 +596,10 @@ const kbshortcuts = {
     className="my-notice-list"
     notices={[
         {
-            id: "1",
-            content: "Hello",
-            actions: [{ label: "Action One", url: "https://wordpress.org" }]
-        }
+            id: '1',
+            content: 'Hello',
+            actions: [{ label: 'Action One', url: 'https://wordpress.org' }],
+        },
     ]}
 />;
 
@@ -679,15 +617,15 @@ const kbshortcuts = {
     onSelect={tabName => console.log(tabName.toUpperCase())}
     tabs={[
         {
-            name: "tab1",
-            title: "Tab 1",
-            className: "tab-one"
+            name: 'tab1',
+            title: 'Tab 1',
+            className: 'tab-one',
         },
         {
-            name: "tab2",
-            title: "Tab 2",
-            foo: "bar"
-        }
+            name: 'tab2',
+            title: 'Tab 2',
+            foo: 'bar',
+        },
     ]}
 >
     {tab => <p>{tab.title}</p>}
@@ -696,17 +634,8 @@ const kbshortcuts = {
 //
 // text-control
 //
-<C.TextControl
-    label="My text value"
-    value={"foo"}
-    onChange={value => console.log(value.toUpperCase())}
-/>;
-<C.TextControl
-    type="number"
-    label="My numeric value"
-    value={3}
-    onChange={value => console.log(value.toUpperCase())}
-/>;
+<C.TextControl label="My text value" value={'foo'} onChange={value => console.log(value.toUpperCase())} />;
+<C.TextControl type="number" label="My numeric value" value={3} onChange={value => console.log(value.toUpperCase())} />;
 
 //
 // textarea-control
@@ -721,11 +650,7 @@ const kbshortcuts = {
 //
 // toggle-control
 //
-<C.ToggleControl
-    label="Controlled"
-    checked={true}
-    onChange={isChecked => console.log(isChecked)}
-/>;
+<C.ToggleControl label="Controlled" checked={true} onChange={isChecked => console.log(isChecked)} />;
 <C.ToggleControl label="Uncontrolled" />;
 
 //
@@ -737,72 +662,68 @@ const kbshortcuts = {
     label="Testing array of controls"
     controls={[
         {
-            icon: "yes",
-            title: "Yes",
+            icon: 'yes',
+            title: 'Yes',
             onClick() {},
             shortcut: {
-                display: "Yes"
+                display: 'Yes',
             },
-            isDisabled: false
+            isDisabled: false,
         },
         {
-            icon: "no",
-            title: "No",
+            icon: 'no',
+            title: 'No',
             onClick() {},
-            subscript: "no",
+            subscript: 'no',
             isActive: false,
-            shortcut: "No"
-        }
+            shortcut: 'No',
+        },
     ]}
 />;
 <C.Toolbar
     isCollapsed
     icon="wordpress-alt"
-    label="Testing array of 'control sets'"
+    title="Testing array of 'control sets'"
     controls={[
         [
             {
-                icon: "yes",
-                title: "Yes",
-                onClick() {}
+                icon: 'yes',
+                title: 'Yes',
+                onClick() {},
             },
             {
-                icon: "no",
-                title: "No",
-                onClick() {}
-            }
+                icon: 'no',
+                title: 'No',
+                onClick() {},
+            },
         ],
         [
             {
-                icon: "carrot",
-                title: "Carrots are delicious",
-                onClick() {}
-            }
-        ]
+                icon: 'carrot',
+                title: 'Carrots are delicious',
+                onClick() {},
+            },
+        ],
     ]}
 />;
 
 //
 // toolbar-button
 //
-<C.ToolbarButton
-    icon="editor-help"
-    title="Minimal Button"
-    onClick={() => console.log("clicked")}
-/>;
+<C.ToolbarButton icon="editor-help" title="Minimal Button" onClick={() => console.log('clicked')} />;
 <C.ToolbarButton
     className="bar"
     containerClassName="foo"
     extraProps={{
-        labelPosition: "bottom right",
+        labelPosition: 'bottom right',
         onFocus(e) {
             console.log(e.currentTarget.nodeName);
-        }
+        },
     }}
     icon="editor-code"
     subscript="hi"
     title="Toolbar Button"
-    onClick={() => console.log("clicked")}
+    onClick={() => console.log('clicked')}
 />;
 
 //
@@ -814,7 +735,7 @@ const kbshortcuts = {
 <C.Tooltip text="Hello world" position="bottom center" shortcut="ctrl+s">
     <button>Hover me for more information</button>
 </C.Tooltip>;
-<C.Tooltip text={<h1>Hello world</h1>} shortcut={{ display: "ctrl+s" }}>
+<C.Tooltip text={<h1>Hello world</h1>} shortcut={{ display: 'ctrl+s' }}>
     <button>Hover me for more information</button>
 </C.Tooltip>;
 
@@ -828,41 +749,41 @@ const kbshortcuts = {
     selectedId="foo"
     tree={[
         {
-            id: "grandparent-1",
-            name: "first grandparent",
+            id: 'grandparent-1',
+            name: 'first grandparent',
             children: [
                 {
-                    id: "parent-1",
-                    name: "parent",
+                    id: 'parent-1',
+                    name: 'parent',
                     children: [
                         {
-                            id: "child-1",
-                            name: "child"
-                        }
-                    ]
-                }
-            ]
+                            id: 'child-1',
+                            name: 'child',
+                        },
+                    ],
+                },
+            ],
         },
         {
-            id: "grandparent-2",
-            name: "second grandparent",
+            id: 'grandparent-2',
+            name: 'second grandparent',
             children: [
                 {
-                    id: "parent-2",
-                    name: "parent",
+                    id: 'parent-2',
+                    name: 'parent',
                     children: [
                         {
-                            id: "child-2",
-                            name: "child"
-                        }
-                    ]
-                }
-            ]
+                            id: 'child-2',
+                            name: 'child',
+                        },
+                    ],
+                },
+            ],
         },
         {
-            id: "no children",
-            name: "Childless"
-        }
+            id: 'no children',
+            name: 'Childless',
+        },
     ]}
     onChange={id => console.log(id)}
 />;
@@ -870,10 +791,7 @@ const kbshortcuts = {
 //
 // isolated-event-container
 //
-<C.IsolatedEventContainer
-    className="component-some_component"
-    onClick={e => console.log(e.currentTarget.nodeName)}
->
+<C.IsolatedEventContainer className="component-some_component" onClick={e => console.log(e.currentTarget.nodeName)}>
     <p>This is an isolated component</p>
 </C.IsolatedEventContainer>;
 
@@ -898,13 +816,13 @@ const MySlotFillProvider = () => {
     );
 };
 (() => {
-    const { Fill, Slot } = C.createSlotFill("Toolbar");
+    const { Fill, Slot } = C.createSlotFill('Toolbar');
 
     const ToolbarItem = () => <Fill>My item</Fill>;
 
     const Toolbar = () => (
         <div className="toolbar">
-            <Slot bubblesVirtually fillProps={{ foo: "bar" }} />
+            <Slot bubblesVirtually fillProps={{ foo: 'bar' }} />
         </div>
     );
 })();
@@ -924,13 +842,11 @@ const MySlotFillProvider = () => {
 // higher-order/navigate-regions
 //
 (() => {
-    const EnhancedComponent = C.navigateRegions(
-        ({ foo, bar }: { foo: string; bar: number }) => (
-            <div>
-                {foo} and {bar}{" "}
-            </div>
-        )
-    );
+    const EnhancedComponent = C.navigateRegions(({ foo, bar }: { foo: string; bar: number }) => (
+        <div>
+            {foo} and {bar}{' '}
+        </div>
+    ));
     <EnhancedComponent foo="hello" bar={123} />;
 })();
 
@@ -938,13 +854,11 @@ const MySlotFillProvider = () => {
 // higher-order/with-constrained-tabbing
 //
 (() => {
-    const EnhancedComponent = C.withConstrainedTabbing(
-        ({ foo, bar }: { foo: string; bar: number }) => (
-            <div>
-                {foo} and {bar}{" "}
-            </div>
-        )
-    );
+    const EnhancedComponent = C.withConstrainedTabbing(({ foo, bar }: { foo: string; bar: number }) => (
+        <div>
+            {foo} and {bar}{' '}
+        </div>
+    ));
     <EnhancedComponent foo="hello" bar={123} />;
 })();
 
@@ -952,15 +866,11 @@ const MySlotFillProvider = () => {
 // higher-order/with-fallback-styles
 //
 (() => {
-    const OriginalComponent = (props: {
-        foo: string;
-        bar: string;
-        baz: string;
-    }) => <div>{JSON.stringify(props)}</div>;
+    const OriginalComponent = (props: { foo: string; bar: string; baz: string }) => <div>{JSON.stringify(props)}</div>;
     const EnhancedComponent = C.withFallbackStyles((node, ownProps) => {
         console.log(node.nodeName);
         return {
-            baz: "baz"
+            baz: 'baz',
         };
     })(OriginalComponent);
     <EnhancedComponent foo="" bar="" />;
@@ -970,17 +880,11 @@ const MySlotFillProvider = () => {
 // higher-order/with-filters
 //
 (() => {
-    const OriginalComponent = (props: { foo: string; bar: string }) => (
-        <div>{JSON.stringify(props)}</div>
-    );
-    const EnhancedComponentSameProps = C.withFilters("myFilter")(
-        OriginalComponent
-    );
+    const OriginalComponent = (props: { foo: string; bar: string }) => <div>{JSON.stringify(props)}</div>;
+    const EnhancedComponentSameProps = C.withFilters('myFilter')(OriginalComponent);
     <EnhancedComponentSameProps foo="" bar="" />;
 
-    const EnhancedComponentNewProps = C.withFilters<{ baz: number }>(
-        "myFilter"
-    )(OriginalComponent);
+    const EnhancedComponentNewProps = C.withFilters<{ baz: number }>('myFilter')(OriginalComponent);
     <EnhancedComponentNewProps baz={25} />;
 })();
 
@@ -991,7 +895,7 @@ const MySlotFillProvider = () => {
     const EnhancedComponentClassExpression = C.withFocusOutside(
         class extends Component<{ foo: string }> {
             handleFocusOutside() {
-                console.log("Hello World!");
+                console.log('Hello World!');
             }
             render() {
                 return <div>{this.props.foo}</div>;
@@ -1002,15 +906,13 @@ const MySlotFillProvider = () => {
 
     class PredefinedComponentClass extends Component<{ bar: number }> {
         handleFocusOutside() {
-            console.log("Hello World!");
+            console.log('Hello World!');
         }
         render() {
             return <div>{this.props.bar}</div>;
         }
     }
-    const EnhancedComponentPredefinedClass = C.withFocusOutside(
-        PredefinedComponentClass
-    );
+    const EnhancedComponentPredefinedClass = C.withFocusOutside(PredefinedComponentClass);
     <EnhancedComponentPredefinedClass bar={1} />;
 })();
 
@@ -1018,27 +920,21 @@ const MySlotFillProvider = () => {
 // higher-order/with-focus-return
 //
 (() => {
-    const EnhancedComponentDefaultBehavior = C.withFocusReturn(
-        (props: { foo: string; bar: string }) => (
-            <div>{JSON.stringify(props)}</div>
-        )
-    );
+    const EnhancedComponentDefaultBehavior = C.withFocusReturn((props: { foo: string; bar: string }) => (
+        <div>{JSON.stringify(props)}</div>
+    ));
     <EnhancedComponentDefaultBehavior foo="foo" bar="bar" />;
 
     const EnhancedComponentCustomBehavior = C.withFocusReturn({
         onFocusReturn() {
-            console.log("Hello World!");
-        }
-    })((props: { foo: string; bar: string }) => (
-        <div>{JSON.stringify(props)}</div>
-    ));
+            console.log('Hello World!');
+        },
+    })((props: { foo: string; bar: string }) => <div>{JSON.stringify(props)}</div>);
     <EnhancedComponentCustomBehavior foo="foo" bar="bar" />;
 
-    const EnhancedComponentCustomBehaviorDefault = C.withFocusReturn({})(
-        (props: { foo: string; bar: string }) => (
-            <div>{JSON.stringify(props)}</div>
-        )
-    );
+    const EnhancedComponentCustomBehaviorDefault = C.withFocusReturn({})((props: { foo: string; bar: string }) => (
+        <div>{JSON.stringify(props)}</div>
+    ));
     <EnhancedComponentCustomBehaviorDefault foo="foo" bar="bar" />;
 })();
 
@@ -1046,16 +942,8 @@ const MySlotFillProvider = () => {
 // higher-order/with-notices
 //
 (() => {
-    const OriginalComponent = (
-        props: { foo: string } & C.withNotices.Props
-    ) => (
-        <button
-            onClick={() =>
-                props.noticeOperations.createErrorNotice("Hello World!")
-            }
-        >
-            {props.foo}
-        </button>
+    const OriginalComponent = (props: { foo: string } & C.withNotices.Props) => (
+        <button onClick={() => props.noticeOperations.createErrorNotice('Hello World!')}>{props.foo}</button>
     );
     const WrappedComponent = C.withNotices(OriginalComponent);
     <WrappedComponent foo="Hello World!" />;
@@ -1070,15 +958,11 @@ const MySlotFillProvider = () => {
         debouncedSpeak: any;
         foo: string;
     }
-    const MyComponentWithSpokenMessages = C.withSpokenMessages(
-        ({ speak, debouncedSpeak, foo }: Props) => (
-            <div>
-                <button onClick={() => speak("Spoken message")}>Speak</button>
-                <button onClick={() => debouncedSpeak("Delayed message")}>
-                    Debounced Speak
-                </button>
-            </div>
-        )
-    );
+    const MyComponentWithSpokenMessages = C.withSpokenMessages(({ speak, debouncedSpeak, foo }: Props) => (
+        <div>
+            <button onClick={() => speak('Spoken message')}>Speak</button>
+            <button onClick={() => debouncedSpeak('Delayed message')}>Debounced Speak</button>
+        </div>
+    ));
     <MyComponentWithSpokenMessages foo="Hello World!" />;
 })();