eslint: use semicolon TypeScript delimeter

src/components/ui/accordion/accordion.tsx

@@ -16,14 +16,14 @@ const messages = defineMessages({
 });
 
 interface IAccordion {
-  headline: React.ReactNode
-  children?: React.ReactNode
-  menu?: Menu
-  expanded?: boolean
-  onToggle?: (value: boolean) => void
-  action?: () => void
-  actionIcon?: string
-  actionLabel?: string
+  headline: React.ReactNode;
+  children?: React.ReactNode;
+  menu?: Menu;
+  expanded?: boolean;
+  onToggle?: (value: boolean) => void;
+  action?: () => void;
+  actionIcon?: string;
+  actionLabel?: string;
 }
 
 /**

src/components/ui/avatar/avatar.tsx

@@ -9,7 +9,7 @@ const AVATAR_SIZE = 42;
 
 interface IAvatar extends Pick<IStillImage, 'src' | 'onError' | 'className'> {
   /** Width and height of the avatar in pixels. */
-  size?: number
+  size?: number;
 }
 
 /** Round profile avatar for accounts. */

src/components/ui/banner/banner.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx';
 import React from 'react';
 
 interface IBanner {
-  theme: 'frosted' | 'opaque'
-  children: React.ReactNode
-  className?: string
+  theme: 'frosted' | 'opaque';
+  children: React.ReactNode;
+  className?: string;
 }
 
 /** Displays a sticky full-width banner at the bottom of the screen. */

src/components/ui/button/button.tsx

@@ -10,27 +10,27 @@ import type { ButtonSizes, ButtonThemes } from './useButtonStyles';
 
 interface IButton {
   /** Whether this button expands the width of its container. */
-  block?: boolean
+  block?: boolean;
   /** Elements inside the <button> */
-  children?: React.ReactNode
+  children?: React.ReactNode;
   /** Extra class names for the button. */
-  className?: string
+  className?: string;
   /** Prevent the button from being clicked. */
-  disabled?: boolean
+  disabled?: boolean;
   /** URL to an SVG icon to render inside the button. */
-  icon?: string
+  icon?: string;
   /** Action when the button is clicked. */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** A predefined button size. */
-  size?: ButtonSizes
+  size?: ButtonSizes;
   /** Text inside the button. Takes precedence over `children`. */
-  text?: React.ReactNode
+  text?: React.ReactNode;
   /** Makes the button into a navlink, if provided. */
-  to?: string
+  to?: string;
   /** Styles the button visually with a predefined theme. */
-  theme?: ButtonThemes
+  theme?: ButtonThemes;
   /** Whether this button should submit a form by default. */
-  type?: 'button' | 'submit'
+  type?: 'button' | 'submit';
 }
 
 /** Customizable button element with various themes. */

src/components/ui/button/useButtonStyles.ts

@@ -25,10 +25,10 @@ type ButtonSizes = keyof typeof sizes
 type ButtonThemes = keyof typeof themes
 
 type IButtonStyles = {
-  theme: ButtonThemes
-  block: boolean
-  disabled: boolean
-  size: ButtonSizes
+  theme: ButtonThemes;
+  block: boolean;
+  disabled: boolean;
+  size: ButtonSizes;
 }
 
 /** Provides class names for the <Button> component. */

src/components/ui/card/card.tsx

@@ -22,14 +22,14 @@ export type CardSizes = keyof typeof sizes
 
 interface ICard {
   /** The type of card. */
-  variant?: 'default' | 'rounded' | 'slim'
+  variant?: 'default' | 'rounded' | 'slim';
   /** Card size preset. */
-  size?: CardSizes
+  size?: CardSizes;
   /** Extra classnames for the <div> element. */
-  className?: string
+  className?: string;
   /** Elements inside the card. */
-  children: React.ReactNode
-  tabIndex?: number
+  children: React.ReactNode;
+  tabIndex?: number;
 }
 
 /** An opaque backdrop to hold a collection of related elements. */
