From 1ca1da2e777a81f1d05616450e5619348559452a Mon Sep 17 00:00:00 2001
From: Emerson Pfeiffer <epfeiffe@umich.edu>
Date: Fri, 9 Aug 2024 13:43:51 -0700
Subject: [PATCH] FileUploader name change (#5347)

---
 documentation-site/cheat-sheet.jsx            | 144 ++--
 documentation-site/components/gallery.jsx     |   4 +-
 ...UploaderBeta.jsx => FileUploaderBasic.jsx} |   2 +-
 .../components/thumbs/index.jsx               |   2 +-
 ...ploader-beta.ts => file-uploader-basic.ts} |  98 +--
 .../components/yard/config/file-uploader.ts   |  88 +-
 .../examples/bottom-navigation/overflow.tsx   |   4 +-
 .../_overrides_component.tsx                  |  24 +-
 .../examples/file-uploader-basic/basic.tsx    |  74 ++
 .../examples/file-uploader-basic/disabled.tsx |   6 +
 .../error.tsx                                 |   4 +-
 .../indeterminate-progress.tsx                |   6 +-
 .../file-uploader-basic/overrides.tsx         | 102 +++
 .../examples/file-uploader-beta/basic.tsx     |  38 -
 .../examples/file-uploader-beta/overrides.tsx |  58 --
 .../examples/file-uploader/basic.tsx          |  95 +--
 .../examples/file-uploader/disabled.tsx       |   6 -
 .../item-preview.tsx                          |   5 +-
 .../label-hint.tsx                            |   4 +-
 .../examples/file-uploader/overrides.tsx      | 133 +--
 .../upload-restrictions.tsx                   |   8 +-
 .../pages/components/file-uploader-basic.mdx  |  77 ++
 .../pages/components/file-uploader-beta.mdx   |  75 --
 .../pages/components/file-uploader.mdx        |  45 +-
 documentation-site/routes.jsx                 |   4 +-
 package.json                                  |   2 +-
 src/banner/banner.tsx                         |   7 +-
 src/banner/types.ts                           |   1 +
 src/button-timed/styled-components.ts         |   6 +-
 src/data-table/__tests__/data-table.test.tsx  |  20 +-
 src/data-table/locale.ts                      |   2 +
 src/data-table/stateful-data-table.tsx        |   9 +-
 src/data-table/types.ts                       |   1 +
 src/datepicker/__tests__/datepicker.test.tsx  |  24 +
 src/dialog/dialog.tsx                         |  12 +-
 src/dialog/types.ts                           |   4 +-
 .../__tests__/file-uploader-basic.test.tsx    | 186 +++++
 .../file-uploader-basic.tsx                   | 299 +++++++
 src/file-uploader-basic/index.ts              |  21 +
 src/file-uploader-basic/locale.ts             |  23 +
 src/file-uploader-basic/styled-components.ts  |  89 ++
 src/file-uploader-basic/types.ts              |  56 ++
 .../__tests__/file-uploader-beta.test.tsx     | 566 -------------
 src/file-uploader-beta/file-uploader-beta.tsx | 503 -----------
 src/file-uploader-beta/index.ts               |  29 -
 src/file-uploader-beta/locale.ts              |  19 -
 src/file-uploader-beta/styled-components.ts   | 264 ------
 src/file-uploader-beta/types.ts               |  67 --
 .../__tests__/file-uploader.test.tsx          | 668 +++++++++++++--
 .../constants.ts                              |   7 +
 src/file-uploader/file-uploader.tsx           | 778 +++++++++++++-----
 src/file-uploader/index.ts                    |  19 +-
 src/file-uploader/locale.ts                   |  20 +-
 src/file-uploader/styled-components.ts        | 284 +++++--
 src/file-uploader/types.ts                    |  90 +-
 .../utils.ts                                  |  17 +
 src/icon/circle-exclamation-point-filled.tsx  |  54 ++
 src/icon/icon-exports.ts                      |   1 +
 src/locale/en_US.ts                           |   4 +-
 src/locale/es_AR.ts                           |  15 +-
 src/locale/index.tsx                          |   4 +-
 src/locale/tr_TR.ts                           |  15 +-
 src/locale/types.ts                           |   4 +-
 src/payment-card/custom-cards.config.ts       |  23 +-
 src/payment-card/payment-card.tsx             |   1 -
 .../__tests__/phone-input.test.tsx            |  17 +
 .../__tests__/progressbar-rounded.test.tsx    |  29 +
 src/progress-bar/progressbar-rounded.tsx      |   2 +-
 src/progress-bar/styled-components.tsx        |  16 +-
 src/styles/types.ts                           |   1 +
 src/tile/__tests__/tile.test.tsx              |   1 -
 71 files changed, 2940 insertions(+), 2446 deletions(-)
 rename documentation-site/components/thumbs/components/{FileUploaderBeta.jsx => FileUploaderBasic.jsx} (92%)
 rename documentation-site/components/yard/config/{file-uploader-beta.ts => file-uploader-basic.ts} (52%)
 rename documentation-site/examples/{file-uploader => file-uploader-basic}/_overrides_component.tsx (77%)
 create mode 100644 documentation-site/examples/file-uploader-basic/basic.tsx
 create mode 100644 documentation-site/examples/file-uploader-basic/disabled.tsx
 rename documentation-site/examples/{file-uploader => file-uploader-basic}/error.tsx (96%)
 rename documentation-site/examples/{file-uploader => file-uploader-basic}/indeterminate-progress.tsx (88%)
 create mode 100644 documentation-site/examples/file-uploader-basic/overrides.tsx
 delete mode 100644 documentation-site/examples/file-uploader-beta/basic.tsx
 delete mode 100644 documentation-site/examples/file-uploader-beta/overrides.tsx
 delete mode 100644 documentation-site/examples/file-uploader/disabled.tsx
 rename documentation-site/examples/{file-uploader-beta => file-uploader}/item-preview.tsx (82%)
 rename documentation-site/examples/{file-uploader-beta => file-uploader}/label-hint.tsx (73%)
 rename documentation-site/examples/{file-uploader-beta => file-uploader}/upload-restrictions.tsx (92%)
 create mode 100644 documentation-site/pages/components/file-uploader-basic.mdx
 delete mode 100644 documentation-site/pages/components/file-uploader-beta.mdx
 create mode 100644 src/file-uploader-basic/__tests__/file-uploader-basic.test.tsx
 create mode 100644 src/file-uploader-basic/file-uploader-basic.tsx
 create mode 100644 src/file-uploader-basic/index.ts
 create mode 100644 src/file-uploader-basic/locale.ts
 create mode 100644 src/file-uploader-basic/styled-components.ts
 create mode 100644 src/file-uploader-basic/types.ts
 delete mode 100644 src/file-uploader-beta/__tests__/file-uploader-beta.test.tsx
 delete mode 100644 src/file-uploader-beta/file-uploader-beta.tsx
 delete mode 100644 src/file-uploader-beta/index.ts
 delete mode 100644 src/file-uploader-beta/locale.ts
 delete mode 100644 src/file-uploader-beta/styled-components.ts
 delete mode 100644 src/file-uploader-beta/types.ts
 rename src/{file-uploader-beta => file-uploader}/constants.ts (78%)
 rename src/{file-uploader-beta => file-uploader}/utils.ts (60%)
 create mode 100644 src/icon/circle-exclamation-point-filled.tsx
 create mode 100644 src/phone-input/__tests__/phone-input.test.tsx
 create mode 100644 src/progress-bar/__tests__/progressbar-rounded.test.tsx

