@czi-sds/mcp 0.5.2 → 0.5.3

package/data/zeroheight-exports/Control-Inputs.md

@@ -25,14 +25,58 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Disabled** |
 | ----------- | --------- | ------------ |
 
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
+---
+
+---
+
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
+---
+
+---
+
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
 ---
 
+**InputCheckbox**
+
 ---
 
 ### Checkbox Lockups
 
 Each Checkbox must be coupled with a label to communicate the result of a selection.
 
+**InputCheckbox Lockup**
+
+---
+
+**InputCheckbox Lockup**
+
+---
+
 
 
 ---
@@ -43,6 +87,10 @@ These rules establish how much margin should exist between and around elements.
 
 
 
+**Checkbox spacing**
+
+---
+
 ---
 
 ## Radio Input
@@ -57,18 +105,54 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Disabled** |
 | ----------- | --------- | ------------ |
 
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+---
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
 ---
 
 ### Radio Lockups
 
 Each Radio must be coupled with a label to communicate the result of a selection.
 
+**InputRadio Lockup**
+
+---
+
+**InputRadio Lockup**
+
+---
+
 ---
 
 ### Radio Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Radio spacing**
+
+---
+
 
 
 ## Code
@@ -107,6 +191,18 @@ Control Inputs are elements that enable users to make selections and communicate
 
 Use the links below to jump to information on a specific Control Input variant:
 
+**InputCheckbox Lockup**
+
+---
+
+**InputRadio Lockup**
+
+---
+
+**InputToggle**
+
+---
+
 ---
 
 ## Checkbox Input
@@ -123,13 +219,49 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Disabled** |
 | ----------- | --------- | ------------ |
 
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
+---
+
+---
+
+
+
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
 ---
 
+---
+
+
+
+**InputCheckbox**
 
+---
+
+**InputCheckbox**
 
 ---
 
+**InputCheckbox**
 
+---
 
 ### Checkbox Intent States
 
@@ -142,18 +274,50 @@ Use `intent: warning` to communicate when a user needs to be alerted that their
 | **Default** | **Error** | **Warning** |
 | ----------- | --------- | ----------- |
 
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
+---
+
+**InputCheckbox**
+
+---
+
 
 
 ### Checkbox Lockups
 
 Each Checkbox must be coupled with a label to communicate the result of a selection. If additional details about the selection need to be communicated, an optional caption can be included.
 
+**InputCheckbox Lockup_no caption_enabled**
+
+---
+
+**InputCheckbox Lockup_no caption_disabled**
+
+---
+
+**InputCheckbox Lockup_caption_disabled**
+
+---
+
+**InputCheckbox Lockup_caption_disabled**
+
+---
+
 ---
 
 ### Checkbox Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Checkbox spacing**
+
+---
+
 ---
 
 ## Radio Input
@@ -168,9 +332,29 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Disabled** |
 | ----------- | --------- | ------------ |
 
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
 | **Default** | **Disabled** |
 | ----------- | ------------ |
 
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
 
 
 ### Radio Intent States
@@ -184,16 +368,48 @@ Use `intent: warning` to communicate when a user needs to be alerted that their
 | **Default** | **Error** | **Warning** |
 | ----------- | --------- | ----------- |
 
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
 ### Radio Lockups
 
 Each Radio must be coupled with a label to communicate the result of a selection. If additional details about the selection need to be communicated, an optional caption can be included.
 
+**InputRadio Lockup_no caption_enabled**
+
+---
+
+**InputRadio Lockup_no caption_disabled**
+
+---
+
+**InputRadio Lockup_caption_disabled**
+
+---
+
+**InputRadio Lockup_caption_disabled**
+
+---
+
 ---
 
 ### Radio Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Radio spacing**
+
+---
+
 ---
 
 ## Toggle
@@ -208,6 +424,30 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Disabled** |
 | ----------- | --------- | ------------ |
 
+**InputToggle**
+
+---
+
+**InputToggle**
+
+---
+
+**InputToggle**
+
+---
+
+---
+
+**InputToggle**
+
+---
+
+**InputToggle**
+
+---
+
+**InputToggle**
+
 ---
 
 ---
@@ -216,6 +456,10 @@ Click on each state below to enter inspect view and get details on its code attr
 
 These rules establish how much margin should exist between and around elements.
 
+**Toggle spacing**
+
+---
+
 ## Code
 
 ## Control Input Components
@@ -258,6 +502,22 @@ Control Inputs are elements that enable users to make selections and communicate
 
 Use the links below to jump to information on a specific Control Input variant:
 
