@czi-sds/mcp 0.5.2 → 0.5.4

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

@@ -25,15 +25,57 @@ 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**
 
+---
 
 ---
 
@@ -41,7 +83,9 @@ Each Checkbox must be coupled with a label to communicate the result of a select
 
 These rules establish how much margin should exist between and around elements.
 
+**Checkbox spacing**
 
+---
 
 ---
 
@@ -57,19 +101,53 @@ 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 +185,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 +213,45 @@ 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 +264,48 @@ 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,10 +320,28 @@ 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 +354,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 +410,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 +442,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 +488,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 +520,47 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Disabled** |
 | ----------- | --------- | ------------ |
 
----
+**InputCheckbox**
 
 ---
 
+**InputCheckbox**
 
+---
 
-### Checkbox Intent States
-
-Use `intent: default` to communicate that user has yet to enter a response.
+**InputCheckbox**
 
-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** |
-| ----------- | --------- | ----------- |
+**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**
 
 ---
 
-### Checkbox Spacing
+**InputCheckbox**
 
-These rules establish how much margin should exist between and around elements.
+---
 
 ---
 
-## 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** |
-| ----------- | --------- | ------------ |
+**InputCheckbox**
 
-| **Default** | **Disabled** |
-| ----------- | ------------ |
+---
 
-### Radio Intent States
+### Checkbox Intent States
 
 Use `intent: default` to communicate that user has yet to enter a response.
 
@@ -329,68 +571,236 @@ 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 there is a specific datapoint or value within a dataset that the user is able to select.
+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.
 
----
+Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
-### Double-sided Slider
+| **Default** | **Hover** | **Disabled** |
+| ----------- | --------- | ------------ |
 
-Use when users need the ability to select a range between two values within a dataset.
+**InputRadio**
 
 ---
 
+**InputRadio**
+
 ---
 
-### Slider Spacing
+**InputRadio**
 
-These rules establish how much margin should exist between and around elements.
+---
 
-## Code
+| **Default** | **Disabled** |
+| ----------- | ------------ |
 
-## Control Input Components
+**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**
+
+---
+
+### Double-sided Slider
+
+Use when users need the ability to select a range between two values within a dataset.
+
+**InputSlider**
+
+---
+
+---
+
+**InputSlider**
+
+---
+
+---
+
+### Slider Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+**Slider spacing**
+
+---
+
+## Code
+
+## Control Input Components
 
 | Below you will find interactive Storybook iframes for each component within the Control Input element group. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** InputCheckbox InputRadio InputToggle InputSlider |
 | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------------------------- |
@@ -432,6 +842,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 +886,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 +1023,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 +1069,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 +1167,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 +1213,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 +1228,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 +1268,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 +1311,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 +1472,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 +1612,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 +1795,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 +1972,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 +2112,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 +2298,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 +2465,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 +2640,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 +2780,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>