diff --git a/documentation-site/cheat-sheet.jsx b/documentation-site/cheat-sheet.jsx
index 5949c34023..b44bd0b2f0 100644
--- a/documentation-site/cheat-sheet.jsx
+++ b/documentation-site/cheat-sheet.jsx
@@ -1438,6 +1438,63 @@ const outlines = [
   },
   {
     file: "src/file-uploader/types.ts",
+    definitions: [
+      {
+        name: "StyleProps",
+        lineStart: 15,
+        children: [
+          { name: "$alt", lineStart: 16 },
+          { name: "$color", lineStart: 17 },
+          { name: "$fileCount", lineStart: 18 },
+          { name: "$src", lineStart: 19 },
+        ],
+      },
+      {
+        name: "FileUploaderOverrides",
+        lineStart: 22,
+        children: [
+          { name: "CircleCheckFilledIcon", lineStart: 23 },
+          { name: "CircleExclamationPointFilledIcon", lineStart: 24 },
+          { name: "DeleteButtonComponent", lineStart: 25 },
+          { name: "FileRow", lineStart: 26 },
+          { name: "FileRowColumn", lineStart: 27 },
+          { name: "FileRowContent", lineStart: 28 },
+          { name: "FileRowFileName", lineStart: 29 },
+          { name: "FileRowText", lineStart: 30 },
+          { name: "FileRowUploadMessage", lineStart: 31 },
+          { name: "FileRowUploadText", lineStart: 32 },
+          { name: "FileRows", lineStart: 33 },
+          { name: "Hint", lineStart: 34 },
+          { name: "ImagePreviewThumbnail", lineStart: 35 },
+          { name: "ItemPreviewContainer", lineStart: 36 },
+          { name: "Label", lineStart: 37 },
+          { name: "PaperclipFilledIcon", lineStart: 38 },
+          { name: "ParentRoot", lineStart: 39 },
+          { name: "TrashCanFilledIcon", lineStart: 40 },
+        ],
+      },
+      { name: "FileRow", lineStart: 43, children: [
+        { name: "errorMessage", lineStart: 44 },
+        { name: "file", lineStart: 45 },
+        { name: "id", lineStart: 46 },
+        { name: "fileInfo", lineStart: 49 },
+        { name: "imagePreviewThumbnail", lineStart: 50 },
+        { name: "status", lineStart: 52 },
+      ] },
+      { name: "FileUploaderProps", lineStart: 55, children: [
+        { name: "fileRows", lineStart: 59 },
+        { name: "hint", lineStart: 60 },
+        { name: "itemPreview", lineStart: 61 },
+        { name: "label", lineStart: 62 },
+        { name: "maxFiles", lineStart: 63 },
+        { name: "overrides", lineStart: 64 },
+        { name: "processFileOnDrop", lineStart: 66 },
+        { name: "setFileRows", lineStart: 67 },
+      ] },
+    ],
+  },
+  {
+    file: "src/file-uploader-basic/types.ts",
     definitions: [
       {
         name: "StyleProps",
@@ -1452,7 +1509,7 @@ const outlines = [
         ],
       },
       {
-        name: "FileUploaderOverrides",
+        name: "FileUploaderBasicOverrides",
         lineStart: 20,
         children: [
           { name: "Root", lineStart: 21 },
@@ -1469,64 +1526,8 @@ const outlines = [
           { name: "ProgressBar", lineStart: 32 },
         ],
       },
-      { name: "FileUploaderProps", lineStart: 35, children: [] },
-      { name: "DropFilesEventHandler", lineStart: 48, children: [] },
-    ],
-  },
-  {
-    file: "src/file-uploader-beta/types.ts",
-    definitions: [
-      {
-        name: "StyleProps",
-        lineStart: 15,
-        children: [
-          { name: "$alt", lineStart: 16 },
-          { name: "$color", lineStart: 17 },
-          { name: "$fileCount", lineStart: 18 },
-          { name: "$src", lineStart: 19 },
-        ],
-      },
-      {
-        name: "FileUploaderBetaOverrides",
-        lineStart: 22,
-        children: [
-          { name: "AlertIcon", lineStart: 23 },
-          { name: "CircleCheckFilledIcon", lineStart: 24 },
-          { name: "FileRow", lineStart: 25 },
-          { name: "FileRowColumn", lineStart: 26 },
-          { name: "FileRowContent", lineStart: 27 },
-          { name: "FileRowFileName", lineStart: 28 },
-          { name: "FileRowText", lineStart: 29 },
-          { name: "FileRowUploadMessage", lineStart: 30 },
-          { name: "FileRowUploadText", lineStart: 31 },
-          { name: "FileRows", lineStart: 32 },
-          { name: "Hint", lineStart: 33 },
-          { name: "ImagePreviewThumbnail", lineStart: 34 },
-          { name: "ItemPreviewContainer", lineStart: 35 },
-          { name: "Label", lineStart: 36 },
-          { name: "PaperclipFilledIcon", lineStart: 37 },
-          { name: "ParentRoot", lineStart: 38 },
-          { name: "TrashCanFilledIcon", lineStart: 39 },
-          { name: "TrashCanFilledIconContainer", lineStart: 40 },
-        ],
-      },
-      { name: "FileRow", lineStart: 43, children: [
-        { name: "errorMessage", lineStart: 44 },
-        { name: "file", lineStart: 45 },
-        { name: "fileInfo", lineStart: 48 },
-        { name: "imagePreviewThumbnail", lineStart: 49 },
-        { name: "status", lineStart: 51 },
-      ] },
-      { name: "FileUploaderBetaProps", lineStart: 54, children: [
-        { name: "fileRows", lineStart: 58 },
-        { name: "hint", lineStart: 59 },
-        { name: "itemPreview", lineStart: 60 },
-        { name: "label", lineStart: 61 },
-        { name: "maxFiles", lineStart: 62 },
-        { name: "overrides", lineStart: 63 },
-        { name: "processFileOnDrop", lineStart: 65 },
-        { name: "setFileRows", lineStart: 66 },
-      ] },
+      { name: "FileUploaderBasicProps", lineStart: 35, children: [] },
+      { name: "DropFilesEventHandler", lineStart: 52, children: [] },
     ],
   },
   {
@@ -2124,18 +2125,19 @@ const outlines = [
         name: "Locale",
         lineStart: 20,
         children: [
-          { name: "accordion", lineStart: 21 },
-          { name: "breadcrumbs", lineStart: 22 },
-          { name: "datepicker", lineStart: 23 },
-          { name: "datatable", lineStart: 24 },
-          { name: "buttongroup", lineStart: 25 },
-          { name: "fileuploader", lineStart: 26 },
-          { name: "menu", lineStart: 27 },
-          { name: "modal", lineStart: 28 },
-          { name: "drawer", lineStart: 29 },
-          { name: "pagination", lineStart: 30 },
-          { name: "select", lineStart: 31 },
-          { name: "toast", lineStart: 32 },
+          { name: "accordion", lineStart: 22 },
+          { name: "breadcrumbs", lineStart: 23 },
+          { name: "datepicker", lineStart: 24 },
+          { name: "datatable", lineStart: 25 },
+          { name: "buttongroup", lineStart: 26 },
+          { name: "fileuploader", lineStart: 27 },
+          { name: "fileuploaderbasic", lineStart: 28 },
+          { name: "menu", lineStart: 29 },
+          { name: "modal", lineStart: 30 },
+          { name: "drawer", lineStart: 31 },
+          { name: "pagination", lineStart: 32 },
+          { name: "select", lineStart: 33 },
+          { name: "toast", lineStart: 34 },
         ],
       },
     ],
diff --git a/documentation-site/components/gallery.jsx b/documentation-site/components/gallery.jsx
index 574c0bfc88..9acf7721f6 100644
--- a/documentation-site/components/gallery.jsx
+++ b/documentation-site/components/gallery.jsx
@@ -66,8 +66,8 @@ const COMPONENTS = {
       Component: thumbnails.SvgFileUploader,
     },
     {
-      href: "/components/file-uploader-beta",
-      Component: thumbnails.SvgFileUploaderBeta,
+      href: "/components/file-uploader-basic",
+      Component: thumbnails.SvgFileUploaderBasic,
     },
     {
       href: "/components/menu",
diff --git a/documentation-site/components/thumbs/components/FileUploaderBeta.jsx b/documentation-site/components/thumbs/components/FileUploaderBasic.jsx
similarity index 92%
rename from documentation-site/components/thumbs/components/FileUploaderBeta.jsx
rename to documentation-site/components/thumbs/components/FileUploaderBasic.jsx
index d2db519356..3c9bceadf3 100644
--- a/documentation-site/components/thumbs/components/FileUploaderBeta.jsx
+++ b/documentation-site/components/thumbs/components/FileUploaderBasic.jsx
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import React from "react";
 
-export default function SvgFileUploaderBeta(props) {
+export default function SvgFileUploaderBasic(props) {
   return (
     <svg width={232} height={145} fill="none" {...props}>
       <path fill={props.colors[0]} d="M48 37h137v72H48z" />
diff --git a/documentation-site/components/thumbs/index.jsx b/documentation-site/components/thumbs/index.jsx
index db448b3d23..9268bb2b26 100644
--- a/documentation-site/components/thumbs/index.jsx
+++ b/documentation-site/components/thumbs/index.jsx
@@ -21,7 +21,7 @@ export { default as SvgTextarea } from "./components/Textarea.jsx";
 
 // Pickers
 export { default as SvgFileUploader } from "./components/FileUploader.jsx";
-export { default as SvgFileUploaderBeta } from "./components/FileUploader.jsx";
+export { default as SvgFileUploaderBasic } from "./components/FileUploaderBasic.jsx";
 export { default as SvgMenu } from "./components/Menu.jsx";
 export { default as SvgRating } from "./components/Rating.jsx";
 export { default as SvgSelect } from "./components/Select.jsx";
diff --git a/documentation-site/components/yard/config/file-uploader-beta.ts b/documentation-site/components/yard/config/file-uploader-basic.ts
similarity index 52%
rename from documentation-site/components/yard/config/file-uploader-beta.ts
rename to documentation-site/components/yard/config/file-uploader-basic.ts
index 27026e3da7..611ee21c54 100644
--- a/documentation-site/components/yard/config/file-uploader-beta.ts
+++ b/documentation-site/components/yard/config/file-uploader-basic.ts
@@ -5,10 +5,10 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
-import { FileUploaderBeta } from "baseui/file-uploader-beta";
+import { FileUploaderBasic } from "baseui/file-uploader-basic";
 import { PropTypes } from "react-view";
 import type { TConfig } from "../types";
-import iconConfig from "./icon";
+import buttonConfig from "./button";
 
 const changeHandlers = [
   "onClick",
@@ -19,18 +19,21 @@ const changeHandlers = [
   "onDragEnter",
   "onDragOver",
   "onDragLeave",
+  "onDrop",
+  "onDropAccepted",
+  "onDropRejected",
   "onFileDialogCancel",
   "onCancel",
   "onRetry",
 ];
 
-const FileUploaderBetaConfig: TConfig = {
-  componentName: "FileUploaderBeta",
+const FileUploaderBasicConfig: TConfig = {
+  componentName: "FileUploaderBasic",
   imports: {
-    "baseui/file-uploader-beta": { named: ["FileUploaderBeta"] },
+    "baseui/file-uploader-basic": { named: ["FileUploaderBasic"] },
   },
   scope: {
-    FileUploaderBeta,
+    FileUploaderBasic: FileUploaderBasic,
   },
   theme: [],
   props: {
@@ -40,38 +43,6 @@ const FileUploaderBetaConfig: TConfig = {
       description:
         "Set accepted file types. See https://github.com/okonet/attr-accept for more information",
     },
-    disabled: {
-      value: false,
-      type: PropTypes.Boolean,
-      description: "Renders component in disabled state.",
-    },
-    fileRows: {
-      value: "[]",
-      type: PropTypes.Array,
-      description: "Array of file objects.",
-      stateful: true,
-    },
-    hint: {
-      value: undefined,
-      type: PropTypes.String,
-      description: "Hint text to be displayed below the file rows.",
-    },
-    itemPreview: {
-      value: false,
-      type: PropTypes.Boolean,
-      description:
-        "Renders a file preview thumbnail. Works best with image files.",
-    },
-    label: {
-      value: undefined,
-      type: PropTypes.String,
-      description: "Label text to be displayed above the file uploader.",
-    },
-    maxFiles: {
-      value: undefined,
-      type: PropTypes.Number,
-      description: "Maximum number of files that can be uploaded.",
-    },
     maxSize: {
       value: undefined,
       type: PropTypes.Number,
@@ -82,36 +53,28 @@ const FileUploaderBetaConfig: TConfig = {
       type: PropTypes.Number,
       description: "Minimum file size (in bytes).",
     },
-    processFileOnDrop: {
-      value: undefined,
-      type: PropTypes.Function,
-      description:
-        "Application defined callback function that runs on file drop. Takes a File as input and returns a Promise<{ errorMessage: string | null; fileInfo?: any }>.",
-    },
-    setFileRows: {
-      value: "newFileRows => setFileRows(newFileRows)",
-      type: PropTypes.Function,
-      description: "Function to set file rows.",
-    },
     multiple: {
       value: undefined,
       type: PropTypes.Boolean,
       description:
         "Allow drag n drop (or selection from the file dialog) of multiple files",
-      hidden: true,
     },
     disableClick: {
       value: undefined,
       type: PropTypes.Boolean,
       description:
         "Disallow clicking on the dropzone container to open file dialog.",
-      hidden: true,
+    },
+    disabled: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in disabled state.",
     },
     errorMessage: {
-      value: undefined,
+      value: "",
       type: PropTypes.String,
       description: "Error message to be displayed.",
-      hidden: true,
+      stateful: true,
     },
     ...changeHandlers.reduce((acc, current) => {
       //@ts-ignore
@@ -141,24 +104,15 @@ const FileUploaderBetaConfig: TConfig = {
       description: "Lets you customize all aspects of the component.",
       custom: {
         names: [
-          { ...iconConfig, componentName: "AlertIcon" },
-          { ...iconConfig, componentName: "CircleCheckFilledIcon" },
-          "FileRow",
-          "FileRowColumn",
-          "FileRowContent",
-          "FileRowFileName",
-          "FileRowText",
-          "FileRowUploadMessage",
-          "FileRowUploadText",
-          "FileRows",
-          "Hint",
-          "ImagePreviewThumbnail",
-          "ItemPreviewContainer",
-          "Label",
-          { ...iconConfig, componentName: "PaperclipFilledIcon" },
-          "ParentRoot",
-          { ...iconConfig, componentName: "TrashCanFilledIcon" },
-          "TrashCanFilledIconContainer",
+          { ...buttonConfig, componentName: "ButtonComponent" },
+          { ...buttonConfig, componentName: "CancelButtonComponent" },
+          { ...buttonConfig, componentName: "RetryButtonComponent" },
+          "ContentMessage",
+          "ErrorMessage",
+          "FileDragAndDrop",
+          "HiddenInput",
+          "Spinner",
+          "ProgressBar",
         ],
         sharedProps: {},
       },
@@ -166,4 +120,4 @@ const FileUploaderBetaConfig: TConfig = {
   },
 };
 
-export default FileUploaderBetaConfig;
+export default FileUploaderBasicConfig;
diff --git a/documentation-site/components/yard/config/file-uploader.ts b/documentation-site/components/yard/config/file-uploader.ts
index 04647d5f4a..778941bb13 100644
--- a/documentation-site/components/yard/config/file-uploader.ts
+++ b/documentation-site/components/yard/config/file-uploader.ts
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import { FileUploader } from "baseui/file-uploader";
 import { PropTypes } from "react-view";
 import type { TConfig } from "../types";
-import buttonConfig from "./button";
+import iconConfig from "./icon";
 
 const changeHandlers = [
   "onClick",
@@ -19,9 +19,6 @@ const changeHandlers = [
   "onDragEnter",
   "onDragOver",
   "onDragLeave",
-  "onDrop",
-  "onDropAccepted",
-  "onDropRejected",
   "onFileDialogCancel",
   "onCancel",
   "onRetry",
@@ -33,7 +30,7 @@ const FileUploaderConfig: TConfig = {
     "baseui/file-uploader": { named: ["FileUploader"] },
   },
   scope: {
-    FileUploader,
+    FileUploader: FileUploader,
   },
   theme: [],
   props: {
@@ -43,6 +40,38 @@ const FileUploaderConfig: TConfig = {
       description:
         "Set accepted file types. See https://github.com/okonet/attr-accept for more information",
     },
+    disabled: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in disabled state.",
+    },
+    fileRows: {
+      value: "[]",
+      type: PropTypes.Array,
+      description: "Array of file objects.",
+      stateful: true,
+    },
+    hint: {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Hint text to be displayed below the file rows.",
+    },
+    itemPreview: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        "Renders a file preview thumbnail. Works best with image files.",
+    },
+    label: {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Label text to be displayed above the file uploader.",
+    },
+    maxFiles: {
+      value: undefined,
+      type: PropTypes.Number,
+      description: "Maximum number of files that can be uploaded.",
+    },
     maxSize: {
       value: undefined,
       type: PropTypes.Number,
@@ -53,28 +82,36 @@ const FileUploaderConfig: TConfig = {
       type: PropTypes.Number,
       description: "Minimum file size (in bytes).",
     },
+    processFileOnDrop: {
+      value: undefined,
+      type: PropTypes.Function,
+      description:
+        "Application defined callback function that runs on file drop. Takes a File as input and returns a Promise<{ errorMessage: string | null; fileInfo?: any }>.",
+    },
+    setFileRows: {
+      value: "newFileRows => setFileRows(newFileRows)",
+      type: PropTypes.Function,
+      description: "Function to set file rows.",
+    },
     multiple: {
       value: undefined,
       type: PropTypes.Boolean,
       description:
         "Allow drag n drop (or selection from the file dialog) of multiple files",
+      hidden: true,
     },
     disableClick: {
       value: undefined,
       type: PropTypes.Boolean,
       description:
         "Disallow clicking on the dropzone container to open file dialog.",
-    },
-    disabled: {
-      value: false,
-      type: PropTypes.Boolean,
-      description: "Renders component in disabled state.",
+      hidden: true,
     },
     errorMessage: {
-      value: "",
+      value: undefined,
       type: PropTypes.String,
       description: "Error message to be displayed.",
-      stateful: true,
+      hidden: true,
     },
     ...changeHandlers.reduce((acc, current) => {
       //@ts-ignore
@@ -104,15 +141,24 @@ const FileUploaderConfig: TConfig = {
       description: "Lets you customize all aspects of the component.",
       custom: {
         names: [
-          { ...buttonConfig, componentName: "ButtonComponent" },
-          { ...buttonConfig, componentName: "CancelButtonComponent" },
-          { ...buttonConfig, componentName: "RetryButtonComponent" },
-          "ContentMessage",
-          "ErrorMessage",
-          "FileDragAndDrop",
-          "HiddenInput",
-          "Spinner",
-          "ProgressBar",
+          { ...iconConfig, componentName: "AlertIcon" },
+          { ...iconConfig, componentName: "CircleCheckFilledIcon" },
+          "FileRow",
+          "FileRowColumn",
+          "FileRowContent",
+          "FileRowFileName",
+          "FileRowText",
+          "FileRowUploadMessage",
+          "FileRowUploadText",
+          "FileRows",
+          "Hint",
+          "ImagePreviewThumbnail",
+          "ItemPreviewContainer",
+          "Label",
+          { ...iconConfig, componentName: "PaperclipFilledIcon" },
+          "ParentRoot",
+          { ...iconConfig, componentName: "TrashCanFilledIcon" },
+          "TrashCanFilledIconContainer",
         ],
         sharedProps: {},
       },
diff --git a/documentation-site/examples/bottom-navigation/overflow.tsx b/documentation-site/examples/bottom-navigation/overflow.tsx
index 3a43f459b6..747cd3a8a3 100644
--- a/documentation-site/examples/bottom-navigation/overflow.tsx
+++ b/documentation-site/examples/bottom-navigation/overflow.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { styled } from "baseui/styles";
 import { BottomNavigation, NavItem } from "baseui/bottom-navigation";
 import { MessageCard } from "baseui/message-card";
-import { FileUploader } from "baseui/file-uploader";
+import { FileUploaderBasic } from "baseui/file-uploader-basic";
 import { colors } from "baseui/tokens";
 import Calendar from "baseui/icon/calendar";
 import Alert from "baseui/icon/alert";
@@ -126,7 +126,7 @@ export default function Example() {
         <NavItem title="Upload" icon={Upload}>
           <TextContent numParagraphs={0}>
             <h1>File Upload</h1>
-            <FileUploader errorMessage={""} />
+            <FileUploaderBasic errorMessage={""} />
           </TextContent>
         </NavItem>
       </BottomNavigation>
diff --git a/documentation-site/examples/file-uploader/_overrides_component.tsx b/documentation-site/examples/file-uploader-basic/_overrides_component.tsx
similarity index 77%
rename from documentation-site/examples/file-uploader/_overrides_component.tsx
rename to documentation-site/examples/file-uploader-basic/_overrides_component.tsx
index 10d4e457bf..a92386ea13 100644
--- a/documentation-site/examples/file-uploader/_overrides_component.tsx
+++ b/documentation-site/examples/file-uploader-basic/_overrides_component.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import {FileUploader} from 'baseui/file-uploader';
-import {FileUploaderOverrides} from 'baseui/file-uploader';
+import * as React from "react";
+import { FileUploaderBasic } from "baseui/file-uploader-basic";
+import { FileUploaderBasicOverrides } from "baseui/file-uploader-basic";
 
 export default class Uploader extends React.Component<
-  {overrides: FileUploaderOverrides},
-  {progressAmount: number}
+  { overrides: FileUploaderBasicOverrides },
+  { progressAmount: number }
 > {
-  state = {progressAmount: 0};
+  state = { progressAmount: 0 };
   intervalId: number = 0;
 
   // startProgress method is only illustrative. Use the progress info returned
@@ -26,13 +26,13 @@ export default class Uploader extends React.Component<
   // reset the component to its original state. use this to cancel/retry the upload.
   reset = () => {
     clearInterval(this.intervalId);
-    this.setState({progressAmount: 0});
+    this.setState({ progressAmount: 0 });
   };
 
   render() {
     return (
       <React.Fragment>
-        <FileUploader
+        <FileUploaderBasic
           onCancel={this.reset}
           onDrop={() => {
             // handle file upload...
@@ -42,24 +42,24 @@ export default class Uploader extends React.Component<
           progressMessage={
             this.state.progressAmount
               ? `Uploading... ${this.state.progressAmount}% of 100%`
-              : ''
+              : ""
           }
           overrides={this.props.overrides}
         />
         <br />
         <br />
-        <FileUploader
+        <FileUploaderBasic
           onCancel={this.reset}
           onDrop={() => {
             // handle file upload...
             this.startProgress();
           }}
           progressAmount={this.state.progressAmount}
-          errorMessage={'Something went wrong. Sorry!'}
+          errorMessage={"Something went wrong. Sorry!"}
           progressMessage={
             this.state.progressAmount
               ? `Uploading... ${this.state.progressAmount}% of 100%`
-              : ''
+              : ""
           }
           overrides={this.props.overrides}
         />
diff --git a/documentation-site/examples/file-uploader-basic/basic.tsx b/documentation-site/examples/file-uploader-basic/basic.tsx
new file mode 100644
index 0000000000..3d65c8e234
--- /dev/null
+++ b/documentation-site/examples/file-uploader-basic/basic.tsx
@@ -0,0 +1,74 @@
+import * as React from "react";
+import { FileUploaderBasic } from "baseui/file-uploader-basic";
+
+// https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+function useInterval(callback: any, delay: number | null) {
+  const savedCallback = React.useRef(() => {});
+
+  // Remember the latest callback.
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  React.useEffect((): any => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}
+
+// useFakeProgress is an elaborate way to show a fake file transfer for illustrative purposes. You
+// don't need this is your application. Use metadata from your upload destination if it's available,
+// or don't provide progress.
+function useFakeProgress(): [number, () => void, () => void] {
+  const [fakeProgress, setFakeProgress] = React.useState(0);
+  const [isActive, setIsActive] = React.useState(false);
+
+  function stopFakeProgress() {
+    setIsActive(false);
+    setFakeProgress(0);
+  }
+
+  function startFakeProgress() {
+    setIsActive(true);
+  }
+
+  useInterval(
+    () => {
+      if (fakeProgress >= 100) {
+        stopFakeProgress();
+      } else {
+        setFakeProgress(fakeProgress + 10);
+      }
+    },
+    isActive ? 500 : null,
+  );
+
+  return [fakeProgress, startFakeProgress, stopFakeProgress];
+}
+
+export default function Example() {
+  const [progressAmount, startFakeProgress, stopFakeProgress] =
+    useFakeProgress();
+
+  return (
+    <FileUploaderBasic
+      onCancel={stopFakeProgress}
+      onDrop={(acceptedFiles, rejectedFiles) => {
+        // handle file upload...
+        console.log(acceptedFiles, rejectedFiles);
+        startFakeProgress();
+      }}
+      // progressAmount is a number from 0 - 100 which indicates the percent of file transfer completed
+      progressAmount={progressAmount}
+      progressMessage={
+        progressAmount ? `Uploading... ${progressAmount}% of 100%` : ""
+      }
+    />
+  );
+}
diff --git a/documentation-site/examples/file-uploader-basic/disabled.tsx b/documentation-site/examples/file-uploader-basic/disabled.tsx
new file mode 100644
index 0000000000..5b5a02c2cd
--- /dev/null
+++ b/documentation-site/examples/file-uploader-basic/disabled.tsx
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { FileUploaderBasic } from "baseui/file-uploader-basic";
+
+export default function Example() {
+  return <FileUploaderBasic disabled />;
+}
diff --git a/documentation-site/examples/file-uploader/error.tsx b/documentation-site/examples/file-uploader-basic/error.tsx
similarity index 96%
rename from documentation-site/examples/file-uploader/error.tsx
rename to documentation-site/examples/file-uploader-basic/error.tsx
index 34506f5991..c3347d85f2 100644
--- a/documentation-site/examples/file-uploader/error.tsx
+++ b/documentation-site/examples/file-uploader-basic/error.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { FileUploader } from "baseui/file-uploader";
+import { FileUploaderBasic } from "baseui/file-uploader-basic";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 function useInterval(callback: () => void, delay: number | null) {
@@ -60,7 +60,7 @@ export default function Example() {
     useFakeProgress();
 
   return (
-    <FileUploader
+    <FileUploaderBasic
       errorMessage={errorMessage}
       onRetry={stopFakeProgress}
       onCancel={stopFakeProgress}
diff --git a/documentation-site/examples/file-uploader/indeterminate-progress.tsx b/documentation-site/examples/file-uploader-basic/indeterminate-progress.tsx
similarity index 88%
rename from documentation-site/examples/file-uploader/indeterminate-progress.tsx
rename to documentation-site/examples/file-uploader-basic/indeterminate-progress.tsx
index 6c2bccc678..928af16cf2 100644
--- a/documentation-site/examples/file-uploader/indeterminate-progress.tsx
+++ b/documentation-site/examples/file-uploader-basic/indeterminate-progress.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { FileUploader } from "baseui/file-uploader";
+import { FileUploaderBasic } from "baseui/file-uploader-basic";
 
 export default function Example() {
   const [isUploading, setIsUploading] = React.useState(false);
@@ -11,7 +11,7 @@ export default function Example() {
   }
 
   // startProgress is only illustrative. Use the progress info returned
-  // from your upload endpoint. This example shows how the file-uploader operates
+  // from your upload endpoint. This example shows how the file-uploader-basic operates
   // if there is no progress info available.
   function startProgress() {
     setIsUploading(true);
@@ -19,7 +19,7 @@ export default function Example() {
   }
 
   return (
-    <FileUploader
+    <FileUploaderBasic
       onCancel={reset}
       onDrop={(acceptedFiles, rejectedFiles) => {
         // handle file upload...
diff --git a/documentation-site/examples/file-uploader-basic/overrides.tsx b/documentation-site/examples/file-uploader-basic/overrides.tsx
new file mode 100644
index 0000000000..c59792d887
--- /dev/null
+++ b/documentation-site/examples/file-uploader-basic/overrides.tsx
@@ -0,0 +1,102 @@
+import * as React from "react";
+import { FileUploaderBasic } from "baseui/file-uploader-basic";
+
+// https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+function useInterval(callback: any, delay: number | null) {
+  const savedCallback = React.useRef(() => {});
+
+  // Remember the latest callback.
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  React.useEffect((): any => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}
+
+// useFakeProgress is an elaborate way to show a fake file transfer for illustrative purposes. You
+// don't need this is your application. Use metadata from your upload destination if it's available,
+// or don't provide progress.
+function useFakeProgress(): [number, () => void, () => void] {
+  const [fakeProgress, setFakeProgress] = React.useState(0);
+  const [isActive, setIsActive] = React.useState(false);
+
+  function stopFakeProgress() {
+    setIsActive(false);
+    setFakeProgress(0);
+  }
+
+  function startFakeProgress() {
+    setIsActive(true);
+  }
+
+  useInterval(
+    () => {
+      if (fakeProgress >= 100) {
+        stopFakeProgress();
+      } else {
+        setFakeProgress(fakeProgress + 10);
+      }
+    },
+    isActive ? 500 : null,
+  );
+
+  return [fakeProgress, startFakeProgress, stopFakeProgress];
+}
+
+export default function Example() {
+  const [progressAmount, startFakeProgress, stopFakeProgress] =
+    useFakeProgress();
+
+  return (
+    <FileUploaderBasic
+      onCancel={stopFakeProgress}
+      onDrop={(acceptedFiles, rejectedFiles) => {
+        // handle file upload...
+        console.log(acceptedFiles, rejectedFiles);
+        startFakeProgress();
+      }}
+      // progressAmount is a number from 0 - 100 which indicates the percent of file transfer completed
+      progressAmount={progressAmount}
+      progressMessage={
+        progressAmount ? `Uploading... ${progressAmount}% of 100%` : ""
+      }
+      overrides={{
+        FileDragAndDrop: {
+          style: (props) => ({
+            borderLeftColor: props.$isDragActive
+              ? props.$theme.colors.positive
+              : props.$theme.colors.warning,
+            borderRightColor: props.$isDragActive
+              ? props.$theme.colors.positive
+              : props.$theme.colors.warning,
+            borderTopColor: props.$isDragActive
+              ? props.$theme.colors.positive
+              : props.$theme.colors.warning,
+            borderBottomColor: props.$isDragActive
+              ? props.$theme.colors.positive
+              : props.$theme.colors.warning,
+          }),
+        },
+        ContentMessage: {
+          style: (props) => ({
+            color: props.$theme.colors.warning,
+          }),
+        },
+        ContentSeparator: {
+          style: (props) => ({
+            color: props.$theme.colors.warning,
+          }),
+        },
+      }}
+    />
+  );
+}
diff --git a/documentation-site/examples/file-uploader-beta/basic.tsx b/documentation-site/examples/file-uploader-beta/basic.tsx
deleted file mode 100644
index 4cfebdf28b..0000000000
--- a/documentation-site/examples/file-uploader-beta/basic.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from "react";
-import { FileUploaderBeta, type FileRow } from "baseui/file-uploader-beta";
-
-export default function Example() {
-  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
-    {
-      file: new File(["test file"], "file.txt"),
-      status: "processed",
-      errorMessage: null,
-    },
-  ]);
-
-  const processFileOnDrop = (
-    file: File,
-  ): Promise<{ errorMessage: string | null; fileInfo?: any }> => {
-    return new Promise((resolve) => {
-      // Fake an upload process for 2 seconds
-      // For a real-world scenario, replace this with application upload logic
-      setTimeout(() => {
-        let fileInfo = {
-          file,
-          objectID: "1234",
-          uploadID: "1234",
-          uploadStatus: "success",
-        };
-        resolve({ errorMessage: null, fileInfo });
-      }, 2000);
-    });
-  };
-
-  return (
-    <FileUploaderBeta
-      fileRows={fileRows}
-      processFileOnDrop={processFileOnDrop}
-      setFileRows={setFileRows}
-    />
-  );
-}
diff --git a/documentation-site/examples/file-uploader-beta/overrides.tsx b/documentation-site/examples/file-uploader-beta/overrides.tsx
deleted file mode 100644
index 7f1b6466c4..0000000000
--- a/documentation-site/examples/file-uploader-beta/overrides.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from "react";
-import { FileUploaderBeta, type FileRow } from "baseui/file-uploader-beta";
-import { useStyletron } from "baseui";
-
-export default function Example() {
-  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
-    {
-      file: new File(["test file 1"], "file-1.txt"),
-      status: "processed",
-      errorMessage: null,
-    },
-    {
-      file: new File(["test file 2"], "file-2.txt"),
-      status: "error",
-      errorMessage: "Failed to upload",
-    },
-  ]);
-  const [, theme] = useStyletron();
-  return (
-    <FileUploaderBeta
-      fileRows={fileRows}
-      setFileRows={setFileRows}
-      overrides={{
-        ButtonComponent: {
-          props: {
-            overrides: {
-              BaseButton: {
-                style: {
-                  outline: `${theme.colors.warning} solid`,
-                },
-              },
-            },
-          },
-        },
-        ContentMessage: {
-          style: {
-            color: theme.colors.warning,
-          },
-        },
-        FileDragAndDrop: {
-          style: {
-            borderLeftColor: theme.colors.warning,
-            borderRightColor: theme.colors.warning,
-            borderTopColor: theme.colors.warning,
-            borderBottomColor: theme.colors.warning,
-          },
-        },
-        FileRows: {
-          style: {
-            marginLeft: theme.sizing.scale0,
-            marginRight: theme.sizing.scale0,
-            outline: `${theme.colors.warning} dashed`,
-          },
-        },
-      }}
-    />
-  );
-}
diff --git a/documentation-site/examples/file-uploader/basic.tsx b/documentation-site/examples/file-uploader/basic.tsx
index 07dc3dcce2..9e6b1e5a48 100644
--- a/documentation-site/examples/file-uploader/basic.tsx
+++ b/documentation-site/examples/file-uploader/basic.tsx
@@ -1,74 +1,39 @@
 import * as React from "react";
-import { FileUploader } from "baseui/file-uploader";
-
-// https://overreacted.io/making-setinterval-declarative-with-react-hooks/
-function useInterval(callback: any, delay: number | null) {
-  const savedCallback = React.useRef(() => {});
-
-  // Remember the latest callback.
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  // Set up the interval.
-  React.useEffect((): any => {
-    function tick() {
-      savedCallback.current();
-    }
-    if (delay !== null) {
-      let id = setInterval(tick, delay);
-      return () => clearInterval(id);
-    }
-  }, [delay]);
-}
-
-// useFakeProgress is an elaborate way to show a fake file transfer for illustrative purposes. You
-// don't need this is your application. Use metadata from your upload destination if it's available,
-// or don't provide progress.
-function useFakeProgress(): [number, () => void, () => void] {
-  const [fakeProgress, setFakeProgress] = React.useState(0);
-  const [isActive, setIsActive] = React.useState(false);
-
-  function stopFakeProgress() {
-    setIsActive(false);
-    setFakeProgress(0);
-  }
-
-  function startFakeProgress() {
-    setIsActive(true);
-  }
-
-  useInterval(
-    () => {
-      if (fakeProgress >= 100) {
-        stopFakeProgress();
-      } else {
-        setFakeProgress(fakeProgress + 10);
-      }
-    },
-    isActive ? 500 : null,
-  );
-
-  return [fakeProgress, startFakeProgress, stopFakeProgress];
-}
+import { FileUploader, type FileRow } from "baseui/file-uploader";
 
 export default function Example() {
-  const [progressAmount, startFakeProgress, stopFakeProgress] =
-    useFakeProgress();
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
+    {
+      file: new File(["test file"], "file.txt"),
+      id: "0",
+      status: "processed",
+      errorMessage: null,
+    },
+  ]);
+
+  const processFileOnDrop = (
+    file: File,
+  ): Promise<{ errorMessage: string | null; fileInfo?: any }> => {
+    return new Promise((resolve) => {
+      // Fake an upload process for 2 seconds
+      // For a real-world scenario, replace this with application upload logic
+      setTimeout(() => {
+        let fileInfo = {
+          file,
+          objectID: "1234",
+          uploadID: "1234",
+          uploadStatus: "success",
+        };
+        resolve({ errorMessage: null, fileInfo });
+      }, 2000);
+    });
+  };
 
   return (
     <FileUploader
-      onCancel={stopFakeProgress}
-      onDrop={(acceptedFiles, rejectedFiles) => {
-        // handle file upload...
-        console.log(acceptedFiles, rejectedFiles);
-        startFakeProgress();
-      }}
-      // progressAmount is a number from 0 - 100 which indicates the percent of file transfer completed
-      progressAmount={progressAmount}
-      progressMessage={
-        progressAmount ? `Uploading... ${progressAmount}% of 100%` : ""
-      }
+      fileRows={fileRows}
+      processFileOnDrop={processFileOnDrop}
+      setFileRows={setFileRows}
     />
   );
 }
diff --git a/documentation-site/examples/file-uploader/disabled.tsx b/documentation-site/examples/file-uploader/disabled.tsx
deleted file mode 100644
index d02150db4b..0000000000
--- a/documentation-site/examples/file-uploader/disabled.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from "react";
-import { FileUploader } from "baseui/file-uploader";
-
-export default function Example() {
-  return <FileUploader disabled />;
-}
diff --git a/documentation-site/examples/file-uploader-beta/item-preview.tsx b/documentation-site/examples/file-uploader/item-preview.tsx
similarity index 82%
rename from documentation-site/examples/file-uploader-beta/item-preview.tsx
rename to documentation-site/examples/file-uploader/item-preview.tsx
index 71013a6c38..f118821ab4 100644
--- a/documentation-site/examples/file-uploader-beta/item-preview.tsx
+++ b/documentation-site/examples/file-uploader/item-preview.tsx
@@ -1,16 +1,17 @@
 import * as React from "react";
-import { FileUploaderBeta, type FileRow } from "baseui/file-uploader-beta";
+import { FileUploader, type FileRow } from "baseui/file-uploader";
 
 export default function Example() {
   const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
     {
       file: new File(["test file"], "file.txt"),
+      id: "0",
       status: "processed",
       errorMessage: null,
     },
   ]);
   return (
-    <FileUploaderBeta
+    <FileUploader
       fileRows={fileRows}
       hint={
         "Try uploading a file to see the item preview. Image files will show a thumbnail."
diff --git a/documentation-site/examples/file-uploader-beta/label-hint.tsx b/documentation-site/examples/file-uploader/label-hint.tsx
similarity index 73%
rename from documentation-site/examples/file-uploader-beta/label-hint.tsx
rename to documentation-site/examples/file-uploader/label-hint.tsx
index fcf5b0ba92..bdc5b11345 100644
--- a/documentation-site/examples/file-uploader-beta/label-hint.tsx
+++ b/documentation-site/examples/file-uploader/label-hint.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
-import { FileUploaderBeta, type FileRow } from "baseui/file-uploader-beta";
+import { FileUploader, type FileRow } from "baseui/file-uploader";
 
 export default function Example() {
   const [fileRows, setFileRows] = React.useState<Array<FileRow>>([]);
   return (
-    <FileUploaderBeta
+    <FileUploader
       fileRows={fileRows}
       hint={"Test hint"}
       label={"Test label"}
diff --git a/documentation-site/examples/file-uploader/overrides.tsx b/documentation-site/examples/file-uploader/overrides.tsx
index 658923aed5..37a0f5b43e 100644
--- a/documentation-site/examples/file-uploader/overrides.tsx
+++ b/documentation-site/examples/file-uploader/overrides.tsx
@@ -1,100 +1,57 @@
 import * as React from "react";
-import { FileUploader } from "baseui/file-uploader";
-
-// https://overreacted.io/making-setinterval-declarative-with-react-hooks/
-function useInterval(callback: any, delay: number | null) {
-  const savedCallback = React.useRef(() => {});
-
-  // Remember the latest callback.
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  // Set up the interval.
-  React.useEffect((): any => {
-    function tick() {
-      savedCallback.current();
-    }
-    if (delay !== null) {
-      let id = setInterval(tick, delay);
-      return () => clearInterval(id);
-    }
-  }, [delay]);
-}
-
-// useFakeProgress is an elaborate way to show a fake file transfer for illustrative purposes. You
-// don't need this is your application. Use metadata from your upload destination if it's available,
-// or don't provide progress.
-function useFakeProgress(): [number, () => void, () => void] {
-  const [fakeProgress, setFakeProgress] = React.useState(0);
-  const [isActive, setIsActive] = React.useState(false);
-
-  function stopFakeProgress() {
-    setIsActive(false);
-    setFakeProgress(0);
-  }
-
-  function startFakeProgress() {
-    setIsActive(true);
-  }
-
-  useInterval(
-    () => {
-      if (fakeProgress >= 100) {
-        stopFakeProgress();
-      } else {
-        setFakeProgress(fakeProgress + 10);
-      }
-    },
-    isActive ? 500 : null,
-  );
-
-  return [fakeProgress, startFakeProgress, stopFakeProgress];
-}
+import { FileUploader, type FileRow } from "baseui/file-uploader";
+import { useStyletron } from "baseui";
 
 export default function Example() {
-  const [progressAmount, startFakeProgress, stopFakeProgress] =
-    useFakeProgress();
-
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
+    {
+      file: new File(["test file 1"], "file-1.txt"),
+      id: "0",
+      status: "processed",
+      errorMessage: null,
+    },
+    {
+      file: new File(["test file 2"], "file-2.txt"),
+      id: "1",
+      status: "error",
+      errorMessage: "Failed to upload",
+    },
+  ]);
+  const [, theme] = useStyletron();
   return (
     <FileUploader
-      onCancel={stopFakeProgress}
-      onDrop={(acceptedFiles, rejectedFiles) => {
-        // handle file upload...
-        console.log(acceptedFiles, rejectedFiles);
-        startFakeProgress();
-      }}
-      // progressAmount is a number from 0 - 100 which indicates the percent of file transfer completed
-      progressAmount={progressAmount}
-      progressMessage={
-        progressAmount ? `Uploading... ${progressAmount}% of 100%` : ""
-      }
+      fileRows={fileRows}
+      setFileRows={setFileRows}
       overrides={{
-        FileDragAndDrop: {
-          style: (props) => ({
-            borderLeftColor: props.$isDragActive
-              ? props.$theme.colors.positive
-              : props.$theme.colors.warning,
-            borderRightColor: props.$isDragActive
-              ? props.$theme.colors.positive
-              : props.$theme.colors.warning,
-            borderTopColor: props.$isDragActive
-              ? props.$theme.colors.positive
-              : props.$theme.colors.warning,
-            borderBottomColor: props.$isDragActive
-              ? props.$theme.colors.positive
-              : props.$theme.colors.warning,
-          }),
+        ButtonComponent: {
+          props: {
+            overrides: {
+              BaseButton: {
+                style: {
+                  outline: `${theme.colors.warning} solid`,
+                },
+              },
+            },
+          },
         },
         ContentMessage: {
-          style: (props) => ({
-            color: props.$theme.colors.warning,
-          }),
+          style: {
+            color: theme.colors.warning,
+          },
+        },
+        FileDragAndDrop: {
+          style: {
+            borderColor: theme.colors.warning,
+            borderStyle: "dashed",
+            borderWidth: theme.sizing.scale0,
+          },
         },
-        ContentSeparator: {
-          style: (props) => ({
-            color: props.$theme.colors.warning,
-          }),
+        FileRows: {
+          style: {
+            marginLeft: theme.sizing.scale0,
+            marginRight: theme.sizing.scale0,
+            outline: `${theme.colors.warning} dashed`,
+          },
         },
       }}
     />
diff --git a/documentation-site/examples/file-uploader-beta/upload-restrictions.tsx b/documentation-site/examples/file-uploader/upload-restrictions.tsx
similarity index 92%
rename from documentation-site/examples/file-uploader-beta/upload-restrictions.tsx
rename to documentation-site/examples/file-uploader/upload-restrictions.tsx
index 493994ca04..90af79e406 100644
--- a/documentation-site/examples/file-uploader-beta/upload-restrictions.tsx
+++ b/documentation-site/examples/file-uploader/upload-restrictions.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { FileUploaderBeta, type FileRow } from "baseui/file-uploader-beta";
+import { FileUploader, type FileRow } from "baseui/file-uploader";
 
 export default function Example() {
   // Upload files to test restrictions. For demo purposes,
@@ -7,21 +7,25 @@ export default function Example() {
   const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
     {
       file: new File(["test file 1"], "unaccepted-file-type.jpeg"),
+      id: "0",
       status: "error",
       errorMessage: "file type of img/jpeg is not accepted",
     },
     {
       file: new File(["test file 2"], "file-too-small.png"),
+      id: "1",
       status: "error",
       errorMessage: "file size must be greater than 20 KB",
     },
     {
       file: new File(["test file 3"], "file-too-big.png"),
+      id: "2",
       status: "error",
       errorMessage: "file size must be less than 100 KB",
     },
     {
       file: new File(["test file 4"], "file-count-too-many.png"),
+      id: "3",
       status: "error",
       errorMessage: "cannot process more than ${props.maxFiles} file(s)",
     },
@@ -46,7 +50,7 @@ export default function Example() {
   };
 
   return (
-    <FileUploaderBeta
+    <FileUploader
       accept={["image/png", "application/pdf"]}
       fileRows={fileRows}
       hint={
diff --git a/documentation-site/pages/components/file-uploader-basic.mdx b/documentation-site/pages/components/file-uploader-basic.mdx
new file mode 100644
index 0000000000..8ee876f8ca
--- /dev/null
+++ b/documentation-site/pages/components/file-uploader-basic.mdx
@@ -0,0 +1,77 @@
+import Example from "../../components/example";
+import Layout from "../../components/layout";
+import Exports from "../../components/exports";
+
+import FileUploaderBasic from "examples/file-uploader-basic/basic.tsx";
+import FileUploaderBasicError from "examples/file-uploader-basic/error.tsx";
+import FileUploaderBasicIndeterminate from "examples/file-uploader-basic/indeterminate-progress.tsx";
+import FileUploaderBasicDisabled from "examples/file-uploader-basic/disabled.tsx";
+import FileUploaderBasicOverrides from "examples/file-uploader-basic/overrides.tsx";
+
+import OverridesExample from "examples/file-uploader-basic/_overrides_component.tsx";
+import * as FileUploaderBasicExports from "baseui/file-uploader-basic";
+
+import Yard from "../../components/yard/index";
+import fileUploaderBasicYardConfig from "../../components/yard/config/file-uploader-basic";
+
+export default Layout;
+
+# File Uploader Basic
+
+<Yard placeholderHeight={180} {...fileUploaderBasicYardConfig} />
+
+Creates a dropzone for file uploads.
+
+## Accessibility
+
+- "Browse files" has `aria-controls="fileupload"` set.
+
+## When to use
+
+- Enable file(s) upload through drag and drop or the system _Browse files_ dialog.
+
+## Security considerations
+
+By default, the file uploader basic does not concern itself with validating and discarding potentially malicious files, as Base Web never runs any of the uploaded files. **It's the responsibility of the consuming application to do so.** To help with that, this component supports the `accept` property, which can limit the acceptable file extensions.
+
+To learn more, read the corresponding [OWASP article on file uploads](https://www.owasp.org/index.php/Unrestricted_File_Upload).
+
+## Examples
+
+<Example title="File uploader basic usage" path="file-uploader-basic/basic.tsx">
+  <FileUploaderBasic />
+</Example>
+
+<Example
+  title="File upload basic with error"
+  path="file-uploader-basic/error.tsx"
+>
+  <FileUploaderBasicError />
+</Example>
+
+<Example
+  title="File upload basic with unknown progress"
+  path="file-uploader-basic/indeterminate-progress.tsx"
+>
+  <FileUploaderBasicIndeterminate />
+</Example>
+
+<Example
+  title="File uploader basic in disabled state"
+  path="file-uploader-basic/disabled.tsx"
+>
+  <FileUploaderBasicDisabled />
+</Example>
+
+<Example
+  title="File uploader basic with overrides"
+  path="file-uploader-basic/overrides.tsx"
+>
+  <FileUploaderBasicOverrides />
+</Example>
+
+<Exports
+  component={FileUploaderBasicExports}
+  title="File uploader basic exports"
+  path="baseui/file-uploader-basic"
+/>
diff --git a/documentation-site/pages/components/file-uploader-beta.mdx b/documentation-site/pages/components/file-uploader-beta.mdx
deleted file mode 100644
index 31f7d58f12..0000000000
--- a/documentation-site/pages/components/file-uploader-beta.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Example from "../../components/example";
-import Layout from "../../components/layout";
-import Exports from "../../components/exports";
-
-import FileUploaderBetaBasic from "examples/file-uploader-beta/basic.tsx";
-import FileUploaderBetaItemPreview from "examples/file-uploader-beta/item-preview.tsx";
-import FileUploaderBetaLabelHint from "examples/file-uploader-beta/label-hint.tsx";
-import FileUploaderBetaUploadRestrictions from "examples/file-uploader-beta/upload-restrictions.tsx";
-import FileUploaderBetaOverrides from "examples/file-uploader-beta/overrides.tsx";
-
-import * as FileUploaderBetaExports from "baseui/file-uploader-beta";
-
-import Yard from "../../components/yard/index";
-import fileUploaderBetaYardConfig from "../../components/yard/config/file-uploader-beta";
-
-export default Layout;
-
-# File Uploader Beta
-
-<Yard placeholderHeight={120} {...fileUploaderBetaYardConfig} />
-
-Creates a dropzone for file uploads with file row state binding, props to control errors, and props to control uploads.
-
-## Accessibility
-
-- "Browse files" has `aria-controls="fileupload"` set.
-
-## Inheritance
-
-- Inherits all props from the `FileUploader` component except for `onDrop`, `onDropAccepted`, and `onDropRejected`. These three props are replaced by the `processFileOnDrop` function prop.
-- Inherits all style props from the `FileUploader` component.
-
-## How to use
-
-- Enable file(s) upload through drag and drop or the system _Browse files_ dialog.
-- Leverage `accept`, `maxFiles`, `maxSize`, and `minSize` for built in error handling.
-- Leverage `processFileOnDrop` for custom error handling and upload capabilities. Should take a `file: File` and input and return `Promise<{ errorMessage: string | null; fileInfo?: any }>` where `errorMessage` determines if an error is shown.
-- Component will be `disabled` while files are uploading. This prevents invalid state while React re-renders via `useState` hook.
-
-## Security considerations
-
-By default, the file uploader does not concern itself with validating and discarding potentially malicious files, as Base Web never runs any of the uploaded files. **It's the responsibility of the consuming application to do so.** To help with that, this component supports the `accept` property, which can limit the acceptable file extensions.
-
-To learn more, read the corresponding [OWASP article on file uploads](https://www.owasp.org/index.php/Unrestricted_File_Upload).
-
-## Examples
-
-<Example title="Basic usage" path="file-uploader-beta/basic.tsx">
-  <FileUploaderBetaBasic />
-</Example>
-
-<Example title="Item preview" path="file-uploader-beta/item-preview.tsx">
-  <FileUploaderBetaItemPreview />
-</Example>
-
-<Example title="Label and hint" path="file-uploader-beta/label-hint.tsx">
-  <FileUploaderBetaLabelHint />
-</Example>
-
-<Example
-  title="Upload restrictions"
-  path="file-uploader-beta/upload-restrictions.tsx"
->
-  <FileUploaderBetaUploadRestrictions />
-</Example>
-
-<Example title="Overrides" path="file-uploader-beta/overrides.tsx">
-  <FileUploaderBetaOverrides />
-</Example>
-
-<Exports
-  component={FileUploaderBetaExports}
-  title="File uploader beta exports"
-  path="baseui/file-uploader-beta"
-/>
diff --git a/documentation-site/pages/components/file-uploader.mdx b/documentation-site/pages/components/file-uploader.mdx
index 2492466c00..a7afb0736e 100644
--- a/documentation-site/pages/components/file-uploader.mdx
+++ b/documentation-site/pages/components/file-uploader.mdx
@@ -3,12 +3,11 @@ import Layout from "../../components/layout";
 import Exports from "../../components/exports";
 
 import FileUploaderBasic from "examples/file-uploader/basic.tsx";
-import FileUploaderError from "examples/file-uploader/error.tsx";
-import FileUploaderIndeterminate from "examples/file-uploader/indeterminate-progress.tsx";
-import FileUploaderDisabled from "examples/file-uploader/disabled.tsx";
+import FileUploaderItemPreview from "examples/file-uploader/item-preview.tsx";
+import FileUploaderLabelHint from "examples/file-uploader/label-hint.tsx";
+import FileUploaderUploadRestrictions from "examples/file-uploader/upload-restrictions.tsx";
 import FileUploaderOverrides from "examples/file-uploader/overrides.tsx";
 
-import OverridesExample from "examples/file-uploader/_overrides_component.tsx";
 import * as FileUploaderExports from "baseui/file-uploader";
 
 import Yard from "../../components/yard/index";
@@ -18,17 +17,25 @@ export default Layout;
 
 # File Uploader
 
-<Yard placeholderHeight={180} {...fileUploaderYardConfig} />
+<Yard placeholderHeight={120} {...fileUploaderYardConfig} />
 
-Creates a dropzone for file uploads.
+Creates a dropzone for file uploads with file row state binding, props to control errors, and props to control uploads.
 
 ## Accessibility
 
 - "Browse files" has `aria-controls="fileupload"` set.
 
-## When to use
+## Inheritance
+
+- Inherits all props from the `FileUploaderBasic` component except for `onDrop`, `onDropAccepted`, and `onDropRejected`. These three props are replaced by the `processFileOnDrop` function prop.
+- Inherits all style props from the `FileUploaderBasic` component.
+
+## How to use
 
 - Enable file(s) upload through drag and drop or the system _Browse files_ dialog.
+- Leverage `accept`, `maxFiles`, `maxSize`, and `minSize` for built in error handling.
+- Leverage `processFileOnDrop` for custom error handling and upload capabilities. Should take a `file: File` and input and return `Promise<{ errorMessage: string | null; fileInfo?: any }>` where `errorMessage` determines if an error is shown.
+- Component will be `disabled` while files are uploading. This prevents invalid state while React re-renders via `useState` hook.
 
 ## Security considerations
 
@@ -38,32 +45,26 @@ To learn more, read the corresponding [OWASP article on file uploads](https://ww
 
 ## Examples
 
-<Example title="File uploader basic usage" path="file-uploader/basic.tsx">
+<Example title="Basic usage" path="file-uploader/basic.tsx">
   <FileUploaderBasic />
 </Example>
 
-<Example title="File upload with error" path="file-uploader/error.tsx">
-  <FileUploaderError />
+<Example title="Item preview" path="file-uploader/item-preview.tsx">
+  <FileUploaderItemPreview />
 </Example>
 
-<Example
-  title="File upload with unknown progress"
-  path="file-uploader/indeterminate-progress.tsx"
->
-  <FileUploaderIndeterminate />
+<Example title="Label and hint" path="file-uploader/label-hint.tsx">
+  <FileUploaderLabelHint />
 </Example>
 
 <Example
-  title="File uploader in disabled state"
-  path="file-uploader/disabled.tsx"
+  title="Upload restrictions"
+  path="file-uploader/upload-restrictions.tsx"
 >
-  <FileUploaderDisabled />
+  <FileUploaderUploadRestrictions />
 </Example>
 
-<Example
-  title="File uploader with overrides"
-  path="file-uploader/overrides.tsx"
->
+<Example title="Overrides" path="file-uploader/overrides.tsx">
   <FileUploaderOverrides />
 </Example>
 
diff --git a/documentation-site/routes.jsx b/documentation-site/routes.jsx
index a17965090f..7308b93230 100644
--- a/documentation-site/routes.jsx
+++ b/documentation-site/routes.jsx
@@ -137,8 +137,8 @@ const routes = [
             itemId: "/components/file-uploader",
           },
           {
-            title: "File Uploader Beta",
-            itemId: "/components/file-uploader-beta",
+            title: "File Uploader Basic",
+            itemId: "/components/file-uploader-basic",
           },
           {
             title: "Menu",
diff --git a/package.json b/package.json
index e894a79a21..f63cec7dad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
diff --git a/src/banner/banner.tsx b/src/banner/banner.tsx
index c49da75df0..d3034532a7 100644
--- a/src/banner/banner.tsx
+++ b/src/banner/banner.tsx
@@ -162,11 +162,16 @@ function Trailing({ action, backgroundColor, color, overrides, nested }) {
     StyledTrailingButtonContainer
   );
 
+  const trailingButtonOverrides = overrides?.TrailingButton;
+  const trailingButtonBackgroundColor = trailingButtonOverrides?.style?.backgroundColor
+    ? trailingButtonOverrides.style.backgroundColor
+    : backgroundColor;
+
   if (action.label) {
     return (
       <TrailingButtonContainer {...trailingButtonContainerProps}>
         <Button
-          colors={{ backgroundColor, color }}
+          colors={{ backgroundColor: trailingButtonBackgroundColor, color }}
           onClick={action.onClick}
           size={BUTTON_SIZE.compact}
           shape={BUTTON_SHAPE.pill}
diff --git a/src/banner/types.ts b/src/banner/types.ts
index 22de2b9e7f..8f41e65746 100644
--- a/src/banner/types.ts
+++ b/src/banner/types.ts
@@ -42,6 +42,7 @@ export type BannerOverrides = {
   Title?: Override;
   TrailingContent?: Override;
   TrailingButtonContainer?: Override;
+  TrailingButton?: Override;
   TrailingIconButton?: Override;
 };
 
diff --git a/src/button-timed/styled-components.ts b/src/button-timed/styled-components.ts
index 3801cde59a..40fbbe2494 100644
--- a/src/button-timed/styled-components.ts
+++ b/src/button-timed/styled-components.ts
@@ -14,6 +14,7 @@ export const StyledBaseButtonTimed = withStyle<
   // @ts-ignore
 >(StyledBaseButton, ({ $theme, $initialTime, $timeElapsed }) => {
   const completionPercentage = ($timeElapsed / $initialTime) * 100;
+  const restPercentage = 100 - completionPercentage;
   const timeLeft = $initialTime - $timeElapsed;
   return {
     position: 'relative',
@@ -23,10 +24,10 @@ export const StyledBaseButtonTimed = withStyle<
             animationDuration: `${timeLeft}s`,
             animationName: {
               from: {
-                transform: `translateX(${completionPercentage}%)`,
+                transform: `translateX(${completionPercentage}%) scaleX(${restPercentage}%)`,
               },
               to: {
-                transform: 'translateX(100%)',
+                transform: 'translateX(100%) scaleX(0)',
               },
             },
             animationTimingFunction: 'linear',
@@ -37,6 +38,7 @@ export const StyledBaseButtonTimed = withStyle<
             zIndex: '1',
             position: 'absolute',
             backgroundColor: hexToRgba($theme.colors.backgroundPrimary, '0.2'),
+            transformOrigin: 'left',
           },
         }
       : {}),
diff --git a/src/data-table/__tests__/data-table.test.tsx b/src/data-table/__tests__/data-table.test.tsx
index 77ef723904..f4f7e16633 100644
--- a/src/data-table/__tests__/data-table.test.tsx
+++ b/src/data-table/__tests__/data-table.test.tsx
@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { render, fireEvent, getAllByRole, getByText } from '@testing-library/react';
-
+import { getByPlaceholderText } from '@testing-library/dom';
 import { TestBaseProvider } from '../../test/test-utils';
 import type { ControlRef } from '../index';
 import {
@@ -145,4 +145,22 @@ describe('Data Table', () => {
     const rows = controlRef.current?.getRows();
     expect(Array.isArray(rows) && rows.length).toBe(2);
   });
+
+  it('renders textQueryPlaceholder', async () => {
+    const { container } = render(
+      <TestBaseProvider>
+        <div style={{ height: '800px', width: '900px' }}>
+          <StatefulDataTable
+            columns={COLUMNS}
+            rows={ROWS}
+            initialTextQuery="Initial Test Query"
+            textQueryPlaceholder={'Test Placeholder'}
+          />
+        </div>
+      </TestBaseProvider>
+    );
+
+    // should find element with textQueryPlaceholder
+    expect(getByPlaceholderText(container, 'Test Placeholder')).toBeTruthy();
+  });
 });
diff --git a/src/data-table/locale.ts b/src/data-table/locale.ts
index 0901b245a5..4ea0ce9718 100644
--- a/src/data-table/locale.ts
+++ b/src/data-table/locale.ts
@@ -42,6 +42,7 @@ export type DataTableLocale = {
   selectRow: string;
   selectAllRows: string;
   sortColumn: string;
+  textQueryPlaceholder: string;
 };
 
 const locale = {
@@ -83,6 +84,7 @@ const locale = {
   selectRow: 'Select row',
   selectAllRows: 'Select all rows',
   sortColumn: 'Sort column',
+  textQueryPlaceholder: 'Search...',
 };
 
 export default locale;
diff --git a/src/data-table/stateful-data-table.tsx b/src/data-table/stateful-data-table.tsx
index c1c8f64503..a6c54c1e0d 100644
--- a/src/data-table/stateful-data-table.tsx
+++ b/src/data-table/stateful-data-table.tsx
@@ -75,6 +75,7 @@ function QueryInput(props) {
         onChange={(event) => setValue(event.target.value)}
         value={value}
         clearable
+        placeholder={props.textQueryPlaceholder || locale.datatable.textQueryPlaceholder}
       />
     </div>
   );
@@ -210,7 +211,13 @@ export function StatefulDataTable(props: StatefulDataTableProps) {
                     paddingTop: theme.sizing.scale500,
                   })}
                 >
-                  {searchable && <QueryInput onChange={onTextQueryChange} textQuery={textQuery} />}
+                  {searchable && (
+                    <QueryInput
+                      onChange={onTextQueryChange}
+                      textQuery={textQuery}
+                      textQueryPlaceholder={props.textQueryPlaceholder}
+                    />
+                  )}
 
                   {filterable && (
                     <React.Fragment>
diff --git a/src/data-table/types.ts b/src/data-table/types.ts
index 16ebfcc151..635bf7aab4 100644
--- a/src/data-table/types.ts
+++ b/src/data-table/types.ts
@@ -132,6 +132,7 @@ export type StatefulDataTableProps = {
   rowHeight?: number;
   rowHighlightIndex?: number;
   searchable?: boolean;
+  textQueryPlaceholder?: string;
   controlRef?: ControlRef;
 };
 
diff --git a/src/datepicker/__tests__/datepicker.test.tsx b/src/datepicker/__tests__/datepicker.test.tsx
index 7336a89a86..464d937474 100644
--- a/src/datepicker/__tests__/datepicker.test.tsx
+++ b/src/datepicker/__tests__/datepicker.test.tsx
@@ -292,4 +292,28 @@ describe('Datepicker', () => {
     );
     expect(next.length).toBe(1);
   });
+
+  it('works when startTime ms > endTime ms within a rangepicker', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <TestBaseProvider>
+        <Datepicker
+          onChange={onChange}
+          value={[new Date('2024-05-23T16:51:54.990Z'), new Date('2024-05-23T16:52:54.088Z')]}
+          range
+          timeSelectStart
+          timeSelectEnd
+          overrides={{
+            Input: {
+              props: { overrides: { Input: { props: { 'data-testid': 'input' } } } },
+            },
+          }}
+        />
+      </TestBaseProvider>
+    );
+
+    expect(() => {
+      fireEvent.focus(getByTestId(container, 'input'));
+    }).not.toThrowError();
+  });
 });
diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
index f9dc144f8d..bac7af427d 100644
--- a/src/dialog/dialog.tsx
+++ b/src/dialog/dialog.tsx
@@ -75,7 +75,7 @@ const Dialog = ({
   artwork,
   buttonDock,
   children,
-  handleDismiss,
+  onDismiss,
   showDismissButton = true,
   hasOverlay = true,
   heading,
@@ -122,14 +122,14 @@ const Dialog = ({
       e.target &&
       e.target instanceof HTMLElement &&
       e.target.contains(overlayRef.current) &&
-      handleDismiss
+      onDismiss
     ) {
-      handleDismiss();
+      onDismiss();
     }
   }
 
   function handleEscape() {
-    handleDismiss && handleDismiss();
+    onDismiss && onDismiss();
   }
 
   return isOpen ? (
@@ -144,8 +144,8 @@ const Dialog = ({
           aria-labelledby="dialog-title"
           {...rootProps}
         >
-          {handleDismiss && showDismissButton && (
-            <DismissButton onClick={() => handleDismiss()} {...dismissButtonProps} />
+          {onDismiss && showDismissButton && (
+            <DismissButton onClick={() => onDismiss()} {...dismissButtonProps} />
           )}
 
           <ScrollContainer {...scrollContainerProps} tabIndex={0}>
diff --git a/src/dialog/types.ts b/src/dialog/types.ts
index d14f3c23dd..32a67e81e0 100644
--- a/src/dialog/types.ts
+++ b/src/dialog/types.ts
@@ -31,8 +31,8 @@ export type DialogProps = {
   /** The contents of the body of Dialog */
   children?: React.ReactNode | (() => React.ReactNode);
   /** Determine if and how dialog can be dismissed */
-  handleDismiss?: () => void | null;
-  /** Should Dialog include a dedicated X button to dismiss the dialog. Ignored if handleDismiss is not supplied. */
+  onDismiss?: () => void | null;
+  /** Should Dialog include a dedicated X button to dismiss the dialog. Ignored if onDismiss is not supplied. */
   showDismissButton?: boolean;
   /** Determines whether the background behind the Dialog is dimmed when Dialog is open  */
   hasOverlay?: boolean;
diff --git a/src/file-uploader-basic/__tests__/file-uploader-basic.test.tsx b/src/file-uploader-basic/__tests__/file-uploader-basic.test.tsx
new file mode 100644
index 0000000000..c2afbc367f
--- /dev/null
+++ b/src/file-uploader-basic/__tests__/file-uploader-basic.test.tsx
@@ -0,0 +1,186 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import {
+  act,
+  render,
+  getByRole,
+  getByTestId,
+  getByText,
+  queryByTestId,
+  queryAllByRole,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+
+import { FileUploaderBasic } from '..';
+import locale from '../locale';
+import Upload from '../../icon/upload';
+
+describe('FileUploaderBasic', () => {
+  it('applies expected accessibility attributes to button', () => {
+    const { container } = render(<FileUploaderBasic />);
+    const button = container.querySelector('button');
+    expect(button?.getAttribute('role')).toBe('button');
+  });
+
+  it('renders progress bar if progressAmount provided', () => {
+    const { container } = render(<FileUploaderBasic progressAmount={50} />);
+    getByRole(container, 'progressbar');
+  });
+
+  it('renders content message if progressMessage provided', () => {
+    const message = 'uploading...';
+    const { container } = render(<FileUploaderBasic progressMessage={message} />);
+    getByText(container, message);
+  });
+
+  it('renders spinner if progressMessage provided', () => {
+    const { container } = render(
+      <FileUploaderBasic
+        progressMessage="uploading..."
+        overrides={{ Spinner: { props: { 'data-testid': 'spinner' } } }}
+      />
+    );
+    getByTestId(container, 'spinner');
+  });
+
+  it('does not render spinner if progressAmount is zero, render progress bar', () => {
+    const { container } = render(
+      <FileUploaderBasic
+        progressMessage="uploading..."
+        progressAmount={0}
+        overrides={{ Spinner: { props: { 'data-testid': 'spinner' } } }}
+      />
+    );
+    const spinner = queryByTestId(container, 'spinner');
+    expect(spinner).toBeNull();
+
+    getByRole(container, 'progressbar');
+  });
+
+  it('does not render progress bar if progressAmount not provided', () => {
+    const { container } = render(<FileUploaderBasic progressMessage="uploading..." />);
+    //will render indeterminate spinner with role progress bar instead
+    expect(queryAllByRole(container, 'progressbar')).toHaveLength(1);
+  });
+
+  it('renders error message if errorMessage provided', () => {
+    const message = 'error!';
+    const { container } = render(<FileUploaderBasic errorMessage={message} />);
+    getByText(container, message);
+  });
+
+  it('renders cancel button if progressAmount provided', () => {
+    const { container } = render(<FileUploaderBasic progressAmount={50} />);
+    getByText(container, 'Cancel');
+  });
+
+  it('renders cancel button if progressMessage provided', () => {
+    const { container } = render(<FileUploaderBasic progressMessage="uploading..." />);
+    getByText(container, 'Cancel');
+  });
+
+  it('renders retry button if errorMessage provided', () => {
+    const { container } = render(<FileUploaderBasic errorMessage="error!" />);
+    getByText(container, 'Retry Upload');
+  });
+
+  it('renders retry button if progressAmount and errorMessage provided', () => {
+    const { container } = render(<FileUploaderBasic progressAmount={40} errorMessage="error!" />);
+    getByText(container, 'Retry Upload');
+  });
+
+  it('renders error message if progressAmount and errorMessage provided', () => {
+    const message = 'error!';
+    const { container } = render(<FileUploaderBasic progressAmount={40} errorMessage={message} />);
+    getByText(container, message);
+  });
+
+  it('renders retry button if progressMessage and errorMessage provided', () => {
+    const { container } = render(
+      <FileUploaderBasic progressMessage="uploading..." errorMessage="error!" />
+    );
+    getByText(container, 'Retry Upload');
+  });
+
+  it('renders error message if progressMessage and errorMessage provided', () => {
+    const message = 'error!';
+    const { container } = render(
+      <FileUploaderBasic progressMessage="uploading..." errorMessage={message} />
+    );
+    getByText(container, message);
+  });
+
+  it('calls onRetry if errorMessage provided and retry button is clicked', async () => {
+    const message = 'error!';
+    const onRetry = jest.fn();
+    const { container } = render(<FileUploaderBasic errorMessage={message} onRetry={onRetry} />);
+    await act(() => {
+      fireEvent.click(getByText(container, 'Retry Upload'));
+    });
+    await waitFor(() => {
+      expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('calls onCancel if progressMessage provided and cancel button clicked', async () => {
+    const message = 'progress!';
+    const onCancel = jest.fn();
+    const { container } = render(
+      <FileUploaderBasic progressMessage={message} onCancel={onCancel} />
+    );
+    await act(() => {
+      fireEvent.click(getByText(container, 'Cancel'));
+    });
+    await waitFor(() => {
+      expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('renders accept attribute as a string when inputted as an array', () => {
+    const { container } = render(<FileUploaderBasic accept={['test-1', 'test-2']} />);
+    expect(container.querySelector('input')?.getAttribute('accept')).toBe('test-1,test-2');
+  });
+
+  it('renders accept attribute as a string when inputted as a string', () => {
+    const { container } = render(<FileUploaderBasic accept={'test-1,test-2'} />);
+    expect(container.querySelector('input')?.getAttribute('accept')).toBe('test-1,test-2');
+  });
+
+  it('renders button text and message when swapped', () => {
+    const { container } = render(<FileUploaderBasic swapButtonAndMessage />);
+    getByText(container, locale.browseFiles);
+    getByText(container, locale.dropFilesToUpload);
+  });
+
+  it('renders alternate button text and message', () => {
+    const { container } = render(
+      <FileUploaderBasic buttonText="Test buttonText" contentMessage="Test contentMessage" />
+    );
+    getByText(container, 'Test buttonText');
+    getByText(container, 'Test contentMessage');
+  });
+
+  it('renders button icon', () => {
+    const { container } = render(
+      <FileUploaderBasic
+        buttonIcon={() => (
+          <Upload
+            overrides={{
+              Svg: {
+                props: { 'data-testid': 'upload-icon' },
+              },
+            }}
+          />
+        )}
+        contentMessage="Test contentMessage"
+      />
+    );
+    getByTestId(container, 'upload-icon');
+  });
+});
diff --git a/src/file-uploader-basic/file-uploader-basic.tsx b/src/file-uploader-basic/file-uploader-basic.tsx
new file mode 100644
index 0000000000..a6863c536e
--- /dev/null
+++ b/src/file-uploader-basic/file-uploader-basic.tsx
@@ -0,0 +1,299 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import Dropzone from 'react-dropzone';
+
+import { LocaleContext } from '../locale';
+import { useStyletron } from '../styles';
+import { Button, KIND, SHAPE, SIZE as BUTTON_SIZE } from '../button';
+import { getOverrides } from '../helpers/overrides';
+import { ProgressBar } from '../progress-bar';
+import { Spinner, SIZE as SPINNER_SIZE } from '../spinner';
+
+import {
+  StyledRoot,
+  StyledFileDragAndDrop,
+  StyledContentMessage,
+  StyledContentSeparator,
+  StyledErrorMessage,
+  StyledHiddenInput,
+} from './styled-components';
+import type { FileUploaderBasicProps } from './types';
+
+import type { SyntheticEvent } from 'react';
+
+// @ts-ignore
+function prependStyleProps(styleProps) {
+  return Object.keys(styleProps).reduce((nextStyleProps, currentKey) => {
+    // @ts-ignore
+    nextStyleProps[`$${currentKey}`] = styleProps[currentKey];
+    return nextStyleProps;
+  }, {});
+}
+
+function FileUploaderBasic(props: FileUploaderBasicProps) {
+  const { overrides = {} } = props;
+  const [, theme] = useStyletron();
+
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [FileDragAndDrop, fileDragAndDropProps] = getOverrides(
+    overrides.FileDragAndDrop,
+    StyledFileDragAndDrop
+  );
+  const [ContentMessage, contentMessageProps] = getOverrides(
+    overrides.ContentMessage,
+    StyledContentMessage
+  );
+
+  const [ContentSeparator, contentSeparatorProps] = getOverrides(
+    overrides.ContentSeparator,
+    StyledContentSeparator
+  );
+  const [ErrorMessage, errorMessageProps] = getOverrides(
+    overrides.ErrorMessage,
+    StyledErrorMessage
+  );
+  const [HiddenInput, hiddenInputProps] = getOverrides(overrides.HiddenInput, StyledHiddenInput);
+  const [ButtonComponent, buttonProps] = getOverrides(overrides.ButtonComponent, Button);
+
+  const [RetryButtonComponent, retryButtonProps] = getOverrides(
+    overrides.RetryButtonComponent,
+    Button
+  );
+  const [CancelButtonComponent, cancelButtonProps] = getOverrides(
+    overrides.CancelButtonComponent,
+    Button
+  );
+
+  const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, Spinner);
+  const [ProgressBarComponent, progressBarProps] = getOverrides(overrides.ProgressBar, ProgressBar);
+
+  const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
+
+  let accept;
+  if (Array.isArray(props.accept)) {
+    accept = props.accept.join(',');
+  } else if (typeof props.accept === 'string') {
+    accept = props.accept;
+  }
+
+  let displayButtonIcon: JSX.Element | null = null;
+  if (props.buttonIcon) {
+    displayButtonIcon = props.buttonIcon();
+  }
+
+  return (
+    <Dropzone {...props} accept={accept} disabled={props.disabled || afterFileDrop}>
+      {(renderProps) => {
+        const { getRootProps, getInputProps, open, ...styleProps } = renderProps;
+
+        const prefixedStyledProps = prependStyleProps({
+          ...styleProps,
+          isDisabled: props.disabled,
+          afterFileDrop,
+        });
+
+        const getRootPropsArgs: {
+          onClick?: (a: SyntheticEvent<HTMLElement>) => void;
+          tabIndex: number;
+        } = {
+          ...(props.disableClick ? { onClick: (evt) => evt.preventDefault() } : {}),
+          tabIndex: -1,
+        };
+
+        return (
+          <LocaleContext.Consumer>
+            {(locale) => (
+              <Root data-baseweb="file-uploader-basic" {...prefixedStyledProps} {...rootProps}>
+                <FileDragAndDrop
+                  {...getRootProps(getRootPropsArgs)}
+                  {...prefixedStyledProps}
+                  {...fileDragAndDropProps}
+                >
+                  {!afterFileDrop && (
+                    <React.Fragment>
+                      {props.swapButtonAndMessage ? (
+                        <>
+                          <ButtonComponent
+                            disabled={props.disabled}
+                            kind={KIND.secondary}
+                            shape={SHAPE.pill}
+                            size={BUTTON_SIZE.compact}
+                            onClick={open}
+                            role="button"
+                            overrides={{
+                              BaseButton: {
+                                // @ts-ignore
+                                style: ({ $theme }) => ({
+                                  display: 'flex',
+                                  flexDirection: 'row',
+                                  gap: '8px',
+                                  marginTop: $theme.sizing.scale500,
+                                }),
+                              },
+                            }}
+                            {...prefixedStyledProps}
+                            {...buttonProps}
+                          >
+                            {displayButtonIcon}
+                            {props.buttonText
+                              ? props.buttonText
+                              : locale.fileuploaderbasic.browseFiles}
+                          </ButtonComponent>
+                          {/* TODO(v11): ContentSeparator potentially can be removed in the next major version */}
+
+                          <ContentSeparator {...prefixedStyledProps} {...contentSeparatorProps}>
+                            {locale.fileuploaderbasic.or}
+                          </ContentSeparator>
+                          <ContentMessage {...prefixedStyledProps} {...contentMessageProps}>
+                            {props.contentMessage
+                              ? props.contentMessage
+                              : locale.fileuploaderbasic.dropFilesToUpload}
+                          </ContentMessage>
+                        </>
+                      ) : (
+                        <>
+                          <ContentMessage {...prefixedStyledProps} {...contentMessageProps}>
+                            {props.contentMessage
+                              ? props.contentMessage
+                              : locale.fileuploaderbasic.dropFilesToUpload}
+                          </ContentMessage>
+                          {/* TODO(v11): ContentSeparator potentially can be removed in the next major version */}
+
+                          <ContentSeparator {...prefixedStyledProps} {...contentSeparatorProps}>
+                            {locale.fileuploaderbasic.or}
+                          </ContentSeparator>
+                          <ButtonComponent
+                            disabled={props.disabled}
+                            kind={KIND.secondary}
+                            shape={SHAPE.pill}
+                            size={BUTTON_SIZE.compact}
+                            onClick={open}
+                            role="button"
+                            overrides={{
+                              BaseButton: {
+                                // @ts-ignore
+                                style: ({ $theme }) => ({
+                                  display: 'flex',
+                                  flexDirection: 'row',
+                                  gap: '8px',
+                                  marginTop: $theme.sizing.scale500,
+                                }),
+                              },
+                            }}
+                            {...prefixedStyledProps}
+                            {...buttonProps}
+                          >
+                            {displayButtonIcon}
+                            {props.buttonText
+                              ? props.buttonText
+                              : locale.fileuploaderbasic.browseFiles}
+                          </ButtonComponent>
+                        </>
+                      )}
+                    </React.Fragment>
+                  )}
+
+                  {afterFileDrop && (
+                    <React.Fragment>
+                      {/**
+                       * Below checks typeof value to ensure if progressAmount = 0 we will
+                       * render the progress bar rather than the spinner. Providing a number
+                       * value implies that we expect to have some progress percent in the
+                       * future. We do not want to flash the spinner in this case.
+                       */}
+                      {typeof props.progressAmount === 'number' ? (
+                        <ProgressBarComponent
+                          value={props.progressAmount}
+                          overrides={{
+                            BarProgress: {
+                              // @ts-ignore
+                              style: ({ $theme }) => ({
+                                backgroundColor: props.errorMessage
+                                  ? $theme.colors.negative
+                                  : $theme.colors.accent,
+                              }),
+                            },
+                          }}
+                          {...progressBarProps}
+                        />
+                      ) : props.errorMessage ? null : (
+                        <SpinnerComponent
+                          $size={SPINNER_SIZE.medium}
+                          $style={{ marginBottom: theme.sizing.scale300 }}
+                          {...spinnerProps}
+                        />
+                      )}
+                      {(props.errorMessage || props.progressMessage) && props.errorMessage ? (
+                        <ErrorMessage {...prefixedStyledProps} {...errorMessageProps}>
+                          {props.errorMessage}
+                        </ErrorMessage>
+                      ) : (
+                        <ContentMessage {...prefixedStyledProps} {...contentMessageProps}>
+                          {props.progressMessage}
+                        </ContentMessage>
+                      )}
+                      {props.errorMessage ? (
+                        <RetryButtonComponent
+                          kind={KIND.tertiary}
+                          onClick={() => {
+                            props.onRetry && props.onRetry();
+                          }}
+                          aria-invalid={Boolean(props.errorMessage)}
+                          aria-describedby={props['aria-describedby']}
+                          aria-errormessage={props.errorMessage}
+                          {...retryButtonProps}
+                        >
+                          {locale.fileuploaderbasic.retry}
+                        </RetryButtonComponent>
+                      ) : (
+                        <CancelButtonComponent
+                          kind={KIND.tertiary}
+                          onClick={() => {
+                            props.onCancel && props.onCancel();
+                          }}
+                          aria-describedby={props['aria-describedby']}
+                          overrides={{
+                            BaseButton: {
+                              // @ts-ignore
+                              style: ({ $theme }) => ({
+                                color: $theme.colors.contentNegative,
+                              }),
+                            },
+                          }}
+                          {...cancelButtonProps}
+                        >
+                          {locale.fileuploaderbasic.cancel}
+                        </CancelButtonComponent>
+                      )}
+                    </React.Fragment>
+                  )}
+                </FileDragAndDrop>
+
+                <HiddenInput
+                  aria-invalid={Boolean(props.errorMessage) || null}
+                  aria-describedby={props['aria-describedby']}
+                  aria-errormessage={props.errorMessage || null}
+                  {...getInputProps()}
+                  {...prefixedStyledProps}
+                  {...hiddenInputProps}
+                />
+              </Root>
+            )}
+          </LocaleContext.Consumer>
+        );
+      }}
+    </Dropzone>
+  );
+}
+
+FileUploaderBasic.defaultProps = {
+  disableClick: true,
+  overrides: {},
+};
+
+export default FileUploaderBasic;
diff --git a/src/file-uploader-basic/index.ts b/src/file-uploader-basic/index.ts
new file mode 100644
index 0000000000..2891de71c7
--- /dev/null
+++ b/src/file-uploader-basic/index.ts
@@ -0,0 +1,21 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export { default as FileUploaderBasic } from './file-uploader-basic';
+
+// Styled elements
+export {
+  StyledRoot,
+  StyledFileDragAndDrop,
+  StyledContentMessage,
+  StyledContentSeparator,
+  StyledErrorMessage,
+  StyledHiddenInput,
+} from './styled-components';
+
+// Flow
+export * from './types';
+export type { FileUploaderBasicLocale } from './locale';
diff --git a/src/file-uploader-basic/locale.ts b/src/file-uploader-basic/locale.ts
new file mode 100644
index 0000000000..d531ef3265
--- /dev/null
+++ b/src/file-uploader-basic/locale.ts
@@ -0,0 +1,23 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export type FileUploaderBasicLocale = {
+  dropFilesToUpload: string;
+  or: string;
+  browseFiles: string;
+  retry: string;
+  cancel: string;
+};
+
+const locale = {
+  dropFilesToUpload: 'Drop files here to upload...',
+  or: '',
+  browseFiles: 'Browse files',
+  retry: 'Retry Upload',
+  cancel: 'Cancel',
+};
+
+export default locale;
diff --git a/src/file-uploader-basic/styled-components.ts b/src/file-uploader-basic/styled-components.ts
new file mode 100644
index 0000000000..59c751c738
--- /dev/null
+++ b/src/file-uploader-basic/styled-components.ts
@@ -0,0 +1,89 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { styled } from '../styles';
+import type { StyleProps } from './types';
+
+export const StyledFileDragAndDrop = styled<'div', StyleProps>('div', (props) => {
+  const borderColor = props.$isDragActive
+    ? props.$theme.colors.borderAccent
+    : props.$theme.colors.fileUploaderBorderColorDefault;
+  const borderStyle = props.$afterFileDrop ? 'none' : 'dashed';
+  return {
+    alignItems: 'center',
+    backgroundColor: props.$isDragActive
+      ? props.$theme.colors.backgroundAccentLight
+      : props.$theme.colors.fileUploaderBackgroundColor,
+    borderLeftColor: borderColor,
+    borderRightColor: borderColor,
+    borderTopColor: borderColor,
+    borderBottomColor: borderColor,
+    borderLeftStyle: borderStyle,
+    borderRightStyle: borderStyle,
+    borderTopStyle: borderStyle,
+    borderBottomStyle: borderStyle,
+    borderLeftWidth: props.$theme.sizing.scale0,
+    borderRightWidth: props.$theme.sizing.scale0,
+    borderTopWidth: props.$theme.sizing.scale0,
+    borderBottomWidth: props.$theme.sizing.scale0,
+    borderTopLeftRadius: props.$theme.borders.radius400,
+    borderTopRightRadius: props.$theme.borders.radius400,
+    borderBottomLeftRadius: props.$theme.borders.radius400,
+    borderBottomRightRadius: props.$theme.borders.radius400,
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    outline: 'none',
+    paddingTop: props.$theme.sizing.scale900,
+    paddingRight: props.$theme.sizing.scale800,
+    paddingBottom: props.$afterFileDrop
+      ? props.$theme.sizing.scale300
+      : props.$theme.sizing.scale900,
+    paddingLeft: props.$theme.sizing.scale800,
+    width: '100%',
+  };
+});
+
+StyledFileDragAndDrop.displayName = 'StyledFileDragAndDrop';
+
+export const StyledContentMessage = styled<'div', StyleProps>(
+  'div',
+  // @ts-ignore
+  ({ $theme, $afterFileDrop, $isDragActive }) => ({
+    ...($afterFileDrop ? $theme.typography.LabelMedium : $theme.typography.LabelSmall),
+    color: $afterFileDrop
+      ? $theme.colors.contentPrimary
+      : $isDragActive
+      ? $theme.colors.contentAccent
+      : null,
+    marginTop: $afterFileDrop ? $theme.sizing.scale100 : null,
+    marginBottom: $afterFileDrop ? $theme.sizing.scale100 : null,
+  })
+);
+
+StyledContentMessage.displayName = 'StyledContentMessage';
+
+export const StyledContentSeparator = StyledContentMessage;
+
+// @ts-ignore
+export const StyledErrorMessage = styled<'div', StyleProps>('div', (props) => ({
+  ...props.$theme.typography.LabelMedium,
+  color: props.$theme.colors.contentNegative,
+  marginTop: props.$afterFileDrop ? props.$theme.sizing.scale100 : null,
+  marginBottom: props.$afterFileDrop ? props.$theme.sizing.scale100 : null,
+}));
+
+StyledErrorMessage.displayName = 'StyledErrorMessage';
+
+export const StyledRoot = styled<'div', StyleProps>('div', (props) => ({
+  ...props.$theme.typography.font300,
+  color: props.$theme.colors.fileUploaderMessageColor,
+}));
+
+StyledRoot.displayName = 'StyledRoot';
+
+export const StyledHiddenInput = styled('input', {});
+StyledHiddenInput.displayName = 'StyledHiddenInput';
diff --git a/src/file-uploader-basic/types.ts b/src/file-uploader-basic/types.ts
new file mode 100644
index 0000000000..8d6368855d
--- /dev/null
+++ b/src/file-uploader-basic/types.ts
@@ -0,0 +1,56 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import type { DropzoneProps } from 'react-dropzone';
+import type { DragEvent } from 'react';
+import type { Override } from '../helpers/overrides';
+
+export type StyleProps = {
+  $afterFileDrop: boolean;
+  $disabled: boolean;
+  $isDragActive: boolean;
+  $isDragAccept: boolean;
+  $isDragReject: boolean;
+  $isFocused: boolean;
+};
+
+export type FileUploaderBasicOverrides = {
+  Root?: Override;
+  FileDragAndDrop?: Override;
+  ContentMessage?: Override;
+  ContentSeparator?: Override;
+  HiddenInput?: Override;
+  ProgressMessage?: Override;
+  ErrorMessage?: Override;
+  ButtonComponent?: Override;
+  CancelButtonComponent?: Override;
+  RetryButtonComponent?: Override;
+  Spinner?: Override;
+  ProgressBar?: Override;
+};
+
+export type FileUploaderBasicProps = Omit<DropzoneProps, 'accept'> & {
+  accept?: string[] | string;
+  buttonIcon?: () => JSX.Element;
+  buttonText?: string;
+  contentMessage?: string;
+  disableClick?: boolean;
+  'aria-describedby'?: string;
+  // Error message to be displayed
+  errorMessage?: string;
+  onCancel?: () => unknown;
+  onRetry?: () => unknown;
+  overrides?: FileUploaderBasicOverrides;
+  progressAmount?: number;
+  progressMessage?: string;
+  swapButtonAndMessage?: boolean;
+};
+
+export type DropFilesEventHandler = (
+  accepted: File[],
+  rejected: File[],
+  event: DragEvent<HTMLElement>
+) => unknown;
diff --git a/src/file-uploader-beta/__tests__/file-uploader-beta.test.tsx b/src/file-uploader-beta/__tests__/file-uploader-beta.test.tsx
deleted file mode 100644
index fcf6a52163..0000000000
--- a/src/file-uploader-beta/__tests__/file-uploader-beta.test.tsx
+++ /dev/null
@@ -1,566 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-import * as React from 'react';
-import {
-  act,
-  fireEvent,
-  getAllByTestId,
-  getByTestId,
-  getByText,
-  render,
-  screen,
-  waitFor,
-} from '@testing-library/react';
-import { FileUploaderBeta } from '..';
-
-describe('FileUploaderBeta', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders gracefully', () => {
-    const { container } = render(<FileUploaderBeta />);
-    expect(container).toBeDefined();
-  });
-
-  it('renders gracefully with different style override types', () => {
-    const { container } = render(
-      <>
-        <FileUploaderBeta
-          overrides={{
-            ButtonComponent: {
-              props: {
-                overrides: {
-                  BaseButton: {
-                    style: {
-                      backgroundColor: 'red',
-                    },
-                  },
-                },
-              },
-            },
-          }}
-        />{' '}
-        <FileUploaderBeta
-          overrides={{
-            ButtonComponent: {
-              props: {
-                overrides: {
-                  BaseButton: {
-                    style: ({ $theme }) => ({
-                      outline: `${$theme.colors.warning600} solid`,
-                      backgroundColor: $theme.colors.warning600,
-                    }),
-                  },
-                },
-              },
-            },
-          }}
-        />
-      </>
-    );
-    expect(container).toBeDefined();
-  });
-
-  it('throws errors when invalid props are passed in', () => {
-    const original = console.error;
-    console.error = jest.fn();
-    render(
-      <FileUploaderBeta
-        // @ts-ignore
-        onDrop={() => {}}
-        onDropAccepted={() => {}}
-        onDropRejected={() => {}}
-      />
-    );
-    expect(console.error).toHaveBeenCalledTimes(3);
-    expect(console.error).toHaveBeenNthCalledWith(1, 'onDrop is not a prop for FileUploaderBeta.');
-    expect(console.error).toHaveBeenNthCalledWith(
-      2,
-      'onDropAccepted is not a prop for FileUploaderBeta.'
-    );
-    expect(console.error).toHaveBeenNthCalledWith(
-      3,
-      'onDropRejected is not a prop for FileUploaderBeta.'
-    );
-    console.error = original;
-  });
-
-  it('renders file rows when passed in props', () => {
-    const mockFileAdded = new File(['(⌐□_□)'], 'test.jpg', {
-      type: 'image/jpg',
-    });
-    const mockFileError = new File(['(⌐□_□)'], 'test.pdf', {
-      type: 'application/pdf',
-    });
-    const mockFileProcessed = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const { container } = render(
-      <FileUploaderBeta
-        fileRows={[
-          {
-            errorMessage: null,
-            file: mockFileAdded,
-            imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-            status: 'added',
-          },
-          {
-            errorMessage: 'custom error message',
-            file: mockFileError,
-            imagePreviewThumbnail: '',
-            status: 'error',
-          },
-          {
-            errorMessage: null,
-            file: mockFileProcessed,
-            imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-            status: 'processed',
-          },
-        ]}
-        setFileRows={() => {}}
-      />
-    );
-    getByText(container, 'test.jpg');
-    getByText(container, 'Loading...');
-    getByText(container, 'test.pdf');
-    getByText(container, 'Upload failed: custom error message');
-    getByText(container, 'test.png');
-    getByText(container, 'Upload successful');
-  });
-
-  it('calls setFileRows for accepted and rejected files and does not call invalid props', async () => {
-    const original = console.error;
-    console.error = jest.fn();
-    const mockAcceptedFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockRejectedFile = new File(['(⌐□_□)'], 'test.json', {
-      type: 'application/json',
-    });
-    const files = [mockAcceptedFile, mockRejectedFile];
-
-    const mockFileRows = [];
-    const mockSetFileRows = jest.fn();
-    const onDropMock = jest.fn();
-    const onDropAcceptedMock = jest.fn();
-    const onDropRejectedMock = jest.fn();
-    render(
-      <FileUploaderBeta
-        fileRows={mockFileRows}
-        setFileRows={mockSetFileRows}
-        // @ts-ignore
-        onDrop={onDropMock}
-        onDropAccepted={onDropAcceptedMock}
-        onDropRejected={onDropRejectedMock}
-      />
-    );
-
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), { target: { files } });
-    });
-    await waitFor(() => {
-      expect(mockSetFileRows).toHaveBeenCalledTimes(5);
-      expect(mockSetFileRows).toHaveBeenNthCalledWith(5, [
-        {
-          errorMessage: null,
-          file: mockAcceptedFile,
-          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-          status: 'processed',
-        },
-        {
-          errorMessage: null,
-          file: mockRejectedFile,
-          imagePreviewThumbnail: '',
-          status: 'processed',
-        },
-      ]);
-
-      // Expect invalid props to not have been called
-      expect(onDropMock).not.toHaveBeenCalled();
-      expect(onDropAcceptedMock).not.toHaveBeenCalled();
-      expect(onDropRejectedMock).not.toHaveBeenCalled();
-    });
-    console.error = original;
-  });
-
-  it('renders hint if provided', () => {
-    const { container } = render(
-      <FileUploaderBeta fileRows={[]} hint={'test hint'} setFileRows={() => {}} />
-    );
-    getByText(container, 'test hint');
-  });
-
-  it('renders label if provided', () => {
-    const { container } = render(
-      <FileUploaderBeta fileRows={[]} label={'test label'} setFileRows={() => {}} />
-    );
-    getByText(container, 'test label');
-  });
-
-  it('renders label if disabled', () => {
-    const { container } = render(
-      <FileUploaderBeta disabled fileRows={[]} label={'test label'} setFileRows={() => {}} />
-    );
-    getByText(container, 'test label');
-  });
-
-  it('calls setFilesRows with error when too many files are added', async () => {
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockSetFileRows = jest.fn();
-    render(<FileUploaderBeta fileRows={[]} maxFiles={0} setFileRows={mockSetFileRows} />);
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), {
-        target: { files: [mockFile] },
-      });
-    });
-    await waitFor(() => {
-      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
-      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
-        {
-          errorMessage: 'cannot process more than 0 file(s)',
-          file: mockFile,
-          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-          status: 'error',
-        },
-      ]);
-    });
-  });
-
-  it('calls setFilesRows with error when file size is too small', async () => {
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockSetFileRows = jest.fn();
-    render(<FileUploaderBeta fileRows={[]} minSize={50 * 1000} setFileRows={mockSetFileRows} />);
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), {
-        target: { files: [mockFile] },
-      });
-    });
-    await waitFor(() => {
-      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
-      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
-        {
-          errorMessage: 'file size must be greater than 50 KB',
-          file: mockFile,
-          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-          status: 'error',
-        },
-      ]);
-    });
-  });
-
-  it('calls setFilesRows with error when file size is too big', async () => {
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockSetFileRows = jest.fn();
-    render(<FileUploaderBeta fileRows={[]} maxSize={0} setFileRows={mockSetFileRows} />);
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), {
-        target: { files: [mockFile] },
-      });
-    });
-    await waitFor(() => {
-      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
-      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
-        {
-          errorMessage: 'file size must be less than 0 bytes',
-          file: mockFile,
-          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-          status: 'error',
-        },
-      ]);
-    });
-  });
-
-  it('calls setFilesRows with error when file type is not accepted', async () => {
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockSetFileRows = jest.fn();
-    render(<FileUploaderBeta accept={'image/jpg'} fileRows={[]} setFileRows={mockSetFileRows} />);
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), {
-        target: { files: [mockFile] },
-      });
-    });
-    await waitFor(() => {
-      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
-      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
-        {
-          errorMessage: 'file type of image/png is not accepted',
-          file: mockFile,
-          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-          status: 'error',
-        },
-      ]);
-    });
-  });
-
-  it('calls setFilesRows with error when processFileOnDrop returns with an error', async () => {
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockProcessFileOnDrop = jest.fn((file) =>
-      Promise.resolve({ errorMessage: 'test error' })
-    );
-    const mockSetFileRows = jest.fn();
-    render(
-      <FileUploaderBeta
-        fileRows={[]}
-        processFileOnDrop={mockProcessFileOnDrop}
-        setFileRows={mockSetFileRows}
-      />
-    );
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), {
-        target: { files: [mockFile] },
-      });
-    });
-    await waitFor(() => {
-      expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
-      expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
-      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
-      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
-        {
-          errorMessage: 'test error',
-          file: mockFile,
-          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-          status: 'error',
-        },
-      ]);
-    });
-  });
-
-  it('calls setFilesRows with success when processFileOnDrop returns with success', async () => {
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockProcessFileOnDrop = jest.fn((file) =>
-      Promise.resolve({ errorMessage: null, fileInfo: 'test-file-info' })
-    );
-    const mockSetFileRows = jest.fn();
-    render(
-      <FileUploaderBeta
-        fileRows={[]}
-        processFileOnDrop={mockProcessFileOnDrop}
-        setFileRows={mockSetFileRows}
-      />
-    );
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), {
-        target: { files: [mockFile] },
-      });
-    });
-    await waitFor(() => {
-      expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
-      expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
-      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
-      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
-        {
-          errorMessage: null,
-          file: mockFile,
-          fileInfo: 'test-file-info',
-          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-          status: 'processed',
-        },
-      ]);
-    });
-  });
-
-  it('calls setFilesRows with error when processFileOnDrop returns with undefined error', async () => {
-    const original = console.error;
-    console.error = jest.fn();
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockError = new Error();
-    const mockProcessFileOnDrop = jest.fn((file) => Promise.reject(mockError));
-    const mockSetFileRows = jest.fn();
-    render(
-      <FileUploaderBeta
-        fileRows={[]}
-        processFileOnDrop={mockProcessFileOnDrop}
-        setFileRows={mockSetFileRows}
-      />
-    );
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), {
-        target: { files: [mockFile] },
-      });
-    });
-    await waitFor(() => {
-      expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
-      expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
-      expect(console.error).toHaveBeenCalledTimes(1);
-      expect(console.error).toHaveBeenCalledWith('error with processFileOnDrop', mockError);
-      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
-      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
-        {
-          errorMessage: 'unknown processing error',
-          file: mockFile,
-          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-          status: 'error',
-        },
-      ]);
-    });
-    console.error = original;
-  });
-
-  it('prevents drop when disabled is true', async () => {
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockError = new Error();
-    const mockSetFileRows = jest.fn();
-    render(<FileUploaderBeta disabled fileRows={[]} setFileRows={mockSetFileRows} />);
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), {
-        target: { files: [mockFile] },
-      });
-    });
-    await waitFor(() => {
-      expect(mockSetFileRows).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  it('prevents drop when files are loading and disabled is false', async () => {
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockError = new Error();
-    const mockSetFileRows = jest.fn();
-    render(
-      <FileUploaderBeta
-        disabled={false}
-        fileRows={[
-          {
-            errorMessage: null,
-            file: mockFile,
-            imagePreviewThumbnail: '',
-            status: 'added',
-          },
-        ]}
-        setFileRows={mockSetFileRows}
-      />
-    );
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), {
-        target: { files: [mockFile] },
-      });
-    });
-    await waitFor(() => {
-      expect(mockSetFileRows).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  it('calls setFileRows when FileReader onerror is triggered', async () => {
-    // @ts-ignore
-    jest.spyOn(global, 'FileReader').mockImplementationOnce(function () {
-      this.readAsDataURL = jest.fn(() => {
-        if (this.onerror) {
-          const errorEvent = new Event('error');
-          this.onerror(errorEvent);
-        }
-      });
-    });
-
-    const mockFile = new File(['(⌐□_□)'], 'test.json', {
-      type: 'application/json',
-    });
-    const files = [mockFile];
-
-    const mockFileRows = [];
-    const mockSetFileRows = jest.fn();
-    render(<FileUploaderBeta fileRows={mockFileRows} setFileRows={mockSetFileRows} />);
-
-    await act(async () => {
-      await fireEvent.drop(screen.getByText('Drop files here to upload...'), { target: { files } });
-    });
-    await waitFor(() => {
-      expect(mockSetFileRows).toHaveBeenCalledTimes(2);
-      expect(mockSetFileRows).toHaveBeenNthCalledWith(2, [
-        {
-          errorMessage: 'cannot read file',
-          file: mockFile,
-          imagePreviewThumbnail: '',
-          status: 'error',
-        },
-      ]);
-    });
-  });
-
-  it('calls setFileRows when the remove file icon is clicked', async () => {
-    const mockFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const mockSetFileRows = jest.fn();
-    const { container } = render(
-      <FileUploaderBeta
-        fileRows={[
-          {
-            errorMessage: null,
-            file: mockFile,
-            imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-            status: 'processed',
-          },
-        ]}
-        setFileRows={mockSetFileRows}
-        overrides={{ TrashCanFilledIconContainer: { props: { 'data-testid': 'trash-can' } } }}
-      />
-    );
-
-    await act(async () => {
-      await fireEvent.click(getByTestId(container, 'trash-can'));
-    });
-    await waitFor(() => {
-      expect(mockSetFileRows).toHaveBeenCalledTimes(1);
-      expect(mockSetFileRows).toHaveBeenCalledWith([]);
-    });
-  });
-
-  it('shows item preview when itemPreview is true', () => {
-    const mockDocumentFile = new File(['(⌐□_□)'], 'test.pdf', {
-      type: 'application/pdf',
-    });
-    const mockImageFile = new File(['(⌐□_□)'], 'test.png', {
-      type: 'image/png',
-    });
-    const { container } = render(
-      <FileUploaderBeta
-        fileRows={[
-          {
-            errorMessage: null,
-            file: mockDocumentFile,
-            imagePreviewThumbnail: '',
-            status: 'processed',
-          },
-          {
-            errorMessage: null,
-            file: mockImageFile,
-            imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
-            status: 'processed',
-          },
-        ]}
-        itemPreview
-        setFileRows={() => {}}
-        overrides={{
-          ImagePreviewThumbnail: { props: { 'data-testid': 'image-thumbnail' } },
-          ItemPreviewContainer: { props: { 'data-testid': 'item-preview' } },
-          PaperclipFilledIcon: { props: { 'data-testid': 'paperclip' } },
-        }}
-      />
-    );
-    getByTestId(container, 'image-thumbnail');
-    getAllByTestId(container, 'item-preview');
-    getByTestId(container, 'paperclip');
-  });
-});
diff --git a/src/file-uploader-beta/file-uploader-beta.tsx b/src/file-uploader-beta/file-uploader-beta.tsx
deleted file mode 100644
index 595f67c5e5..0000000000
--- a/src/file-uploader-beta/file-uploader-beta.tsx
+++ /dev/null
@@ -1,503 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-import * as React from 'react';
-import { FileUploader } from '../file-uploader';
-import { SHAPE, SIZE } from '../button';
-import { ProgressBar } from '../progress-bar';
-import { getOverrides } from '../helpers/overrides';
-import {
-  StyledFileRow,
-  StyledFileRowColumn,
-  StyledFileRowContent,
-  StyledFileRowFileName,
-  StyledFileRowText,
-  StyledFileRowUploadMessage,
-  StyledFileRowUploadText,
-  StyledFileRows,
-  StyledHint,
-  StyledImagePreviewThumbnail,
-  StyledItemPreviewContainer,
-  StyledLabel,
-  StyledParentRoot,
-  StyledTrashCanFilledIconContainer,
-} from './styled-components';
-import { FILE_STATUS, FILE_STATUS_TO_COLOR_MAP } from './constants';
-import { destructureStyleOverride, formatBytes } from './utils';
-import AlertIconComponent from '../icon/alert';
-import CircleCheckFilledIconComponent from '../icon/circle-check-filled';
-import PaperclipFilledIconComponent from '../icon/paperclip-filled';
-import TrashCanFilledIconComponent from '../icon/trash-can-filled';
-import { useStyletron } from '../styles';
-import { LocaleContext } from '../locale';
-
-import type { FileRow, FileUploaderBetaProps } from './types';
-
-export default function FileUploaderBeta(props: FileUploaderBetaProps) {
-  if (props['onDrop']) {
-    console.error('onDrop is not a prop for FileUploaderBeta.');
-  }
-  if (props['onDropAccepted']) {
-    console.error('onDropAccepted is not a prop for FileUploaderBeta.');
-  }
-  if (props['onDropRejected']) {
-    console.error('onDropRejected is not a prop for FileUploaderBeta.');
-  }
-
-  // Isolate props that are not meant to be passed to FileUploaderBasic
-  const {
-    fileRows,
-    hint,
-    itemPreview,
-    label,
-    maxFiles,
-    overrides = {},
-    processFileOnDrop,
-    setFileRows,
-    ...fileUploaderBasicProps
-  } = props;
-  // Isolate styles that are not meant to be passed to FileUploaderBasic
-  const {
-    // Overrides for FileUploaderBeta
-    AlertIcon: OverridesAlertIcon,
-    CircleCheckFilledIcon: OverridesCircleCheckFilledIcon,
-    FileRow: OverridesFileRow,
-    FileRowColumn: OverridesFileRowColumn,
-    FileRowContent: OverridesFileRowContent,
-    FileRowFileName: OverridesFileRowFileName,
-    FileRowText: OverridesFileRowText,
-    FileRowUploadMessage: OverridesFileRowUploadMessage,
-    FileRowUploadText: OverridesFileRowUploadText,
-    FileRows: OverridesFileRows,
-    Hint: OverridesHint,
-    ImagePreviewThumbnail: OverridesImagePreviewThumbnail,
-    ItemPreviewContainer: OverridesItemPreviewContainer,
-    Label: OverridesLabel,
-    PaperclipFilledIcon: OverridesPaperclipFilledIcon,
-    ParentRoot: OverridesParentRoot,
-    TrashCanFilledIcon: OverridesTrashCanFilledIcon,
-    TrashCanFilledIconContainer: OverridesTrashCanFilledIconContainer,
-
-    // Overrides for FileUploaderBasic that are modified in this file
-    ButtonComponent,
-    ContentMessage,
-    FileDragAndDrop,
-    ...fileUploaderBasicOverrides
-  } = overrides;
-
-  const [, theme] = useStyletron();
-
-  // Prepare icon overrides
-  const [AlertIcon, alertIconProps] = getOverrides(OverridesAlertIcon, AlertIconComponent);
-  const [CircleCheckFilledIcon, circleCheckFilledIconProps] = getOverrides(
-    overrides.CircleCheckFilledIcon,
-    CircleCheckFilledIconComponent
-  );
-  const [PaperclipFilledIcon, paperclipFilledIconProps] = getOverrides(
-    OverridesPaperclipFilledIcon,
-    PaperclipFilledIconComponent
-  );
-  const [TrashCanFilledIcon, trashCanFilledIconProps] = getOverrides(
-    OverridesTrashCanFilledIcon,
-    TrashCanFilledIconComponent
-  );
-
-  // Prepare styled component overrides
-  const [FileRow, fileRowProps] = getOverrides(OverridesFileRow, StyledFileRow);
-  const [FileRowColumn, fileRowColumnProps] = getOverrides(
-    OverridesFileRowColumn,
-    StyledFileRowColumn
-  );
-  const [FileRowContent, fileRowContentProps] = getOverrides(
-    OverridesFileRowContent,
-    StyledFileRowContent
-  );
-  const [FileRowFileName, fileRowFileNameProps] = getOverrides(
-    OverridesFileRowFileName,
-    StyledFileRowFileName
-  );
-  const [FileRowText, fileRowTextProps] = getOverrides(OverridesFileRowText, StyledFileRowText);
-  const [FileRowUploadMessage, fileRowUploadMessageProps] = getOverrides(
-    OverridesFileRowUploadMessage,
-    StyledFileRowUploadMessage
-  );
-  const [FileRowUploadText, fileRowUploadTextProps] = getOverrides(
-    OverridesFileRowUploadText,
-    StyledFileRowUploadText
-  );
-  const [FileRows, fileRowsProps] = getOverrides(OverridesFileRows, StyledFileRows);
-  const [Hint, hintProps] = getOverrides(OverridesHint, StyledHint);
-  const [ImagePreviewThumbnail, imagePreviewThumbnailProps] = getOverrides(
-    OverridesImagePreviewThumbnail,
-    StyledImagePreviewThumbnail
-  );
-  const [ItemPreviewContainer, itemPreviewContainerProps] = getOverrides(
-    OverridesItemPreviewContainer,
-    StyledItemPreviewContainer
-  );
-  const [Label, labelProps] = getOverrides(OverridesLabel, StyledLabel);
-  const [ProgressBarComponent, progressBarProps] = getOverrides(overrides.ProgressBar, ProgressBar);
-  const [ParentRoot, parentRootProps] = getOverrides(OverridesParentRoot, StyledParentRoot);
-  const [TrashCanFilledIconContainer, trashCanFilledIconContainerProps] = getOverrides(
-    OverridesTrashCanFilledIconContainer,
-    StyledTrashCanFilledIconContainer
-  );
-
-  const onDrop = React.useCallback(
-    (acceptedFiles: Array<File>, rejectedFiles: Array<File>) => {
-      const newFiles = acceptedFiles.concat(rejectedFiles);
-      let newFileRows = [...props.fileRows];
-      newFiles.forEach((file: File) => {
-        newFileRows.push({
-          errorMessage: null,
-          file,
-          imagePreviewThumbnail: '',
-          status: FILE_STATUS.added,
-        });
-        props.setFileRows([...newFileRows]);
-      });
-
-      newFileRows.forEach((fileRow: FileRow, index: number) => {
-        if (fileRow.status === FILE_STATUS.added) {
-          let reader = new FileReader();
-
-          reader.onerror = () => {
-            newFileRows[index].errorMessage = 'cannot read file';
-            newFileRows[index].status = FILE_STATUS.error;
-            props.setFileRows([...newFileRows]);
-          };
-
-          reader.onload = (event) => {
-            if (newFileRows[index].file.type.startsWith('image/')) {
-              newFileRows[index].imagePreviewThumbnail = event.target?.result;
-              props.setFileRows([...newFileRows]);
-            }
-            if (
-              props.maxFiles !== undefined &&
-              Number.isInteger(props.maxFiles) &&
-              index >= props.maxFiles
-            ) {
-              // If too many files
-              newFileRows[
-                index
-              ].errorMessage = `cannot process more than ${props.maxFiles} file(s)`;
-              newFileRows[index].status = FILE_STATUS.error;
-              props.setFileRows([...newFileRows]);
-            } else if (
-              props.minSize !== undefined &&
-              Number.isInteger(props.minSize) &&
-              props.minSize > fileRow.file.size
-            ) {
-              // If file size is too small
-              newFileRows[index].errorMessage = `file size must be greater than ${formatBytes(
-                props.minSize
-              )}`;
-              newFileRows[index].status = FILE_STATUS.error;
-              props.setFileRows([...newFileRows]);
-            } else if (
-              props.maxSize !== undefined &&
-              Number.isInteger(props.maxSize) &&
-              props.maxSize < fileRow.file.size
-            ) {
-              // If file size is too big
-              newFileRows[index].errorMessage = `file size must be less than ${formatBytes(
-                props.maxSize
-              )}`;
-              newFileRows[index].status = FILE_STATUS.error;
-              props.setFileRows([...newFileRows]);
-            } else if (index >= newFileRows.length - rejectedFiles.length) {
-              // If file was rejected by dropzone (e.g. wrong file type)
-              newFileRows[index].errorMessage = `file type of ${fileRow.file.type} is not accepted`;
-              newFileRows[index].status = FILE_STATUS.error;
-              props.setFileRows([...newFileRows]);
-            } else if (props.processFileOnDrop) {
-              // If caller passed in file process function
-              props
-                .processFileOnDrop(fileRow.file)
-                .then(
-                  ({ errorMessage, fileInfo }: { errorMessage: string | null; fileInfo?: any }) => {
-                    if (fileInfo) {
-                      newFileRows[index].fileInfo = fileInfo;
-                    }
-                    if (errorMessage) {
-                      newFileRows[index].errorMessage = errorMessage;
-                      newFileRows[index].status = FILE_STATUS.error;
-                    } else {
-                      newFileRows[index].status = FILE_STATUS.processed;
-                    }
-                  }
-                )
-                .catch((error) => {
-                  console.error('error with processFileOnDrop', error);
-                  newFileRows[index].errorMessage = 'unknown processing error';
-                  newFileRows[index].status = FILE_STATUS.error;
-                })
-                .finally(() => {
-                  props.setFileRows([...newFileRows]);
-                });
-            } else {
-              // If no errors and no file process function
-              newFileRows[index].status = FILE_STATUS.processed;
-              props.setFileRows([...newFileRows]);
-            }
-          };
-
-          reader.readAsDataURL(fileRow.file);
-        }
-      });
-    },
-    [props]
-  );
-
-  const removeFileRow = (event: React.MouseEvent) => {
-    event.preventDefault();
-    const indexOfFileRowToRemove = Number(event?.currentTarget?.getAttribute('index'));
-    props.setFileRows([...props.fileRows.toSpliced(indexOfFileRowToRemove, 1)]);
-  };
-
-  return (
-    <ParentRoot data-baseweb="file-uploader-beta-parent-root" {...parentRootProps}>
-      {props.label && (
-        <Label data-baseweb="file-uploader-beta-label" {...labelProps} $disabled={!!props.disabled}>
-          {props.label}
-        </Label>
-      )}
-      <FileUploader
-        overrides={{
-          ButtonComponent: {
-            props: {
-              shape: SHAPE.default,
-              size: SIZE.default,
-              ...props.overrides?.ButtonComponent?.props,
-              style: {
-                marginTop: 0,
-                // @ts-expect-error
-                ...destructureStyleOverride(props.overrides?.ButtonComponent?.props?.style, theme),
-              },
-              overrides: {
-                // @ts-expect-error
-                ...props.overrides?.ButtonComponent?.props?.overrides,
-                BaseButton: {
-                  // @ts-expect-error
-                  ...props.overrides?.ButtonComponent?.props?.overrides?.BaseButton,
-                  style: {
-                    backgroundColor: theme.colors.backgroundPrimary,
-                    ...destructureStyleOverride(
-                      // @ts-expect-error
-                      props.overrides?.ButtonComponent?.props?.overrides?.BaseButton?.style,
-                      theme
-                    ),
-                  },
-                },
-              },
-            },
-          },
-          ContentMessage: {
-            style: {
-              ...theme.typography.ParagraphMedium,
-              color: theme.colors.contentTertiary,
-              ...destructureStyleOverride(props.overrides?.ContentMessage?.style, theme),
-            },
-          },
-          FileDragAndDrop: {
-            style: {
-              justifyContent: 'flex-end',
-              flexDirection: 'row-reverse',
-              flexWrap: 'wrap',
-              gap: theme.sizing.scale300,
-              paddingBottom: theme.sizing.scale600,
-              paddingLeft: theme.sizing.scale600,
-              paddingRight: theme.sizing.scale600,
-              paddingTop: theme.sizing.scale600,
-              ...destructureStyleOverride(props.overrides?.FileDragAndDrop?.style, theme),
-            },
-          },
-          Root: {
-            style: {
-              zIndex: 1,
-              ...destructureStyleOverride(props.overrides?.Root?.style, theme),
-              ...props.overrides?.Root?.style,
-            },
-          },
-        }}
-        {...fileUploaderBasicOverrides}
-        {...fileUploaderBasicProps}
-        // Disable uploads while files are loading, even if application passes disabled as false
-        disabled={
-          !!props.disabled
-            ? props.disabled
-            : !!props.fileRows.find((fileRow: FileRow) => fileRow.status === FILE_STATUS.added)
-        }
-        // Implement or use no-op callbacks to prevent consumers from passing them in
-        onDrop={onDrop}
-        onDropAccepted={(_: Array<File>) => {}}
-        onDropRejected={(_: Array<File>) => {}}
-      />
-      {props.fileRows.length > 0 && (
-        <LocaleContext.Consumer>
-          {(locale) => (
-            <FileRows data-baseweb="file-uploader-beta-file-rows" {...fileRowsProps}>
-              {props.fileRows.map((fileRow, index) => (
-                <FileRow
-                  id={`file-uploader-beta-file-row-${index}`}
-                  data-baseweb="file-uploader-beta-file-row"
-                  key={index}
-                  {...fileRowProps}
-                >
-                  {props.itemPreview && (
-                    <ItemPreviewContainer
-                      data-baseweb="file-uploader-beta-item-preview-container"
-                      {...itemPreviewContainerProps}
-                    >
-                      {fileRow.imagePreviewThumbnail ? (
-                        <ImagePreviewThumbnail
-                          alt={fileRow.file.name}
-                          data-baseweb="file-uploader-beta-image-preview-thumbnail"
-                          src={fileRow.imagePreviewThumbnail}
-                          {...imagePreviewThumbnailProps}
-                        />
-                      ) : (
-                        <PaperclipFilledIcon
-                          data-baseweb="file-uploader-beta-paperclip-filled-icon"
-                          color={theme.colors.contentSecondary}
-                          {...paperclipFilledIconProps}
-                        />
-                      )}
-                    </ItemPreviewContainer>
-                  )}
-                  <FileRowColumn
-                    data-baseweb="file-uploader-beta-file-row-column"
-                    {...fileRowColumnProps}
-                  >
-                    <FileRowContent
-                      data-baseweb="file-uploader-beta-file-row-content"
-                      {...fileRowContentProps}
-                    >
-                      <FileRowText
-                        data-baseweb="file-uploader-beta-file-row-text"
-                        {...fileRowTextProps}
-                      >
-                        <FileRowFileName
-                          data-baseweb="file-uploader-beta-file-row-file-name"
-                          {...fileRowFileNameProps}
-                        >
-                          {fileRow.file.name}
-                        </FileRowFileName>
-                        <FileRowUploadMessage
-                          data-baseweb="file-uploader-beta-file-row-upload-message"
-                          $color={FILE_STATUS_TO_COLOR_MAP(theme)[fileRow.status]}
-                          {...fileRowUploadMessageProps}
-                        >
-                          {fileRow.status === FILE_STATUS.error && (
-                            <>
-                              <AlertIcon
-                                color={FILE_STATUS_TO_COLOR_MAP(theme)[fileRow.status]}
-                                data-baseweb="file-uploader-beta-alert-icon"
-                                title={fileRow.status}
-                                {...alertIconProps}
-                              />
-                              <FileRowUploadText
-                                aria-errormessage={fileRow.errorMessage}
-                                {...fileRowUploadTextProps}
-                              >
-                                {locale.fileuploaderbeta.error}
-                                {fileRow.errorMessage}
-                              </FileRowUploadText>
-                            </>
-                          )}
-                          {fileRow.status === FILE_STATUS.processed && (
-                            <>
-                              <CircleCheckFilledIcon
-                                color={FILE_STATUS_TO_COLOR_MAP(theme)[fileRow.status]}
-                                data-baseweb="file-uploader-beta-circle-check-filled-icon"
-                                title={fileRow.status}
-                                {...circleCheckFilledIconProps}
-                              />
-                              <FileRowUploadText {...fileRowUploadTextProps}>
-                                {locale.fileuploaderbeta.processed}
-                              </FileRowUploadText>
-                            </>
-                          )}
-                          {fileRow.status === FILE_STATUS.added && (
-                            <FileRowUploadText {...fileRowUploadTextProps}>
-                              {locale.fileuploaderbeta.added}
-                            </FileRowUploadText>
-                          )}
-                        </FileRowUploadMessage>
-                      </FileRowText>
-                      {fileRow.status !== FILE_STATUS.added && (
-                        <TrashCanFilledIconContainer
-                          data-baseweb="file-uploader-beta-trash-can-filled-icon-container"
-                          index={index}
-                          onClick={removeFileRow}
-                          {...trashCanFilledIconContainerProps}
-                        >
-                          <TrashCanFilledIcon
-                            aria-controls={`file-uploader-beta-file-row-${index}`}
-                            aria-describedby={props['aria-describedby']}
-                            aria-label={'remove'}
-                            data-baseweb="file-uploader-beta-trash-can-filled-icon"
-                            overrides={{ Svg: { style: { verticalAlign: 'middle' } } }}
-                            size={theme.sizing.scale600}
-                            title={'remove'}
-                            {...trashCanFilledIconProps}
-                          />
-                        </TrashCanFilledIconContainer>
-                      )}
-                    </FileRowContent>
-                    <ProgressBarComponent
-                      data-baseweb="file-uploader-beta-progress-bar"
-                      overrides={{
-                        Bar: {
-                          style: {
-                            marginTop: theme.sizing.scale0,
-                            marginBottom: theme.sizing.scale0,
-                            marginLeft: 0,
-                            marginRight: 0,
-                          },
-                        },
-                        BarContainer: {
-                          style: {
-                            marginTop: 0,
-                            marginBottom: 0,
-                            marginLeft: 0,
-                            marginRight: 0,
-                          },
-                        },
-                        BarProgress: {
-                          // @ts-ignore
-                          style: ({ $theme }) => ({
-                            backgroundColor: FILE_STATUS_TO_COLOR_MAP($theme)[fileRow.status],
-                          }),
-                        },
-                      }}
-                      value={fileRow.status === FILE_STATUS.processed ? 100 : 20}
-                      {...progressBarProps}
-                    />
-                  </FileRowColumn>
-                </FileRow>
-              ))}
-            </FileRows>
-          )}
-        </LocaleContext.Consumer>
-      )}
-      {props.hint && (
-        <Hint
-          data-baseweb="file-uploader-beta-hint"
-          $fileCount={props.fileRows.length}
-          {...hintProps}
-        >
-          {props.hint}
-        </Hint>
-      )}
-    </ParentRoot>
-  );
-}
-
-FileUploaderBeta.defaultProps = {
-  fileRows: [],
-  setFileRows: () => {},
-};
diff --git a/src/file-uploader-beta/index.ts b/src/file-uploader-beta/index.ts
deleted file mode 100644
index a6b376537d..0000000000
--- a/src/file-uploader-beta/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-export { default as FileUploaderBeta } from './file-uploader-beta';
-
-// Styled elements
-export {
-  StyledFileRow,
-  StyledFileRowColumn,
-  StyledFileRowContent,
-  StyledFileRowFileName,
-  StyledFileRowText,
-  StyledFileRowUploadMessage,
-  StyledFileRowUploadText,
-  StyledFileRows,
-  StyledHint,
-  StyledImagePreviewThumbnail,
-  StyledItemPreviewContainer,
-  StyledLabel,
-  StyledParentRoot,
-  StyledTrashCanFilledIconContainer,
-} from './styled-components';
-
-// Flow
-export * from './types';
-export type { FileUploaderBetaLocale } from './locale';
diff --git a/src/file-uploader-beta/locale.ts b/src/file-uploader-beta/locale.ts
deleted file mode 100644
index 998da3356f..0000000000
--- a/src/file-uploader-beta/locale.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-export type FileUploaderBetaLocale = {
-  added: string;
-  error: string;
-  processed: string;
-};
-
-const locale = {
-  added: 'Loading...',
-  error: 'Upload failed: ',
-  processed: 'Upload successful',
-};
-
-export default locale;
diff --git a/src/file-uploader-beta/styled-components.ts b/src/file-uploader-beta/styled-components.ts
deleted file mode 100644
index f307268390..0000000000
--- a/src/file-uploader-beta/styled-components.ts
+++ /dev/null
@@ -1,264 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-import { styled } from '../styles';
-import type { StyleProps } from './types';
-
-export const StyledFileRow = styled<'li', StyleProps>('li', (props) => {
-  const {
-    $theme: { animation, sizing },
-  } = props;
-  return {
-    animationDuration: animation.timing400,
-    animationFillMode: 'forwards',
-    animationIterationCount: 1,
-    animationTimingFunction: animation.easeOutQuinticCurve,
-    animationName: {
-      '0%': {
-        transform: 'translateY(-32px)',
-        opacity: 0,
-      },
-      '50%': {
-        opacity: 1,
-      },
-      '100%': {
-        transform: 'translateY(0px)',
-        opacity: 1,
-      },
-    },
-    paddingTop: sizing.scale500,
-    paddingRight: sizing.scale500,
-    paddingBottom: sizing.scale500,
-    paddingLeft: sizing.scale500,
-    height: 'fit-content',
-    display: 'flex',
-    alignItems: 'center',
-  };
-});
-StyledFileRow.displayName = 'StyledFileRow';
-
-export const StyledFileRowColumn = styled<'div', StyleProps>('div', (props) => {
-  const {
-    $theme: { sizing },
-  } = props;
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '100%',
-    justifyContent: 'space-between',
-    paddingRight: sizing.scale500,
-    paddingLeft: sizing.scale500,
-    flexGrow: 1,
-    overflow: 'auto',
-  };
-});
-StyledFileRowColumn.displayName = 'StyledFileRowColumn';
-
-export const StyledFileRowContent = styled<'div', StyleProps>('div', (props) => {
-  const {
-    $theme: { sizing },
-  } = props;
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    gap: sizing.scale500,
-    justifyContent: 'space-between',
-    width: '100%',
-    height: sizing.scale1200,
-  };
-});
-StyledFileRowContent.displayName = 'StyledFileRowContent';
-
-export const StyledFileRowFileName = styled<'div', StyleProps>('div', (props) => {
-  const {
-    $theme: { colors, typography },
-  } = props;
-  return {
-    ...typography.LabelMedium,
-    color: colors.contentPrimary,
-    width: '100%',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  };
-});
-StyledFileRowColumn.displayName = 'StyledFileRowColumn';
-
-export const StyledFileRowText = styled<'div', StyleProps>('div', (props) => {
-  const {
-    $theme: { sizing },
-  } = props;
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-    gap: sizing.scale300,
-    flexGrow: 1,
-    overflow: 'auto',
-  };
-});
-StyledFileRowColumn.displayName = 'StyledFileRowColumn';
-
-export const StyledFileRowUploadMessage = styled<'div', StyleProps>('div', (props) => {
-  const {
-    $color,
-    $theme: { sizing, typography },
-  } = props;
-  return {
-    ...typography.ParagraphSmall,
-    color: $color,
-    alignItems: 'center',
-    gap: sizing.scale100,
-    display: 'flex',
-    flexDirection: 'row',
-  };
-});
-StyledFileRowUploadMessage.displayName = 'StyledFileRowUploadMessage';
-
-export const StyledFileRowUploadText = styled<'div', StyleProps>('div', () => {
-  return {
-    width: '100%',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  };
-});
-StyledFileRowUploadText.displayName = 'StyledFileRowUploadText';
-
-export const StyledFileRows = styled<'ul', StyleProps>('ul', (props) => {
-  const {
-    $theme: { animation, borders, sizing },
-  } = props;
-  return {
-    animationDuration: animation.timing500,
-    animationIterationCount: 1,
-    animationTimingFunction: animation.easeInOutQuinticCurve,
-    animationName: {
-      '0%': {
-        transform: 'translateY(-32px)',
-      },
-      '100%': {
-        transform: 'translateX(-0px)',
-      },
-    },
-    ...borders.border200,
-    borderRadius: borders.radius400,
-    borderWidth: sizing.scale0,
-    listStyle: 'none',
-    padding: 0,
-    marginTop: 0,
-    marginBottom: 0,
-  };
-});
-StyledFileRows.displayName = 'StyledFileRows';
-
-export const StyledHint = styled<'div', StyleProps>('div', (props) => {
-  const {
-    $fileCount,
-    $theme: { animation, colors, typography },
-  } = props;
-  let fontColor = colors.contentTertiary;
-  const animations =
-    $fileCount > 0
-      ? {
-          animationDuration: animation.timing500,
-          animationIterationCount: 1,
-          animationTimingFunction: animation.easeInOutQuinticCurve,
-          animationName: {
-            '0%': {
-              transform: 'translateY(-32px)',
-            },
-            '100%': {
-              transform: 'translateX(-0px)',
-            },
-          },
-        }
-      : {};
-  return {
-    ...animations,
-    ...typography.font100,
-    color: fontColor,
-  };
-});
-StyledHint.displayName = 'StyledHint';
-
-export const StyledImagePreviewThumbnail = styled<'img', StyleProps>('img', (props) => {
-  const {
-    $alt,
-    $src,
-    $theme: { borders },
-  } = props;
-  return {
-    alt: $alt,
-    ...borders.border200,
-    borderRadius: borders.radius200,
-    className: 'thumb',
-    src: $src,
-    width: '100%',
-    height: '100%',
-  };
-});
-StyledImagePreviewThumbnail.displayName = 'StyledImagePreviewThumbnail';
-
-export const StyledItemPreviewContainer = styled<'div', StyleProps>('div', (props) => {
-  const {
-    $theme: { borders, colors, sizing },
-  } = props;
-  return {
-    backgroundColor: colors.backgroundSecondary,
-    ...borders.border200,
-    borderRadius: borders.radius200,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    width: sizing.scale1400,
-    height: sizing.scale1400,
-  };
-});
-StyledItemPreviewContainer.displayName = 'StyledItemPreviewContainer';
-
-export const StyledLabel = styled<'label', StyleProps>('label', (props) => {
-  const {
-    $disabled,
-    $theme: { colors, typography },
-  } = props;
-  return {
-    ...typography.font250,
-    width: '100%',
-    color: $disabled ? colors.contentSecondary : colors.contentPrimary,
-    display: 'block',
-  };
-});
-StyledLabel.displayName = 'StyledLabel';
-
-export const StyledParentRoot = styled<'div', StyleProps>('div', (props) => {
-  const {
-    $theme: { sizing },
-  } = props;
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: sizing.scale300,
-  };
-});
-StyledParentRoot.displayName = 'StyledParentRoot';
-
-export const StyledTrashCanFilledIconContainer = styled<'span', StyleProps>('span', (props) => {
-  const {
-    $theme: { colors },
-  } = props;
-  return {
-    color: colors.contentPrimary,
-    cursor: 'pointer',
-    flexShrink: 0,
-  };
-});
-StyledTrashCanFilledIconContainer.displayName = 'StyledTrashCanFilledIconContainer';
diff --git a/src/file-uploader-beta/types.ts b/src/file-uploader-beta/types.ts
deleted file mode 100644
index 6c0945915e..0000000000
--- a/src/file-uploader-beta/types.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-import type { Override } from '../helpers/overrides';
-import type { FILE_STATUS } from './constants';
-import type {
-  FileUploaderOverrides,
-  FileUploaderProps,
-  StyleProps as FileUploaderBasicStyleProps,
-} from '../file-uploader/types';
-
-export type StyleProps = FileUploaderBasicStyleProps & {
-  $alt: string;
-  $color: string;
-  $fileCount: number;
-  $src: string;
-};
-
-export type FileUploaderBetaOverrides = {
-  AlertIcon?: Override;
-  CircleCheckFilledIcon?: Override;
-  FileRow?: Override;
-  FileRowColumn?: Override;
-  FileRowContent?: Override;
-  FileRowFileName?: Override;
-  FileRowText?: Override;
-  FileRowUploadMessage?: Override;
-  FileRowUploadText?: Override;
-  FileRows?: Override;
-  Hint?: Override;
-  ImagePreviewThumbnail?: Override;
-  ItemPreviewContainer?: Override;
-  Label?: Override;
-  PaperclipFilledIcon?: Override;
-  ParentRoot?: Override;
-  TrashCanFilledIcon?: Override;
-  TrashCanFilledIconContainer?: Override;
-};
-
-export type FileRow = {
-  errorMessage: string | null;
-  file: File;
-  // fileInfo is the result of the processFileOnDrop function
-  // TODO: switch to leverage a generic <T> so applications can define the shape of fileInfo
-  fileInfo?: any;
-  imagePreviewThumbnail?: any;
-  /** Defines the status of a file */
-  status: keyof typeof FILE_STATUS;
-};
-
-export type FileUploaderBetaProps = Omit<
-  FileUploaderProps,
-  'onDrop' | 'onDropAccepted' | 'onDropRejected' | 'overrides'
-> & {
-  fileRows: FileRow[];
-  hint?: string;
-  itemPreview?: boolean;
-  label?: string;
-  maxFiles?: number;
-  overrides?: FileUploaderOverrides & FileUploaderBetaOverrides;
-  /** Function to run on each file, returns "errorMessage: null" on success and "errorMessage: string" for failures */
-  processFileOnDrop?: (file: File) => Promise<{ errorMessage: string | null; fileInfo?: any }>;
-  setFileRows: (fileRows: FileRow[]) => void;
-};
diff --git a/src/file-uploader/__tests__/file-uploader.test.tsx b/src/file-uploader/__tests__/file-uploader.test.tsx
index 869cdfd6ae..c4dc738b8d 100644
--- a/src/file-uploader/__tests__/file-uploader.test.tsx
+++ b/src/file-uploader/__tests__/file-uploader.test.tsx
@@ -7,144 +7,652 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import {
   act,
-  render,
-  getByRole,
+  fireEvent,
+  getAllByTestId,
   getByTestId,
   getByText,
   queryByTestId,
-  queryAllByRole,
-  fireEvent,
+  render,
+  screen,
   waitFor,
 } from '@testing-library/react';