+**InputCheckbox Lockup**
+
+---
+
+**InputRadio Lockup**
+
+---
+
+**InputToggle**
+
+---
+
+**InputSlider**
+
+---
+
 ---
 
 ## Checkbox Input
@@ -274,51 +534,49 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Disabled** |
 | ----------- | --------- | ------------ |
 
----
+**InputCheckbox**
 
 ---
 
+**InputCheckbox**
 
+---
 
-### Checkbox Intent States
+**InputCheckbox**
 
-Use `intent: default` to communicate that user has yet to enter a response.
+---
 
-Use `intent: error` to communicate when a user has entered an incorrect or incomplete response.
+---
 
-Use `intent: warning` to communicate when a user needs to be alerted that their response needs attention.
+**InputCheckbox**
 
-| **Default** | **Error** | **Warning** |
-| ----------- | --------- | ----------- |
+---
 
-### Checkbox Lockups
+**InputCheckbox**
 
-Each Checkbox must be coupled with a label to communicate the result of a selection. If additional details about the selection need to be communicated, an optional caption can be included.
+---
+
+**InputCheckbox**
 
 ---
 
-### Checkbox Spacing
+---
 
-These rules establish how much margin should exist between and around elements.
+**InputCheckbox**
 
 ---
 
-## Radio Input
+**InputCheckbox**
 
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
+---
 
-Use when the user can select only one option from a group of choices. Each Radio must be coupled with a label (and optional caption) to communicate the result of a selection.
+**InputCheckbox**
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+---
 
-| **Default** | **Hover** | **Disabled** |
-| ----------- | --------- | ------------ |
 
-| **Default** | **Disabled** |
-| ----------- | ------------ |
 
-### Radio Intent States
+### Checkbox Intent States
 
 Use `intent: default` to communicate that user has yet to enter a response.
 
@@ -329,50 +587,208 @@ Use `intent: warning` to communicate when a user needs to be alerted that their
 | **Default** | **Error** | **Warning** |
 | ----------- | --------- | ----------- |
 
+**InputCheckbox**
 
+---
 
-### Radio Lockups
+**InputCheckbox**
 
-Each Radio must be coupled with a label to communicate the result of a selection. If additional details about the selection need to be communicated, an optional caption can be included.
+---
+
+**InputCheckbox**
 
 ---
 
-### Radio Spacing
+### Checkbox Lockups
 
-These rules establish how much margin should exist between and around elements.
+Each Checkbox must be coupled with a label to communicate the result of a selection. If additional details about the selection need to be communicated, an optional caption can be included.
+
+**InputCheckbox Lockup_no caption_enabled**
 
 ---
 
-## Toggle
+**InputCheckbox Lockup_no caption_disabled**
 
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
+---
 
-Use to allow the user to flip a setting or option from off to on and vice versa.
+**InputCheckbox Lockup_caption_disabled**
 
-Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+---
 
-| **Default** | **Hover** | **Disabled** |
-| ----------- | --------- | ------------ |
+**InputCheckbox Lockup_caption_disabled**
 
 ---
 
 ---
 
-### Toggle Switch Spacing
+### Checkbox Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Checkbox spacing**
+
 ---
 
-## Slider
+---
+
+## Radio Input
 
 |     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
 | --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
-### Single-sided Slider
+Use when the user can select only one option from a group of choices. Each Radio must be coupled with a label (and optional caption) to communicate the result of a selection.
 
-Use when there is a specific datapoint or value within a dataset that the user is able to select.
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+
+| **Default** | **Hover** | **Disabled** |
+| ----------- | --------- | ------------ |
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+| **Default** | **Disabled** |
+| ----------- | ------------ |
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+### Radio Intent States
+
+Use `intent: default` to communicate that user has yet to enter a response.
+
+Use `intent: error` to communicate when a user has entered an incorrect or incomplete response.
+
+Use `intent: warning` to communicate when a user needs to be alerted that their response needs attention.
+
+| **Default** | **Error** | **Warning** |
+| ----------- | --------- | ----------- |
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+**InputRadio**
+
+---
+
+
+
+### Radio Lockups
+
+Each Radio must be coupled with a label to communicate the result of a selection. If additional details about the selection need to be communicated, an optional caption can be included.
+
+**InputRadio Lockup_no caption_enabled**
+
+---
+
+**InputRadio Lockup_no caption_disabled**
+
+---
+
+**InputRadio Lockup_caption_disabled**
+
+---
+
+**InputRadio Lockup_caption_disabled**
+
+---
+
+---
+
+### Radio Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+**Radio spacing**
+
+---
+
+---
+
+## Toggle
+
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
+
+Use to allow the user to flip a setting or option from off to on and vice versa.
+
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
+
+| **Default** | **Hover** | **Disabled** |
+| ----------- | --------- | ------------ |
+
+**InputToggle**
+
+---
+
+**InputToggle**
+
+---
+
+**InputToggle**
+
+---
+
+---
+
+**InputToggle**
+
+---
+
+**InputToggle**
+
+---
+
+**InputToggle**
+
+---
+
+---
+
+### Toggle Switch Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+**Toggle spacing**
+
+---
+
+---
+
+## Slider
+
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
+
+### Single-sided Slider
+
+Use when there is a specific datapoint or value within a dataset that the user is able to select.
+
+**InputSlider**
+
+---
+
+---
+
+**InputSlider**
 
 ---
 
