diff --git a/.changeset/olive-forks-hang.md b/.changeset/olive-forks-hang.md
new file mode 100644
index 0000000000..c9173b74f6
--- /dev/null
+++ b/.changeset/olive-forks-hang.md
@@ -0,0 +1,5 @@
+---
+"@twilio-paste/progress-bar": patch
+---
+
+[Progress bar] Improve TsDoc type annotations
diff --git a/packages/paste-core/components/progress-bar/src/index.tsx b/packages/paste-core/components/progress-bar/src/index.tsx
index f4ab14930c..77039a83e1 100644
--- a/packages/paste-core/components/progress-bar/src/index.tsx
+++ b/packages/paste-core/components/progress-bar/src/index.tsx
@@ -1,2 +1,4 @@
-export * from "./ProgressBar";
-export * from "./ProgressBarLabel";
+export { ProgressBar } from "./ProgressBar";
+export type { ProgressBarProps } from "./ProgressBar";
+export { ProgressBarLabel } from "./ProgressBarLabel";
+export type { ProgressBarLabelProps } from "./ProgressBarLabel";
diff --git a/packages/paste-core/components/progress-bar/stories/index.stories.tsx b/packages/paste-core/components/progress-bar/stories/index.stories.tsx
index 958d6a81fe..bb965057ab 100644
--- a/packages/paste-core/components/progress-bar/stories/index.stories.tsx
+++ b/packages/paste-core/components/progress-bar/stories/index.stories.tsx
@@ -1,8 +1,9 @@
 import { Anchor } from "@twilio-paste/anchor";
 import { Box } from "@twilio-paste/box";
 import { Button } from "@twilio-paste/button";
-import { Form, FormControl } from "@twilio-paste/form";
 import { HelpText } from "@twilio-paste/help-text";
+import { AcceptIcon } from "@twilio-paste/icons/esm/AcceptIcon";
+import { Separator } from "@twilio-paste/separator";
 import { useUID } from "@twilio-paste/uid-library";
 import * as React from "react";
 
@@ -13,8 +14,6 @@ export default {
   title: "Components/ProgressBar",
 };
 
