@czi-sds/mcp 0.5.2 → 0.5.3

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

@@ -23,6 +23,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Focus** | **Disabled** |
 | ----------- | --------- | --------- | ------------ |
 
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
 
 
 ### Rounded Search Input Intent States
@@ -38,12 +54,28 @@ Use `intent: warning` to communicate when a user needs to be alerted that their
 | **Default** | **Error** | **Warning** |
 | ----------- | --------- | ----------- |
 
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
 ---
 
 ### Rounded Search Input Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Rounded Search Input spacing**
+
+---
+
 
 
 ---
@@ -60,6 +92,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Focus** | **Disabled** |
 | ----------- | --------- | --------- | ------------ |
 
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
 
 
 ### Square Search Input Intent States
@@ -75,6 +123,18 @@ Use `intent: warning` to communicate when a user needs to be alerted that their
 | **Default** | **Error** | **Warning** |
 | ----------- | --------- | ----------- |
 
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
 ---
 
 ### Square Search Input Spacing
@@ -83,6 +143,10 @@ These rules establish how much margin should exist between and around elements.
 
 
 
+**Square Search Input spacing**
+
+---
+
 ---
 
 ## Text Input
@@ -99,6 +163,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Focus** | **Disabled** |
 | ----------- | --------- | --------- | ------------ |
 
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
 
 
 ### Text Area Input
@@ -114,6 +194,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Focus** | **Disabled** |
 | ----------- | --------- | --------- | ------------ |
 
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
 
 
 ### Text Input Intent States
@@ -129,6 +225,30 @@ Use `intent: warning` to communicate when a user needs to be alerted that the co
 | **Default** | **Error** | **Warning** |
 | ----------- | --------- | ----------- |
 
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
 ---
 
 ---
@@ -137,6 +257,10 @@ Use `intent: warning` to communicate when a user needs to be alerted that the co
 
 These rules establish how much margin should exist between and around elements.
 
+**Text Input spacing**
+
+---
+
 ## Code
 
 ## Field Input Components
@@ -183,6 +307,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Focus** | **Disabled** |
 | ----------- | --------- | --------- | ------------ |
 
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
 
 
 ### Rounded Search Input Intent States
@@ -198,12 +338,28 @@ Use `intent: warning` to communicate when a user needs to be alerted that their
 | **Default** | **Error** | **Warning** |
 | ----------- | --------- | ----------- |
 
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
 ---
 
 ### Rounded Search Input Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Search spacing**
+
+---
+
 ---
 
 ## Square Search Input
@@ -218,6 +374,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Focus** | **Disabled** |
 | ----------- | --------- | --------- | ------------ |
 
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
 
 
 ### Square Search Input Intent States
@@ -233,12 +405,28 @@ Use `intent: warning` to communicate when a user needs to be alerted that their
 | **Default** | **Error** | **Warning** |
 | ----------- | --------- | ----------- |
 
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
+**InputSearch**
+
+---
+
 ---
 
 ### Square Search Input Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Square Search Input spacing**
+
+---
+
 ---
 
 ## Text Input
@@ -255,6 +443,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Focus** | **Disabled** |
 | ----------- | --------- | --------- | ------------ |
 
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
 
 
 ### Text Area Input
@@ -270,6 +474,22 @@ Click on each state below to enter inspect view and get details on its code attr
 | **Default** | **Hover** | **Focus** | **Disabled** |
 | ----------- | --------- | --------- | ------------ |
 
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
 
 
 ### Text Input Intent States
@@ -285,6 +505,30 @@ Use `intent: warning` to communicate when a user needs to be alerted that the co
 | **Default** | **Error** | **Warning** |
 | ----------- | --------- | ----------- |
 
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
+---
+
+**InputText**
+
 ---
 
 ---
@@ -293,6 +537,10 @@ Use `intent: warning` to communicate when a user needs to be alerted that the co
 
 These rules establish how much margin should exist between and around elements.
 
+**Text Input spacing**
+
+---
+
 ## Code
 
 ## Field Input Components
@@ -325,6 +573,14 @@ Field Inputs are elements that allow users to type within them, providing an are
 
 ### Visual Preview
 
+**Preview_Guidelines_InputSearch**
+
+---
+
+**Preview_Guidelines_InputText**
+
+---
+
 ---
 
 ## Search Input
@@ -334,6 +590,14 @@ Field Inputs are elements that allow users to type within them, providing an are
 
 ### Search Input Styles
 
+**InputSearch_Styles_Rounded**
+
+---
+
+**InputSearch_Styles_Square**
+
+---
+
 ---
 
 ### Live Instance