@@ -380,6 +796,14 @@ Use when there is a specific datapoint or value within a dataset that the user i
 
 Use when users need the ability to select a range between two values within a dataset.
 
+**InputSlider**
+
+---
+
+---
+
+**InputSlider**
+
 ---
 
 ---
@@ -388,6 +812,10 @@ Use when users need the ability to select a range between two values within a da
 
 These rules establish how much margin should exist between and around elements.
 
+**Slider spacing**
+
+---
+
 ## Code
 
 ## Control Input Components
@@ -432,6 +860,22 @@ Control Inputs are elements that enable users to make selections and communicate
 
 ### Visual Preview
 
+**Preview_Guidelines_InputCheckbox**
+
+---
+
+**Preview_Guidelines_InputRadio**
+
+---
+
+**Preview_Guidelines_InputSlider**
+
+---
+
+**Preview_Guidelines_InputToggle**
+
+---
+
 ---
 
 ## Checkbox
@@ -460,22 +904,134 @@ Use when Checkbox functionality is needed but a custom label is desired.
 | Default | Hover | Disabled |
 | ------- | ----- | -------- |
 
+**Checkbox_No label_Unselected_Default**
+
+---
+
+**Checkbox_No label_Unselected_Hover**
+
+---
+
+**Checkbox_No label_Unselected_Disabled**
+
+---
+
+**Checkbox_No label_Indeterminate_Default**
+
+---
+
+**Checkbox_No label_Indeterminate_Hover**
+
+---
+
+**Checkbox_No label_Indeterminate_Disabled**
+
+---
+
+**Checkbox_No label_Selected_Default**
+
+---
+
+**Checkbox_No label_Selected_Hover**
+
+---
+
+**Checkbox_No label_Selected_Disabled**
+
+---
+
 #### Checkbox – Label
 
 | Default | Hover | Disabled |
 | ------- | ----- | -------- |
 
+**Checkbox_Label_Unselected_Default**
+
+---
+
+**Checkbox_Label_Unselected_Hover**
+
+---
+
+**Checkbox_Label_Unselected_Disabled**
+
+---
+
+**Checkbox_Label_Indeterminate_Default**
+
+---
+
+**Checkbox_Label_Indeterminate_Hover**
+
+---
+
+**Checkbox_Label_Indeterminate_Disabled**
+
+---
+
+**Checkbox_Label_Selected_Default**
+
+---
+
+**Checkbox_Label_Selected_Hover**
+
+---
+
+**Checkbox_Label_Selected_Disabled**
+
+---
+
 #### Checkbox – Label + Caption
 
 | Default | Hover | Disabled |
 | ------- | ----- | -------- |
 
+**Checkbox_Label + Caption_Unselected_Default**
+
+---
+
+**Checkbox_Label + Caption_Unselected_Hover**
+
+---
+
+**Checkbox_Label + Caption_Unselected_Disabled**
+
+---
+
+**Checkbox_Label + Caption_Indeterminate_Default**
+
+---
+
+**Checkbox_Label + Caption_Indeterminate_Hover**
+
+---
+
+**Checkbox_Label + Caption_Indeterminate_Disabled**
+
+---
+
+**Checkbox_Label + Caption_Selected_Default**
+
+---
+
+**Checkbox_Label + Caption_Selected_Hover**
+
+---
+
+**Checkbox_Label + Caption_Selected_Disabled**
+
+---
+
 ---
 
 ### Checkbox Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Checkbox spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -485,6 +1041,26 @@ Use Default to communicate that the user has yet to enter a response, Negative t
 | Default | Negative | Negative + Intent Message | Notice | Notice + Intent Message |
 | ------- | -------- | ------------------------- | ------ | ----------------------- |
 
+**Checkbox_Intent_Default**
+
+---
+
+**Checkbox_Intent_Negative**
+
+---
+
+**Checkbox_Intent_Negative + Message**
+
+---
+
+**Checkbox_Intent_Notice**
+
+---
+
+**Checkbox_Intent_Notice + Message**
+
+---
+
 ---
 
 ## Radio