-
 import { FileUploader } from '..';
+import locale from '../locale';
+
+jest.mock('react-uid', () => ({
+  uid: () => '1',
+}));
+
+jest.mock('../constants', () => ({
+  ...jest.requireActual('../constants'),
+  ARIA_LIVE_TIMEOUT_MS: 0,
+}));
 
 describe('FileUploader', () => {
-  it('applies expected accessibility attributes to button', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders gracefully', () => {
     const { container } = render(<FileUploader />);
-    const button = container.querySelector('button');
-    expect(button?.getAttribute('role')).toBe('button');
+    expect(container).toBeDefined();
   });
 
-  it('renders progress bar if progressAmount provided', () => {
-    const { container } = render(<FileUploader progressAmount={50} />);
-    getByRole(container, 'progressbar');
+  it('renders gracefully with different style override types', () => {
+    const { container } = render(
+      <>
+        <FileUploader
+          overrides={{
+            ButtonComponent: {
+              props: {
+                overrides: {
+                  BaseButton: {
+                    style: {
+                      backgroundColor: 'red',
+                    },
+                  },
+                },
+              },
+            },
+          }}
+        />{' '}
+        <FileUploader
+          overrides={{
+            ButtonComponent: {
+              props: {
+                overrides: {
+                  BaseButton: {
+                    style: ({ $theme }) => ({
+                      outline: `${$theme.colors.warning600} solid`,
+                      backgroundColor: $theme.colors.warning600,
+                    }),
+                  },
+                },
+              },
+            },
+          }}
+        />
+      </>
+    );
+    expect(container).toBeDefined();
   });
 
-  it('renders content message if progressMessage provided', () => {
-    const message = 'uploading...';
-    const { container } = render(<FileUploader progressMessage={message} />);
-    getByText(container, message);
+  it('throws errors when invalid props are passed in', () => {
+    const original = console.error;
+    console.error = jest.fn();
+    render(
+      <FileUploader
+        // @ts-ignore
+        onDrop={() => {}}
+        onDropAccepted={() => {}}
+        onDropRejected={() => {}}
+      />
+    );
+    expect(console.error).toHaveBeenCalledTimes(3);
+    expect(console.error).toHaveBeenNthCalledWith(1, 'onDrop is not a prop for FileUploader.');
+    expect(console.error).toHaveBeenNthCalledWith(
+      2,
+      'onDropAccepted is not a prop for FileUploader.'
+    );
+    expect(console.error).toHaveBeenNthCalledWith(
+      3,
+      'onDropRejected is not a prop for FileUploader.'
+    );
+    console.error = original;
   });
 
-  it('renders spinner if progressMessage provided', () => {
+  it('renders file rows when passed in props', () => {
+    const mockFileAdded = new File(['(⌐□_□)'], 'test.jpg', {
+      type: 'image/jpg',
+    });
+    const mockFileError = new File(['(⌐□_□)'], 'test.pdf', {
+      type: 'application/pdf',
+    });
+    const mockFileProcessed = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
     const { container } = render(
       <FileUploader
-        progressMessage="uploading..."
-        overrides={{ Spinner: { props: { 'data-testid': 'spinner' } } }}
+        fileRows={[
+          {
+            errorMessage: null,
+            file: mockFileAdded,
+            id: '1',
+            imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+            status: 'added',
+          },
+          {
+            errorMessage: 'custom error message',
+            file: mockFileError,
+            id: '2',
+            imagePreviewThumbnail: '',
+            status: 'error',
+          },
+          {
+            errorMessage: null,
+            file: mockFileProcessed,
+            id: '3',
+            imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+            status: 'processed',
+          },
+        ]}
+        setFileRows={() => {}}
       />
     );
-    getByTestId(container, 'spinner');
+    getByText(container, 'test.jpg');
+    getByText(container, 'Description');
+    getByText(container, 'test.pdf');
+    getByText(container, 'Upload failed: custom error message');
+    getByText(container, 'test.png');
+    getByText(container, 'Upload successful');
   });
 
-  it('does not render spinner if progressAmount is zero, render progress bar', () => {
-    const { container } = render(
+  it('calls setFileRows for accepted and rejected files and does not call invalid props', async () => {
+    const original = console.error;
+    console.error = jest.fn();
+    const mockAcceptedFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockRejectedFile = new File(['(⌐□_□)'], 'test.json', {
+      type: 'application/json',
+    });
+    const files = [mockAcceptedFile, mockRejectedFile];
+
+    const mockFileRows = [];
+    const mockSetFileRows = jest.fn();
+    const onDropMock = jest.fn();
+    const onDropAcceptedMock = jest.fn();
+    const onDropRejectedMock = jest.fn();
+    render(
       <FileUploader
-        progressMessage="uploading..."
-        progressAmount={0}
-        overrides={{ Spinner: { props: { 'data-testid': 'spinner' } } }}
+        fileRows={mockFileRows}
+        setFileRows={mockSetFileRows}
+        // @ts-ignore
+        onDrop={onDropMock}
+        onDropAccepted={onDropAcceptedMock}
+        onDropRejected={onDropRejectedMock}
       />
     );
-    const spinner = queryByTestId(container, 'spinner');
-    expect(spinner).toBeNull();
 
-    getByRole(container, 'progressbar');
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), { target: { files } });
+    });
+    await waitFor(() => {
+      expect(mockSetFileRows).toHaveBeenCalledTimes(5);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(5, [
+        {
+          errorMessage: null,
+          file: mockAcceptedFile,
+          id: '1',
+          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+          status: 'processed',
+        },
+        {
+          errorMessage: null,
+          file: mockRejectedFile,
+          id: '1',
+          imagePreviewThumbnail: '',
+          status: 'processed',
+        },
+      ]);
+
+      // Expect invalid props to not have been called
+      expect(onDropMock).not.toHaveBeenCalled();
+      expect(onDropAcceptedMock).not.toHaveBeenCalled();
+      expect(onDropRejectedMock).not.toHaveBeenCalled();
+    });
+    console.error = original;
   });
 
-  it('does not render progress bar if progressAmount not provided', () => {
-    const { container } = render(<FileUploader progressMessage="uploading..." />);
-    //will render indeterminate spinner with role progress bar instead
-    expect(queryAllByRole(container, 'progressbar')).toHaveLength(1);
+  it('renders hint if provided', () => {
+    const { container } = render(
+      <FileUploader fileRows={[]} hint={'test hint'} setFileRows={() => {}} />
+    );
+    getByText(container, 'test hint');
   });
 
-  it('renders error message if errorMessage provided', () => {
-    const message = 'error!';
-    const { container } = render(<FileUploader errorMessage={message} />);
-    getByText(container, message);
+  it('renders label if provided', () => {
+    const { container } = render(
+      <FileUploader fileRows={[]} label={'test label'} setFileRows={() => {}} />
+    );
+    getByText(container, 'test label');
   });
 
-  it('renders cancel button if progressAmount provided', () => {
-    const { container } = render(<FileUploader progressAmount={50} />);
-    getByText(container, 'Cancel');
+  it('renders label if disabled', () => {
+    const { container } = render(
+      <FileUploader disabled fileRows={[]} label={'test label'} setFileRows={() => {}} />
+    );
+    getByText(container, 'test label');
   });
 
-  it('renders cancel button if progressMessage provided', () => {
-    const { container } = render(<FileUploader progressMessage="uploading..." />);
-    getByText(container, 'Cancel');
+  it('calls setFilesRows with error when too many files are added', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockSetFileRows = jest.fn();
+    render(<FileUploader fileRows={[]} maxFiles={0} setFileRows={mockSetFileRows} />);
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
+        {
+          errorMessage: 'cannot process more than 0 file(s)',
+          file: mockFile,
+          id: '1',
+          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+          status: 'error',
+        },
+      ]);
+    });
   });
 
-  it('renders retry button if errorMessage provided', () => {
-    const { container } = render(<FileUploader errorMessage="error!" />);
-    getByText(container, 'Retry Upload');
+  it('calls setFilesRows with error when file size is too small', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockSetFileRows = jest.fn();
+    render(<FileUploader fileRows={[]} minSize={50 * 1000} setFileRows={mockSetFileRows} />);
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
+        {
+          errorMessage: 'file size must be greater than 50 KB',
+          file: mockFile,
+          id: '1',
+          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+          status: 'error',
+        },
+      ]);
+    });
+  });
+
+  it('calls setFilesRows with error when file size is too big', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockSetFileRows = jest.fn();
+    render(<FileUploader fileRows={[]} maxSize={0} setFileRows={mockSetFileRows} />);
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
+        {
+          errorMessage: 'file size must be less than 0 bytes',
+          file: mockFile,
+          id: '1',
+          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+          status: 'error',
+        },
+      ]);
+    });
   });
 
-  it('renders retry button if progressAmount and errorMessage provided', () => {
-    const { container } = render(<FileUploader progressAmount={40} errorMessage="error!" />);
-    getByText(container, 'Retry Upload');
+  it('calls setFilesRows with error when file type is not accepted', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockSetFileRows = jest.fn();
+    render(<FileUploader accept={'image/jpg'} fileRows={[]} setFileRows={mockSetFileRows} />);
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
+        {
+          errorMessage: 'file type of image/png is not accepted',
+          file: mockFile,
+          id: '1',
+          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+          status: 'error',
+        },
+      ]);
+    });
   });
 
