From ce3047dedb828f590fdf3d5f9c5abd358441e410 Mon Sep 17 00:00:00 2001
From: Pascal Birchler <pascalb@google.com>
Date: Mon, 1 Jul 2024 08:31:27 +0200
Subject: [PATCH] Convert `element-library` to TypeScript (#13503)

---
 package-lock.json                             |   3 -
 packages/element-library/package.json         |   6 +-
 .../{constants.js => constants.ts}            |   2 +
 .../audioSticker/{display.js => display.tsx}  |  18 +-
 .../src/audioSticker/{icon.js => icon.tsx}    |   0
 .../src/audioSticker/{index.js => index.ts}   |   0
 .../src/audioSticker/{layer.js => layer.tsx}  |   0
 .../audioSticker/{output.js => output.tsx}    |  11 +-
 .../src/{elementTypes.js => elementTypes.ts}  |  58 ++++-
 .../src/gif/{constants.js => constants.ts}    |  16 ++
 .../src/gif/{display.js => display.tsx}       |  25 +-
 .../src/gif/{edit.js => edit.tsx}             |  11 +-
 packages/element-library/src/gif/frame.js     |  34 ---
 .../{media/textContent.js => gif/frame.tsx}   |  12 +-
 .../src/gif/{icon.js => icon.tsx}             |  10 +-
 .../src/gif/{index.js => index.ts}            |   0
 .../src/gif/{layer.js => layer.ts}            |   4 +-
 .../src/gif/{output.js => output.tsx}         |  12 +-
 .../src/image/{constants.js => constants.ts}  |  13 ++
 .../src/image/{edit.js => edit.tsx}           |  12 +-
 packages/element-library/src/image/frame.js   |  34 ---
 .../src/{types/index.ts => image/frame.tsx}   |  13 +-
 .../src/image/{icon.js => icon.tsx}           |  15 +-
 .../src/image/{index.js => index.ts}          |   0
 .../src/image/{layer.js => layer.ts}          |   3 +-
 .../src/image/{output.js => output.tsx}       |  34 ++-
 .../src/{index.js => index.ts}                |   0
 .../src/media/{constants.js => constants.ts}  |   0
 .../src/media/{display.js => display.tsx}     |  51 +++--
 .../src/media/{edit.js => edit.tsx}           | 176 +++++++++-----
 ...itCropMoveable.js => editCropMoveable.tsx} |  52 +++--
 ...editPanMoveable.js => editPanMoveable.tsx} |  54 ++---
 .../src/media/{frame.js => frame.tsx}         |   0
 .../{imageDisplay.js => imageDisplay.tsx}     |  89 ++++----
 .../src/media/{index.js => index.ts}          |   0
 .../src/media/{output.js => output.tsx}       |  28 ++-
 .../media/{scalePanel.js => scalePanel.tsx}   |  51 +++--
 .../element-library/src/media/textContent.ts  |  26 +++
 .../src/media/{util.js => util.ts}            |  26 ++-
 .../media/{videoImage.js => videoImage.tsx}   |   9 +-
 .../product/{constants.js => constants.ts}    |   2 +-
 .../src/product/{display.js => display.tsx}   |  25 +-
 .../src/product/{icon.js => icon.tsx}         |  13 +-
 .../src/product/{index.js => index.ts}        |   0
 .../src/product/{layer.js => layer.tsx}       |   3 +-
 .../src/product/{output.js => output.tsx}     |  12 +-
 .../src/shape/{constants.js => constants.ts}  |   1 -
 .../src/shape/{display.js => display.tsx}     |  31 ++-
 .../src/shape/{icon.js => icon.tsx}           |  36 ++-
 .../src/shape/{index.js => index.ts}          |   0
 .../src/shape/{layer.js => layer.ts}          |   7 +-
 .../src/shape/{output.js => output.tsx}       |  14 +-
 .../src/shared/{constants.js => constants.ts} |   0
 .../src/shared/{index.js => index.ts}         |   0
 .../src/shared/{shared.js => shared.ts}       |  57 +++--
 ...r.js => useCSSVarColorTransformHandler.ts} |  11 +-
 ...Handler.js => useColorTransformHandler.ts} |  19 +-
 .../{visibleImage.js => visibleImage.tsx}     |  13 +-
 .../sticker/{constants.js => constants.ts}    |   0
 .../src/sticker/{display.js => display.tsx}   |  11 +-
 .../src/sticker/{icon.js => icon.tsx}         |  11 +-
 .../src/sticker/{index.js => index.ts}        |   0
 .../src/sticker/{layer.js => layer.ts}        |   4 +-
 .../src/sticker/{output.js => output.tsx}     |  11 +-
 .../src/text/{constants.js => constants.ts}   |   0
 .../src/text/{display.js => display.tsx}      | 111 +++++----
 .../src/text/{edit.js => edit.tsx}            | 214 +++++++++++-------
 .../src/text/{frame.js => frame.tsx}          |  67 +++---
 .../src/text/{icon.js => icon.tsx}            |   0
 .../src/text/{index.js => index.ts}           |   0
 .../src/text/{layer.js => layer.ts}           |   3 +-
 .../src/text/{output.js => output.tsx}        |  12 +-
 .../src/text/outputWithUnits.tsx              |   6 +-
 .../element-library/src/text/test/util.js     |  12 +-
 .../text/{textContent.js => textContent.ts}   |   3 +-
 ...ResizeEvent.js => updateForResizeEvent.ts} |   8 +-
 packages/element-library/src/text/util.ts     |  19 +-
 packages/element-library/src/types.ts         |  30 ---
 .../src/types/elements/gifElement.ts          |  29 ---
 .../src/types/elements/imageElement.ts        |  30 ---
 .../src/types/elements/index.ts               |  23 --
 .../src/types/elements/shapeElement.ts        |  28 ---
 .../src/types/elements/stickerElement.ts      |  29 ---
 .../src/types/elements/textElement.ts         |  50 ----
 .../src/types/elements/videoElement.ts        |  42 ----
 .../element-library/src/typings/global.d.ts   |  78 +++++++
 .../productElement.ts => typings/styled.d.ts} |  12 +-
 packages/element-library/src/typings/svg.d.ts |  23 ++
 .../src/utils/{noop.js => noop.ts}            |   0
 .../src/video/{captions.js => captions.tsx}   |  33 ++-
 .../src/video/{constants.js => constants.ts}  |  12 +-
 .../src/video/{controls.js => controls.tsx}   |  28 ++-
 .../src/video/{display.js => display.tsx}     |  25 +-
 .../src/video/{edit.js => edit.tsx}           |  19 +-
 packages/element-library/src/video/frame.js   |  34 ---
 packages/element-library/src/video/frame.tsx  |  26 +++
 .../src/video/{icon.js => icon.tsx}           |  10 +-
 .../src/video/{index.js => index.ts}          |   0
 .../src/video/{layer.js => layer.ts}          |   3 +-
 .../{onDropHandler.js => onDropHandler.ts}    |   6 +-
 .../src/video/{output.js => output.tsx}       |  17 +-
 ...playPauseButton.js => playPauseButton.tsx} |  71 +++---
 .../src/video/{trim.js => trim.tsx}           |  61 ++---
 packages/element-library/tsconfig.json        |  11 +-
 packages/elements/src/constants.ts            |   9 +-
 packages/elements/src/elementType.ts          |   2 +-
 packages/elements/src/index.ts                |   1 +
 .../elements/src/{types => }/propTypes.ts     |   6 +-
 packages/elements/src/types/element.ts        |  20 +-
 .../elements/src/types/elementDefinition.ts   | 109 +++++++--
 packages/elements/src/types/index.ts          |   2 +-
 packages/elements/src/types/media.ts          |   8 +-
 .../src/utils/getDefinitionForType.ts         |   6 +-
 .../elements/src/utils/getTransformFlip.ts    |   2 +-
 packages/elements/tsconfig.json               |   1 +
 packages/masks/src/borderedMaskedElement.tsx  |   2 +-
 packages/masks/src/display.tsx                |   8 +-
 packages/masks/src/masks.ts                   |   2 +-
 packages/masks/src/utils/elementBorder.ts     |   8 +-
 packages/moveable/src/moveable.tsx            |   2 +-
 packages/moveable/src/overlay/index.tsx       |   2 +-
 packages/output/src/test/page.tsx             |   1 +
 packages/output/src/test/story.tsx            |   1 +
 packages/output/src/test/textElement.tsx      |   1 +
 packages/output/src/types.ts                  |   4 -
 packages/output/src/typings/global.d.ts       |   1 +
 packages/output/src/utils/backgroundAudio.tsx |   2 +-
 .../src/utils/test/getAutoAdvanceAfter.ts     |   5 +-
 .../src/utils/test/getLongestMediaElement.ts  |   1 +
 .../output/src/utils/test/getStoryMarkup.ts   |   1 +
 .../src/utils/test/getUsedAmpExtensions.ts    |  13 +-
 packages/stickers/src/types.ts                |   2 +-
 .../src/app/media/utils/useDetectBaseColor.ts |   3 +
 .../story-editor/src/utils/useCORSProxy.ts    |   4 +-
 packages/transform/package.json               |   3 -
 packages/transform/src/transformProvider.tsx  |  51 +++--
 packages/transform/src/types.ts               |   9 +-
 tsconfig.json                                 |   1 -
 138 files changed, 1407 insertions(+), 1260 deletions(-)
 rename packages/element-library/src/audioSticker/{constants.js => constants.ts} (97%)
 rename packages/element-library/src/audioSticker/{display.js => display.tsx} (81%)
 rename packages/element-library/src/audioSticker/{icon.js => icon.tsx} (100%)
 rename packages/element-library/src/audioSticker/{index.js => index.ts} (100%)
 rename packages/element-library/src/audioSticker/{layer.js => layer.tsx} (100%)
 rename packages/element-library/src/audioSticker/{output.js => output.tsx} (83%)
 rename packages/element-library/src/{elementTypes.js => elementTypes.ts} (50%)
 rename packages/element-library/src/gif/{constants.js => constants.ts} (80%)
 rename packages/element-library/src/gif/{display.js => display.tsx} (83%)
 rename packages/element-library/src/gif/{edit.js => edit.tsx} (71%)
 delete mode 100644 packages/element-library/src/gif/frame.js
 rename packages/element-library/src/{media/textContent.js => gif/frame.tsx} (80%)
 rename packages/element-library/src/gif/{icon.js => icon.tsx} (86%)
 rename packages/element-library/src/gif/{index.js => index.ts} (100%)
 rename packages/element-library/src/gif/{layer.js => layer.ts} (87%)
 rename packages/element-library/src/gif/{output.js => output.tsx} (83%)
 rename packages/element-library/src/image/{constants.js => constants.ts} (84%)
 rename packages/element-library/src/image/{edit.js => edit.tsx} (71%)
 delete mode 100644 packages/element-library/src/image/frame.js
 rename packages/element-library/src/{types/index.ts => image/frame.tsx} (75%)
 rename packages/element-library/src/image/{icon.js => icon.tsx} (73%)
 rename packages/element-library/src/image/{index.js => index.ts} (100%)
 rename packages/element-library/src/image/{layer.js => layer.ts} (87%)
 rename packages/element-library/src/image/{output.js => output.tsx} (73%)
 rename packages/element-library/src/{index.js => index.ts} (100%)
 rename packages/element-library/src/media/{constants.js => constants.ts} (100%)
 rename packages/element-library/src/media/{display.js => display.tsx} (75%)
 rename packages/element-library/src/media/{edit.js => edit.tsx} (64%)
 rename packages/element-library/src/media/{editCropMoveable.js => editCropMoveable.tsx} (83%)
 rename packages/element-library/src/media/{editPanMoveable.js => editPanMoveable.tsx} (82%)
 rename packages/element-library/src/media/{frame.js => frame.tsx} (100%)
 rename packages/element-library/src/media/{imageDisplay.js => imageDisplay.tsx} (61%)
 rename packages/element-library/src/media/{index.js => index.ts} (100%)
 rename packages/element-library/src/media/{output.js => output.tsx} (80%)
 rename packages/element-library/src/media/{scalePanel.js => scalePanel.tsx} (66%)
 create mode 100644 packages/element-library/src/media/textContent.ts
 rename packages/element-library/src/media/{util.js => util.ts} (83%)
 rename packages/element-library/src/media/{videoImage.js => videoImage.tsx} (85%)
 rename packages/element-library/src/product/{constants.js => constants.ts} (96%)
 rename packages/element-library/src/product/{display.js => display.tsx} (87%)
 rename packages/element-library/src/product/{icon.js => icon.tsx} (84%)
 rename packages/element-library/src/product/{index.js => index.ts} (100%)
 rename packages/element-library/src/product/{layer.js => layer.tsx} (86%)
 rename packages/element-library/src/product/{output.js => output.tsx} (77%)
 rename packages/element-library/src/shape/{constants.js => constants.ts} (98%)
 rename packages/element-library/src/shape/{display.js => display.tsx} (81%)
 rename packages/element-library/src/shape/{icon.js => icon.tsx} (74%)
 rename packages/element-library/src/shape/{index.js => index.ts} (100%)
 rename packages/element-library/src/shape/{layer.js => layer.ts} (77%)
 rename packages/element-library/src/shape/{output.js => output.tsx} (80%)
 rename packages/element-library/src/shared/{constants.js => constants.ts} (100%)
 rename packages/element-library/src/shared/{index.js => index.ts} (100%)
 rename packages/element-library/src/shared/{shared.js => shared.ts} (66%)
 rename packages/element-library/src/shared/{useCSSVarColorTransformHandler.js => useCSSVarColorTransformHandler.ts} (82%)
 rename packages/element-library/src/shared/{useColorTransformHandler.js => useColorTransformHandler.ts} (75%)
 rename packages/element-library/src/shared/{visibleImage.js => visibleImage.tsx} (76%)
 rename packages/element-library/src/sticker/{constants.js => constants.ts} (100%)
 rename packages/element-library/src/sticker/{display.js => display.tsx} (80%)
 rename packages/element-library/src/sticker/{icon.js => icon.tsx} (82%)
 rename packages/element-library/src/sticker/{index.js => index.ts} (100%)
 rename packages/element-library/src/sticker/{layer.js => layer.ts} (87%)
 rename packages/element-library/src/sticker/{output.js => output.tsx} (81%)
 rename packages/element-library/src/text/{constants.js => constants.ts} (100%)
 rename packages/element-library/src/text/{display.js => display.tsx} (75%)
 rename packages/element-library/src/text/{edit.js => edit.tsx} (68%)
 rename packages/element-library/src/text/{frame.js => frame.tsx} (71%)
 rename packages/element-library/src/text/{icon.js => icon.tsx} (100%)
 rename packages/element-library/src/text/{index.js => index.ts} (100%)
 rename packages/element-library/src/text/{layer.js => layer.ts} (86%)
 rename packages/element-library/src/text/{output.js => output.tsx} (85%)
 rename packages/element-library/src/text/{textContent.js => textContent.ts} (86%)
 rename packages/element-library/src/text/{updateForResizeEvent.js => updateForResizeEvent.ts} (87%)
 delete mode 100644 packages/element-library/src/types.ts
 delete mode 100644 packages/element-library/src/types/elements/gifElement.ts
 delete mode 100644 packages/element-library/src/types/elements/imageElement.ts
 delete mode 100644 packages/element-library/src/types/elements/index.ts
 delete mode 100644 packages/element-library/src/types/elements/shapeElement.ts
 delete mode 100644 packages/element-library/src/types/elements/stickerElement.ts
 delete mode 100644 packages/element-library/src/types/elements/textElement.ts
 delete mode 100644 packages/element-library/src/types/elements/videoElement.ts
 create mode 100644 packages/element-library/src/typings/global.d.ts
 rename packages/element-library/src/{types/elements/productElement.ts => typings/styled.d.ts} (76%)
 create mode 100644 packages/element-library/src/typings/svg.d.ts
 rename packages/element-library/src/utils/{noop.js => noop.ts} (100%)
 rename packages/element-library/src/video/{captions.js => captions.tsx} (57%)
 rename packages/element-library/src/video/{constants.js => constants.ts} (86%)
 rename packages/element-library/src/video/{controls.js => controls.tsx} (70%)
 rename packages/element-library/src/video/{display.js => display.tsx} (86%)
 rename packages/element-library/src/video/{edit.js => edit.tsx} (69%)
 delete mode 100644 packages/element-library/src/video/frame.js
 create mode 100644 packages/element-library/src/video/frame.tsx
 rename packages/element-library/src/video/{icon.js => icon.tsx} (86%)
 rename packages/element-library/src/video/{index.js => index.ts} (100%)
 rename packages/element-library/src/video/{layer.js => layer.ts} (87%)
 rename packages/element-library/src/video/{onDropHandler.js => onDropHandler.ts} (83%)
 rename packages/element-library/src/video/{output.js => output.tsx} (83%)
 rename packages/element-library/src/video/{playPauseButton.js => playPauseButton.tsx} (83%)
 rename packages/element-library/src/video/{trim.js => trim.tsx} (75%)
 rename packages/elements/src/{types => }/propTypes.ts (98%)

diff --git a/package-lock.json b/package-lock.json
index e11a1df97313..5fa30cab02d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42320,9 +42320,6 @@
       "dependencies": {
         "@googleforcreators/react": "*"
       },