@@ -511,31 +1087,95 @@ Use when Radio functionality is needed but a custom label is desired.
 | Default | Hover | Disabled |
 | ------- | ----- | -------- |
 
+**Radio_No Label_Unselected_Default**
+
+---
+
+**Radio_No Label_Unselected_Hover**
+
+---
+
+**Radio_No Label_Unselected_Disabled**
+
+---
+
 | Default | Disabled |
 | ------- | -------- |
 
+**Radio_No Label_Selected_Default**
+
+---
+
+**Radio_No Label_Selected_Disabled**
+
+---
+
 #### Radio – Label
 
 | Default | Hover | Disabled |
 | ------- | ----- | -------- |
 
+**Radio_Label_Unselected_Default**
+
+---
+
+**Radio_Label_Unselected_Hover**
+
+---
+
+**Radio_Label_Unselected_Disabled**
+
+---
+
 | Default | Disabled |
 | ------- | -------- |
 
+**Radio_Label_Selected_Default**
+
+---
+
+**Radio_Label_Selected_Disabled**
+
+---
+
 #### Radio – Label + Caption
 
 | Default | Hover | Disabled |
 | ------- | ----- | -------- |
 
+**Radio_Label + Caption_Unselected_Default**
+
+---
+
+**Radio_Label + Caption_Unselected_Hover**
+
+---
+
+**Radio_Label + Caption_Unselected_Disabled**
+
+---
+
 | Default | Disabled |
 | ------- | -------- |
 
+**Radio_Label + Caption_Selected_Default**
+
+---
+
+**Radio_Label + Caption_Selected_Disabled**
+
+---
+
 ---
 
 ### Radio Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Radio spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -545,6 +1185,26 @@ Use Default to communicate that the user has yet to enter a response, Negative t
 | Default | Negative | Negative + Intent Message | Notice | Notice + intent Message |
 | ------- | -------- | ------------------------- | ------ | ----------------------- |
 
+**Radio_Intent_Default**
+
+---
+
+**Radio_Intent_Negative**
+
+---
+
+**Radio_Intent_Negative + Message**
+
+---
+
+**Radio_Intent_Notice**
+
+---
+
+**Radio_Intent_Notice + Message**
+
+---
+
 ---
 
 ## Slider
@@ -571,6 +1231,14 @@ Use when there is a specific datapoint or value within a dataset that the user i
 | No Tick Marks | Tick Marks |
 | ------------- | ---------- |
 
+**Slider_Single-sided_No Tick Marks**
+
+---
+
+**Slider_Single-sided_Tick Marks**
+
+---
+
 #### Slider – Double-sided
 
 Use when users need the ability to select a range between two values within a dataset.
@@ -578,12 +1246,24 @@ Use when users need the ability to select a range between two values within a da
 | No Tick Marks | Tick Marks |
 | ------------- | ---------- |
 
+**Slider_Double-sided_No Tick Marks**
+
+---
+
+**Slider_Double-sided_Tick Marks**
+
+---
+
 ---
 
 ### Slider Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Slider spacing**
+
+---
+
 ---
 
 ## Toggle Input
@@ -606,12 +1286,40 @@ Toggle Inputs allow users to indicate true or false as part of a form or flip a
 | Default | Hover | Disabled |
 | ------- | ----- | -------- |
 
+**Toggle_Off_Default**
+
+---
+
+**Toggle_Off_Hover**
+
+---
+
+**Toggle_Off_Disabled**
+
+---
+
+**Toggle_On_Default**
+
+---
+
+**Toggle_On_Hover**
+
+---
+
+**Toggle_On_Disabled**
+
+---
+
 ---
 
 ### Toggle Input Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Toggle spacing**
+
+---
+
 ## Code
 
 ## Control Input Components
@@ -621,6 +1329,22 @@ These rules establish how much margin should exist between and around elements.
 
 ### Visual Preview
 
+**Preview_Code_InputCheckbox**
+
+---
+
+**Preview_Code_InputRadio**
+
+---
+
+**Preview_Code_InputSlider**
+
+---
+
+**Preview_Code_InputToggle**
+
+---
+
 > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
 
 ---
@@ -766,15 +1490,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Control Inputs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -907,15 +1630,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Control Inputs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -1091,15 +1813,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Control Inputs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -1269,15 +1990,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Control Inputs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -1410,15 +2130,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Control Inputs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -1597,15 +2316,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Control Inputs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -1765,15 +2483,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Control Inputs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -1941,15 +2658,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Control Inputs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -2082,15 +2798,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Control Inputs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>