-  it('renders error message if progressAmount and errorMessage provided', () => {
-    const message = 'error!';
-    const { container } = render(<FileUploader progressAmount={40} errorMessage={message} />);
-    getByText(container, message);
+  it('calls setFilesRows with error when file type is unknown and not accepted', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.vdx', {
+      type: '',
+    });
+    const mockSetFileRows = jest.fn();
+    render(<FileUploader accept={'image/jpg'} fileRows={[]} setFileRows={mockSetFileRows} />);
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockSetFileRows).toHaveBeenCalledTimes(2);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(2, [
+        {
+          errorMessage: 'file type is not accepted',
+          file: mockFile,
+          id: '1',
+          imagePreviewThumbnail: '',
+          status: 'error',
+        },
+      ]);
+    });
   });
 
-  it('renders retry button if progressMessage and errorMessage provided', () => {
-    const { container } = render(
-      <FileUploader progressMessage="uploading..." errorMessage="error!" />
+  it('calls setFilesRows with error when processFileOnDrop returns with an error', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockProcessFileOnDrop = jest.fn((file) =>
+      Promise.resolve({ errorMessage: 'test error' })
     );
-    getByText(container, 'Retry Upload');
+    const mockSetFileRows = jest.fn();
+    render(
+      <FileUploader
+        fileRows={[]}
+        processFileOnDrop={mockProcessFileOnDrop}
+        setFileRows={mockSetFileRows}
+      />
+    );
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
+      expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
+      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
+        {
+          errorMessage: 'test error',
+          file: mockFile,
+          id: '1',
+          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+          status: 'error',
+        },
+      ]);
+    });
   });
 