@@ -48,10 +48,10 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
 ));
 
 interface ICardHeader {
-  backHref?: string
-  onBackClick?: (event: React.MouseEvent) => void
-  className?: string
-  children?: React.ReactNode
+  backHref?: string;
+  onBackClick?: (event: React.MouseEvent) => void;
+  className?: string;
+  children?: React.ReactNode;
 }
 
 /**
@@ -87,7 +87,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
 };
 
 interface ICardTitle {
-  title: React.ReactNode
+  title: React.ReactNode;
 }
 
 /** A card's title. */
@@ -97,9 +97,9 @@ const CardTitle: React.FC<ICardTitle> = ({ title }): JSX.Element => (
 
 interface ICardBody {
   /** Classnames for the <div> element. */
-  className?: string
+  className?: string;
   /** Children to appear inside the card. */
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 /** A card's body. */

src/components/ui/carousel/carousel.tsx

@@ -6,15 +6,15 @@ import HStack from '../hstack/hstack';
 import Icon from '../icon/icon';
 
 interface ICarousel {
-  children: any
+  children: any;
   /** Optional height to force on controls */
-  controlsHeight?: number
+  controlsHeight?: number;
   /** How many items in the carousel */
-  itemCount: number
+  itemCount: number;
   /** The minimum width per item */
-  itemWidth: number
+  itemWidth: number;
   /** Should the controls be disabled? */
-  isDisabled?: boolean
+  isDisabled?: boolean;
 }
 
 /**

src/components/ui/column/column.tsx

@@ -42,25 +42,25 @@ const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className, act
 
 export interface IColumn {
   /** Route the back button goes to. */
-  backHref?: string
+  backHref?: string;
   /** Column title text. */
-  label?: string
+  label?: string;
   /** Whether this column should have a transparent background. */
-  transparent?: boolean
+  transparent?: boolean;
   /** Whether this column should have a title and back button. */
-  withHeader?: boolean
+  withHeader?: boolean;
   /** Extra class name for top <div> element. */
-  className?: string
+  className?: string;
   /** Extra class name for the <CardBody> element. */
-  bodyClassName?: string
+  bodyClassName?: string;
   /** Ref forwarded to column. */
-  ref?: React.Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>;
   /** Children to display in the column. */
-  children?: React.ReactNode
+  children?: React.ReactNode;
   /** Action for the ColumnHeader, displayed at the end. */
-  action?: React.ReactNode
+  action?: React.ReactNode;
   /** Column size, inherited from Card. */
-  size?: CardSizes
+  size?: CardSizes;
 }
 
 /** A backdrop for the main section of the UI. */

src/components/ui/counter/counter.tsx

@@ -4,9 +4,9 @@ import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface ICounter {
   /** Number this counter should display. */
-  count: number
+  count: number;
   /** Optional max number (ie: N+) */
-  countMax?: number
+  countMax?: number;
 }
 
 /** A simple counter for notifications, etc. */

src/components/ui/datepicker/datepicker.tsx

@@ -9,7 +9,7 @@ const getDaysInMonth = (month: number, year: number) => new Date(year, month + 1
 const currentYear = new Date().getFullYear();
 
 interface IDatepicker {
-  onChange(date: Date): void
+  onChange(date: Date): void;
 }
 
 /**

src/components/ui/divider/divider.tsx

@@ -5,8 +5,8 @@ import Text from '../text/text';
 import type { Sizes as TextSizes } from '../text/text';
 
 interface IDivider {
-  text?: string
-  textSize?: TextSizes
+  text?: string;
+  textSize?: TextSizes;
 }
 
 /** Divider */

src/components/ui/emoji-selector/emoji-selector.tsx

@@ -10,13 +10,13 @@ import type { Emoji } from 'soapbox/features/emoji';
 
 interface IEmojiButton {
   /** Unicode emoji character. */
-  emoji: string
+  emoji: string;
   /** Event handler when the emoji is clicked. */
-  onClick(emoji: string): void
+  onClick(emoji: string): void;
   /** Extra class name on the <button> element. */
-  className?: string
+  className?: string;
   /** Tab order of the button. */
-  tabIndex?: number
+  tabIndex?: number;
 }
 
 /** Clickable emoji button that scales when hovered. */
@@ -36,17 +36,17 @@ const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabInd
 };
 
 interface IEmojiSelector {
-  onClose?(): void
+  onClose?(): void;
   /** Event handler when an emoji is clicked. */
-  onReact(emoji: string, custom?: string): void
+  onReact(emoji: string, custom?: string): void;
   /** Element that triggers the EmojiSelector Popper */
-  referenceElement: HTMLElement | null
-  placement?: Placement
+  referenceElement: HTMLElement | null;
+  placement?: Placement;
   /** Whether the selector should be visible. */
-  visible?: boolean
-  offsetOptions?: OffsetOptions
+  visible?: boolean;
+  offsetOptions?: OffsetOptions;
   /** Whether to allow any emoji to be chosen. */
-  all?: boolean
+  all?: boolean;
 }
 
 /** Panel with a row of emoji buttons. */

src/components/ui/emoji/emoji.tsx

@@ -5,7 +5,7 @@ import { joinPublicPath } from 'soapbox/utils/static';
 
 interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
   /** Unicode emoji character. */
-  emoji?: string
+  emoji?: string;
 }
 
 /** A single emoji image. */

