adds 'unavailable' status to StateLabel docs

content/components/state-label.mdx

@@ -26,29 +26,19 @@ Use state label to show the status of an issue or pull request.
 
 The State label variant can be used for issues, which uses the issues icon, or pull requests, which uses the pull request icon. 
 
-Status for the State label can be one of the following options: draft (gray), open (green), closed (purple for issues and red for pull requests), or merged (purple, used for pull requests
- only).
-
-<Box
-  mb={3}
-  display="flex"
-  alignItems="flex-start"
-  flexDirection={['column', 'column', 'column', 'column', 'row']}
-  sx={{gap: 3}}
->
-  <img
-    width="369"
-    role="presentation"
-    alt="State label displayed for issues and pull requests"
-    src="https://github.com/primer/design/assets/586552/d779f1ac-e004-4ef7-8c6a-4249b3e394ea"
-  />
-  <img
-    width="400"
-    role="presentation"
-    alt="State labels displayed in all status variations, including draft, open, closed, and merged."
-    src="https://github.com/primer/design/assets/586552/b835e654-9414-462a-8488-af6d447b372c"
-  />
-</Box>
+Status for the State label can be one of the following options: draft (gray), open (green), closed (purple for issues and red for pull requests), merged (purple, used for pull requests
+ only), or unavailable (gray, used for [degraded experiences](/ui-patterns/degraded-experiences)).
+
+<img
+  role="presentation"
+  alt="State label displayed for issues and pull requests"
+  src="https://github.com/primer/design/assets/2313998/ee2a086b-614f-487f-b4dd-a95e1c954d40"
+/>
+<img
+  role="presentation"
+  alt="State labels displayed in all status variations, including draft, open, closed, and merged."
+  src="https://github.com/primer/design/assets/2313998/cdd29243-22d8-4131-87aa-4148dd9c446d"
+/>
 
 ### Known accessibility issues (GitHub staff only)