diff --git a/build.washingtonpost.com/services/getPropsTable.js b/build.washingtonpost.com/services/getPropsTable.js
index 1ce282c8b..66c34be8f 100644
--- a/build.washingtonpost.com/services/getPropsTable.js
+++ b/build.washingtonpost.com/services/getPropsTable.js
@@ -1,10 +1,8 @@
 const docgen = require("react-docgen-typescript");
+const { JsxEmit } = require("typescript");
 
 export const getPropsTable = async (component = "icon") => {
   const options = {
-    shouldExtractLiteralValuesFromEnum: true,
-    savePropValueAsString: true,
-    shouldExtractValuesFromUnion: true,
     propFilter: (prop) => {
       if (prop.declarations !== undefined && prop.declarations.length > 0) {
         const hasPropAdditionalDescription = prop.declarations.find(
@@ -20,10 +18,18 @@ export const getPropsTable = async (component = "icon") => {
     },
   };
 
+  const customParser = docgen.withCompilerOptions(
+    {
+      esModuleInterop: true,
+      jsx: JsxEmit.Preserve,
+    },
+    options
+  );
+
   // Parse a file for docgen info
 
   try {
-    const componentsData = docgen.parse(
+    const componentsData = customParser.parse(
       `../packages/kit/src/${component}/index.ts`,
       options
     );
diff --git a/packages/kit/src/alert-banner/AlertBanner.tsx b/packages/kit/src/alert-banner/AlertBanner.tsx
index bbf06cd16..3581d7f8c 100644
--- a/packages/kit/src/alert-banner/AlertBanner.tsx
+++ b/packages/kit/src/alert-banner/AlertBanner.tsx
@@ -1,203 +1,13 @@
-import React from "react";
+import { AlertBannerRoot } from "./AlertBannerRoot";
+import { AlertBannerTrigger } from "./AlertBannerTrigger";
+import { AlertBannerContent } from "./AlertBannerContent";
 
-import { theme, styled } from "../theme";
-import { Icon } from "../icon";
-import { Button } from "../button";
-import { AppBar } from "../app-bar";
-
-import type * as WPDS from "../theme";
-
-import {
-  Error,
-  Success,
-  Warning,
-  Info as Information,
-  Close,
-} from "@washingtonpost/wpds-assets";
-
-const StyledAlertBannerTrigger = styled(Button, {
-  alignSelf: "flex-start",
-});
-
-type AlertBannerTriggerVariants = React.ComponentProps<
-  typeof StyledAlertBannerTrigger
->;
-
-interface AlertBannerTriggerInterface extends AlertBannerTriggerVariants {
-  css?: WPDS.CSS;
-}
-
-const AlertBannerTrigger = React.forwardRef<
-  HTMLButtonElement,
-  AlertBannerTriggerInterface
->((props, ref) => {
-  return (
-    <StyledAlertBannerTrigger
-      ref={ref}
-      isOutline
-      icon="center"
-      variant="primary"
-      css={{
-        border: "none",
-        ...props.css,
-      }}
-      {...props}
-    >
-      <Icon size="100" label="Close alert banner">
-        <Close />
-      </Icon>
-    </StyledAlertBannerTrigger>
-  );
-});
-type AlertBannerTriggerProps = React.ComponentProps<typeof AlertBannerTrigger>;
-AlertBannerTrigger.displayName = "AlertBannerTrigger";
-
-const StyledAlertBannerContent = styled("p", {
-  marginBlock: "0.625rem",
-  flex: "1",
-});
-const AlertBannerContent = StyledAlertBannerContent;
-type AlertBannerContentProps = React.ComponentProps<typeof AlertBannerContent>;
-
-const StyledAlertBanner = styled(AppBar, {
-  width: "100%",
-  flexDirection: "row",
-  justifyContent: "flex-start",
-  color: theme.colors.primary,
-  alignItems: "center",
-  fontFamily: "$meta",
-  fontSize: "$100",
-  fontWeight: "$light",
-  lineHeight: "$125",
-  minHeight: "40px",
-
-  variants: {
-    /** 4 predefined alert banners each tied to our symantic messaging on our site. They are Warning, Information, Success, and Error. */
-    variant: {
-      error: {
-        background: theme.colors.red600,
-      },
-      success: {
-        background: theme.colors.green600,
-      },
-      warning: {
-        background: theme.colors.orange600,
-      },
-      information: {
-        background: theme.colors.blue600,
-      },
-    },
-    /** The alert banner can be permanent or dismissable. */
-    dismissable: {
-      false: {
-        paddingRight: "$050",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "information",
-    dismissable: true,
-  },
-});
-
-const AlertIcons = {
-  error: Error,
-  success: Success,
-  warning: Warning,
-  information: Information,
-};
-
-type AlertIconType = keyof typeof AlertIcons;
-
-type AlertBannerVariants = React.ComponentProps<typeof StyledAlertBanner>;
-
-const AlertBannerRoot = React.forwardRef<HTMLDivElement, AlertBannerVariants>(
-  (
-    {
-      variant = "information" as AlertBannerVariants["variant"],
-      dismissable = true as AlertBannerVariants["dismissable"],
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const kids = React.Children.toArray(children);
-    const contentNode = kids.find(
-      (child) =>
-        React.isValidElement(child) && child.type === AlertBannerContent
-    );
-    const triggerNode = kids.find(
-      (child) =>
-        React.isValidElement(child) && child.type === AlertBannerTrigger
-    );
-
-    const AlertIcon = AlertIcons[variant as AlertIconType];
-
-    const StyledAlertIcon = styled(AlertIcon, {
-      $$alertBannerIconColor: theme.colors.signal,
-      fill: "$$alertBannerIconColor",
-      flex: "0 0 auto",
-
-      variants: {
-        variant: {
-          error: {
-            $$alertBannerIconColor: theme.colors.error,
-          },
-          success: {
-            $$alertBannerIconColor: theme.colors.success,
-          },
-          warning: {
-            $$alertBannerIconColor: theme.colors.warning,
-          },
-          information: {
-            $$alertBannerIconColor: theme.colors.signal,
-          },
-        },
-      },
-
-      defaultVariants: {
-        variant: "information",
-      },
-    });
-
-    return (
-      <StyledAlertBanner
-        ref={ref}
-        role="alert"
-        variant={variant}
-        dismissable={dismissable}
-        {...props}
-      >
-        <Button
-          as="div"
-          icon="center"
-          variant="primary"
-          isOutline
-          css={{
-            alignSelf: "flex-start",
-            border: "none",
-            borderRadius: 0,
-            cursor: "auto",
-            "@hover": {
-              "&:hover": {
-                background: "none",
-              },
-            },
-          }}
-        >
-          <Icon size="100" label="">
-            <StyledAlertIcon variant={variant} />
-          </Icon>
-        </Button>
-        {contentNode}
-
-        {dismissable ? triggerNode : ""}
-      </StyledAlertBanner>
-    );
-  }
-);
-AlertBannerRoot.displayName = "AlertBannerRoot";
-type AlertBannerProps = React.ComponentProps<typeof AlertBannerRoot>;
+import type { AlertBannerProps } from "./AlertBannerRoot";
+import type {
+  AlertBannerTriggerProps,
+  AlertBannerTriggerInterface,
+} from "./AlertBannerTrigger";
+import type { AlertBannerContentProps } from "./AlertBannerContent";
 
 const Root = AlertBannerRoot;
 const Trigger = AlertBannerTrigger;
diff --git a/packages/kit/src/alert-banner/AlertBannerContent.tsx b/packages/kit/src/alert-banner/AlertBannerContent.tsx
new file mode 100644
index 000000000..2e8dc8367
--- /dev/null
+++ b/packages/kit/src/alert-banner/AlertBannerContent.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+import { styled } from "../theme";
+
+const StyledAlertBannerContent = styled("p", {
+  marginBlock: "0.625rem",
+  flex: "1",
+});
+export const AlertBannerContent = StyledAlertBannerContent;
+export type AlertBannerContentProps = React.ComponentProps<
+  typeof AlertBannerContent
+>;
diff --git a/packages/kit/src/alert-banner/AlertBannerRoot.tsx b/packages/kit/src/alert-banner/AlertBannerRoot.tsx
new file mode 100644
index 000000000..3db45b8f4
--- /dev/null
+++ b/packages/kit/src/alert-banner/AlertBannerRoot.tsx
@@ -0,0 +1,160 @@
+import React from "react";
+
+import { theme, styled } from "../theme";
+import { Icon } from "../icon";
+import { Button } from "../button";
+import { AppBar } from "../app-bar";
+import { AlertBannerContent } from "./AlertBannerContent";
+import { AlertBannerTrigger } from "./AlertBannerTrigger";
+
+import {
+  Error,
+  Success,
+  Warning,
+  Info as Information,
+} from "@washingtonpost/wpds-assets";
+
+const StyledAlertBanner = styled(AppBar, {
+  width: "100%",
+  flexDirection: "row",
+  justifyContent: "flex-start",
+  color: theme.colors.primary,
+  alignItems: "center",
+  fontFamily: "$meta",
+  fontSize: "$100",
+  fontWeight: "$light",
+  lineHeight: "$125",
+  minHeight: "40px",
+
+  variants: {
+    /** 4 predefined alert banners each tied to our symantic messaging on our site. They are Warning, Information, Success, and Error. */
+    variant: {
+      error: {
+        background: theme.colors.red600,
+      },
+      success: {
+        background: theme.colors.green600,
+      },
+      warning: {
+        background: theme.colors.orange600,
+      },
+      information: {
+        background: theme.colors.blue600,
+      },
+    },
+    /** The alert banner can be permanent or dismissable. */
+    dismissable: {
+      false: {
+        paddingRight: "$050",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "information",
+    dismissable: true,
+  },
+});
+
+const AlertIcons = {
+  error: Error,
+  success: Success,
+  warning: Warning,
+  information: Information,
+};
+
+type AlertIconType = keyof typeof AlertIcons;
+
+type AlertBannerVariants = React.ComponentProps<typeof StyledAlertBanner>;
+
+export const AlertBannerRoot = React.forwardRef<
+  HTMLDivElement,
+  AlertBannerVariants
+>(
+  (
+    {
+      variant = "information" as AlertBannerVariants["variant"],
+      dismissable = true as AlertBannerVariants["dismissable"],
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const kids = React.Children.toArray(children);
+    const contentNode = kids.find(
+      (child) =>
+        React.isValidElement(child) && child.type === AlertBannerContent
+    );
+    const triggerNode = kids.find(
+      (child) =>
+        React.isValidElement(child) && child.type === AlertBannerTrigger
+    );
+
+    const AlertIcon = AlertIcons[variant as AlertIconType];
+
+    const StyledAlertIcon = styled(AlertIcon, {
+      $$alertBannerIconColor: theme.colors.signal,
+      fill: "$$alertBannerIconColor",
+      flex: "0 0 auto",
+
+      variants: {
+        variant: {
+          error: {
+            $$alertBannerIconColor: theme.colors.error,
+          },
+          success: {
+            $$alertBannerIconColor: theme.colors.success,
+          },
+          warning: {
+            $$alertBannerIconColor: theme.colors.warning,
+          },
+          information: {
+            $$alertBannerIconColor: theme.colors.signal,
+          },
+        },
+      },
+
+      defaultVariants: {
+        variant: "information",
+      },
+    });
+
+    return (
+      <StyledAlertBanner
+        ref={ref}
+        role="alert"
+        variant={variant}
+        dismissable={dismissable}
+        {...props}
+      >
+        <Button
+          as="div"
+          icon="center"
+          variant="primary"
+          isOutline
+          css={{
+            alignSelf: "flex-start",
+            border: "none",
+            borderRadius: 0,
+            cursor: "auto",
+            "@hover": {
+              "&:hover": {
+                background: "none",
+              },
+            },
+          }}
+        >
+          <Icon size="100" label="">
+            <StyledAlertIcon variant={variant} />
+          </Icon>
+        </Button>
+        {contentNode}
+
+        {dismissable ? triggerNode : ""}
+      </StyledAlertBanner>
+    );
+  }
+);
+
+AlertBannerRoot.displayName = "AlertBannerRoot";
+
+export type AlertBannerProps = React.ComponentProps<typeof AlertBannerRoot>;
diff --git a/packages/kit/src/alert-banner/AlertBannerTrigger.tsx b/packages/kit/src/alert-banner/AlertBannerTrigger.tsx
new file mode 100644
index 000000000..dacc02f8f
--- /dev/null
+++ b/packages/kit/src/alert-banner/AlertBannerTrigger.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+import { styled } from "../theme";
+import { Icon } from "../icon";
+import { Button } from "../button";
+
+import type * as WPDS from "../theme";
+
+import { Close } from "@washingtonpost/wpds-assets";
+
+const StyledAlertBannerTrigger = styled(Button, {
+  alignSelf: "flex-start",
+});
+
+type AlertBannerTriggerVariants = React.ComponentProps<
+  typeof StyledAlertBannerTrigger
+>;
+
+export interface AlertBannerTriggerInterface
+  extends AlertBannerTriggerVariants {
+  css?: WPDS.CSS;
+}
+
+export const AlertBannerTrigger = React.forwardRef<
+  HTMLButtonElement,
+  AlertBannerTriggerInterface
+>((props, ref) => {
+  return (
+    <StyledAlertBannerTrigger
+      ref={ref}
+      isOutline
+      icon="center"
+      variant="primary"
+      css={{
+        border: "none",
+        ...props.css,
+      }}
+      {...props}
+    >
+      <Icon size="100" label="Close alert banner">
+        <Close />
+      </Icon>
+    </StyledAlertBannerTrigger>
+  );
+});
+
+export type AlertBannerTriggerProps = React.ComponentProps<
+  typeof AlertBannerTrigger
+>;
+
+AlertBannerTrigger.displayName = "AlertBannerTrigger";
diff --git a/packages/kit/src/alert-banner/index.ts b/packages/kit/src/alert-banner/index.ts
index 4a7b45cb9..6e966c07e 100644
--- a/packages/kit/src/alert-banner/index.ts
+++ b/packages/kit/src/alert-banner/index.ts
@@ -1 +1,4 @@
 export * from "./AlertBanner";
+export { AlertBannerRoot } from "./AlertBannerRoot";
+export { AlertBannerTrigger } from "./AlertBannerTrigger";
+export { AlertBannerContent } from "./AlertBannerContent";