diff --git a/package-lock.json b/package-lock.json
index ea0f1b85a4ac4257a58efe70cf16183b3e9c4f09..03f26f5fedae5cda5c768b7ae500e968a9a9839a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ess-ics/ce-ui-common",
-  "version": "17.0.0",
+  "version": "18.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ess-ics/ce-ui-common",
-      "version": "17.0.0",
+      "version": "18.0.0",
       "dependencies": {
         "@fontsource/titillium-web": "^5.0.22",
         "@mui/x-data-grid-pro": "^6.5.0",
diff --git a/package.json b/package.json
index bd2f36b5fb111b7f5dc18a71f01b5b64e60e9e31..f17b56c2e294a4b24eb67211061016f0998a3ca0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ess-ics/ce-ui-common",
-  "version": "17.0.0",
+  "version": "18.0.0",
   "private": true,
   "type": "module",
   "main": "dist/index.js",
diff --git a/src/components/common/AlertBanner/AlertBanner.jsx b/src/components/common/AlertBanner/AlertBanner.jsx
deleted file mode 100644
index 97bd4fe48b18e1d8e200dd57d3584fdd867600c4..0000000000000000000000000000000000000000
--- a/src/components/common/AlertBanner/AlertBanner.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Alert, Button, Grid } from "@mui/material";
-import { oneOf, string } from "prop-types";
-
-export const AlertBanner = ({ type, message, link }) => {
-  // If alarm type isn't specified, then assume 'info'; otherwise use the alarm type.
-  const determineSeverity = (alarmType) => {
-    return ["error", "warning", "success"].includes(alarmType?.toLowerCase())
-      ? alarmType?.toLowerCase()
-      : "info";
-  };
-
-  return (
-    <Alert
-      severity={determineSeverity(type)}
-      action={
-        link && (
-          <Button
-            target="_blank"
-            href={link}
-            color="inherit"
-            size="small"
-          >
-            More Info
-          </Button>
-        )
-      }
-    >
-      {message}
-    </Alert>
-  );
-};
-AlertBanner.propTypes = {
-  type: oneOf([
-    "info",
-    "warning",
-    "error",
-    "success",
-    "INFO",
-    "WARNING",
-    "ERROR",
-    "SUCCESS"
-  ]),
-  message: string,
-  link: string
-};
-
-export const AlertBannerList = ({ alerts = [] }) => {
-  return (
-    <Grid
-      id="ioc-alerts"
-      container
-      spacing={1}
-    >
-      {alerts.map((alert) => (
-        <Grid
-          item
-          xs={12}
-          key={alert?.message || alert}
-        >
-          <AlertBanner {...alert} />
-        </Grid>
-      ))}
-    </Grid>
-  );
-};
diff --git a/src/components/common/AlertBanner/AlertBanner.tsx b/src/components/common/AlertBanner/AlertBanner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..74b88fcb3a4fab7d046bd403c20d01e16b2d31dc
--- /dev/null
+++ b/src/components/common/AlertBanner/AlertBanner.tsx
@@ -0,0 +1,58 @@
+import { Alert, Button, Grid } from "@mui/material";
+import { AlertTypes } from "./types";
+import { useUniqueKeys } from "../../../hooks/useUniqueKeys";
+
+type LowercaseAlertTypes = Lowercase<AlertTypes>;
+export interface AlertBannerProps {
+  type?: AlertTypes;
+  message?: string;
+  link?: string;
+}
+
+export const AlertBanner = ({ type, message, link }: AlertBannerProps) => {
+  return (
+    <Alert
+      severity={(type?.toLowerCase() as LowercaseAlertTypes) ?? "info"}
+      action={
+        link && (
+          <Button
+            target="_blank"
+            href={link}
+            color="inherit"
+            size="small"
+          >
+            More Info
+          </Button>
+        )
+      }
+    >
+      {message}
+    </Alert>
+  );
+};
+
+export interface AlertBannerListProps {
+  alerts?: AlertBannerProps[];
+}
+
+export const AlertBannerList = ({ alerts = [] }: AlertBannerListProps) => {
+  const alertKeys = useUniqueKeys(alerts);
+  return (
+    <Grid
+      id="ioc-alerts"
+      container
+      spacing={1}
+    >
+      {alertKeys &&
+        alerts.map((alert, i) => (
+          <Grid
+            item
+            xs={12}
+            key={alertKeys[i]}
+          >
+            <AlertBanner {...alert} />
+          </Grid>
+        ))}
+    </Grid>
+  );
+};
diff --git a/src/components/common/AlertBanner/index.js b/src/components/common/AlertBanner/index.js
deleted file mode 100644
index a2cffdb8e748274075d712f2b179592611154ada..0000000000000000000000000000000000000000
--- a/src/components/common/AlertBanner/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { AlertBanner, AlertBannerList } from "./AlertBanner";
-
-export { AlertBanner, AlertBannerList };
diff --git a/src/components/common/AlertBanner/index.ts b/src/components/common/AlertBanner/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..efcb0d4aa17220e251dac920759414a34e15afcb
--- /dev/null
+++ b/src/components/common/AlertBanner/index.ts
@@ -0,0 +1,15 @@
+import { type AlertTypes } from "./types";
+import {
+  AlertBanner,
+  AlertBannerList,
+  type AlertBannerListProps,
+  type AlertBannerProps
+} from "./AlertBanner";
+
+export {
+  AlertBanner,
+  AlertBannerList,
+  type AlertBannerListProps,
+  type AlertBannerProps,
+  type AlertTypes
+};
diff --git a/src/components/common/AlertBanner/types.ts b/src/components/common/AlertBanner/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..051ff903a966a56546755b4744a918e2b4210535
--- /dev/null
+++ b/src/components/common/AlertBanner/types.ts
@@ -0,0 +1,6 @@
+export enum AlertTypes {
+  INFO = "INFO",
+  WARNING = "WARNING",
+  ERROR = "ERROR",
+  SUCCESS = "SUCCESS"
+}
diff --git a/src/stories/common/AlertBanner/AlertBanner.stories.jsx b/src/stories/common/AlertBanner/AlertBanner.stories.tsx
similarity index 65%
rename from src/stories/common/AlertBanner/AlertBanner.stories.jsx
rename to src/stories/common/AlertBanner/AlertBanner.stories.tsx
index 73929c644d107a533cba482197cb8c6d0d73931b..eec1f4cd55bc6002b316c94cd91361968d8be459 100644
--- a/src/stories/common/AlertBanner/AlertBanner.stories.jsx
+++ b/src/stories/common/AlertBanner/AlertBanner.stories.tsx
@@ -1,28 +1,32 @@
+import { Meta } from "@storybook/react";
 import {
   AlertBanner,
-  AlertBannerList
+  AlertBannerList,
+  AlertBannerListProps,
+  AlertBannerProps
 } from "../../../components/common/AlertBanner";
 import { sbDisabledArg } from "../../utils/common-args";
 
 export default {
   title: "Common/AlertBanner",
   component: AlertBanner
-};
+} as Meta<typeof AlertBanner>;
 
-export const Default = (args) => <AlertBanner {...args} />;
+export const Default = (args: AlertBannerProps) => <AlertBanner {...args} />;
 Default.args = {
   type: "WARNING",
   message: "Your custom message here"
 };
 
-export const WithLink = (args) => <AlertBanner {...args} />;
-WithLink.argTypes = Default.argTypes;
+export const WithLink = (args: AlertBannerProps) => <AlertBanner {...args} />;
 WithLink.args = {
   ...Default.args,
   link: "#"
 };
 
-export const ManyAlerts = (args) => <AlertBannerList {...args} />;
+export const ManyAlerts = (args: AlertBannerListProps) => (
+  <AlertBannerList {...args} />
+);
 ManyAlerts.argTypes = {
   alerts: sbDisabledArg,
   type: sbDisabledArg,