-      "devDependencies": {
-        "prop-types": "^15.7.2"
-      },
       "engines": {
         "node": ">= 12 || >= 14 || >= 16 || >= 18 || >= 20",
         "npm": ">= 7.3"
diff --git a/packages/element-library/package.json b/packages/element-library/package.json
index 5d6dc57ed007..bd98c68bda74 100644
--- a/packages/element-library/package.json
+++ b/packages/element-library/package.json
@@ -26,13 +26,13 @@
   },
   "customExports": {
     ".": {
-      "default": "./src/index.js"
+      "default": "./src/index.ts"
     }
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
-  "types": "dist-types/types.d.ts",
-  "source": "src/index.js",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/element-library/src/audioSticker/constants.js b/packages/element-library/src/audioSticker/constants.ts
similarity index 97%
rename from packages/element-library/src/audioSticker/constants.js
rename to packages/element-library/src/audioSticker/constants.ts
index 2a704767996e..f398bed81182 100644
--- a/packages/element-library/src/audioSticker/constants.js
+++ b/packages/element-library/src/audioSticker/constants.ts
@@ -45,6 +45,8 @@ export const resizeRules = {
   vertical: false,
   horizontal: false,
   diagonal: false,
+  minWidth: 120,
+  minHeight: 120,
 };
 
 export const defaultAttributes = {
diff --git a/packages/element-library/src/audioSticker/display.js b/packages/element-library/src/audioSticker/display.tsx
similarity index 81%
rename from packages/element-library/src/audioSticker/display.js
rename to packages/element-library/src/audioSticker/display.tsx
index 02a499ca24cf..222774389222 100644
--- a/packages/element-library/src/audioSticker/display.js
+++ b/packages/element-library/src/audioSticker/display.tsx
@@ -17,7 +17,11 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type {
+  Element,
+  AudioStickerElement,
+  DisplayProps,
+} from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -29,12 +33,16 @@ import {
   AUDIO_STICKER_LABELS,
 } from '../constants';
 
-const Element = styled.img`
+interface ElementProps {
+  stickerStyle: keyof typeof AUDIO_STICKER_STYLES;
+}
+
+const Element = styled.img<ElementProps>`
   ${elementFillContent}
   ${({ stickerStyle }) => AUDIO_STICKER_STYLES[stickerStyle]}
 `;
 
-function AudioStickerDisplay({ element }) {
+function AudioStickerDisplay({ element }: DisplayProps<AudioStickerElement>) {
   const {
     width: elementWidth,
     height: elementHeight,
@@ -53,8 +61,4 @@ function AudioStickerDisplay({ element }) {
   );
 }
 
-AudioStickerDisplay.propTypes = {
-  element: StoryPropTypes.elements.shape.isRequired,
-};
-
 export default AudioStickerDisplay;
diff --git a/packages/element-library/src/audioSticker/icon.js b/packages/element-library/src/audioSticker/icon.tsx
similarity index 100%
rename from packages/element-library/src/audioSticker/icon.js
rename to packages/element-library/src/audioSticker/icon.tsx
diff --git a/packages/element-library/src/audioSticker/index.js b/packages/element-library/src/audioSticker/index.ts
similarity index 100%
rename from packages/element-library/src/audioSticker/index.js
rename to packages/element-library/src/audioSticker/index.ts
diff --git a/packages/element-library/src/audioSticker/layer.js b/packages/element-library/src/audioSticker/layer.tsx
similarity index 100%
rename from packages/element-library/src/audioSticker/layer.js
rename to packages/element-library/src/audioSticker/layer.tsx
diff --git a/packages/element-library/src/audioSticker/output.js b/packages/element-library/src/audioSticker/output.tsx
similarity index 83%
rename from packages/element-library/src/audioSticker/output.js
rename to packages/element-library/src/audioSticker/output.tsx
index 7086190bee0a..4c9c8e1b5ffd 100644
--- a/packages/element-library/src/audioSticker/output.js
+++ b/packages/element-library/src/audioSticker/output.tsx
@@ -17,9 +17,12 @@
 /**
  * External dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type {
+  AudioStickerElement,
+  OutputProps,
+} from '@googleforcreators/elements';
 
-function AudioStickerOutput({ element }) {
+function AudioStickerOutput({ element }: OutputProps<AudioStickerElement>) {
   return (
     <div className="audio-sticker">
       <amp-story-audio-sticker
@@ -36,8 +39,4 @@ function AudioStickerOutput({ element }) {
   );
 }
 
-AudioStickerOutput.propTypes = {
-  element: StoryPropTypes.elements.audioSticker.isRequired,
-};
-
 export default AudioStickerOutput;
diff --git a/packages/element-library/src/elementTypes.js b/packages/element-library/src/elementTypes.ts
similarity index 50%
rename from packages/element-library/src/elementTypes.js
rename to packages/element-library/src/elementTypes.ts
index 1554ad03bc7f..97197e3a484c 100644
--- a/packages/element-library/src/elementTypes.js
+++ b/packages/element-library/src/elementTypes.ts
@@ -18,6 +18,18 @@
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
+import {
+  type ElementDefinition,
+  type AudioStickerElement,
+  type TextElement,
+  type ImageElement,
+  type ShapeElement,
+  type VideoElement,
+  type GifElement,
+  type StickerElement,
+  type ProductElement,
+  ElementType,
+} from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -32,22 +44,46 @@ import * as productElement from './product';
 import * as audioStickerElement from './audioSticker';
 
 const elementTypes = [
-  { type: 'text', name: __('Text', 'web-stories'), ...textElement },
-  { type: 'image', name: __('Image', 'web-stories'), ...imageElement },
-  { type: 'shape', name: __('Shape', 'web-stories'), ...shapeElement },
-  { type: 'video', name: __('Video', 'web-stories'), ...videoElement },
-  { type: 'gif', name: __('GIF', 'web-stories'), ...gifElement },
-  { type: 'sticker', name: __('Sticker', 'web-stories'), ...stickerElement },
-  {
-    type: 'product',
+  {
+    type: ElementType.Text,
+    name: __('Text', 'web-stories'),
+    ...textElement,
+  } as ElementDefinition<TextElement>,
+  {
+    type: ElementType.Image,
+    name: __('Image', 'web-stories'),
+    ...imageElement,
+  } as ElementDefinition<ImageElement>,
+  {
+    type: ElementType.Shape,
+    name: __('Shape', 'web-stories'),
+    ...shapeElement,
+  } as ElementDefinition<ShapeElement>,
+  {
+    type: ElementType.Video,
+    name: __('Video', 'web-stories'),
+    ...videoElement,
+  } as ElementDefinition<VideoElement>,
+  {
+    type: ElementType.Gif,
+    name: __('GIF', 'web-stories'),
+    ...gifElement,
+  } as ElementDefinition<GifElement>,
+  {
+    type: ElementType.Sticker,
+    name: __('Sticker', 'web-stories'),
+    ...stickerElement,
+  } as ElementDefinition<StickerElement>,
+  {
+    type: ElementType.Product,
     name: __('Product', 'web-stories'),
     ...productElement,
-  },
+  } as ElementDefinition<ProductElement>,
   {
-    type: 'audioSticker',
+    type: ElementType.AudioSticker,
     name: __('Audio Sticker', 'web-stories'),
     ...audioStickerElement,
-  },
+  } as ElementDefinition<AudioStickerElement>,
 ];
 
 export default elementTypes;
diff --git a/packages/element-library/src/gif/constants.js b/packages/element-library/src/gif/constants.ts
similarity index 80%
rename from packages/element-library/src/gif/constants.js
rename to packages/element-library/src/gif/constants.ts
index 0a4312b1ab23..5b1287d086cd 100644
--- a/packages/element-library/src/gif/constants.js
+++ b/packages/element-library/src/gif/constants.ts
@@ -17,6 +17,7 @@
  * External dependencies
  */
 import { PanelTypes } from '@googleforcreators/design-system';
+import { ResourceType } from '@googleforcreators/media';
 
 /**
  * Internal dependencies
@@ -27,9 +28,11 @@ import { MEDIA_DEFAULT_ATTRIBUTES, MEDIA_PANELS } from '../media';
 export {
   canFlip,
   isMaskable,
+  isAspectAlwaysLocked,
   isMedia,
   hasEditMode,
   hasEditModeIfLocked,
+  hasEditModeMoveable,
   hasDuplicateMenu,
   hasDesignMenu,
   editModeGrayout,
@@ -40,6 +43,19 @@ export { resizeRules } from '../media/constants';
 export const defaultAttributes = {
   ...SHARED_DEFAULT_ATTRIBUTES,
   ...MEDIA_DEFAULT_ATTRIBUTES,
+  resource: {
+    type: ResourceType.Gif,
+    id: 0,
+    width: 0,
+    height: 0,
+    alt: '',
+    src: '',
+    mimeType: 'image/gif',
+    output: {
+      mimeType: 'video/mp4',
+      src: '',
+    },
+  },
 };
 
 export const panels = [
diff --git a/packages/element-library/src/gif/display.js b/packages/element-library/src/gif/display.tsx
similarity index 83%
rename from packages/element-library/src/gif/display.js
rename to packages/element-library/src/gif/display.tsx
index 45fd3085bf39..80b19d8d6b1c 100644
--- a/packages/element-library/src/gif/display.js
+++ b/packages/element-library/src/gif/display.tsx
@@ -17,10 +17,10 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useRef } from '@googleforcreators/react';
 import { getMediaSizePositionProps } from '@googleforcreators/media';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { GifElement, DisplayProps } from '@googleforcreators/elements';
+import type { RefObject } from 'react';
 
 /**
  * Internal dependencies
@@ -28,14 +28,14 @@ import { StoryPropTypes } from '@googleforcreators/elements';
 import MediaDisplay from '../media/display';
 import { getBackgroundStyle, Video, VideoImage } from '../media/util';
 
-function VideoDisplay({
+function GifDisplay({
   previewMode,
   box: { width, height },
   element,
   renderResourcePlaceholder,
-}) {
+}: DisplayProps<GifElement>) {
   const { id, poster, resource, isBackground, scale, focalX, focalY } = element;
-  const ref = useRef();
+  const ref = useRef<HTMLImageElement | HTMLVideoElement>(null);
   let style = {};
   if (isBackground) {
     const styleProps = getBackgroundStyle();
@@ -55,7 +55,7 @@ function VideoDisplay({
   );
 
   return (
-    <MediaDisplay
+    <MediaDisplay<GifElement>
       element={element}
       mediaRef={ref}
       showPlaceholder
@@ -69,7 +69,7 @@ function VideoDisplay({
             alt={element.alt || resource.alt}
             style={style}
             {...videoProps}
-            ref={ref}
+            ref={ref as RefObject<HTMLImageElement>}
           />
         )
       ) : (
@@ -82,7 +82,7 @@ function VideoDisplay({
           autoPlay
           muted
           preload="all"
-          ref={ref}
+          ref={ref as RefObject<HTMLVideoElement>}
           data-testid="videoElement"
           data-leaf-element="true"
         >
@@ -95,11 +95,4 @@ function VideoDisplay({
   );
 }
 
-VideoDisplay.propTypes = {
-  previewMode: PropTypes.bool,
-  element: StoryPropTypes.elements.video.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  renderResourcePlaceholder: PropTypes.func,
-};
-
-export default VideoDisplay;
+export default GifDisplay;
diff --git a/packages/element-library/src/gif/edit.js b/packages/element-library/src/gif/edit.tsx
similarity index 71%
rename from packages/element-library/src/gif/edit.js
rename to packages/element-library/src/gif/edit.tsx
index 39e7adcd5569..55c713de4518 100644
--- a/packages/element-library/src/gif/edit.js
+++ b/packages/element-library/src/gif/edit.tsx
@@ -16,20 +16,15 @@
 /**
  * External dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { GifElement, EditProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
  */
 import MediaEdit from '../media/edit';
 
-function GifEdit({ element, box, ...rest }) {
-  return <MediaEdit element={element} box={box} {...rest} />;
+function GifEdit({ element, box, ...rest }: EditProps<GifElement>) {
+  return <MediaEdit<GifElement> element={element} box={box} {...rest} />;
 }
 
-GifEdit.propTypes = {
-  element: StoryPropTypes.elements.gif.isRequired,
-  box: StoryPropTypes.box.isRequired,
-};
-
 export default GifEdit;
diff --git a/packages/element-library/src/gif/frame.js b/packages/element-library/src/gif/frame.js
deleted file mode 100644
index fd74cde989ef..000000000000
--- a/packages/element-library/src/gif/frame.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/**
- * External dependencies
- */
-import { StoryPropTypes } from '@googleforcreators/elements';
-
-/**
- * Internal dependencies
- */
-import MediaFrame from '../media/frame';
-
-function GifFrame({ element }) {
-  return <MediaFrame element={element} />;
-}
-
-GifFrame.propTypes = {
-  element: StoryPropTypes.elements.gif.isRequired,
-};
-
-export default GifFrame;
diff --git a/packages/element-library/src/media/textContent.js b/packages/element-library/src/gif/frame.tsx
similarity index 80%
rename from packages/element-library/src/media/textContent.js
rename to packages/element-library/src/gif/frame.tsx
index ab4487cd4c78..d894dbfa4d6f 100644
--- a/packages/element-library/src/media/textContent.js
+++ b/packages/element-library/src/gif/frame.tsx
@@ -14,8 +14,12 @@
  * limitations under the License.
  */
 
-function TextContent({ src }) {
-  return `image: ${src}`;
-}
+/**
+ * Internal dependencies
+ */
+import MediaFrame from '../media/frame';
 
-export default TextContent;
+function GifFrame() {
+  return <MediaFrame />;
+}
+export default GifFrame;
diff --git a/packages/element-library/src/gif/icon.js b/packages/element-library/src/gif/icon.tsx
similarity index 86%
rename from packages/element-library/src/gif/icon.js
rename to packages/element-library/src/gif/icon.tsx
index dc7c6e4bdcbd..e0a13322e245 100644
--- a/packages/element-library/src/gif/icon.js
+++ b/packages/element-library/src/gif/icon.tsx
@@ -13,10 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { GifElement, LayerIconProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -27,12 +28,7 @@ function GifLayerIcon({
   element: {
     resource: { poster, alt },
   },
-}) {
+}: LayerIconProps<GifElement>) {
   return <VisibleImage src={poster} alt={alt} height={21} width={21} />;
 }
-
-GifLayerIcon.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-};
-
 export default GifLayerIcon;
diff --git a/packages/element-library/src/gif/index.js b/packages/element-library/src/gif/index.ts
similarity index 100%
rename from packages/element-library/src/gif/index.js
rename to packages/element-library/src/gif/index.ts
diff --git a/packages/element-library/src/gif/layer.js b/packages/element-library/src/gif/layer.ts
similarity index 87%
rename from packages/element-library/src/gif/layer.js
rename to packages/element-library/src/gif/layer.ts
index e6f265a29bb9..ce7c1cc921a9 100644
--- a/packages/element-library/src/gif/layer.js
+++ b/packages/element-library/src/gif/layer.ts
@@ -13,12 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
+import type { GifElement } from '@googleforcreators/elements';
 
-function getGifLayerText(element) {
+function getGifLayerText(element: GifElement) {
   const { alt } = element?.resource || {};
 
   return alt || __('GIF', 'web-stories');
diff --git a/packages/element-library/src/gif/output.js b/packages/element-library/src/gif/output.tsx
similarity index 83%
rename from packages/element-library/src/gif/output.js
rename to packages/element-library/src/gif/output.tsx
index 8471af373b95..4bc7817a06c9 100644
--- a/packages/element-library/src/gif/output.js
+++ b/packages/element-library/src/gif/output.tsx
@@ -17,16 +17,15 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { isBlobURL } from '@googleforcreators/media';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { GifElement, OutputProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
  */
 import MediaOutput from '../media/output';
 
-function GifOutput({ element, box, flags }) {
+function GifOutput({ element, box, flags }: OutputProps<GifElement>) {
   const { resource } = element;
 
   const src =
@@ -40,6 +39,7 @@ function GifOutput({ element, box, flags }) {
     <MediaOutput element={element} box={box} data-leaf-element="true">
       <amp-video
         id={`el-${element.id}-media`}
+        // @ts-expect-error Needs to be lowercase.
         autoplay="autoplay"
         loop="loop"
         noaudio="noaudio"
@@ -53,10 +53,4 @@ function GifOutput({ element, box, flags }) {
   );
 }
 
-GifOutput.propTypes = {
-  element: StoryPropTypes.elements.gif.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  flags: PropTypes.object,
-};
-
 export default GifOutput;
diff --git a/packages/element-library/src/image/constants.js b/packages/element-library/src/image/constants.ts
similarity index 84%
rename from packages/element-library/src/image/constants.js
rename to packages/element-library/src/image/constants.ts
index 5a47830ae28f..a3a87abec06a 100644
--- a/packages/element-library/src/image/constants.js
+++ b/packages/element-library/src/image/constants.ts
@@ -13,10 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
 import { PanelTypes } from '@googleforcreators/design-system';
+import { ResourceType } from '@googleforcreators/media';
 
 /**
  * Internal dependencies
@@ -27,9 +29,11 @@ import { MEDIA_DEFAULT_ATTRIBUTES, MEDIA_PANELS } from '../media';
 export {
   canFlip,
   isMaskable,
+  isAspectAlwaysLocked,
   isMedia,
   hasEditMode,
   hasEditModeIfLocked,
+  hasEditModeMoveable,
   hasDuplicateMenu,
   hasDesignMenu,
   editModeGrayout,
@@ -40,6 +44,15 @@ export const defaultAttributes = {
   ...SHARED_DEFAULT_ATTRIBUTES,
   ...MEDIA_DEFAULT_ATTRIBUTES,
   lockAspectRatio: false,
+  resource: {
+    type: ResourceType.Image,
+    id: 0,
+    width: 0,
+    height: 0,
+    alt: '',
+    src: '',
+    mimeType: '',
+  },
 };
 
 export const panels = [
diff --git a/packages/element-library/src/image/edit.js b/packages/element-library/src/image/edit.tsx
similarity index 71%
rename from packages/element-library/src/image/edit.js
rename to packages/element-library/src/image/edit.tsx
index db476ffed53b..6d69c9b2e17c 100644
--- a/packages/element-library/src/image/edit.js
+++ b/packages/element-library/src/image/edit.tsx
@@ -13,23 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { ImageElement, EditProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
  */
 import MediaEdit from '../media/edit';
 
-function ImageEdit({ element, box, ...rest }) {
-  return <MediaEdit element={element} box={box} {...rest} />;
+function ImageEdit({ element, box, ...rest }: EditProps<ImageElement>) {
+  return <MediaEdit<ImageElement> element={element} box={box} {...rest} />;
 }
 
-ImageEdit.propTypes = {
-  element: StoryPropTypes.elements.image.isRequired,
-  box: StoryPropTypes.box.isRequired,
-};
-
 export default ImageEdit;
diff --git a/packages/element-library/src/image/frame.js b/packages/element-library/src/image/frame.js
deleted file mode 100644
index 6694553b0238..000000000000
--- a/packages/element-library/src/image/frame.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/**
- * External dependencies
- */
-import { StoryPropTypes } from '@googleforcreators/elements';
-
-/**
- * Internal dependencies
- */
-import MediaFrame from '../media/frame';
-
-function ImageFrame({ element }) {
-  return <MediaFrame element={element} />;
-}
-
-ImageFrame.propTypes = {
-  element: StoryPropTypes.elements.image.isRequired,
-};
-
-export default ImageFrame;
diff --git a/packages/element-library/src/types/index.ts b/packages/element-library/src/image/frame.tsx
similarity index 75%
rename from packages/element-library/src/types/index.ts
rename to packages/element-library/src/image/frame.tsx
index 52c259d2fb28..09e39c88db11 100644
--- a/packages/element-library/src/types/index.ts
+++ b/packages/element-library/src/image/frame.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2022 Google LLC
+ * Copyright 2020 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,4 +14,13 @@
  * limitations under the License.
  */
 
-export * from './elements';
+/**
+ * Internal dependencies
+ */
+import MediaFrame from '../media/frame';
+
+function ImageFrame() {
+  return <MediaFrame />;
+}
+
+export default ImageFrame;
diff --git a/packages/element-library/src/image/icon.js b/packages/element-library/src/image/icon.tsx
similarity index 73%
rename from packages/element-library/src/image/icon.js
rename to packages/element-library/src/image/icon.tsx
index 202882bb4d31..ff922db12a18 100644
--- a/packages/element-library/src/image/icon.js
+++ b/packages/element-library/src/image/icon.tsx
@@ -18,23 +18,20 @@
  * External dependencies
  */
 import { getSmallestUrlForWidth } from '@googleforcreators/media';
-import PropTypes from 'prop-types';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { ImageElement, LayerIconProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
  */
 import VisibleImage from '../shared/visibleImage';
 
-function ImageLayerIcon({ element: { resource }, getProxiedUrl }) {
+function ImageLayerIcon({
+  element: { resource },
+  getProxiedUrl,
+}: LayerIconProps<ImageElement>) {
   const url = getSmallestUrlForWidth(0, resource);
-  const src = getProxiedUrl(resource, url);
+  const src = getProxiedUrl(resource, url) || undefined;
   return <VisibleImage src={src} height={21} width={21} />;
 }
 
-ImageLayerIcon.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-  getProxiedUrl: PropTypes.func.isRequired,
-};
-
 export default ImageLayerIcon;
diff --git a/packages/element-library/src/image/index.js b/packages/element-library/src/image/index.ts
similarity index 100%
rename from packages/element-library/src/image/index.js
rename to packages/element-library/src/image/index.ts
diff --git a/packages/element-library/src/image/layer.js b/packages/element-library/src/image/layer.ts
similarity index 87%
rename from packages/element-library/src/image/layer.js
rename to packages/element-library/src/image/layer.ts
index e98ed8219a18..25540c5ffa03 100644
--- a/packages/element-library/src/image/layer.js
+++ b/packages/element-library/src/image/layer.ts
@@ -17,8 +17,9 @@
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
+import type { ImageElement } from '@googleforcreators/elements';
 
-function getImageLayerText(element) {
+function getImageLayerText(element: ImageElement) {
   const { alt } = element?.resource || {};
 
   return alt || __('Image', 'web-stories');
diff --git a/packages/element-library/src/image/output.js b/packages/element-library/src/image/output.tsx
similarity index 73%
rename from packages/element-library/src/image/output.js
rename to packages/element-library/src/image/output.tsx
index 371866312744..11bfe2d469b8 100644
--- a/packages/element-library/src/image/output.js
+++ b/packages/element-library/src/image/output.tsx
@@ -17,14 +17,14 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { calculateSrcSet, isBlobURL } from '@googleforcreators/media';
 import {
   PAGE_WIDTH,
   FULLBLEED_HEIGHT,
   FULLBLEED_RATIO,
 } from '@googleforcreators/units';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { ImageElement, OutputProps } from '@googleforcreators/elements';
+import type { HTMLProps } from 'react';
 
 /**
  * Internal dependencies
@@ -34,14 +34,16 @@ import MediaOutput from '../media/output';
 /**
  * Returns AMP HTML for saving into post content for displaying in the FE.
  *
- * @param {Object<*>} props Props.
- * @return {*} Rendered component.
+ * @param props Props.
+ * @return Rendered component.
  */
-function ImageOutput({ element, box, flags }) {
+function ImageOutput({ element, box, flags }: OutputProps<ImageElement>) {
   const { alt, isBackground, resource, width, height, scale } = element;
 
-  const props = {
-    layout: 'fill',
+  const props: Pick<
+    HTMLProps<HTMLImageElement>,
+    'src' | 'alt' | 'srcSet' | 'sizes'
+  > = {
     src: flags?.allowBlobs || !isBlobURL(resource.src) ? resource.src : '',
     alt: alt !== undefined ? alt : resource.alt,
   };
@@ -59,7 +61,7 @@ function ImageOutput({ element, box, flags }) {
         aspectRatio <= FULLBLEED_RATIO
           ? PAGE_WIDTH
           : aspectRatio * FULLBLEED_HEIGHT;
-      displayWidth = widthAsBackground * (scale / 100);
+      displayWidth = widthAsBackground * ((scale || 100) / 100);
     }
 
     // If `srcset` exists but `sizes` doesn't, amp-img will generate a sizes attribute
@@ -70,24 +72,16 @@ function ImageOutput({ element, box, flags }) {
     const desktopWidth = Math.round(imageWidthPercent * 45) + 'vh';
     // 1024px is the minimum width for STAMP desktop mode.
     props.sizes = `(min-width: 1024px) ${desktopWidth}, ${mobileWidth}`;
-
-    // Prevent inline `width` style from being inserted by AMP (due to presence of `sizes` attribute),
-    // which avoids an undesirable interaction between AMP and the Optimizer's SSR transforms.
-    // See https://github.com/googleforcreators/web-stories-wp/pull/8099#issuecomment-870987667.
-    props['disable-inline-width'] = true;
   }
 
+  // Prevent inline `width` style from being inserted by AMP (due to presence of `sizes` attribute),
+  // which avoids an undesirable interaction between AMP and the Optimizer's SSR transforms.
+  // See https://github.com/googleforcreators/web-stories-wp/pull/8099#issuecomment-870987667.
   return (
     <MediaOutput box={box} element={element} data-leaf-element="true">
-      <amp-img {...props} />
+      <amp-img layout="fill" {...props} disable-inline-width />
     </MediaOutput>
   );
 }
 
-ImageOutput.propTypes = {
-  element: StoryPropTypes.elements.image.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  flags: PropTypes.object,
-};
-
 export default ImageOutput;
diff --git a/packages/element-library/src/index.js b/packages/element-library/src/index.ts
similarity index 100%
rename from packages/element-library/src/index.js
rename to packages/element-library/src/index.ts
diff --git a/packages/element-library/src/media/constants.js b/packages/element-library/src/media/constants.ts
similarity index 100%
rename from packages/element-library/src/media/constants.js
rename to packages/element-library/src/media/constants.ts
diff --git a/packages/element-library/src/media/display.js b/packages/element-library/src/media/display.tsx
similarity index 75%
rename from packages/element-library/src/media/display.js
rename to packages/element-library/src/media/display.tsx
index e44e467d4d50..6845b9937c08 100644
--- a/packages/element-library/src/media/display.js
+++ b/packages/element-library/src/media/display.tsx
@@ -18,7 +18,6 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
 import { useRef } from '@googleforcreators/react';
 import { useUnits } from '@googleforcreators/units';
 import { getMediaSizePositionProps } from '@googleforcreators/media';
@@ -27,7 +26,14 @@ import {
   getResponsiveBorder,
   shouldDisplayBorder,
 } from '@googleforcreators/masks';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type {
+  SequenceMediaElement,
+  OverlayableElement,
+  Element as ElementType,
+  MediaElement,
+  DisplayProps,
+} from '@googleforcreators/elements';
+import type { ReactNode, RefObject } from 'react';
 
 /**
  * Internal dependencies
@@ -40,7 +46,11 @@ import {
 } from '../shared';
 import { getMediaWithScaleCss } from './util';
 
-const Element = styled.div.attrs({ className: 'story-media-display-element' })`
+const Element = styled.div.attrs({ className: 'story-media-display-element' })<
+  {
+    showPlaceholder: boolean;
+  } & Pick<ElementType, 'border' | 'borderRadius' | 'width' | 'height' | 'mask'>
+>`
   ${elementFillContent}
   ${({ showPlaceholder }) => showPlaceholder && `background-color: #C4C4C4;`}
   color: transparent;
@@ -53,14 +63,26 @@ const Overlay = styled.div`
   ${elementWithBackgroundColor}
 `;
 
-function MediaDisplay({
+interface MediaDisplayProps<T extends MediaElement> {
+  element: T & OverlayableElement;
+  showPlaceholder?: boolean;
+  previewMode?: boolean;
+  mediaRef: RefObject<
+    T extends SequenceMediaElement
+      ? HTMLVideoElement | HTMLImageElement
+      : HTMLImageElement
+  >;
+  renderResourcePlaceholder?: DisplayProps<T>['renderResourcePlaceholder'];
+  children: ReactNode;
+}
+function MediaDisplay<T extends MediaElement>({
   element,
   mediaRef,
   children,
   previewMode,
   showPlaceholder = false,
   renderResourcePlaceholder,
-}) {
+}: MediaDisplayProps<T>) {
   const {
     id,
     resource,
@@ -79,7 +101,7 @@ function MediaDisplay({
     dataToEditorX: state.actions.dataToEditorX,
   }));
 
-  const ref = useRef();
+  const ref = useRef<HTMLDivElement>(null);
   useColorTransformHandler({
     id,
     targetRef: ref,
@@ -87,7 +109,7 @@ function MediaDisplay({
   });
   useTransformHandler(id, (transform) => {
     const target = mediaRef.current;
-    if (mediaRef.current) {
+    if (target) {
       if (transform === null) {
         target.style.cssText = '';
       } else {
@@ -103,11 +125,11 @@ function MediaDisplay({
             focalY
           );
           target.style.cssText = getMediaWithScaleCss(newImgProps);
-          if (shouldDisplayBorder(element)) {
+          if (shouldDisplayBorder(element) && ref.current) {
             ref.current.style.width =
-              resize[0] + border.left + border.right + 'px';
+              resize[0] + (border?.left || 0) + (border?.right || 0) + 'px';
             ref.current.style.height =
-              resize[1] + border.top + border.bottom + 'px';
+              resize[1] + (border?.top || 0) + (border?.bottom || 0) + 'px';
           }
         }
       }
@@ -133,13 +155,4 @@ function MediaDisplay({
   );
 }
 
-MediaDisplay.propTypes = {
-  element: StoryPropTypes.elements.media.isRequired,
-  mediaRef: PropTypes.object,
-  children: PropTypes.node,
-  showPlaceholder: PropTypes.bool,
-  previewMode: PropTypes.bool,
-  renderResourcePlaceholder: PropTypes.func,
-};
-
 export default MediaDisplay;
diff --git a/packages/element-library/src/media/edit.js b/packages/element-library/src/media/edit.tsx
similarity index 64%
rename from packages/element-library/src/media/edit.js
rename to packages/element-library/src/media/edit.tsx
index 05abb9841f2d..bf1eaf8f6b73 100644
--- a/packages/element-library/src/media/edit.js
+++ b/packages/element-library/src/media/edit.tsx
@@ -20,22 +20,28 @@
 import styled, { css } from 'styled-components';
 import {
   useCallback,
-  useState,
-  useRef,
   useEffect,
+  useRef,
+  useState,
   useUnmount,
 } from '@googleforcreators/react';
 import { __ } from '@googleforcreators/i18n';
-import PropTypes from 'prop-types';
 import {
-  getMediaSizePositionProps,
   calculateSrcSet,
+  getMediaSizePositionProps,
 } from '@googleforcreators/media';
 import {
   DisplayWithMask as WithMask,
   shouldDisplayBorder,
 } from '@googleforcreators/masks';
-import { StoryPropTypes, getTransformFlip } from '@googleforcreators/elements';
+import {
+  type MediaElement,
+  type SequenceMediaElement,
+  type EditProps,
+  getTransformFlip,
+  elementIs,
+} from '@googleforcreators/elements';
+import type { Dispatch, SetStateAction } from 'react';
 
 /**
  * Internal dependencies
@@ -53,7 +59,14 @@ const Element = styled.div`
 `;
 
 // Opacity of the mask is reduced depending on the opacity assigned to the media.
-const fadedMediaCSS = css`
+const fadedMediaCSS = css<{
+  opacity?: number;
+  width: number;
+  height: number;
+  offsetX: number;
+  offsetY: number;
+  $transformFlip: string | null;
+}>`
   position: absolute;
   opacity: ${({ opacity }) =>
     typeof opacity !== 'undefined'
@@ -69,14 +82,21 @@ const FadedImage = styled.img`
 `;
 
 const FadedVideo = styled.video`
-  ${fadedMediaCSS}
   max-width: initial;
   max-height: initial;
+  ${fadedMediaCSS}
 `;
 
 // Opacity is adjusted so that the double image opacity would equal
 // the opacity assigned to the image.
-const cropMediaCSS = css`
+const cropMediaCSS = css<{
+  opacity?: number;
+  width: number;
+  height: number;
+  offsetX: number;
+  offsetY: number;
+  $transformFlip?: string | null;
+}>`
   ${mediaWithScale}
   ${elementWithFlip}
   position: absolute;
@@ -93,12 +113,13 @@ const CropImage = styled.img`
 
 // Opacity of the mask is reduced depending on the opacity assigned to the video.
 const CropVideo = styled.video`
-  ${cropMediaCSS}
   max-width: initial;
   max-height: initial;
+  ${cropMediaCSS}
 `;
 
-function MediaEdit({
+// eslint-disable-next-line complexity -- TODO: Refactor to reduce complexity.
+function MediaEdit<T extends MediaElement = MediaElement>({
   element,
   box,
   setLocalProperties,
@@ -107,7 +128,7 @@ function MediaEdit({
   zIndexCanvas,
   scaleMin,
   scaleMax,
-}) {
+}: Omit<EditProps<T>, 'isTrimMode'>) {
   const {
     id,
     resource,
@@ -118,27 +139,31 @@ function MediaEdit({
     focalY,
     isBackground,
     isLocked,
-    type,
     borderRadius,
   } = element;
   const { x, y, width, height, rotationAngle } = box;
-  const [fullMedia, setFullMedia] = useState(null);
-  const [croppedMedia, setCroppedMedia] = useState(null);
-  const [cropBox, setCropBox] = useState(null);
-  const elementRef = useRef();
+  const [fullMedia, setFullMedia] = useState<
+    | (T extends SequenceMediaElement ? HTMLVideoElement : HTMLImageElement)
+    | null
+  >(null);
+  const [croppedMedia, setCroppedMedia] = useState<
+    | (T extends SequenceMediaElement ? HTMLVideoElement : HTMLImageElement)
+    | null
+  >(null);
+  const [cropBox, setCropBox] = useState<HTMLDivElement | null>(null);
+  const elementRef = useRef<HTMLDivElement>(null);
 
   const isUpdatedLocally = useRef(false);
-  const lastLocalProperties = useRef({ scale });
+  const lastLocalProperties = useRef<Partial<T>>({ scale } as Partial<T>);
 
   const updateLocalProperties = useCallback(
-    (properties) => {
-      const newProps = {
+    (properties: Partial<T> | ((p: Partial<T>) => Partial<T>)) => {
+      lastLocalProperties.current = {
         ...lastLocalProperties.current,
         ...(typeof properties === 'function'
           ? properties(lastLocalProperties.current)
           : properties),
       };
-      lastLocalProperties.current = newProps;
       isUpdatedLocally.current = true;
       setLocalProperties(lastLocalProperties.current);
     },
@@ -150,42 +175,39 @@ function MediaEdit({
       return;
     }
     isUpdatedLocally.current = false;
-    const properties = lastLocalProperties.current;
+    const properties: Partial<T> = lastLocalProperties.current;
     updateElementById({ elementId: id, properties });
   }, [id, updateElementById]);
 
   useUnmount(updateProperties);
 
-  const isImage = ['image', 'gif'].includes(type);
-  const isVideo = 'video' === type;
+  const isImage = elementIs.media(element) && !elementIs.video(element);
+  const isVideo = elementIs.video(element);
 
   const mediaProps = getMediaSizePositionProps(
     resource,
     width,
     height,
     scale,
-    flip?.horizontal ? 100 - focalX : focalX,
-    flip?.vertical ? 100 - focalY : focalY
+    flip?.horizontal ? 100 - (focalX || 0) : focalX,
+    flip?.vertical ? 100 - (focalY || 0) : focalY
   );
 
-  mediaProps.transformFlip = getTransformFlip(flip);
-  mediaProps.crossOrigin = 'anonymous';
-
   const fadedMediaProps = {
-    ref: setFullMedia,
     draggable: false,
     alt: '',
-    opacity: opacity / 100,
+    opacity: (opacity || 100) / 100,
+    $transformFlip: getTransformFlip(flip),
     ...mediaProps,
   };
 
   const cropMediaProps = {
-    ref: setCroppedMedia,
     draggable: false,
     src: resource.src,
     alt: __('Drag to move media element', 'web-stories'),
-    opacity: opacity / 100,
+    opacity: (opacity || 100) / 100,
     tabIndex: 0,
+    $transformFlip: getTransformFlip(flip),
     ...mediaProps,
   };
 
@@ -201,15 +223,18 @@ function MediaEdit({
   }, [croppedMedia]);
 
   const srcSet = calculateSrcSet(element.resource);
-  if (isImage && srcSet) {
-    cropMediaProps.srcSet = srcSet;
-  }
 
   const handleWheel = useCallback(
-    (evt) => {
-      updateLocalProperties(({ scale: oldScale }) => ({
-        scale: Math.min(scaleMax, Math.max(scaleMin, oldScale + evt.deltaY)),
-      }));
+    (evt: WheelEvent) => {
+      updateLocalProperties(
+        ({ scale: oldScale }: Partial<T>) =>
+          ({
+            scale: Math.min(
+              scaleMax,
+              Math.max(scaleMin, (oldScale || 0) + evt.deltaY)
+            ),
+          }) as Partial<T>
+      );
       evt.preventDefault();
       evt.stopPropagation();
     },
@@ -221,12 +246,20 @@ function MediaEdit({
   useEffect(() => {
     const node = elementRef.current;
     const opts = { passive: false };
-    node.addEventListener('wheel', handleWheel, opts);
-    return () => node.removeEventListener('wheel', handleWheel, opts);
+    node?.addEventListener('wheel', handleWheel, opts);
+    // @ts-expect-error TODO: Fix type.
+    return () => node?.removeEventListener('wheel', handleWheel, opts);
   }, [handleWheel]);
 
   const borderProps =
-    shouldDisplayBorder(element) && borderRadius ? element : null;
+    shouldDisplayBorder(element) && borderRadius
+      ? {
+          borderRadius: element.borderRadius,
+          width: element.width,
+          height: element.height,
+          mask: element.mask,
+        }
+      : null;
 
   return (
     <Element ref={elementRef}>
@@ -234,24 +267,56 @@ function MediaEdit({
         /* eslint-disable-next-line styled-components-a11y/alt-text -- False positive. */
         <FadedImage
           {...fadedMediaProps}
-          src={url}
-          srcSet={calculateSrcSet(resource)}
+          crossOrigin="anonymous"
+          ref={
+            setFullMedia as Dispatch<SetStateAction<HTMLImageElement | null>>
+          }
+          src={url || undefined}
+          srcSet={calculateSrcSet(resource) || undefined}
         />
       )}
       {isVideo && (
         //eslint-disable-next-line styled-components-a11y/media-has-caption,jsx-a11y/media-has-caption -- Faded video doesn't need captions.
-        <FadedVideo {...fadedMediaProps}>
+        <FadedVideo
+          {...fadedMediaProps}
+          crossOrigin="anonymous"
+          ref={
+            setFullMedia as Dispatch<SetStateAction<HTMLVideoElement | null>>
+          }
+        >
           {url && <source src={url} type={resource.mimeType} />}
         </FadedVideo>
       )}
+
+      {/* @ts-expect-error TODO: Fix type. */}
       <CropBox ref={setCropBox} {...borderProps}>
         <WithMask element={element} fill applyFlip={false}>
-          {/* eslint-disable-next-line styled-components-a11y/alt-text -- False positive. */}
-          {isImage && <CropImage {...cropMediaProps} />}
+          {}
+          {isImage && (
+            /*eslint-disable-next-line styled-components-a11y/alt-text -- False positive. */
+            <CropImage
+              {...cropMediaProps}
+              crossOrigin="anonymous"
+              ref={
+                setCroppedMedia as Dispatch<
+                  SetStateAction<HTMLImageElement | null>
+                >
+              }
+              srcSet={srcSet || undefined}
+            />
+          )}
           {isVideo && (
             /*eslint-disable-next-line styled-components-a11y/media-has-caption,jsx-a11y/media-has-caption -- Tracks might not exist. Also, unwanted in edit mode. */
-            <CropVideo {...cropMediaProps}>
-              <source src={url} type={resource.mimeType} />
+            <CropVideo
+              {...cropMediaProps}
+              crossOrigin="anonymous"
+              ref={
+                setCroppedMedia as Dispatch<
+                  SetStateAction<HTMLVideoElement | null>
+                >
+              }
+            >
+              <source src={url || undefined} type={resource.mimeType} />
             </CropVideo>
           )}
         </WithMask>
@@ -293,7 +358,7 @@ function MediaEdit({
         />
       )}
 
-      <ScalePanel
+      <ScalePanel<T>
         aria-label={__('Scale media', 'web-stories')}
         data-testid="edit-panel-slider"
         setProperties={updateLocalProperties}
@@ -310,15 +375,4 @@ function MediaEdit({
   );
 }
 
-MediaEdit.propTypes = {
-  element: StoryPropTypes.elements.media.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  setLocalProperties: PropTypes.func.isRequired,
-  getProxiedUrl: PropTypes.func,
-  updateElementById: PropTypes.func,
-  zIndexCanvas: PropTypes.object,
-  scaleMin: PropTypes.number.isRequired,
-  scaleMax: PropTypes.number.isRequired,
-};
-
 export default MediaEdit;
diff --git a/packages/element-library/src/media/editCropMoveable.js b/packages/element-library/src/media/editCropMoveable.tsx
similarity index 83%
rename from packages/element-library/src/media/editCropMoveable.js
rename to packages/element-library/src/media/editCropMoveable.tsx
index 191d280dd70a..64bb6363ae18 100644
--- a/packages/element-library/src/media/editCropMoveable.js
+++ b/packages/element-library/src/media/editCropMoveable.tsx
@@ -17,14 +17,34 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useEffect, useRef } from '@googleforcreators/react';
 import { useUnits, calcRotatedResizeOffset } from '@googleforcreators/units';
 import { getFocalFromOffset } from '@googleforcreators/media';
 import { Moveable } from '@googleforcreators/moveable';
-import { StoryPropTypes, getTransformFlip } from '@googleforcreators/elements';
+import {
+  getTransformFlip,
+  type Flip,
+  type MediaElement,
+} from '@googleforcreators/elements';
+import type MoveableType from 'react-moveable';
 
-function EditCropMoveable({
+interface EditCropMoveableProps<T> {
+  setProperties: (properties: Partial<T>) => void;
+  cropBox: HTMLElement;
+  croppedMedia: HTMLElement;
+  flip?: Flip;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotationAngle: number;
+  offsetX: number;
+  offsetY: number;
+  mediaWidth: number;
+  mediaHeight: number;
+}
+
+function EditCropMoveable<T extends MediaElement = MediaElement>({
   setProperties,
   cropBox,
   croppedMedia,
@@ -38,13 +58,13 @@ function EditCropMoveable({
   offsetY,
   mediaWidth,
   mediaHeight,
-}) {
+}: EditCropMoveableProps<T>) {
   const { editorToDataX, editorToDataY } = useUnits((state) => ({
     editorToDataX: state.actions.editorToDataX,
     editorToDataY: state.actions.editorToDataY,
   }));
 
-  const moveableRef = useRef();
+  const moveableRef = useRef<MoveableType>(null);
   const cropRef = useRef([0, 0, 0, 0, 0, 0]);
   const transformFlip = getTransformFlip(flip);
 
@@ -57,7 +77,7 @@ function EditCropMoveable({
     <Moveable
       ref={moveableRef}
       className="crop-moveable"
-      targets={cropBox}
+      target={cropBox}
       origin={false}
       resizable
       onResize={({
@@ -127,12 +147,10 @@ function EditCropMoveable({
           y: editorToDataY(y + dy),
           width: editorToDataX(resizeWidth),
           height: editorToDataY(resizeHeight),
-          resizeWidth,
-          resizeHeight,
           scale: resizeScale,
           focalX: flip?.horizontal ? 100 - resizeFocalX : resizeFocalX,
           focalY: flip?.vertical ? 100 - resizeFocalY : resizeFocalY,
-        });
+        } as Partial<T>);
       }}
       snappable
       // todo@: it looks like resizing bounds are not supported.
@@ -142,20 +160,4 @@ function EditCropMoveable({
   );
 }
 
-EditCropMoveable.propTypes = {
-  setProperties: PropTypes.func.isRequired,
-  cropBox: PropTypes.object.isRequired,
-  croppedMedia: PropTypes.object.isRequired,
-  flip: StoryPropTypes.flip,
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  rotationAngle: PropTypes.number.isRequired,
-  offsetX: PropTypes.number.isRequired,
-  offsetY: PropTypes.number.isRequired,
-  mediaWidth: PropTypes.number.isRequired,
-  mediaHeight: PropTypes.number.isRequired,
-};
-
 export default EditCropMoveable;
diff --git a/packages/element-library/src/media/editPanMoveable.js b/packages/element-library/src/media/editPanMoveable.tsx
similarity index 82%
rename from packages/element-library/src/media/editPanMoveable.js
rename to packages/element-library/src/media/editPanMoveable.tsx
index 31731816c970..c44be2fbd026 100644
--- a/packages/element-library/src/media/editPanMoveable.js
+++ b/packages/element-library/src/media/editPanMoveable.tsx
@@ -17,7 +17,6 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useEffect, useRef, useCallback } from '@googleforcreators/react';
 import { getFocalFromOffset } from '@googleforcreators/media';
 import {
@@ -25,9 +24,30 @@ import {
   getKeyboardMovement,
 } from '@googleforcreators/design-system';
 import { Moveable } from '@googleforcreators/moveable';
-import { StoryPropTypes, getTransformFlip } from '@googleforcreators/elements';
+import {
+  type Flip,
+  getTransformFlip,
+  type MediaElement,
+} from '@googleforcreators/elements';
+import type MoveableType from 'react-moveable';
+
+interface EditPanMoveableProps<T> {
+  setProperties: (properties: Partial<T>) => void;
+  fullMedia: HTMLElement;
+  croppedMedia: HTMLElement;
+  flip?: Flip;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotationAngle: number;
+  offsetX: number;
+  offsetY: number;
+  mediaWidth: number;
+  mediaHeight: number;
+}
 
-function EditPanMoveable({
+function EditPanMoveable<T extends MediaElement = MediaElement>({
   setProperties,
   fullMedia,
   croppedMedia,
@@ -41,8 +61,8 @@ function EditPanMoveable({
   offsetY,
   mediaWidth,
   mediaHeight,
-}) {
-  const moveableRef = useRef();
+}: EditPanMoveableProps<T>) {
+  const moveableRef = useRef<MoveableType>(null);
   const translateRef = useRef([0, 0]);
   const transformFlip = getTransformFlip(flip);
 
@@ -73,7 +93,7 @@ function EditPanMoveable({
       setProperties({
         focalX: flip?.horizontal ? 100 - panFocalX : panFocalX,
         focalY: flip?.vertical ? 100 - panFocalY : panFocalY,
-      });
+      } as Partial<T>);
       update();
     },
     [
@@ -93,7 +113,7 @@ function EditPanMoveable({
   return (
     <Moveable
       ref={moveableRef}
-      targets={croppedMedia}
+      target={croppedMedia}
       origin
       draggable
       throttleDrag={0}
@@ -110,12 +130,10 @@ function EditPanMoveable({
         setProperties({
           focalX: flip?.horizontal ? 100 - panFocalX : panFocalX,
           focalY: flip?.vertical ? 100 - panFocalY : panFocalY,
-        });
+        } as Partial<T>);
         update();
       }}
-      // Snappable
       snappable
-      snapCenter
       // todo@: Moveable defines bounds and guidelines as the vertical and
       // horizontal lines and doesn't work well with `rotationAngle > 0` for
       // cropping/panning. It's possible to define a larger bounds using
@@ -140,20 +158,4 @@ function EditPanMoveable({
   );
 }
 
-EditPanMoveable.propTypes = {
-  setProperties: PropTypes.func.isRequired,
-  fullMedia: PropTypes.object.isRequired,
-  croppedMedia: PropTypes.object.isRequired,
-  flip: StoryPropTypes.flip,
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  rotationAngle: PropTypes.number.isRequired,
-  offsetX: PropTypes.number.isRequired,
-  offsetY: PropTypes.number.isRequired,
-  mediaWidth: PropTypes.number.isRequired,
-  mediaHeight: PropTypes.number.isRequired,
-};
-
 export default EditPanMoveable;
diff --git a/packages/element-library/src/media/frame.js b/packages/element-library/src/media/frame.tsx
similarity index 100%
rename from packages/element-library/src/media/frame.js
rename to packages/element-library/src/media/frame.tsx
diff --git a/packages/element-library/src/media/imageDisplay.js b/packages/element-library/src/media/imageDisplay.tsx
similarity index 61%
rename from packages/element-library/src/media/imageDisplay.js
rename to packages/element-library/src/media/imageDisplay.tsx
index 99b61ea9c7e8..df1abb94908f 100644
--- a/packages/element-library/src/media/imageDisplay.js
+++ b/packages/element-library/src/media/imageDisplay.tsx
@@ -19,28 +19,31 @@
  */
 import styled from 'styled-components';
 import { useEffect, useRef, useState } from '@googleforcreators/react';
-import PropTypes from 'prop-types';
 import {
-  preloadImage,
-  resourceList,
-  getMediaSizePositionProps,
   calculateSrcSet,
+  getMediaSizePositionProps,
   getSmallestUrlForWidth,
+  preloadImage,
+  type ResourceCacheEntry,
+  ResourceCacheEntryType,
+  resourceList,
 } from '@googleforcreators/media';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { ImageElement, DisplayProps } from '@googleforcreators/elements';
+import type { HTMLProps } from 'react';
 
 /**
  * Internal dependencies
  */
-import { noop } from '../utils/noop';
 import { mediaWithScale } from './util';
 import MediaDisplay from './display';
 
-const Img = styled.img`
+const Image = styled.img`
   position: absolute;
   ${mediaWithScale}
 `;
 
+const noop = () => false;
+
 function ImageDisplay({
   element,
   box,
@@ -49,22 +52,22 @@ function ImageDisplay({
   isCurrentResourceProcessing = noop,
   isCurrentResourceUploading = noop,
   renderResourcePlaceholder,
-}) {
+}: DisplayProps<ImageElement>) {
   const { resource, scale, focalX, focalY } = element;
   const { id: resourceId, alt } = resource;
   const { width, height } = box;
-  const ref = useRef();
+  const ref = useRef<HTMLImageElement>(null);
 
   let initialSrcType = 'smallest';
-  let initialSrc = getSmallestUrlForWidth(0, resource);
+  let initialSrc: string | null = getSmallestUrlForWidth(0, resource);
 
-  if (resourceList.get(resourceId)?.type === 'cached') {
+  if (resourceList.get(resourceId)?.type === ResourceCacheEntryType.Cached) {
     initialSrcType = 'cached';
-    initialSrc = resourceList.get(resourceId).url;
+    initialSrc = (resourceList.get(resourceId) as ResourceCacheEntry).url;
   }
 
   if (
-    resourceList.get(resourceId)?.type === 'fullsize' ||
+    resourceList.get(resourceId)?.type === ResourceCacheEntryType.Fullsize ||
     isCurrentResourceProcessing(resourceId) ||
     isCurrentResourceUploading(resourceId)
   ) {
@@ -75,10 +78,10 @@ function ImageDisplay({
   initialSrc = getProxiedUrl(resource, initialSrc);
 
   const [srcType, setSrcType] = useState(initialSrcType);
-  const [src, setSrc] = useState(initialSrc);
+  const [src, setSrc] = useState<string | null>(initialSrc);
   const srcSet = srcType === 'fullsize' ? calculateSrcSet(resource) : '';
 
-  const imgProps = getMediaSizePositionProps(
+  const imgProps: HTMLProps<HTMLImageElement> = getMediaSizePositionProps(
     resource,
     width,
     height,
@@ -90,23 +93,32 @@ function ImageDisplay({
   imgProps.crossOrigin = 'anonymous';
 
   useEffect(() => {
-    let timeout;
+    let timeout: number;
     let mounted = true;
-    if (resourceList.get(resourceId)?.type !== 'fullsize' && resource.src) {
-      timeout = setTimeout(async () => {
-        const url = getProxiedUrl(resource, resource.src);
-        try {
-          const preloadedImg = await preloadImage({ src: url, srcset: srcSet });
-          if (mounted) {
-            resourceList.set(resource.id, {
-              type: 'fullsize',
+    if (
+      resourceList.get(resourceId)?.type !== ResourceCacheEntryType.Fullsize &&
+      resource.src
+    ) {
+      timeout = window.setTimeout(() => {
+        void (async () => {
+          const url: string = getProxiedUrl(resource, resource.src) as string;
+          try {
+            const preloadedImg = await preloadImage({
+              src: url,
+              srcset: srcSet || undefined,
             });
-            setSrc(preloadedImg.currentSrc);
-            setSrcType('fullsize');
+            if (mounted) {
+              resourceList.set(resource.id, {
+                type: ResourceCacheEntryType.Fullsize,
+                url,
+              });
+              setSrc(preloadedImg.currentSrc);
+              setSrcType(ResourceCacheEntryType.Fullsize);
+            }
+          } catch {
+            // Ignore
           }
-        } catch {
-          // Ignore
-        }
+        })();
       });
     } else {
       setSrc(getProxiedUrl(resource, resource.src));
@@ -120,19 +132,20 @@ function ImageDisplay({
   const showPlaceholder = srcType !== 'fullsize' || resource.isPlaceholder;
 
   return (
-    <MediaDisplay
+    <MediaDisplay<ImageElement>
       element={element}
       mediaRef={ref}
       showPlaceholder={showPlaceholder}
       previewMode={previewMode}
       renderResourcePlaceholder={renderResourcePlaceholder}
     >
-      <Img
+      <Image
+        // @ts-expect-error TODO: Investigate.
         ref={ref}
         draggable={false}
         decoding="sync"
-        src={src}
-        srcSet={srcSet}
+        src={src || undefined}
+        srcSet={srcSet || undefined}
         alt={alt}
         data-testid="imageElement"
         data-leaf-element="true"
@@ -142,14 +155,4 @@ function ImageDisplay({
   );
 }
 
-ImageDisplay.propTypes = {
-  element: StoryPropTypes.elements.image.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  previewMode: PropTypes.bool,
-  getProxiedUrl: PropTypes.func.isRequired,
-  isCurrentResourceProcessing: PropTypes.func,
-  isCurrentResourceUploading: PropTypes.func,
-  renderResourcePlaceholder: PropTypes.func,
-};
-
 export default ImageDisplay;
diff --git a/packages/element-library/src/media/index.js b/packages/element-library/src/media/index.ts
similarity index 100%
rename from packages/element-library/src/media/index.js
rename to packages/element-library/src/media/index.ts
diff --git a/packages/element-library/src/media/output.js b/packages/element-library/src/media/output.tsx
similarity index 80%
rename from packages/element-library/src/media/output.js
rename to packages/element-library/src/media/output.tsx
index 4494ffee7b00..ac2c4388cbf1 100644
--- a/packages/element-library/src/media/output.js
+++ b/packages/element-library/src/media/output.tsx
@@ -17,27 +17,37 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import {
   PAGE_WIDTH,
   PAGE_HEIGHT,
   editorPixels,
+  type ElementBox,
 } from '@googleforcreators/units';
 import { getMediaSizePositionProps } from '@googleforcreators/media';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type {
+  ImageElement,
+  SequenceMediaElement,
+} from '@googleforcreators/elements';
+import type { CSSProperties, ReactNode } from 'react';
+
+interface MediaOutputProps {
+  element: SequenceMediaElement | ImageElement;
+  box: ElementBox;
+  children: ReactNode;
+  'data-leaf-element': 'true';
+}
 
 /**
  * Returns AMP HTML for saving into post content for displaying in the FE.
  *
- * @param {Object<*>} props Props.
- * @return {*} Rendered component.
+ * @return Rendered component.
  */
 function MediaOutput({
   element: { resource, scale, focalX, focalY },
   box: { width: vw, height: vh },
   children,
   ...props
-}) {
+}: MediaOutputProps) {
   // Width and height are taken from the basis of 100% taking into account the
   // aspect ratio.
   const width = vw;
@@ -51,7 +61,7 @@ function MediaOutput({
     focalY
   );
 
-  const wrapperStyle = {
+  const wrapperStyle: CSSProperties = {
     position: 'absolute',
     width: `${editorPixels((mediaProps.width / width) * 100)}%`,
     height: `${editorPixels((mediaProps.height / height) * 100)}%`,
@@ -66,10 +76,4 @@ function MediaOutput({
   );
 }
 
-MediaOutput.propTypes = {
-  element: StoryPropTypes.elements.media.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
 export default MediaOutput;
diff --git a/packages/element-library/src/media/scalePanel.js b/packages/element-library/src/media/scalePanel.tsx
similarity index 66%
rename from packages/element-library/src/media/scalePanel.js
rename to packages/element-library/src/media/scalePanel.tsx
index 5fd9252bdb55..fbaaa0c72a44 100644
--- a/packages/element-library/src/media/scalePanel.js
+++ b/packages/element-library/src/media/scalePanel.tsx
@@ -17,23 +17,28 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { _x } from '@googleforcreators/i18n';
 import { Slider } from '@googleforcreators/design-system';
 import { InOverlay } from '@googleforcreators/moveable';
+import type { MediaElement } from '@googleforcreators/elements';
 
 const MIN_WIDTH = 165;
 const HEIGHT = 36;
 const OFFSET_Y = 8;
 const HORIZONTAL_PADDING = 8;
 
-const Container = styled.div`
+const Container = styled.div<{
+  $x: number;
+  $y: number;
+  $width: number;
+  $height: number;
+}>`
   position: absolute;
-  left: ${({ x, width }) =>
-    `${x + (width - Math.max(width, MIN_WIDTH)) / 2}px`};
-  top: ${({ y, height }) => `${y + height + OFFSET_Y}px`};
-  width: ${({ width }) => `${Math.max(width, MIN_WIDTH)}px`};
+  left: ${({ $x, $width }) =>
+    `${$x + ($width - Math.max($width, MIN_WIDTH)) / 2}px`};
+  top: ${({ $y, $height }) => `${$y + $height + OFFSET_Y}px`};
+  width: ${({ $width }) => `${Math.max($width, MIN_WIDTH)}px`};
   height: ${HEIGHT}px;
   background: ${({ theme }) => theme.colors.bg.primary};
   border-radius: 8px;
@@ -41,12 +46,24 @@ const Container = styled.div`
   margin-top: 8px;
 `;
 
-const ScaleSlider = styled(Slider)`
+const ScaleSlider = styled(Slider)<{ width: number }>`
   width: ${({ width }) =>
     Math.max(width, MIN_WIDTH) - 2 * HORIZONTAL_PADDING}px;
 `;
 
-function ScalePanel({
+interface ScalePanelProps<T> {
+  setProperties: (properties: Partial<T>) => void;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  scale: number;
+  zIndexCanvas: Record<string, number>;
+  min?: number;
+  max?: number;
+}
+
+function ScalePanel<T extends MediaElement = MediaElement>({
   setProperties,
   width,
   height,
@@ -55,10 +72,10 @@ function ScalePanel({
   scale,
   zIndexCanvas,
   ...rest
-}) {
+}: ScalePanelProps<T>) {
   return (
     <InOverlay zIndex={zIndexCanvas.FLOAT_PANEL} pointerEvents="initial">
-      <Container x={x} y={y} width={width} height={height}>
+      <Container $x={x} $y={y} $width={width} $height={height}>
         {/*
           @todo: Should maxScale depend on the maximum resolution? Or should that
           be left up to the helper errors? Both? In either case there'd be maximum
@@ -69,7 +86,9 @@ function ScalePanel({
           majorStep={10}
           minorStep={1}
           value={scale}
-          handleChange={(value) => setProperties({ scale: value })}
+          handleChange={(value: number) =>
+            setProperties({ scale: value } as Partial<T>)
+          }
           thumbSize={24}
           suffix={_x('%', 'Percentage', 'web-stories')}
           {...rest}
@@ -79,14 +98,4 @@ function ScalePanel({
   );
 }
 
-ScalePanel.propTypes = {
-  setProperties: PropTypes.func.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  scale: PropTypes.number.isRequired,
-  zIndexCanvas: PropTypes.object,
-};
-
 export default ScalePanel;
diff --git a/packages/element-library/src/media/textContent.ts b/packages/element-library/src/media/textContent.ts
new file mode 100644
index 000000000000..ba496ccc8cbc
--- /dev/null
+++ b/packages/element-library/src/media/textContent.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { type MediaElement } from '@googleforcreators/elements';
+
+function TextContent({ resource }: MediaElement) {
+  return `image: ${resource.src}`;
+}
+
+export default TextContent;
diff --git a/packages/element-library/src/media/util.js b/packages/element-library/src/media/util.ts
similarity index 83%
rename from packages/element-library/src/media/util.js
rename to packages/element-library/src/media/util.ts
index 76626cd84c21..941d5e8d4988 100644
--- a/packages/element-library/src/media/util.js
+++ b/packages/element-library/src/media/util.ts
@@ -19,21 +19,41 @@
  */
 import styled, { css } from 'styled-components';
 
-export const mediaWithScale = css`
+export const mediaWithScale = css<{
+  width: number;
+  height: number;
+  offsetX: number;
+  offsetY: number;
+}>`
   width: ${({ width }) => `${width}px`};
   height: ${({ height }) => `${height}px`};
   left: ${({ offsetX }) => `${-offsetX}px`};
   top: ${({ offsetY }) => `${-offsetY}px`};
 `;
 
-const videoWithScale = css`
+const videoWithScale = css<{
+  width: number;
+  offsetX: number;
+  offsetY: number;
+  isBackground?: boolean;
+}>`
   width: ${({ width }) => `${width}px`};
   left: ${({ offsetX }) => `${-offsetX}px`};
   top: ${({ offsetY }) => `${-offsetY}px`};
   max-width: ${({ isBackground }) => (isBackground ? 'initial' : null)};
 `;
 
-export function getMediaWithScaleCss({ width, height, offsetX, offsetY }) {
+export function getMediaWithScaleCss({
+  width,
+  height,
+  offsetX,
+  offsetY,
+}: {
+  width: number;
+  height: number;
+  offsetX: number;
+  offsetY: number;
+}) {
   // @todo: This is a complete duplication of `mediaWithScale` above. But
   // no other apparent way to execute interpolate `mediaWithScale` dynamically.
   return `width:${width}px; height:${height}px; left:${-offsetX}px; top:${-offsetY}px;`;
diff --git a/packages/element-library/src/media/videoImage.js b/packages/element-library/src/media/videoImage.tsx
similarity index 85%
rename from packages/element-library/src/media/videoImage.js
rename to packages/element-library/src/media/videoImage.tsx
index 895b2aa2371c..7fc9a64f74bf 100644
--- a/packages/element-library/src/media/videoImage.js
+++ b/packages/element-library/src/media/videoImage.tsx
@@ -18,7 +18,6 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
 
 const Video = styled.video`
   display: block;
@@ -28,13 +27,14 @@ const Video = styled.video`
   object-fit: cover;
 `;
 
-function VideoImage({ alt, ...attrs }) {
+function VideoImage({ alt, ...attrs }: { src: string; alt: string }) {
   return (
     <Video
       controls={false}
       crossOrigin="anonymous"
       disablePictureInPicture
       muted
+      // @ts-expect-error TODO: Is this actually legit?
       noControls
       title={alt}
       {...attrs}
@@ -42,9 +42,4 @@ function VideoImage({ alt, ...attrs }) {
   );
 }
 
-VideoImage.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
-
 export default VideoImage;
diff --git a/packages/element-library/src/product/constants.js b/packages/element-library/src/product/constants.ts
similarity index 96%
rename from packages/element-library/src/product/constants.js
rename to packages/element-library/src/product/constants.ts
index c8e6ecccb3f3..6b717bb9eea3 100644
--- a/packages/element-library/src/product/constants.js
+++ b/packages/element-library/src/product/constants.ts
@@ -22,7 +22,7 @@ import { PanelTypes } from '@googleforcreators/design-system';
 /**
  * Internal dependencies
  */
-import { SHARED_DEFAULT_ATTRIBUTES } from '../shared/constants';
+import { SHARED_DEFAULT_ATTRIBUTES } from '../shared';
 
 const defaultBackgroundColor = createSolidFromString('#c4c4c4');
 
diff --git a/packages/element-library/src/product/display.js b/packages/element-library/src/product/display.tsx
similarity index 87%
rename from packages/element-library/src/product/display.js
rename to packages/element-library/src/product/display.tsx
index eef7a8ff5a0b..18bc2f8de27d 100644
--- a/packages/element-library/src/product/display.js
+++ b/packages/element-library/src/product/display.tsx
@@ -23,8 +23,11 @@ import {
   createSolid,
   generatePatternStyles,
 } from '@googleforcreators/patterns';
-import { StoryPropTypes } from '@googleforcreators/elements';
-import PropTypes from 'prop-types';
+import type {
+  Element,
+  ProductElement,
+  DisplayProps,
+} from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -145,26 +148,22 @@ const ShoppingTagDot = styled.div`
   }
 `;
 
-function ProductDisplay({ element, siblingCount }) {
-  const { id, width: elementWidth, height: elementHeight } = element;
+function ProductDisplay({
+  element,
+  siblingCount,
+}: DisplayProps<ProductElement>) {
+  const { id } = element;
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement | null>(null);
   useColorTransformHandler({ id, targetRef: ref });
 
   return (
-    <Element ref={ref} width={elementWidth} height={elementHeight}>
+    <Element ref={ref}>
       <ShoppingTagDot
         key={`dots-${siblingCount}`} /* see: https://github.com/GoogleForCreators/web-stories-wp/issues/11705 */
-        elementWidth={elementWidth}
-        elementHeight={elementHeight}
       />
     </Element>
   );
 }
 
-ProductDisplay.propTypes = {
-  element: StoryPropTypes.elements.shape.isRequired,
-  siblingCount: PropTypes.number,
-};
-
 export default ProductDisplay;
diff --git a/packages/element-library/src/product/icon.js b/packages/element-library/src/product/icon.tsx
similarity index 84%
rename from packages/element-library/src/product/icon.js
rename to packages/element-library/src/product/icon.tsx
index 3fa2c6c4f803..7b1cc09434f9 100644
--- a/packages/element-library/src/product/icon.js
+++ b/packages/element-library/src/product/icon.tsx
@@ -17,15 +17,20 @@
 /**
  * External dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
 import { Icons } from '@googleforcreators/design-system';
+import type {
+  ProductElement,
+  LayerIconProps,
+} from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
  */
 import VisibleImage from '../shared/visibleImage';
 
-function ProductLayerIcon({ element: { product } }) {
+function ProductLayerIcon({
+  element: { product },
+}: LayerIconProps<ProductElement>) {
   const productImage = product?.productImages?.[0] || {};
   const { url, alt } = productImage;
   if (!url) {
@@ -34,8 +39,4 @@ function ProductLayerIcon({ element: { product } }) {
   return <VisibleImage src={url} alt={alt} height={21} width={21} />;
 }
 
-ProductLayerIcon.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-};
-
 export default ProductLayerIcon;
diff --git a/packages/element-library/src/product/index.js b/packages/element-library/src/product/index.ts
similarity index 100%
rename from packages/element-library/src/product/index.js
rename to packages/element-library/src/product/index.ts
diff --git a/packages/element-library/src/product/layer.js b/packages/element-library/src/product/layer.tsx
similarity index 86%
rename from packages/element-library/src/product/layer.js
rename to packages/element-library/src/product/layer.tsx
index 545f876a1c22..63dd114cf1af 100644
--- a/packages/element-library/src/product/layer.js
+++ b/packages/element-library/src/product/layer.tsx
@@ -18,8 +18,9 @@
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
+import type { ProductElement } from '@googleforcreators/elements';
 
-function getProductLayerText(element) {
+function getProductLayerText(element: ProductElement) {
   return element?.product?.productTitle || __('Product', 'web-stories');
 }
 
diff --git a/packages/element-library/src/product/output.js b/packages/element-library/src/product/output.tsx
similarity index 77%
rename from packages/element-library/src/product/output.js
rename to packages/element-library/src/product/output.tsx
index 8fb57502a645..a353e6e9f99f 100644
--- a/packages/element-library/src/product/output.js
+++ b/packages/element-library/src/product/output.tsx
@@ -17,15 +17,15 @@
 /**
  * External dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { ProductElement, OutputProps } from '@googleforcreators/elements';
 
 /**
  * Returns AMP HTML for saving into post content for displaying in the FE.
  *
- * @param {Object<*>} props Props.
- * @return {*} Rendered component.
+ * @param props Props.
+ * @return Rendered component.
  */
-function ProductOutput({ element }) {
+function ProductOutput({ element }: OutputProps<ProductElement>) {
   const { product } = element;
 
   if (!product?.productId) {
@@ -35,8 +35,4 @@ function ProductOutput({ element }) {
   return <amp-story-shopping-tag data-product-id={product.productId} />;
 }
 
-ProductOutput.propTypes = {
-  element: StoryPropTypes.elements.product.isRequired,
-};
-
 export default ProductOutput;
diff --git a/packages/element-library/src/shape/constants.js b/packages/element-library/src/shape/constants.ts
similarity index 98%
rename from packages/element-library/src/shape/constants.js
rename to packages/element-library/src/shape/constants.ts
index 5e40a707877e..40544c93b817 100644
--- a/packages/element-library/src/shape/constants.js
+++ b/packages/element-library/src/shape/constants.ts
@@ -57,7 +57,6 @@ export const resizeRules = {
 };
 
 export const panels = [
-  PanelTypes.COLOR_PRESETS,
   PanelTypes.ElementAlignment,
   PanelTypes.SizePosition,
   PanelTypes.Border,
diff --git a/packages/element-library/src/shape/display.js b/packages/element-library/src/shape/display.tsx
similarity index 81%
rename from packages/element-library/src/shape/display.js
rename to packages/element-library/src/shape/display.tsx
index cb70f5035909..c78f9905b69f 100644
--- a/packages/element-library/src/shape/display.js
+++ b/packages/element-library/src/shape/display.tsx
@@ -19,14 +19,13 @@
  */
 import styled from 'styled-components';
 import { useRef } from '@googleforcreators/react';
-import PropTypes from 'prop-types';
 import { useUnits } from '@googleforcreators/units';
 import { useTransformHandler } from '@googleforcreators/transform';
 import {
   getResponsiveBorder,
   shouldDisplayBorder,
 } from '@googleforcreators/masks';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { ShapeElement, DisplayProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -38,13 +37,25 @@ import {
   useColorTransformHandler,
 } from '../shared';
 
-const Element = styled.div`
+const Element = styled.div<
+  Partial<
+    Pick<
+      ShapeElement,
+      | 'border'
+      | 'borderRadius'
+      | 'width'
+      | 'height'
+      | 'mask'
+      | 'backgroundColor'
+    >
+  >
+>`
   ${elementFillContent}
   ${elementWithBackgroundColor}
   ${elementWithBorder}
 `;
 
-function ShapeDisplay({ element, previewMode }) {
+function ShapeDisplay({ element, previewMode }: DisplayProps<ShapeElement>) {
   const {
     id,
     isDefaultBackground,
@@ -60,7 +71,7 @@ function ShapeDisplay({ element, previewMode }) {
     dataToEditorX: state.actions.dataToEditorX,
   }));
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
   useColorTransformHandler({ id, targetRef: ref });
 
   useTransformHandler(id, (transform) => {
@@ -72,9 +83,10 @@ function ShapeDisplay({ element, previewMode }) {
         if (resize && resize[0] !== 0 && resize[1] !== 0) {
           const [width, height] = resize;
           if (shouldDisplayBorder(element)) {
-            ref.current.style.width = width + border.left + border.right + 'px';
+            ref.current.style.width =
+              width + (border?.left || 0) + (border?.right || 0) + 'px';
             ref.current.style.height =
-              height + border.top + border.bottom + 'px';
+              height + (border?.top || 0) + (border?.bottom || 0) + 'px';
           }
         }
       } else {
@@ -101,9 +113,4 @@ function ShapeDisplay({ element, previewMode }) {
   );
 }
 
-ShapeDisplay.propTypes = {
-  element: StoryPropTypes.elements.shape.isRequired,
-  previewMode: PropTypes.bool,
-};
-
 export default ShapeDisplay;
diff --git a/packages/element-library/src/shape/icon.js b/packages/element-library/src/shape/icon.tsx
similarity index 74%
rename from packages/element-library/src/shape/icon.js
rename to packages/element-library/src/shape/icon.tsx
index e3d1b511a6df..a9b0ddd43c91 100644
--- a/packages/element-library/src/shape/icon.js
+++ b/packages/element-library/src/shape/icon.tsx
@@ -19,9 +19,11 @@
  */
 import styled from 'styled-components';
 import { getMaskByType } from '@googleforcreators/masks';
-import PropTypes from 'prop-types';
-import { StoryPropTypes } from '@googleforcreators/elements';
-import { generatePatternStyles } from '@googleforcreators/patterns';
+import type { ShapeElement, LayerIconProps } from '@googleforcreators/elements';
+import {
+  generatePatternStyles,
+  type Pattern,
+} from '@googleforcreators/patterns';
 
 const Container = styled.div`
   display: flex;
@@ -35,15 +37,17 @@ const Container = styled.div`
   background-color: ${({ theme }) => theme.colors.opacity.black10};
 `;
 
-const ShapePreview = styled.div.attrs(({ backgroundColor }) => ({
-  // Prevents `ShapePreview` class from being generated with each new layer.
-  // https://styled-components.com/docs/faqs#when-to-use-attrs
-  style: generatePatternStyles(backgroundColor),
-}))`
+const ShapePreview = styled.div.attrs(
+  ({ $backgroundColor }: { $backgroundColor: Pattern | undefined }) => ({
+    // Prevents `ShapePreview` class from being generated with each new layer.
+    // https://styled-components.com/docs/faqs#when-to-use-attrs
+    style: generatePatternStyles($backgroundColor),
+  })
+)<{ $maskId: string; $backgroundColor: Pattern | undefined }>`
   width: 100%;
   height: 100%;
   margin: 1px;
-  clip-path: ${({ maskId }) => `url(#${maskId})`};
+  clip-path: ${({ $maskId }) => `url(#${$maskId})`};
 `;
 
 /*
@@ -58,8 +62,8 @@ https://caniuse.com/css-clip-path
 function ShapeLayerIcon({
   element: { id, mask, backgroundColor, isDefaultBackground },
   currentPageBackgroundColor,
-}) {
-  const maskDef = getMaskByType(mask.type);
+}: LayerIconProps<ShapeElement>) {
+  const maskDef = getMaskByType(mask?.type);
 
   const maskId = `mask-${maskDef.type}-${id}-layer-preview`;
   if (isDefaultBackground) {
@@ -68,7 +72,7 @@ function ShapeLayerIcon({
 
   return (
     <Container>
-      <ShapePreview maskId={maskId} backgroundColor={backgroundColor}>
+      <ShapePreview $maskId={maskId} $backgroundColor={backgroundColor}>
         <svg width={0} height={0}>
           <defs>
             <clipPath
@@ -88,12 +92,4 @@ function ShapeLayerIcon({
   );
 }
 
-ShapeLayerIcon.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-  currentPageBackgroundColor: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.bool,
-  ]),
-};
-
 export default ShapeLayerIcon;
diff --git a/packages/element-library/src/shape/index.js b/packages/element-library/src/shape/index.ts
similarity index 100%
rename from packages/element-library/src/shape/index.js
rename to packages/element-library/src/shape/index.ts
diff --git a/packages/element-library/src/shape/layer.js b/packages/element-library/src/shape/layer.ts
similarity index 77%
rename from packages/element-library/src/shape/layer.js
rename to packages/element-library/src/shape/layer.ts
index d05e384416e6..1e7cf903b674 100644
--- a/packages/element-library/src/shape/layer.js
+++ b/packages/element-library/src/shape/layer.ts
@@ -18,10 +18,11 @@
  */
 import { __ } from '@googleforcreators/i18n';
 import { getMaskByType } from '@googleforcreators/masks';
+import type { ShapeElement } from '@googleforcreators/elements';
 
-function getShapeLayerText(element) {
-  const maskDef = getMaskByType(element.mask.type);
-  return maskDef.name || __('Shape', 'web-stories');
+function getShapeLayerText(element: ShapeElement) {
+  const maskDef = getMaskByType(element.mask?.type).name;
+  return maskDef || __('Shape', 'web-stories');
 }
 
 export default getShapeLayerText;
diff --git a/packages/element-library/src/shape/output.js b/packages/element-library/src/shape/output.tsx
similarity index 80%
rename from packages/element-library/src/shape/output.js
rename to packages/element-library/src/shape/output.tsx
index 83aa737c31d3..e43921b3ba79 100644
--- a/packages/element-library/src/shape/output.js
+++ b/packages/element-library/src/shape/output.tsx
@@ -18,15 +18,17 @@
  * External dependencies
  */
 import { generatePatternStyles } from '@googleforcreators/patterns';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { ShapeElement, OutputProps } from '@googleforcreators/elements';
 
 /**
  * Returns AMP HTML for saving into post content for displaying in the FE.
  *
- * @param {Object<*>} props Props.
- * @return {*} Rendered component.
+ * @param props Props.
+ * @return Rendered component.
  */
-function ShapeOutput({ element: { backgroundColor, isDefaultBackground } }) {
+function ShapeOutput({
+  element: { backgroundColor, isDefaultBackground },
+}: OutputProps<ShapeElement>) {
   const style = isDefaultBackground
     ? null
     : generatePatternStyles(backgroundColor);
@@ -35,8 +37,4 @@ function ShapeOutput({ element: { backgroundColor, isDefaultBackground } }) {
   return <div className="fill" style={{ ...style, willChange: 'transform' }} />;
 }
 
-ShapeOutput.propTypes = {
-  element: StoryPropTypes.elements.shape.isRequired,
-};
-
 export default ShapeOutput;
diff --git a/packages/element-library/src/shared/constants.js b/packages/element-library/src/shared/constants.ts
similarity index 100%
rename from packages/element-library/src/shared/constants.js
rename to packages/element-library/src/shared/constants.ts
diff --git a/packages/element-library/src/shared/index.js b/packages/element-library/src/shared/index.ts
similarity index 100%
rename from packages/element-library/src/shared/index.js
rename to packages/element-library/src/shared/index.ts
diff --git a/packages/element-library/src/shared/shared.js b/packages/element-library/src/shared/shared.ts
similarity index 66%
rename from packages/element-library/src/shared/shared.js
rename to packages/element-library/src/shared/shared.ts
index 286feb944ac6..947924f98e47 100644
--- a/packages/element-library/src/shared/shared.js
+++ b/packages/element-library/src/shared/shared.ts
@@ -18,8 +18,16 @@
  * External dependencies
  */
 import { css } from 'styled-components';
-import { generatePatternStyles } from '@googleforcreators/patterns';
+import {
+  generatePatternStyles,
+  type Pattern,
+} from '@googleforcreators/patterns';
 import { getBorderStyle, getBorderRadius } from '@googleforcreators/masks';
+import type {
+  BorderRadius,
+  Element,
+  TextElementFont,
+} from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -34,7 +42,7 @@ export const elementFillContent = css`
   height: 100%;
 `;
 
-export const elementWithPosition = css`
+export const elementWithPosition = css<Element>`
   position: absolute;
   z-index: 1;
   left: ${({ x }) => `${x}px`};
@@ -42,22 +50,27 @@ export const elementWithPosition = css`
 `;
 
 // TODO: removed round/ceil, calculateFitTextFontSize needs to be improved?
-export const elementWithSize = css`
+export const elementWithSize = css<{ width: number; height: number }>`
   width: ${({ width }) => `${width}px`};
   height: ${({ height }) => `${height}px`};
 `;
 
-export const elementWithRotation = css`
+export const elementWithRotation = css<{ rotationAngle: number }>`
   transform: ${({ rotationAngle }) => `rotate(${rotationAngle}deg)`};
 `;
 
-export const elementWithBorderRadius = css`
-  ${(props) => getBorderRadius(props)}
+export const elementWithBorderRadius = css<Element>`
+  ${(element) => getBorderRadius(element)}
 `;
 
+type DataToStyle = (prop: number) => string | number;
+
 export const elementWithHighlightBorderRadius = ({
   borderRadius,
   dataToEditorY,
+}: {
+  borderRadius?: BorderRadius;
+  dataToEditorY?: DataToStyle;
 }) =>
   dataToEditorY &&
   css`
@@ -67,7 +80,11 @@ export const elementWithHighlightBorderRadius = ({
       ${dataToEditorY(borderRadius?.bottomLeft || 0)}px;
   `;
 
-export const elementWithBorder = css`
+export const elementWithBorder = css<
+  Partial<
+    Pick<Element, 'border' | 'borderRadius' | 'width' | 'height' | 'mask'>
+  >
+>`
   ${({ border, borderRadius, width, height, mask }) =>
     getBorderStyle({
       border,
@@ -75,16 +92,23 @@ export const elementWithBorder = css`
       width,
       height,
       mask,
-    })}
+    } as Element)}
   background-clip: padding-box;
 `;
 
-export const elementWithBackgroundColor = css`
+export const elementWithBackgroundColor = css<{
+  backgroundColor?: Pattern;
+}>`
   ${({ backgroundColor }) =>
     backgroundColor && generatePatternStyles(backgroundColor)};
 `;
 
-export const elementWithFont = css`
+export const elementWithFont = css<{
+  font: TextElementFont;
+  fontStyle?: string;
+  fontSize: string | number;
+  fontWeight?: string | number;
+}>`
   white-space: pre-line;
   font-family: ${({ font }) => generateFontFamily(font)};
   overflow-wrap: break-word;
@@ -97,7 +121,12 @@ export const elementWithFont = css`
 `;
 
 // See generateParagraphTextStyle for the full set of properties.
-export const elementWithTextParagraphStyle = css`
+export const elementWithTextParagraphStyle = css<{
+  margin?: number | string;
+  padding?: number | string;
+  lineHeight?: number | string;
+  textAlign?: string;
+}>`
   margin: ${({ margin }) => margin};
   padding: ${({ padding }) => padding || 0};
   line-height: ${({ lineHeight }) => lineHeight};
@@ -105,6 +134,8 @@ export const elementWithTextParagraphStyle = css`
   overflow-wrap: break-word;
 `;
 
-export const elementWithFlip = css`
-  transform: ${({ transformFlip }) => transformFlip};
+export const elementWithFlip = css<{
+  $transformFlip?: string | null;
+}>`
+  ${({ $transformFlip }) => $transformFlip && `transform: ${$transformFlip}`};
 `;
diff --git a/packages/element-library/src/shared/useCSSVarColorTransformHandler.js b/packages/element-library/src/shared/useCSSVarColorTransformHandler.ts
similarity index 82%
rename from packages/element-library/src/shared/useCSSVarColorTransformHandler.js
rename to packages/element-library/src/shared/useCSSVarColorTransformHandler.ts
index f430cbb7e2c8..909c9246cdbd 100644
--- a/packages/element-library/src/shared/useCSSVarColorTransformHandler.js
+++ b/packages/element-library/src/shared/useCSSVarColorTransformHandler.ts
@@ -13,16 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
+import type { ElementId } from '@googleforcreators/elements';
 import { useTransformHandler } from '@googleforcreators/transform';
+import type { RefObject } from 'react';
+import type { Solid } from '@googleforcreators/patterns';
 
 function useCSSVarColorTransformHandler({
   id,
   targetRef,
   cssVar,
   expectedStyle,
+}: {
+  id: ElementId;
+  targetRef: RefObject<HTMLElement>;
+  cssVar: string;
+  expectedStyle: string;
 }) {
   useTransformHandler(id, (transform) => {
     const target = targetRef.current;
@@ -34,7 +43,7 @@ function useCSSVarColorTransformHandler({
         if (color && style === expectedStyle) {
           const {
             color: { r, g, b, a },
-          } = color;
+          } = color as Solid;
           target.style.setProperty(
             cssVar,
             `rgba(${r}, ${g}, ${b}, ${a !== undefined ? a : 1})`
diff --git a/packages/element-library/src/shared/useColorTransformHandler.js b/packages/element-library/src/shared/useColorTransformHandler.ts
similarity index 75%
rename from packages/element-library/src/shared/useColorTransformHandler.js
rename to packages/element-library/src/shared/useColorTransformHandler.ts
index b57b7b6f725a..78aa210f7053 100644
--- a/packages/element-library/src/shared/useColorTransformHandler.js
+++ b/packages/element-library/src/shared/useColorTransformHandler.ts
@@ -20,17 +20,26 @@
 import {
   generatePatternStyles,
   convertToCSS,
+  type Solid,
 } from '@googleforcreators/patterns';
 import { useTransformHandler } from '@googleforcreators/transform';
+import type { ElementId } from '@googleforcreators/elements';
+import type { RefObject } from 'react';
 
 function useColorTransformHandler({
   id,
   targetRef,
   expectedStyle,
   resetOnNullTransform = true,
+}: {
+  id: ElementId;
+  targetRef: RefObject<HTMLElement | null> | null;
+  expectedStyle?: string;
+  resetOnNullTransform?: boolean;
 }) {
   useTransformHandler(id, (transform) => {
-    const target =
+    // @ts-expect-error -- Can only be an HTMLElement or null.
+    const target: HTMLElement | null =
       undefined !== targetRef?.current ? targetRef.current : targetRef;
     if (target) {
       if (transform === null) {
@@ -46,13 +55,15 @@ function useColorTransformHandler({
         if (color && style) {
           // In case we're changing text color, we need the children instead of the element itself.
           if ('color' === style && target.children?.length > 0) {
-            const toApply = convertToCSS(generatePatternStyles(color, style));
+            const toApply = convertToCSS(
+              generatePatternStyles(color as Solid, style)
+            );
             for (const node of target.children) {
-              node.style.cssText = toApply;
+              (node as HTMLElement).style.cssText = toApply;
             }
           } else {
             target.style.cssText = convertToCSS(
-              generatePatternStyles(color, style)
+              generatePatternStyles(color as Solid, style)
             );
           }
         }
diff --git a/packages/element-library/src/shared/visibleImage.js b/packages/element-library/src/shared/visibleImage.tsx
similarity index 76%
rename from packages/element-library/src/shared/visibleImage.js
rename to packages/element-library/src/shared/visibleImage.tsx
index 18899d58e231..fc7a71bebc32 100644
--- a/packages/element-library/src/shared/visibleImage.js
+++ b/packages/element-library/src/shared/visibleImage.tsx
@@ -18,7 +18,7 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
+import type { ImgHTMLAttributes } from 'react';
 
 const Image = styled.img`
   display: block;
@@ -28,17 +28,10 @@ const Image = styled.img`
   object-fit: cover;
 `;
 
-function VisibleImage({ ...attrs }) {
+function VisibleImage({ ...attrs }: ImgHTMLAttributes<HTMLImageElement>) {
   // The image is purely decorative by default, because the alt text is already used
-  // for the layer description. Hence using alt="" to avoid repetition.
+  // for the layer description. Hence, using alt="" to avoid repetition.
   return <Image alt="" {...attrs} decoding="async" crossOrigin="anonymous" />;
 }
 
-VisibleImage.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-};
-
 export default VisibleImage;
diff --git a/packages/element-library/src/sticker/constants.js b/packages/element-library/src/sticker/constants.ts
similarity index 100%
rename from packages/element-library/src/sticker/constants.js
rename to packages/element-library/src/sticker/constants.ts
diff --git a/packages/element-library/src/sticker/display.js b/packages/element-library/src/sticker/display.tsx
similarity index 80%
rename from packages/element-library/src/sticker/display.js
rename to packages/element-library/src/sticker/display.tsx
index a8992bf3f616..127659d68e03 100644
--- a/packages/element-library/src/sticker/display.js
+++ b/packages/element-library/src/sticker/display.tsx
@@ -18,9 +18,10 @@
  * External dependencies
  */
 import stickers from '@googleforcreators/stickers';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { StickerElement, DisplayProps } from '@googleforcreators/elements';
+import type { CSSProperties } from 'react';
 
-const style = {
+const style: CSSProperties = {
   display: 'block',
   position: 'absolute',
   top: 0,
@@ -30,14 +31,10 @@ const style = {
 
 const Noop = () => null;
 
-function StickerDisplay({ element }) {
+function StickerDisplay({ element }: DisplayProps<StickerElement>) {
   const { sticker } = element;
   const Sticker = stickers[sticker?.type]?.svg || Noop;
   return <Sticker style={style} />;
 }
 
-StickerDisplay.propTypes = {
-  element: StoryPropTypes.elements.sticker.isRequired,
-};
-
 export default StickerDisplay;
diff --git a/packages/element-library/src/sticker/icon.js b/packages/element-library/src/sticker/icon.tsx
similarity index 82%
rename from packages/element-library/src/sticker/icon.js
rename to packages/element-library/src/sticker/icon.tsx
index 1043e4bc9ae2..bab7d637fbdd 100644
--- a/packages/element-library/src/sticker/icon.js
+++ b/packages/element-library/src/sticker/icon.tsx
@@ -18,7 +18,10 @@
  * External dependencies
  */
 import stickers from '@googleforcreators/stickers';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type {
+  StickerElement,
+  LayerIconProps,
+} from '@googleforcreators/elements';
 
 const style = {
   display: 'block',
@@ -28,15 +31,11 @@ const style = {
 
 const Noop = () => null;
 
-function StickerLayerIcon({ element }) {
+function StickerLayerIcon({ element }: LayerIconProps<StickerElement>) {
   const { sticker } = element;
   const Sticker = stickers[sticker.type]?.svg || Noop;
 
   return <Sticker style={style} />;
 }
 
-StickerLayerIcon.propTypes = {
-  element: StoryPropTypes.elements.sticker.isRequired,
-};
-
 export default StickerLayerIcon;
diff --git a/packages/element-library/src/sticker/index.js b/packages/element-library/src/sticker/index.ts
similarity index 100%
rename from packages/element-library/src/sticker/index.js
rename to packages/element-library/src/sticker/index.ts
diff --git a/packages/element-library/src/sticker/layer.js b/packages/element-library/src/sticker/layer.ts
similarity index 87%
rename from packages/element-library/src/sticker/layer.js
rename to packages/element-library/src/sticker/layer.ts
index 62de6059f83d..5821bb58d41d 100644
--- a/packages/element-library/src/sticker/layer.js
+++ b/packages/element-library/src/sticker/layer.ts
@@ -13,13 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
 import stickers from '@googleforcreators/stickers';
+import type { StickerElement } from '@googleforcreators/elements';
 
-function getStickerLayerText(element) {
+function getStickerLayerText(element: StickerElement) {
   const { sticker } = element;
   return stickers[sticker?.type]?.title || __('Sticker', 'web-stories');
 }
diff --git a/packages/element-library/src/sticker/output.js b/packages/element-library/src/sticker/output.tsx
similarity index 81%
rename from packages/element-library/src/sticker/output.js
rename to packages/element-library/src/sticker/output.tsx
index a55a487319ae..f96e02b0f9b3 100644
--- a/packages/element-library/src/sticker/output.js
+++ b/packages/element-library/src/sticker/output.tsx
@@ -18,9 +18,10 @@
  * External dependencies
  */
 import stickers from '@googleforcreators/stickers';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { StickerElement, OutputProps } from '@googleforcreators/elements';
+import type { CSSProperties } from 'react';
 
-const style = {
+const style: CSSProperties = {
   display: 'block',
   position: 'absolute',
   top: 0,
@@ -30,14 +31,10 @@ const style = {
 
 const Noop = () => null;
 
-function StickerOutput({ element }) {
+function StickerOutput({ element }: OutputProps<StickerElement>) {
   const { sticker } = element;
   const Sticker = stickers[sticker.type]?.svg || Noop;
   return <Sticker className="fill" style={style} />;
 }
 
-StickerOutput.propTypes = {
-  element: StoryPropTypes.elements.sticker.isRequired,
-};
-
 export default StickerOutput;
diff --git a/packages/element-library/src/text/constants.js b/packages/element-library/src/text/constants.ts
similarity index 100%
rename from packages/element-library/src/text/constants.js
rename to packages/element-library/src/text/constants.ts
diff --git a/packages/element-library/src/text/display.js b/packages/element-library/src/text/display.tsx
similarity index 75%
rename from packages/element-library/src/text/display.js
rename to packages/element-library/src/text/display.tsx
index 1797073254fd..7c18118853d4 100644
--- a/packages/element-library/src/text/display.js
+++ b/packages/element-library/src/text/display.tsx
@@ -17,10 +17,9 @@
 /**
  * External dependencies
  */
-import styled from 'styled-components';
+import styled, { type DefaultTheme } from 'styled-components';
 import { useEffect, useRef, useMemo } from '@googleforcreators/react';
-import PropTypes from 'prop-types';
-import { createSolid } from '@googleforcreators/patterns';
+import { createSolid, type Solid } from '@googleforcreators/patterns';
 import { useUnits } from '@googleforcreators/units';
 import { useTransformHandler } from '@googleforcreators/transform';
 import { getHTMLFormatters, getHTMLInfo } from '@googleforcreators/rich-text';
@@ -30,9 +29,15 @@ import {
   shouldDisplayBorder,
 } from '@googleforcreators/masks';
 import {
-  StoryPropTypes,
+  type TextElement,
+  type TextElementFont,
+  type Element,
   BACKGROUND_TEXT_MODE,
+  type FontStyle,
+  type FontWeight,
+  type DisplayProps,
 } from '@googleforcreators/elements';
+import type { RefObject } from 'react';
 
 /**
  * Internal dependencies
@@ -47,24 +52,45 @@ import {
   useColorTransformHandler,
 } from '../shared';
 import {
-  getHighlightLineheight,
+  getHighlightLineHeight,
   generateParagraphTextStyle,
   calcFontMetrics,
   generateFontFamily,
 } from './util';
 
+interface WrapperProps {
+  element: TextElement;
+  marginOffset: number;
+  backgroundColor?: Solid;
+  horizontalPadding: number;
+  verticalPadding: number;
+  whiteSpace: string;
+  overflowWrap: string;
+  wordBreak: string;
+  margin: string;
+  padding: string | number;
+  color?: string;
+  fontFamily: string;
+  fontSize: number;
+  font: TextElementFont;
+  fontStyle?: string;
+  fontWeight?: number;
+  lineHeight: number;
+  textAlign: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+}
+
 const OutsideBorder = styled.div`
   ${elementWithBorder}
 `;
-const HighlightWrapperElement = styled.div`
+const HighlightWrapperElement = styled.div<WrapperProps>`
   ${elementFillContent}
   ${elementWithFont}
   ${elementWithTextParagraphStyle}
   line-height: ${({ lineHeight, verticalPadding }) =>
-    getHighlightLineheight(lineHeight, verticalPadding)};
+    getHighlightLineHeight(lineHeight, verticalPadding)};
   padding: 0;
 `;
-const HighlightElement = styled.p`
+const HighlightElement = styled.p<{ verticalPadding: number }>`
   font-size: inherit;
   line-height: inherit;
   margin: 0;
@@ -79,7 +105,12 @@ const MarginedElement = styled.span`
   left: 0;
 `;
 
-const Span = styled.span`
+const Span = styled.span<{
+  margin: number | string;
+  padding?: number | string;
+  lineHeight: number;
+  textAlign: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+}>`
   ${elementWithBackgroundColor}
   ${elementWithTextParagraphStyle}
 
@@ -88,8 +119,8 @@ const Span = styled.span`
 `;
 
 const BackgroundSpan = styled(Span)`
-  ${elementWithHighlightBorderRadius}
   color: transparent;
+  ${elementWithHighlightBorderRadius}
 `;
 
 const ForegroundSpan = styled(Span)`
@@ -110,6 +141,10 @@ const FillElement = styled.p.attrs(
     lineHeight,
     textAlign,
     dataToEditorY,
+  }: WrapperProps & {
+    previewMode: boolean;
+    theme: DefaultTheme;
+    dataToEditorY: (prop: number) => string | number;
   }) => {
     return previewMode
       ? {
@@ -131,14 +166,18 @@ const FillElement = styled.p.attrs(
         }
       : {};
   }
-)`
+)<WrapperProps & { previewMode: boolean }>`
   margin: 0;
   ${elementFillContent}
   ${({ previewMode }) => !previewMode && elementWithFont}
   ${({ previewMode }) => !previewMode && elementWithTextParagraphStyle}
 `;
 
-const Background = styled.div`
+const Background = styled.div<
+  Pick<Element, 'border' | 'borderRadius' | 'width' | 'height' | 'mask'> & {
+    backgroundColor?: Solid;
+  }
+>`
   ${elementWithBackgroundColor}
   ${elementFillContent}
   ${elementWithBorder}
@@ -158,11 +197,11 @@ function TextDisplay({
   },
   previewMode,
   maybeEnqueueFontStyle,
-}) {
-  const ref = useRef(null);
-  const outerBorderRef = useRef(null);
-  const bgRef = useRef(null);
-  const fgRef = useRef(null);
+}: DisplayProps<TextElement>) {
+  const ref = useRef<HTMLDivElement>(null);
+  const outerBorderRef = useRef<HTMLDivElement>(null);
+  const bgRef = useRef<HTMLSpanElement>(null);
+  const fgRef = useRef<HTMLElement>(null);
 
   const { dataToEditorX, dataToEditorY } = useUnits((state) => ({
     dataToEditorX: state.actions.dataToEditorX,
@@ -173,20 +212,20 @@ function TextDisplay({
   const fontFaceSetConfigs = useMemo(() => {
     const htmlInfo = getHTMLInfo(content);
     return {
-      fontStyle: htmlInfo.isItalic ? 'italic' : 'normal',
-      fontWeight: htmlInfo.fontWeight,
+      fontStyle: htmlInfo.isItalic ? 'italic' : ('normal' as FontStyle),
+      fontWeight: htmlInfo.fontWeight as FontWeight,
       content: stripHTML(content),
     };
   }, [content]);
 
   const { marginOffset } = calcFontMetrics(element);
   const props = {
-    font,
     element,
     marginOffset: dataToEditorY(marginOffset),
-    ...(backgroundTextMode === BACKGROUND_TEXT_MODE.NONE
-      ? {}
-      : { backgroundColor }),
+    backgroundColor:
+      backgroundTextMode === BACKGROUND_TEXT_MODE.NONE
+        ? undefined
+        : backgroundColor,
     ...generateParagraphTextStyle(
       rest,
       (x) => `${dataToEditorX(x)}px`,
@@ -198,7 +237,7 @@ function TextDisplay({
     verticalPadding: dataToEditorX(rest.padding?.vertical || 0),
   };
   useEffect(() => {
-    maybeEnqueueFontStyle([{ ...fontFaceSetConfigs, font }]);
+    void maybeEnqueueFontStyle([{ ...fontFaceSetConfigs, font }]);
   }, [font, fontFaceSetConfigs, maybeEnqueueFontStyle]);
 
   const isHighLight = backgroundTextMode === BACKGROUND_TEXT_MODE.HIGHLIGHT;
@@ -210,7 +249,7 @@ function TextDisplay({
     if (!target) {
       return;
     }
-    const updatedFontSize = transform?.updates?.fontSize;
+    const updatedFontSize = transform?.updates?.fontSize as number;
     target.style.fontSize = updatedFontSize
       ? `${dataToEditorY(updatedFontSize)}px`
       : '';
@@ -225,11 +264,11 @@ function TextDisplay({
         const { resize } = transform;
         if (resize && resize[0] !== 0 && resize[1] !== 0) {
           const [width, height] = resize;
-          if (shouldDisplayBorder(element)) {
+          if (shouldDisplayBorder(element) && refWithBorder.current) {
             refWithBorder.current.style.width =
-              width + border.left + border.right + 'px';
+              width + (border?.left || 0) + (border?.right || 0) + 'px';
             refWithBorder.current.style.height =
-              height + border.top + border.bottom + 'px';
+              height + (border?.top || 0) + (border?.bottom || 0) + 'px';
           }
         }
       }
@@ -298,9 +337,11 @@ function TextDisplay({
 
   return (
     <Background
-      ref={bgRef}
+      ref={bgRef as RefObject<HTMLDivElement>}
       backgroundColor={
-        backgroundTextMode === BACKGROUND_TEXT_MODE.FILL && backgroundColor
+        backgroundTextMode === BACKGROUND_TEXT_MODE.FILL
+          ? backgroundColor
+          : undefined
       }
       borderRadius={borderRadius}
       border={getResponsiveBorder(border, previewMode, dataToEditorX)}
@@ -308,7 +349,7 @@ function TextDisplay({
       height={elementHeight}
     >
       <FillElement
-        ref={fgRef}
+        ref={fgRef as RefObject<HTMLParagraphElement>}
         dangerouslySetInnerHTML={{
           __html: content,
         }}
@@ -318,12 +359,4 @@ function TextDisplay({
     </Background>
   );
 }
-
-TextDisplay.propTypes = {
-  element: StoryPropTypes.elements.text.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  previewMode: PropTypes.bool,
-  maybeEnqueueFontStyle: PropTypes.func,
-};
-
 export default TextDisplay;
diff --git a/packages/element-library/src/text/edit.js b/packages/element-library/src/text/edit.tsx
similarity index 68%
rename from packages/element-library/src/text/edit.js
rename to packages/element-library/src/text/edit.tsx
index 8f86e603eeee..0bc244101d52 100644
--- a/packages/element-library/src/text/edit.js
+++ b/packages/element-library/src/text/edit.tsx
@@ -26,9 +26,12 @@ import {
   useMemo,
   useUnmount,
 } from '@googleforcreators/react';
-import PropTypes from 'prop-types';
-import { generatePatternStyles } from '@googleforcreators/patterns';
-import { useUnits, calcRotatedResizeOffset } from '@googleforcreators/units';
+import { generatePatternStyles, type Solid } from '@googleforcreators/patterns';
+import {
+  useUnits,
+  calcRotatedResizeOffset,
+  type ElementBox,
+} from '@googleforcreators/units';
 import {
   useTransformHandler,
   useTransform,
@@ -41,9 +44,16 @@ import {
 import { stripHTML } from '@googleforcreators/dom';
 import { shouldDisplayBorder } from '@googleforcreators/masks';
 import {
-  StoryPropTypes,
   BACKGROUND_TEXT_MODE,
+  type Border,
+  type FontFamily,
+  type FontStyle,
+  type FontWeight,
+  type TextElement,
+  type TextElementFont,
+  type EditProps,
 } from '@googleforcreators/elements';
+import type { MouseEventHandler } from 'react';
 
 /**
  * Internal dependencies
@@ -61,9 +71,27 @@ import useColorTransformHandler from '../shared/useColorTransformHandler';
 import {
   calcFontMetrics,
   generateParagraphTextStyle,
-  getHighlightLineheight,
+  getHighlightLineHeight,
 } from './util';
 
+interface WrapperProps {
+  element: TextElement;
+  backgroundColor: Solid | null;
+  verticalPadding: number;
+  whiteSpace?: string;
+  overflowWrap?: string;
+  wordBreak?: string;
+  margin?: string;
+  fontFamily?: FontFamily;
+  fontSize: number;
+  font: TextElementFont;
+  lineHeight?: number | string;
+  textAlign?: string;
+  padding?: number | string;
+  opacity?: number;
+  highlightColor?: Solid;
+}
+
 // Wrapper bounds the text editor within the element bounds. The resize
 // logic updates the height of this element to show the new height based
 // on the content and properties.
@@ -79,7 +107,7 @@ const Wrapper = styled.div`
 // TextBox defines all text display properties and is used for measuring
 // of text height. This element has an unbounded height (bottom) so that
 // it can be used for height measurement.
-const TextBox = styled.div`
+const TextBox = styled.div<WrapperProps>`
   ${elementWithFont}
   ${elementWithTextParagraphStyle}
   opacity: ${({ opacity }) =>
@@ -90,19 +118,25 @@ const TextBox = styled.div`
   right: 0;
 `;
 
-const TextBoxPadded = styled(TextBox)(({ verticalPadding }) => ({
-  width: `calc(100% - ${verticalPadding}px)`,
-}));
+const TextBoxPadded = styled(TextBox)<{ verticalPadding: number }>(
+  ({ verticalPadding }) => ({
+    width: `calc(100% - ${verticalPadding}px)`,
+  })
+);
 
-const EditTextBox = styled(TextBox)(
-  ({ hasHighlightBackgroundTextMode }) =>
-    hasHighlightBackgroundTextMode && {
+const EditTextBox = styled(TextBox)<{
+  $hasHighlightBackgroundTextMode: boolean;
+}>(
+  ({ $hasHighlightBackgroundTextMode }) =>
+    $hasHighlightBackgroundTextMode && {
       paddingTop: 0,
       paddingBottom: 0,
     }
 );
 
-const Highlight = styled.span`
+const Highlight = styled.span<
+  WrapperProps & { dataToEditorY: (prop: number) => string | number }
+>`
   ${elementWithHighlightBorderRadius}
   ${({ highlightColor }) => generatePatternStyles(highlightColor)};
   color: transparent !important;
@@ -114,8 +148,8 @@ const Highlight = styled.span`
 `;
 
 const OutsideBorder = styled.div`
-  ${elementWithBorder}
   overflow: hidden;
+  ${elementWithBorder}
 `;
 
 function TextEdit({
@@ -126,7 +160,7 @@ function TextEdit({
   updateElementById,
   deleteSelectedElements,
   maybeEnqueueFontStyle,
-}) {
+}: EditProps<TextElement>) {
   const {
     id,
     content,
@@ -139,12 +173,12 @@ function TextEdit({
     ...rest
   } = element;
   const { font } = rest;
-  const { top = 0, bottom = 0, left = 0, right = 0 } = border || {};
+  const { top = 0, bottom = 0, left = 0, right = 0 } = (border || {}) as Border;
   const fontFaceSetConfigs = useMemo(() => {
     const htmlInfo = getHTMLInfo(content);
     return {
-      fontStyle: htmlInfo.isItalic ? 'italic' : 'normal',
-      fontWeight: htmlInfo.fontWeight,
+      fontStyle: htmlInfo.isItalic ? 'italic' : ('normal' as FontStyle),
+      fontWeight: htmlInfo.fontWeight as FontWeight,
       content: stripHTML(content),
     };
   }, [content]);
@@ -175,7 +209,7 @@ function TextEdit({
     opacity,
     verticalPadding: dataToEditorX(rest.padding?.vertical || 0),
     ...(backgroundTextMode === BACKGROUND_TEXT_MODE.HIGHLIGHT && {
-      lineHeight: getHighlightLineheight(
+      lineHeight: getHighlightLineHeight(
         rest.lineHeight,
         dataToEditorX(rest.padding?.vertical || 0)
       ),
@@ -194,19 +228,21 @@ function TextEdit({
   }));
 
   const setProperties = useCallback(
-    (properties) => updateElementById({ elementId: id, properties }),
+    (properties: Partial<TextElement>) =>
+      updateElementById({ elementId: id, properties }),
     [id, updateElementById]
   );
 
-  const wrapperRef = useRef(null);
-  const highlightRef = useRef(null);
-  const highlightBgRef = useRef(null);
-  const textBoxRef = useRef(null);
-  const editorRef = useRef(null);
-  const boxRef = useRef();
-  const contentRef = useRef();
-  const editorHeightRef = useRef(0);
-  const outsideBorderRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const highlightRef = useRef<HTMLDivElement>(null);
+  const highlightBgRef = useRef<HTMLDivElement>(null);
+  const textBoxRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<HTMLDivElement>(null);
+  const boxRef =
+    useRef<Pick<ElementBox, 'x' | 'y' | 'height' | 'rotationAngle'>>();
+  const contentRef = useRef<string | null>();
+  const editorHeightRef = useRef<number>(0);
+  const outsideBorderRef = useRef<HTMLDivElement>(null);
 
   // x, y, height, rotationAngle changes should not update the content while in edit mode.
   // updateContent should be only called on unmount.
@@ -215,9 +251,9 @@ function TextEdit({
   }, [x, y, height, rotationAngle]);
 
   // Make sure to allow the user to click in the text box while working on the text.
-  const onClick = (evt) => {
+  const onClick: MouseEventHandler<HTMLDivElement> = (evt) => {
     const editor = editorRef.current;
-    editor.focus();
+    editor?.focus();
     evt.stopPropagation();
   };
 
@@ -235,20 +271,22 @@ function TextEdit({
     }
     if (contentRef.current) {
       // Remove manual line breaks and remember to trim any trailing non-breaking space.
-      const properties = { content: contentRef.current };
+      const properties: Partial<TextElement> = { content: contentRef.current };
       // Recalculate the new height and offset.
       // boxRef includes adjustment for the border, let's take the border values out for element updating.
       if (newHeight) {
-        const [dx, dy] = calcRotatedResizeOffset(
-          boxRef.current.rotationAngle,
-          -left,
-          -right,
-          -top,
-          Math.round(newHeight - (boxRef.current.height - top))
-        );
         properties.height = editorToDataY(newHeight);
-        properties.x = editorToDataX(boxRef.current.x + dx);
-        properties.y = editorToDataY(boxRef.current.y + dy);
+        if (boxRef.current) {
+          const [dx, dy] = calcRotatedResizeOffset(
+            boxRef.current.rotationAngle,
+            -left,
+            -right,
+            -top,
+            Math.round(newHeight - (boxRef.current.height - top))
+          );
+          properties.x = editorToDataX(boxRef.current.x + dx);
+          properties.y = editorToDataY(boxRef.current.y + dy);
+        }
       }
       setProperties(properties);
     }
@@ -277,28 +315,34 @@ function TextEdit({
     const wrapper = wrapperRef.current;
     const textBox = textBoxRef.current;
     const { marginOffset } = calcFontMetrics(element);
-    editorHeightRef.current =
-      textBox.offsetHeight - dataToEditorY(marginOffset);
-    wrapper.style.height = `${editorHeightRef.current}px`;
-    textBox.style.margin = '';
+    if (wrapper) {
+      wrapper.style.height = `${editorHeightRef.current}px`;
+    }
+    if (textBox) {
+      editorHeightRef.current =
+        textBox.offsetHeight - dataToEditorY(marginOffset);
+      textBox.style.margin = '';
+    }
     if (editWrapper) {
-      // We need to consider the potential border, too, and remove/add it to the content height.
-      const [dx, dy] = calcRotatedResizeOffset(
-        boxRef.current.rotationAngle,
-        0,
-        0,
-        0,
-        editorHeightRef.current - (boxRef.current.height - top - bottom)
-      );
-      editWrapper.style.height = `${editorHeightRef.current + top + bottom}px`;
-      editWrapper.style.left = `${boxRef.current.x + dx}px`;
-      editWrapper.style.top = `${boxRef.current.y + dy}px`;
+      if (boxRef.current) {
+        // We need to consider the potential border, too, and remove/add it to the content height.
+        const [dx, dy] = calcRotatedResizeOffset(
+          boxRef.current.rotationAngle,
+          0,
+          0,
+          0,
+          editorHeightRef.current - (boxRef.current.height - top - bottom)
+        );
+        editWrapper.style.height = `${editorHeightRef.current + top + bottom}px`;
+        editWrapper.style.left = `${boxRef.current.x + dx}px`;
+        editWrapper.style.top = `${boxRef.current.y + dy}px`;
+      }
       onResize && onResize();
     }
   }, [dataToEditorY, editWrapper, element, onResize, top, bottom]);
   // Invoke on each content update.
   const handleUpdate = useCallback(
-    (newContent) => {
+    (newContent: string | null) => {
       contentRef.current = newContent;
       handleResize();
     },
@@ -308,7 +352,7 @@ function TextEdit({
   useEffect(handleResize, [elementHeight, handleResize]);
 
   useEffect(() => {
-    maybeEnqueueFontStyle([
+    void maybeEnqueueFontStyle([
       {
         ...fontFaceSetConfigs,
         font,
@@ -320,25 +364,31 @@ function TextEdit({
     const target = textBoxRef.current;
     const wrapper = wrapperRef.current;
     const highlight = highlightRef.current;
-    const updatedFontSize = transform?.updates?.fontSize;
-    target.style.fontSize = updatedFontSize
-      ? `${dataToEditorY(updatedFontSize)}px`
-      : '';
+    const updatedFontSize = transform?.updates?.fontSize as number;
+    if (target) {
+      target.style.fontSize = updatedFontSize
+        ? `${dataToEditorY(updatedFontSize)}px`
+        : '';
+    }
     if (highlight) {
-      const updatedMargin = transform?.updates?.marginOffset;
-      highlight.style.fontSize = target.style.fontSize;
+      const updatedMargin = transform?.updates?.marginOffset as number;
       highlight.style.margin = `${dataToEditorY(-updatedMargin) / 2}px 0`;
-      target.style.margin = `${dataToEditorY(-updatedMargin) / 2}px 0`;
+      if (target) {
+        highlight.style.fontSize = target.style.fontSize;
+        target.style.margin = `${dataToEditorY(-updatedMargin) / 2}px 0`;
+      }
     }
 
-    if (transform === null) {
-      wrapper.style.width = '';
-      wrapper.style.height = '';
-    } else {
-      const { resize } = transform;
-      if (resize && resize[0] !== 0 && resize[1] !== 0) {
-        wrapper.style.width = `${resize[0]}px`;
-        wrapper.style.height = `${resize[1]}px`;
+    if (wrapper) {
+      if (transform === null) {
+        wrapper.style.width = '';
+        wrapper.style.height = '';
+      } else {
+        const { resize } = transform;
+        if (resize && resize[0] !== 0 && resize[1] !== 0) {
+          wrapper.style.width = `${resize[0]}px`;
+          wrapper.style.height = `${resize[1]}px`;
+        }
       }
     }
   });
@@ -380,13 +430,13 @@ function TextEdit({
     backgroundTextMode === BACKGROUND_TEXT_MODE.FILL && backgroundColor;
 
   const wrapperProps = {
-    backgroundColor: wrapperBackgroundColor,
+    $backgroundColor: wrapperBackgroundColor,
   };
 
   return (
     <OutsideBorder
       ref={outsideBorderRef}
-      border={border}
+      border={border as Border}
       borderRadius={borderRadius}
       width={width}
       height={height}
@@ -402,15 +452,13 @@ function TextEdit({
           <TextBoxPadded ref={highlightRef} {...highlightTextProps}>
             <Highlight
               ref={highlightBgRef}
-              borderRadius={borderRadius}
-              dataToEditorY={dataToEditorY}
               dangerouslySetInnerHTML={{ __html: editorContent }}
               {...textProps}
             />
           </TextBoxPadded>
         )}
         <EditTextBox
-          hasHighlightBackgroundTextMode={hasHighlightBackgroundTextMode}
+          $hasHighlightBackgroundTextMode={hasHighlightBackgroundTextMode}
           className="syncMargin"
           ref={textBoxRef}
           {...textProps}
@@ -426,14 +474,4 @@ function TextEdit({
   );
 }
 
-TextEdit.propTypes = {
-  element: StoryPropTypes.elements.text.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  onResize: PropTypes.func,
-  editWrapper: PropTypes.object,
-  updateElementById: PropTypes.func,
-  deleteSelectedElements: PropTypes.func,
-  maybeEnqueueFontStyle: PropTypes.func,
-};
-
 export default TextEdit;
diff --git a/packages/element-library/src/text/frame.js b/packages/element-library/src/text/frame.tsx
similarity index 71%
rename from packages/element-library/src/text/frame.js
rename to packages/element-library/src/text/frame.tsx
index c709aaa96a09..7e54f483fcaa 100644
--- a/packages/element-library/src/text/frame.js
+++ b/packages/element-library/src/text/frame.tsx
@@ -17,12 +17,15 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useRef, useEffect } from '@googleforcreators/react';
 import { useUnits } from '@googleforcreators/units';
 import { areEventsDragging } from '@googleforcreators/moveable';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type {
+  TextElement,
+  TextElementFont,
+  FrameProps,
+} from '@googleforcreators/elements';
 import { getCaretCharacterOffsetWithin } from '@googleforcreators/rich-text';
 
 /**
@@ -35,7 +38,15 @@ import {
 } from '../shared';
 import { generateParagraphTextStyle } from './util';
 
-const Element = styled.p`
+const Element = styled.p<{
+  font: TextElementFont;
+  fontSize: string | number;
+  fontWeight?: string | number;
+  margin: number | string;
+  padding?: number | string;
+  lineHeight: number;
+  textAlign: string;
+}>`
   ${elementFillContent}
   ${elementWithFont}
   ${elementWithTextParagraphStyle}
@@ -50,7 +61,7 @@ function TextFrame({
   wrapperRef,
   setEditingElementWithState,
   isOnlySelectedElement,
-}) {
+}: FrameProps<TextElement>) {
   const { dataToEditorX, dataToEditorY } = useUnits((state) => ({
     dataToEditorX: state.actions.dataToEditorX,
     dataToEditorY: state.actions.dataToEditorY,
@@ -63,7 +74,7 @@ function TextFrame({
     element
   );
 
-  const elementRef = useRef();
+  const elementRef = useRef<HTMLParagraphElement>(null);
 
   useEffect(() => {
     if (!isOnlySelectedElement) {
@@ -74,9 +85,9 @@ function TextFrame({
     const elementNode = elementRef.current;
 
     let clickTime = 0;
-    let clickCoordinates = null;
+    let clickCoordinates: { clientX: number; clientY: number } | null = null;
 
-    const handleKeyDown = (evt) => {
+    const handleKeyDown = (evt: KeyboardEvent) => {
       if (evt.metaKey || evt.altKey || evt.ctrlKey || isLocked) {
         // Some modifier (except shift) was pressed. Ignore and bubble
         return;
@@ -94,7 +105,7 @@ function TextFrame({
       }
     };
 
-    const handleMouseDown = (evt) => {
+    const handleMouseDown = (evt: MouseEvent) => {
       clickTime = evt.timeStamp;
       clickCoordinates = {
         clientX: evt.clientX,
@@ -102,7 +113,7 @@ function TextFrame({
       };
     };
 
-    const handleMouseUp = (evt) => {
+    const handleMouseUp = (evt: MouseEvent) => {
       if (
         isLocked ||
         !clickCoordinates ||
@@ -110,7 +121,7 @@ function TextFrame({
           {
             timeStamp: clickTime,
             ...clickCoordinates,
-          },
+          } as MouseEvent,
           evt
         )
       ) {
@@ -121,21 +132,23 @@ function TextFrame({
       // Enter editing mode and place cursor at current selection offset
       evt.stopPropagation();
       setEditingElementWithState(id, {
-        offset: getCaretCharacterOffsetWithin(
-          elementRef.current,
-          evt.clientX,
-          evt.clientY
-        ),
+        offset: elementRef.current
+          ? getCaretCharacterOffsetWithin(
+              elementRef.current,
+              evt.clientX,
+              evt.clientY
+            )
+          : 0,
       });
     };
 
-    wrapper.addEventListener('keydown', handleKeyDown);
-    elementNode.addEventListener('mousedown', handleMouseDown);
-    elementNode.addEventListener('mouseup', handleMouseUp);
+    wrapper?.addEventListener('keydown', handleKeyDown);
+    elementNode?.addEventListener('mousedown', handleMouseDown);
+    elementNode?.addEventListener('mouseup', handleMouseUp);
     return () => {
-      wrapper.removeEventListener('keydown', handleKeyDown);
-      elementNode.removeEventListener('mousedown', handleMouseDown);
-      elementNode.removeEventListener('mouseup', handleMouseUp);
+      wrapper?.removeEventListener('keydown', handleKeyDown);
+      elementNode?.removeEventListener('mousedown', handleMouseDown);
+      elementNode?.removeEventListener('mouseup', handleMouseUp);
     };
   }, [
     id,
@@ -145,26 +158,18 @@ function TextFrame({
     isLocked,
   ]);
 
-  // data-fix-caret is for allowing caretRangeFromPoint to work in Safari.
-  // See https://github.com/googleforcreators/web-stories-wp/issues/7745.
   return (
     <Element
       ref={elementRef}
       data-testid="textFrame"
+      // data-fix-caret is for allowing caretRangeFromPoint to work in Safari.
+      // See https://github.com/googleforcreators/web-stories-wp/issues/7745.
       data-fix-caret
       className="syncMargin"
       dangerouslySetInnerHTML={{ __html: content }}
-      element={element}
       {...props}
     />
   );
 }
 
-TextFrame.propTypes = {
-  element: StoryPropTypes.elements.text.isRequired,
-  wrapperRef: PropTypes.object.isRequired,
-  setEditingElementWithState: PropTypes.func,
-  isOnlySelectedElement: PropTypes.bool,
-};
-
 export default TextFrame;
diff --git a/packages/element-library/src/text/icon.js b/packages/element-library/src/text/icon.tsx
similarity index 100%
rename from packages/element-library/src/text/icon.js
rename to packages/element-library/src/text/icon.tsx
diff --git a/packages/element-library/src/text/index.js b/packages/element-library/src/text/index.ts
similarity index 100%
rename from packages/element-library/src/text/index.js
rename to packages/element-library/src/text/index.ts
diff --git a/packages/element-library/src/text/layer.js b/packages/element-library/src/text/layer.ts
similarity index 86%
rename from packages/element-library/src/text/layer.js
rename to packages/element-library/src/text/layer.ts
index d1d51327df83..629dbde1d61c 100644
--- a/packages/element-library/src/text/layer.js
+++ b/packages/element-library/src/text/layer.ts
@@ -18,8 +18,9 @@
  * External dependencies
  */
 import { stripHTML } from '@googleforcreators/dom';
+import type { TextElement } from '@googleforcreators/elements';
 
-function getTextLayerText({ content }) {
+function getTextLayerText({ content }: TextElement) {
   return stripHTML(content);
 }
 
diff --git a/packages/element-library/src/text/output.js b/packages/element-library/src/text/output.tsx
similarity index 85%
rename from packages/element-library/src/text/output.js
rename to packages/element-library/src/text/output.tsx
index f5ffe6205e92..15cd3ba58c08 100644
--- a/packages/element-library/src/text/output.js
+++ b/packages/element-library/src/text/output.tsx
@@ -22,7 +22,7 @@ import {
   dataToEditorY,
   dataToFontSizeY as dataToFontSize,
 } from '@googleforcreators/units';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { TextElement, OutputProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -33,10 +33,10 @@ import TextOutputWithUnits from './outputWithUnits';
 /**
  * Returns AMP HTML for saving into post content for displaying in the FE.
  *
- * @param {Object<*>} props Props.
- * @return {*} Rendered component.
+ * @param props Props.
+ * @return Rendered component.
  */
-function TextOutput({ element }) {
+function TextOutput({ element }: OutputProps<TextElement>) {
   const { width } = element;
   return (
     <TextOutputWithUnits
@@ -53,8 +53,4 @@ function TextOutput({ element }) {
   );
 }
 
-TextOutput.propTypes = {
-  element: StoryPropTypes.elements.text.isRequired,
-};
-
 export default TextOutput;
diff --git a/packages/element-library/src/text/outputWithUnits.tsx b/packages/element-library/src/text/outputWithUnits.tsx
index 8306c09fff7a..98efdb0ee88c 100644
--- a/packages/element-library/src/text/outputWithUnits.tsx
+++ b/packages/element-library/src/text/outputWithUnits.tsx
@@ -33,7 +33,7 @@ import type { CSSProperties } from 'react';
  */
 import {
   generateParagraphTextStyle,
-  getHighlightLineheight,
+  getHighlightLineHeight,
   calcFontMetrics,
 } from './util';
 
@@ -122,7 +122,7 @@ function TextOutputWithUnits({
     : 0;
   const unitlessFontSize = Number.parseFloat(dataToStyleY(rest.fontSize));
 
-  const lineHeight = getHighlightLineheight(
+  const lineHeight = getHighlightLineHeight(
     rest.lineHeight,
     unitlessPaddingVertical / unitlessFontSize,
     'em'
@@ -224,7 +224,7 @@ function TextOutputWithUnits({
     );
   }
   return (
-    <TagName className={className} style={fillStyle}>
+    <TagName className={className} style={fillStyle as CSSProperties}>
       <span dangerouslySetInnerHTML={{ __html: content }} />
     </TagName>
   );
diff --git a/packages/element-library/src/text/test/util.js b/packages/element-library/src/text/test/util.js
index 2c60359df8f6..6f514d2e4acd 100644
--- a/packages/element-library/src/text/test/util.js
+++ b/packages/element-library/src/text/test/util.js
@@ -28,7 +28,7 @@ import {
  */
 import {
   generateFontFamily,
-  getHighlightLineheight,
+  getHighlightLineHeight,
   generateParagraphTextStyle,
 } from '../util';
 
@@ -134,27 +134,27 @@ describe('Text/util', () => {
     });
   });
 
-  describe('getHighlightLineheight', () => {
+  describe('getHighlightLineHeight', () => {
     it('should return correct value when just line-height', () => {
-      const actual = getHighlightLineheight(3);
+      const actual = getHighlightLineHeight(3);
       const expected = '3em';
       expect(actual).toStrictEqual(expected);
     });
 
     it('should return correct value with positive padding', () => {
-      const actual = getHighlightLineheight(3, 10);
+      const actual = getHighlightLineHeight(3, 10);
       const expected = 'calc(3em + 20px)';
       expect(actual).toStrictEqual(expected);
     });
 
     it('should return correct value with negative padding', () => {
-      const actual = getHighlightLineheight(3, -6);
+      const actual = getHighlightLineHeight(3, -6);
       const expected = 'calc(3em - 12px)';
       expect(actual).toStrictEqual(expected);
     });
 
     it('should return correct value with given units', () => {
-      const actual = getHighlightLineheight(3, 2, '%');
+      const actual = getHighlightLineHeight(3, 2, '%');
       const expected = 'calc(3em + 4%)';
       expect(actual).toStrictEqual(expected);
     });
diff --git a/packages/element-library/src/text/textContent.js b/packages/element-library/src/text/textContent.ts
similarity index 86%
rename from packages/element-library/src/text/textContent.js
rename to packages/element-library/src/text/textContent.ts
index 2839abbbd185..25d22fd4c2d8 100644
--- a/packages/element-library/src/text/textContent.js
+++ b/packages/element-library/src/text/textContent.ts
@@ -17,8 +17,9 @@
  * External dependencies
  */
 import { stripHTML } from '@googleforcreators/dom';
+import type { TextElement } from '@googleforcreators/elements';
 
-function TextContent({ content }) {
+function TextContent({ content }: TextElement) {
   return stripHTML(content);
 }
 
diff --git a/packages/element-library/src/text/updateForResizeEvent.js b/packages/element-library/src/text/updateForResizeEvent.ts
similarity index 87%
rename from packages/element-library/src/text/updateForResizeEvent.js
rename to packages/element-library/src/text/updateForResizeEvent.ts
index cd301e19cc34..45ae5829ceb0 100644
--- a/packages/element-library/src/text/updateForResizeEvent.js
+++ b/packages/element-library/src/text/updateForResizeEvent.ts
@@ -17,6 +17,7 @@
  * External dependencies
  */
 import { dataPixels } from '@googleforcreators/units';
+import { type TextElement } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -26,7 +27,12 @@ import {
   calculateTextHeight,
 } from '../utils/textMeasurements';
 
-function updateForResizeEvent(element, direction, newWidth, newHeight) {
+function updateForResizeEvent(
+  element: TextElement,
+  direction: [number, number],
+  newWidth: number,
+  newHeight: number
+) {
   const isResizingWidth = direction[0] !== 0;
   const isResizingHeight = direction[1] !== 0;
 
diff --git a/packages/element-library/src/text/util.ts b/packages/element-library/src/text/util.ts
index 9f2c8ab1cdd9..b4df43f10428 100644
--- a/packages/element-library/src/text/util.ts
+++ b/packages/element-library/src/text/util.ts
@@ -17,15 +17,15 @@
 /**
  * External dependencies
  */
-import type { CSSProperties } from 'react';
 import type {
+  BaseFontData,
   Padding,
   TextAlign,
   TextElement,
   TextElementFont,
 } from '@googleforcreators/elements';
 
-type DataToStyle = (prop: number) => string;
+type DataToStyle = (prop: number) => string | number;
 interface Props {
   font: TextElementFont;
   fontSize: number;
@@ -43,10 +43,7 @@ export function generateParagraphTextStyle(
   dataToFontSizeY = dataToStyleY,
   element: TextElement,
   dataToPaddingY = dataToStyleY
-): Omit<CSSProperties, 'font'> & {
-  dataToEditorY: DataToStyle;
-  font: TextElementFont;
-} {
+) {
   const { font, fontSize, lineHeight, padding, textAlign } = props;
   const { marginOffset } = calcFontMetrics(element);
 
@@ -64,7 +61,7 @@ export function generateParagraphTextStyle(
     wordBreak: 'break-word',
     margin: `${dataToPaddingY(-marginOffset / 2)} 0`,
     fontFamily: generateFontFamily(font),
-    fontSize: dataToFontSizeY(fontSize),
+    fontSize: dataToFontSizeY(fontSize) as number,
     font,
     lineHeight,
     textAlign,
@@ -72,14 +69,10 @@ export function generateParagraphTextStyle(
   };
 }
 
-interface GenerateFontFamilyProps {
-  family?: string;
-  fallbacks?: string[];
-}
 export const generateFontFamily = ({
   family,
   fallbacks,
-}: GenerateFontFamilyProps = {}) => {
+}: Partial<BaseFontData>) => {
   const genericFamilyKeywords = [
     'cursive',
     'fantasy',
@@ -100,7 +93,7 @@ export const generateFontFamily = ({
   return fontFamilyDisplay;
 };
 
-export const getHighlightLineheight = (
+export const getHighlightLineHeight = (
   lineHeight: number,
   verticalPadding = 0,
   unit = 'px'
diff --git a/packages/element-library/src/types.ts b/packages/element-library/src/types.ts
deleted file mode 100644
index f65bfa14c432..000000000000
--- a/packages/element-library/src/types.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// Temporary workaround while this package is not fully converted yet.
-// Adjust tsconfig.json and "types" field in package.json and then
-// delete this file once complete.
-
-/**
- * External dependencies
- */
-import type { ElementDefinition } from '@googleforcreators/elements';
-
-export * from './constants';
-export * from './types';
-export * from './utils/textMeasurements';
-
-export const elementTypes: ElementDefinition[] = [];
diff --git a/packages/element-library/src/types/elements/gifElement.ts b/packages/element-library/src/types/elements/gifElement.ts
deleted file mode 100644
index 75c83d23a4ca..000000000000
--- a/packages/element-library/src/types/elements/gifElement.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * External dependencies
- */
-import type { GifResource } from '@googleforcreators/media';
-import type {
-  SequenceMediaElement,
-  ElementType,
-} from '@googleforcreators/elements';
-
-export interface GifElement extends SequenceMediaElement {
-  resource: GifResource;
-  type: ElementType.Gif;
-}
diff --git a/packages/element-library/src/types/elements/imageElement.ts b/packages/element-library/src/types/elements/imageElement.ts
deleted file mode 100644
index c5097f6ff9d4..000000000000
--- a/packages/element-library/src/types/elements/imageElement.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * External dependencies
- */
-import type { Resource } from '@googleforcreators/media';
-import type { Pattern } from '@googleforcreators/patterns';
-import type { MediaElement, ElementType } from '@googleforcreators/elements';
-
-export type ImageElement = MediaElement & {
-  type: ElementType.Image;
-  resource: Resource;
-
-  // TODO(#12437): Figure out why some images have this property.
-  backgroundColor?: Pattern;
-};
diff --git a/packages/element-library/src/types/elements/index.ts b/packages/element-library/src/types/elements/index.ts
deleted file mode 100644
index fb315aae5913..000000000000
--- a/packages/element-library/src/types/elements/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export * from './gifElement';
-export * from './imageElement';
-export * from './productElement';
-export * from './shapeElement';
-export * from './stickerElement';
-export * from './textElement';
-export * from './videoElement';
diff --git a/packages/element-library/src/types/elements/shapeElement.ts b/packages/element-library/src/types/elements/shapeElement.ts
deleted file mode 100644
index 761b34a1cb4d..000000000000
--- a/packages/element-library/src/types/elements/shapeElement.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * External dependencies
- */
-import type { Pattern } from '@googleforcreators/patterns';
-import type { Element, ElementType } from '@googleforcreators/elements';
-
-export interface ShapeElement extends Element {
-  backgroundColor?: Pattern;
-  isBackground?: boolean;
-  isDefaultBackground?: boolean;
-  type: ElementType.Shape;
-}
diff --git a/packages/element-library/src/types/elements/stickerElement.ts b/packages/element-library/src/types/elements/stickerElement.ts
deleted file mode 100644
index a8d803b2b61e..000000000000
--- a/packages/element-library/src/types/elements/stickerElement.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * External dependencies
- */
-import type { Element, ElementType } from '@googleforcreators/elements';
-
-export interface Sticker {
-  type: string;
-}
-
-export interface StickerElement extends Element {
-  type: ElementType.Sticker;
-  sticker: Sticker;
-}
diff --git a/packages/element-library/src/types/elements/textElement.ts b/packages/element-library/src/types/elements/textElement.ts
deleted file mode 100644
index 2b417a1107a8..000000000000
--- a/packages/element-library/src/types/elements/textElement.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * External dependencies
- */
-import type { Pattern } from '@googleforcreators/patterns';
-import type {
-  Element,
-  ElementType,
-  FontData,
-} from '@googleforcreators/elements';
-
-export interface Padding {
-  horizontal?: number;
-  vertical?: number;
-  locked?: boolean;
-  hasHiddenPadding?: boolean;
-}
-
-export type TextAlign = 'left' | 'center' | 'right' | 'justify' | 'initial';
-export type BackgroundTextMode = 'NONE' | 'FILL' | 'HIGHLIGHT';
-
-export interface TextElement extends Element {
-  type: ElementType.Text;
-  content: string;
-  font: FontData;
-
-  backgroundTextMode?: BackgroundTextMode;
-  backgroundColor?: Pattern;
-  fontSize?: number;
-  lineHeight?: number;
-  textAlign?: TextAlign;
-  tagName?: 'h1' | 'h2' | 'h3' | 'p';
-  padding?: Padding;
-  marginOffset?: number;
-}
diff --git a/packages/element-library/src/types/elements/videoElement.ts b/packages/element-library/src/types/elements/videoElement.ts
deleted file mode 100644
index ba212ec2f44d..000000000000
--- a/packages/element-library/src/types/elements/videoElement.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * External dependencies
- */
-import type { VideoResource } from '@googleforcreators/media';
-import type {
-  SequenceMediaElement,
-  ElementType,
-} from '@googleforcreators/elements';
-
-export interface VideoTrack {
-  id: string;
-  track: string;
-  trackId?: number;
-  kind?: string;
-  srclang?: string;
-  label?: string;
-  needsProxy?: boolean;
-}
-
-export interface VideoElement extends SequenceMediaElement {
-  resource: VideoResource;
-  poster?: string;
-  tracks?: VideoTrack[];
-  loop?: boolean;
-  type: ElementType.Video;
-}
diff --git a/packages/element-library/src/typings/global.d.ts b/packages/element-library/src/typings/global.d.ts
new file mode 100644
index 000000000000..1a8b47e86a01
--- /dev/null
+++ b/packages/element-library/src/typings/global.d.ts
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {
+  CSSProperties,
+  DetailedHTMLProps,
+  ImgHTMLAttributes,
+  VideoHTMLAttributes,
+} from 'react';
+
+type AmpLayout =
+  | 'fill'
+  | 'fixed'
+  | 'fixed-height'
+  | 'flex-item'
+  | 'intrinsic'
+  | 'nodisplay'
+  | 'responsive'
+  | 'container';
+
+interface AmpVideo
+  extends DetailedHTMLProps<
+    Omit<VideoHTMLAttributes<HTMLVideoElement>, 'loop' | 'autoPlay'>,
+    HTMLVideoElement
+  > {
+  layout: AmpLayout;
+  'captions-id'?: string;
+  autoPlay?: string;
+  loop?: string;
+  noaudio?: string;
+  alt?: string;
+}
+
+interface AmpImg
+  extends DetailedHTMLProps<
+    ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  > {
+  layout: AmpLayout;
+  'disable-inline-width'?: boolean;
+}
+
+interface AmpStoryShoppingTag {
+  'data-product-id'?: string | number;
+}
+
+interface AmpStoryAudioSticker {
+  sticker: 'headphone-cat' | 'tape-player' | 'loud-speaker' | 'audio-cloud';
+  'sticker-style'?: 'none' | 'outline' | 'dropshadow';
+  size: 'large' | 'small';
+  style?: CSSProperties;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'amp-story-shopping-tag': AmpStoryShoppingTag;
+      'amp-story-audio-sticker': AmpStoryAudioSticker;
+      'amp-video': AmpVideo;
+      'amp-img': AmpImg;
+    }
+  }
+}
+
+export {};
diff --git a/packages/element-library/src/types/elements/productElement.ts b/packages/element-library/src/typings/styled.d.ts
similarity index 76%
rename from packages/element-library/src/types/elements/productElement.ts
rename to packages/element-library/src/typings/styled.d.ts
index e5b7e6c9bcec..aa9510a21976 100644
--- a/packages/element-library/src/types/elements/productElement.ts
+++ b/packages/element-library/src/typings/styled.d.ts
@@ -17,13 +17,9 @@
 /**
  * External dependencies
  */
-import type {
-  Element,
-  ElementType,
-  ProductData,
-} from '@googleforcreators/elements';
+import 'styled-components';
+import type { Theme } from '@googleforcreators/design-system';
 
-export interface ProductElement extends Element {
-  type: ElementType.Product;
-  product: ProductData;
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
 }
diff --git a/packages/element-library/src/typings/svg.d.ts b/packages/element-library/src/typings/svg.d.ts
new file mode 100644
index 000000000000..2b2af4b3434d
--- /dev/null
+++ b/packages/element-library/src/typings/svg.d.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+  const ReactComponent: FunctionComponent<
+    SVGProps<SVGElement> & { title?: string }
+  >;
+  export default ReactComponent;
+}
diff --git a/packages/element-library/src/utils/noop.js b/packages/element-library/src/utils/noop.ts
similarity index 100%
rename from packages/element-library/src/utils/noop.js
rename to packages/element-library/src/utils/noop.ts
diff --git a/packages/element-library/src/video/captions.js b/packages/element-library/src/video/captions.tsx
similarity index 57%
rename from packages/element-library/src/video/captions.js
rename to packages/element-library/src/video/captions.tsx
index 46314dae0c29..69de779a2fe2 100644
--- a/packages/element-library/src/video/captions.js
+++ b/packages/element-library/src/video/captions.tsx
@@ -16,30 +16,27 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
-import { ResourcePropTypes } from '@googleforcreators/media';
+import type { Track } from '@googleforcreators/elements';
 
-function Captions({ tracks, kind }) {
+function Captions({ tracks, kind }: { tracks?: Track[]; kind?: string }) {
   if (!tracks) {
     return null;
   }
 
-  return tracks.map(
-    ({ srclang, label, kind: trackKind, track, id: key }, i) => (
-      <track
-        srcLang={srclang}
-        label={label}
-        kind={kind || trackKind}
-        src={track}
-        key={key}
-        default={i === 0}
-      />
-    )
+  return (
+    <>
+      {tracks.map(({ srclang, label, kind: trackKind, track, id: key }, i) => (
+        <track
+          srcLang={srclang}
+          label={label}
+          kind={kind || trackKind}
+          src={track || undefined}
+          key={key}
+          default={i === 0}
+        />
+      ))}
+    </>
   );
 }
-Captions.propTypes = {
-  kind: PropTypes.string,
-  tracks: PropTypes.arrayOf(ResourcePropTypes.trackResource),
-};
 
 export default Captions;
diff --git a/packages/element-library/src/video/constants.js b/packages/element-library/src/video/constants.ts
similarity index 86%
rename from packages/element-library/src/video/constants.js
rename to packages/element-library/src/video/constants.ts
index be52d84c7422..9de8b8aab8a1 100644
--- a/packages/element-library/src/video/constants.js
+++ b/packages/element-library/src/video/constants.ts
@@ -17,6 +17,7 @@
  * External dependencies
  */
 import { PanelTypes } from '@googleforcreators/design-system';
+import { ResourceType } from '@googleforcreators/media';
 
 /**
  * Internal dependencies
@@ -31,10 +32,12 @@ import { SHARED_DEFAULT_ATTRIBUTES } from '../shared';
 export {
   canFlip,
   isMaskable,
+  isAspectAlwaysLocked,
   isMedia,
   hasEditMode,
   hasDuplicateMenu,
   hasEditModeIfLocked,
+  hasEditModeMoveable,
   hasDesignMenu,
   editModeGrayout,
 } from '../media/constants';
@@ -52,10 +55,15 @@ export const defaultAttributes = {
   volume: 1,
   tracks: [],
   resource: {
-    posterId: null,
-    poster: null,
+    type: ResourceType.Video,
     id: 0,
+    width: 0,
+    height: 0,
+    length: 0,
+    lengthFormatted: '',
     alt: '',
+    src: '',
+    mimeType: '',
   },
 };
 
diff --git a/packages/element-library/src/video/controls.js b/packages/element-library/src/video/controls.tsx
similarity index 70%
rename from packages/element-library/src/video/controls.js
rename to packages/element-library/src/video/controls.tsx
index 952edd1f2c49..404bb5b079ae 100644
--- a/packages/element-library/src/video/controls.js
+++ b/packages/element-library/src/video/controls.tsx
@@ -17,14 +17,24 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { VideoElement } from '@googleforcreators/elements';
+import type { ElementBox } from '@googleforcreators/units';
+import type { RefObject } from 'react';
 
 /**
  * Internal dependencies
  */
 import PlayPauseButton from './playPauseButton';
 
+interface VideoControlsProps {
+  box: ElementBox;
+  isActive: boolean;
+  isTransforming: boolean;
+  elementRef: RefObject<HTMLElement>;
+  element: VideoElement;
+  isRTL: boolean;
+}
+
 function VideoControls({
   box,
   isActive,
@@ -32,8 +42,7 @@ function VideoControls({
   elementRef,
   element,
   isRTL,
-  topOffset = 0,
-}) {
+}: VideoControlsProps) {
   return (
     <PlayPauseButton
       box={box}
@@ -42,19 +51,8 @@ function VideoControls({
       elementRef={elementRef}
       element={element}
       isRTL={isRTL}
-      topOffset={topOffset}
     />
   );
 }
 
-VideoControls.propTypes = {
-  box: StoryPropTypes.box.isRequired,
-  isActive: PropTypes.bool,
-  isTransforming: PropTypes.bool.isRequired,
-  elementRef: PropTypes.object.isRequired,
-  element: StoryPropTypes.element.isRequired,
-  isRTL: PropTypes.bool,
-  topOffset: PropTypes.number,
-};
-
 export default VideoControls;
diff --git a/packages/element-library/src/video/display.js b/packages/element-library/src/video/display.tsx
similarity index 86%
rename from packages/element-library/src/video/display.js
rename to packages/element-library/src/video/display.tsx
index 4b0ab8c26550..bbad2ecb6b1d 100644
--- a/packages/element-library/src/video/display.js
+++ b/packages/element-library/src/video/display.tsx
@@ -17,10 +17,10 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useRef } from '@googleforcreators/react';
 import { getMediaSizePositionProps } from '@googleforcreators/media';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { VideoElement, DisplayProps } from '@googleforcreators/elements';
+import type { RefObject } from 'react';
 
 /**
  * Internal dependencies
@@ -35,7 +35,7 @@ function VideoDisplay({
   element,
   getProxiedUrl,
   renderResourcePlaceholder,
-}) {
+}: DisplayProps<VideoElement>) {
   const {
     id,
     poster,
@@ -48,7 +48,7 @@ function VideoDisplay({
     loop,
     volume,
   } = element;
-  const ref = useRef();
+  const ref = useRef<HTMLVideoElement | HTMLImageElement>(null);
 
   let style = {};
   if (isBackground) {
@@ -72,7 +72,7 @@ function VideoDisplay({
 
   const url = getProxiedUrl(resource, resource?.src);
   const tracksFormatted = tracks.map((track) => {
-    const src = getProxiedUrl(track, track?.track);
+    const src = getProxiedUrl(track, track?.track || undefined);
     return {
       ...track,
       track: src,
@@ -80,7 +80,7 @@ function VideoDisplay({
   });
 
   return (
-    <MediaDisplay
+    <MediaDisplay<VideoElement>
       element={element}
       mediaRef={ref}
       showPlaceholder
@@ -94,7 +94,7 @@ function VideoDisplay({
             alt={element.alt || resource.alt}
             style={style}
             {...videoProps}
-            ref={ref}
+            ref={ref as RefObject<HTMLImageElement>}
           />
         )
       ) : (
@@ -110,8 +110,9 @@ function VideoDisplay({
           preload="metadata"
           loop={loop}
           muted={muted}
+          // @ts-expect-error TODO: Is this actually legit?
           volume={!muted && volume ? volume : undefined}
-          ref={ref}
+          ref={ref as RefObject<HTMLVideoElement>}
           data-testid="videoElement"
           data-leaf-element="true"
         >
@@ -124,12 +125,4 @@ function VideoDisplay({
   );
 }
 
-VideoDisplay.propTypes = {
-  previewMode: PropTypes.bool,
-  element: StoryPropTypes.elements.video.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  getProxiedUrl: PropTypes.func.isRequired,
-  renderResourcePlaceholder: PropTypes.func,
-};
-
 export default VideoDisplay;
diff --git a/packages/element-library/src/video/edit.js b/packages/element-library/src/video/edit.tsx
similarity index 69%
rename from packages/element-library/src/video/edit.js
rename to packages/element-library/src/video/edit.tsx
index 52a7aec7dd03..4d0c169c2312 100644
--- a/packages/element-library/src/video/edit.js
+++ b/packages/element-library/src/video/edit.tsx
@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { VideoElement, EditProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -25,18 +25,17 @@ import { StoryPropTypes } from '@googleforcreators/elements';
 import MediaEdit from '../media/edit';
 import Trim from './trim';
 
-function VideoEdit({ element, box, isTrimMode, ...rest }) {
+function VideoEdit({
+  element,
+  box,
+  isTrimMode,
+  ...rest
+}: EditProps<VideoElement>) {
   if (isTrimMode) {
     return <Trim element={element} box={box} {...rest} />;
   }
 
-  return <MediaEdit element={element} box={box} {...rest} />;
+  return <MediaEdit<VideoElement> element={element} box={box} {...rest} />;
 }
 
-VideoEdit.propTypes = {
-  element: StoryPropTypes.elements.video.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  isTrimMode: PropTypes.bool,
-};
-
 export default VideoEdit;
diff --git a/packages/element-library/src/video/frame.js b/packages/element-library/src/video/frame.js
deleted file mode 100644
index 8ba5d5523492..000000000000
--- a/packages/element-library/src/video/frame.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/**
- * External dependencies
- */
-import { StoryPropTypes } from '@googleforcreators/elements';
-
-/**
- * Internal dependencies
- */
-import MediaFrame from '../media/frame';
-
-function VideoFrame({ element }) {
-  return <MediaFrame element={element} />;
-}
-
-VideoFrame.propTypes = {
-  element: StoryPropTypes.elements.video.isRequired,
-};
-
-export default VideoFrame;
diff --git a/packages/element-library/src/video/frame.tsx b/packages/element-library/src/video/frame.tsx
new file mode 100644
index 000000000000..517d41f213d8
--- /dev/null
+++ b/packages/element-library/src/video/frame.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import MediaFrame from '../media/frame';
+
+function VideoFrame() {
+  return <MediaFrame />;
+}
+
+export default VideoFrame;
diff --git a/packages/element-library/src/video/icon.js b/packages/element-library/src/video/icon.tsx
similarity index 86%
rename from packages/element-library/src/video/icon.js
rename to packages/element-library/src/video/icon.tsx
index 11586cce29e4..0b44011cc1b2 100644
--- a/packages/element-library/src/video/icon.js
+++ b/packages/element-library/src/video/icon.tsx
@@ -18,8 +18,7 @@
  * External dependencies
  */
 import { Icons } from '@googleforcreators/design-system';
-import PropTypes from 'prop-types';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { VideoElement, LayerIconProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -33,7 +32,7 @@ function VideoLayerIcon({
     poster,
   },
   showVideoPreviewAsBackup,
-}) {
+}: LayerIconProps<VideoElement>) {
   const iconImage = poster?.length ? poster : defaultPoster;
 
   // The image/video is purely decorative by default, because the alt text is already used
@@ -47,9 +46,4 @@ function VideoLayerIcon({
   return <VisibleImage src={iconImage} width={21} height={21} />;
 }
 
-VideoLayerIcon.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-  showVideoPreviewAsBackup: PropTypes.bool,
-};
-
 export default VideoLayerIcon;
diff --git a/packages/element-library/src/video/index.js b/packages/element-library/src/video/index.ts
similarity index 100%
rename from packages/element-library/src/video/index.js
rename to packages/element-library/src/video/index.ts
diff --git a/packages/element-library/src/video/layer.js b/packages/element-library/src/video/layer.ts
similarity index 87%
rename from packages/element-library/src/video/layer.js
rename to packages/element-library/src/video/layer.ts
index be839ae78b37..ed743b3145a4 100644
--- a/packages/element-library/src/video/layer.js
+++ b/packages/element-library/src/video/layer.ts
@@ -18,8 +18,9 @@
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
+import type { VideoElement } from '@googleforcreators/elements';
 
-function getVideoLayerText(element) {
+function getVideoLayerText(element: VideoElement) {
   const { alt } = element?.resource || {};
 
   return alt || __('Video Content', 'web-stories');
diff --git a/packages/element-library/src/video/onDropHandler.js b/packages/element-library/src/video/onDropHandler.ts
similarity index 83%
rename from packages/element-library/src/video/onDropHandler.js
rename to packages/element-library/src/video/onDropHandler.ts
index 7e2b6a7a0049..1dcb5431ad2f 100644
--- a/packages/element-library/src/video/onDropHandler.js
+++ b/packages/element-library/src/video/onDropHandler.ts
@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 
-function onDropHandler(dropTargetId) {
+function onDropHandler(dropTargetId: string) {
   // Auto-play video on drop
   setTimeout(() => {
-    const videoEl = document.getElementById(`video-${dropTargetId}`);
+    const videoEl = document.getElementById(
+      `video-${dropTargetId}`
+    ) as HTMLVideoElement | null;
     if (videoEl) {
       videoEl.load();
       videoEl.play().catch(() => {});
diff --git a/packages/element-library/src/video/output.js b/packages/element-library/src/video/output.tsx
similarity index 83%
rename from packages/element-library/src/video/output.js
rename to packages/element-library/src/video/output.tsx
index 6a1dbc416b69..d4ad6c5a8ff0 100644
--- a/packages/element-library/src/video/output.js
+++ b/packages/element-library/src/video/output.tsx
@@ -17,9 +17,8 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { isBlobURL } from '@googleforcreators/media';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { VideoElement, OutputProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -27,11 +26,11 @@ import { StoryPropTypes } from '@googleforcreators/elements';
 import MediaOutput from '../media/output';
 import Captions from './captions';
 
-function defaultForUndefined(value, def) {
+function defaultForUndefined<V, D>(value: V | undefined, def: D): V | D {
   return value === undefined ? def : value;
 }
 
-function VideoOutput({ element, box, flags }) {
+function VideoOutput({ element, box, flags }: OutputProps<VideoElement>) {
   const { resource, loop, tracks, volume } = element;
   const { isMuted, mimeType, src } = resource;
 
@@ -44,12 +43,11 @@ function VideoOutput({ element, box, flags }) {
   };
 
   const videoProps = {
-    autoPlay: 'autoplay',
+    autoplay: 'autoplay',
     poster: flags?.allowBlobs || !isBlobURL(poster) ? poster : '',
     artwork: flags?.allowBlobs || !isBlobURL(poster) ? poster : '',
     title: alt,
     alt,
-    layout: 'fill',
     loop: loop ? 'loop' : undefined,
     noaudio: isMuted ? 'noaudio' : undefined,
     volume: !isMuted && volume ? volume : undefined,
@@ -58,6 +56,7 @@ function VideoOutput({ element, box, flags }) {
   return (
     <MediaOutput element={element} box={box} data-leaf-element="true">
       <amp-video
+        layout="fill"
         {...videoProps}
         id={`el-${element.id}-media`}
         // Actual <amp-story-captions> output happens in OutputPage.
@@ -72,10 +71,4 @@ function VideoOutput({ element, box, flags }) {
   );
 }
 
-VideoOutput.propTypes = {
-  element: StoryPropTypes.elements.video.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  flags: PropTypes.object,
-};
-
 export default VideoOutput;
diff --git a/packages/element-library/src/video/playPauseButton.js b/packages/element-library/src/video/playPauseButton.tsx
similarity index 83%
rename from packages/element-library/src/video/playPauseButton.js
rename to packages/element-library/src/video/playPauseButton.tsx
index 47c3a2a0d334..70e4bcb205df 100644
--- a/packages/element-library/src/video/playPauseButton.js
+++ b/packages/element-library/src/video/playPauseButton.tsx
@@ -17,30 +17,37 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import {
-  useEffect,
-  useState,
   useDebouncedCallback,
+  useEffect,
   useRef,
+  useState,
 } from '@googleforcreators/react';
 import { CSSTransition } from 'react-transition-group';
 import { __ } from '@googleforcreators/i18n';
 import { rgba } from 'polished';
 import {
   Icons,
-  useKeyDownEffect,
+  Placement,
   Popup,
+  useKeyDownEffect,
 } from '@googleforcreators/design-system';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import { type VideoElement } from '@googleforcreators/elements';
+import type { ElementBox } from '@googleforcreators/units';
+import type { ReactNode, RefObject, MouseEventHandler } from 'react';
 
 const PLAY_BUTTON_SIZE = 82;
 const ICON_SVG_SIZE = 72;
 const PLAY_ABOVE_BREAKPOINT_WIDTH = 108;
 const PLAY_ABOVE_BREAKPOINT_HEIGHT = 120;
 
-const Controls = styled.div`
+const Controls = styled.div<{
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}>`
   position: absolute;
   z-index: 2;
   left: ${({ x }) => `${x}px`};
@@ -50,7 +57,9 @@ const Controls = styled.div`
   pointer-events: none;
 `;
 
-const ButtonWrapper = styled.div.attrs({ role: 'button', tabIndex: -1 })`
+const ButtonWrapper = styled.div.attrs({ role: 'button', tabIndex: -1 })<{
+  isAbove: boolean;
+}>`
   ${({ isAbove }) =>
     !isAbove &&
     css`
@@ -83,7 +92,9 @@ const ButtonWrapper = styled.div.attrs({ role: 'button', tabIndex: -1 })`
   }
 `;
 
-const iconCss = css`
+const iconCss = css<{
+  $isRTL: boolean;
+}>`
   width: ${ICON_SVG_SIZE}px;
   height: ${ICON_SVG_SIZE}px;
   pointer-events: none;
@@ -106,9 +117,21 @@ const Pause = styled(Icons.StopFilled)`
 `;
 
 const playAboveSpacing = {
+  x: 0,
   y: 22,
 };
 
+interface PlayPauseButtonProps {
+  box: ElementBox;
+  isActive?: boolean;
+  isTransforming?: boolean;
+  shouldResetOnEnd?: boolean;
+  elementRef: RefObject<HTMLElement>;
+  element: VideoElement;
+  videoRef?: RefObject<HTMLVideoElement> | null;
+  isRTL: boolean;
+}
+
 function PlayPauseButton({
   box,
   isActive = true,
@@ -118,19 +141,21 @@ function PlayPauseButton({
   element,
   videoRef = null,
   isRTL,
-}) {
+}: PlayPauseButtonProps) {
   const isPlayAbove =
     element.width < PLAY_ABOVE_BREAKPOINT_WIDTH ||
     element.height < PLAY_ABOVE_BREAKPOINT_HEIGHT;
   const [hovering, setHovering] = useState(false);
   const [showControls, setShowControls] = useState(true);
   const [isPlaying, setIsPlaying] = useState(false);
-  const [videoNode, setVideoNode] = useState(null);
+  const [videoNode, setVideoNode] = useState<HTMLVideoElement | null>(null);
   const { id } = element;
   useEffect(
     () =>
       setVideoNode(
-        videoRef ? videoRef.current : document.getElementById(`video-${id}`)
+        videoRef
+          ? videoRef.current
+          : (document.getElementById(`video-${id}`) as HTMLVideoElement)
       ),
     [videoRef, id]
   );
@@ -186,7 +211,7 @@ function PlayPauseButton({
       setShowControls(!isPlaying);
     }
   }, 2000);
-  const checkMouseInBBox = useDebouncedCallback((evt) => {
+  const checkMouseInBBox = useDebouncedCallback((evt: MouseEvent) => {
     const node = elementRef.current;
     if (!node) {
       return;
@@ -208,7 +233,8 @@ function PlayPauseButton({
       document.removeEventListener('pointermove', checkMouseInBBox);
     };
   }, [checkMouseInBBox]);
-  const handlePlayPause = (evt) => {
+
+  const handlePlayPause = <T extends Event = MouseEvent>(evt: T): void => {
     evt.stopPropagation();
     if (!videoNode) {
       return;
@@ -229,7 +255,7 @@ function PlayPauseButton({
     handlePlayPause,
     [handlePlayPause]
   );
-  const nodeRef = useRef();
+  const nodeRef = useRef<HTMLDivElement>(null);
   if (!isActive) {
     return null;
   }
@@ -238,11 +264,11 @@ function PlayPauseButton({
     ? __('Click to pause', 'web-stories')
     : __('Click to play', 'web-stories');
   const TransitionWrapper = isPlayAbove
-    ? ({ children }) => (
+    ? ({ children }: { children: ReactNode }) => (
         <Popup
           anchor={elementRef}
           isOpen
-          placement="top"
+          placement={Placement.Top}
           spacing={playAboveSpacing}
         >
           {children}
@@ -266,7 +292,7 @@ function PlayPauseButton({
             aria-label={buttonLabel}
             aria-pressed={isPlaying}
             key="wrapper"
-            onMouseDown={handlePlayPause}
+            onMouseDown={handlePlayPause as MouseEventHandler<HTMLDivElement>}
             isAbove={isPlayAbove}
           >
             <Icon $isRTL={isRTL} />
@@ -277,15 +303,4 @@ function PlayPauseButton({
   );
 }
 
-PlayPauseButton.propTypes = {
-  box: StoryPropTypes.box.isRequired,
-  isActive: PropTypes.bool,
-  isTransforming: PropTypes.bool,
-  shouldResetOnEnd: PropTypes.bool,
-  elementRef: PropTypes.object.isRequired,
-  element: StoryPropTypes.element.isRequired,
-  videoRef: PropTypes.object,
-  isRTL: PropTypes.bool,
-};
-
 export default PlayPauseButton;
diff --git a/packages/element-library/src/video/trim.js b/packages/element-library/src/video/trim.tsx
similarity index 75%
rename from packages/element-library/src/video/trim.js
rename to packages/element-library/src/video/trim.tsx
index 4bfbd0060606..2da78411335a 100644
--- a/packages/element-library/src/video/trim.js
+++ b/packages/element-library/src/video/trim.tsx
@@ -18,11 +18,19 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
 import { useRef, useMemo, useCallback } from '@googleforcreators/react';
-import { getMediaSizePositionProps } from '@googleforcreators/media';
+import {
+  getMediaSizePositionProps,
+  type Resource,
+  type VideoResource,
+} from '@googleforcreators/media';
 import { CircularProgress } from '@googleforcreators/design-system';
-import { StoryPropTypes, getTransformFlip } from '@googleforcreators/elements';
+import {
+  getTransformFlip,
+  type VideoElement,
+  type DisplayProps,
+} from '@googleforcreators/elements';
+import type { ElementBox } from '@googleforcreators/units';
 
 /**
  * Internal dependencies
@@ -52,16 +60,29 @@ const Spinner = styled.div`
   align-items: center;
 `;
 
+interface VideoTrimProps {
+  element: VideoElement;
+  box: ElementBox;
+  isRTL: boolean;
+  topOffset: number;
+  resource?: VideoResource;
+  setVideoNode: (node: HTMLVideoElement) => void;
+  getProxiedUrl: (
+    resource: Pick<Resource, 'needsProxy'>,
+    src?: string
+  ) => string | null;
+  renderResourcePlaceholder?: DisplayProps<VideoElement>['renderResourcePlaceholder'];
+}
+
 function VideoTrim({
   box,
   element,
   isRTL,
-  topOffset,
   resource,
   setVideoNode,
   getProxiedUrl,
   renderResourcePlaceholder,
-}) {
+}: VideoTrimProps) {
   const { width, height } = box;
   const {
     poster,
@@ -73,8 +94,8 @@ function VideoTrim({
     focalY,
     volume,
   } = element;
-  const wrapperRef = useRef();
-  const videoRef = useRef();
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
   let style = {};
   if (isBackground) {
     const styleProps = getBackgroundStyle();
@@ -93,7 +114,7 @@ function VideoTrim({
     [box]
   );
   const setRef = useCallback(
-    (node) => {
+    (node: HTMLVideoElement) => {
       videoRef.current = node;
       setVideoNode(node);
     },
@@ -115,13 +136,12 @@ function VideoTrim({
     width,
     height,
     scale,
-    flip?.horizontal ? 100 - focalX : focalX,
-    flip?.vertical ? 100 - focalY : focalY
+    flip?.horizontal ? 100 - (focalX || 0) : focalX,
+    flip?.vertical ? 100 - (focalY || 0) : focalY
   );
   const muted = Boolean(resource?.isMuted);
-  videoProps.transformFlip = getTransformFlip(flip);
   const tracksFormatted = tracks.map((track) => {
-    const src = getProxiedUrl(track, track?.track);
+    const src = getProxiedUrl(track, track?.track || undefined);
     return {
       ...track,
       track: src,
@@ -131,7 +151,7 @@ function VideoTrim({
   return (
     <>
       <Wrapper ref={wrapperRef}>
-        <MediaDisplay
+        <MediaDisplay<VideoElement>
           element={element}
           mediaRef={videoRef}
           showPlaceholder
@@ -144,6 +164,8 @@ function VideoTrim({
             poster={poster || resource.poster}
             style={style}
             {...videoProps}
+            $transformFlip={getTransformFlip(flip)}
+            // @ts-expect-error TODO: Is this actually legit?
             volume={!muted && volume ? volume : undefined}
             preload="metadata"
             autoPlay
@@ -164,22 +186,9 @@ function VideoTrim({
         videoRef={videoRef}
         shouldResetOnEnd={false}
         isRTL={isRTL}
-        topOffset={topOffset}
       />
     </>
   );
 }
 
-VideoTrim.propTypes = {
-  previewMode: PropTypes.bool,
-  element: StoryPropTypes.elements.video.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  isRTL: PropTypes.bool,
-  topOffset: PropTypes.number,
-  resource: PropTypes.object,
-  setVideoNode: PropTypes.func,
-  getProxiedUrl: PropTypes.func,
-  renderResourcePlaceholder: PropTypes.func,
-};
-
 export default VideoTrim;
diff --git a/packages/element-library/tsconfig.json b/packages/element-library/tsconfig.json
index 37b6ba5ba1d5..e9e59cd62adb 100644
--- a/packages/element-library/tsconfig.json
+++ b/packages/element-library/tsconfig.json
@@ -18,14 +18,5 @@
     { "path": "../transform" },
     { "path": "../units" }
   ],
-  "include": [
-    "src/audioSticker/images",
-    "src/constants.ts",
-    "src/types.ts",
-    "src/types",
-    "src/typings",
-    "src/utils/textMeasurements.tsx",
-    "src/text/*.ts",
-    "src/text/*.tsx"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/packages/elements/src/constants.ts b/packages/elements/src/constants.ts
index 61f3ccb92921..c6ea78035d91 100644
--- a/packages/elements/src/constants.ts
+++ b/packages/elements/src/constants.ts
@@ -19,6 +19,11 @@
  */
 import { createSolid } from '@googleforcreators/patterns';
 
+/**
+ * Internal dependencies
+ */
+import { FontService, type GoogleFontData } from './types';
+
 export const ELEMENT_TYPES = {
   IMAGE: 'image',
   SHAPE: 'shape',
@@ -40,7 +45,7 @@ export const MEDIA_ELEMENT_TYPES = [
 export const MULTIPLE_VALUE = '((MULTIPLE))';
 
 // @todo: only provide font family, and use font provider to fill the rest.
-export const TEXT_ELEMENT_DEFAULT_FONT = {
+export const TEXT_ELEMENT_DEFAULT_FONT: GoogleFontData = {
   family: 'Roboto',
   weights: [100, 300, 400, 500, 700, 900],
   styles: ['italic', 'regular'],
@@ -59,7 +64,7 @@ export const TEXT_ELEMENT_DEFAULT_FONT = {
     [1, 900],
   ],
   fallbacks: ['Helvetica Neue', 'Helvetica', 'sans-serif'],
-  service: 'fonts.google.com',
+  service: FontService.GoogleFonts,
   metrics: {
     upm: 2048,
     asc: 1900,
diff --git a/packages/elements/src/elementType.ts b/packages/elements/src/elementType.ts
index d4a7c633e32f..60ecf8def7a8 100644
--- a/packages/elements/src/elementType.ts
+++ b/packages/elements/src/elementType.ts
@@ -20,7 +20,7 @@
 import type { ElementDefinition, ElementTypes } from './types';
 
 // @todo Create a custom hook to manage state.
-const elementTypes: Partial<ElementTypes> = {};
+const elementTypes: ElementTypes = {} as ElementTypes;
 
 function registerElementType(elementType: ElementDefinition) {
   elementTypes[elementType.type] = elementType;
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index f6e53310d586..92a100990733 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -17,3 +17,4 @@ export * from './constants';
 export * from './utils';
 export * from './elementType';
 export * from './types';
+export * from './propTypes';
diff --git a/packages/elements/src/types/propTypes.ts b/packages/elements/src/propTypes.ts
similarity index 98%
rename from packages/elements/src/types/propTypes.ts
rename to packages/elements/src/propTypes.ts
index 92c415adf6fc..35c4f9c8d3c6 100644
--- a/packages/elements/src/types/propTypes.ts
+++ b/packages/elements/src/propTypes.ts
@@ -29,11 +29,7 @@ import {
 /**
  * Internal dependencies
  */
-import {
-  MULTIPLE_VALUE,
-  BACKGROUND_TEXT_MODE,
-  OverlayType,
-} from '../constants';
+import { MULTIPLE_VALUE, BACKGROUND_TEXT_MODE, OverlayType } from './constants';
 
 const mask = PropTypes.shape({
   type: PropTypes.string.isRequired,
diff --git a/packages/elements/src/types/element.ts b/packages/elements/src/types/element.ts
index 4082eb904a71..62cdacad690d 100644
--- a/packages/elements/src/types/element.ts
+++ b/packages/elements/src/types/element.ts
@@ -25,6 +25,7 @@ import type {
   VideoResource,
 } from '@googleforcreators/media';
 import type { ElementBox } from '@googleforcreators/units';
+import type stickers from '@googleforcreators/stickers';
 
 /**
  * Internal dependencies
@@ -124,6 +125,7 @@ export interface MediaElement extends BackgroundableElement {
   scale?: number;
   focalX?: number;
   focalY?: number;
+  alt?: string;
 }
 
 export interface SequenceMediaElement extends MediaElement {
@@ -136,15 +138,18 @@ export interface VideoElement extends SequenceMediaElement {
   resource: VideoResource;
   poster?: string;
   loop?: boolean;
+  volume: number;
 }
 
 export interface GifElement extends SequenceMediaElement {
   type: ElementType.Gif;
+  poster?: string;
   resource: GifResource;
 }
 
 export interface ImageElement extends MediaElement {
   type: ElementType.Image;
+  alt?: string;
 }
 
 export interface OverlayableElement extends Element {
@@ -159,7 +164,7 @@ export interface ProductElement extends Element {
 export interface StickerElement extends Element {
   type: ElementType.Sticker;
   sticker: {
-    type: string;
+    type: keyof typeof stickers;
   };
 }
 
@@ -185,15 +190,22 @@ export interface TextElement extends Element {
   marginOffset: number;
   lineHeight: number;
   textAlign: TextAlign;
+
+  type: ElementType.Text;
+  fontStyle?: 'italic' | 'normal';
+  fontWeight?: number;
 }
 
 export interface AudioStickerElement extends Element {
   type: ElementType.AudioSticker;
-  sticker: string;
-  size: string;
-  style: string;
+  sticker: 'headphone-cat' | 'tape-player' | 'loud-speaker' | 'audio-cloud';
+  style: 'none' | 'outline' | 'dropshadow';
+  size: 'large' | 'small';
 }
 
 export interface ShapeElement extends Element {
   type: ElementType.Shape;
+  backgroundColor?: Pattern;
+  isBackground?: boolean;
+  isDefaultBackground?: boolean;
 }
diff --git a/packages/elements/src/types/elementDefinition.ts b/packages/elements/src/types/elementDefinition.ts
index 92c85298ba22..439e3b295ecb 100644
--- a/packages/elements/src/types/elementDefinition.ts
+++ b/packages/elements/src/types/elementDefinition.ts
@@ -18,26 +18,73 @@
  * External dependencies
  */
 import type { ElementBox } from '@googleforcreators/units';
+import type {
+  GifResource,
+  ImageResource,
+  Resource,
+  VideoResource,
+  ResourceId,
+} from '@googleforcreators/media';
+import type { RefObject, VoidFunctionComponent } from 'react';
+import type { Pattern } from '@googleforcreators/patterns';
 
 /**
  * Internal dependencies
  */
-import type { Element } from './element';
+import type { Element, ElementId, GifElement, VideoElement } from './element';
 import type { ElementType } from './elementType';
+import type { FontData, FontStyle, FontWeight } from './data';
+
+interface FontConfig {
+  fontStyle: FontStyle;
+  fontWeight: FontWeight;
+  content: string;
+  font: FontData;
+}
 
 export interface EditProps<E extends Element> {
   element: E;
   box: ElementBox;
-  setLocalProperties: () => void;
-  getProxiedUrl: () => string;
-  updateElementById: () => void;
-  zIndexCanvas: number;
+  editWrapper?: HTMLElement;
+  onResize: () => void;
+  setLocalProperties: (properties: Partial<E>) => void;
+  getProxiedUrl: (
+    resource: Pick<Resource, 'needsProxy'>,
+    src?: string
+  ) => string | null;
+  isRTL: boolean;
+  isTrimMode: boolean;
+  topOffset: number;
+  resource?: E extends VideoElement
+    ? VideoResource
+    : E extends GifElement
+      ? GifResource
+      : ImageResource;
+  setVideoNode: (node: HTMLVideoElement) => void;
+  updateElementById: (update: {
+    elementId: ElementId;
+    properties: Partial<E>;
+  }) => void;
+  deleteSelectedElements: () => void;
+  maybeEnqueueFontStyle: (fonts: FontConfig[]) => Promise<boolean>;
+  zIndexCanvas: Record<string, number>;
   scaleMin: number;
   scaleMax: number;
 }
 
+interface EditingState {
+  hasEditMenu?: boolean;
+  showOverflow?: boolean;
+  selectAll?: boolean;
+  offset?: number;
+}
+
 export interface FrameProps<E extends Element> {
+  wrapperRef: RefObject<HTMLElement>;
   element: E;
+  box: ElementBox;
+  isOnlySelectedElement: boolean;
+  setEditingElementWithState: (id: string, state: EditingState) => void;
 }
 
 export interface OutputProps<E extends Element> {
@@ -48,17 +95,34 @@ export interface OutputProps<E extends Element> {
 
 export interface LayerIconProps<E extends Element> {
   element: E;
+  getProxiedUrl: (
+    resource: Pick<Resource, 'needsProxy'>,
+    src?: string
+  ) => string | null;
+  currentPageBackgroundColor: Pattern;
+  // Only provided for videos.
+  showVideoPreviewAsBackup?: boolean;
 }
 
-export interface TextContentProps<E extends Element> {
-  element: E;
-  box: ElementBox;
-  previewMode?: boolean;
-  renderResourcePlaceholder?: boolean;
-}
+export type LayerTextFunction<E> = (element: E) => string;
+export type TextContentFunction<E> = (element: E) => string;
 
 export interface DisplayProps<E extends Element> {
   element: E;
+  previewMode: boolean;
+  box: ElementBox;
+  getProxiedUrl: (
+    resource: Pick<Resource, 'needsProxy'>,
+    src?: string
+  ) => string | null;
+  isCurrentResourceProcessing?: (resourceId: ResourceId) => boolean;
+  isCurrentResourceUploading?: (resourceId: ResourceId) => boolean;
+  maybeEnqueueFontStyle: (fonts: FontConfig[]) => Promise<boolean>;
+  siblingCount: number;
+  renderResourcePlaceholder: (args: {
+    blurHash?: string;
+    baseColor?: string;
+  }) => void;
 }
 
 export type Direction = [0 | 1, 0 | 1];
@@ -67,14 +131,16 @@ export interface ElementDefinition<E extends Element = Element> {
   type: ElementType;
   name: string;
   isMedia?: boolean;
-  getLayerText: (element: E) => string;
+  getLayerText: LayerTextFunction<E>;
   defaultAttributes: Partial<E>;
-  Edit: React.VoidFunctionComponent<EditProps<E>>;
-  Frame: React.VoidFunctionComponent<FrameProps<E>>;
-  Output: React.VoidFunctionComponent<OutputProps<E>>;
-  LayerIcon: React.VoidFunctionComponent<LayerIconProps<E>>;
-  TextContent: (element: E) => string;
-  Display: React.VoidFunctionComponent<DisplayProps<E>>;
+  // Only text & media elements have an edit mode.
+  Edit?: VoidFunctionComponent<EditProps<E>>;
+  Frame?: VoidFunctionComponent<FrameProps<E>>;
+  Output: VoidFunctionComponent<OutputProps<E>>;
+  LayerIcon: VoidFunctionComponent<LayerIconProps<E>>;
+  // TODO: Make mandatory? Used for copy/pasting.
+  TextContent?: TextContentFunction<E>;
+  Display: VoidFunctionComponent<DisplayProps<E>>;
   canFlip: boolean;
   isMaskable: boolean;
   isAspectAlwaysLocked: boolean;
@@ -93,11 +159,14 @@ export interface ElementDefinition<E extends Element = Element> {
   };
   panels: string[];
   updateForResizeEvent?: (
-    element: Element,
+    element: E,
     direction: Direction,
     newWidth: number,
     newHeight: number
   ) => { height: number };
 }
 
-export type ElementTypes = Record<ElementType, ElementDefinition<Element>>;
+export type ElementTypes<E extends Element = Element> = Record<
+  E['type'],
+  ElementDefinition<E>
+>;
diff --git a/packages/elements/src/types/index.ts b/packages/elements/src/types/index.ts
index 4ea686ecc236..599e7bd1b8ab 100644
--- a/packages/elements/src/types/index.ts
+++ b/packages/elements/src/types/index.ts
@@ -17,7 +17,7 @@ export * from './data';
 export * from './element';
 export * from './elementType';
 export * from './elementDefinition';
-export * from './propTypes';
 export * from './page';
 export * from './story';
 export * from './taxonomies';
+export * from './media';
diff --git a/packages/elements/src/types/media.ts b/packages/elements/src/types/media.ts
index ab8aa8ac6348..50293918fbfc 100644
--- a/packages/elements/src/types/media.ts
+++ b/packages/elements/src/types/media.ts
@@ -15,11 +15,11 @@
  */
 
 export type Track = {
-  track: string;
-  trackId: number;
-  trackName: string;
   id: string;
+  track: string | null;
+  trackId?: number;
+  kind?: string;
   srclang?: string;
   label?: string;
-  kind: string;
+  needsProxy?: boolean;
 };
diff --git a/packages/elements/src/utils/getDefinitionForType.ts b/packages/elements/src/utils/getDefinitionForType.ts
index b443073445cb..26bdadaed712 100644
--- a/packages/elements/src/utils/getDefinitionForType.ts
+++ b/packages/elements/src/utils/getDefinitionForType.ts
@@ -18,9 +18,11 @@
  * Internal dependencies
  */
 import { elementTypes } from '../elementType';
-import type { ElementType } from '../types';
+import type { ElementTypes } from '../types';
 
-function getDefinitionForType(type: ElementType) {
+function getDefinitionForType<T extends keyof ElementTypes>(
+  type: T
+): ElementTypes[T] {
   const definition = elementTypes[type];
   if (!definition) {
     throw new Error(`No element definition found for '${type}'`);
diff --git a/packages/elements/src/utils/getTransformFlip.ts b/packages/elements/src/utils/getTransformFlip.ts
index 367029069d73..70c3ffd35d31 100644
--- a/packages/elements/src/utils/getTransformFlip.ts
+++ b/packages/elements/src/utils/getTransformFlip.ts
@@ -25,7 +25,7 @@ import type { Flip } from '../types';
  * @param flip Flip value.
  * @return CSS transform scale value.
  */
-function getTransformFlip(flip: Flip) {
+function getTransformFlip(flip?: Flip) {
   // If no flip
   if (!flip || (!flip.horizontal && !flip.vertical)) {
     return null;
diff --git a/packages/elements/tsconfig.json b/packages/elements/tsconfig.json
index a99f454e78ec..eee77a3261b6 100644
--- a/packages/elements/tsconfig.json
+++ b/packages/elements/tsconfig.json
@@ -9,6 +9,7 @@
     { "path": "../i18n" },
     { "path": "../media" },
     { "path": "../patterns" },
+    { "path": "../stickers" },
     { "path": "../units" }
   ],
   "include": ["src/**/*"]
diff --git a/packages/masks/src/borderedMaskedElement.tsx b/packages/masks/src/borderedMaskedElement.tsx
index f21545e85dbc..74ae384c1f0b 100644
--- a/packages/masks/src/borderedMaskedElement.tsx
+++ b/packages/masks/src/borderedMaskedElement.tsx
@@ -98,7 +98,7 @@ function MaskedElement({
 
 interface BorderedMaskedElementProps {
   element: Element;
-  style: CSSProperties;
+  style?: CSSProperties;
   children?: ReactNode;
   applyFlip?: boolean;
   hasFill: boolean;
diff --git a/packages/masks/src/display.tsx b/packages/masks/src/display.tsx
index c0dd344098fa..e5f408414ef1 100644
--- a/packages/masks/src/display.tsx
+++ b/packages/masks/src/display.tsx
@@ -19,7 +19,7 @@
  */
 import { useUnits } from '@googleforcreators/units';
 import type { Border, MediaElement } from '@googleforcreators/elements';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -31,8 +31,10 @@ interface WithMaskProps {
   element: MediaElement;
   fill: boolean;
   previewMode?: boolean;
-  responsiveBorder: Border;
-  style: CSSProperties;
+  responsiveBorder?: Border;
+  style?: CSSProperties;
+  children: ReactNode;
+  applyFlip?: boolean;
 }
 
 export default function WithMask({
diff --git a/packages/masks/src/masks.ts b/packages/masks/src/masks.ts
index ba40188fa2a2..617f5920392a 100644
--- a/packages/masks/src/masks.ts
+++ b/packages/masks/src/masks.ts
@@ -43,7 +43,7 @@ export function canSupportMultiBorder(element: Element) {
   return !mask || DEFAULT_MASK.type === mask?.type;
 }
 
-export function getMaskByType(type: string) {
+export function getMaskByType(type?: string) {
   return MASKS.find((mask) => mask.type === type) || DEFAULT_MASK;
 }
 
diff --git a/packages/masks/src/utils/elementBorder.ts b/packages/masks/src/utils/elementBorder.ts
index 1dbcad96813b..f4ac7e80601b 100644
--- a/packages/masks/src/utils/elementBorder.ts
+++ b/packages/masks/src/utils/elementBorder.ts
@@ -22,7 +22,7 @@ import type {
   BorderRadius,
   Element,
 } from '@googleforcreators/elements';
-import type { CSSProperties } from 'react';
+import type { CSSObject } from 'styled-components';
 
 /**
  * Internal dependencies
@@ -111,7 +111,7 @@ export function getBorderPositionCSS({
  * @param element Element.
  * @return Border style.
  */
-export function getBorderStyle(element: Element): CSSProperties {
+export function getBorderStyle(element: Element): CSSObject {
   // If there's no rectangular border, return the radius only.
   if (!hasBorder(element) || !canSupportMultiBorder(element)) {
     return getBorderRadius(element);
@@ -230,8 +230,8 @@ type Converter = (border: number) => number;
  * @return New border values.
  */
 export function getResponsiveBorder(
-  border: Border,
-  previewMode: boolean,
+  border: Border | undefined,
+  previewMode: boolean | undefined,
   converter: Converter
 ) {
   if (!previewMode || !border) {
diff --git a/packages/moveable/src/moveable.tsx b/packages/moveable/src/moveable.tsx
index 50f936a6e96b..8190a3a79689 100644
--- a/packages/moveable/src/moveable.tsx
+++ b/packages/moveable/src/moveable.tsx
@@ -30,7 +30,7 @@ import InOverlay from './overlay';
 const DEFAULT_Z_INDEX = 10;
 
 interface MoveableWithRefProps extends MoveableProps {
-  onContextMenu: MouseEventHandler<HTMLElement>;
+  onContextMenu?: MouseEventHandler<HTMLElement>;
 }
 
 function MoveableWithRef(
diff --git a/packages/moveable/src/overlay/index.tsx b/packages/moveable/src/overlay/index.tsx
index 971aef286deb..50df87b3d0b2 100644
--- a/packages/moveable/src/overlay/index.tsx
+++ b/packages/moveable/src/overlay/index.tsx
@@ -53,7 +53,7 @@ interface InOverlayProps extends HTMLAttributes<HTMLDivElement> {
   pointerEvents: PointerEventsValue;
   children?: ReactNode;
   zIndex: number;
-  render: (props: RenderProps) => JSX.Element;
+  render?: (props: RenderProps) => JSX.Element;
 }
 
 function InOverlayWithRef(
diff --git a/packages/output/src/test/page.tsx b/packages/output/src/test/page.tsx
index 9f049037a4e2..35a6a139963c 100644
--- a/packages/output/src/test/page.tsx
+++ b/packages/output/src/test/page.tsx
@@ -133,6 +133,7 @@ const PRODUCT_FLOWERS: ProductData = {
 
 describe('Page output', () => {
   beforeAll(() => {
+    // @ts-expect-error TODO: Fix types.
     elementTypes.forEach(registerElementType);
   });
 
diff --git a/packages/output/src/test/story.tsx b/packages/output/src/test/story.tsx
index ea63bdecf1db..a1f2a83364cd 100644
--- a/packages/output/src/test/story.tsx
+++ b/packages/output/src/test/story.tsx
@@ -33,6 +33,7 @@ import StoryOutput from '../story';
 
 describe('Story output', () => {
   beforeAll(() => {
+    // @ts-expect-error TODO: Fix types.
     elementTypes.forEach(registerElementType);
   });
 
diff --git a/packages/output/src/test/textElement.tsx b/packages/output/src/test/textElement.tsx
index 9483da99988f..eb66332236b1 100644
--- a/packages/output/src/test/textElement.tsx
+++ b/packages/output/src/test/textElement.tsx
@@ -94,6 +94,7 @@ const TEXT_WITH_ROTATION = {
 
 describe('Text Element output', () => {
   beforeAll(() => {
+    // @ts-expect-error TODO: Fix types.
     elementTypes.forEach(registerElementType);
   });
 
diff --git a/packages/output/src/types.ts b/packages/output/src/types.ts
index 6b375886b5a9..43ff4419a148 100644
--- a/packages/output/src/types.ts
+++ b/packages/output/src/types.ts
@@ -14,10 +14,6 @@
  * limitations under the License.
  */
 
-// Temporary workaround while this package is not fully converted yet.
-// Adjust tsconfig.json and "types" field in package.json and then
-// delete this file once complete.
-
 /**
  * External dependencies
  */
diff --git a/packages/output/src/typings/global.d.ts b/packages/output/src/typings/global.d.ts
index e7fa511bcaa9..15827efe0a2d 100644
--- a/packages/output/src/typings/global.d.ts
+++ b/packages/output/src/typings/global.d.ts
@@ -51,6 +51,7 @@ interface AmpImg
     HTMLImageElement
   > {
   layout: AmpLayout;
+  'disable-inline-width'?: boolean;
 }
 
 interface AmpStory {
diff --git a/packages/output/src/utils/backgroundAudio.tsx b/packages/output/src/utils/backgroundAudio.tsx
index a4f6f7ae517a..91cb1e78b621 100644
--- a/packages/output/src/utils/backgroundAudio.tsx
+++ b/packages/output/src/utils/backgroundAudio.tsx
@@ -65,7 +65,7 @@ function BackgroundAudio({ backgroundAudio, id }: BackgroundAudioProps) {
               srcLang={srclang}
               label={label}
               kind={kind}
-              src={track}
+              src={track || undefined}
               key={key}
               default={i === 0}
             />
diff --git a/packages/output/src/utils/test/getAutoAdvanceAfter.ts b/packages/output/src/utils/test/getAutoAdvanceAfter.ts
index c7d90bb88670..d86ccc16f303 100644
--- a/packages/output/src/utils/test/getAutoAdvanceAfter.ts
+++ b/packages/output/src/utils/test/getAutoAdvanceAfter.ts
@@ -37,7 +37,8 @@ const id = '999';
 
 describe('getAutoAdvanceAfter', () => {
   beforeAll(() => {
-    elementTypes.forEach((element) => registerElementType(element));
+    // @ts-expect-error TODO: Fix types.
+    elementTypes.forEach(registerElementType);
   });
 
   it('should return the media element with the longest duration', () => {
@@ -148,6 +149,7 @@ describe('getAutoAdvanceAfter', () => {
           length: 10,
           lengthFormatted: '0:10',
         },
+        volume: 1,
         tracks: [],
       } as VideoElement,
     ];
@@ -196,6 +198,7 @@ describe('getAutoAdvanceAfter', () => {
           length: 10,
           lengthFormatted: '0:10',
         },
+        volume: 1,
         tracks: [],
       } as VideoElement,
       { id: '456', x: 0, y: 0, type: 'shape' } as ShapeElement,
diff --git a/packages/output/src/utils/test/getLongestMediaElement.ts b/packages/output/src/utils/test/getLongestMediaElement.ts
index 5b234546d236..6799677aacbf 100644
--- a/packages/output/src/utils/test/getLongestMediaElement.ts
+++ b/packages/output/src/utils/test/getLongestMediaElement.ts
@@ -33,6 +33,7 @@ import getLongestMediaElement from '../getLongestMediaElement';
 
 describe('getLongestMediaElement', () => {
   beforeAll(() => {
+    // @ts-expect-error TODO: Fix types.
     elementTypes.forEach(registerElementType);
   });
 
diff --git a/packages/output/src/utils/test/getStoryMarkup.ts b/packages/output/src/utils/test/getStoryMarkup.ts
index 154ca3de14ac..d3336850b4a5 100644
--- a/packages/output/src/utils/test/getStoryMarkup.ts
+++ b/packages/output/src/utils/test/getStoryMarkup.ts
@@ -36,6 +36,7 @@ jest.mock('flagged');
 
 describe('getStoryMarkup', () => {
   beforeAll(() => {
+    // @ts-expect-error TODO: Fix types.
     elementTypes.forEach(registerElementType);
   });
 
diff --git a/packages/output/src/utils/test/getUsedAmpExtensions.ts b/packages/output/src/utils/test/getUsedAmpExtensions.ts
index dfbd6528aabc..b89f8f70a7fb 100644
--- a/packages/output/src/utils/test/getUsedAmpExtensions.ts
+++ b/packages/output/src/utils/test/getUsedAmpExtensions.ts
@@ -14,9 +14,6 @@
  * limitations under the License.
  */
 
-/**
- * Internal dependencies
- */
 /**
  * External dependencies
  */
@@ -27,6 +24,11 @@ import type {
   ProductElement,
   VideoElement,
 } from '@googleforcreators/elements';
+import type { AudioResource } from '@googleforcreators/media';
+
+/**
+ * Internal dependencies
+ */
 import getUsedAmpExtensions from '../getUsedAmpExtensions';
 
 describe('getUsedAmpExtensions', () => {
@@ -145,11 +147,11 @@ describe('getUsedAmpExtensions', () => {
               height: 100,
               isExternal: false,
             },
+            volume: 1,
             tracks: [
               {
                 track: 'https://example.com/track.vtt',
                 trackId: 123,
-                trackName: 'track.vtt',
                 id: 'rersd-fdfd-fdfd-fdfd',
                 srclang: '',
                 label: '',
@@ -180,12 +182,11 @@ describe('getUsedAmpExtensions', () => {
         id: 'abc',
         backgroundColor: { color: { r: 255, g: 255, b: 255 } },
         backgroundAudio: {
-          resource: { src: 'https://example.com/audio.mp3' },
+          resource: { src: 'https://example.com/audio.mp3' } as AudioResource,
           tracks: [
             {
               track: 'https://example.com/track.vtt',
               trackId: 123,
-              trackName: 'track.vtt',
               id: 'rersd-fdfd-fdfd-fdfd',
               srclang: '',
               label: '',
diff --git a/packages/stickers/src/types.ts b/packages/stickers/src/types.ts
index c70f1e381dbc..88753fa49b81 100644
--- a/packages/stickers/src/types.ts
+++ b/packages/stickers/src/types.ts
@@ -24,6 +24,6 @@ export interface StickerProps extends SVGProps<SVGSVGElement> {
 
 export interface Sticker {
   aspectRatio: number;
-  svg: FunctionComponent;
+  svg: FunctionComponent<{ style?: CSSProperties; className?: string }>;
   title: string;
 }
diff --git a/packages/story-editor/src/app/media/utils/useDetectBaseColor.ts b/packages/story-editor/src/app/media/utils/useDetectBaseColor.ts
index c7775bb7ff2e..ea37b008b43e 100644
--- a/packages/story-editor/src/app/media/utils/useDetectBaseColor.ts
+++ b/packages/story-editor/src/app/media/utils/useDetectBaseColor.ts
@@ -175,6 +175,9 @@ function useDetectBaseColor({
         return;
       }
       const imageSrcProxied = getProxiedUrl(resource, imageSrc);
+      if (!imageSrcProxied) {
+        return;
+      }
       try {
         const color = await getMediaBaseColor(imageSrcProxied);
         await saveBaseColor(resource, color);
diff --git a/packages/story-editor/src/utils/useCORSProxy.ts b/packages/story-editor/src/utils/useCORSProxy.ts
index c927cb7f27e8..8459e90af6de 100644
--- a/packages/story-editor/src/utils/useCORSProxy.ts
+++ b/packages/story-editor/src/utils/useCORSProxy.ts
@@ -65,12 +65,12 @@ function useCORSProxy() {
    * @return {null|string} Return proxied source or null.
    */
   const getProxiedUrl = useCallback(
-    (resource: Resource, src: string) => {
+    (resource: Resource, src?: string) => {
       const { needsProxy } = resource;
       if (needsProxy && src && getProxyUrl) {
         return getProxyUrl(src);
       }
-      return src;
+      return src || null;
     },
     [getProxyUrl]
   );
diff --git a/packages/transform/package.json b/packages/transform/package.json
index 146c253d4893..960863d567f8 100644
--- a/packages/transform/package.json
+++ b/packages/transform/package.json
@@ -38,8 +38,5 @@
   },
   "dependencies": {
     "@googleforcreators/react": "*"
-  },
-  "devDependencies": {
-    "prop-types": "^15.7.2"
   }
 }
diff --git a/packages/transform/src/transformProvider.tsx b/packages/transform/src/transformProvider.tsx
index f924c32ca6bc..df9f36faea6f 100644
--- a/packages/transform/src/transformProvider.tsx
+++ b/packages/transform/src/transformProvider.tsx
@@ -48,34 +48,37 @@ function TransformProvider({ children }: { children: ReactNode }) {
     []
   );
 
-  const pushTransform = useCallback((id: string, transform: Transform) => {
-    const handlerListMap = transformHandlersRef.current;
-    const lastTransforms = lastTransformsRef.current;
-    const handlerList = handlerListMap[id];
+  const pushTransform = useCallback(
+    (id: string, transform: Transform | null) => {
+      const handlerListMap = transformHandlersRef.current;
+      const lastTransforms = lastTransformsRef.current;
+      const handlerList = handlerListMap[id];
 
-    if (handlerList) {
-      handlerList.forEach((handler) => handler(transform));
-    }
+      if (handlerList) {
+        handlerList.forEach((handler) => handler(transform));
+      }
 
-    if (transform === null) {
-      lastTransforms[id] = null;
-    } else {
-      lastTransforms[id] = { ...lastTransforms[id], ...transform };
-    }
+      if (transform === null) {
+        lastTransforms[id] = null;
+      } else {
+        lastTransforms[id] = { ...lastTransforms[id], ...transform };
+      }
 
-    if (isDoneTransform(lastTransforms[id])) {
-      const allTransformsDone =
-        Object.values(lastTransforms).every(isDoneTransform);
-      if (allTransformsDone) {
-        lastTransformsRef.current = {};
-        setIsAnythingTransforming(false);
+      if (isDoneTransform(lastTransforms[id])) {
+        const allTransformsDone =
+          Object.values(lastTransforms).every(isDoneTransform);
+        if (allTransformsDone) {
+          lastTransformsRef.current = {};
+          setIsAnythingTransforming(false);
+        }
+        // isAnythingTransforming is relevant for transformations relevant to Moveable.
+        // Suppress communicating static transformations to the world.
+      } else if (transform && !transform.staticTransformation) {
+        setIsAnythingTransforming(true);
       }
-      // isAnythingTransforming is relevant for transformations relevant to Moveable.
-      // Suppress communicating static transformations to the world.
-    } else if (!transform.staticTransformation) {
-      setIsAnythingTransforming(true);
-    }
-  }, []);
+    },
+    []
+  );
 
   const clearTransforms = useCallback(() => {
     lastTransformsRef.current = {};
diff --git a/packages/transform/src/types.ts b/packages/transform/src/types.ts
index e7a6e843a13e..3f848e0d4a88 100644
--- a/packages/transform/src/types.ts
+++ b/packages/transform/src/types.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export type TransformHandler = (frame: object | null) => void;
+export type TransformHandler = (frame: Transform | null) => void;
 export type HandlerRegister = (
   id: string,
   handler: TransformHandler
@@ -25,9 +25,14 @@ export type TransformsList = Record<string, Record<string, unknown> | null>;
 
 export interface Transform {
   staticTransformation: boolean;
+  color?: unknown;
+  style?: string;
+  resize?: [number, number];
+  dropTargets?: { hover: boolean; active: boolean };
+  updates?: Record<string, unknown>;
 }
 
-export type PushTransform = (id: string, transform: Transform) => void;
+export type PushTransform = (id: string, transform: Transform | null) => void;
 export type ClearTransform = () => void;
 
 export interface State {
diff --git a/tsconfig.json b/tsconfig.json
index 675cb01bd582..1ab09e3235bd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,6 @@
     { "path": "packages/animation" },
     { "path": "packages/commander" },
     { "path": "packages/dashboard" },
-    { "path": "packages/element-library" },
     { "path": "packages/design-system" },
     { "path": "packages/dom" },
     { "path": "packages/elements" },