src/components/ui/form-actions/form-actions.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import HStack from '../hstack/hstack';
 
 interface IFormActions {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 /** Container element to house form actions. */

src/components/ui/form-group/form-group.tsx

@@ -7,15 +7,15 @@ import Stack from '../stack/stack';
 
 interface IFormGroup {
   /** Input label message. */
-  labelText?: React.ReactNode
+  labelText?: React.ReactNode;
   /** Input label tooltip message. */
-  labelTitle?: string
+  labelTitle?: string;
   /** Input hint message. */
-  hintText?: React.ReactNode
+  hintText?: React.ReactNode;
   /** Input errors. */
-  errors?: string[]
+  errors?: string[];
   /** Elements to display within the FormGroup. */
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 /** Input container with label. Renders the child. */

src/components/ui/form/form.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 interface IForm {
   /** Form submission event handler. */
-  onSubmit?: (event: React.FormEvent) => void
+  onSubmit?: (event: React.FormEvent) => void;
   /** Class name override for the <form> element. */
-  className?: string
+  className?: string;
   /** Elements to display within the Form. */
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 /** Form element with custom styles. */

src/components/ui/hstack/hstack.tsx

@@ -33,23 +33,23 @@ const spaces = {
 
 interface IHStack extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
   /** Vertical alignment of children. */
-  alignItems?: keyof typeof alignItemsOptions
+  alignItems?: keyof typeof alignItemsOptions;
   /** Extra class names on the <div> element. */
-  className?: string
+  className?: string;
   /** Children */
-  children?: React.ReactNode
+  children?: React.ReactNode;
   /** Horizontal alignment of children. */
-  justifyContent?: keyof typeof justifyContentOptions
+  justifyContent?: keyof typeof justifyContentOptions;
   /** Size of the gap between elements. */
-  space?: keyof typeof spaces
+  space?: keyof typeof spaces;
   /** Whether to let the flexbox grow. */
-  grow?: boolean
+  grow?: boolean;
   /** HTML element to use for container. */
-  element?: keyof JSX.IntrinsicElements
+  element?: keyof JSX.IntrinsicElements;
   /** Extra CSS styles for the <div> */
-  style?: React.CSSProperties
+  style?: React.CSSProperties;
   /** Whether to let the flexbox wrap onto multiple lines. */
-  wrap?: boolean
+  wrap?: boolean;
 }
 
 /** Horizontal row of child elements. */

src/components/ui/icon-button/icon-button.tsx

@@ -6,15 +6,15 @@ import Text from '../text/text';
 
 interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Class name for the <svg> icon. */
-  iconClassName?: string
+  iconClassName?: string;
   /** URL to the svg icon. */
-  src: string
+  src: string;
   /** Text to display next ot the button. */
-  text?: string
+  text?: string;
   /** Predefined styles to display for the button. */
-  theme?: 'seamless' | 'outlined' | 'secondary' | 'transparent' | 'dark'
+  theme?: 'seamless' | 'outlined' | 'secondary' | 'transparent' | 'dark';
   /** Override the data-testid */
-  'data-testid'?: string
+  'data-testid'?: string;
 }
 
 /** A clickable icon. */

src/components/ui/icon/icon.tsx

@@ -6,19 +6,19 @@ import SvgIcon from './svg-icon';
 
 interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   /** Class name for the <svg> element. */
-  className?: string
+  className?: string;
   /** Number to display a counter over the icon. */
-  count?: number
+  count?: number;
   /** Optional max to cap count (ie: N+) */
-  countMax?: number
+  countMax?: number;
   /** Tooltip text for the icon. */
-  alt?: string
+  alt?: string;
   /** URL to the svg icon. */
-  src: string
+  src: string;
   /** Width and height of the icon in pixels. */
-  size?: number
+  size?: number;
   /** Override the data-testid */
-  'data-testid'?: string
+  'data-testid'?: string;
 }
 
 /** Renders and SVG icon with optional counter. */

src/components/ui/icon/svg-icon.tsx

@@ -3,13 +3,13 @@ import InlineSVG, { Props as InlineSVGProps } from 'react-inlinesvg'; // eslint-
 
 interface ISvgIcon extends InlineSVGProps {
   /** Class name for the <svg> */
-  className?: string
+  className?: string;
   /** Tooltip text for the icon. */
-  alt?: string
+  alt?: string;
   /** URL to the svg file. */
-  src: string
+  src: string;
   /** Width and height of the icon in pixels. */
-  size?: number
+  size?: number;
 }
 
 /** Renders an inline SVG with an empty frame loading state */

src/components/ui/input/input.tsx

@@ -16,29 +16,29 @@ type InputThemes = 'normal' | 'search'
 
 interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'style' | 'id'> {
   /** Put the cursor into the input on mount. */
-  autoFocus?: boolean
+  autoFocus?: boolean;
   /** The initial text in the input. */
-  defaultValue?: string
+  defaultValue?: string;
   /** Extra class names for the <input> element. */
-  className?: string
+  className?: string;
   /** Extra class names for the outer <div> element. */
-  outerClassName?: string
+  outerClassName?: string;
   /** URL to the svg icon. Cannot be used with prepend. */
-  icon?: string
+  icon?: string;
   /** Internal input name. */
-  name?: string
+  name?: string;
   /** Text to display before a value is entered. */
-  placeholder?: string
+  placeholder?: string;
   /** Text in the input. */
-  value?: string | number
+  value?: string | number;
   /** Change event handler for the input. */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   /** An element to display as prefix to input. Cannot be used with icon. */
-  prepend?: React.ReactElement
+  prepend?: React.ReactElement;
   /** An element to display as suffix to input. Cannot be used with password type. */
-  append?: React.ReactElement
+  append?: React.ReactElement;
   /** Theme to style the input with. */
-  theme?: InputThemes
+  theme?: InputThemes;
 }
 
 /** Form input element. */

src/components/ui/layout/layout.tsx

@@ -3,20 +3,20 @@ import React from 'react';
 import StickyBox from 'react-sticky-box';
 
 interface ISidebar {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 interface IAside {
-  children?: React.ReactNode
+  children?: React.ReactNode;
 }
 
 interface ILayout {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 interface LayoutComponent extends React.FC<ILayout> {
-  Sidebar: React.FC<ISidebar>
-  Main: React.FC<React.HTMLAttributes<HTMLDivElement>>
-  Aside: React.FC<IAside>
+  Sidebar: React.FC<ISidebar>;
+  Main: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+  Aside: React.FC<IAside>;
 }
 
 /** Layout container, to hold Sidebar, Main, and Aside. */

src/components/ui/menu/menu.tsx

@@ -15,8 +15,8 @@ import './menu.css';
 
 interface IMenuList extends Omit<MenuListProps, 'position'> {
   /** Position of the dropdown menu. */
-  position?: 'left' | 'right'
-  className?: string
+  position?: 'left' | 'right';
+  className?: string;
 }
 
 /** Renders children as a dropdown menu. */

src/components/ui/modal/modal.tsx

@@ -25,37 +25,37 @@ const widths = {
 
 interface IModal {
   /** Callback when the modal is cancelled. */
-  cancelAction?: () => void
+  cancelAction?: () => void;
   /** Cancel button text. */
-  cancelText?: React.ReactNode
+  cancelText?: React.ReactNode;
   /** URL to an SVG icon for the close button. */
-  closeIcon?: string
+  closeIcon?: string;
   /** Position of the close button. */
-  closePosition?: 'left' | 'right'
+  closePosition?: 'left' | 'right';
   /** Callback when the modal is confirmed. */
-  confirmationAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void
+  confirmationAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
   /** Whether the confirmation button is disabled. */
-  confirmationDisabled?: boolean
+  confirmationDisabled?: boolean;
   /** Confirmation button text. */
-  confirmationText?: React.ReactNode
+  confirmationText?: React.ReactNode;
   /** Confirmation button theme. */
-  confirmationTheme?: ButtonThemes
+  confirmationTheme?: ButtonThemes;
   /** Whether to use full width style for confirmation button. */
-  confirmationFullWidth?: boolean
+  confirmationFullWidth?: boolean;
   /** Callback when the modal is closed. */
-  onClose?: () => void
+  onClose?: () => void;
   /** Callback when the secondary action is chosen. */
-  secondaryAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void
+  secondaryAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
   /** Secondary button text. */
-  secondaryText?: React.ReactNode
-  secondaryDisabled?: boolean
+  secondaryText?: React.ReactNode;
+  secondaryDisabled?: boolean;
   /** Don't focus the "confirm" button on mount. */
-  skipFocus?: boolean
+  skipFocus?: boolean;
   /** Title text for the modal. */
-  title?: React.ReactNode
-  width?: keyof typeof widths
-  children?: React.ReactNode
-  className?: string
+  title?: React.ReactNode;
+  width?: keyof typeof widths;
+  children?: React.ReactNode;
+  className?: string;
 }
 
 /** Displays a modal dialog box. */

src/components/ui/popover/popover.tsx

@@ -16,15 +16,15 @@ import React, { useRef, useState } from 'react';
 import Portal from '../portal/portal';
 
 interface IPopover {
-  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
   /** The content of the popover */
-  content: React.ReactNode
+  content: React.ReactNode;
   /** Should we remove padding on the Popover */
-  isFlush?: boolean
+  isFlush?: boolean;
   /** Should the popover trigger via click or hover */
-  interaction?: 'click' | 'hover'
+  interaction?: 'click' | 'hover';
   /** Add a class to the reference (trigger) element */
-  referenceElementClassName?: string
+  referenceElementClassName?: string;
 }
 
 /**

src/components/ui/portal/portal.tsx

@@ -2,7 +2,7 @@ import React, { useLayoutEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 interface IPortal {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 /**

src/components/ui/progress-bar/progress-bar.tsx

@@ -6,9 +6,9 @@ import Motion from 'soapbox/features/ui/util/optional-motion';
 
 interface IProgressBar {
   /** Number between 0 and 1 to represent the percentage complete. */
-  progress: number
+  progress: number;
   /** Height of the progress bar. */
-  size?: 'sm' | 'md'
+  size?: 'sm' | 'md';
 }
 
 /** A horizontal meter filled to the given percentage. */

src/components/ui/radio-button/radio-button.tsx

@@ -4,11 +4,11 @@ import { v4 as uuidv4 } from 'uuid';
 import HStack from '../hstack/hstack';
 
 interface IRadioButton {
-  value: string
-  checked?: boolean
-  name: string
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  label: React.ReactNode
+  value: string;
+  checked?: boolean;
+  name: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  label: React.ReactNode;
 }
 
 /**

src/components/ui/select/select.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  children: Iterable<React.ReactNode>
+  children: Iterable<React.ReactNode>;
 }
 
 /** Multiple-select dropdown. */

src/components/ui/slider/slider.tsx

@@ -1,13 +1,13 @@
 import throttle from 'lodash/throttle';
 import React, { useRef } from 'react';
 
-type Point = { x: number, y: number };
+type Point = { x: number; y: number };
 
 interface ISlider {
   /** Value between 0 and 1. */
-  value: number
+  value: number;
   /** Callback when the value changes. */
-  onChange(value: number): void
+  onChange(value: number): void;
 }
 
 /** Draggable slider component. */

src/components/ui/spinner/spinner.tsx

@@ -8,9 +8,9 @@ import './spinner.css';
 
 interface ISpinner {
   /** Width and height of the spinner in pixels. */
-  size?: number
+  size?: number;
   /** Whether to display "Loading..." beneath the spinner. */
-  withText?: boolean
+  withText?: boolean;
 }
 
 /** Spinning loading placeholder. */

src/components/ui/stack/stack.tsx

@@ -31,17 +31,17 @@ const alignItemsOptions = {
 
 interface IStack extends React.HTMLAttributes<HTMLDivElement> {
   /** Horizontal alignment of children. */
-  alignItems?: keyof typeof alignItemsOptions
+  alignItems?: keyof typeof alignItemsOptions;
   /** Extra class names on the element. */
-  className?: string
+  className?: string;
   /** Vertical alignment of children. */
-  justifyContent?: keyof typeof justifyContentOptions
+  justifyContent?: keyof typeof justifyContentOptions;
   /** Size of the gap between elements. */
-  space?: keyof typeof spaces
+  space?: keyof typeof spaces;
   /** Whether to let the flexbox grow. */
-  grow?: boolean
+  grow?: boolean;
   /** HTML element to use for container. */
-  element?: keyof JSX.IntrinsicElements
+  element?: keyof JSX.IntrinsicElements;
 }
 
 /** Vertical stack of child elements. */

src/components/ui/streamfield/streamfield.tsx

@@ -14,30 +14,30 @@ const messages = defineMessages({
 
 /** Type of the inner Streamfield input component. */
 export type StreamfieldComponent<T> = React.ComponentType<{
-  value: T
-  onChange: (value: T) => void
-  autoFocus: boolean
+  value: T;
+  onChange: (value: T) => void;
+  autoFocus: boolean;
 }>;
 
 interface IStreamfield {
   /** Array of values for the streamfield. */
-  values: any[]
+  values: any[];
   /** Input label message. */
-  label?: React.ReactNode
+  label?: React.ReactNode;
   /** Input hint message. */
-  hint?: React.ReactNode
+  hint?: React.ReactNode;
   /** Callback to add an item. */
-  onAddItem?: () => void
+  onAddItem?: () => void;
   /** Callback to remove an item by index. */
-  onRemoveItem?: (i: number) => void
+  onRemoveItem?: (i: number) => void;
   /** Callback when values are changed. */
-  onChange: (values: any[]) => void
+  onChange: (values: any[]) => void;
   /** Input to render for each value. */
-  component: StreamfieldComponent<any>
+  component: StreamfieldComponent<any>;
   /** Minimum number of allowed inputs. */
-  minItems?: number
+  minItems?: number;
   /** Maximum number of allowed inputs. */
-  maxItems?: number
+  maxItems?: number;
 }
 
 /** List of inputs that can be added or removed. */

src/components/ui/tabs/tabs.tsx

@@ -18,10 +18,10 @@ const AnimatedContext = React.createContext(null);
 
 interface IAnimatedInterface {
   /** Callback when a tab is chosen. */
-  onChange(index: number): void
+  onChange(index: number): void;
   /** Default tab index. */
-  defaultIndex: number
-  children: React.ReactNode
+  defaultIndex: number;
+  children: React.ReactNode;
 }
 
 /** Tabs with a sliding active state. */
@@ -63,15 +63,15 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
 
 interface IAnimatedTab {
   /** ARIA role. */
-  role: 'button'
+  role: 'button';
   /** Element to represent the tab. */
-  as: 'a' | 'button'
+  as: 'a' | 'button';
   /** Route to visit when the tab is chosen. */
-  href?: string
+  href?: string;
   /** Tab title text. */
-  title: string
+  title: string;
   /** Index value of the tab. */
-  index: number
+  index: number;
 }
 
 /** A single animated tab. */
@@ -104,26 +104,26 @@ const AnimatedTab: React.FC<IAnimatedTab> = ({ index, ...props }) => {
 /** Structure to represent a tab. */
 export type Item = {
   /** Tab text. */
-  text: React.ReactNode
+  text: React.ReactNode;
   /** Tab tooltip text. */
-  title?: string
+  title?: string;
   /** URL to visit when the tab is selected. */
-  href?: string
+  href?: string;
   /** Route to visit when the tab is selected. */
-  to?: string
+  to?: string;
   /** Callback when the tab is selected. */
-  action?: () => void
+  action?: () => void;
   /** Display a counter over the tab. */
-  count?: number
+  count?: number;
   /** Unique name for this tab. */
-  name: string
+  name: string;
 }
 
 interface ITabs {
   /** Array of structured tab items. */
-  items: Item[]
+  items: Item[];
   /** Name of the active tab item. */
-  activeItem: string
+  activeItem: string;
 }
 
 /** Animated tabs component. */

src/components/ui/tag-input/tag-input.tsx

@@ -5,9 +5,9 @@ import HStack from '../hstack/hstack';
 import Tag from './tag';
 
 interface ITagInput {
-  tags: string[]
-  onChange: (tags: string[]) => void
-  placeholder?: string
+  tags: string[];
+  onChange: (tags: string[]) => void;
+  placeholder?: string;
 }
 
 /** Manage a list of tags. */

src/components/ui/tag-input/tag.tsx

@@ -5,9 +5,9 @@ import Text from '../text/text';
 
 interface ITag {
   /** Name of the tag. */
-  tag: string
+  tag: string;
   /** Callback when the X icon is pressed. */
-  onDelete: (tag: string) => void
+  onDelete: (tag: string) => void;
 }
 
 /** A single editable Tag (used by TagInput). */

src/components/ui/text/text.tsx

@@ -56,33 +56,33 @@ type Directions = 'ltr' | 'rtl'
 
 interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'dangerouslySetInnerHTML' | 'tabIndex' | 'lang'> {
   /** Text content. */
-  children?: React.ReactNode
+  children?: React.ReactNode;
   /** How to align the text. */
-  align?: keyof typeof alignments
+  align?: keyof typeof alignments;
   /** Extra class names for the outer element. */
-  className?: string
+  className?: string;
   /** Text direction. */
-  direction?: Directions
+  direction?: Directions;
   /** Typeface of the text. */
-  family?: keyof typeof families
+  family?: keyof typeof families;
   /** The "for" attribute specifies which form element a label is bound to. */
-  htmlFor?: string
+  htmlFor?: string;
   /** Font size of the text. */
-  size?: Sizes
+  size?: Sizes;
   /** HTML element name of the outer element. */
-  tag?: Tags
+  tag?: Tags;
   /** Theme for the text. */
-  theme?: keyof typeof themes
+  theme?: keyof typeof themes;
   /** Letter-spacing of the text. */
-  tracking?: keyof typeof trackingSizes
+  tracking?: keyof typeof trackingSizes;
   /** Transform (eg uppercase) for the text. */
-  transform?: keyof typeof transformProperties
+  transform?: keyof typeof transformProperties;
   /** Whether to truncate the text if its container is too small. */
-  truncate?: boolean
+  truncate?: boolean;
   /** Font weight of the text. */
-  weight?: keyof typeof weights
+  weight?: keyof typeof weights;
   /** Tooltip title. */
-  title?: string
+  title?: string;
 }
 
 /** UI-friendly text container with dark mode support. */

src/components/ui/textarea/textarea.tsx

@@ -7,33 +7,33 @@ import Text from '../text/text';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
-  autoFocus?: boolean
+  autoFocus?: boolean;
   /** Allows the textarea height to grow while typing */
-  autoGrow?: boolean
+  autoGrow?: boolean;
   /** Used with "autoGrow". Sets a max number of rows. */
-  maxRows?: number
+  maxRows?: number;
   /** Used with "autoGrow". Sets a min number of rows. */
-  minRows?: number
+  minRows?: number;
   /** The initial text in the input. */
-  defaultValue?: string
+  defaultValue?: string;
   /** Internal input name. */
-  name?: string
+  name?: string;
   /** Renders the textarea as a code editor. */
-  isCodeEditor?: boolean
+  isCodeEditor?: boolean;
   /** Text to display before a value is entered. */
-  placeholder?: string
+  placeholder?: string;
   /** Text in the textarea. */
-  value?: string
+  value?: string;
   /** Whether the device should autocomplete text in this textarea. */
-  autoComplete?: string
+  autoComplete?: string;
   /** Whether to display the textarea in red. */
-  hasError?: boolean
+  hasError?: boolean;
   /** Whether or not you can resize the teztarea */
-  isResizeable?: boolean
+  isResizeable?: boolean;
   /** Textarea theme. */
-  theme?: 'default' | 'transparent'
+  theme?: 'default' | 'transparent';
   /** Whether to display a character counter below the textarea. */
-  withCounter?: boolean
+  withCounter?: boolean;
 }
 
 /** Textarea with custom styles. */

src/components/ui/toast/toast.tsx

@@ -20,13 +20,13 @@ const renderText = (text: ToastText) => {
 };
 
 interface IToast {
-  t: RHToast
-  message: ToastText
-  type: ToastType
-  action?(): void
-  actionLink?: string
-  actionLabel?: ToastText
-  summary?: string
+  t: RHToast;
+  message: ToastText;
+  type: ToastType;
+  action?(): void;
+  actionLink?: string;
+  actionLabel?: ToastText;
+  summary?: string;
 }
 
 /**

src/components/ui/toggle/toggle.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useRef } from 'react';
 
 interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'checked' | 'onChange' | 'required' | 'disabled'> {
-  size?: 'sm' | 'md'
+  size?: 'sm' | 'md';
 }
 
 /** A glorified checkbox. */

src/components/ui/tooltip/tooltip.tsx

@@ -12,9 +12,9 @@ import React, { useRef, useState } from 'react';
 
 interface ITooltip {
   /** Element to display the tooltip around. */
-  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
   /** Text to display in the tooltip. */
-  text: string
+  text: string;
 }
 
 /**

src/components/ui/widget/widget.tsx

@@ -4,7 +4,7 @@ import { HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 
 interface IWidgetTitle {
   /** Title text for the widget. */
-  title: React.ReactNode
+  title: React.ReactNode;
 }
 
 /** Title of a widget. */
@@ -13,7 +13,7 @@ const WidgetTitle = ({ title }: IWidgetTitle): JSX.Element => (
 );
 
 interface IWidgetBody {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 /** Body of a widget. */
@@ -23,15 +23,15 @@ const WidgetBody: React.FC<IWidgetBody> = ({ children }): JSX.Element => (
 
 interface IWidget {
   /** Widget title text. */
-  title: React.ReactNode
+  title: React.ReactNode;
   /** Callback when the widget action is clicked. */
-  onActionClick?: () => void
+  onActionClick?: () => void;
   /** URL to the svg icon for the widget action. */
-  actionIcon?: string
+  actionIcon?: string;
   /** Text for the action. */
-  actionTitle?: string
-  action?: JSX.Element
-  children?: React.ReactNode
+  actionTitle?: string;
+  action?: JSX.Element;
+  children?: React.ReactNode;
 }
 
 /** Sidebar widget. */