-  it('renders error message if progressMessage and errorMessage provided', () => {
-    const message = 'error!';
-    const { container } = render(
-      <FileUploader progressMessage="uploading..." errorMessage={message} />
+  it('calls setFilesRows with success when processFileOnDrop returns with success', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockProcessFileOnDrop = jest.fn((file) =>
+      Promise.resolve({ errorMessage: null, fileInfo: 'test-file-info' })
+    );
+    const mockSetFileRows = jest.fn();
+    render(
+      <FileUploader
+        fileRows={[]}
+        processFileOnDrop={mockProcessFileOnDrop}
+        setFileRows={mockSetFileRows}
+      />
+    );
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
+      expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
+      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
+        {
+          errorMessage: null,
+          file: mockFile,
+          fileInfo: 'test-file-info',
+          id: '1',
+          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+          status: 'processed',
+        },
+      ]);
+    });
+  });
+
+  it('calls setFilesRows with error when processFileOnDrop returns with undefined error', async () => {
+    const original = console.error;
+    console.error = jest.fn();
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockError = new Error();
+    const mockProcessFileOnDrop = jest.fn((file) => Promise.reject(mockError));
+    const mockSetFileRows = jest.fn();
+    render(
+      <FileUploader
+        fileRows={[]}
+        processFileOnDrop={mockProcessFileOnDrop}
+        setFileRows={mockSetFileRows}
+      />
+    );
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
+      expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledWith('error with processFileOnDrop', mockError);
+      expect(mockSetFileRows).toHaveBeenCalledTimes(3);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
+        {
+          errorMessage: 'unknown processing error',
+          file: mockFile,
+          id: '1',
+          imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+          status: 'error',
+        },
+      ]);
+    });
+    console.error = original;
+  });
+
+  it('prevents drop when disabled is true', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockSetFileRows = jest.fn();
+    render(<FileUploader disabled fileRows={[]} setFileRows={mockSetFileRows} />);
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockSetFileRows).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  it('prevents drop when files are loading and disabled is false', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockSetFileRows = jest.fn();
+    render(
+      <FileUploader
+        disabled={false}
+        fileRows={[
+          {
+            errorMessage: null,
+            file: mockFile,
+            id: '1',
+            imagePreviewThumbnail: '',
+            status: 'added',
+          },
+        ]}
+        setFileRows={mockSetFileRows}
+      />
     );
-    getByText(container, message);
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFile] },
+      });
+    });
+    await waitFor(() => {
+      expect(mockSetFileRows).toHaveBeenCalledTimes(0);
+    });
   });
 