@@ -353,6 +617,26 @@ After users enter text into the Search field, an `XmarkCircle` icon appears; if
 | Default | Hover | Focus | Default (user input) | Disabled |
 | ------- | ----- | ----- | -------------------- | -------- |
 
+**InputSearch_Rounded_Default**
+
+---
+
+**InputSearch_Rounded_Hover**
+
+---
+
+**InputSearch_Rounded_Focus**
+
+---
+
+**InputSearch_Rounded_User Input**
+
+---
+
+**InputSearch_Rounded_Disabled**
+
+---
+
 ---
 
 ### Search Input – Square
@@ -364,12 +648,36 @@ After users enter text into the Search field, an `XmarkCircle` icon appears; if
 | Default | Hover | Focus | Default (user input) | Disabled |
 | ------- | ----- | ----- | -------------------- | -------- |
 
+**InputSearch_Square_Default**
+
+---
+
+**InputSearch_Square_Hover**
+
+---
+
+**InputSearch_Square_Focus**
+
+---
+
+**InputSearch_Square_User Input**
+
+---
+
+**InputSearch_Square_Disabled**
+
+---
+
 ---
 
 ### Search Input Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Search spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -383,6 +691,26 @@ Each intent is demonstrated below using the Rounded variant for reference. Regar
 | Default | Negative | Negative + Intent Message | Notice | Notice + Intent Message |
 | ------- | -------- | ------------------------- | ------ | ----------------------- |
 
+**InputSearch_Intent_Default**
+
+---
+
+**InputSearch_Intent_Negative**
+
+---
+
+**InputSearch_Intent_Negative + Message**
+
+---
+
+**InputSearch_Intent_Notice**
+
+---
+
+**InputSearch_Intent_Notice + Message**
+
+---
+
 ---
 
 ## Text Input
@@ -392,6 +720,14 @@ Each intent is demonstrated below using the Rounded variant for reference. Regar
 
 ### Text Input Types
 
+**Text Input_Field**
+
+---
+
+**Text Input_Area**
+
+---
+
 ---
 
 ### Live Instance
@@ -409,6 +745,26 @@ Text Input – Field is designed to fit one line of text and should be only used
 | Default | Hover | Focus | Default (user input) | Disabled |
 | ------- | ----- | ----- | -------------------- | -------- |
 
+**TextInput_Field_Default**
+
+---
+
+**TextInput_Field_Hover**
+
+---
+
+**TextInput_Field_Focus**
+
+---
+
+**TextInput_Field_User Input**
+
+---
+
+**TextInput_Field_Disabled**
+
+---
+
 ---
 
 ### Text Input – Area
@@ -422,12 +778,36 @@ It can be set to accept a specific number of characters in case there is a need
 | Default | Hover | Focus | Default (user input) | Disabled |
 | ------- | ----- | ----- | -------------------- | -------- |
 
+**TextInput_Area_Default**
+
+---
+
+**TextInput_Area_Hover**
+
+---
+
+**TextInput_Area_Focus**
+
+---
+
+**TextInput_Area_User Input**
+
+---
+
+**TextInput_Area_Disabled**
+
+---
+
 ---
 
 ### Text Input Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Text Input spacing**
+
+---
+
 ---
 
 ### Text Input Intent Variations
@@ -439,6 +819,62 @@ Optionally, Intent Messages can be displayed to further communicate why a Negati
 | Default | Negative | Negative + Intent Message | Notice | Notice + Intent Message | Positive | Positive + Intent Message |
 | :-----: | :------: | ------------------------- | :----: | ----------------------- | :------: | ------------------------- |
 
+**InputText_Field_Default**
+
+---
+
+**InputText_Field_Negative + Message**
+
+---
+
+**InputText_Field_Negative**
+
+---
+
+**InputText_Field_Notice**
+
+---
+
+**InputText_Field_Notice + Message**
+
+---
+
+**InputText_Field_Positive**
+
+---
+
+**InputText_Field_Positive + Message**
+
+---
+
+**InputText_Area_Default**
+
+---
+
+**InputText_Area_Negative**
+
+---
+
+**InputText_Area_Negative + Message**
+
+---
+
+**InputText_Area_Notice**
+
+---
+
+**InputText_Area_Notice + Message**
+
+---
+
+**InputText_Area_Positive**
+
+---
+
+**InputText_Area_Positive + Message**
+
+---
+
 ## Code
 
 ## Control Input Components
@@ -448,6 +884,14 @@ Optionally, Intent Messages can be displayed to further communicate why a Negati
 
 ### Visual Preview
 
+**Preview_Code_InputSearch**
+
+---
+
+**Preview_Code_InputText**
+
+---
+
 > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
 
 ---
@@ -604,15 +1048,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Field 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>
@@ -796,15 +1239,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Field 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>
@@ -945,15 +1387,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Field 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>