-const NumberFormatter = new Intl.NumberFormat("en-US");
-
 export const Default = (): React.ReactNode => {
   const progressBarId = useUID();
   const helpTextId = useUID();
@@ -31,7 +30,7 @@ export const Default = (): React.ReactNode => {
             setRerun(0);
             return 100;
           }
-          const newValue = previousValue + Math.random() * 12;
+          const newValue = previousValue + Math.random() * 20;
 
           /*
            * intentionally causes another loop for UX so that the
@@ -48,11 +47,16 @@ export const Default = (): React.ReactNode => {
   }, [rerun]);
 
   return (
-    <Box maxWidth="600px">
-      <Form>
-        <FormControl>
+    <Box maxWidth="400px">
+      {value >= 100 ? (
+        <Box marginBottom="space90" display="flex" alignItems="center" columnGap="space30">
+          <AcceptIcon decorative size="sizeIcon70" color="colorTextSuccess" />
+          Your submission has been approved!
+        </Box>
+      ) : (
+        <Box marginBottom="space90">
           <ProgressBarLabel htmlFor={progressBarId} valueLabel={`${Math.round(value)}%`}>
-            Downloading more ram
+            Reviewing submission
           </ProgressBarLabel>
           <ProgressBar
             id={progressBarId}
@@ -60,38 +64,38 @@ export const Default = (): React.ReactNode => {
             value={value}
             valueLabel={`${Math.round(value)}%`}
           />
-          <HelpText id={helpTextId}>
-            Increasing your ram helps your computer run faster. {NumberFormatter.format(value)}% complete.
-          </HelpText>
-        </FormControl>
-        <Button
-          variant="primary"
-          onClick={() => {
-            setRerun(1);
-            setValue(0);
-          }}
-          disabled={rerun === 1}
-        >
-          Restart Progress
-        </Button>
-      </Form>
+          <HelpText id={helpTextId}>Automatically reviewing your submission with our AI agents.</HelpText>
+        </Box>
+      )}
+      <Button
+        variant="primary"
+        onClick={() => {
+          setRerun(1);
+          setValue(0);
+        }}
+        disabled={rerun === 1}
+      >
+        Restart Progress
+      </Button>
     </Box>
   );
 };
 
 export const Indeterminate = (): React.ReactNode => {
-  const progressBarId = useUID();
+  const progressBarIdA = useUID();
+  const progressBarIdB = useUID();
   const helpTextId = useUID();
 
   return (
-    <Box maxWidth="600px">
-      <Form>
-        <FormControl>
-          <ProgressBarLabel htmlFor={progressBarId}>Downloading more ram</ProgressBarLabel>
-          <ProgressBar id={progressBarId} aria-describedby={helpTextId} isIndeterminate />
-          <HelpText id={helpTextId}>Increasing your ram helps your computer run faster.</HelpText>
-        </FormControl>
-      </Form>
+    <Box maxWidth="400px">
+      <ProgressBarLabel htmlFor={progressBarIdA}>Uploading sunrise_video.mov</ProgressBarLabel>
+      <ProgressBar id={progressBarIdA} aria-describedby={helpTextId} isIndeterminate />
+      <Separator orientation="horizontal" verticalSpacing="space60" />
+      <ProgressBarLabel htmlFor={progressBarIdB}>Converting files</ProgressBarLabel>
+      <ProgressBar id={progressBarIdB} aria-describedby={helpTextId} isIndeterminate />
+      <HelpText id={helpTextId}>
+        Connection lost. Check your connection and refresh the page to get up-to-date information.
+      </HelpText>
     </Box>
   );
 };
@@ -101,18 +105,14 @@ export const ErrorStory = (): React.ReactNode => {
   const helpTextId = useUID();
 
   return (
-    <Box maxWidth="600px">
-      <Form>
-        <FormControl>
-          <ProgressBarLabel htmlFor={progressBarId} valueLabel="50%">
-            mtn_sunrise.png
-          </ProgressBarLabel>
-          <ProgressBar id={progressBarId} aria-describedby={helpTextId} value={50} valueLabel="50%" hasError />
-          <HelpText variant="error" id={helpTextId}>
-            Upload failed. <Anchor href="#">Retry upload</Anchor>
-          </HelpText>
-        </FormControl>
-      </Form>
+    <Box maxWidth="400px">
+      <ProgressBarLabel htmlFor={progressBarId} valueLabel="50%">
+        mtn_sunrise.png
+      </ProgressBarLabel>
+      <ProgressBar id={progressBarId} aria-describedby={helpTextId} value={50} valueLabel="50%" hasError />
+      <HelpText variant="error" id={helpTextId}>
+        Upload failed. <Anchor href="#">Retry upload</Anchor>
+      </HelpText>
     </Box>
   );
 };
@@ -123,18 +123,14 @@ export const DisabledStory = (): React.ReactNode => {
   const helpTextId = useUID();
 
   return (
-    <Box maxWidth="600px">
-      <Form>
-        <FormControl>
-          <ProgressBarLabel disabled htmlFor={progressBarId} valueLabel="50%">
-            Campaign registration
-          </ProgressBarLabel>
-          <ProgressBar id={progressBarId} aria-describedby={helpTextId} value={80} disabled />
-          <HelpText variant="default" id={helpTextId}>
-            Your profile is in review. You will receive an email about your application status in 3-5 business days.
-          </HelpText>
-        </FormControl>
-      </Form>
+    <Box maxWidth="400px">
+      <ProgressBarLabel disabled htmlFor={progressBarId} valueLabel="50%">
+        Campaign registration
+      </ProgressBarLabel>
+      <ProgressBar id={progressBarId} aria-describedby={helpTextId} value={80} disabled />
+      <HelpText variant="default" id={helpTextId}>
+        Your profile is in review. You will receive an email about your application status in 3-5 business days.
+      </HelpText>
     </Box>
   );
 };
@@ -144,16 +140,12 @@ export const LabelingApproaches = (): React.ReactNode => {
   const labelId = useUID();
 
   return (
-    <Box maxWidth="600px">
-      <Form>
-        <FormControl>
-          <Box id={labelId}>Using aria-labelledby</Box>
-          <ProgressBar aria-labelledby={labelId} value={30} />
-
-          <Box marginTop="space40">Using aria-label</Box>
-          <ProgressBar aria-label="Using aria-label" value={50} />
-        </FormControl>
-      </Form>
+    <Box maxWidth="400px">
+      <Box id={labelId}>Using aria-labelledby</Box>
+      <ProgressBar aria-labelledby={labelId} value={30} />
+
+      <Box marginTop="space40">Using aria-label</Box>
+      <ProgressBar aria-label="Using aria-label" value={50} />
     </Box>
   );
 };
@@ -162,15 +154,11 @@ export const CustomRange = (): React.ReactNode => {
   const progressBarId = useUID();
 
   return (
-    <Box maxWidth="600px">
-      <Form>
-        <FormControl>
-          <ProgressBarLabel htmlFor={progressBarId} valueLabel="21 of 30">
-            Friends coming to your birthday
-          </ProgressBarLabel>
-          <ProgressBar id={progressBarId} value={21} maxValue={30} />
-        </FormControl>
-      </Form>
+    <Box maxWidth="400px">
+      <ProgressBarLabel htmlFor={progressBarId} valueLabel="688KB of 834KB">
+        mtn_sunrise.png
+      </ProgressBarLabel>
+      <ProgressBar id={progressBarId} value={688} maxValue={834} />
     </Box>
   );
 };
@@ -179,21 +167,17 @@ export const CustomValueText = (): React.ReactNode => {
   const progressBarId = useUID();
 
   return (
-    <Box maxWidth="600px">
-      <Form>
-        <FormControl>
-          <ProgressBarLabel htmlFor={progressBarId} valueLabel="21 friends accepted">
-            Friends coming to your birthday
-          </ProgressBarLabel>
-          <ProgressBar
-            id={progressBarId}
-            value={21}
-            maxValue={30}
-            valueLabel="21 friends accepted"
-            formatOptions={{ maximumFractionDigits: 0, minimumFractionDigits: 0 }}
-          />
-        </FormControl>
-      </Form>
+    <Box maxWidth="400px">
+      <ProgressBarLabel htmlFor={progressBarId} valueLabel="21 friends accepted">
+        Friends coming to your birthday
+      </ProgressBarLabel>
+      <ProgressBar
+        id={progressBarId}
+        value={21}
+        maxValue={30}
+        valueLabel="21 friends accepted"
+        formatOptions={{ maximumFractionDigits: 0, minimumFractionDigits: 0 }}
+      />
     </Box>
   );
 };
diff --git a/packages/paste-core/components/progress-bar/type-docs.json b/packages/paste-core/components/progress-bar/type-docs.json
new file mode 100644
index 0000000000..b90c187774
--- /dev/null
+++ b/packages/paste-core/components/progress-bar/type-docs.json
@@ -0,0 +1,1627 @@
+{
+  "ProgressBar": {
+    "variant": {
+      "type": "AlertVariants",
+      "defaultValue": null,
+      "required": true,
+      "externalProp": false
+    },
+    "about": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "accessKey": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "aria-activedescendant": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application."
+    },
+    "aria-atomic": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
+    },
+    "aria-autocomplete": {
+      "type": "\"none\" | \"inline\" | \"list\" | \"both\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made."
+    },
+    "aria-busy": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user."
+    },
+    "aria-checked": {
+      "type": "boolean | \"true\" | \"false\" | \"mixed\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets."
+    },
+    "aria-colcount": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the total number of columns in a table, grid, or treegrid."
+    },
+    "aria-colindex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid."
+    },
+    "aria-colspan": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid."
+    },
+    "aria-controls": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element."
+    },
+    "aria-current": {
+      "type": "| boolean\n  | \"time\"\n  | \"true\"\n  | \"false\"\n  | \"page\"\n  | \"step\"\n  | \"location\"\n  | \"date\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the element that represents the current item within a container or set of related elements."
+    },
+    "aria-describedby": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) that describes the object."
+    },
+    "aria-details": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element that provides a detailed, extended description for the object."
+    },
+    "aria-disabled": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable."
+    },
+    "aria-dropeffect": {
+      "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates what functions can be performed when a dragged object is released on the drop target."
+    },
+    "aria-errormessage": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element that provides an error message for the object."
+    },
+    "aria-expanded": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed."
+    },
+    "aria-flowto": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order."
+    },
+    "aria-grabbed": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
+    },
+    "aria-haspopup": {
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"listbox\"\n  | \"tree\"\n  | \"grid\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element."
+    },
+    "aria-hidden": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element is exposed to an accessibility API."
+    },
+    "aria-invalid": {
+      "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the entered value does not conform to the format expected by the application."
+    },
+    "aria-keyshortcuts": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element."
+    },
+    "aria-label": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a string value that labels the current element."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies the element (or elements) that labels the current element."
+    },
+    "aria-level": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the hierarchical level of an element within a structure."
+    },
+    "aria-live": {
+      "type": "\"off\" | \"assertive\" | \"polite\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region."
+    },
+    "aria-modal": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether an element is modal when displayed."
+    },
+    "aria-multiline": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether a text box accepts multiple lines of input or only a single line."
+    },
+    "aria-multiselectable": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the user may select more than one item from the current selectable descendants."
+    },
+    "aria-orientation": {
+      "type": "\"horizontal\" | \"vertical\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous."
+    },
+    "aria-owns": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship."
+    },
+    "aria-placeholder": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format."
+    },
+    "aria-posinset": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
+    },
+    "aria-pressed": {
+      "type": "boolean | \"true\" | \"false\" | \"mixed\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"pressed\" state of toggle buttons."
+    },
+    "aria-readonly": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that the element is not editable, but is otherwise operable."
+    },
+    "aria-relevant": {
+      "type": "| \"text\"\n  | \"additions\"\n  | \"additions removals\"\n  | \"additions text\"\n  | \"all\"\n  | \"removals\"\n  | \"removals additions\"\n  | \"removals text\"\n  | \"text additions\"\n  | \"text removals\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified."
+    },
+    "aria-required": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates that user input is required on the element before a form may be submitted."
+    },
+    "aria-roledescription": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines a human-readable, author-localized description for the role of an element."
+    },
+    "aria-rowcount": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the total number of rows in a table, grid, or treegrid."
+    },
+    "aria-rowindex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid."
+    },
+    "aria-rowspan": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid."
+    },
+    "aria-selected": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates the current \"selected\" state of various widgets."
+    },
+    "aria-setsize": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
+    },
+    "aria-sort": {
+      "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Indicates if items in a table or grid are sorted in ascending or descending order."
+    },
+    "aria-valuemax": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the maximum allowed value for a range widget."
+    },
+    "aria-valuemin": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the minimum allowed value for a range widget."
+    },
+    "aria-valuenow": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the current value for a range widget."
+    },
+    "aria-valuetext": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Defines the human readable text alternative of aria-valuenow for a range widget."
+    },
+    "autoCapitalize": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "autoCorrect": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "autoSave": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "contentEditable": {
+      "type": "Booleanish | \"inherit\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "contextMenu": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "dangerouslySetInnerHTML": {
+      "type": "{ __html: string }",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "datatype": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "defaultChecked": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "defaultValue": {
+      "type": "string | number | readonly string[]",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "dir": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "draggable": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "element": {
+      "type": "string",
+      "defaultValue": "'ALERT'",
+      "required": false,
+      "externalProp": false,
+      "description": "Overrides the default element name to apply unique styles with the Customization Provider"
+    },
+    "hidden": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "i18nDismissLabel": {
+      "type": "string",
+      "defaultValue": "'Dismiss alert'",
+      "required": false,
+      "externalProp": false,
+      "description": "Title for dismiss label. Only necessary when using onDismiss."
+    },
+    "i18nErrorLabel": {
+      "type": "string",
+      "defaultValue": "'(error)'",
+      "required": false,
+      "externalProp": false,
+      "description": "Title for error icon when using Error Alerts."
+    },
+    "i18nNeutralLabel": {
+      "type": "string",
+      "defaultValue": "'(information)'",
+      "required": false,
+      "externalProp": false,
+      "description": "Title for info icon when using Neutral Alerts."
+    },
+    "i18nWarningLabel": {
+      "type": "string",
+      "defaultValue": "'(warning)'",
+      "required": false,
+      "externalProp": false,
+      "description": "Title for info icon when using Warning Alerts."
+    },
+    "id": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "inlist": {
+      "type": "any",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "inputMode": {
+      "type": "| \"text\"\n  | \"none\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"\n  | \"search\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+    },
+    "is": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true,
+      "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+    },
+    "itemID": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemProp": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemRef": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemScope": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "itemType": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "key": {
+      "type": "Key",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "lang": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "nonce": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAbort": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAbortCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationEnd": {
+      "type": "AnimationEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationEndCapture": {
+      "type": "AnimationEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationIteration": {
+      "type": "AnimationEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationIterationCapture": {
+      "type": "AnimationEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationStart": {
+      "type": "AnimationEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAnimationStartCapture": {
+      "type": "AnimationEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAuxClick": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onAuxClickCapture": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBeforeInput": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBeforeInputCapture": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBlur": {
+      "type": "FocusEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onBlurCapture": {
+      "type": "FocusEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlay": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayThrough": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCanPlayThroughCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onChange": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onChangeCapture": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onClick": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onClickCapture": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionEnd": {
+      "type": "CompositionEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionEndCapture": {
+      "type": "CompositionEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionStart": {
+      "type": "CompositionEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionStartCapture": {
+      "type": "CompositionEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionUpdate": {
+      "type": "CompositionEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCompositionUpdateCapture": {
+      "type": "CompositionEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onContextMenu": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onContextMenuCapture": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCopy": {
+      "type": "ClipboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCopyCapture": {
+      "type": "ClipboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCut": {
+      "type": "ClipboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onCutCapture": {
+      "type": "ClipboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDismiss": {
+      "type": "() => void",
+      "defaultValue": "null",
+      "required": false,
+      "externalProp": false,
+      "description": "Function to run on dismiss of the Alert. Adds a close button."
+    },
+    "onDoubleClick": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDoubleClickCapture": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDrag": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragCapture": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnd": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEndCapture": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnter": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragEnterCapture": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragExit": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragExitCapture": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragLeave": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragLeaveCapture": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragOver": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragOverCapture": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragStart": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDragStartCapture": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDrop": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDropCapture": {
+      "type": "DragEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDurationChange": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onDurationChangeCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEmptied": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEmptiedCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEncrypted": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEncryptedCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEnded": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onEndedCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onError": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onErrorCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onFocus": {
+      "type": "FocusEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onFocusCapture": {
+      "type": "FocusEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onGotPointerCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onGotPointerCaptureCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInput": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInputCapture": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInvalid": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onInvalidCapture": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyDown": {
+      "type": "KeyboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyDownCapture": {
+      "type": "KeyboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyPress": {
+      "type": "KeyboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyPressCapture": {
+      "type": "KeyboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyUp": {
+      "type": "KeyboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onKeyUpCapture": {
+      "type": "KeyboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoad": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedData": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedDataCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedMetadata": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadedMetadataCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadStart": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLoadStartCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLostPointerCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onLostPointerCaptureCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseDown": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseDownCapture": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseEnter": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseLeave": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseMove": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseMoveCapture": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOut": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOutCapture": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOver": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseOverCapture": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseUp": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onMouseUpCapture": {
+      "type": "MouseEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPaste": {
+      "type": "ClipboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPasteCapture": {
+      "type": "ClipboardEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPause": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPauseCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlay": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlayCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlaying": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPlayingCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerCancel": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerCancelCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerDown": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerDownCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerEnter": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerEnterCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerLeave": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerLeaveCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerMove": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerMoveCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOut": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOutCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOver": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerOverCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerUp": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onPointerUpCapture": {
+      "type": "PointerEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onProgress": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onProgressCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onRateChange": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onRateChangeCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onReset": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResetCapture": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResize": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onResizeCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onScroll": {
+      "type": "UIEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onScrollCapture": {
+      "type": "UIEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeeked": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeekedCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeeking": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSeekingCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSelect": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSelectCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onStalled": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onStalledCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSubmit": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSubmitCapture": {
+      "type": "FormEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSuspend": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onSuspendCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTimeUpdate": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTimeUpdateCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchCancel": {
+      "type": "TouchEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchCancelCapture": {
+      "type": "TouchEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchEnd": {
+      "type": "TouchEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchEndCapture": {
+      "type": "TouchEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchMove": {
+      "type": "TouchEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchMoveCapture": {
+      "type": "TouchEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchStart": {
+      "type": "TouchEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTouchStartCapture": {
+      "type": "TouchEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTransitionEnd": {
+      "type": "TransitionEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onTransitionEndCapture": {
+      "type": "TransitionEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onVolumeChange": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onVolumeChangeCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWaiting": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWaitingCapture": {
+      "type": "ReactEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWheel": {
+      "type": "WheelEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "onWheelCapture": {
+      "type": "WheelEventHandler<HTMLDivElement>",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "placeholder": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "prefix": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "property": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "radioGroup": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "resource": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "results": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "role": {
+      "type": "string",
+      "defaultValue": "'status' for Neutral Alerts, 'error' for Error Alerts, 'warning' for Warning Alerts",
+      "required": false,
+      "externalProp": false,
+      "description": "ARIA role applied to the Alert."
+    },
+    "security": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "slot": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "spellCheck": {
+      "type": "Booleanish",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "suppressContentEditableWarning": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "suppressHydrationWarning": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "tabIndex": {
+      "type": "number",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "title": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "translate": {
+      "type": "\"yes\" | \"no\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "typeof": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "unselectable": {
+      "type": "\"on\" | \"off\"",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    },
+    "vocab": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": true
+    }
+  }
+}
diff --git a/packages/paste-website/src/components/shortcodes/StoryPreview.tsx b/packages/paste-website/src/components/shortcodes/StoryPreview.tsx
index e64b30dafb..ae40f4cc4c 100644
--- a/packages/paste-website/src/components/shortcodes/StoryPreview.tsx
+++ b/packages/paste-website/src/components/shortcodes/StoryPreview.tsx
@@ -6,12 +6,18 @@ export interface StoryPreviewProps {
   storyID: string;
   title: string;
   code: string;
+  height?: string;
 }
 
 const ENV = process.env.NODE_ENV || "development";
 const BASE_URL = ENV === "production" ? "https://paste-storybook.twilio.design" : "http://localhost:9001";
 
-const StoryPreview: React.FC<React.PropsWithChildren<StoryPreviewProps>> = ({ storyID, title, code }) => {
+const StoryPreview: React.FC<React.PropsWithChildren<StoryPreviewProps>> = ({
+  storyID,
+  title,
+  code,
+  height = "500px",
+}) => {
   return (
     <Box
       padding="space20"
@@ -25,7 +31,7 @@ const StoryPreview: React.FC<React.PropsWithChildren<StoryPreviewProps>> = ({ st
         src={`${BASE_URL}/iframe.html?args=&id=${storyID}&viewMode=story`}
         style={{
           width: "100%",
-          height: "500px",
+          height,
           border: 0,
           overflow: "hidden",
           padding: "1.5rem",
diff --git a/packages/paste-website/src/pages/components/progress-bar/api.mdx b/packages/paste-website/src/pages/components/progress-bar/api.mdx
new file mode 100644
index 0000000000..fe838545dc
--- /dev/null
+++ b/packages/paste-website/src/pages/components/progress-bar/api.mdx
@@ -0,0 +1,72 @@
+export const meta = {
+  title: 'Progress Bar - API',
+  package: '@twilio-paste/progress-bar',
+  description: 'Progress Bar communicates the completion status of a process or task.',
+  slug: '/components/progress-bar/api',
+};
+
+import Changelog from '@twilio-paste/progress-bar/CHANGELOG.md'; // I don't know why this is needed but if you remove it the page fails to render
+import packageJson from '@twilio-paste/progress-bar/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Progress Bar');
+  const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/progress-bar');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      componentApi,
+      mdxHeadings: [...mdxHeadings, ...componentApiTocData],
+      navigationData,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/progress-bar',
+        storybookUrl: '/?path=/story/components-progressbar--default',
+      },
+    },
+  };
+};
+
+## Installation
+
+```bash
+yarn add @twilio-paste/progress-bar - or - yarn add @twilio-paste/core
+```
+
+## Usage
+
+
+```jsx
+import {ProgressBar, ProgressBarLabel} from '@twilio-paste/core/progress-bar';
+import {Box} from '@twilio-paste/core/box';
+import {HelpText} from '@twilio-paste/core/help-text';
+import {useUID} from '@twilio-paste/core/uid-library';
+
+const AlertDialogExample = () => {
+  const progressBarId = useUID();
+  const helpTextId = useUID();
+
+  return (
+    <Box>
+      <ProgressBarLabel htmlFor={progressBarId}>Downloading more ram</ProgressBarLabel>
+      <ProgressBar id={progressBarId} aria-describedby={helpTextId} isIndeterminate />
+      <HelpText id={helpTextId}>Increasing your ram helps your computer run faster.</HelpText>
+    </Box>
+  );
+};
+```
+
+## Props
+
+<PropsTable componentApi={props.componentApi} />
+
+
diff --git a/packages/paste-website/src/pages/components/progress-bar/changelog.mdx b/packages/paste-website/src/pages/components/progress-bar/changelog.mdx
new file mode 100644
index 0000000000..bc3b18fa08
--- /dev/null
+++ b/packages/paste-website/src/pages/components/progress-bar/changelog.mdx
@@ -0,0 +1,38 @@
+export const meta = {
+  title: 'Progress Bar - Changelog',
+  package: '@twilio-paste/progress-bar',
+  description: 'Progress Bar communicates the completion status of a process or task.',
+  slug: '/components/progress-bar/changelog',
+};
+
+import Changelog from '@twilio-paste/progress-bar/CHANGELOG.md';
+import packageJson from '@twilio-paste/progress-bar/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData} from '../../../utils/api';
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Progress Bar');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      navigationData,
+      mdxHeadings,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/progress-bar',
+        storybookUrl: '/?path=/story/components-progressbar--default',
+      },
+    },
+  };
+};
+
+
+<Changelog />
diff --git a/packages/paste-website/src/pages/components/progress-bar/index.mdx b/packages/paste-website/src/pages/components/progress-bar/index.mdx
index 975eab9d02..8ee9dd84f4 100644
--- a/packages/paste-website/src/pages/components/progress-bar/index.mdx
+++ b/packages/paste-website/src/pages/components/progress-bar/index.mdx
@@ -1,23 +1,24 @@
 export const meta = {
-  title: 'Meter',
-  package: '@twilio-paste/meter',
-  description: 'Meter is a visual representation of a numerical value within a known range.',
-  slug: '/components/meter/',
+  title: 'Progress Bar',
+  package: '@twilio-paste/progress-bar',
+  description: 'Progress Bar communicates the completion status of a process or task.',
+  slug: '/components/progress-bar/',
 };
 
 import Changelog from '@twilio-paste/progress-bar/CHANGELOG.md';
 import packageJson from '@twilio-paste/progress-bar/package.json';
 
-import {InDevelopment} from '../../../components/empty-state/InDevelopment';
-import DefaultLayout from '../../../layouts/DefaultLayout';
+
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
 import {SidebarCategoryRoutes} from '../../../constants';
 import {getFeature, getNavigationData} from '../../../utils/api';
 
-export default DefaultLayout;
+export default ComponentPageLayout;
+
 
 export const getStaticProps = async () => {
   const navigationData = await getNavigationData();
-  const feature = await getFeature('Progress bar');
+  const feature = await getFeature('Progress Bar');
   return {
     props: {
       data: {
@@ -25,31 +26,303 @@ export const getStaticProps = async () => {
         ...feature,
       },
       navigationData,
+      mdxHeadings,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/progress-bar',
+        storybookUrl: '/?path=/story/components-progressbar--default',
+      },
     },
   };
 };
 
-<NormalizedComponentHeader
-  categoryRoute={SidebarCategoryRoutes.COMPONENTS}
-  storybookUrl="/?path=/story/components-progressbar--default"
-  githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/progress-bar"
-  data={props.data}
+
+<StoryPreview
+  height="230px"
+  title="Default Progress Bar"
+  storyID="components-progressbar--default"
+  code={`// See storybook for full code
+<Box maxWidth="400px">
+  {value >= 100 ? (
+    <Box marginBottom="space90" display="flex" alignItems="center" columnGap="space30">
+      <AcceptIcon decorative size="sizeIcon70" color="colorTextSuccess" />
+      Your submission has been approved!
+    </Box>
+  ) : (
+    <Box marginBottom="space90">
+      <ProgressBarLabel htmlFor={progressBarId} valueLabel={Math.round(value)%}>
+        Reviewing submission
+      </ProgressBarLabel>
+      <ProgressBar
+        id={progressBarId}
+        aria-describedby={helpTextId}
+        value={value}
+        valueLabel={Math.round(value)%}
+      />
+      <HelpText id={helpTextId}>Automatically reviewing your submission with our AI agents.</HelpText>
+    </Box>
+  )}
+  <Button
+    variant="primary"
+    onClick={() => {
+      setRerun(1);
+      setValue(0);
+    }}
+    disabled={rerun === 1}
+  >
+    Restart Progress
+  </Button>
+</Box>`}
 />
 
----
+## Guidelines
+
+### About Progress Bar
+
+A Progress Bar communicates the completion status of a process, like
+downloads and data processing, or a task, like filling out a form. A
+Progress Bar enhances user understanding of where they are in a task
+or where the system is in a process.
+
+### Progress Bar vs. Meter
+
+A Progress Bar represents only completion progress, like a file upload
+or filling out a form. If you're not displaying progress, use a Meter.
+
+One way to check if you need a Progress Bar or a Meter is to ask
+yourself: _Could you substitute your UI element for Progress Steps?
+Would it communicate roughly the same intent?_ If yes, then Progress
+Bar is probably the right element to use.
+
+
+### Progress Bar vs. Progress Steps
+
+Use Progress Bar for tasks that are short, straightforward, and linear
+that don't need the extra layer of information that Progress Steps
+provides. Example: A sign-up flow that a customer can reasonably
+complete without leaving the flow.
+
+In contrast, Progress Steps are a visual representation of a complex
+task broken up into multiple steps. They indicate what has and what
+needs to be done to fully complete the task. Use Progress Steps when
+the task is nonlinear or can't be completed in one sitting. Example:
+A task that requires a customer to go to a third-party application
+to configure their settings before returning to Twilio to complete
+the full task.
+
+
+### Accessibility
+
+- A label is required when using Progress Bar. Use one of these options:
+  - Visible label using `ProgressBarLabel`, with `htmlFor` set equal to
+    the `id` of the Progress Bar (preferred)
+  - Visible label that's associated to the Progress Bar with `aria-labelledby`
+  - Label directly using `aria-label`
+- A numerical `value` is required, between 0 and any maximum value provided.
+
+
+## Examples
+
+### Default
+
+Use a Progress Bar to communicate the completion status of a process or task.
+Use the `valueLabel` prop to show a visible value.
+
+If you don't show a visible value through `valueLabel`, communicate what
+kind of process is happening through `ProgressBarLabel`. If the label
+starts with a verb, use an ellipsis at the end of the label. For example,
+the Progress Bar Label should say “Uploading filename.png…” not just
+“filename.png”.
+
+
+<StoryPreview
+  height="230px"
+  title="Default Progress Bar"
+  storyID="components-progressbar--default"
+  code={`// See storybook for full code
+<Box maxWidth="400px">
+  {value >= 100 ? (
+    <Box marginBottom="space90" display="flex" alignItems="center" columnGap="space30">
+      <AcceptIcon decorative size="sizeIcon70" color="colorTextSuccess" />
+      Your submission has been approved!
+    </Box>
+  ) : (
+    <Box marginBottom="space90">
+      <ProgressBarLabel htmlFor={progressBarId} valueLabel={Math.round(value)%}>
+        Reviewing submission
+      </ProgressBarLabel>
+      <ProgressBar
+        id={progressBarId}
+        aria-describedby={helpTextId}
+        value={value}
+        valueLabel={Math.round(value)%}
+      />
+      <HelpText id={helpTextId}>Automatically reviewing your submission with our AI agents.</HelpText>
+    </Box>
+  )}
+  <Button
+    variant="primary"
+    onClick={() => {
+      setRerun(1);
+      setValue(0);
+    }}
+    disabled={rerun === 1}
+  >
+    Restart Progress
+  </Button>
+</Box>`}
+/>
+
+When the process or task is complete, swap the Progress Bar out with an
+element that represents the completed process or task. For example, for
+a file upload, that could be a card representing the file.
+
+
+### Min and max values
+
+By default, Progress Bar has a value of 0 (represented as a percentage)
+and range of 0 to 100. Pass `maxValue` to Progress Bar to set a custom
+max value. The min value is always 0.
+
+To show a visible max value, use the `valueLabel` prop to show
+“[current value] of [max value]”. Consider what type of value would
+be most useful for a user. For example, choose either “50%” or “5,000
+of 10,000”, not both.
+
+
+<StoryPreview
+  height="145px"
+  title="Adjusting the progress bar range"
+  storyID="components-progressbar--custom-range"
+  code={`<ProgressBarLabel htmlFor={progressBarId} valueLabel="688KB of 834KB">
+  mtn_sunrise.png
+</ProgressBarLabel>
+<ProgressBar id={progressBarId} value={688} maxValue={834} />`}
+/>
+
+## States
+
+### Indeterminate
+
+Use an indeterminate Progress Bar when progress is being made, but
+you can't calculate how much progress or you don't know the value.
+This is common when computing the progress value interferes with
+showing an accurate value, or when connection is lost but the
+process is still continuing.
+
+For indeterminate states, communicate what kind of process is
+happening through `ProgressBarLabel`. If the label starts with a
+verb, use an ellipsis at the end of the label. For example, the
+Progress Bar Label should say “Uploading filename.png…” not just
+“filename.png”.
+
+<StoryPreview
+  height="260px"
+  title="Indeterminate progress state"
+  storyID="components-progressbar--indeterminate"
+  code={`<ProgressBarLabel htmlFor={progressBarIdA}>Uploading sunrise_video.mov</ProgressBarLabel>
+<ProgressBar id={progressBarIdA} aria-describedby={helpTextId} isIndeterminate />
+
+<Separator orientation="horizontal" verticalSpacing="space60" />
+
+<ProgressBarLabel htmlFor={progressBarIdB}>Converting files</ProgressBarLabel>
+<ProgressBar id={progressBarIdB} aria-describedby={helpTextId} isIndeterminate />
+<HelpText id={helpTextId}>
+  Connection lost. Check your connection and refresh the page to get up-to-date information.
+</HelpText>`}
+/>
+
+### Error
+
+Use the error state to show a process has stopped, and the user
+must do something to continue it.
+
+Use [error Help Text](/components/help-text#error-help-text) to
+describe the error and what needs to be done to fix it. For
+additional guidance on how to compose error messages, refer
+to the [error state pattern](/patterns/error-state).
+
+<StoryPreview
+  height="165px"
+  title="Progress bar with error state"
+  storyID="components-progressbar--error"
+  code={`<ProgressBarLabel htmlFor={progressBarId} valueLabel="50%">
+  mtn_sunrise.png
+</ProgressBarLabel>
+<ProgressBar id={progressBarId} aria-describedby={helpTextId} value={50} valueLabel="50%" hasError />
+<HelpText variant="error" id={helpTextId}>
+  Upload failed. <Anchor href="#">Retry upload</Anchor>
+</HelpText>`}
+/>
+
+### Disabled
+
+Use a disabled Progress Bar to show a task has stopped, and
+the system needs to do something before the user can continue
+the task. Let users know when they can expect their next steps.
+
+Do not include an ellipsis on a disabled Progress Bar.
+
+<StoryPreview
+  height="185px"
+  title="Disabled Progress Bar"
+  storyID="components-progressbar--disabled"
+  code={`<ProgressBarLabel disabled htmlFor={progressBarId} valueLabel="50%">
+  Campaign registration
+</ProgressBarLabel>
+<ProgressBar id={progressBarId} aria-describedby={helpTextId} value={80} disabled />
+<HelpText variant="default" id={helpTextId}>
+  Your profile is in review. You will receive an email about your application status in 3-5 business days.
+</HelpText>`}
+/>
+
+## Composition Notes
+
+The Progress Bar label should communicate what the Progress Bar
+is measuring. Where possible, avoid a label that wraps onto two lines.
+
+A Progress Bar can include a numerical value through `valueLabel`.
+When using a custom value label, consider what type of value would
+be most useful for a user to see (for example, “50%” vs. “5000 of 10,000”).
 
-<contentwrapper>
+If you don't show a visible value through `valueLabel`, or if the
+Progress Bar is indeterminate, communicate what kind of process is
+happening through `ProgressBarLabel`. If the label starts with a
+verb and the Progress Bar is not disabled, use an ellipsis at the
+end of the label. For example, the Progress Bar Label should say
+“Uploading filename.png…” not just “filename.png”.
 
-<PageAside data={mdxHeadings} />
+Use Help Text to offer additional information to contextualize or
+help the user understand the Progress Bar, especially if the
+process is complex or has a long wait time to better communicate
+current status with users.
 
-<content>
 
-<InDevelopment showBreadcrumb={false} />
+## When to use Progress Bar
 
-<ChangelogRevealer>
-  <Changelog />
-</ChangelogRevealer>
+<DoDont>
+  <Do title="Do" body="Use a Progress Bar when you want to represent the status of an ongoing task (like downloading files, setting up an account, etc.) within a fixed 0-100% range. It’s especially useful when you don’t need to communicate the details of each step." />
+  <Dont
+    title="Don't"
+    body="Don’t use a Progress Bar when you need a user to navigate between different steps of a task. Use Progress Steps instead when the task is nonlinear or can’t be completed in one sitting."
+  />
+</DoDont>
 
-</content>
+<DoDont>
+  <Do
+    title="Do"
+    body="Use a Progress Bar to show real-time feedback to users as tasks are completed, or when they need to wait for a process to finish."
+  />
+  <Dont
+    title="Don't"
+    body="Don’t use a Progress Bar for entire page loads. In this case, use a Spinner or Skeleton Loader instead. "
+  />
+</DoDont>
 
-</contentwrapper>
+<DoDont>
+  <Do title="Do" body="Use a Progress Bar when you need to display the completion percentage of a task." />
+  <Dont
+    title="Don't"
+    body="Don’t use Progress Bar if you’re communicating capacity. Use Meter instead."
+  />
+</DoDont>