From 951564f1000128aa10e6cb8b7e585cc240339cf2 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Fri, 7 Jul 2023 09:43:59 -0400
Subject: [PATCH] docs: update docs for Supernova (#1821)

* docs: update docs for Supernova

* fix: change type of endIcon in controls

* refactor: make Button default to primary

* feat: switch args back to alphabetical

* refactor: move icons into separate file

* fix: fix merge conflicts

* fix: fix type errors

* refactor: apply recommended changes

* feat: add docs for CircularProgress

* feat: add Link docs

* feat: add Icon docs

* feat: add Dialog docs

* feat: modify ScreenReaderText docs

* feat: update Status documentation

* feat: add Tooltip docs

* feat: add Tag documentation

* feat: add Tabs docs

* feat: added MenuButton docs

* feat: updated Typography docs

* refactor: simplify DatePicker docs

* feat: update Banner docs

* feat: update docs for Infobox

* feat: update Toast docs

* feat: update Autocomplete docs

* feat: update docs for TextField

* feat: update Checkbox and CheckboxGroup docs

* feat: update Radio and RadioGroup docs

* feat: update Form and Fieldset docs

* feat: update Select and NativeSelect docs

* refactor: abstracted out type enums

* fix: fix type errors in Toast stories

* fix: remove click on disabled checkbox

* refactor: commit KG suggestions

* fix: add missing variant to Button

* refactor: fix import relativity
---
 packages/odyssey-react-mui/src/Banner.tsx     |  23 ++-
 packages/odyssey-react-mui/src/Button.tsx     |  12 +-
 packages/odyssey-react-mui/src/Field.tsx      |   4 +-
 packages/odyssey-react-mui/src/Form.tsx       |  25 ++-
 packages/odyssey-react-mui/src/Icon.tsx       |   4 +-
 packages/odyssey-react-mui/src/Infobox.tsx    |  13 +-
 packages/odyssey-react-mui/src/Link.tsx       |   6 +-
 packages/odyssey-react-mui/src/MenuButton.tsx |   6 +-
 .../src/OdysseyCacheProvider.test.tsx         |   2 +-
 packages/odyssey-react-mui/src/Status.tsx     |  12 +-
 packages/odyssey-react-mui/src/TextField.tsx  |  10 +-
 packages/odyssey-react-mui/src/Toast.tsx      |  13 +-
 .../.storybook/components/iconUtils.tsx       | 170 +++++++++++++++
 .../odyssey-storybook/.storybook/preview.ts   |   6 +
 .../odyssey-labs/DatePicker/DatePicker.mdx    |  20 --
 .../DatePicker/DatePicker.stories.tsx         |   1 +
 .../odyssey-mui/Autocomplete/Autocomplete.mdx |  81 --------
 .../Autocomplete/Autocomplete.stories.tsx     | 110 +++++++++-
 .../components/odyssey-mui/Banner/Banner.mdx  | 166 ---------------
 .../odyssey-mui/Banner/Banner.stories.tsx     |  70 +++++--
 .../components/odyssey-mui/Button/Button.mdx  | 123 -----------
 .../odyssey-mui/Button/Button.stories.tsx     | 133 +++++++++++-
 .../odyssey-mui/Checkbox/Checkbox.mdx         |  21 --
 .../odyssey-mui/Checkbox/Checkbox.stories.tsx | 162 ++++++++++++++-
 .../CheckboxGroup/CheckboxGroup.mdx           |  88 --------
 .../CheckboxGroup/CheckboxGroup.stories.tsx   | 125 ++++++------
 .../CircularProgress/CircularProgress.mdx     |  19 --
 .../CircularProgress.stories.tsx              |  17 ++
 .../DataTable/PaginatedTable.stories.tsx      |   1 +
 .../DataTable/StaticTable.stories.tsx         |   1 +
 .../components/odyssey-mui/Dialog/Dialog.mdx  |  87 --------
 .../odyssey-mui/Dialog/Dialog.stories.tsx     |  65 +++++-
 .../odyssey-mui/Fieldset/Fieldset.mdx         |  37 ----
 .../odyssey-mui/Fieldset/Fieldset.stories.tsx |  53 ++++-
 .../src/components/odyssey-mui/Form/Form.mdx  |  87 --------
 .../odyssey-mui/Form/Form.stories.tsx         | 117 +++++++++--
 .../odyssey-mui/Icon/Icon.stories.tsx         |  33 ++-
 .../odyssey-mui/Infobox/Infobox.mdx           | 190 -----------------
 .../odyssey-mui/Infobox/Infobox.stories.tsx   |  40 +++-
 .../src/components/odyssey-mui/Link/Link.mdx  |  52 ++---
 .../odyssey-mui/Link/Link.stories.tsx         |  55 ++++-
 .../odyssey-mui/MenuButton/MenuButton.mdx     | 108 ----------
 .../MenuButton/MenuButton.stories.tsx         |  57 +++++-
 .../odyssey-mui/NativeSelect/NativeSelect.mdx |  63 ------
 .../NativeSelect/NativeSelect.stories.tsx     | 118 ++++++++++-
 .../components/odyssey-mui/Radio/Radio.mdx    |  13 --
 .../odyssey-mui/Radio/Radio.stories.tsx       |  40 ++++
 .../odyssey-mui/RadioGroup/RadioGroup.mdx     |  88 --------
 .../RadioGroup/RadioGroup.stories.tsx         |  70 ++++++-
 .../ScreenReaderText/ScreenReaderText.mdx     |   8 -
 .../components/odyssey-mui/Select/Select.mdx  |  72 -------
 .../odyssey-mui/Select/Select.stories.tsx     | 130 +++++++++++-
 .../components/odyssey-mui/Status/Status.mdx  |  79 -------
 .../odyssey-mui/Status/Status.stories.tsx     |  28 ++-
 .../src/components/odyssey-mui/Tabs/Tabs.mdx  |  57 ++----
 .../odyssey-mui/Tabs/Tabs.stories.tsx         |  56 ++++-
 .../src/components/odyssey-mui/Tag/Tag.mdx    |  57 ------
 .../odyssey-mui/Tag/Tag.stories.tsx           |  48 ++++-
 .../odyssey-mui/TextField/TextField.mdx       | 117 -----------
 .../TextField/TextField.stories.tsx           | 193 ++++++++++++++++--
 .../components/odyssey-mui/Toast/Toast.mdx    | 190 -----------------
 .../odyssey-mui/Toast/Toast.stories.tsx       |  99 ++++++++-
 .../odyssey-mui/Tooltip/Tooltip.mdx           | 109 ----------
 .../odyssey-mui/Tooltip/Tooltip.stories.tsx   |  55 ++---
 .../odyssey-mui/Typography/Typography.mdx     |  61 ------
 .../Typography/Typography.stories.tsx         |   1 +
 66 files changed, 1965 insertions(+), 2212 deletions(-)
 create mode 100644 packages/odyssey-storybook/.storybook/components/iconUtils.tsx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/CheckboxGroup/CheckboxGroup.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Dialog/Dialog.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Fieldset/Fieldset.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Status/Status.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.mdx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.mdx

diff --git a/packages/odyssey-react-mui/src/Banner.tsx b/packages/odyssey-react-mui/src/Banner.tsx
index 590d24d045..e8dbe71732 100644
--- a/packages/odyssey-react-mui/src/Banner.tsx
+++ b/packages/odyssey-react-mui/src/Banner.tsx
@@ -10,17 +10,20 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Alert,
-  AlertColor,
-  AlertTitle,
-  AlertProps,
-  Link,
-  ScreenReaderText,
-} from "./";
+import { Alert, AlertColor, AlertTitle, AlertProps } from "@mui/material";
+import { Link } from "./Link";
+import { ScreenReaderText } from "./ScreenReaderText";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
+export const bannerRoleValues = ["status", "alert"] as const;
+export const bannerSeverityValues: AlertColor[] = [
+  "success",
+  "info",
+  "warning",
+  "error",
+];
+
 export type BannerProps = {
   /**
    * If linkUrl is not undefined, this is the text of the link.
@@ -42,11 +45,11 @@ export type BannerProps = {
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof bannerRoleValues)[number];
   /**
    * Determine the color and icon of the alert
    */
-  severity: AlertColor;
+  severity: (typeof bannerSeverityValues)[number];
   /**
    * The text content of the alert
    */
diff --git a/packages/odyssey-react-mui/src/Button.tsx b/packages/odyssey-react-mui/src/Button.tsx
index 3a259d16f7..ddceff5356 100644
--- a/packages/odyssey-react-mui/src/Button.tsx
+++ b/packages/odyssey-react-mui/src/Button.tsx
@@ -18,20 +18,28 @@ import { Icon } from "./Icon";
 import { MuiPropsContext } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 
+export const buttonSizeValues = ["small", "medium", "large"] as const;
+export const buttonVariantValues = [
+  "primary",
+  "secondary",
+  "danger",
+  "floating",
+] as const;
+
 export type ButtonProps = {
   endIcon?: ReactElement<typeof Icon>;
   id?: string;
   isDisabled?: boolean;
   isFullWidth?: boolean;
   onClick?: MuiButtonProps["onClick"];
-  size?: MuiButtonProps["size"];
+  size?: (typeof buttonSizeValues)[number];
   startIcon?: ReactElement<typeof Icon>;
   text?: string;
   /**
    * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
    */
   tooltipText?: string;
-  variant?: "primary" | "secondary" | "danger" | "floating";
+  variant: (typeof buttonVariantValues)[number];
   ariaLabel?: string;
   ariaLabelledBy?: string;
   ariaDescribedBy?: string;
diff --git a/packages/odyssey-react-mui/src/Field.tsx b/packages/odyssey-react-mui/src/Field.tsx
index 6a660abf38..8816939413 100644
--- a/packages/odyssey-react-mui/src/Field.tsx
+++ b/packages/odyssey-react-mui/src/Field.tsx
@@ -23,6 +23,8 @@ import { FieldLabel } from "./FieldLabel";
 import { useUniqueId } from "./useUniqueId";
 import { useTranslation } from "react-i18next";
 
+export const fieldTypeValues = ["single", "group"] as const;
+
 export type FieldProps = {
   /**
    * If `error` is not undefined, the `input` will indicate an error.
@@ -31,7 +33,7 @@ export type FieldProps = {
   /**
    * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).
    */
-  fieldType: "single" | "group";
+  fieldType: (typeof fieldTypeValues)[number];
   hasVisibleLabel: boolean;
   /**
    * The helper text content.
diff --git a/packages/odyssey-react-mui/src/Form.tsx b/packages/odyssey-react-mui/src/Form.tsx
index 65e9a3cc84..d28e11cceb 100644
--- a/packages/odyssey-react-mui/src/Form.tsx
+++ b/packages/odyssey-react-mui/src/Form.tsx
@@ -17,6 +17,15 @@ import { Button } from "./Button";
 import { Infobox } from "./Infobox";
 import { useUniqueId } from "./useUniqueId";
 
+export const formEncodingTypeValues = [
+  "application/x-www-form-urlencoded",
+  "application/json",
+  "multipart/form-data",
+  "text/plain",
+] as const;
+export const formAutoCompleteTypeValues = ["on", "off"] as const;
+export const formMethodValues = ["post", "get", "dialog"] as const;
+
 export type FormProps = {
   /**
    * The title of the Form
@@ -38,7 +47,7 @@ export type FormProps = {
    * Indicates whether input elements can by default have their values automatically completed by the browser.
    * `autocomplete` attributes on form elements override it on <form>
    */
-  hasAutoComplete?: "on" | "off" | undefined;
+  autoCompleteType?: (typeof formAutoCompleteTypeValues)[number];
   /**
    * The name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.
    */
@@ -53,21 +62,17 @@ export type FormProps = {
    * If the value of the method attribute is post, enctype is the MIME type of the form submission.
    * This value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements.
    */
-  encodingType?:
-    | "application/x-www-form-urlencoded"
-    | "multipart/form-data"
-    | "text/plain"
-    | undefined;
+  encodingType?: (typeof formEncodingTypeValues)[number];
   /**
    * The HTTP method to submit the form with.
    * This value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.
    */
-  method?: "post" | "get" | "dialog" | undefined;
+  method?: (typeof formMethodValues)[number];
   /**
    * Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context (for example, tab, window, or iframe).
    * This value can be overridden by a formtarget attribute on a <button>, <input type="submit">, or <input type="image"> element.
    */
-  target?: "post" | "get" | "dialog" | undefined;
+  target?: string;
   /**
    * The Field or FieldGroup components within the Form
    */
@@ -86,7 +91,7 @@ const Form = ({
   description,
   encodingType,
   formActions,
-  hasAutoComplete,
+  autoCompleteType,
   id: idOverride,
   method,
   name,
@@ -99,7 +104,7 @@ const Form = ({
   return (
     <Box
       component="form"
-      autoComplete={hasAutoComplete}
+      autoComplete={autoCompleteType}
       name={name}
       encType={encodingType}
       method={method}
diff --git a/packages/odyssey-react-mui/src/Icon.tsx b/packages/odyssey-react-mui/src/Icon.tsx
index fd10d157d3..9704d6633b 100644
--- a/packages/odyssey-react-mui/src/Icon.tsx
+++ b/packages/odyssey-react-mui/src/Icon.tsx
@@ -12,6 +12,8 @@
 
 import { iconDictionary } from "./iconDictionary";
 
+export const iconSizeValues = ["small", "medium", "large"] as const;
+
 export type IconProps = {
   /*
    ** The element whose text describes the icon, if it exists
@@ -28,7 +30,7 @@ export type IconProps = {
   /*
    ** The size of the icon
    */
-  size: "small" | "medium" | "large";
+  size: (typeof iconSizeValues)[number];
 };
 
 /**
diff --git a/packages/odyssey-react-mui/src/Infobox.tsx b/packages/odyssey-react-mui/src/Infobox.tsx
index 166fb84c39..c6ab6ccee6 100644
--- a/packages/odyssey-react-mui/src/Infobox.tsx
+++ b/packages/odyssey-react-mui/src/Infobox.tsx
@@ -10,12 +10,19 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertColor } from "@mui/material";
 import { memo, ReactNode } from "react";
 import { Alert, AlertTitle } from "@mui/material";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { useTranslation } from "react-i18next";
 
+export const infoboxRoleValues = ["status", "alert"] as const;
+export const infoboxSeverityValues = [
+  "success",
+  "info",
+  "warning",
+  "error",
+] as const;
+
 export type InfoboxProps = {
   /**
    * The contents of the alert
@@ -26,11 +33,11 @@ export type InfoboxProps = {
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof infoboxRoleValues)[number];
   /**
    * Determine the color and icon of the alert
    */
-  severity: AlertColor;
+  severity: (typeof infoboxSeverityValues)[number];
   /**
    * The title of the alert
    */
diff --git a/packages/odyssey-react-mui/src/Link.tsx b/packages/odyssey-react-mui/src/Link.tsx
index b60f9e1c18..760185f1bd 100644
--- a/packages/odyssey-react-mui/src/Link.tsx
+++ b/packages/odyssey-react-mui/src/Link.tsx
@@ -14,7 +14,9 @@ import { forwardRef, memo, ReactElement } from "react";
 
 import { ExternalLinkIcon } from "./iconDictionary";
 
-import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
+import { Link as MuiLink } from "@mui/material";
+
+export const linkVariantValues = ["default", "monochrome"] as const;
 
 export type LinkProps = {
   children: React.ReactNode;
@@ -22,7 +24,7 @@ export type LinkProps = {
   icon?: ReactElement;
   rel?: string;
   target?: "_self" | "_blank" | "_parent" | "_top" | string;
-  variant?: MuiLinkProps["variant"];
+  variant?: (typeof linkVariantValues)[number];
 };
 
 const Link = forwardRef<HTMLAnchorElement, LinkProps>(
diff --git a/packages/odyssey-react-mui/src/MenuButton.tsx b/packages/odyssey-react-mui/src/MenuButton.tsx
index 0bc8fa745e..618b996a8b 100644
--- a/packages/odyssey-react-mui/src/MenuButton.tsx
+++ b/packages/odyssey-react-mui/src/MenuButton.tsx
@@ -12,7 +12,7 @@
 
 import {
   Button,
-  ButtonProps,
+  buttonVariantValues,
   ChevronDownIcon,
   Divider,
   ListSubheader,
@@ -41,13 +41,13 @@ export type MenuButtonProps = {
   /**
    * The variant of the triggering Button
    */
-  buttonVariant?: ButtonProps["variant"];
+  buttonVariant?: (typeof buttonVariantValues)[number];
   /**
    * The end Icon on the trigggering Button
    */
   endIcon?: ReactElement;
   /**
-   * The id of the `input` element.
+   * The id of the button
    */
   id?: string;
   /**
diff --git a/packages/odyssey-react-mui/src/OdysseyCacheProvider.test.tsx b/packages/odyssey-react-mui/src/OdysseyCacheProvider.test.tsx
index ca62942fce..2756f51517 100644
--- a/packages/odyssey-react-mui/src/OdysseyCacheProvider.test.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyCacheProvider.test.tsx
@@ -29,7 +29,7 @@ describe("OdysseyCacheProvider", () => {
   it("themes a Button", () => {
     render(
       <OdysseyCacheProvider>
-        <Button text="text" />
+        <Button variant="primary" text="text" />
       </OdysseyCacheProvider>
     );
 
diff --git a/packages/odyssey-react-mui/src/Status.tsx b/packages/odyssey-react-mui/src/Status.tsx
index fa955adc0b..061722ae21 100644
--- a/packages/odyssey-react-mui/src/Status.tsx
+++ b/packages/odyssey-react-mui/src/Status.tsx
@@ -12,11 +12,19 @@
 
 import { Chip } from "@mui/material";
 
+export const statusSeverityValues = [
+  "default",
+  "error",
+  "success",
+  "warning",
+] as const;
+export const statusVariantValues = ["lamp", "pill"] as const;
+
 export type StatusProps = {
   /**
    * Determine the color and icon of the alert
    */
-  severity: "default" | "error" | "success" | "warning";
+  severity: (typeof statusSeverityValues)[number];
 
   /**
    * The text content of the status
@@ -26,7 +34,7 @@ export type StatusProps = {
   /**
    * The style of indicator
    */
-  variant?: "lamp" | "pill";
+  variant?: (typeof statusVariantValues)[number];
 };
 
 export const Status = ({ severity, label, variant = "lamp" }: StatusProps) => (
diff --git a/packages/odyssey-react-mui/src/TextField.tsx b/packages/odyssey-react-mui/src/TextField.tsx
index dbd906f9e9..7e56e83ad1 100644
--- a/packages/odyssey-react-mui/src/TextField.tsx
+++ b/packages/odyssey-react-mui/src/TextField.tsx
@@ -24,6 +24,14 @@ import {
 import { Field } from "./Field";
 import { Icon } from "./Icon";
 
+export const textFieldTypeValues = [
+  "email",
+  "number",
+  "tel",
+  "text",
+  "url",
+] as const;
+
 export type TextFieldProps = {
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
@@ -94,7 +102,7 @@ export type TextFieldProps = {
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    */
-  type?: "email" | "number" | "tel" | "text" | "url";
+  type?: (typeof textFieldTypeValues)[number];
   /**
    * The value of the `input` element, required for a controlled component.
    */
diff --git a/packages/odyssey-react-mui/src/Toast.tsx b/packages/odyssey-react-mui/src/Toast.tsx
index a97b2d654c..d24b15dfc4 100644
--- a/packages/odyssey-react-mui/src/Toast.tsx
+++ b/packages/odyssey-react-mui/src/Toast.tsx
@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertColor } from "@mui/material";
 import { useEffect, memo, useState, useCallback } from "react";
 import { Alert, AlertTitle, Snackbar } from "@mui/material";
 import { visuallyHidden } from "@mui/utils";
@@ -19,6 +18,14 @@ import { CloseIcon } from "./iconDictionary";
 import { Button } from "./Button";
 import { useTranslation } from "react-i18next";
 
+export const toastRoleValues = ["status", "alert"] as const;
+export const toastSeverityValues = [
+  "success",
+  "info",
+  "warning",
+  "error",
+] as const;
+
 export type ToastProps = {
   /**
    * If set, this determines how long the toast should appear before automatically disappearing in milliseconds.
@@ -53,11 +60,11 @@ export type ToastProps = {
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof toastRoleValues)[number];
   /**
    * Determine the color and icon of the alert
    */
-  severity: AlertColor;
+  severity: (typeof toastSeverityValues)[number];
   /**
    * The text content of the alert
    */
diff --git a/packages/odyssey-storybook/.storybook/components/iconUtils.tsx b/packages/odyssey-storybook/.storybook/components/iconUtils.tsx
new file mode 100644
index 0000000000..ca96aefc12
--- /dev/null
+++ b/packages/odyssey-storybook/.storybook/components/iconUtils.tsx
@@ -0,0 +1,170 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  AddCircleIcon,
+  AddIcon,
+  AppsIcon,
+  ArrowDownIcon,
+  ArrowLeftIcon,
+  ArrowLowerLeftIcon,
+  ArrowLowerRightIcon,
+  ArrowRightIcon,
+  ArrowUnsortedIcon,
+  ArrowUpIcon,
+  ArrowUpperLeftIcon,
+  ArrowUpperRightIcon,
+  BugIcon,
+  CalendarIcon,
+  CallIcon,
+  ChatIcon,
+  CheckCircleFilledIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  ClockIcon,
+  CloseCircleFilledIcon,
+  CloseIcon,
+  CollapseLeftIcon,
+  CollapseRightIcon,
+  CopyIcon,
+  DangerDiamondFilledIcon,
+  DangerDiamondIcon,
+  DeleteIcon,
+  DenyIcon,
+  DevicesIcon,
+  DirectoryIcon,
+  DocumentationIcon,
+  DownloadIcon,
+  DragIndicatorIcon,
+  EditIcon,
+  ExpandLeftIcon,
+  ExpandRightIcon,
+  ExternalLinkIcon,
+  FilterIcon,
+  FolderIcon,
+  GlobeIcon,
+  GridIcon,
+  GroupIcon,
+  HideIcon,
+  HomeIcon,
+  InformationCircleFilledIcon,
+  InformationCircleIcon,
+  LinkIcon,
+  ListIcon,
+  LockIcon,
+  MoreIcon,
+  NotificationIcon,
+  PauseIcon,
+  QuestionCircleFilledIcon,
+  QuestionCircleIcon,
+  RefreshIcon,
+  ResetIcon,
+  ResumeIcon,
+  SearchIcon,
+  ServerIcon,
+  SettingsIcon,
+  ShowIcon,
+  SubtractIcon,
+  SyncIcon,
+  UnlockIcon,
+  UploadIcon,
+  UserIcon,
+  VideoIcon,
+  WarningFilledIcon,
+  WarningIcon,
+} from "@okta/odyssey-react-mui";
+import { ReactElement, createElement } from "react";
+
+export const icons: { [key: string]: ReactElement } = [
+  AddCircleIcon,
+  AddIcon,
+  AppsIcon,
+  ArrowDownIcon,
+  ArrowLeftIcon,
+  ArrowLowerLeftIcon,
+  ArrowLowerRightIcon,
+  ArrowRightIcon,
+  ArrowUnsortedIcon,
+  ArrowUpIcon,
+  ArrowUpperLeftIcon,
+  ArrowUpperRightIcon,
+  BugIcon,
+  CalendarIcon,
+  CallIcon,
+  ChatIcon,
+  CheckCircleFilledIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  ClockIcon,
+  CloseCircleFilledIcon,
+  CloseIcon,
+  CollapseLeftIcon,
+  CollapseRightIcon,
+  CopyIcon,
+  DangerDiamondFilledIcon,
+  DangerDiamondIcon,
+  DeleteIcon,
+  DenyIcon,
+  DevicesIcon,
+  DirectoryIcon,
+  DocumentationIcon,
+  DownloadIcon,
+  DragIndicatorIcon,
+  EditIcon,
+  ExpandLeftIcon,
+  ExpandRightIcon,
+  ExternalLinkIcon,
+  FilterIcon,
+  FolderIcon,
+  GlobeIcon,
+  GridIcon,
+  GroupIcon,
+  HideIcon,
+  HomeIcon,
+  InformationCircleFilledIcon,
+  InformationCircleIcon,
+  LinkIcon,
+  ListIcon,
+  LockIcon,
+  MoreIcon,
+  NotificationIcon,
+  PauseIcon,
+  QuestionCircleFilledIcon,
+  QuestionCircleIcon,
+  RefreshIcon,
+  ResetIcon,
+  ResumeIcon,
+  SearchIcon,
+  ServerIcon,
+  SettingsIcon,
+  ShowIcon,
+  SubtractIcon,
+  SyncIcon,
+  UnlockIcon,
+  UploadIcon,
+  UserIcon,
+  VideoIcon,
+  WarningFilledIcon,
+  WarningIcon,
+].reduce(
+  (icons: { [key: string]: ReactElement }, iconComponent) => ({
+    ...icons,
+    [iconComponent.displayName as string]: createElement(iconComponent),
+  }),
+  {}
+);
diff --git a/packages/odyssey-storybook/.storybook/preview.ts b/packages/odyssey-storybook/.storybook/preview.ts
index 44d0facf8e..e218726403 100644
--- a/packages/odyssey-storybook/.storybook/preview.ts
+++ b/packages/odyssey-storybook/.storybook/preview.ts
@@ -60,6 +60,12 @@ const preview: Preview = {
       source: {
         excludeDecorators: true,
       },
+      argTypes: {
+        sort: "alpha",
+      },
+      controls: {
+        sort: "alpha",
+      },
     },
   },
 };
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.mdx b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.mdx
deleted file mode 100644
index a610d434cf..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs";
-import * as Stories from "./DatePicker.stories.tsx";
-
-<Meta title="Labs Components/DatePicker" anchor />
-
-# DatePicker
-
-A way to choose dates.
-
-## Behavior
-
-Click it, choose a date.
-
-### Standard
-
-Use our default DatePicker for choosing a date. For example, “10/17/2022".
-
-<Canvas>
-  <Story of={Stories.DatePickerStandard} />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx
index a003ff25bb..173358f8ed 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx
@@ -40,6 +40,7 @@ const storybookMeta: Meta<DatePickerProps<unknown, unknown>> = {
     },
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
deleted file mode 100644
index 6b01c7ccf4..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./Autocomplete.stories";
-
-<Meta title="MUI Components/Forms/Autocomplete" anchor />
-
-# Autocomplete
-
-Similar to [Select](?path=/docs/mui-components-forms-select--default), this input triggers a menu of options a user can select. Country and state Autocompletes are common examples.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-## Behavior
-
-Interacting with an Autocomplete displays a list of values to choose from. Users may filter the options list by typing.
-
-## Variants
-
-Odyssey provides support for both single and multi-value Autocompletes.
-
-### Single-select
-
-With the single-select variant, choosing a value will override any previous selection and close the Autocomplete.
-
-#### Enabled
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-#### Disabled
-
-<Canvas>
-  <Story of={Stories.Disabled} />
-</Canvas>
-
-#### Read-only
-
-<Canvas>
-  <Story of={Stories.ReadOnly} />
-</Canvas>
-
-### Multi-Select
-
-The multi-Select variant allows users to select many values.
-
-#### Enabled
-
-<Canvas>
-  <Story of={Stories.Multiple} />
-</Canvas>
-
-#### Disabled
-
-<Canvas>
-  <Story of={Stories.MultipleDisabled} />
-</Canvas>
-
-#### Read-only
-
-<Canvas>
-  <Story of={Stories.MultipleReadOnly} />
-</Canvas>
-
-## Loading state
-
-The loading state is displayed when retrieving values from the server or when data is unavailable.
-
-<Canvas>
-  <Story of={Stories.Loading} />
-</Canvas>
-
-## Custom Values
-
-Autocomplete also supports user-submitted values via the `isCustomValueAllowed` prop.
-
-<Canvas>
-  <Story of={Stories.IsCustomValueAllowed} />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index 4d97632fee..156b43044f 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -18,8 +18,6 @@ import { axeRun } from "../../../axe-util";
 import { expect } from "@storybook/jest";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 
-type StationType = { label: string };
-
 const stations: ReadonlyArray<StationType> = [
   { label: "Anderson Station" },
   { label: "Bara Gaon Complex" },
@@ -52,26 +50,109 @@ const storybookMeta: Meta<typeof Autocomplete> = {
   title: "MUI Components/Forms/Autocomplete",
   component: Autocomplete,
   argTypes: {
-    label: {
-      control: "text",
+    hasMultipleChoices: {
+      control: "boolean",
+      description: "Enables multiple choice selection",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     hint: {
       control: "text",
-    },
-    isDisabled: {
-      control: "boolean",
+      description: "The hint text for the autocomplete input",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     isCustomValueAllowed: {
       control: "boolean",
+      description: "Allows the input of custom values",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
-    isLoading: {
+    isDisabled: {
       control: "boolean",
+      description: "Disables the autocomplete input",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
-    hasMultipleChoices: {
+    isLoading: {
       control: "boolean",
+      description: "Displays a loading indicator",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     isReadOnly: {
       control: "boolean",
+      description: "Makes the autocomplete input read-only",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    label: {
+      control: "text",
+      description: "The label text for the autocomplete input",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    onChange: {
+      control: null,
+      description:
+        "Callback fired when the value of the autocomplete input changes",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
+    },
+    onInputChange: {
+      control: null,
+      description:
+        "Callback fired when the input value of the autocomplete input changes",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
+    },
+    options: {
+      control: null,
+      description: "The options for the autocomplete input",
+      table: {
+        type: {
+          summary:
+            "Array<OptionType> | GroupedOptionType<OptionType>[] | Promise<Array<OptionType> | GroupedOptionType<OptionType>[]>",
+        },
+      },
+    },
+    value: {
+      control: null,
+      description: "The value of the autocomplete input",
+      table: {
+        type: {
+          summary: "OptionType | OptionType[]",
+        },
+      },
     },
   },
   args: {
@@ -80,10 +161,12 @@ const storybookMeta: Meta<typeof Autocomplete> = {
     options: stations,
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
 
+type StationType = { label: string };
 type AutocompleteType = AutocompleteProps<
   StationType | undefined,
   boolean | undefined,
@@ -132,6 +215,15 @@ export const Disabled: StoryObj<AutocompleteType> = {
 };
 
 export const IsCustomValueAllowed: StoryObj<AutocompleteType> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Autocomplete supports user-submitted values via the `isCustomValueAllowed` prop.",
+      },
+    },
+  },
+  ...Default,
   args: {
     isCustomValueAllowed: true,
   },
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx
deleted file mode 100644
index cc0dd8b5f0..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as BannerStories from "./Banner.stories";
-
-<Meta title="MUI Components/Alerts/Banner" anchor />
-
-# Banner
-
-Banners let users know important messages related to their overall experience on the website. They can be purely informational messages or critical errors to act upon.
-
-## Behavior
-
-Banners must be present on load and should not be trigged asynchronously, as they may not be visible. These alerts are not transient, but may be dismissed by the user.
-
-They are best used to indicate global states or errors that effect an entire product.
-
-## Variants
-
-### Info
-
-Use Info Banners to surface neutral information or broad announcements to users.
-
-<Canvas>
-  <Story of={BannerStories.InfoBanner} />
-</Canvas>
-
-### Error
-
-Use Error Banners to inform users that a system-wide error has occurred. You may also inform a user when access is about to be lost.
-
-Include guidance to make sure users know what steps to take to address the error or avoid the threat.
-
-<Canvas>
-  <Story of={BannerStories.ErrorBanner} />
-</Canvas>
-
-### Warning
-
-Use Warning Banners to inform users of tasks or processes that may need their attention.
-
-When using the Warning variant, ensure the user does not need more context than you can give in the space available.
-
-<Canvas>
-  <Story of={BannerStories.WarningBanner} />
-</Canvas>
-
-## Usage
-
-In addition to the required content and placement, Banners have two optional features: Actions, and Dismissing.
-
-### Actions
-
-It's often useful to direct users toward an appropriate action, especially for fixing errors. Please utilize <a href="?path=/docs/components-link--monochrome">Link</a> for these actions. If it's necessary to provide the user with an action, please direct them to the appropriate flow instead of beginning a new process inline.
-
-<Canvas>
-  <Story of={BannerStories.BannerWithLink} />
-</Canvas>
-
-### Dismissal
-
-Banners support dismissal for messages that do not persist or only require a one-time acknowledgement.
-
-<Canvas>
-  <Story of={BannerStories.DismissibleBanner} />
-</Canvas>
-
-## Content Guidelines
-
-Banner content should be succinct and direct. If possible, your content should be limited to a single line, which wraps around 80 characters. Banner content will also be visible on mobile.
-
-When including an action, be sure the link text clearly indicates where it leads.
-
-## References
-
-<figure className="ods-table--figure">
-  <figcaption className="ods-table--figcaption">Related Components</figcaption>
-  <table className="ods-table">
-    <caption>Differences between the available alert components</caption>
-    <thead>
-      <tr>
-        <th scope="column">Component</th>
-        <th scope="column">Available Variants</th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-dynamic">Dynamic</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-dynamic"
-              role="tooltip"
-            >
-              May be inserted after page load
-            </aside>
-          </span>
-        </th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-transient">Transient</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-transient"
-              role="tooltip"
-            >
-              Disappears without user interaction
-            </aside>
-          </span>
-        </th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-dismissible">Dismissible</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-dismissible"
-              role="tooltip"
-            >
-              May be dismissed by the user
-            </aside>
-          </span>
-        </th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-actionable">Actionable</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-actionable"
-              role="tooltip"
-            >
-              May include actions or links
-            </aside>
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">Banner</th>
-        <td>Info, Warning, Error</td>
-        <td>No</td>
-        <td>No</td>
-        <td>Yes</td>
-        <td>Yes</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <a href="?path=/docs/mui-components-alerts-infobox--info#infobox">
-            Infobox
-          </a>
-        </th>
-        <td>Info, Success, Warning, Error</td>
-        <td>Yes</td>
-        <td>No</td>
-        <td>No</td>
-        <td>Yes</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <a href="?path=/docs/components-alerts-toast--info#toast">Toast</a>
-        </th>
-        <td>Info, Success, Warning, Error</td>
-        <td>Yes</td>
-        <td>Yes</td>
-        <td>No</td>
-        <td>No</td>
-      </tr>
-    </tbody>
-  </table>
-</figure>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.stories.tsx
index 7a5be46150..e940e9131e 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.stories.tsx
@@ -10,7 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Banner, BannerProps } from "@okta/odyssey-react-mui";
+import {
+  Banner,
+  BannerProps,
+  bannerRoleValues,
+  bannerSeverityValues,
+} from "@okta/odyssey-react-mui";
 import { Meta, StoryObj } from "@storybook/react";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -24,25 +29,63 @@ const storybookMeta: Meta<typeof Banner> = {
   argTypes: {
     linkText: {
       control: "text",
+      description:
+        "If linkUrl is defined, this is the text of the link. If left blank, it defaults to 'Learn more'. Note that linkText does nothing if linkUrl is not defined",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     linkUrl: {
       control: "text",
+      description: "If defined, the alert will include a link to the URL",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     onClose: {
-      action: "closed",
+      control: null,
+      description:
+        "The function that's fired when the user clicks the close button. If undefined, the close button will not be shown",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
     },
     role: {
-      control: "radio",
-      options: ["status", undefined],
+      options: bannerRoleValues,
+      control: { type: "radio" },
+      description:
+        "Sets the ARIA role of the alert ('status' for something that dynamically updates, 'alert' for errors, null for something unchanging)",
+      table: {
+        type: {
+          summary: bannerRoleValues.join(" | "),
+        },
+      },
     },
     severity: {
-      control: "radio",
-      options: ["error", "info", "warning"],
-      defaultValue: "info",
+      options: bannerSeverityValues,
+      control: { type: "radio" },
+      description: "Determine the color and icon of the alert",
+      table: {
+        type: {
+          summary: bannerSeverityValues.join(" | "),
+        },
+      },
     },
     text: {
       control: "text",
-      defaultValue: "The mission to Sagittarius A is set for January 7.",
+      description: "The text content of the alert",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
@@ -51,18 +94,19 @@ const storybookMeta: Meta<typeof Banner> = {
     onClose: undefined,
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
 
-export const InfoBanner: StoryObj<BannerProps> = {
+export const Info: StoryObj<BannerProps> = {
   args: {
     severity: "info",
     text: "The mission to Sagittarius A is set for January 7.",
   },
 };
 
-export const ErrorBanner: StoryObj<BannerProps> = {
+export const Error: StoryObj<BannerProps> = {
   args: {
     role: "status",
     severity: "error",
@@ -70,7 +114,7 @@ export const ErrorBanner: StoryObj<BannerProps> = {
   },
 };
 
-export const WarningBanner: StoryObj<BannerProps> = {
+export const Warning: StoryObj<BannerProps> = {
   args: {
     role: "status",
     severity: "warning",
@@ -78,7 +122,7 @@ export const WarningBanner: StoryObj<BannerProps> = {
   },
 };
 
-export const BannerWithLink: StoryObj<BannerProps> = {
+export const Linked: StoryObj<BannerProps> = {
   args: {
     linkText: "View report",
     linkUrl: "#anchor",
@@ -96,7 +140,7 @@ export const BannerWithLink: StoryObj<BannerProps> = {
   },
 };
 
-export const DismissibleBanner: StoryObj<BannerProps> = {
+export const Dismissible: StoryObj<BannerProps> = {
   args: {
     onClose: jest.fn(),
   },
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.mdx
deleted file mode 100644
index b84f07e275..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as ButtonStories from "./Button.stories";
-
-<Meta title="MUI Components/Button" anchor />
-
-# Button
-
-A clickable button used for form submissions and most in-page interactions.
-
-## Behavior
-
-Visually, a Button is a rounded rectangle with a descriptive caption at its center. Users interact with Buttons via both pointer devices and keystrokes.
-
-## Variants
-
-In Odyssey there are five Button variants: Primary, Secondary, Danger, and Floating.
-
-### Primary
-
-Use our default Button for primary actions in a view. For example, “Save”.
-
-It's ideal to have one Primary Button per view. However, it's okay to have more than one Primary Button as long that they are equal in priority.
-
-<Canvas>
-  <Story of={ButtonStories.ButtonPrimary} />
-</Canvas>
-
-### Secondary
-
-This is ideal for a secondary actions to compliment the Primary Button. Like the Primary Button, use this Button sparingly to provide focus to the user.
-
-<Canvas>
-  <Story of={ButtonStories.ButtonSecondary} />
-</Canvas>
-
-### Danger
-
-Use Danger Buttons for scenarios where a user may be deleting information or making a decision that can not be reversed.
-
-<Canvas>
-  <Story of={ButtonStories.ButtonDanger} />
-</Canvas>
-
-### Floating
-
-Use Floating Buttons for interactions that change visible UI but don't submit data. For example, showing a password field or dismissing a modal.
-
-They pair well with Primary and Secondary Buttons.
-
-<Canvas>
-  <Story of={ButtonStories.ButtonFloating} />
-</Canvas>
-
-## Sizes
-
-We offer three sizes of Buttons for use: Small, Medium, and Large. Full-width buttons are also available.
-
-In order to provide a sufficient click area, all Button labels have a minimum width equal to twice the line-height.
-
-### Small
-
-Small Buttons are best used for actions within Table rows. Their font-size is descreased while keeping padding proportional to our medium size.
-
-<Canvas>
-  <Story of={ButtonStories.ButtonSmall} />
-
-</Canvas>
-
-### Medium
-
-Our default size, medium Buttons are built for use in most contexts.
-
-<Canvas>
-  <Story of={ButtonStories.ButtonMedium} />
-</Canvas>
-
-### Large
-
-Large Buttons incease their padding, but not their font size. They're intended for single-interaction UIs like logging in.
-
-<Canvas>
-  <Story of={ButtonStories.ButtonLarge} />
-</Canvas>
-
-### Full-width
-
-Full-width Buttons are intended for single-interaction UIs. These are often widgets like "Sign In" or "Sign Up".
-
-Use this variant when you desire the Button to be full-width regardless of screen size.
-
-<Canvas>
-  <Story of={ButtonStories.ButtonFullWidth} />
-</Canvas>
-
-## States
-
-Odyssey provides visual affordances these states: Enabled, Focus, Hover, and Disabled.
-
-### Disabled
-
-Disabled Buttons are unavailable for interaction and cannot be focused. They can be used when an action is unavailable, possibly due to incomplete information or access restrictions.
-
-You should pair Disabled Buttons with a Tooltip if the user would benefit from additional context.
-
-<Canvas>
-  <Story of={ButtonStories.ButtonPrimaryDisabled} />
-</Canvas>
-
-## Icons
-
-<Canvas>
-  <Story of={ButtonStories.ButtonWithIcon} />
-</Canvas>
-
-<Canvas>
-  <Story of={ButtonStories.IconOnly} />
-</Canvas>
-
-## References
-
-- [Button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) - MDN
-- [Accessible Icon Buttons](https://www.sarasoueidan.com/blog/accessible-icon-buttons/) - Sara Soueidan
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx
index f1802456f2..d8930448ad 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx
@@ -12,9 +12,15 @@
 
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button, AddIcon } from "@okta/odyssey-react-mui";
+import {
+  Button,
+  buttonSizeValues,
+  buttonVariantValues,
+  AddIcon,
+} from "@okta/odyssey-react-mui";
 import type { ButtonProps } from "@okta/odyssey-react-mui";
 import { MuiThemeDecorator } from "../../../../.storybook/components/MuiThemeDecorator";
+import { icons } from "../../../../.storybook/components/iconUtils";
 
 import { userEvent, waitFor, within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
@@ -27,29 +33,120 @@ const storybookMeta: Meta<ButtonProps> = {
   argTypes: {
     isDisabled: {
       control: "boolean",
+      description: "If `true`, the button is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: "",
+      },
     },
     isFullWidth: {
       control: "boolean",
+      description:
+        "If `true`, the button will take up the full width available",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     size: {
-      options: ["small", "medium", "large"],
+      options: buttonSizeValues,
       control: { type: "radio" },
+      description: "The size of the button",
+      table: {
+        type: {
+          summary: buttonSizeValues.join(" | "),
+        },
+        defaultValue: {
+          summary: "medium",
+        },
+      },
     },
     startIcon: {
-      control: "object",
+      control: {
+        type: "select",
+      },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display at the start of the button",
+      table: {
+        type: {
+          summary: "<Icon />",
+        },
+        defaultValue: "",
+      },
+    },
+    endIcon: {
+      control: {
+        type: "select",
+      },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display at the end of the button",
+      table: {
+        type: {
+          summary: "<Icon />",
+        },
+        defaultValue: "",
+      },
+    },
+    id: {
+      control: null,
+      description: "An optional ID for the button",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: "",
+      },
     },
     text: {
       control: "text",
+      description:
+        "The button text. If blank, the button must include an icon.",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: "",
+      },
     },
     tooltipText: {
       control: "text",
+      description:
+        "If defined, the button will include a tooltip that contains the string.",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: "",
+      },
     },
     variant: {
-      options: ["primary", "secondary", "danger", "floating"],
+      options: buttonVariantValues,
       control: { type: "radio" },
+      description: "The color and style of the button",
+      defaultValue: "secondary",
+      table: {
+        type: {
+          summary: buttonVariantValues.join(" | "),
+        },
+        defaultValue: {
+          summary: "secondary",
+        },
+      },
     },
     onClick: {
       action: true,
+      description: "Callback fired when the button is clicked",
+      table: {
+        type: {
+          summary: "(() => void)",
+        },
+        defaultValue: "",
+      },
     },
   },
   args: {
@@ -57,6 +154,7 @@ const storybookMeta: Meta<ButtonProps> = {
     variant: "primary",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
@@ -88,6 +186,7 @@ const interactWithButton =
   };
 
 export const ButtonPrimary: StoryObj<ButtonProps> = {
+  name: "Primary",
   play: async ({ args, canvasElement, step }) => {
     interactWithButton({ canvasElement, step })({
       args,
@@ -98,6 +197,7 @@ export const ButtonPrimary: StoryObj<ButtonProps> = {
 };
 
 export const ButtonSecondary: StoryObj<ButtonProps> = {
+  name: "Secondary",
   args: {
     text: "Add crew",
     variant: "secondary",
@@ -112,6 +212,7 @@ export const ButtonSecondary: StoryObj<ButtonProps> = {
 };
 
 export const ButtonDanger: StoryObj<ButtonProps> = {
+  name: "Danger",
   args: {
     text: "Add crew",
     variant: "danger",
@@ -126,6 +227,7 @@ export const ButtonDanger: StoryObj<ButtonProps> = {
 };
 
 export const ButtonFloating: StoryObj<ButtonProps> = {
+  name: "Floating",
   args: {
     text: "Add crew",
     variant: "floating",
@@ -140,6 +242,7 @@ export const ButtonFloating: StoryObj<ButtonProps> = {
 };
 
 export const ButtonSmall: StoryObj<ButtonProps> = {
+  name: "Small",
   args: {
     text: "Add crew",
     size: "small",
@@ -154,6 +257,7 @@ export const ButtonSmall: StoryObj<ButtonProps> = {
 };
 
 export const ButtonMedium: StoryObj<ButtonProps> = {
+  name: "Medium",
   args: {
     text: "Add crew",
     size: "medium",
@@ -169,6 +273,7 @@ export const ButtonMedium: StoryObj<ButtonProps> = {
 };
 
 export const ButtonLarge: StoryObj<ButtonProps> = {
+  name: "Large",
   args: {
     text: "Add crew",
     size: "large",
@@ -184,6 +289,7 @@ export const ButtonLarge: StoryObj<ButtonProps> = {
 };
 
 export const ButtonFullWidth: StoryObj<ButtonProps> = {
+  name: "Full-width",
   args: {
     text: "Add crew",
     isFullWidth: true,
@@ -199,6 +305,15 @@ export const ButtonFullWidth: StoryObj<ButtonProps> = {
 };
 
 export const ButtonPrimaryDisabled: StoryObj<ButtonProps> = {
+  name: "Disabled",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Disabled buttons should be paired with a Tooltip to provide additional context. A tooltip can be added by setting the `tooltipText` prop on the button to a string.",
+      },
+    },
+  },
   args: {
     text: "Add crew",
     isDisabled: true,
@@ -206,6 +321,7 @@ export const ButtonPrimaryDisabled: StoryObj<ButtonProps> = {
 };
 
 export const ButtonWithIcon: StoryObj<ButtonProps> = {
+  name: "Icon",
   args: {
     text: "Add crew",
     startIcon: <AddIcon />,
@@ -220,6 +336,15 @@ export const ButtonWithIcon: StoryObj<ButtonProps> = {
 };
 
 export const IconOnly: StoryObj<ButtonProps> = {
+  name: "Icon-only",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Icon-only buttons should be paired with a Tooltip to provide additional context. A tooltip can be added by setting the `tooltipText` prop on the button to a string.",
+      },
+    },
+  },
   args: {
     startIcon: <AddIcon />,
     ariaLabel: "Add crew",
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.mdx
deleted file mode 100644
index 9861be2cde..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as CheckboxStories from "./Checkbox.stories";
-
-<Meta title="MUI Components/Forms/Checkbox" anchor />
-
-# Checkbox
-
-Checkboxes appear as a square shaped UI accompanied by a caption. Checkboxes can be found in tables, forms, or in and around text inputs.
-
-<Canvas>
-  <Story of={CheckboxStories.Default} />
-</Canvas>
-
-## Required checkboxes
-
-Checkboxes are optional by default, and there are few circumstances in which a checkbox is required. Odyssey provides an `isRequired` boolean that, when set to `true`, makes the checkbox required. Note that when a checkbox is required, it must be checked for the form to submit, so this is only appropriate for checkboxes that must be checked to continue, such as a confirmation.
-
-<Canvas>
-  <Story of={CheckboxStories.Required} />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx
index 1df8015edb..e1b634488b 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx
@@ -22,27 +22,119 @@ const storybookMeta: Meta<CheckboxProps> = {
   title: "MUI Components/Forms/Checkbox",
   component: Checkbox,
   argTypes: {
-    label: {
+    ariaLabel: {
       control: "text",
+      description: "Aria-label for the checkbox",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    name: {
+    ariaLabelledBy: {
       control: "text",
+      description: "Aria-labelledby for the checkbox",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    isInvalid: {
+      control: "boolean",
+      description:
+        "If `true`, indicates that the checkbox has an invalid value",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    isValid: {
+      control: "boolean",
+      description: "If `true`, indicates that the checkbox has a valid value",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    isChecked: {
+      control: "boolean",
+      description: "If `true`, the checkbox is checked",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "If `true`, the checkbox is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     isIndeterminate: {
       control: "boolean",
+      description: "If `true`, the checkbox is in an indeterminate state",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     isRequired: {
       control: "boolean",
-      defaultValue: false,
+      description: "If `true`, the checkbox is required",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    label: {
+      control: "text",
+      description: "The label text for the checkbox",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    name: {
+      control: "text",
+      description: "The name attribute of the checkbox",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     onChange: {
-      control: "function",
+      control: null,
+      description: "Callback fired when the checkbox value changes",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
     },
     value: {
       control: "text",
+      description: "The value attribute of the checkbox",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
@@ -72,6 +164,14 @@ export const Default: StoryObj<CheckboxProps> = {
 };
 
 export const Required: StoryObj<CheckboxProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Checkboxes are optional by default, and there are few circumstances in which a checkbox is required. Odyssey provides an `isRequired` boolean that, when set to `true`, makes the checkbox required. Note that when a checkbox is required, it must be checked for the form to submit, so this is only appropriate for checkboxes that must be checked to continue, such as a confirmation.",
+      },
+    },
+  },
   args: {
     label: "I agree to the terms and conditions",
     isRequired: true,
@@ -80,3 +180,57 @@ export const Required: StoryObj<CheckboxProps> = {
     checkTheBox({ canvasElement, step })("Checkbox Required");
   },
 };
+
+export const Checked: StoryObj<CheckboxProps> = {
+  args: {
+    label: "Pre-flight systems check complete",
+    isChecked: true,
+  },
+  play: async ({ canvasElement, step }) => {
+    checkTheBox({ canvasElement, step })("Checkbox Checked");
+  },
+};
+
+export const Disabled: StoryObj<CheckboxProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Checkboxes may be disabled individually or as a group. The values of disabled inputs will not be submitted.",
+      },
+    },
+  },
+  args: {
+    label: "Pre-flight systems check complete",
+    isDisabled: true,
+  },
+};
+
+export const Indeterminate: StoryObj<CheckboxProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "In the case of nested checkboxes, an indeterminate state may be required. Note that this state is visual- only and will be submitted as either checked or unchecked depending on the internal state.",
+      },
+    },
+  },
+  args: {
+    label: "Pre-flight systems check complete",
+    isIndeterminate: true,
+    isChecked: true,
+  },
+  play: async ({ canvasElement, step }) => {
+    checkTheBox({ canvasElement, step })("Checkbox Indeterminate");
+  },
+};
+
+export const Invalid: StoryObj<CheckboxProps> = {
+  args: {
+    label: "Pre-flight systems check complete",
+    isInvalid: true,
+  },
+  play: async ({ canvasElement, step }) => {
+    checkTheBox({ canvasElement, step })("Checkbox Disabled");
+  },
+};
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/CheckboxGroup/CheckboxGroup.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/CheckboxGroup/CheckboxGroup.mdx
deleted file mode 100644
index 3e46afaafb..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/CheckboxGroup/CheckboxGroup.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./CheckboxGroup.stories";
-
-<Meta title="MUI Components/Forms/CheckboxGroup" anchor />
-
-# Checkbox Group
-
-Checkboxes appear as a square shaped UI accompanied by a caption. Checkboxes can be found in tables, forms, or in and around text inputs.
-
-## Behavior
-
-Users can click a Checkbox to make a choice and click it again to deselect an option. They allow users to select one or more options of something.
-
-Checkboxes may appear individually or as a group.
-
-<Canvas>
-  <Story of={Stories.Single} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Group} />
-</Canvas>
-
-### Required Checkboxes
-
-Unlike other inputs, Odyssey assumes Checkboxes are optional by default.
-
-Individual checkboxes can be set to required. This is useful when a user confirms they have read the terms of service.
-
-## States
-
-Checkboxes support several states: enabled, hover, focus, disabled, invalid, required, and indeterminate.
-
-### Enabled
-
-Checkboxes in their "unchecked" state are considered enabled. They are ready for user interaction.
-
-<Canvas>
-  <Story of={Stories.Group} />
-</Canvas>
-
-### Checked
-
-Checked Checkboxes, sometimes referred to as "ticked", display a check to indicate the they are selected.
-
-<Canvas>
-  <Story of={Stories.Checked} />
-</Canvas>
-
-### Disabled
-
-Disabled inputs are unavailable for interaction and cannot be focused. They can be used when input is disallowed, possibly due to a system state or access restrictions.
-
-Checkboxes may be disabled individually or as a group. The values of disabled inputs will not be submitted.
-
-<Canvas>
-  <Story of={Stories.Disabled} />
-</Canvas>
-
-### Invalid
-
-Checkboxes present as invalid when a required input is left unchecked or an incompatible choice has been made.
-
-When indicating a validation error, please use FormHelperText set to `error` to indicate the nature of the problem. Color alone is not an accessible way to signify that something has gone wrong.
-
-Unlike Radio Buttons, Checkboxes validate individually, not as a group. Validity must be set individually on each checkbox using the `isInvalid` prop, even if the group has an `errorMessage` set.
-
-<Canvas>
-  <Story of={Stories.Error} />
-</Canvas>
-
-Individual checkboxes can take a different validity than the whole group; if a group is invalid, individual checkboxes can be marked valid, and vice versa. This is particularly useful in cases
-where the state of particular checkboxes affect the validity of the entire group.
-
-<Canvas>
-  <Story of={Stories.MixedError} />
-</Canvas>
-
-### Indeterminate
-
-In the case of nested checkboxes, an indeterminate state may be required.
-
-Note that this state is visual-only and will be submitted as either "checked" or "unchecked" depending on the internal state.
-
-<Canvas>
-  <Story of={Stories.Indeterminate} />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/CheckboxGroup/CheckboxGroup.stories.tsx
index 960eef2b53..ccdc1a49ff 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/CheckboxGroup/CheckboxGroup.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -28,89 +28,78 @@ const storybookMeta: Meta<CheckboxGroupStoryProps> = {
   title: "MUI Components/Forms/CheckboxGroup",
   component: CheckboxGroup,
   argTypes: {
-    isChecked: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    isDisabled: {
-      control: "boolean",
-      defaultValue: false,
+    children: {
+      control: null,
+      description: "A single Checkbox element or an array of Checkbox elements",
+      table: {
+        type: {
+          summary:
+            "ReactElement<typeof Checkbox> | Array<ReactElement<typeof Checkbox>>",
+        },
+      },
     },
     errorMessage: {
       control: "text",
-      defaultValue: null,
+      description: "The error message for the checkbox group",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     hint: {
       control: "text",
-      defaultValue:
-        "Ensure these systems are operating before initiating warp.",
+      description: "The hint text for the checkbox group",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    id: {
+      control: "text",
+      description:
+        "The id of the `input` element. This will also be the input's `name` field",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    isIndeterminate: {
+    isDisabled: {
       control: "boolean",
-      defaultValue: false,
+      description: "If `true`, the checkbox group is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     isRequired: {
       control: "boolean",
-      defaultValue: false,
+      description: "If `true`, the checkbox group is required",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     label: {
       control: "text",
-      defaultValue: "Systems check",
+      description: "The label text for the checkbox group",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
 
-const SingleTemplate: StoryObj<CheckboxGroupStoryProps> = {
-  render: (args) => (
-    <CheckboxGroup
-      errorMessage={args.errorMessage}
-      hint={args.hint}
-      isDisabled={args.isDisabled}
-      label={args.label}
-    >
-      <Checkbox
-        isChecked={args.isChecked}
-        isIndeterminate={args.isIndeterminate}
-        label="Pre-flight systems check complete"
-        name="life-support"
-        value="life-support"
-      />
-    </CheckboxGroup>
-  ),
-};
-
-export const Single: StoryObj<CheckboxGroupStoryProps> = {
-  ...SingleTemplate,
-  parameters: {
-    controls: {
-      exclude: ["hint", "label"],
-    },
-  },
-  args: {},
-};
-
-export const Checked: StoryObj<CheckboxGroupStoryProps> = {
-  ...Single,
-  parameters: {
-    controls: {
-      exclude: ["hint", "label"],
-    },
-  },
-  args: {
-    isChecked: true,
-  },
-};
-export const Indeterminate: StoryObj<CheckboxGroupStoryProps> = {
-  ...Single,
-  parameters: { controls: { exclude: ["hint", "label"] } },
-  args: {
-    isIndeterminate: true,
-  },
-};
-
 const GroupTemplate: StoryObj<CheckboxGroupProps> = {
   render: (args) => (
     <CheckboxGroup
@@ -158,6 +147,12 @@ export const Error: StoryObj<CheckboxGroupStoryProps> = {
     controls: {
       exclude: ["isChecked", "isIndeterminate"],
     },
+    docs: {
+      description: {
+        story:
+          "Unlike Radio Buttons, Checkboxes validate individually, not as a group. Validity must be set individually on each checkbox using the `isInvalid` prop, even if the group has an `errorMessage` set.",
+      },
+    },
   },
   args: {
     errorMessage: "Select 1 or more systems to check before initiating warp.",
@@ -198,6 +193,12 @@ export const MixedError: StoryObj<CheckboxGroupStoryProps> = {
     controls: {
       exclude: ["isChecked", "isIndeterminate"],
     },
+    docs: {
+      description: {
+        story:
+          "Individual checkboxes can take a different validity than the whole group; if a group is invalid, individual checkboxes can be marked valid, and vice versa. This is particularly useful in cases where the state of particular checkboxes affect the validity of the entire group.",
+      },
+    },
   },
   args: {
     errorMessage: "These choices are incompatible.",
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.mdx
deleted file mode 100644
index 3a73705521..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./CircularProgress.stories";
-
-<Meta title="MUI Components/Circular Progress" anchor />
-
-# CircularProgress
-
-<Canvas>
-  <Story of={Stories.Indeterminate} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Determinate} />
-</Canvas>
-
-## Props
-
-<ArgsTable />
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.stories.tsx
index c065511479..5fa70375e5 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.stories.tsx
@@ -26,17 +26,34 @@ const storybookMeta: Meta<CircularProgressProps> = {
     },
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
 
 export const Indeterminate: StoryObj<CircularProgressProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "If the component `value` is undefined or `0`, the component will spin indefinitely.",
+      },
+    },
+  },
   args: {
     ariaLabel: "progress",
   },
 };
 
 export const Determinate: StoryObj<CircularProgressProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "If the component has a set `value`, it will show as a static circular progress bar with that value filled as a percentage.",
+      },
+    },
+  },
   args: {
     value: 70,
     ariaLabel: "progress",
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/PaginatedTable.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/PaginatedTable.stories.tsx
index 81ae75acfe..11324da798 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/PaginatedTable.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/PaginatedTable.stories.tsx
@@ -554,6 +554,7 @@ export const CustomToolbar: StoryObj<PaginatedTableProps<Person>> = {
     getRowId: ({ id }: { id: string }) => id,
     ToolbarButtons: ({ table }) => (
       <Button
+        variant="primary"
         onClick={() => console.info(table.getState())}
         text="New Action"
       />
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/StaticTable.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/StaticTable.stories.tsx
index a5389b0be9..bd49a84b9e 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/StaticTable.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/StaticTable.stories.tsx
@@ -519,6 +519,7 @@ export const CustomToolbar: StoryObj<StaticTableProps<Person>> = {
     getRowId: ({ id }: { id: string }) => id,
     ToolbarButtons: ({ table }) => (
       <Button
+        variant="primary"
         onClick={() => console.info(table.getState())}
         text="New Action"
       />
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Dialog/Dialog.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Dialog/Dialog.mdx
deleted file mode 100644
index ae634365f6..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Dialog/Dialog.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./Dialog.stories";
-
-<Meta title="MUI Components/Dialog" anchor />
-
-# Dialog
-
-UI that appears on top of the main content and moves the system into a mode requiring user interaction. This dialog disables the main content until the user interacts with the dialog dialog.
-
-## Behavior
-
-Dialogs are inserted above the main content as a blocking mechanism to ask for user input or confirm an action. They disable all other contexts until the user interacts with the dialog itself.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-While dialogs should contain concise, actionable content, longer dialogs are also supported:
-
-<Canvas>
-  <Story of={Stories.Long} />
-</Canvas>
-
-A dialog may include up to three footer buttons (one primary, one secondary, and one tertiary), or as few as zero:
-
-<Canvas>
-  <Story of={Stories.NoButtons} />
-</Canvas>
-
-### Arrival
-
-How dialogs arrive on the screen is as important as the content they contain. Animation does more than provide a pleasing experience. It contextualizes the new UI the user is being presented.
-
-### Dismissing
-
-Users may close dialogs by clicking on the button in the upper, ending corner of the container. They may also click anywhere outside of the container, within the "curtain".
-
-### Autofocus
-
-Focus is placed on the first item a user can select, allowing them to immediately exit or submit the dialog when possible. Focus is limited to the scope of the dialog while the dialog is open.
-
-## Usage
-
-The default dialog allows users to interact with and alter the experience it is currently interrupting. Dialogs interrupt a user's experience. This may be bothersome, and dialogs should be used with discretion. If a dialog is becoming complicated or claustrophobic, another solution may be needed.
-
-### Use when...
-
-- Blocking user interaction for security reasons - e.g. "Please reenter your password to initiate launch."
-- Gathering immediate information to continue a task - e.g. "A hangar number is required to continue."
-- Confirming user interaction during destructive actions - e.g. "Please confirm the starship name to begin disassembly."
-- Offering an alternative that would lessen the user's required effort - e.g. "Additional security clearance will be required - are you sure you want to continue?"
-
-### Don't use when...
-
-- Immediate action is not required
-- The dialog would interrupt a workflow
-- Additional context may be required or helpful
-- The dialog content is long-form
-- The user has not triggered the dialog via interaction (e.g. on page load)
-- There is already a dialog being displayed
-
-## Content guidelines
-
-Context is key. There needs to be a direct connection between the trigger (i.e. a button or link) and the dialog that follows. Repeating the trigger's copy within the dialog can help reinforce this connection. Providing a sense of connection between the trigger and dialog is important to ensure a consistent user experience.
-
-## Accessibility
-
-### Accessible behavior
-
-When a user opens a dialog, interaction is limited to the new context. While this may seem expected, it can surprise users. This is heightened for users requiring assistive technologies.
-
-For convenience, users can exit the dialog in a few ways:
-
-- Clicking on the overlay
-
-- Hitting <kbd>esc</kbd>
-
-- Clicking or navigating to any element tagged with an appropriate `onClick`
-
-For users happy with their new context, we ensure their attention isn't misdirected. Scrolling on the main content becomes locked, and we inform the browser to lock the `tabindex` to the dialog context. This way, regardless of input method, a user's interactions are limited to their new scope.
-
-## Further reading
-
-- [How To Make Modal Windows Better For Everyone](https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/) - <cite>Scott O'Hara (2014)</cite>
-- [Making Modal Windows Better For Everyone, again...](https://www.scottohara.me/blog/2016/09/07/revised-modal-window.html) - <cite>Scott O'Hara (2016)</cite>
-- [Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://www.nngroup.com/articles/modal-nonmodal-dialog/) - <cite>Therese Fessenden, Nielsen Norman Group (2017)</cite>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Dialog/Dialog.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Dialog/Dialog.stories.tsx
index 399979a3e5..5ce9d987a7 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Dialog/Dialog.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Dialog/Dialog.stories.tsx
@@ -27,26 +27,70 @@ const storybookMeta: Meta<DialogProps> = {
   argTypes: {
     callToActionPrimaryComponent: {
       control: null,
-      description: "An optional Button object",
+      description:
+        "An optional Button object to be situated in the Dialog footer. Should almost always be of variant `primary`.",
+      table: {
+        type: {
+          summary: "<Button />",
+        },
+      },
     },
     callToActionSecondaryComponent: {
       control: null,
-      description: "An optional Button object",
+      description:
+        "An optional Button object to be situated in the Dialog footer, alongside the `callToActionPrimaryComponent`.",
+      table: {
+        type: {
+          summary: "<Button />",
+        },
+      },
     },
     callToActionTertiaryComponent: {
       control: null,
-      description: "An optional Button object",
+      description:
+        "An optional Button object to be situated in the Dialog footer, alongside the other two `callToAction` components.",
+      table: {
+        type: {
+          summary: "<Button />",
+        },
+      },
     },
     children: {
       control: "text",
+      description:
+        "The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.",
+      table: {
+        type: {
+          summary: "ReactNode | Array<ReactNode>",
+        },
+      },
     },
     onClose: {
       control: "function",
       description:
-        "The function that controls what happens when the dialog is dismissed.",
+        "Callback that controls what happens when the dialog is dismissed",
+      table: {
+        type: {
+          summary: "func",
+        },
+      },
+    },
+    isOpen: {
+      control: "boolean",
+      description: "When set to `true`, the Dialog will be visible.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     title: {
       control: "text",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
@@ -55,6 +99,7 @@ const storybookMeta: Meta<DialogProps> = {
     title: "Initiate self-destruct protocol",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
@@ -73,7 +118,7 @@ const DefaultTemplate: StoryObj<DialogProps> = {
 
     return (
       <>
-        <Button onClick={onOpen} text="Open dialog" />
+        <Button variant="primary" onClick={onOpen} text="Open dialog" />
         <Dialog
           {...props}
           callToActionPrimaryComponent={
@@ -108,6 +153,14 @@ export const Default: StoryObj<DialogProps> = {
 
 export const Long: StoryObj<DialogProps> = {
   ...DefaultTemplate,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "If the `Dialog` content is longer than the available space, the body will automatically receive top and bottom borders to indicate scrollability.",
+      },
+    },
+  },
   args: {
     children: (
       <>
@@ -266,7 +319,7 @@ export const NoButtons: StoryObj<DialogProps> = {
 
     return (
       <>
-        <Button onClick={onOpen} text="Open dialog" />
+        <Button variant="primary" onClick={onOpen} text="Open dialog" />
         <Dialog {...props} onClose={onClose} isOpen={isVisible} />
       </>
     );
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Fieldset/Fieldset.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Fieldset/Fieldset.mdx
deleted file mode 100644
index bb8c20f4c9..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Fieldset/Fieldset.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./Fieldset.stories";
-
-<Meta title="MUI Components/Forms/Fieldset" anchor />
-
-# Fieldset
-
-The fieldset component allows you to group related fields within a form.
-
-<Canvas>
-  <Story of={Stories.Simple} />
-</Canvas>
-
-## Content
-
-Fieldset supports standardized legends, descriptions, and child fields.
-
-### Legends and descriptions
-
-Fieldsets require a legend that describes the group.
-
-An additional description can follow the heading.
-
-<Canvas>
-  <Story of={Stories.Description} />
-</Canvas>
-
-### Errors
-
-When multiple input selections are incompatible, the whole group may be made invalid.
-
-In this case, an infobox should be inserted at the top of the fieldset. This alert should persist until all input errors are resolved.
-
-<Canvas>
-  <Story of={Stories.Alert} />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Fieldset/Fieldset.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Fieldset/Fieldset.stories.tsx
index 7b973e1726..eb0aa33f8b 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Fieldset/Fieldset.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Fieldset/Fieldset.stories.tsx
@@ -25,24 +25,58 @@ const storybookMeta: Meta = {
   argTypes: {
     legend: {
       control: "text",
+      description: "The title of the Fieldset",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    alert: {
+    description: {
       control: "text",
+      description: "A supplementary description",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     children: {
-      control: "text",
+      control: "obj",
+      description: "Field components within the Fieldset",
+      table: {
+        type: {
+          summary: "ReactElement | Array<ReactElement>",
+        },
+      },
     },
-    description: {
-      control: "text",
+    alert: {
+      control: null,
+      description:
+        "An Infobox indicating a Fieldset-wide error or status update",
+      table: {
+        type: {
+          summary: "ReactElement<typeof Infobox>",
+        },
+      },
     },
-    id: {
+    name: {
       control: "text",
+      description: "The name associated with the group",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    isDisabled: {
-      control: "boolean",
-    },
-    name: {
+    id: {
       control: "text",
+      description: "Defines a unique identifier (ID) for the Fieldset",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
@@ -55,6 +89,7 @@ const storybookMeta: Meta = {
     ),
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.mdx
deleted file mode 100644
index 04b6c74967..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./Form.stories";
-
-<Meta title="MUI Components/Forms/Form" anchor />
-
-# Form
-
-The form component arranges input controls to help with the layout and building of a form.
-
-<Canvas>
-  <Story of={Stories.Simple} />
-</Canvas>
-
-## Content
-
-Form supports standardized titles, descriptions, error messaging, fieldsets, fields, and actions.
-
-### Titles and descriptions
-
-Forms should include a heading that describes the form. This heading may be provided by the form's context; for example, a modal or page's title.
-
-An additional description can follow the heading.
-
-<Canvas>
-  <Story of={Stories.Description} />
-</Canvas>
-
-### Errors
-
-### Form error
-
-Some errors may occur at the highest level. For example, the server may be unable to process the submission.
-
-In these cases, an infobox should be added at the top of the form to increase visibility. This alert should persist until the relevant errors are resolved.
-
-<Canvas>
-  <Story of={Stories.Alert} />
-</Canvas>
-
-### Fieldset error
-
-When multiple input selections are incompatible, the whole group may be made invalid.
-
-In this case, an infobox should be inserted at the top of the fieldset. This alert should persist until all input errors are resolved.
-
-See <a href="?path=/docs/mui-components-forms-fieldset--simple">Fieldset</a> for more information.
-
-### Input error
-
-Each input field within a form has its own error state that prevents a user from moving forward or completing a form.
-
-See <a href="http://localhost:6006/?path=/docs/mui-components-forms-textfield--default">TextField</a> for more information.
-
-### Fieldsets
-
-In addition to individual fields, forms support fieldsets as children. This allows you to group related fields together.
-
-Fieldsets should be labeled by a legend. They can also include descriptions.
-
-<Canvas>
-  <Story of={Stories.Fieldsets} />
-</Canvas>
-
-### The kitchen sink
-
-<Canvas>
-  <Story of={Stories.KitchenSink} />
-</Canvas>
-
-## Best practices
-
-### Length
-
-In general, it is good for forms to be as simple and short as possible. Eliminating unnecessary fields will reduce user effort and translate to better completion rates.
-
-### Layout
-
-The form component is designed in a single-column layout to maintain a logical flow of completion.
-
-Adding multiple columns in a form can generate confusion for users and lead to usability problems such as having more than one way to interpret the form and forcing users to reorient their eyes to different places in the form.
-
-## References and additional material
-
-- Kathryn Whitenton (2016, May 1) [Website Forms Usability: Top 10 Recommendations](https://www.nngroup.com/articles/web-form-design/) - Nielsen Norman Group
-- Matteo Penzo (2006, July 12) [Label Placement in Forms](https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php) - UXmatters
-- Edward Scott (2018, September 17) [Avoid Multi-Column Forms](https://baymard.com/blog/avoid-multi-column-forms) - Baymard Institute
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.stories.tsx
index 2241bdd8c7..c283376235 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.stories.tsx
@@ -18,6 +18,9 @@ import {
   Fieldset,
   Form,
   FormProps,
+  formEncodingTypeValues,
+  formAutoCompleteTypeValues,
+  formMethodValues,
   Infobox,
   Link,
   TextField,
@@ -31,39 +34,120 @@ const storybookMeta: Meta<FormProps> = {
   argTypes: {
     title: {
       control: "text",
+      description: "The title of the Form",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    alert: {
+    description: {
       control: "text",
+      description: "A supplementary description",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     children: {
-      control: "text",
+      control: "obj",
+      description: "Field or FieldSet components within the Form",
+      table: {
+        type: {
+          summary: "ReactElement | Array<ReactElement>",
+        },
+      },
     },
-    description: {
-      control: "text",
+    alert: {
+      control: null,
+      description: "An Infobox indicating a Form-wide error or status update",
+      table: {
+        type: {
+          summary: "ReactElement<typeof Infobox>",
+        },
+      },
     },
-    formActions: {
+    autoCompleteType: {
+      options: formAutoCompleteTypeValues,
+      control: { type: "radio" },
+      description:
+        "Indicates whether input elements can have their values automatically completed by the browser",
+      table: {
+        type: {
+          summary: formAutoCompleteTypeValues.join(" | "),
+        },
+      },
+    },
+    name: {
       control: "text",
+      description:
+        "The name of the form. The value must not be an empty string and must be unique among the form elements",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    hasAutoComplete: {
+    noValidate: {
       control: "boolean",
+      description:
+        "This Boolean attribute indicates that the form shouldn't be validated when submitted",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     encodingType: {
-      control: "text",
+      options: formEncodingTypeValues,
+      control: { type: "radio" },
+      description:
+        "If the method attribute is set to 'post', the MIME type of the form submission",
+      table: {
+        type: {
+          summary: formEncodingTypeValues.join(" | "),
+        },
+      },
     },
     method: {
-      control: "text",
-    },
-    noValidate: {
-      control: "boolean",
+      options: formMethodValues,
+      control: { type: "radio" },
+      description: "The HTTP method to submit the form with",
+      table: {
+        type: {
+          summary: formMethodValues.join(" | "),
+        },
+      },
     },
     target: {
       control: "text",
+      description:
+        "Indicates where to display the response after submitting the form",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    id: {
-      control: "text",
+    formActions: {
+      control: "obj",
+      description: "One or more Buttons that conclude the form.",
+      table: {
+        type: {
+          summary:
+            "ReactElement<typeof Button> | Array<ReactElement<typeof Button>>",
+        },
+      },
     },
-    name: {
+    id: {
       control: "text",
+      description: "Defines a unique identifier (ID) for the Form",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
@@ -76,12 +160,13 @@ const storybookMeta: Meta<FormProps> = {
     ),
     formActions: (
       <>
-        <Button text="Submit" />
+        <Button variant="primary" text="Submit" />
         <Button variant="secondary" text="Reset" />
       </>
     ),
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
@@ -95,7 +180,7 @@ const Template: StoryObj<FormProps> = {
         description={args.description}
         formActions={args.formActions}
         alert={args.alert}
-        hasAutoComplete={args.hasAutoComplete}
+        autoCompleteType={args.autoCompleteType}
         encodingType={args.encodingType}
         method={args.method}
         noValidate={args.noValidate}
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Icon/Icon.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Icon/Icon.stories.tsx
index d885dfbf08..234091fb4c 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Icon/Icon.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Icon/Icon.stories.tsx
@@ -16,6 +16,7 @@ import {
   Icon,
   type IconProps,
   iconDictionary,
+  iconSizeValues,
   StaticTable,
   type TableColumn,
 } from "@okta/odyssey-react-mui";
@@ -29,18 +30,44 @@ const storybookMeta: Meta<IconProps> = {
     name: {
       control: { type: "select" },
       options: Object.keys(iconDictionary),
+      description: "The name of the icon to render",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     size: {
-      options: ["small", "medium", "large"],
+      options: iconSizeValues,
       control: { type: "radio" },
+      defaultValue: "medium",
+      table: {
+        type: {
+          summary: iconSizeValues.join(" | "),
+        },
+      },
+      description: "The size of the icon",
     },
     ariaLabelledby: {
       control: "text",
+      description: "The element whose text describes the icon, if it exists",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     label: {
       control: "text",
+      description: "Text that describes the icon",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
@@ -84,10 +111,6 @@ const columns: TableColumn<IconData>[] = [
       iconDictionary[cell.getValue<IconData["name"]>()].displayName,
     header: "Class Name",
   },
-  {
-    accessorKey: "use",
-    header: "Use",
-  },
 ];
 
 const icons: IconData[] = [
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.mdx
deleted file mode 100644
index 8461ec319d..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.mdx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as InfoboxStories from "./Infobox.stories";
-
-<Meta title="MUI Components/Alerts/Infobox" anchor />
-
-# Infobox
-
-An infobox is a type of alert that provides feedback in response to a user action or system activity.
-
-## Behavior
-
-This component may be present on load or triggered by different types of events, but they are not transient or dismissible.
-
-## Variants
-
-### Info
-
-Use Infoboxes for communicating important guidance to the user. When using the Info variant, consider if plain copy will suffice on the page itself first. Reserve this component for "can’t miss" instructions.
-
-<Canvas>
-  <Story of={InfoboxStories.Info} />
-</Canvas>
-
-### Error
-
-Use Error Infoboxes to inform users that an error has occurred. You may also inform a user when specific processes are particularly destructive.
-
-Include guidance to make sure users know what steps to take to address the error or avoid data loss.
-
-<Canvas>
-  <Story of={InfoboxStories.Error} />
-</Canvas>
-
-### Warning
-
-Use Warning Infoboxes to inform users of tasks or processes that need their attention.
-
-When using the Warning variant, ensure the user does not need more context than you can give in the space available.
-
-<Canvas>
-  <Story of={InfoboxStories.Warning} />
-</Canvas>
-
-### Success
-
-Use Success Infoboxes for reporting successful actions, processes, or states to the user.
-
-<Canvas>
-  <Story of={InfoboxStories.Success} />
-</Canvas>
-
-## Usage
-
-Infoboxes can be present when the page loads or appear dynamically. For instance, a Form may include a Warning message if the user should be aware of particular requirements up front. Alternately, the Error variant may be used on Form submission to surface an error.
-
-Avoid overusing Infobox within the same view. They are intended to draw the eye, and multiple visible Infoboxes may overwhelm users.
-
-### Actions
-
-It is ideal to direct users toward an appropriate action, especially for addressing errors. To preserve clarity, limit Infoboxes to one link. If it's necessary to provide the user with an action, please direct them to the appropriate flow instead of beginning a new process inline.
-
-<Canvas>
-  <Story of={InfoboxStories.BlockLink} />
-</Canvas>
-
-### Placement
-
-Infoboxes will stretch to fit the width of their parent. Be mindful of this behavior, as it will help indicate the scope of their messaging. Infoboxes should be displayed above the content they apply to but not higher than their scope.
-
-For example, a Form error should be displayed above all Fieldsets, but below the Form title. In this example, the Infobox is constrained to the width of the Form.
-
-Stay away from nesting Infoboxes within information-dense UI like Tables. If you need to convey something about an individual data point, consider another design solution.
-
-## Content Guidelines
-
-These messages may be used for longer content than Toast or Banner, but shouldn't go beyond two paragraphs. When including an inline link or action, be sure the link text clearly indicates where it leads.
-
-Do not include images or other UIs within Infobox.
-
-### Content Areas
-
-Infobox should always include their main messaging within the body content. Titles are optional and offer quick context for your message.
-
-<Canvas>
-  <Story of={InfoboxStories.Info} />
-</Canvas>
-
-<Canvas>
-  <Story of={InfoboxStories.Success} />
-</Canvas>
-
-## Accessibility
-
-When deploying Infoboxes, two `role`s may apply. Error variants should utilize the `alert` role, as their contents represent immediate risk or failure. Success and Warning variants are better suited to the `status` role, which provides a less urgent announcement on appearance. The Info variant does not require a `role`, as it represents plain content.
-
-## References
-
-<figure className="ods-table--figure">
-  <figcaption className="ods-table--figcaption">Related Components</figcaption>
-  <table className="ods-table">
-    <caption>Differences between the available alert components</caption>
-    <thead>
-      <tr>
-        <th scope="column">Component</th>
-        <th scope="column">Available Variants</th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-dynamic">Dynamic</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-dynamic"
-              role="tooltip"
-            >
-              May be inserted after page load
-            </aside>
-          </span>
-        </th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-transient">Transient</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-transient"
-              role="tooltip"
-            >
-              Disappears without user interaction
-            </aside>
-          </span>
-        </th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-dismissible">Dismissible</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-dismissible"
-              role="tooltip"
-            >
-              May be dismissed by the user
-            </aside>
-          </span>
-        </th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-actionable">Actionable</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-actionable"
-              role="tooltip"
-            >
-              May include actions or links
-            </aside>
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">
-          <a href="?path=/docs/components-alerts-banner--info#banner">Banner</a>
-        </th>
-        <td>Info, Warning, Error</td>
-        <td>No</td>
-        <td>No</td>
-        <td>Yes</td>
-        <td>Yes</td>
-      </tr>
-      <tr>
-        <th scope="row">Infobox</th>
-        <td>Success, Warning, Error</td>
-        <td>Yes</td>
-        <td>No</td>
-        <td>No</td>
-        <td>Yes</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <a href="?path=/docs/mui-components-alerts-toast--info#toast">
-            Toast
-          </a>
-        </th>
-        <td>Info, Success, Warning, Error</td>
-        <td>Yes</td>
-        <td>Yes</td>
-        <td>No</td>
-        <td>No</td>
-      </tr>
-    </tbody>
-  </table>
-</figure>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx
index 66e8f41147..392bb19938 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx
@@ -14,6 +14,8 @@ import { Meta, StoryObj } from "@storybook/react";
 import {
   Infobox,
   InfoboxProps,
+  infoboxRoleValues,
+  infoboxSeverityValues,
   Link,
   Typography,
 } from "@okta/odyssey-react-mui";
@@ -24,18 +26,43 @@ const storybookMeta: Meta<InfoboxProps> = {
   component: Infobox,
   argTypes: {
     children: {
-      control: "text",
+      control: null,
+      description: "The contents of the alert",
+      table: {
+        type: {
+          summary: "ReactNode",
+        },
+      },
     },
     role: {
-      control: "radio",
-      options: ["alert", "status", undefined],
+      options: infoboxRoleValues,
+      control: { type: "radio" },
+      description:
+        "Sets the ARIA role of the alert ('status' for something that dynamically updates, 'alert' for errors, null for something unchanging)",
+      table: {
+        type: {
+          summary: infoboxRoleValues.join(" | "),
+        },
+      },
     },
     severity: {
-      control: "radio",
-      options: ["error", "info", "success", "warning"],
+      options: infoboxSeverityValues,
+      control: { type: "radio" },
+      description: "Determine the color and icon of the alert",
+      table: {
+        type: {
+          summary: infoboxSeverityValues.join(" | "),
+        },
+      },
     },
     title: {
-      control: "string",
+      control: "text",
+      description: "The title of the alert",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
@@ -47,6 +74,7 @@ const storybookMeta: Meta<InfoboxProps> = {
     severity: "info",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Link/Link.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Link/Link.mdx
index b7c1191602..72b04298ab 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Link/Link.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Link/Link.mdx
@@ -1,40 +1,24 @@
-import { Canvas, Meta } from "@storybook/addon-docs";
+import {
+  Canvas,
+  Meta,
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from "@storybook/addon-docs";
 import { Story } from "@storybook/blocks";
-import * as Stories from "./Link.stories";
+import * as LinkStories from "./Link.stories";
 
-<Meta title="MUI Components/Link" anchor />
+<Meta of={LinkStories} />
 
-# Link
-
-Links are navigation elements displayed as text.
-
-## Variants
-
-### Default
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-### Monochrome
-
-<Canvas>
-  <Story of={Stories.Monochrome} />
-</Canvas>
-
-### External links
-
-Set `target = "_blank"`.
-
-<Canvas>
-  <Story of={Stories.External} />
-</Canvas>
-
-### Icons
-
-<Canvas>
-  <Story of={Stories.WithIcon} />
-</Canvas>
+<Title of={LinkStories} />
+<Subtitle of={LinkStories} />
+<Description of={LinkStories} />
+<Primary of={LinkStories} />
+<Controls />
+<Stories />
 
 ## References
 
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Link/Link.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Link/Link.stories.tsx
index 86c261a0b4..24e28a250c 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Link/Link.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Link/Link.stories.tsx
@@ -17,7 +17,9 @@ import {
   InformationCircleFilledIcon,
   Link,
   LinkProps,
+  linkVariantValues,
 } from "@okta/odyssey-react-mui";
+import { icons } from "../../../../.storybook/components/iconUtils";
 
 export default {
   title: "MUI Components/Link",
@@ -25,22 +27,65 @@ export default {
   argTypes: {
     children: {
       control: "text",
+      table: {
+        type: {
+          summary: "ReactNode",
+        },
+        defaultValue: "",
+      },
+    },
+    href: {
+      control: "text",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: "",
+      },
     },
     icon: {
-      control: "object",
+      control: {
+        type: "select",
+      },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display at the start of the Link",
+      table: {
+        type: {
+          summary: "<Icon />",
+        },
+        defaultValue: "",
+      },
     },
     rel: {
       control: "text",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: "",
+      },
     },
     target: {
       control: "text",
-    },
-    onClick: {
-      action: true,
+      description:
+        "If set to `_blank`, the Link will display an external icon.",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: "",
+      },
     },
     variant: {
       control: { type: "radio" },
-      options: ["default", "monochrome"],
+      options: linkVariantValues,
+      table: {
+        type: {
+          summary: linkVariantValues.join(" | "),
+        },
+        defaultValue: "default",
+      },
     },
   },
   decorators: [MuiThemeDecorator],
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.mdx
deleted file mode 100644
index 3a6d7ee86d..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./MenuButton.stories";
-
-<Meta title="MUI Components/Menu Button" anchor />
-
-# Menu Button
-
-A menu button is a button that, when triggered, displays a list of actions for the user to choose from.
-
-## Overview
-
-The Menu button component includes a button and a menu that contains menu items. Each menu item can be chosen to perform a different action.
-
-### When to use
-
-- Use when you need to display multiple actions but there is a space constraint.
-
-### When not to use
-
-- If the user needs to make a selection within a form, use form elements such as select, radio, or checkboxes.
-- For expanding and collapsing section, use accordion.
-
-<Canvas>
-  <Story of={Stories.Simple} />
-</Canvas>
-
-## Variants
-
-### Trigger button variants
-
-The menu button is just like the regular button with additional functions. Regardless of the additional function, the menu button uses the same styles and properties that are available with Button.
-
-#### Dropdown button
-
-Dropdown buttons are styled just like the regular buttons (primary, secondary, floating) but they have trailing chevron-down icon to indicate that there is additional content once toggled.
-
-<Canvas>
-  <Story of={Stories.ButtonVariant} />
-</Canvas>
-
-#### Icon button
-
-When using an icon button as a trigger we pair it with the overflow-vertical icon.
-
-<Canvas>
-  <Story of={Stories.IconButton} />
-</Canvas>
-
-### Menu item variants
-
-#### Icons
-
-Menu items by default are a plain label that explains the actions. An icon can also be included next to the label if it reinforces the label.
-
-<Canvas>
-  <Story of={Stories.ActionIcons} />
-</Canvas>
-
-#### Grouping
-
-You can group sections of actions within the menu by using a divider line, a section heading or both.
-
-<Canvas>
-  <Story of={Stories.Groupings} />
-</Canvas>
-
-#### Destructive actions
-
-Actions may be marked as destructive by using the `isDestructive` prop on the associated item.
-
-<Canvas>
-  <Story of={Stories.WithDestructive} />
-</Canvas>
-
-## Behaviors
-
-### Placement
-
-Menus are positioned under their anchor element, unless they are close to the bottom of the viewport.
-
-### Scrolling
-
-When a menu has scrolling, the last item should be 50% visible in the container so that it is clear that there is more content available.
-
-### List order
-
-Order your menu list in an intentional way that will facilitate the user in finding a specific value. There is not one way to this but you can consider the following options:
-
-- Organize the list in an alphabetical order.
-- Show the most used options at the top of the list.
-- Group list items into multiple categories.
-
-### Closing the menu
-
-When an action is selected from the list, the menu collapses and the action is performed.
-
-Additionally, a user can click outside of the menu or press the esc key and the menu will also collapse.
-
-## Accessibility
-
-Here are some accessibility guidelines to follow when using the Menu Button component:
-
-- Use descriptive and concise text for the button label.
-- Make sure the button has a focus state so that it is clear when the button is in focus.
-- Ensure ARIA attributes indicate that the button has a dropdown menu and to describe the menu items.
-- Make sure the dropdown menu can be accessed with the keyboard.
-- Use descriptive and concise text for the menu items.
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx
index 20cf2bb4a0..23ba90cdf0 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx
@@ -18,12 +18,14 @@ import {
   ListSubheader,
   MenuButton,
   MenuButtonProps,
+  buttonVariantValues,
   MenuItem,
   GroupIcon,
   GlobeIcon,
   CalendarIcon,
   MoreIcon,
 } from "@okta/odyssey-react-mui";
+import { icons } from "../../../../.storybook/components/iconUtils";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 
 const storybookMeta: Meta<MenuButtonProps> = {
@@ -31,25 +33,74 @@ const storybookMeta: Meta<MenuButtonProps> = {
   component: MenuButton,
   argTypes: {
     children: {
-      control: "text",
+      control: "obj",
+      description: "The <MenuItem> components within the Menu",
+      table: {
+        type: {
+          summary: "[MenuItem | Divider | ListSubheader]",
+        },
+      },
     },
     buttonLabel: {
       control: "text",
+      description: "The label on the triggering Button",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     buttonVariant: {
-      control: "text",
+      options: buttonVariantValues,
+      control: { type: "radio" },
+      description: "The variant of the triggering Button",
+      table: {
+        type: {
+          summary: buttonVariantValues.join(" | "),
+        },
+      },
     },
     endIcon: {
-      control: "text",
+      control: {
+        type: "select",
+      },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "The end Icon on the triggering Button",
+      table: {
+        type: {
+          summary: "<Icon />",
+        },
+      },
     },
     id: {
       control: "text",
+      description: "The id of the Button",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: "",
+      },
+    },
+    ariaLabel: {
+      control: "text",
+      description:
+        "aria-label to describe the button when the button label is empty",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
     buttonLabel: "More actions",
+    buttonVariant: "secondary",
+    endIcon: <MoreIcon />,
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.mdx
deleted file mode 100644
index 966b42b13a..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./NativeSelect.stories";
-
-<Meta title="MUI Components/Forms/NativeSelect" anchor />
-
-# Select
-
-Often referred to as a “dropdown menu” this input triggers a menu of options a user can select. Country and state Selects are common examples.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-## Behavior
-
-Interacting with a NativeSelect displays a list of values to choose from. Choosing a value will override any previous selection and close the NativeSelect.
-
-Odyssey also supports a Multi-Select variant that allows users to select many values.
-
-## Variants
-
-Odyssey provides support for both single and multi-value NativeSelects.
-
-### Single Select
-
-The default NativeSelect allows users to choose a single value from a list of options. Selecting another option will replace the first.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.DefaultDisabled} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.DefaultError} />
-</Canvas>
-
-#### Grouped Options
-
-NativeSelect can incldue `<option>`s and `<optgroup>`s as children.
-
-<Canvas>
-  <Story of={Stories.DefaultGrouped} />
-</Canvas>
-
-### Multi-Select
-
-The Multi-Select variant allows users to choose more than one value from the list of options.
-
-<Canvas>
-  <Story of={Stories.Multi} />
-</Canvas>
-
-## Usage
-
-Selects are most useful when users are choosing between 7-15 options. For smaller sets, Radio Buttons are more effective. For larger sets, a Text Input with autocompletion may be a better fit.
-
-Selects perform better when the options are familiar to the user. If a user may be unfamiliar with their options or need to compare them, use Radio Buttons.
-
-Select inputs should not have a default selected unless a majority of users will be choosing it.
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.stories.tsx
index b4e5343429..c46b061503 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.stories.tsx
@@ -18,24 +18,133 @@ const storybookMeta: Meta<NativeSelectProps> = {
   title: "MUI Components/Forms/NativeSelect",
   component: NativeSelect,
   argTypes: {
-    isDisabled: {
-      control: "boolean",
+    children: {
+      control: null,
+      description:
+        "The options or optgroup elements within the native select component",
+      table: {
+        type: {
+          summary:
+            "ReactElement<'option'> | ReactElement<'optgroup'> | undefined",
+        },
+      },
+    },
+    defaultValue: {
+      control: "text",
+      description:
+        "The default value of the native select component. Only applicable if `value` is not provided",
+      table: {
+        type: {
+          summary: "string | undefined",
+        },
+      },
     },
     errorMessage: {
       control: "text",
+      description: "The error message for the native select component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     hint: {
       control: "text",
+      description: "The hint text for the native select component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    id: {
+      control: "text",
+      description: "The id attribute of the native select component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "If `true`, the native select component is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    isMultiSelect: {
+      control: "boolean",
+      description:
+        "If `true`, the native select component allows multiple selections",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     isOptional: {
       control: "boolean",
+      description: "If `true`, the native select component is optional",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     label: {
       control: "text",
+      description: "The label text for the native select component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    defaultValue: {
+    onBlur: {
+      control: null,
+      description:
+        "Callback fired when the native select component loses focus",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
+    },
+    onChange: {
+      control: null,
+      description:
+        "Callback fired when the value of the native select component changes",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
+    },
+    onFocus: {
+      control: null,
+      description:
+        "Callback fired when the native select component gains focus",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
+    },
+    value: {
       control: "text",
-      description: "The default value, if the control is native.",
+      description:
+        "The value or values selected in the native select component",
+      table: {
+        type: {
+          summary: "string | string[]",
+        },
+      },
     },
   },
   args: {
@@ -46,6 +155,7 @@ const storybookMeta: Meta<NativeSelectProps> = {
     id: "SolarDestination",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.mdx
deleted file mode 100644
index 80834bf82a..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./Radio.stories";
-
-<Meta title="MUI Components/Forms/Radio" anchor />
-
-# Radio
-
-Use radio buttons when a user must make a single selection from a list of two or more options that are mutually exclusive.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.stories.tsx
index 35f08d6419..9304c6b38d 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.stories.tsx
@@ -21,20 +21,59 @@ const storybookMeta: Meta<RadioProps> = {
   title: "MUI Components/Forms/Radio",
   component: Radio,
   argTypes: {
+    isChecked: {
+      control: "boolean",
+      description: "If `true`, the radio button is checked",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
     isDisabled: {
       control: "boolean",
+      description: "If `true`, the radio button is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     isInvalid: {
       control: "boolean",
+      description: "If `true`, the radio button has an invalid value",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     label: {
       control: "text",
+      description: "The label text for the radio button",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     name: {
       control: "text",
+      description: "The name attribute of the radio button",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     value: {
       control: "text",
+      description: "The value attribute of the radio button",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
@@ -42,6 +81,7 @@ const storybookMeta: Meta<RadioProps> = {
     value: "Value",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.mdx
deleted file mode 100644
index ce7626a9f7..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./RadioGroup.stories";
-
-<Meta title="MUI Components/Forms/RadioGroup" anchor />
-
-# RadioGroup
-
-Use radio buttons when a user must make a single selection from a list of two or more options that are mutually exclusive.
-
-## About
-
-Radio buttons are wrapped into a radio group so we can visually present groups of options as distinct and separate from other possible groups on the same page.
-
-### When to use
-
-#### Radio group vs Checkbox
-
-Radio buttons allow the user to select 1 option. Checkboxes, in contrast, are independent of all the other checkboxes and multiple options can be selected at the same time.
-
-#### Radio group vs Select
-
-Consider how you wish to present your list of options to the user. A radio group will display all possible options and make it easy to compare them without the need to first interact with the component, lowering the cognitive load for users.
-
-## Examples
-
-### Default
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-### Hint text
-
-The hint text is placed in between the label and the radio buttons.
-
-<Canvas>
-  <Story of={Stories.Hint} />
-</Canvas>
-
-### Disabled
-
-Disabled inputs block any possible user interaction and cannot be focused.
-
-<Canvas>
-  <Story of={Stories.Disabled} />
-</Canvas>
-
-### Error
-
-Validation should happen on the group and not individually on each item.
-
-<Canvas>
-  <Story of={Stories.Error} />
-</Canvas>
-
-## Anatomy
-
-### Label
-
-The label helps the user understand the group of options provided and in making a selection.
-
-### Radio button input and label
-
-Radio buttons make up the list of available options within a group.<br/>
-The list is laid out vertically with one choice per line and by default one of the options is selected.<br/>
-If users need to withhold an answer you should provide a neutral option for this.
-
-### Hint text (optional)
-
-This is an optional property that includes in-context descriptions to clarify the grouping or explain the set of options.<br/>
-Hints should not include long-form content or rich text as it visually separates the intended label from the input area.
-
-## Behaviors
-
-### States
-
-A radio button has 2 states: Selected and Unselected.<br/>
-By default one of the options within the list should be selected. Once another option is triggered the previous selection will be deselected.<br/>
-On top of the previous two states, radio buttons can also exist in all the other states needed for form inputs: `focus`, `disabled`, and `invalid`.
-
-### Interactions
-
-A radio button can be selected from either the radio input or the radio label, this provides a better affordance for the user.
-
-## References and additional reading material
-
-- Jakob Nielsen (2004, September 26) [Checkboxes vs. Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) - Nielsen Norman Group
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.stories.tsx
index ff01525a3e..3aad5df8f5 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/RadioGroup/RadioGroup.stories.tsx
@@ -20,31 +20,88 @@ const storybookMeta: Meta<typeof RadioGroup> = {
   component: RadioGroup,
   argTypes: {
     children: {
-      control: "text",
+      control: null,
+      description: "An array of Radio components within the group",
+      table: {
+        type: {
+          summary: "Array<ReactElement<typeof Radio>>",
+        },
+      },
     },
     defaultValue: {
       control: "text",
+      description:
+        "The text value of the radio that should be selected by default",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     errorMessage: {
       control: "text",
+      description: "The error text for an invalid group",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     hint: {
       control: "text",
+      description: "Optional hint text",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     id: {
       control: "text",
+      description:
+        "The id of the `input` element. This will also be the input's `name` field",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     isDisabled: {
       control: "boolean",
+      description: "Disables the whole radio group",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     label: {
       control: "text",
+      description: "The text label for the radio group",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     onChange: {
-      control: "function",
+      control: null,
+      description: "Callback fired when the value of the radio group changes",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
     },
     value: {
       control: "text",
+      description: "The `value` on the selected radio button",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
@@ -52,6 +109,7 @@ const storybookMeta: Meta<typeof RadioGroup> = {
     label: "Speed",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
@@ -88,6 +146,14 @@ export const Disabled: StoryObj<RadioGroupProps> = {
 
 export const Error: StoryObj<RadioGroupProps> = {
   ...Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Validation should happen on the group and not individually on each item.",
+      },
+    },
+  },
   args: {
     errorMessage: "This field is required.",
   },
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/ScreenReaderText/ScreenReaderText.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/ScreenReaderText/ScreenReaderText.mdx
index 57518650a5..55a96860aa 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/ScreenReaderText/ScreenReaderText.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/ScreenReaderText/ScreenReaderText.mdx
@@ -30,11 +30,3 @@ For example, when communicating the `severity` of an Alert:
 </Alert>
 `}
 />
-
-### Content guidelines
-
-The following guidelines should be followed when designing the ScreenReaderText component:
-
-- Use a clear and concise language that accurately describes the UI element being labeled or described.
-- Do not include any information that is already visible on the page, as this may cause confusion for users with screen readers.
-- Avoid using overly complex or technical language that may be difficult for some users to understand.
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx
deleted file mode 100644
index 40fdc0cd67..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-
-<Meta title="MUI Components/Forms/Select" anchor />
-
-# Select
-
-Often referred to as a “dropdown menu” this input triggers a menu of options a user can select. Country and state Selects are common examples.
-
-<Canvas>
-  <Story id="mui-components-forms-select--default" />
-</Canvas>
-
-## Behavior
-
-Interacting with a Select displays a list of values to choose from. Choosing a value will override any previous selection and close the Select.
-
-Odyssey also supports a Multi-Select variant that allows users to select many values.
-
-## Variants
-
-Odyssey provides support for both single and multi-value Selects.
-
-### Single Select
-
-The default Select allows users to choose a single value from a list of options. Selecting another option will replace the first.
-
-<Canvas>
-  <Story id="mui-components-forms-select--default" />
-</Canvas>
-
-<Canvas>
-  <Story id="mui-components-forms-select--default-disabled" />
-</Canvas>
-
-<Canvas>
-  <Story id="mui-components-forms-select--default-error" />
-</Canvas>
-
-### Option datatypes
-
-`<Select>` accepts `options` in two formats:
-
-1. A flat array, in which case the value of each option is the same as its name
-2. An object with values for keys `value` and `name`
-
-Here's a `<Select>` that uses an object for its options:
-
-<Canvas>
-  <Story id="mui-components-forms-select--default-object" />
-</Canvas>
-
-Here's a `<Select>` that uses mixed data types, including headings:
-
-<Canvas>
-  <Story id="mui-components-forms-select--default-grouped" />
-</Canvas>
-
-### Multi-Select
-
-The Multi-Select variant allows users to choose more than one value from the list of options.
-
-<Canvas>
-  <Story id="mui-components-forms-select--multi" />
-</Canvas>
-
-## Usage
-
-Selects are most useful when users are choosing between 7-15 options. For smaller sets, Radio Buttons are more effective. For larger sets, a Text Input with autocompletion may be a better fit.
-
-Selects perform better when the options are familiar to the user. If a user may be unfamiliar with their options or need to compare them, use Radio Buttons.
-
-Select inputs should not have a default selected unless a majority of users will be choosing it.
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.stories.tsx
index 34b1c5ea14..dce32d3a52 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.stories.tsx
@@ -18,20 +18,117 @@ const storybookMeta: Meta<SelectProps> = {
   title: "MUI Components/Forms/Select",
   component: Select,
   argTypes: {
-    isDisabled: {
-      control: "boolean",
-    },
     errorMessage: {
       control: "text",
+      description: "The error message for the select component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     hint: {
       control: "text",
+      description: "The hint text for the select component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    id: {
+      control: "text",
+      description: "The id attribute of the select component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "If `true`, the select component is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    isMultiSelect: {
+      control: "boolean",
+      description: "If `true`, the select component allows multiple selections",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     isOptional: {
       control: "boolean",
+      description: "If `true`, the select component is optional",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     label: {
       control: "text",
+      description: "The label text for the select component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    onBlur: {
+      control: null,
+      description: "Callback fired when the select component loses focus",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
+    },
+    onChange: {
+      control: null,
+      description:
+        "Callback fired when the value of the select component changes",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
+    },
+    onFocus: {
+      control: null,
+      description: "Callback fired when the select component gains focus",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
+    },
+    options: {
+      control: "object",
+      description: "The options for the select component",
+      table: {
+        type: {
+          summary: "(string | SelectOption)[]",
+        },
+      },
+    },
+    value: {
+      control: "text",
+      description: "The value or values selected in the select component",
+      table: {
+        type: {
+          summary: "string | string[]",
+        },
+      },
     },
   },
   args: {
@@ -39,6 +136,7 @@ const storybookMeta: Meta<SelectProps> = {
     label: "Destination",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
@@ -184,29 +282,45 @@ export const Default: StoryObj<SelectProps> = {
 };
 Default.args = {};
 
-export const DefaultDisabled: StoryObj<SelectProps> = {
+export const Disabled: StoryObj<SelectProps> = {
   ...Template,
   args: {
     isDisabled: true,
   },
 };
 
-export const DefaultError: StoryObj<SelectProps> = {
+export const Error: StoryObj<SelectProps> = {
   ...Template,
   args: {
     errorMessage: "Select your destination.",
   },
 };
 
-export const DefaultObject: StoryObj<SelectProps> = {
+export const OptionsObject: StoryObj<SelectProps> = {
   ...ObjectTemplate,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Select can accept `options` as a flat array, an array of objects, or both. This demonstrates an array of objects with `value` and `name`.",
+      },
+    },
+  },
 };
 
-export const DefaultGrouped: StoryObj<SelectProps> = {
+export const OptionsGrouped: StoryObj<SelectProps> = {
   ...GroupTemplate,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Objects with `type: "heading"` will have their `text` displayed as a heading.',
+      },
+    },
+  },
 };
 
-export const Multi: StoryObj<SelectProps> = {
+export const MultiSelect: StoryObj<SelectProps> = {
   ...Template,
   args: {
     isMultiSelect: true,
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Status/Status.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Status/Status.mdx
deleted file mode 100644
index 8e48bbbb4b..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Status/Status.mdx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./Status.stories";
-
-<Meta title="MUI Components/Status" anchor />
-
-# Status
-
-<Canvas>
-  <Story of={Stories.SuccessLamp} />
-</Canvas>
-
-## Behavior
-
-Status is not an interactive element. It is only intended to inform. If a Status indicates that a user should take action, be sure to provide the appropriate controls.
-
-## States
-
-There are four states of Status available: Default, Success, Caution, and Danger. Each of these states is available in two indicator styles: **lamp** and **pill**.
-
-### Default
-
-Default statuses are gray and should be used to indicate states like "Paused", "Not started", or "Queued".
-
-<Canvas>
-  <Story of={Stories.DefaultLamp} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.DefaultPill} />
-</Canvas>
-
-### Success
-
-Success statuses are green and should be used to indicate states like "Complete", "Active", or "Service operational".
-
-<Canvas>
-  <Story of={Stories.SuccessLamp} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.SuccessPill} />
-</Canvas>
-
-### Warning
-
-Warning statuses are yellow and should be used to indicate states like "Attention suggested" or "Service degradation".
-
-<Canvas>
-  <Story of={Stories.WarningLamp} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.WarningPill} />
-</Canvas>
-
-### Error
-
-Error statuses are red and should be used to indicate states like "Error", "Failure", or "Service disruption".
-
-<Canvas>
-  <Story of={Stories.ErrorLamp} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.ErrorPill} />
-</Canvas>
-
-## Usage
-
-Use Status to communicate the state of a discrete item, such as a server or individual process. Both labeled and unlabeled variants are acceptable, but should follow the associated guidelines.
-
-### Within Table
-
-Table supports Status as a content type. Status requires a distinct column and should not be mixed with other content types.
-
-## Content guidelines
-
-Statuses content should provide a quick overview. Limit Status descriptor and label text to three words or less. Use sentence casing for both.
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Status/Status.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Status/Status.stories.tsx
index 65804c97e9..bc84255196 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Status/Status.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Status/Status.stories.tsx
@@ -11,7 +11,12 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
-import { Status, StatusProps } from "@okta/odyssey-react-mui";
+import {
+  Status,
+  StatusProps,
+  statusSeverityValues,
+  statusVariantValues,
+} from "@okta/odyssey-react-mui";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 
 const storybookMeta: Meta<StatusProps> = {
@@ -20,14 +25,30 @@ const storybookMeta: Meta<StatusProps> = {
   argTypes: {
     label: {
       control: "text",
+      description: "The text describing the Status",
     },
     severity: {
       control: "radio",
-      options: ["default", "error", "info", "success", "warning"],
+      options: statusSeverityValues,
+      description: "The severity of the Status, as indicated by its styling",
+      table: {
+        type: {
+          summary: statusSeverityValues.join(" | "),
+        },
+        defaultValue: "default",
+      },
     },
     variant: {
       control: "radio",
-      options: ["lamp", "pill"],
+      options: statusVariantValues,
+      description:
+        "Whether the Status is displayed uncontained (`lamp`) or contained (`pill`)",
+      table: {
+        type: {
+          summary: statusVariantValues.join(" | "),
+        },
+        defaultValue: "lamp",
+      },
     },
   },
   args: {
@@ -36,6 +57,7 @@ const storybookMeta: Meta<StatusProps> = {
     severity: "default",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.mdx
index b5e66234e6..c85dafa1db 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.mdx
@@ -1,45 +1,28 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
+import {
+  Canvas,
+  Meta,
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from "@storybook/addon-docs";
 import { Story } from "@storybook/blocks";
-import * as Stories from "./Tabs.stories";
+import * as TabsStories from "./Tabs.stories";
 
-<Meta title="MUI Components/Tabs" anchor />
+<Meta of={TabsStories} />
 
-# Tabs
+<Title of={TabsStories} />
+<Subtitle of={TabsStories} />
+<Description of={TabsStories} />
+<Primary of={TabsStories} />
 
-Navigation component used to organize content by grouping similar information on the same page. They allow content to be viewed without having to navigate away from that page or route.
+A full composition includes a `<Tabs>` component with the `tabs` prop set to an array of two or more objects
+that use the following props:
 
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-## Behavior
-
-Users interact with Tabs as they would a button, the main difference is the outcome. By default, the first Tab is active and the associated content displayed in the Tab panel. Upon selecting a different Tab, the Tab indicator appears on the selected Tab. The Tab panel will then update to show the new content.
-
-Additionally, the Tab element is keyboard-navigable (See [Accessibility: Keyboard Support](#keyboard-support))
-
-## Usage
-
-Tabs were created to shorten long pages. Before you use these, we'd recommend laying
-out all of the content on your page out first. From there, figure out common themes and
-see what could be grouped together. Those themes should become your Tabs.
-
-### Relate to the page title
-
-Tabs are not navigation. Meaning they don't take you from place to place. Rather, they are meant for context switching related to the page.
-
-### Position above major content
-
-Tabs are best used at the top of the page or situated above the content it's related to. This will help establish hierarchy.
-
-### Don't nest Tabs
-
-Use Tab sparingly. Limit the Tab component to one per page, and refrain from including a second set of Tabs within a Tabpanel.
-
-## Content Guidelines
-
-- Don't have more than 8 Tabs in a Tablist
-- Don't add icons to Tabs
+<Controls />
+<Stories />
 
 ## Accessibility
 
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.stories.tsx
index 3382c1410f..cbeb42dae8 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.stories.tsx
@@ -24,26 +24,68 @@ import { expect } from "@storybook/jest";
 import { axeRun } from "../../../axe-util";
 import { screen } from "@storybook/testing-library";
 import type { PlaywrightProps } from "../storybookTypes";
+import { icons } from "../../../../.storybook/components/iconUtils";
 
 const storybookMeta: Meta<TabsProps & TabItemProps> = {
   title: "MUI Components/Tabs",
   component: Tabs,
   argTypes: {
-    isDisabled: {
-      control: "boolean",
-      defaultValue: false,
+    children: {
+      control: "text",
+      description: "The content of the tab item",
+      table: {
+        type: {
+          summary: "ReactNode",
+        },
+      },
     },
     startIcon: {
-      control: "text",
-      defaultValue: null,
+      control: {
+        type: "select",
+      },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display at the start of the tab item",
+      table: {
+        type: {
+          summary: "<Icon />",
+        },
+      },
     },
-    value: {
+    label: {
       control: "text",
+      description: "The label text for the tab item",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    label: {
+    isDisabled: {
+      control: "boolean",
+      description: "If `true`, the tab item is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: false,
+      },
+    },
+    value: {
       control: "text",
+      description: "The value associated with the tab item",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
+  args: {
+    value: "stars",
+    label: "Stars",
+    children: "This is the tab content. This tab happens to be about stars.",
+  },
   decorators: [MuiThemeDecorator],
 };
 
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
deleted file mode 100644
index 693c602126..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./Tag.stories";
-
-<Meta title="MUI Components/Tag" anchor />
-
-# Tag
-
-Use tags to help describe and differentiate an entity or object. Think of them as “adjectives” in your UI toolbox that make navigating and parsing content easier.
-
-TagList UI is simple. It consists of typography and spacing within a neutral container. Color, weight, and spacing help distinguish it from Button.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.List} />
-</Canvas>
-
-## States & variants
-
-### Clickable Tags
-
-<Canvas>
-  <Story of={Stories.Clickable} />
-</Canvas>
-
-### Removable Tags
-
-<Canvas>
-  <Story of={Stories.Removable} />
-</Canvas>
-
-### Tags with Icons
-
-<Canvas>
-  <Story of={Stories.Icon} />
-</Canvas>
-
-### Disabled Tags
-
-<Canvas>
-  <Story of={Stories.Disabled} />
-</Canvas>
-
-## Usage
-
-Tags are a great way for users to contextualize and understand the content they are looking at. They're also helpful at organizing content across multiple experiences.
-
-As stated above, tags are for describing an entity or object, not representing one. You may associate one or many tags with an entity.
-
-For example, "Shuttle" may be an individual type of spaceship that has the tags "Winged", "Reusable", and "NASA".
-
-### Describe an object, don't be the object
-
-Use tags as descriptors paired with a particular object. These descriptors may be adjectives, categories, or other associations including proper nouns.
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx
index 8f70306f7c..b1c5e803d4 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tag/Tag.stories.tsx
@@ -14,6 +14,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Tag, TagList, TagProps } from "@okta/odyssey-react-mui";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import { GroupIcon } from "@okta/odyssey-react-mui";
+import { icons } from "../../../../.storybook/components/iconUtils";
 
 const storybookMeta: Meta<TagProps> = {
   title: "MUI Components/Tag",
@@ -22,20 +23,58 @@ const storybookMeta: Meta<TagProps> = {
     actions: { argTypesRegex: null },
   },
   argTypes: {
-    label: {
-      control: "text",
-    },
     icon: {
-      control: "text",
+      control: {
+        type: "select",
+      },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display alongside the label",
+      table: {
+        type: {
+          summary: "<Icon />",
+        },
+      },
     },
     isDisabled: {
       control: "boolean",
+      description: "If `true`, the tag is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: false,
+      },
+    },
+    label: {
+      control: "text",
+      description: "The label text for the tag",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     onClick: {
+      control: "obj",
       action: true,
+      description: "Callback fired when the tag is clicked",
+      table: {
+        type: {
+          summary: "func",
+        },
+      },
     },
     onRemove: {
+      control: "obj",
       action: true,
+      description:
+        "Callback fired when the remove button of the tag is clicked",
+      table: {
+        type: {
+          summary: "func",
+        },
+      },
     },
   },
   args: {
@@ -44,6 +83,7 @@ const storybookMeta: Meta<TagProps> = {
     onClick: undefined,
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.mdx
deleted file mode 100644
index da824cdc30..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.mdx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./TextField.stories";
-
-<Meta title="MUI Components/Forms/TextField" anchor />
-
-# Text Field
-
-Text fields allow users to edit and input data.
-
-## Variants
-
-### Default
-
-This default serves as the basis for our Text Inputs.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-### Textarea
-
-Textareas should be used for multi-line text inputs. As the user types the field will grow vertically to accommodate the new lines.
-
-<Canvas>
-  <Story of={Stories.Multiline} />
-</Canvas>
-
-### Hints
-
-<Canvas>
-  <Story of={Stories.Hint} />
-</Canvas>
-
-### Adornments
-
-Adornments may be added to inputs to create additional affordances or behavior. Odyssey supports icon and text adornments.
-
-<Canvas>
-  <Story of={Stories.Tel} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Adornment} />
-</Canvas>
-
-## States
-
-Text fields support the following states: enabled, hover, focus, disabled, read-only, optional, and invalid.
-
-### Enabled
-
-Text fields in their "normal" state are considered enabled. They are ready for user interaction.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-### Optional
-
-Text fields in Odyssey are assumed to be required by default. Setting required to `false` will introduce an "Optional" affordance.
-
-<Canvas>
-  <Story of={Stories.Optional} />
-</Canvas>
-
-### Disabled
-
-Disabled inputs are unavailable for interaction and cannot be focused. They can be used when input is disallowed, possibly due to a system state or access restrictions.
-
-The values of disabled inputs will not be submitted.
-
-<Canvas>
-  <Story of={Stories.Disabled} />
-</Canvas>
-
-### Read-only
-
-Similar to disabled inputs, users cannot modify the values of read-only inputs. However, users can otherwise interact with read-only inputs and select their values for copying.
-
-This state can be helpful when displaying computed or third-party values, or when a submitted form is being processed.
-
-The values of read-only inputs will be submitted.
-
-<Canvas>
-  <Story of={Stories.ReadOnly} />
-</Canvas>
-
-### Invalid
-
-The invalid state is for inputs with incorrect values or values of the wrong format.
-
-When indicating a validation error, please use a Field Error label to indicate the nature of the error. Color alone is not an accessible way to signify that something has gone wrong.
-
-<Canvas>
-  <Story of={Stories.Error} />
-</Canvas>
-
-## Input Types
-
-Text fields support most free-form content, but we offer specific support for email, telephone numbers, and passwords.
-
-### Email
-
-There are no specific UI changes for email addresses, but inputs of this type will validate that the address is properly formatted.
-
-<Canvas>
-  <Story of={Stories.Email} />
-</Canvas>
-
-### Tel
-
-Unlike email fields, tel inputs are not automatically validated because global formats are so varied.
-
-<Canvas>
-  <Story of={Stories.Tel} />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx
index 519a945d57..7c005b9b2c 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx
@@ -15,6 +15,7 @@ import {
   InputAdornment,
   TextField,
   TextFieldProps,
+  textFieldTypeValues,
 } from "@okta/odyssey-react-mui";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -25,64 +26,181 @@ const storybookMeta: Meta<TextFieldProps> = {
   argTypes: {
     autoCompleteType: {
       control: "text",
-    },
-    hasInitialFocus: {
-      control: "boolean",
-    },
-    isDisabled: {
-      control: "boolean",
+      description:
+        "This prop helps users to fill forms faster, especially on mobile devices. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     endAdornment: {
       control: "text",
+      description: "End `InputAdornment` for this component",
+      table: {
+        type: {
+          summary: "string | ReactElement<typeof Icon>",
+        },
+      },
     },
     errorMessage: {
       control: "text",
+      description:
+        "If `error` is not undefined, the `input` will indicate an error",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    hasInitialFocus: {
+      control: "boolean",
+      description: "If `true`, the component will receive focus automatically",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     hint: {
       control: "text",
+      description: "The helper text content",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     id: {
       control: "text",
+      description: "The id of the `input` element",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
-    label: {
-      control: "text",
+    isDisabled: {
+      control: "boolean",
+      description: "If `true`, the component is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     isMultiline: {
       control: "boolean",
+      description: "If `true`, a TextareaAutosize element is rendered",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    isOptional: {
+      control: "boolean",
+      description: "If `true`, the `input` element is not required",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    isReadOnly: {
+      control: "boolean",
+      description: "It prevents the user from changing the value of the field",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    label: {
+      control: "text",
+      description: "The label for the `input` element",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     onBlur: {
-      control: "function",
+      control: null,
+      description: "Callback fired when the `input` element loses focus",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
     },
     onChange: {
-      control: "function",
+      control: null,
+      description: "Callback fired when the value is changed",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
     },
     onFocus: {
-      control: "function",
-    },
-    isOptional: {
-      control: "boolean",
+      control: null,
+      description: "Callback fired when the `input` element gets focus",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
     },
     placeholder: {
       control: "text",
-    },
-    isReadOnly: {
-      control: "boolean",
+      description:
+        "The short hint displayed in the `input` before the user enters a value",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     startAdornment: {
       control: "text",
+      description: "Start `InputAdornment` for this component",
+      table: {
+        type: {
+          summary: "string | ReactElement<typeof Icon>",
+        },
+      },
     },
     type: {
-      control: "select",
-      options: ["email", "number", "tel", "text", "url"],
+      options: textFieldTypeValues,
+      control: { type: "radio" },
+      description:
+        "Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)",
+      table: {
+        type: {
+          summary: textFieldTypeValues.join(" | "),
+        },
+      },
     },
     value: {
       control: "text",
+      description:
+        "The value of the `input` element, required for a controlled component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
     label: "Destination",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
@@ -96,6 +214,13 @@ export const Default: StoryObj<TextFieldProps> = {
 };
 
 export const Disabled: StoryObj<TextFieldProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story: "The values of disabled inputs will not be submitted.",
+      },
+    },
+  },
   args: {
     isDisabled: true,
     value: "Earth",
@@ -109,6 +234,13 @@ export const Optional: StoryObj<TextFieldProps> = {
 };
 
 export const ReadOnly: StoryObj<TextFieldProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story: "The values of readonly inputs will be submitted.",
+      },
+    },
+  },
   args: {
     isReadOnly: true,
     value: "Earth",
@@ -128,6 +260,13 @@ export const Hint: StoryObj<TextFieldProps> = {
 };
 
 export const Adornment: StoryObj<TextFieldProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story: "TextField supports both `string` and `<Icon />` adornments.",
+      },
+    },
+  },
   args: {
     label: "Cargo weight",
     endAdornment: <InputAdornment position="end">kg</InputAdornment>,
@@ -144,6 +283,14 @@ export const Email: StoryObj<TextFieldProps> = {
 };
 
 export const Multiline: StoryObj<TextFieldProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "As the user types, the field will grow vertically to accommodate the new lines.",
+      },
+    },
+  },
   args: {
     autoCompleteType: "shipping street-address",
     label: "Permanent residence",
@@ -152,6 +299,14 @@ export const Multiline: StoryObj<TextFieldProps> = {
 };
 
 export const Tel: StoryObj<TextFieldProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "TextFields of type `tel` are not automatically validated because global formats are so varied.",
+      },
+    },
+  },
   args: {
     autoCompleteType: "mobile tel",
     label: "Phone number",
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.mdx
deleted file mode 100644
index 38e63bed5e..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.mdx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as ToastStories from "./Toast.stories";
-
-<Meta title="MUI Components/Alerts/Toast" anchor />
-
-# Toast
-
-Toasts are transient, non-disruptive messages that provide at-a-glance, asynchronous feedback or updates.
-
-## Anatomy
-
-Each Toast is made up of up to three parts: Severity, Title, and Message.
-
-<dl>
-  <dt>Severity</dt>
-  <dd>
-    This indicates the toast's status as Info, Success, Warning, or Error.
-  </dd>
-  <dt>Content</dt>
-  <dd>
-    Be concise - less than three lines of content - as your Toast will soon
-    vanish!
-  </dd>
-</dl>
-
-<Canvas>
-  <Story of={ToastStories.Info} />
-</Canvas>
-
-`Toast` handles the visual appearance and show/hide logic, but not positioning. To have a `Toast` positioned correctly, it must be wrapped inside
-a `ToastStack`.
-
-There should only be one `ToastStack` per screen, regardless of how many `Toast`s there are, since a single `ToastStack` can accept multiple `Toast`s as
-children and will manage positioning accordingly.
-
-## Behavior
-
-Toasts may be triggered by different types of events, but they are always transient. With this in mind, Toasts should not include any interactive or long-form content.
-
-The Toast pen will take care of positioning and layout automatically. Toasts will appear in the bottom, ending corner above all other content.
-
-If multiple Toasts are triggered in a short time, they will stack in order of appearance. For visual consistency, Toasts will resize to match the largest Toast visible.
-
-### Dismissible
-
-<Canvas>
-  <Story of={ToastStories.Dismissible} />
-</Canvas>
-
-## Severity
-
-### Info
-
-Use Info Toasts to surface neutral information to users.
-
-This is the default variant for this component.
-
-<Canvas>
-  <Story of={ToastStories.Info} />
-</Canvas>
-
-### Success
-
-Use Success Toasts to inform users of successful or completed processes.
-
-<Canvas>
-  <Story of={ToastStories.Success} />
-</Canvas>
-
-### Warning
-
-Use Warning Toasts to inform users of tasks or processes that may need their attention.
-
-When using the Warning variant, ensure the user does not need more context than you can give in the space available.
-
-<Canvas>
-  <Story of={ToastStories.Warning} />
-</Canvas>
-
-### Error
-
-Use Error Toasts to inform users that an error has occurred.
-
-When using a Error Toast, be sure that the error is also logged elsewhere, so a user can refer to it later.
-
-Do not use Error Toasts for in-page errors such as invalid form fields. Instead, use static messaging the user can refer to while addressing their error.
-
-<Canvas>
-  <Story of={ToastStories.ErrorToast} />
-</Canvas>
-
-### Multiple Toasts
-
-`ToastStack` can accept multiple `Toast`s as children and will handle the positioning of them.
-
-## References
-
-<figure className="ods-table--figure">
-  <figcaption className="ods-table--figcaption">Related Components</figcaption>
-  <table className="ods-table">
-    <caption>Differences between the available alert components</caption>
-    <thead>
-      <tr>
-        <th scope="column">Component</th>
-        <th scope="column">Available Variants</th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-dynamic">Dynamic</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-dynamic"
-              role="tooltip"
-            >
-              May be inserted after page load
-            </aside>
-          </span>
-        </th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-transient">Transient</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-transient"
-              role="tooltip"
-            >
-              Disappears without user interaction
-            </aside>
-          </span>
-        </th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-dismissible">Dismissible</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-dismissible"
-              role="tooltip"
-            >
-              May be dismissed by the user
-            </aside>
-          </span>
-        </th>
-        <th scope="column">
-          <span className="has-ods-tooltip">
-            <abbr aria-describedby="tip-actionable">Actionable</abbr>
-            <aside
-              className="ods-tooltip is-ods-tooltip-top"
-              id="tip-actionable"
-              role="tooltip"
-            >
-              May include actions or links
-            </aside>
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">
-          <a href="?path=/docs/components-alerts-banner--info#banner">Banner</a>
-        </th>
-        <td>Info, Warning, Error</td>
-        <td>No</td>
-        <td>No</td>
-        <td>Yes</td>
-        <td>Yes</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <a href="?path=/docs/components-alerts-infobox--info#infobox">
-            Infobox
-          </a>
-        </th>
-        <td>Success, Warning, Error</td>
-        <td>Yes</td>
-        <td>No</td>
-        <td>No</td>
-        <td>Yes</td>
-      </tr>
-      <tr>
-        <th scope="row">Toast</th>
-        <td>Info, Success, Warning, Error</td>
-        <td>Yes</td>
-        <td>Yes</td>
-        <td>Optional</td>
-        <td>No</td>
-      </tr>
-    </tbody>
-  </table>
-</figure>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.stories.tsx
index a4bf4094e0..112b507f17 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.stories.tsx
@@ -11,7 +11,14 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
-import { Button, Toast, ToastProps, ToastStack } from "@okta/odyssey-react-mui";
+import {
+  Button,
+  Toast,
+  ToastProps,
+  ToastStack,
+  toastRoleValues,
+  toastSeverityValues,
+} from "@okta/odyssey-react-mui";
 import { useCallback, useState } from "react";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -26,26 +33,92 @@ const meta: Meta<ToastProps> = {
   argTypes: {
     autoHideDuration: {
       control: "number",
+      description:
+        "If set, this determines how long the toast should appear before automatically disappearing in milliseconds. It will only take effect if the toast is not dismissible. If left blank, it defaults to 6000",
+      table: {
+        type: {
+          summary: "number",
+        },
+        defaultValue: 6000,
+      },
     },
     isDismissable: {
       control: "boolean",
+      description: "If `true`, the alert will include a close button",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: false,
+      },
+    },
+    isVisible: {
+      control: "boolean",
+      description: "If true, the Toast is visible",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     linkText: {
       control: "text",
+      description:
+        "If linkUrl is defined, this is the text of the link. If left blank, it defaults to 'Learn more'. Note that linkText does nothing if linkUrl is not defined",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     linkUrl: {
       control: "text",
+      description: "If defined, the alert will include a link to the URL",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    onHide: {
+      control: null,
+      description: "An optional function to run when the Toast is closed",
+      table: {
+        type: {
+          summary: "func",
+        },
+        defaultValue: "",
+      },
     },
     role: {
-      control: "radio",
-      options: ["alert", "status", undefined],
+      options: toastRoleValues,
+      control: { type: "radio" },
+      description:
+        "Sets the ARIA role of the alert ('status' for something that dynamically updates, 'alert' for errors, null for something unchanging)",
+      table: {
+        type: {
+          summary: toastRoleValues.join(" | "),
+        },
+      },
     },
     severity: {
-      control: "radio",
-      options: ["error", "info", "success", "warning"],
+      options: toastSeverityValues,
+      control: { type: "radio" },
+      description: "Determine the color and icon of the alert",
+      table: {
+        type: {
+          summary: toastSeverityValues.join(" | "),
+        },
+      },
     },
     text: {
       control: "text",
+      description: "The text content of the alert",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
@@ -56,6 +129,7 @@ const meta: Meta<ToastProps> = {
     autoHideDuration: 10000,
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default meta;
@@ -137,6 +211,7 @@ export const Info: StoryObj<ToastProps> = {
 
 export const ErrorToast: StoryObj<ToastProps> = {
   ...Single,
+  name: "Error",
   args: {
     text: "Security breach in Hangar 18",
     role: "alert",
@@ -184,6 +259,14 @@ export const Dismissible: StoryObj<ToastProps> = {
 };
 
 export const MultipleToasts: StoryObj<ToastProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`Toast` handles the visual appearance and show/hide logic, but not positioning. To have a Toast positioned correctly, it must be wrapped inside a `ToastStack`. There should only be one ToastStack per screen, regardless of how many Toasts there are, since a single ToastStack can accept multiple Toasts as children and will manage positioning accordingly.",
+      },
+    },
+  },
   render: function C() {
     const [toasts, setToasts] = useState([
       <Toast
@@ -228,7 +311,11 @@ export const MultipleToasts: StoryObj<ToastProps> = {
 
     return (
       <>
-        <Button onClick={addToast} text="Open another Toast" />
+        <Button
+          variant="primary"
+          onClick={addToast}
+          text="Open another Toast"
+        />
         <ToastStack>{toasts}</ToastStack>
       </>
     );
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.mdx
deleted file mode 100644
index 6b8b5b06bd..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./Tooltip.stories";
-
-<Meta title="MUI Components/Tooltip" anchor />
-
-# Tooltip
-
-A transient element that provides additional context for an element when it receives hover or focus.
-
-## Behavior
-
-Tooltips activate when a cursor hovers over an element, or an element receives focus. They can be triggered both by a parent container or a paired sibling.
-
-Tooltips vanish when a user stops hovering or changes focus. To maintain parity with the browser's tooltip behavior, they will not disappear otherwise.
-
-The cursor displayed when hovering UI is determined by the element, not the Tooltip.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
-
-## Usage
-
-Use Tooltips to help users understand unfamiliar objects or states that aren’t described by the visible UI.
-
-Well-placed tooltips provide info when needed and need minimal user effort to trigger.
-
-### Use when...
-
-#### No text label is present
-
-Use Tooltips with all controls that rely solely on iconography for communicating meaning.
-
-This is especially important to distinguish between visually or contextually similar UI. Tooltips are also helpful with rarely-used features or features with variant interpretations.
-
-<Canvas>
-  <Story of={Stories.Icon} />
-</Canvas>
-
-#### An element benefits from supplemental information
-
-This may be the case for disabled controls or inline content like abbreviations.
-
-Note: some disabled elements may need to be wrapped in a `span` or similar to allow interactions to trigger.
-
-<Canvas>
-  <Story of={Stories.Disabled} />
-</Canvas>
-
-### Don't use when...
-
-#### Users need to interact with the content
-
-Tooltips are transient by design, which makes them a bad candidate for interactive content. Do not include links, buttons, or other controls within a Tooltip.
-
-#### Rich content or imagery is required
-
-Tooltips should provide simple, textual descriptions. If your content requires formatting or imagery, users may have difficulty parsing them.
-
-### Positioning Tooltips
-
-When positioning a Tooltip, ensure:
-
-- The Tooltip is paired with the element being described.
-- You plan for responsive web design concerns.
-- Placement doesn't interfere with the object of interest or relevant information.
-- The Tooltip is always visible when activated, not cropped or off-page.
-
-<Canvas>
-  <Story of={Stories.Placement} />
-</Canvas>
-
-## Content
-
-### Succinct
-
-Tooltips should contain short, descriptive text. A single sentence or even a sentence fragment is ideal.
-
-The content should be new information. Tooltips should not repeat copy from visible UI.
-
-### Static
-
-Tooltips should contain static content. Users don't expect, and are unlikely to notice, dynamic changes to Tooltip contents.
-
-**Exception:** Tooltips may contain dynamic content if two requirements are met:
-
-- The tooltip is present at all times during the content change
-- The tooltip is reporting real-time change (e.g. "Copy" changes to "Copied!" on a click-to-copy button)
-
-## Accessibility
-
-### Animation
-
-Per [ARIA guidelines](https://www.w3.org/TR/wai-aria-1.1/#tooltip), our tooltips triggered by hovering or focusing UI and employ a short delay before animating.
-
-### Tooltip as a label
-
-By default, assistive technologies will treat the Tooltip content as a label.
-
-If you want the tooltip to act as a description instead, you can pass `describeChild`. Do not use `describeChild` if the tooltip provides the only visual label. This will result in an a11y violation.
-
-## Responsive considerations
-
-Focusing and hovering are typically unavailable on touchscreen devices. Some devices may also trigger a "click" at the same time. For this reason, Tooltips may be completely invisible for users of these devices.
-
-Consider fallback alternatives on a case-by-case basis.
-
-When possible, provide inline text that becomes visible on touchscreen devices. Otherwise, a fixed-position fallback is provided for mobile devices.
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx
index 85c0c99601..43a5f4733e 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx
@@ -22,38 +22,46 @@ import { userEvent, within } from "@storybook/testing-library";
 import { axeRun } from "../../../axe-util";
 import type { PlaywrightProps } from "../storybookTypes";
 
-import TooltipMdx from "./Tooltip.mdx";
-
 const storybookMeta: Meta<TooltipProps> = {
   title: "MUI Components/Tooltip",
   component: Tooltip,
-  parameters: {
-    docs: {
-      page: TooltipMdx,
-    },
-  },
   argTypes: {
     children: {
-      control: { type: "object" },
+      control: "obj",
+      description: "The content that will trigger the tooltip",
+      table: {
+        type: {
+          summary: "ReactElement",
+        },
+      },
     },
     ariaType: {
-      control: {
-        options: ["label", "description"],
-        type: "radio",
+      options: ["description", "label"],
+      control: { type: "radio" },
+      description: "The type of ARIA attribute to use",
+      table: {
+        type: {
+          summary: "description | label",
+        },
       },
-      description:
-        "Choose `description` if the tooltip is an ARIA description of the child element. Otherwise, choose `label`. This must be explicitly set.",
     },
     text: {
-      control: {
-        type: "text",
+      control: "text",
+      description: "The text to display in the tooltip",
+      table: {
+        type: {
+          summary: "string",
+        },
       },
     },
     placement: {
       options: ["top", "right", "bottom", "left"],
-      control: {
-        type: "radio",
-        defaultValue: "top",
+      control: { type: "radio" },
+      description: "The placement of the tooltip",
+      table: {
+        type: {
+          summary: "top | right | bottom | left",
+        },
       },
     },
   },
@@ -61,6 +69,7 @@ const storybookMeta: Meta<TooltipProps> = {
     ariaType: "label",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;
@@ -93,7 +102,7 @@ const showTooltip =
 export const Default: StoryObj<TooltipProps> = {
   ...Template,
   args: {
-    children: <Button text="Launch" />,
+    children: <Button variant="primary" text="Launch" />,
     ariaType: "description",
     placement: "top",
     text: "This will begin a 10-second countdown",
@@ -136,16 +145,16 @@ export const Placement: StoryObj<TooltipProps> = {
     return (
       <>
         <Tooltip text="Top" placement="top" ariaType="label">
-          <Button text="Top" />
+          <Button variant="primary" text="Top" />
         </Tooltip>
         <Tooltip text="Right" placement="right" ariaType="label">
-          <Button text="Right" />
+          <Button variant="primary" text="Right" />
         </Tooltip>
         <Tooltip text="Bottom" placement="bottom" ariaType="label">
-          <Button text="Bottom" />
+          <Button variant="primary" text="Bottom" />
         </Tooltip>
         <Tooltip text="Left" placement="left" ariaType="label">
-          <Button text="Left" />
+          <Button variant="primary" text="Left" />
         </Tooltip>
       </>
     );
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.mdx
deleted file mode 100644
index ff9cdd412c..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./Typography.stories";
-
-<Meta title="MUI Components/Typography" anchor />
-
-# Typography
-
-A set of pre-defined text styles for headers, body copy, and links designed for readability and clarity of hierarchy.
-
-## Hierarchy
-
-Typographical hierarchy indicates importance of content. Through size and weight, a strong hierarchy can provide clarity to a user to easily understand which level of the content they're on. Sections need subsections, and those subsections may also need their own subsections. Visually, a user should be able to clearly tell a parent section from a child section simply by the relationship in size and weight between headings.
-
-## Type styles
-
-To ensure consistency in typography sizes throughout Okta touchpoints, we've created a custom type scale paired with appropriate weights and line-heights.
-
-### Body
-
-Odyssey ships with a base font-size of `14px`. We also offer a smaller "caption" style for subtext, figure captions, and other tertiary content.
-
-<Canvas>
-  <Story of={Stories.Body} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Caption} />
-</Canvas>
-
-### Headings
-
-Headings are used to describe the main idea of a page, a section, or content that follows it. By default, header tags (`h1` through `h6`) use the corresponding title size.
-
-<Canvas>
-  <Story of={Stories.Heading1} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Heading2} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Heading3} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Heading4} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Heading5} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Heading6} />
-</Canvas>
-
-<Canvas>
-  <Story of={Stories.Legend} />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.stories.tsx
index a6e9f0cda8..a9b6bc272a 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.stories.tsx
@@ -41,6 +41,7 @@ const storybookMeta: Meta<TypographyProps> = {
     children: "Spice is vital for space travel.",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;