-  it('calls onRetry if errorMessage provided and retry button is clicked', async () => {
-    const message = 'error!';
-    const onRetry = jest.fn();
-    const { container } = render(<FileUploader errorMessage={message} onRetry={onRetry} />);
-    await act(() => {
-      fireEvent.click(getByText(container, 'Retry Upload'));
+  it('hides delete button when any file is loading', async () => {
+    const mockFileAdded = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockFileProcessed = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockSetFileRows = jest.fn();
+    const { container } = render(
+      <FileUploader
+        disabled={false}
+        fileRows={[
+          {
+            errorMessage: null,
+            file: mockFileAdded,
+            id: '1',
+            imagePreviewThumbnail: '',
+            status: 'added',
+          },
+          {
+            errorMessage: null,
+            file: mockFileProcessed,
+            id: '2',
+            imagePreviewThumbnail: '',
+            status: 'processed',
+          },
+        ]}
+        setFileRows={mockSetFileRows}
+        overrides={{ DeleteButtonComponent: { props: { 'data-testid': 'delete-button' } } }}
+      />
+    );
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), {
+        target: { files: [mockFileAdded] },
+      });
     });
     await waitFor(() => {
-      expect(onRetry).toHaveBeenCalledTimes(1);
+      expect(queryByTestId(container, 'delete-button')).toBeNull();
     });
   });
 
-  it('calls onCancel if progressMessage provided and cancel button clicked', async () => {
-    const message = 'progress!';
-    const onCancel = jest.fn();
-    const { container } = render(<FileUploader progressMessage={message} onCancel={onCancel} />);
-    await act(() => {
-      fireEvent.click(getByText(container, 'Cancel'));
+  it('calls setFileRows when FileReader onerror is triggered', async () => {
+    // @ts-ignore
+    jest.spyOn(global, 'FileReader').mockImplementationOnce(function () {
+      this.readAsDataURL = jest.fn(() => {
+        if (this.onerror) {
+          const errorEvent = new Event('error');
+          this.onerror(errorEvent);
+        }
+      });
+    });
+
+    const mockFile = new File(['(⌐□_□)'], 'test.json', {
+      type: 'application/json',
+    });
+    const files = [mockFile];
+
+    const mockFileRows = [];
+    const mockSetFileRows = jest.fn();
+    render(<FileUploader fileRows={mockFileRows} setFileRows={mockSetFileRows} />);
+
+    await act(async () => {
+      await fireEvent.drop(screen.getByText(locale.contentMessage), { target: { files } });
     });
     await waitFor(() => {
-      expect(onCancel).toHaveBeenCalledTimes(1);
+      expect(mockSetFileRows).toHaveBeenCalledTimes(2);
+      expect(mockSetFileRows).toHaveBeenNthCalledWith(2, [
+        {
+          errorMessage: 'cannot read file',
+          file: mockFile,
+          id: '1',
+          imagePreviewThumbnail: '',
+          status: 'error',
+        },
+      ]);
     });
   });
 
-  it('renders accept attribute as a string when inputted as an array', () => {
-    const { container } = render(<FileUploader accept={['test-1', 'test-2']} />);
-    expect(container.querySelector('input')?.getAttribute('accept')).toBe('test-1,test-2');
+  it('calls setFileRows when the remove file icon is clicked', async () => {
+    const mockFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const mockSetFileRows = jest.fn();
+    const { container } = render(
+      <FileUploader
+        fileRows={[
+          {
+            errorMessage: null,
+            file: mockFile,
+            id: '1',
+            imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+            status: 'processed',
+          },
+        ]}
+        setFileRows={mockSetFileRows}
+        overrides={{ DeleteButtonComponent: { props: { 'data-testid': 'delete-button' } } }}
+      />
+    );
+
+    await act(async () => {
+      await fireEvent.click(getByTestId(container, 'delete-button'));
+    });
+    await waitFor(() => {
+      expect(mockSetFileRows).toHaveBeenCalledTimes(1);
+      expect(mockSetFileRows).toHaveBeenCalledWith([]);
+    });
   });
 
-  it('renders accept attribute as a string when inputted as a string', () => {
-    const { container } = render(<FileUploader accept={'test-1,test-2'} />);
-    expect(container.querySelector('input')?.getAttribute('accept')).toBe('test-1,test-2');
+  it('shows item preview when itemPreview is true', () => {
+    const mockDocumentFile = new File(['(⌐□_□)'], 'test.pdf', {
+      type: 'application/pdf',
+    });
+    const mockImageFile = new File(['(⌐□_□)'], 'test.png', {
+      type: 'image/png',
+    });
+    const { container } = render(
+      <FileUploader
+        fileRows={[
+          {
+            errorMessage: null,
+            file: mockDocumentFile,
+            id: '1',
+            imagePreviewThumbnail: '',
+            status: 'processed',
+          },
+          {
+            errorMessage: null,
+            file: mockImageFile,
+            id: '2',
+            imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
+            status: 'processed',
+          },
+        ]}
+        itemPreview
+        setFileRows={() => {}}
+        overrides={{
+          ImagePreviewThumbnail: { props: { 'data-testid': 'image-thumbnail' } },
+          ItemPreviewContainer: { props: { 'data-testid': 'item-preview' } },
+          PaperclipFilledIcon: { props: { 'data-testid': 'paperclip' } },
+        }}
+      />
+    );
+    getByTestId(container, 'image-thumbnail');
+    getAllByTestId(container, 'item-preview');
+    getByTestId(container, 'paperclip');
   });
 });
diff --git a/src/file-uploader-beta/constants.ts b/src/file-uploader/constants.ts
similarity index 78%
rename from src/file-uploader-beta/constants.ts
rename to src/file-uploader/constants.ts
index 0e7e400d04..f0501f522f 100644
--- a/src/file-uploader-beta/constants.ts
+++ b/src/file-uploader/constants.ts
@@ -19,3 +19,10 @@ export const FILE_STATUS_TO_COLOR_MAP = (
   [FILE_STATUS.error]: $theme.colors.negative,
   [FILE_STATUS.processed]: $theme.colors.positive,
 });
+
+export enum ARIA_LIVE_ELEMENT_ID {
+  ADDITION = 'file-uploader-addition',
+  REMOVAL = 'file-uploader-removal',
+}
+
+export const ARIA_LIVE_TIMEOUT_MS = 5000;
diff --git a/src/file-uploader/file-uploader.tsx b/src/file-uploader/file-uploader.tsx
index bd5f9af207..a6b96e58e6 100644
--- a/src/file-uploader/file-uploader.tsx
+++ b/src/file-uploader/file-uploader.tsx
@@ -5,240 +5,610 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import Dropzone from 'react-dropzone';
-
-import { LocaleContext } from '../locale';
-import { useStyletron } from '../styles';
-import { Button, KIND, SHAPE, SIZE as BUTTON_SIZE } from '../button';
+import { FileUploaderBasic } from '../file-uploader-basic';
+import { Button, KIND, SHAPE, SIZE } from '../button';
+import { ProgressBar, SIZE as PROGRESS_BAR_SIZE } from '../progress-bar';
 import { getOverrides } from '../helpers/overrides';
-import { ProgressBar } from '../progress-bar';
-import { Spinner, SIZE as SPINNER_SIZE } from '../spinner';
-
 import {
-  StyledRoot,
-  StyledFileDragAndDrop,
-  StyledContentMessage,
-  StyledContentSeparator,
-  StyledErrorMessage,
-  StyledHiddenInput,
+  StyledFileRow,
+  StyledFileRowColumn,
+  StyledFileRowContent,
+  StyledFileRowFileName,
+  StyledFileRowText,
+  StyledFileRowUploadMessage,
+  StyledFileRowUploadText,
+  StyledFileRows,
+  StyledHint,
+  StyledImagePreviewThumbnail,
+  StyledItemPreviewContainer,
+  StyledLabel,
+  StyledParentRoot,
 } from './styled-components';
-import type { FileUploaderProps } from './types';
+import { ARIA_LIVE_ELEMENT_ID, FILE_STATUS, FILE_STATUS_TO_COLOR_MAP } from './constants';
+import { destructureStyleOverride, formatBytes, handleAriaLiveUpdates } from './utils';
+import CircleCheckFilledIconComponent from '../icon/circle-check-filled';
+import CircleExclamationPointFilled from '../icon/circle-exclamation-point-filled';
+import PaperclipFilledIconComponent from '../icon/paperclip-filled';
+import TrashCanFilledIconComponent from '../icon/trash-can-filled';
+import Upload from '../icon/upload';
+import { useStyletron } from '../styles';
+import { LocaleContext } from '../locale';
+import { uid } from 'react-uid';
 
-import type { SyntheticEvent } from 'react';
+import type { FileRow, FileUploaderProps } from './types';
 
-// @ts-ignore
-function prependStyleProps(styleProps) {
-  return Object.keys(styleProps).reduce((nextStyleProps, currentKey) => {
-    // @ts-ignore
-    nextStyleProps[`$${currentKey}`] = styleProps[currentKey];
-    return nextStyleProps;
-  }, {});
-}
+export default function FileUploader(props: FileUploaderProps) {
+  if (props['onDrop']) {
+    console.error('onDrop is not a prop for FileUploader.');
+  }
+  if (props['onDropAccepted']) {
+    console.error('onDropAccepted is not a prop for FileUploader.');
+  }
+  if (props['onDropRejected']) {
+    console.error('onDropRejected is not a prop for FileUploader.');
+  }
+
+  // Isolate props that are not meant to be passed to FileUploaderBasic
+  const {
+    fileRows,
+    hint,
+    itemPreview,
+    label,
+    maxFiles,
+    overrides = {},
+    processFileOnDrop,
+    setFileRows,
+    ...fileUploaderBasicProps
+  } = props;
+  // Isolate styles that are not meant to be passed to FileUploaderBasic
+  const {
+    // Overrides for FileUploader
+    CircleCheckFilledIcon: OverridesCircleCheckFilledIcon,
+    CircleExclamationPointFilledIcon: OverridesCircleExclamationPointFilledIcon,
+    DeleteButtonComponent: OverridesDeleteButtonComponent,
+    FileRow: OverridesFileRow,
+    FileRowColumn: OverridesFileRowColumn,
+    FileRowContent: OverridesFileRowContent,
+    FileRowFileName: OverridesFileRowFileName,
+    FileRowText: OverridesFileRowText,
+    FileRowUploadMessage: OverridesFileRowUploadMessage,
+    FileRowUploadText: OverridesFileRowUploadText,
+    FileRows: OverridesFileRows,
+    Hint: OverridesHint,
+    ImagePreviewThumbnail: OverridesImagePreviewThumbnail,
+    ItemPreviewContainer: OverridesItemPreviewContainer,
+    Label: OverridesLabel,
+    PaperclipFilledIcon: OverridesPaperclipFilledIcon,
+    ParentRoot: OverridesParentRoot,
+    TrashCanFilledIcon: OverridesTrashCanFilledIcon,
+
+    // Overrides for FileUploaderBasic that are modified in this file
+    ButtonComponent,
+    ContentMessage,
+    FileDragAndDrop,
+    ...fileUploaderBasicOverrides
+  } = overrides;
 
-function FileUploader(props: FileUploaderProps) {
-  const { overrides = {} } = props;
-  const [, theme] = useStyletron();
+  const [css, theme] = useStyletron();
 
-  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
-  const [FileDragAndDrop, fileDragAndDropProps] = getOverrides(
-    overrides.FileDragAndDrop,
-    StyledFileDragAndDrop
+  // Prepare icon overrides
+  const [CircleCheckFilledIcon, circleCheckFilledIconProps] = getOverrides(
+    overrides.CircleCheckFilledIcon,
+    CircleCheckFilledIconComponent
   );
-  const [ContentMessage, contentMessageProps] = getOverrides(
-    overrides.ContentMessage,
-    StyledContentMessage
+  const [CircleExclamationPointFilledIcon, circleExclamationPointFilledIconProps] = getOverrides(
+    OverridesCircleExclamationPointFilledIcon,
+    CircleExclamationPointFilled
   );
-
-  const [ContentSeparator, contentSeparatorProps] = getOverrides(
-    overrides.ContentSeparator,
-    StyledContentSeparator
+  const [PaperclipFilledIcon, paperclipFilledIconProps] = getOverrides(
+    OverridesPaperclipFilledIcon,
+    PaperclipFilledIconComponent
   );
-  const [ErrorMessage, errorMessageProps] = getOverrides(
-    overrides.ErrorMessage,
-    StyledErrorMessage
+  const [TrashCanFilledIcon, trashCanFilledIconProps] = getOverrides(
+    OverridesTrashCanFilledIcon,
+    TrashCanFilledIconComponent
   );
-  const [HiddenInput, hiddenInputProps] = getOverrides(overrides.HiddenInput, StyledHiddenInput);
-  const [ButtonComponent, buttonProps] = getOverrides(overrides.ButtonComponent, Button);
 
-  const [RetryButtonComponent, retryButtonProps] = getOverrides(
-    overrides.RetryButtonComponent,
+  // Prepare baseui component overrides
+  const [DeleteButtonComponent, deleteButtonProps] = getOverrides(
+    OverridesDeleteButtonComponent,
     Button
   );
-  const [CancelButtonComponent, cancelButtonProps] = getOverrides(
-    overrides.CancelButtonComponent,
-    Button
+  const [ProgressBarComponent, progressBarProps] = getOverrides(overrides.ProgressBar, ProgressBar);
+
+  // Prepare styled component overrides
+  const [FileRow, fileRowProps] = getOverrides(OverridesFileRow, StyledFileRow);
+  const [FileRowColumn, fileRowColumnProps] = getOverrides(
+    OverridesFileRowColumn,
+    StyledFileRowColumn
+  );
+  const [FileRowContent, fileRowContentProps] = getOverrides(
+    OverridesFileRowContent,
+    StyledFileRowContent
+  );
+  const [FileRowFileName, fileRowFileNameProps] = getOverrides(
+    OverridesFileRowFileName,
+    StyledFileRowFileName
   );
+  const [FileRowText, fileRowTextProps] = getOverrides(OverridesFileRowText, StyledFileRowText);
+  const [FileRowUploadMessage, fileRowUploadMessageProps] = getOverrides(
+    OverridesFileRowUploadMessage,
+    StyledFileRowUploadMessage
+  );
+  const [FileRowUploadText, fileRowUploadTextProps] = getOverrides(
+    OverridesFileRowUploadText,
+    StyledFileRowUploadText
+  );
+  const [FileRows, fileRowsProps] = getOverrides(OverridesFileRows, StyledFileRows);
+  const [Hint, hintProps] = getOverrides(OverridesHint, StyledHint);
+  const [ImagePreviewThumbnail, imagePreviewThumbnailProps] = getOverrides(
+    OverridesImagePreviewThumbnail,
+    StyledImagePreviewThumbnail
+  );
+  const [ItemPreviewContainer, itemPreviewContainerProps] = getOverrides(
+    OverridesItemPreviewContainer,
+    StyledItemPreviewContainer
+  );
+  const [Label, labelProps] = getOverrides(OverridesLabel, StyledLabel);
+  const [ParentRoot, parentRootProps] = getOverrides(OverridesParentRoot, StyledParentRoot);
 
-  const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, Spinner);
-  const [ProgressBarComponent, progressBarProps] = getOverrides(overrides.ProgressBar, ProgressBar);
+  const onDrop = React.useCallback(
+    (acceptedFiles: Array<File>, rejectedFiles: Array<File>) => {
+      const newFiles = acceptedFiles.concat(rejectedFiles);
+      let newFileRows = [...props.fileRows];
+      newFiles.forEach((file: File) => {
+        newFileRows.push({
+          errorMessage: null,
+          file,
+          id: uid(file),
+          imagePreviewThumbnail: '',
+          status: FILE_STATUS.added,
+        });
+        props.setFileRows([...newFileRows]);
+      });
 
-  const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
+      newFileRows.forEach((fileRow: FileRow, index: number) => {
+        if (fileRow.status === FILE_STATUS.added) {
+          let reader = new FileReader();
 
-  let accept;
-  if (Array.isArray(props.accept)) {
-    accept = props.accept.join(',');
-  } else if (typeof props.accept === 'string') {
-    accept = props.accept;
-  }
+          reader.onerror = () => {
+            newFileRows[index].errorMessage = 'cannot read file';
+            newFileRows[index].status = FILE_STATUS.error;
+            handleAriaLiveUpdates(
+              ARIA_LIVE_ELEMENT_ID.ADDITION,
+              `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`
+            );
+            props.setFileRows([...newFileRows]);
+          };
 
-  return (
-    <Dropzone {...props} accept={accept} disabled={props.disabled || afterFileDrop}>
-      {(renderProps) => {
-        const { getRootProps, getInputProps, open, ...styleProps } = renderProps;
-
-        const prefixedStyledProps = prependStyleProps({
-          ...styleProps,
-          isDisabled: props.disabled,
-          afterFileDrop,
-        });
+          reader.onload = (event) => {
+            if (newFileRows[index].file.type.startsWith('image/')) {
+              newFileRows[index].imagePreviewThumbnail = event.target?.result;
+              props.setFileRows([...newFileRows]);
+            }
+            if (
+              props.maxFiles !== undefined &&
+              Number.isInteger(props.maxFiles) &&
+              index >= props.maxFiles
+            ) {
+              // If too many files
+              newFileRows[
+                index
+              ].errorMessage = `cannot process more than ${props.maxFiles} file(s)`;
+              newFileRows[index].status = FILE_STATUS.error;
+              handleAriaLiveUpdates(
+                ARIA_LIVE_ELEMENT_ID.ADDITION,
+                `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`
+              );
+              props.setFileRows([...newFileRows]);
+            } else if (
+              props.minSize !== undefined &&
+              Number.isInteger(props.minSize) &&
+              props.minSize > fileRow.file.size
+            ) {
+              // If file size is too small
+              newFileRows[index].errorMessage = `file size must be greater than ${formatBytes(
+                props.minSize
+              )}`;
+              newFileRows[index].status = FILE_STATUS.error;
+              handleAriaLiveUpdates(
+                ARIA_LIVE_ELEMENT_ID.ADDITION,
+                `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`
+              );
+              props.setFileRows([...newFileRows]);
+            } else if (
+              props.maxSize !== undefined &&
+              Number.isInteger(props.maxSize) &&
+              props.maxSize < fileRow.file.size
+            ) {
+              // If file size is too big
+              newFileRows[index].errorMessage = `file size must be less than ${formatBytes(
+                props.maxSize
+              )}`;
+              newFileRows[index].status = FILE_STATUS.error;
+              handleAriaLiveUpdates(
+                ARIA_LIVE_ELEMENT_ID.ADDITION,
+                `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`
+              );
+              props.setFileRows([...newFileRows]);
+            } else if (index >= newFileRows.length - rejectedFiles.length) {
+              // If file was rejected by dropzone (e.g. wrong file type)
+              newFileRows[index].errorMessage = fileRow.file.type
+                ? `file type of ${fileRow.file.type} is not accepted`
+                : 'file type is not accepted';
+              newFileRows[index].status = FILE_STATUS.error;
+              handleAriaLiveUpdates(
+                ARIA_LIVE_ELEMENT_ID.ADDITION,
+                `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`
+              );
+              props.setFileRows([...newFileRows]);
+            } else if (props.processFileOnDrop) {
+              // If caller passed in file process function
+              props
+                .processFileOnDrop(fileRow.file)
+                .then(
+                  ({ errorMessage, fileInfo }: { errorMessage: string | null; fileInfo?: any }) => {
+                    if (fileInfo) {
+                      newFileRows[index].fileInfo = fileInfo;
+                    }
+                    if (errorMessage) {
+                      newFileRows[index].errorMessage = errorMessage;
+                      newFileRows[index].status = FILE_STATUS.error;
+                    } else {
+                      newFileRows[index].status = FILE_STATUS.processed;
+                    }
+                  }
+                )
+                .catch((error) => {
+                  console.error('error with processFileOnDrop', error);
+                  newFileRows[index].errorMessage = 'unknown processing error';
+                  newFileRows[index].status = FILE_STATUS.error;
+                  handleAriaLiveUpdates(
+                    ARIA_LIVE_ELEMENT_ID.ADDITION,
+                    `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`
+                  );
+                })
+                .finally(() => {
+                  props.setFileRows([...newFileRows]);
+                });
+            } else {
+              // If no errors and no file process function
+              newFileRows[index].status = FILE_STATUS.processed;
+              handleAriaLiveUpdates(
+                ARIA_LIVE_ELEMENT_ID.ADDITION,
+                `${newFileRows[index].file.name} added, upload successful`
+              );
+              props.setFileRows([...newFileRows]);
+            }
+          };
 
-        const getRootPropsArgs: {
-          onClick?: (a: SyntheticEvent<HTMLElement>) => void;
-          tabIndex: number;
-        } = {
-          ...(props.disableClick ? { onClick: (evt) => evt.preventDefault() } : {}),
-          tabIndex: -1,
-        };
-
-        return (
-          <LocaleContext.Consumer>
-            {(locale) => (
-              <Root data-baseweb="file-uploader" {...prefixedStyledProps} {...rootProps}>
-                <FileDragAndDrop
-                  {...getRootProps(getRootPropsArgs)}
-                  {...prefixedStyledProps}
-                  {...fileDragAndDropProps}
-                >
-                  {!afterFileDrop && (
-                    <React.Fragment>
-                      <ContentMessage {...prefixedStyledProps} {...contentMessageProps}>
-                        {locale.fileuploader.dropFilesToUpload}
-                      </ContentMessage>
-                      {/* TODO(v11): ContentSeparator potentially can be removed in the next major version */}
-
-                      <ContentSeparator {...prefixedStyledProps} {...contentSeparatorProps}>
-                        {locale.fileuploader.or}
-                      </ContentSeparator>
-
-                      <ButtonComponent
-                        disabled={props.disabled}
-                        kind={KIND.secondary}
-                        shape={SHAPE.pill}
-                        size={BUTTON_SIZE.compact}
-                        onClick={open}
-                        role="button"
-                        overrides={{
-                          BaseButton: {
-                            // @ts-ignore
-                            style: ({ $theme }) => ({
-                              marginTop: $theme.sizing.scale500,
-                            }),
-                          },
-                        }}
-                        {...prefixedStyledProps}
-                        {...buttonProps}
-                      >
-                        {locale.fileuploader.browseFiles}
-                      </ButtonComponent>
-                    </React.Fragment>
-                  )}
+          reader.readAsDataURL(fileRow.file);
+        }
+      });
+    },
+    [props]
+  );
 
-                  {afterFileDrop && (
-                    <React.Fragment>
-                      {/**
-                       * Below checks typeof value to ensure if progressAmount = 0 we will
-                       * render the progress bar rather than the spinner. Providing a number
-                       * value implies that we expect to have some progress percent in the
-                       * future. We do not want to flash the spinner in this case.
-                       */}
-                      {typeof props.progressAmount === 'number' ? (
-                        <ProgressBarComponent
-                          value={props.progressAmount}
-                          overrides={{
-                            BarProgress: {
-                              // @ts-ignore
-                              style: ({ $theme }) => ({
-                                backgroundColor: props.errorMessage
-                                  ? $theme.colors.negative
-                                  : $theme.colors.accent,
-                              }),
-                            },
-                          }}
-                          {...progressBarProps}
-                        />
-                      ) : props.errorMessage ? null : (
-                        <SpinnerComponent
-                          $size={SPINNER_SIZE.medium}
-                          $style={{ marginBottom: theme.sizing.scale300 }}
-                          {...spinnerProps}
+  const removeFileRow = (event: React.MouseEvent) => {
+    event.preventDefault();
+    const indexOfFileRowToRemove = Number(event?.currentTarget?.getAttribute('index'));
+    handleAriaLiveUpdates(
+      ARIA_LIVE_ELEMENT_ID.REMOVAL,
+      `${props.fileRows[indexOfFileRowToRemove].file.name} removed`
+    );
+    props.setFileRows([...props.fileRows.toSpliced(indexOfFileRowToRemove, 1)]);
+    const label = document.querySelector('[data-baseweb="file-uploader-label"]') as HTMLElement;
+    if (label) {
+      label.focus();
+    }
+  };
+
+  const noFilesAreLoading = React.useMemo(
+    () => !props.fileRows.find((fileRow: FileRow) => fileRow.status === FILE_STATUS.added),
+    [props.fileRows]
+  );
+
+  return (
+    <LocaleContext.Consumer>
+      {(locale) => (
+        <ParentRoot data-baseweb="file-uploader-parent-root" {...parentRootProps}>
+          <span
+            aria-live="assertive"
+            aria-relevant="additions"
+            className={css({
+              top: 0,
+              left: '-4px',
+              width: '1px',
+              height: '1px',
+              position: 'absolute',
+              overflow: 'hidden',
+            })}
+            id={ARIA_LIVE_ELEMENT_ID.ADDITION}
+          ></span>
+          <span
+            aria-live="polite"
+            aria-relevant="additions"
+            className={css({
+              top: 0,
+              left: '-2px',
+              width: '1px',
+              height: '1px',
+              position: 'absolute',
+              overflow: 'hidden',
+            })}
+            id={ARIA_LIVE_ELEMENT_ID.REMOVAL}
+          ></span>
+          {props.label && (
+            <Label
+              data-baseweb="file-uploader-label"
+              tabIndex={-1}
+              {...labelProps}
+              $disabled={!!props.disabled}
+            >
+              {props.label}
+            </Label>
+          )}
+          <FileUploaderBasic
+            buttonIcon={() => <Upload />}
+            buttonText={locale.fileuploader.buttonText}
+            contentMessage={locale.fileuploader.contentMessage}
+            overrides={{
+              ButtonComponent: {
+                props: {
+                  'aria-label': `${locale.fileuploader.buttonText} ${props.hint || ''}`,
+                  shape: SHAPE.default,
+                  size: SIZE.default,
+                  ...props.overrides?.ButtonComponent?.props,
+                  style: {
+                    marginTop: 0,
+                    ...destructureStyleOverride(
+                      // @ts-expect-error
+                      props.overrides?.ButtonComponent?.props?.style,
+                      theme
+                    ),
+                  },
+                  overrides: {
+                    // @ts-expect-error
+                    ...props.overrides?.ButtonComponent?.props?.overrides,
+                    BaseButton: {
+                      // @ts-expect-error
+                      ...props.overrides?.ButtonComponent?.props?.overrides?.BaseButton,
+                      style: {
+                        backgroundColor: theme.colors.backgroundPrimary,
+                        height: theme.sizing.scale950,
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: '8px',
+                        ...theme.typography.LabelSmall,
+                        ...destructureStyleOverride(
+                          // @ts-expect-error
+                          props.overrides?.ButtonComponent?.props?.overrides?.BaseButton?.style,
+                          theme
+                        ),
+                      },
+                    },
+                  },
+                },
+              },
+              ContentMessage: {
+                style: {
+                  ...theme.typography.ParagraphSmall,
+                  color: theme.colors.contentTertiary,
+                  ...destructureStyleOverride(props.overrides?.ContentMessage?.style, theme),
+                },
+              },
+              FileDragAndDrop: {
+                style: (fileDragAndDropProps) => ({
+                  backgroundColor: fileDragAndDropProps.$theme.colors.fileUploaderBackgroundColor,
+                  borderColor: fileDragAndDropProps.$isDragActive
+                    ? fileDragAndDropProps.$theme.colors.borderSelected
+                    : fileDragAndDropProps.$theme.colors.fileUploaderBorderColorDefault,
+                  borderStyle: 'solid',
+                  borderWidth: '3px',
+                  flexDirection: 'row',
+                  flexWrap: 'wrap',
+                  gap: theme.sizing.scale300,
+                  paddingBottom: theme.sizing.scale600,
+                  paddingLeft: theme.sizing.scale600,
+                  paddingRight: theme.sizing.scale600,
+                  paddingTop: theme.sizing.scale600,
+                  ...destructureStyleOverride(props.overrides?.FileDragAndDrop?.style, theme),
+                }),
+              },
+              Root: {
+                style: {
+                  marginBottom: theme.sizing.scale300,
+                  ...destructureStyleOverride(props.overrides?.Root?.style, theme),
+                },
+              },
+              ...fileUploaderBasicOverrides,
+            }}
+            swapButtonAndMessage
+            {...fileUploaderBasicProps}
+            // Disable uploads while files are loading, even if application passes disabled as false
+            disabled={
+              !!props.disabled
+                ? props.disabled
+                : !!props.fileRows.find((fileRow: FileRow) => fileRow.status === FILE_STATUS.added)
+            }
+            // Implement or use no-op callbacks to prevent consumers from passing them in
+            onDrop={onDrop}
+            onDropAccepted={(_: Array<File>) => {}}
+            onDropRejected={(_: Array<File>) => {}}
+          />
+          {props.fileRows.length > 0 && (
+            <FileRows data-baseweb="file-uploader-file-rows" {...fileRowsProps}>
+              {props.fileRows.map((fileRow, index) => (
+                <FileRow
+                  id={`file-uploader-file-row-${index}`}
+                  data-baseweb="file-uploader-file-row"
+                  key={fileRow.id}
+                  {...fileRowProps}
+                >
+                  {props.itemPreview && (
+                    <ItemPreviewContainer
+                      aria-hidden={'true'}
+                      data-baseweb="file-uploader-item-preview-container"
+                      {...itemPreviewContainerProps}
+                    >
+                      {fileRow.imagePreviewThumbnail ? (
+                        <ImagePreviewThumbnail
+                          alt={fileRow.file.name}
+                          data-baseweb="file-uploader-image-preview-thumbnail"
+                          src={fileRow.imagePreviewThumbnail}
+                          {...imagePreviewThumbnailProps}
                         />
-                      )}
-                      {(props.errorMessage || props.progressMessage) && props.errorMessage ? (
-                        <ErrorMessage {...prefixedStyledProps} {...errorMessageProps}>
-                          {props.errorMessage}
-                        </ErrorMessage>
                       ) : (
-                        <ContentMessage {...prefixedStyledProps} {...contentMessageProps}>
-                          {props.progressMessage}
-                        </ContentMessage>
+                        <PaperclipFilledIcon
+                          data-baseweb="file-uploader-paperclip-filled-icon"
+                          color={theme.colors.contentSecondary}
+                          {...paperclipFilledIconProps}
+                        />
                       )}
-                      {props.errorMessage ? (
-                        <RetryButtonComponent
-                          kind={KIND.tertiary}
-                          onClick={() => {
-                            props.onRetry && props.onRetry();
-                          }}
-                          aria-invalid={Boolean(props.errorMessage)}
-                          aria-describedby={props['aria-describedby']}
-                          aria-errormessage={props.errorMessage}
-                          {...retryButtonProps}
+                    </ItemPreviewContainer>
+                  )}
+                  <FileRowColumn
+                    data-baseweb="file-uploader-file-row-column"
+                    {...fileRowColumnProps}
+                  >
+                    <FileRowContent
+                      data-baseweb="file-uploader-file-row-content"
+                      {...fileRowContentProps}
+                    >
+                      <FileRowText data-baseweb="file-uploader-file-row-text" {...fileRowTextProps}>
+                        <FileRowFileName
+                          data-baseweb="file-uploader-file-row-file-name"
+                          {...fileRowFileNameProps}
                         >
-                          {locale.fileuploader.retry}
-                        </RetryButtonComponent>
-                      ) : (
-                        <CancelButtonComponent
+                          {fileRow.file.name}
+                        </FileRowFileName>
+                        <FileRowUploadMessage
+                          data-baseweb="file-uploader-file-row-upload-message"
+                          $color={FILE_STATUS_TO_COLOR_MAP(theme)[fileRow.status]}
+                          {...fileRowUploadMessageProps}
+                        >
+                          {fileRow.status === FILE_STATUS.error && (
+                            <>
+                              <CircleExclamationPointFilledIcon
+                                aria-hidden={'true'}
+                                color={FILE_STATUS_TO_COLOR_MAP(theme)[fileRow.status]}
+                                data-baseweb="file-uploader-circle-exclamation-point-filled-icon"
+                                title={fileRow.status}
+                                {...circleExclamationPointFilledIconProps}
+                              />
+                              <FileRowUploadText
+                                aria-errormessage={fileRow.errorMessage}
+                                data-baseweb="file-uploader-file-row-upload-message-text"
+                                {...fileRowUploadTextProps}
+                              >
+                                {locale.fileuploader.error}
+                                {fileRow.errorMessage}
+                              </FileRowUploadText>
+                            </>
+                          )}
+                          {fileRow.status === FILE_STATUS.processed && (
+                            <>
+                              <CircleCheckFilledIcon
+                                aria-hidden={'true'}
+                                color={FILE_STATUS_TO_COLOR_MAP(theme)[fileRow.status]}
+                                data-baseweb="file-uploader-circle-check-filled-icon"
+                                title={fileRow.status}
+                                {...circleCheckFilledIconProps}
+                              />
+                              <FileRowUploadText
+                                data-baseweb="file-uploader-file-row-upload-message-text"
+                                {...fileRowUploadTextProps}
+                              >
+                                {locale.fileuploader.processed}
+                              </FileRowUploadText>
+                            </>
+                          )}
+                          {fileRow.status === FILE_STATUS.added && (
+                            <FileRowUploadText
+                              $color={theme.colors.contentTertiary}
+                              data-baseweb="file-uploader-file-row-upload-message-text"
+                              {...fileRowUploadTextProps}
+                            >
+                              {locale.fileuploader.added}
+                            </FileRowUploadText>
+                          )}
+                        </FileRowUploadMessage>
+                      </FileRowText>
+                      {noFilesAreLoading && (
+                        <DeleteButtonComponent
+                          aria-label={`Remove ${fileRow.file.name}`}
+                          data-baseweb="file-uploader-delete-button-component"
+                          index={index}
+                          onClick={removeFileRow}
                           kind={KIND.tertiary}
-                          onClick={() => {
-                            props.onCancel && props.onCancel();
-                          }}
-                          aria-describedby={props['aria-describedby']}
-                          overrides={{
-                            BaseButton: {
-                              // @ts-ignore
-                              style: ({ $theme }) => ({
-                                color: $theme.colors.contentNegative,
-                              }),
-                            },
-                          }}
-                          {...cancelButtonProps}
+                          shape={SHAPE.circle}
+                          size={SIZE.compact}
+                          {...deleteButtonProps}
                         >
-                          {locale.fileuploader.cancel}
-                        </CancelButtonComponent>
+                          <TrashCanFilledIcon
+                            aria-hidden={'true'}
+                            data-baseweb="file-uploader-trash-can-filled-icon"
+                            overrides={{ Svg: { style: { verticalAlign: 'middle' } } }}
+                            size={theme.sizing.scale600}
+                            title={'remove'}
+                            {...trashCanFilledIconProps}
+                          />
+                        </DeleteButtonComponent>
                       )}
-                    </React.Fragment>
-                  )}
-                </FileDragAndDrop>
-
-                <HiddenInput
-                  aria-invalid={Boolean(props.errorMessage) || null}
-                  aria-describedby={props['aria-describedby']}
-                  aria-errormessage={props.errorMessage || null}
-                  {...getInputProps()}
-                  {...prefixedStyledProps}
-                  {...hiddenInputProps}
-                />
-              </Root>
-            )}
-          </LocaleContext.Consumer>
-        );
-      }}
-    </Dropzone>
+                    </FileRowContent>
+                    <ProgressBarComponent
+                      aria-hidden={'true'}
+                      data-baseweb="file-uploader-progress-bar"
+                      overrides={{
+                        Bar: {
+                          style: {
+                            marginTop: theme.sizing.scale0,
+                            marginBottom: theme.sizing.scale0,
+                            marginLeft: 0,
+                            marginRight: 0,
+                          },
+                        },
+                        BarContainer: {
+                          style: {
+                            marginTop: 0,
+                            marginBottom: 0,
+                            marginLeft: 0,
+                            marginRight: 0,
+                          },
+                        },
+                        BarProgress: {
+                          // @ts-ignore
+                          style: ({ $theme }) => ({
+                            backgroundColor: FILE_STATUS_TO_COLOR_MAP($theme)[fileRow.status],
+                          }),
+                        },
+                      }}
+                      size={PROGRESS_BAR_SIZE.small}
+                      value={fileRow.status === FILE_STATUS.processed ? 100 : 20}
+                      {...progressBarProps}
+                    />
+                  </FileRowColumn>
+                </FileRow>
+              ))}
+            </FileRows>
+          )}
+          {props.hint && (
+            <Hint
+              data-baseweb="file-uploader-hint"
+              id="file-uploader-hint"
+              $fileCount={props.fileRows.length}
+              {...hintProps}
+            >
+              {props.hint}
+            </Hint>
+          )}
+        </ParentRoot>
+      )}
+    </LocaleContext.Consumer>
   );
 }
 
 FileUploader.defaultProps = {
-  disableClick: true,
-  overrides: {},
+  fileRows: [],
+  setFileRows: () => {},
 };
-
-export default FileUploader;
diff --git a/src/file-uploader/index.ts b/src/file-uploader/index.ts
index 5faf1903f9..d2c47c107e 100644
--- a/src/file-uploader/index.ts
+++ b/src/file-uploader/index.ts
@@ -8,12 +8,19 @@ export { default as FileUploader } from './file-uploader';
 
 // Styled elements
 export {
-  StyledRoot,
-  StyledFileDragAndDrop,
-  StyledContentMessage,
-  StyledContentSeparator,
-  StyledErrorMessage,
-  StyledHiddenInput,
+  StyledFileRow,
+  StyledFileRowColumn,
+  StyledFileRowContent,
+  StyledFileRowFileName,
+  StyledFileRowText,
+  StyledFileRowUploadMessage,
+  StyledFileRowUploadText,
+  StyledFileRows,
+  StyledHint,
+  StyledImagePreviewThumbnail,
+  StyledItemPreviewContainer,
+  StyledLabel,
+  StyledParentRoot,
 } from './styled-components';
 
 // Flow
diff --git a/src/file-uploader/locale.ts b/src/file-uploader/locale.ts
index 210558e556..f6488e85af 100644
--- a/src/file-uploader/locale.ts
+++ b/src/file-uploader/locale.ts
@@ -5,19 +5,19 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export type FileUploaderLocale = {
-  dropFilesToUpload: string;
-  or: string;
-  browseFiles: string;
-  retry: string;
-  cancel: string;
+  added: string;
+  buttonText: string;
+  contentMessage: string;
+  error: string;
+  processed: string;
 };
 
 const locale = {
-  dropFilesToUpload: 'Drop files here to upload...',
-  or: '',
-  browseFiles: 'Browse files',
-  retry: 'Retry Upload',
-  cancel: 'Cancel',
+  added: 'Description',
+  buttonText: 'Browse files',
+  contentMessage: 'or drop to upload',
+  error: 'Upload failed: ',
+  processed: 'Upload successful',
 };
 
 export default locale;
diff --git a/src/file-uploader/styled-components.ts b/src/file-uploader/styled-components.ts
index 59c751c738..c613ecc876 100644
--- a/src/file-uploader/styled-components.ts
+++ b/src/file-uploader/styled-components.ts
@@ -7,83 +7,239 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles';
 import type { StyleProps } from './types';
 
-export const StyledFileDragAndDrop = styled<'div', StyleProps>('div', (props) => {
-  const borderColor = props.$isDragActive
-    ? props.$theme.colors.borderAccent
-    : props.$theme.colors.fileUploaderBorderColorDefault;
-  const borderStyle = props.$afterFileDrop ? 'none' : 'dashed';
+export const StyledFileRow = styled<'li', StyleProps>('li', (props) => {
+  const {
+    $theme: { animation, sizing },
+  } = props;
+  return {
+    animationDuration: animation.timing400,
+    animationFillMode: 'forwards',
+    animationIterationCount: 1,
+    animationTimingFunction: animation.easeOutQuinticCurve,
+    animationName: {
+      '0%': {
+        transform: 'translateY(-32px)',
+        opacity: 0,
+      },
+      '50%': {
+        opacity: 1,
+      },
+      '100%': {
+        transform: 'translateY(0px)',
+        opacity: 1,
+      },
+    },
+    paddingTop: sizing.scale500,
+    paddingRight: sizing.scale500,
+    paddingBottom: sizing.scale500,
+    paddingLeft: sizing.scale500,
+    gap: sizing.scale500,
+    height: 'fit-content',
+    display: 'flex',
+    alignItems: 'center',
+  };
+});
+StyledFileRow.displayName = 'StyledFileRow';
+
+export const StyledFileRowColumn = styled<'div', StyleProps>('div', () => {
   return {
     alignItems: 'center',
-    backgroundColor: props.$isDragActive
-      ? props.$theme.colors.backgroundAccentLight
-      : props.$theme.colors.fileUploaderBackgroundColor,
-    borderLeftColor: borderColor,
-    borderRightColor: borderColor,
-    borderTopColor: borderColor,
-    borderBottomColor: borderColor,
-    borderLeftStyle: borderStyle,
-    borderRightStyle: borderStyle,
-    borderTopStyle: borderStyle,
-    borderBottomStyle: borderStyle,
-    borderLeftWidth: props.$theme.sizing.scale0,
-    borderRightWidth: props.$theme.sizing.scale0,
-    borderTopWidth: props.$theme.sizing.scale0,
-    borderBottomWidth: props.$theme.sizing.scale0,
-    borderTopLeftRadius: props.$theme.borders.radius400,
-    borderTopRightRadius: props.$theme.borders.radius400,
-    borderBottomLeftRadius: props.$theme.borders.radius400,
-    borderBottomRightRadius: props.$theme.borders.radius400,
-    boxSizing: 'border-box',
     display: 'flex',
     flexDirection: 'column',
-    outline: 'none',
-    paddingTop: props.$theme.sizing.scale900,
-    paddingRight: props.$theme.sizing.scale800,
-    paddingBottom: props.$afterFileDrop
-      ? props.$theme.sizing.scale300
-      : props.$theme.sizing.scale900,
-    paddingLeft: props.$theme.sizing.scale800,
     width: '100%',
+    height: '100%',
+    justifyContent: 'space-between',
+    flexGrow: 1,
+    overflow: 'auto',
   };
 });
+StyledFileRowColumn.displayName = 'StyledFileRowColumn';
 
-StyledFileDragAndDrop.displayName = 'StyledFileDragAndDrop';
+export const StyledFileRowContent = styled<'div', StyleProps>('div', (props) => {
+  const {
+    $theme: { sizing },
+  } = props;
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: sizing.scale500,
+    justifyContent: 'space-between',
+    width: '100%',
+    height: sizing.scale1000,
+  };
+});
+StyledFileRowContent.displayName = 'StyledFileRowContent';
 
-export const StyledContentMessage = styled<'div', StyleProps>(
-  'div',
-  // @ts-ignore
-  ({ $theme, $afterFileDrop, $isDragActive }) => ({
-    ...($afterFileDrop ? $theme.typography.LabelMedium : $theme.typography.LabelSmall),
-    color: $afterFileDrop
-      ? $theme.colors.contentPrimary
-      : $isDragActive
-      ? $theme.colors.contentAccent
-      : null,
-    marginTop: $afterFileDrop ? $theme.sizing.scale100 : null,
-    marginBottom: $afterFileDrop ? $theme.sizing.scale100 : null,
-  })
-);
+export const StyledFileRowFileName = styled<'div', StyleProps>('div', (props) => {
+  const {
+    $theme: { colors, typography },
+  } = props;
+  return {
+    ...typography.LabelSmall,
+    color: colors.contentPrimary,
+    width: '100%',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  };
+});
+StyledFileRowColumn.displayName = 'StyledFileRowColumn';
 
-StyledContentMessage.displayName = 'StyledContentMessage';
+export const StyledFileRowText = styled<'div', StyleProps>('div', (props) => {
+  const {
+    $theme: { sizing },
+  } = props;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    gap: sizing.scale0,
+    flexGrow: 1,
+    overflow: 'auto',
+  };
+});
+StyledFileRowColumn.displayName = 'StyledFileRowColumn';
 
-export const StyledContentSeparator = StyledContentMessage;
+export const StyledFileRowUploadMessage = styled<'div', StyleProps>('div', (props) => {
+  const {
+    $color,
+    $theme: { sizing, typography },
+  } = props;
+  return {
+    ...typography.ParagraphXSmall,
+    color: $color,
+    alignItems: 'center',
+    gap: sizing.scale100,
+    display: 'flex',
+    flexDirection: 'row',
+  };
+});
+StyledFileRowUploadMessage.displayName = 'StyledFileRowUploadMessage';
 
-// @ts-ignore
-export const StyledErrorMessage = styled<'div', StyleProps>('div', (props) => ({
-  ...props.$theme.typography.LabelMedium,
-  color: props.$theme.colors.contentNegative,
-  marginTop: props.$afterFileDrop ? props.$theme.sizing.scale100 : null,
-  marginBottom: props.$afterFileDrop ? props.$theme.sizing.scale100 : null,
-}));
+export const StyledFileRowUploadText = styled<'div', StyleProps>('div', (props) => {
+  const { $color } = props;
+  return {
+    color: $color ? $color : 'inherit',
+    width: '100%',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  };
+});
+StyledFileRowUploadText.displayName = 'StyledFileRowUploadText';
+
+export const StyledFileRows = styled<'ul', StyleProps>('ul', (props) => {
+  const {
+    $theme: { animation, borders, sizing },
+  } = props;
+  return {
+    animationDuration: animation.timing500,
+    animationIterationCount: 1,
+    animationTimingFunction: animation.easeInOutQuinticCurve,
+    animationName: {
+      '0%': {
+        transform: 'translateY(-32px)',
+      },
+      '100%': {
+        transform: 'translateX(-0px)',
+      },
+    },
+    ...borders.border200,
+    borderRadius: borders.radius400,
+    borderWidth: sizing.scale0,
+    listStyle: 'none',
+    padding: 0,
+    marginTop: 0,
+    marginBottom: sizing.scale300,
+  };
+});
+StyledFileRows.displayName = 'StyledFileRows';
+
+export const StyledHint = styled<'div', StyleProps>('div', (props) => {
+  const {
+    $fileCount,
+    $theme: { animation, colors, typography },
+  } = props;
+  let fontColor = colors.contentTertiary;
+  const animations =
+    $fileCount > 0
+      ? {
+          animationDuration: animation.timing500,
+          animationIterationCount: 1,
+          animationTimingFunction: animation.easeInOutQuinticCurve,
+          animationName: {
+            '0%': {
+              transform: 'translateY(-32px)',
+            },
+            '100%': {
+              transform: 'translateX(-0px)',
+            },
+          },
+        }
+      : {};
+  return {
+    ...animations,
+    ...typography.ParagraphSmall,
+    color: fontColor,
+  };
+});
+StyledHint.displayName = 'StyledHint';
 
-StyledErrorMessage.displayName = 'StyledErrorMessage';
+export const StyledImagePreviewThumbnail = styled<'img', StyleProps>('img', (props) => {
+  const {
+    $alt,
+    $src,
+    $theme: { borders, colors },
+  } = props;
+  return {
+    alt: $alt,
+    borderRadius: borders.radius300,
+    outline: `1px ${colors.borderTransparent}`,
+    className: 'thumb',
+    src: $src,
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  };
+});
+StyledImagePreviewThumbnail.displayName = 'StyledImagePreviewThumbnail';
 
-export const StyledRoot = styled<'div', StyleProps>('div', (props) => ({
-  ...props.$theme.typography.font300,
-  color: props.$theme.colors.fileUploaderMessageColor,
-}));
+export const StyledItemPreviewContainer = styled<'div', StyleProps>('div', (props) => {
+  const {
+    $theme: { sizing },
+  } = props;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: sizing.scale1200,
+    height: sizing.scale1200,
+  };
+});
+StyledItemPreviewContainer.displayName = 'StyledItemPreviewContainer';
 
-StyledRoot.displayName = 'StyledRoot';
+export const StyledLabel = styled<'label', StyleProps>('label', (props) => {
+  const {
+    $disabled,
+    $theme: { colors, sizing, typography },
+  } = props;
+  return {
+    ...typography.LabelSmall,
+    width: '100%',
+    color: $disabled ? colors.contentStateDisabled : colors.contentPrimary,
+    display: 'block',
+    marginBottom: sizing.scale300,
+  };
+});
+StyledLabel.displayName = 'StyledLabel';
 
-export const StyledHiddenInput = styled('input', {});
-StyledHiddenInput.displayName = 'StyledHiddenInput';
+export const StyledParentRoot = styled<'div', StyleProps>('div', () => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+});
+StyledParentRoot.displayName = 'StyledParentRoot';
diff --git a/src/file-uploader/types.ts b/src/file-uploader/types.ts
index 4102ebca25..a986091217 100644
--- a/src/file-uploader/types.ts
+++ b/src/file-uploader/types.ts
@@ -4,49 +4,65 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import type { DropzoneProps } from 'react-dropzone';
-import type { DragEvent } from 'react';
 import type { Override } from '../helpers/overrides';
+import type { FILE_STATUS } from './constants';
+import type {
+  FileUploaderBasicOverrides,
+  FileUploaderBasicProps,
+  StyleProps as FileUploaderBasicStyleProps,
+} from '../file-uploader-basic/types';
 
-export type StyleProps = {
-  $afterFileDrop: boolean;
-  $disabled: boolean;
-  $isDragActive: boolean;
-  $isDragAccept: boolean;
-  $isDragReject: boolean;
-  $isFocused: boolean;
+export type StyleProps = FileUploaderBasicStyleProps & {
+  $alt: string;
+  $color: string;
+  $fileCount: number;
+  $src: string;
 };
 
 export type FileUploaderOverrides = {
-  Root?: Override;
-  FileDragAndDrop?: Override;
-  ContentMessage?: Override;
-  ContentSeparator?: Override;
-  HiddenInput?: Override;
-  ProgressMessage?: Override;
-  ErrorMessage?: Override;
-  ButtonComponent?: Override;
-  CancelButtonComponent?: Override;
-  RetryButtonComponent?: Override;
-  Spinner?: Override;
-  ProgressBar?: Override;
+  CircleCheckFilledIcon?: Override;
+  CircleExclamationPointFilledIcon?: Override;
+  DeleteButtonComponent?: Override;
+  FileRow?: Override;
+  FileRowColumn?: Override;
+  FileRowContent?: Override;
+  FileRowFileName?: Override;
+  FileRowText?: Override;
+  FileRowUploadMessage?: Override;
+  FileRowUploadText?: Override;
+  FileRows?: Override;
+  Hint?: Override;
+  ImagePreviewThumbnail?: Override;
+  ItemPreviewContainer?: Override;
+  Label?: Override;
+  PaperclipFilledIcon?: Override;
+  ParentRoot?: Override;
+  TrashCanFilledIcon?: Override;
 };
 
-export type FileUploaderProps = Omit<DropzoneProps, 'accept'> & {
-  accept?: string[] | string;
-  disableClick?: boolean;
-  'aria-describedby'?: string;
-  // Error message to be displayed
-  errorMessage?: string;
-  onCancel?: () => unknown;
-  onRetry?: () => unknown;
-  overrides?: FileUploaderOverrides;
-  progressAmount?: number;
-  progressMessage?: string;
+export type FileRow = {
+  errorMessage: string | null;
+  file: File;
+  id: string;
+  // fileInfo is the result of the processFileOnDrop function
+  // TODO: switch to leverage a generic <T> so applications can define the shape of fileInfo
+  fileInfo?: any;
+  imagePreviewThumbnail?: any;
+  /** Defines the status of a file */
+  status: keyof typeof FILE_STATUS;
 };
 
-export type DropFilesEventHandler = (
-  accepted: File[],
-  rejected: File[],
-  event: DragEvent<HTMLElement>
-) => unknown;
+export type FileUploaderProps = Omit<
+  FileUploaderBasicProps,
+  'onDrop' | 'onDropAccepted' | 'onDropRejected' | 'overrides'
+> & {
+  fileRows: FileRow[];
+  hint?: string;
+  itemPreview?: boolean;
+  label?: string;
+  maxFiles?: number;
+  overrides?: FileUploaderBasicOverrides & FileUploaderOverrides;
+  /** Function to run on each file, returns "errorMessage: null" on success and "errorMessage: string" for failures */
+  processFileOnDrop?: (file: File) => Promise<{ errorMessage: string | null; fileInfo?: any }>;
+  setFileRows: (fileRows: FileRow[]) => void;
+};
diff --git a/src/file-uploader-beta/utils.ts b/src/file-uploader/utils.ts
similarity index 60%
rename from src/file-uploader-beta/utils.ts
rename to src/file-uploader/utils.ts
index 7390308381..43280dadb2 100644
--- a/src/file-uploader-beta/utils.ts
+++ b/src/file-uploader/utils.ts
@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import type { Theme } from '../styles';
+import { ARIA_LIVE_TIMEOUT_MS, type ARIA_LIVE_ELEMENT_ID } from './constants';
 
 export const destructureStyleOverride = (styleOverride: any, theme: Theme) => {
   if (typeof styleOverride === 'function') {
@@ -21,3 +22,19 @@ export const formatBytes = (bytes: number): string => {
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 };
+
+export const handleAriaLiveUpdates = (
+  elementId: ARIA_LIVE_ELEMENT_ID,
+  updateMessage: string
+): void => {
+  const liveRegion = document.getElementById(elementId);
+  if (liveRegion) {
+    liveRegion.textContent = updateMessage;
+  }
+  setTimeout(() => {
+    const liveRegion = document.getElementById(elementId);
+    if (liveRegion) {
+      liveRegion.textContent = null;
+    }
+  }, ARIA_LIVE_TIMEOUT_MS);
+};
diff --git a/src/icon/circle-exclamation-point-filled.tsx b/src/icon/circle-exclamation-point-filled.tsx
new file mode 100644
index 0000000000..907ab7dc2f
--- /dev/null
+++ b/src/icon/circle-exclamation-point-filled.tsx
@@ -0,0 +1,54 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// BASEUI-GENERATED-REACT-ICON
+// DO NOT EDIT THIS FILE DIRECTLY, SEE README.md
+import * as React from 'react';
+import { useStyletron } from '../styles';
+import { mergeOverride, toObjectOverride } from '../helpers/overrides';
+
+import Icon from './icon';
+import type { IconProps } from './types';
+
+// @ts-ignore
+function CircleExclamationPointFilled(props: IconProps, ref) {
+  const [, theme] = useStyletron();
+  const {
+    title = 'Circle Exclamation Point Filled',
+    size,
+    color,
+    overrides = {},
+    ...restProps
+  } = props;
+  const SvgOverride = mergeOverride(
+    // Icons from the theme target the SVG override in the underlying Icon component
+    {
+      component:
+        theme.icons && theme.icons.CircleExclamationPointFilled
+          ? theme.icons.CircleExclamationPointFilled
+          : null,
+    },
+    overrides && overrides.Svg ? toObjectOverride(overrides.Svg) : {}
+  );
+  return (
+    <Icon
+      viewBox="0 0 24 24"
+      ref={ref}
+      title={title}
+      size={size}
+      color={color}
+      overrides={{ Svg: SvgOverride }}
+      {...restProps}
+    >
+      <path
+        d="M12 23C5.9 23 1 18.1 1 12S5.9 1 12 1s11 4.9 11 11-4.9 11-11 11Zm1.5-18h-3v8h3V5ZM12 15c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}
+
+export default React.forwardRef<SVGSVGElement, IconProps>(CircleExclamationPointFilled);
diff --git a/src/icon/icon-exports.ts b/src/icon/icon-exports.ts
index 2017a78718..f82241858d 100644
--- a/src/icon/icon-exports.ts
+++ b/src/icon/icon-exports.ts
@@ -18,6 +18,7 @@ export { default as ChevronLeft } from './chevron-left';
 export { default as ChevronRight } from './chevron-right';
 export { default as ChevronUp } from './chevron-up';
 export { default as CircleCheckFilled } from './circle-check-filled';
+export { default as CircleExclamationPointFilled } from './circle-exclamation-point-filled';
 export { default as DeleteAlt } from './delete-alt';
 export { default as Delete } from './delete';
 export { default as Filter } from './filter';
diff --git a/src/locale/en_US.ts b/src/locale/en_US.ts
index 1416e0e26f..fda6a4765b 100644
--- a/src/locale/en_US.ts
+++ b/src/locale/en_US.ts
@@ -10,7 +10,7 @@ import datepicker from '../datepicker/locale';
 import datatable from '../data-table/locale';
 import buttongroup from '../button-group/locale';
 import fileuploader from '../file-uploader/locale';
-import fileuploaderbeta from '../file-uploader-beta/locale';
+import fileuploaderbasic from '../file-uploader-basic/locale';
 import menu from '../menu/locale';
 import modal from '../modal/locale';
 import drawer from '../drawer/locale';
@@ -26,7 +26,7 @@ const en_US: Locale = {
   datatable,
   buttongroup,
   fileuploader,
-  fileuploaderbeta,
+  fileuploaderbasic,
   menu,
   modal,
   drawer,
diff --git a/src/locale/es_AR.ts b/src/locale/es_AR.ts
index 09367a3c81..6390a93c0e 100644
--- a/src/locale/es_AR.ts
+++ b/src/locale/es_AR.ts
@@ -89,6 +89,7 @@ const es_AR: Locale = {
     selectRow: 'Seleccionar fila',
     selectAllRows: 'Seleccionar todas las filas',
     sortColumn: 'Clasificar columna',
+    textQueryPlaceholder: 'Buscar...',
   },
 
   buttongroup: {
@@ -96,6 +97,14 @@ const es_AR: Locale = {
   },
 
   fileuploader: {
+    added: 'Cargando...',
+    buttonText: 'Buscar archivos',
+    contentMessage: 'o soltar para subir',
+    error: 'Error al Subir',
+    processed: 'Subida exitosa',
+  },
+
+  fileuploaderbasic: {
     dropFilesToUpload: 'Arrastra archivos aquí para subir...',
     or: '',
     browseFiles: 'Buscar archivos',
@@ -103,12 +112,6 @@ const es_AR: Locale = {
     cancel: 'Cancelar',
   },
 
-  fileuploaderbeta: {
-    added: 'Cargando...',
-    error: 'Error al Subir',
-    processed: 'Subida exitosa',
-  },
-
   menu: {
     noResultsMsg: 'Sin resultados',
     parentMenuItemAriaLabel:
diff --git a/src/locale/index.tsx b/src/locale/index.tsx
index 7022f91038..7a57f16bf1 100644
--- a/src/locale/index.tsx
+++ b/src/locale/index.tsx
@@ -17,7 +17,7 @@ import type { DatepickerLocale as DatepickerLocaleAlias } from '../datepicker';
 import type { DataTableLocale as DataTableLocaleAlias } from '../data-table';
 import type { ButtonGroupLocale as ButtonGroupLocaleAlias } from '../button-group';
 import type { FileUploaderLocale as FileUploaderLocaleAlias } from '../file-uploader';
-import type { FileUploaderBetaLocale as FileUploaderBetaLocaleAlias } from '../file-uploader-beta';
+import type { FileUploaderBasicLocale as FileUploaderBasicLocaleAlias } from '../file-uploader-basic';
 import type { MenuLocale as MenuLocaleAlias } from '../menu';
 import type { ModalLocale as ModalLocaleAlias } from '../modal';
 import type { DrawerLocale as DrawerLocaleAlias } from '../drawer';
@@ -64,7 +64,7 @@ export type ButtonGroupLocale = ButtonGroupLocaleAlias;
 /** @deprecated inded use type exported from the component itself */
 export type FileUploaderLocale = FileUploaderLocaleAlias;
 /** @deprecated inded use type exported from the component itself */
-export type FileUploaderBetaLocale = FileUploaderBetaLocaleAlias;
+export type FileUploaderBasicLocale = FileUploaderBasicLocaleAlias;
 /** @deprecated inded use type exported from the component itself */
 export type MenuLocale = MenuLocaleAlias;
 /** @deprecated inded use type exported from the component itself */
diff --git a/src/locale/tr_TR.ts b/src/locale/tr_TR.ts
index f68196c9ed..51dca6727a 100644
--- a/src/locale/tr_TR.ts
+++ b/src/locale/tr_TR.ts
@@ -89,6 +89,7 @@ const tr_TR: Locale = {
     selectRow: 'satır seç',
     selectAllRows: 'Tüm satırları seç',
     sortColumn: 'Sıralama sütunu',
+    textQueryPlaceholder: 'Aramak...',
   },
 
   buttongroup: {
@@ -96,6 +97,14 @@ const tr_TR: Locale = {
   },
 
   fileuploader: {
+    added: 'Yükleniyor...',
+    buttonText: 'Dosyalara göz atın',
+    contentMessage: 'veya yüklemek için bırakın',
+    error: 'Yükleme hatası',
+    processed: 'Yükleme başarılı',
+  },
+
+  fileuploaderbasic: {
     dropFilesToUpload: 'Dosyaları yüklemek için buraya bırakın...',
     or: '',
     browseFiles: 'Dosyalara göz atın',
@@ -103,12 +112,6 @@ const tr_TR: Locale = {
     cancel: 'İptal',
   },
 
-  fileuploaderbeta: {
-    added: 'Yükleniyor...',
-    error: 'Yükleme hatası',
-    processed: 'Yükleme başarılı',
-  },
-
   menu: {
     noResultsMsg: 'Sonuç yok',
     parentMenuItemAriaLabel:
diff --git a/src/locale/types.ts b/src/locale/types.ts
index 1e5c6da357..f1b634f434 100644
--- a/src/locale/types.ts
+++ b/src/locale/types.ts
@@ -10,7 +10,7 @@ import type { DatepickerLocale } from '../datepicker';
 import type { DataTableLocale } from '../data-table';
 import type { ButtonGroupLocale } from '../button-group';
 import type { FileUploaderLocale } from '../file-uploader';
-import type { FileUploaderBetaLocale } from '../file-uploader-beta';
+import type { FileUploaderBasicLocale } from '../file-uploader-basic';
 import type { MenuLocale } from '../menu';
 import type { ModalLocale } from '../modal';
 import type { DrawerLocale } from '../drawer';
@@ -25,7 +25,7 @@ export type Locale = {
   datatable: DataTableLocale;
   buttongroup: ButtonGroupLocale;
   fileuploader: FileUploaderLocale;
-  fileuploaderbeta: FileUploaderBetaLocale;
+  fileuploaderbasic: FileUploaderBasicLocale;
   menu: MenuLocale;
   modal: ModalLocale;
   drawer: DrawerLocale;
diff --git a/src/payment-card/custom-cards.config.ts b/src/payment-card/custom-cards.config.ts
index 31eaf03b2f..41c257274b 100644
--- a/src/payment-card/custom-cards.config.ts
+++ b/src/payment-card/custom-cards.config.ts
@@ -8,16 +8,17 @@ LICENSE file in the root directory of this source tree.
   This file should be used for adding new card type configuration
 */
 
-const UATP_CARD_TYPE_CONFIG = {
-  niceType: 'Uatp',
-  type: 'uatp',
-  patterns: [[1001, 1999]],
-  gaps: [4, 9],
-  lengths: [15],
-  code: {
-    name: 'CVV',
-    size: 0,
-  },
-};
+const UATP_CARD_TYPE_CONFIG: Parameters<typeof import('card-validator').creditCardType.addCard>[0] =
+  {
+    niceType: 'Uatp',
+    type: 'uatp',
+    patterns: [[1001, 1999]],
+    gaps: [4, 9],
+    lengths: [15],
+    code: {
+      name: 'CVV',
+      size: 0,
+    },
+  };
 
 export const CUSTOM_CARDS_CONFIGURATION = [UATP_CARD_TYPE_CONFIG];
diff --git a/src/payment-card/payment-card.tsx b/src/payment-card/payment-card.tsx
index 31fafda088..3009985ee9 100644
--- a/src/payment-card/payment-card.tsx
+++ b/src/payment-card/payment-card.tsx
@@ -70,7 +70,6 @@ class PaymentCard extends React.Component<PaymentCardProps> {
     super(props);
     // For adding new custom card type, add card config to custom-cards.config.js
     CUSTOM_CARDS_CONFIGURATION.forEach((cardTypeConfig) =>
-      // @ts-expect-error todo(flow-ts) upgrade card-validator dependency
       valid.creditCardType.addCard(cardTypeConfig)
     );
   }
diff --git a/src/phone-input/__tests__/phone-input.test.tsx b/src/phone-input/__tests__/phone-input.test.tsx
new file mode 100644
index 0000000000..80d6ec3dc9
--- /dev/null
+++ b/src/phone-input/__tests__/phone-input.test.tsx
@@ -0,0 +1,17 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { PhoneInput } from '..';
+
+describe('PhoneInput', () => {
+  it('renders gracefully', () => {
+    const { container } = render(<PhoneInput />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/src/progress-bar/__tests__/progressbar-rounded.test.tsx b/src/progress-bar/__tests__/progressbar-rounded.test.tsx
new file mode 100644
index 0000000000..5c7172c1d7
--- /dev/null
+++ b/src/progress-bar/__tests__/progressbar-rounded.test.tsx
@@ -0,0 +1,29 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { render, getByRole, getByText } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { ProgressBarRounded, SIZE } from '..';
+
+describe('Rounded progress bar', function () {
+  it('should render component', () => {
+    const { container } = render(<ProgressBarRounded progress={0.5} size={SIZE.medium} />);
+    getByRole(container, 'progressbar');
+  });
+
+  it('should render component and displays the progress', async () => {
+    const { container } = render(<ProgressBarRounded progress={0.5} size={SIZE.medium} />);
+    getByText(container, '50%');
+  });
+
+  it('should render component and set a correct aria-valuenow value (rounded and formatted)', async () => {
+    const { container } = render(<ProgressBarRounded progress={0.5} size={SIZE.medium} />);
+    const progressBar = getByRole(container, 'progressbar');
+    expect(progressBar).toHaveAttribute('aria-valuenow', '0.5');
+  });
+});
diff --git a/src/progress-bar/progressbar-rounded.tsx b/src/progress-bar/progressbar-rounded.tsx
index 1a9e35ed0f..4e0eb3d1e6 100644
--- a/src/progress-bar/progressbar-rounded.tsx
+++ b/src/progress-bar/progressbar-rounded.tsx
@@ -101,7 +101,7 @@ function ProgressBarRounded({
     <Root
       data-baseweb="progressbar-rounded"
       role="progressbar"
-      aria-valuenow={progress}
+      aria-valuenow={progress.toFixed(2).replace(/\.?0+$/, '')}
       aria-valuemin={0}
       aria-valuemax={1}
       $size={size}
diff --git a/src/progress-bar/styled-components.tsx b/src/progress-bar/styled-components.tsx
index 888b71ca51..7022b81c8b 100644
--- a/src/progress-bar/styled-components.tsx
+++ b/src/progress-bar/styled-components.tsx
@@ -341,13 +341,11 @@ const _StyledProgressBarRoundedTrackForeground = styled<
     $pathLength: number;
     $pathProgress: number;
   }
->('path', ({ $theme, $size, $visible, $pathLength, $pathProgress }) => {
+>('path', ({ $theme, $size, $visible }) => {
   return {
     visibility: $visible ? 'visible' : 'hidden',
     stroke: $theme.colors.borderAccent,
     strokeWidth: PROGRESS_BAR_ROUNDED_SIZES[$size].strokeWidth + 'px',
-    strokeDasharray: $pathLength,
-    strokeDashoffset: $pathLength * (1 - $pathProgress) + '',
   };
 });
 
@@ -357,7 +355,17 @@ export const StyledProgressBarRoundedTrackForeground = withWrapper(
   _StyledProgressBarRoundedTrackForeground,
   (Styled) =>
     function StyledProgressBarRoundedSvg(props) {
-      return <Styled d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d} {...props} />;
+      return (
+        <Styled
+          d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d}
+          // We're using inline styles here to avoid the change on the class name on every update
+          style={{
+            strokeDasharray: props.$pathLength,
+            strokeDashoffset: props.$pathLength * (1 - props.$pathProgress) + '',
+          }}
+          {...props}
+        />
+      );
     }
 );
 
diff --git a/src/styles/types.ts b/src/styles/types.ts
index 2793a5ba35..07ae7329bd 100644
--- a/src/styles/types.ts
+++ b/src/styles/types.ts
@@ -83,6 +83,7 @@ export type Icon = {
   ChevronRight?: ComponentType<IconProps> | ForwardedSVG;
   ChevronRightSmall?: ComponentType<IconProps> | ForwardedSVG;
   CircleCheckFilled?: ComponentType<IconProps> | ForwardedSVG;
+  CircleExclamationPointFilled?: ComponentType<IconProps> | ForwardedSVG;
   DeleteAlt?: ComponentType<IconProps> | ForwardedSVG;
   Delete?: ComponentType<IconProps> | ForwardedSVG;
   Filter?: ComponentType<IconProps> | ForwardedSVG;
diff --git a/src/tile/__tests__/tile.test.tsx b/src/tile/__tests__/tile.test.tsx
index d57c3e4b31..b78a975e84 100644
--- a/src/tile/__tests__/tile.test.tsx
+++ b/src/tile/__tests__/tile.test.tsx
@@ -94,6 +94,5 @@ describe('Tile Component', () => {
     const { container } = render(<Tile tileKind={TILE_KIND.action} label={LabelComponent} />);
 
     expect(getByText(container, 'Not a string')).toBeInTheDocument();
-    screen.debug();
   });
 });