@pareto-engineering/design-system 4.0.0-alpha.77 → 4.0.0-alpha.79

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -10355,21 +10355,6 @@ exports[`Storyshots a/Label Normal 1`] = `
 ]
 `;
 
-exports[`Storyshots a/LexicalPreview Base 1`] = `
-<div
-  className="base lexical-preview y-paragraph"
->
-  <div
-    aria-autocomplete="none"
-    aria-readonly={true}
-    className="content-editable"
-    contentEditable={false}
-    role="textbox"
-    spellCheck={true}
-  />
-</div>
-`;
-
 exports[`Storyshots a/LoadingCircle Base 1`] = `
 <div
   className="x-main1 b-x"
@@ -11116,30 +11101,48 @@ exports[`Storyshots a/ProgressBar Height 1`] = `
 `;
 
 exports[`Storyshots a/Quote Base 1`] = `
-<div
-  className="y-background-far b-y u1 p-u"
+<figure
+  className="base quote x-highlighted"
 >
-  <figure
-    className="base quote x-main1"
+  <blockquote
+    cite="https://example.com"
+    className="blockquote"
   >
-    <blockquote
-      className="blockquote uc"
+    <p
+      className="quotation h2"
     >
-      <p
-        className="quotation c-x md-s0 s-1"
+      <span
+        className="c-x"
       >
-        Pareto was like having a full-time employee without having to hire somebody. That’s how I would explain it. An on-call, on-demand full-time employee.
-      </p>
-    </blockquote>
-    <figcaption
-      className="figcaption"
+        “
+      </span>
+      <span
+        className="c-x"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+      </span>
+      <span
+        className="c-x"
+      >
+        ”
+      </span>
+    </p>
+  </blockquote>
+  <figcaption
+    className="figcaption"
+  >
+    <span
+      className="x-metadata c-x"
     >
-      <cite>
-        Austen Spoonts
-      </cite>
-    </figcaption>
-  </figure>
-</div>
+      -
+    </span>
+    <cite
+      className="x-metadata c-x"
+    >
+      John Doe
+    </cite>
+  </figcaption>
+</figure>
 `;
 
 exports[`Storyshots a/Removable Base 1`] = `
@@ -11623,16 +11626,204 @@ exports[`Storyshots a/ToggleSwitch Base 1`] = `
 </button>
 `;
 
-exports[`Storyshots a/XMLEditor Base 1`] = `
+exports[`Storyshots a/Tooltip Base 1`] = `
 <div
-  className="base code-editor"
   style={
     {
-      "--gutter-width": "3em",
-      "--height": "20em",
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": "auto",
+      "paddingTop": "10rem",
+      "width": "50%",
     }
   }
-/>
+>
+  <div
+    aria-describedby="test-tooltip"
+  >
+    <button
+      className="base button x-main"
+      type="button"
+    >
+      Hover on me!
+    </button>
+    <div
+      className="base tooltip bottom x-background-cards"
+      id="test-tooltip"
+      role="tooltip"
+    >
+      <div>
+        <ul>
+          <li>
+            This is the tooltips content
+          </li>
+          <li>
+            Style it the way you want!
+          </li>
+          <li>
+            It's a tooltip, no interactive elements please
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <p>
+    With some more content around
+  </p>
+</div>
+`;
+
+exports[`Storyshots a/Tooltip Left 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": "auto",
+      "paddingTop": "10rem",
+      "width": "50%",
+    }
+  }
+>
+  <div
+    aria-describedby="test-tooltip"
+  >
+    <button
+      className="base button x-main"
+      type="button"
+    >
+      Hover on me!
+    </button>
+    <div
+      className="base tooltip left x-background-cards"
+      id="test-tooltip"
+      role="tooltip"
+    >
+      <div>
+        <ul>
+          <li>
+            This is the tooltips content
+          </li>
+          <li>
+            Style it the way you want!
+          </li>
+          <li>
+            It's a tooltip, no interactive elements please
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <p>
+    With some more content around
+  </p>
+</div>
+`;
+
+exports[`Storyshots a/Tooltip Right 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": "auto",
+      "paddingTop": "10rem",
+      "width": "50%",
+    }
+  }
+>
+  <div
+    aria-describedby="test-tooltip"
+  >
+    <button
+      className="base button x-main"
+      type="button"
+    >
+      Hover on me!
+    </button>
+    <div
+      className="base tooltip right x-background-cards"
+      id="test-tooltip"
+      role="tooltip"
+    >
+      <div>
+        <ul>
+          <li>
+            This is the tooltips content
+          </li>
+          <li>
+            Style it the way you want!
+          </li>
+          <li>
+            It's a tooltip, no interactive elements please
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <p>
+    With some more content around
+  </p>
+</div>
+`;
+
+exports[`Storyshots a/Tooltip Top 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": "auto",
+      "paddingTop": "10rem",
+      "width": "50%",
+    }
+  }
+>
+  <div
+    aria-describedby="test-tooltip"
+  >
+    <button
+      className="base button x-main"
+      type="button"
+    >
+      Hover on me!
+    </button>
+    <div
+      className="base tooltip top x-background-cards"
+      id="test-tooltip"
+      role="tooltip"
+    >
+      <div>
+        <ul>
+          <li>
+            This is the tooltips content
+          </li>
+          <li>
+            Style it the way you want!
+          </li>
+          <li>
+            It's a tooltip, no interactive elements please
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <p>
+    With some more content around
+  </p>
+</div>
+`;
+
+exports[`Storyshots a/XMLEditor Base 1`] = `
+<div>
+  <pre>
+    {}
+  </pre>
+</div>
 `;
 
 exports[`Storyshots b/Button Arrow Left 1`] = `
@@ -21079,42 +21270,6 @@ exports[`Storyshots b/Card/Group Card Group Not Snap Scroller 1`] = `
 </div>
 `;
 
-exports[`Storyshots b/ExpandableLexicalPreview Base 1`] = `
-<div
-  className="base expandable-lexical-preview y-paragraph"
-  style={
-    {
-      "--resize": "vertical",
-    }
-  }
->
-  <p
-    className="title h2"
-  >
-    Task Instructions
-  </p>
-  <div
-    className="lexical-content"
-  >
-    <div
-      aria-autocomplete="none"
-      aria-readonly={true}
-      className="content-editable"
-      contentEditable={false}
-      role="textbox"
-      spellCheck={true}
-    />
-    <button
-      className="base button base expand-button ai-icon x-background-far modifierCompact"
-      onClick={[Function]}
-      type="button"
-    >
-      D
-    </button>
-  </div>
-</div>
-`;
-
 exports[`Storyshots b/Logo Base 1`] = `
 <svg
   className="base svg base logo x-paragraph y-transparent"
@@ -26387,41 +26542,50 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
         Project Instructions
       </label>
       <div
-        className="base toolbar"
+        className="base toolbar-plugin x-background-far"
       >
         <div
           className="group"
         >
           <button
+            className="ai-icon"
+            disabled={true}
             onClick={[Function]}
             type="button"
           >
-            <span
-              className="icon"
-            >
-              |
-            </span>
+            A
           </button>
           <button
+            className="ai-icon"
+            disabled={true}
             onClick={[Function]}
             type="button"
           >
-            <span
-              className="icon"
-            >
-              }
-            </span>
+            B
           </button>
-          <button
-            onClick={[Function]}
-            type="button"
+        </div>
+        <button
+          className="base block-format-drop-down group"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="ai-icon"
           >
-            <span
-              className="icon"
-            >
-              ~
-            </span>
-          </button>
+            N
+          </span>
+          <span>
+            Normal
+          </span>
+          <span
+            className="icon"
+          >
+            V
+          </span>
+        </button>
+        <div
+          className="group"
+        >
           <button
             onClick={[Function]}
             type="button"
@@ -26429,149 +26593,18 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              ?
+              |
             </span>
           </button>
           <button
-            className="color-menu-button"
             onClick={[Function]}
-            style={
-              {
-                "position": "relative",
-              }
-            }
             type="button"
           >
             <span
               className="icon"
-              style={
-                {
-                  "color": "var(--paragraph)",
-                }
-              }
             >
-              Q
+              }
             </span>
-            <div
-              className="base popover x-background-near bottom left"
-            >
-              <div
-                className="color-menu"
-              >
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "red",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "blue",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "green",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "yellow",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "orange",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "purple",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "pink",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "brown",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-              </div>
-            </div>
           </button>
           <button
             onClick={[Function]}
@@ -26580,7 +26613,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              ]
+              ~
             </span>
           </button>
           <button
@@ -26590,7 +26623,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              .
+              ?
             </span>
           </button>
           <button
@@ -26600,33 +26633,241 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              -
+              ]
             </span>
           </button>
         </div>
+        <button
+          className="base font-size-drop-down group"
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            15px
+          </span>
+          <span
+            className="icon"
+          >
+            V
+          </span>
+        </button>
         <div
           className="group"
         >
-          <button
-            onClick={[Function]}
-            type="button"
+          <div
+            className="base color-picker"
           >
-            <span
-              className="icon"
+            <button
+              onClick={[Function]}
+              type="button"
             >
-              ^
-            </span>
-          </button>
-          <button
-            onClick={[Function]}
-            type="button"
+              <span
+                className="icon"
+              >
+                '
+              </span>
+              <span
+                className="icon"
+              >
+                V
+              </span>
+            </button>
+            <div
+              className="base popover x-background-far bottom left"
+            >
+              <div
+                className="rcp-root rcp"
+              >
+                <div
+                  className="rcp-interactive"
+                  onPointerDown={[Function]}
+                >
+                  <div
+                    className="rcp-saturation"
+                    style={
+                      {
+                        "backgroundColor": "hsl(0 100% 50%)",
+                        "height": 200,
+                      }
+                    }
+                  >
+                    <div
+                      className="rcp-saturation-cursor"
+                      style={
+                        {
+                          "backgroundColor": "rgb(0 0 0)",
+                          "left": 0,
+                          "top": 200,
+                        }
+                      }
+                    />
+                  </div>
+                </div>
+                <div
+                  className="rcp-body"
+                >
+                  <section
+                    className="rcp-section"
+                  >
+                    <div
+                      className="rcp-interactive"
+                      onPointerDown={[Function]}
+                    >
+                      <div
+                        className="rcp-hue"
+                      >
+                        <div
+                          className="rcp-hue-cursor"
+                          style={
+                            {
+                              "backgroundColor": "hsl(0 100% 50%)",
+                              "left": 0,
+                            }
+                          }
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className="rcp-interactive"
+                      onPointerDown={[Function]}
+                    >
+                      <div
+                        className="rcp-alpha"
+                        style={
+                          {
+                            "background": "linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 1)) top left / auto auto,
+                      conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
+                      repeat",
+                          }
+                        }
+                      >
+                        <div
+                          className="rcp-alpha-cursor"
+                          style={
+                            {
+                              "background": "linear-gradient(to right, rgb(0 0 0 / 1), rgb(0 0 0 / 1)) top left / auto auto,
+                        conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
+                        repeat",
+                              "left": 1,
+                            }
+                          }
+                        />
+                      </div>
+                    </div>
+                  </section>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="base color-picker"
           >
-            <span
-              className="icon"
+            <button
+              onClick={[Function]}
+              type="button"
             >
-              _
-            </span>
-          </button>
+              <span
+                className="icon"
+              >
+                #
+              </span>
+              <span
+                className="icon"
+              >
+                V
+              </span>
+            </button>
+            <div
+              className="base popover x-background-far bottom left"
+            >
+              <div
+                className="rcp-root rcp"
+              >
+                <div
+                  className="rcp-interactive"
+                  onPointerDown={[Function]}
+                >
+                  <div
+                    className="rcp-saturation"
+                    style={
+                      {
+                        "backgroundColor": "hsl(0 100% 50%)",
+                        "height": 200,
+                      }
+                    }
+                  >
+                    <div
+                      className="rcp-saturation-cursor"
+                      style={
+                        {
+                          "backgroundColor": "rgb(255 255 255)",
+                          "left": 0,
+                          "top": 0,
+                        }
+                      }
+                    />
+                  </div>
+                </div>
+                <div
+                  className="rcp-body"
+                >
+                  <section
+                    className="rcp-section"
+                  >
+                    <div
+                      className="rcp-interactive"
+                      onPointerDown={[Function]}
+                    >
+                      <div
+                        className="rcp-hue"
+                      >
+                        <div
+                          className="rcp-hue-cursor"
+                          style={
+                            {
+                              "backgroundColor": "hsl(0 100% 50%)",
+                              "left": 0,
+                            }
+                          }
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className="rcp-interactive"
+                      onPointerDown={[Function]}
+                    >
+                      <div
+                        className="rcp-alpha"
+                        style={
+                          {
+                            "background": "linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 1)) top left / auto auto,
+                      conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
+                      repeat",
+                          }
+                        }
+                      >
+                        <div
+                          className="rcp-alpha-cursor"
+                          style={
+                            {
+                              "background": "linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 1)) top left / auto auto,
+                        conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
+                        repeat",
+                              "left": 1,
+                            }
+                          }
+                        />
+                      </div>
+                    </div>
+                  </section>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="group"
+        >
           <button
             onClick={[Function]}
             type="button"
@@ -26634,7 +26875,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              \`
+              ^
             </span>
           </button>
           <button
@@ -26644,13 +26885,9 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              {
+              _
             </span>
           </button>
-        </div>
-        <div
-          className="group"
-        >
           <button
             onClick={[Function]}
             type="button"
@@ -26658,18 +26895,17 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              \\
+              \`
             </span>
           </button>
           <button
-            className="flip"
             onClick={[Function]}
             type="button"
           >
             <span
               className="icon"
             >
-              \\
+              {
             </span>
           </button>
         </div>
@@ -26784,8 +27020,47 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
          (Optional)
       </label>
       <div
-        className="base toolbar"
+        className="base toolbar-plugin x-background-far"
       >
+        <div
+          className="group"
+        >
+          <button
+            className="ai-icon"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            A
+          </button>
+          <button
+            className="ai-icon"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            B
+          </button>
+        </div>
+        <button
+          className="base block-format-drop-down group"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="ai-icon"
+          >
+            N
+          </span>
+          <span>
+            Normal
+          </span>
+          <span
+            className="icon"
+          >
+            V
+          </span>
+        </button>
         <div
           className="group"
         >
@@ -26830,176 +27105,243 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
             </span>
           </button>
           <button
-            className="color-menu-button"
             onClick={[Function]}
-            style={
-              {
-                "position": "relative",
-              }
-            }
             type="button"
           >
             <span
               className="icon"
-              style={
-                {
-                  "color": "var(--paragraph)",
-                }
-              }
             >
-              Q
+              ]
             </span>
+          </button>
+        </div>
+        <button
+          className="base font-size-drop-down group"
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            15px
+          </span>
+          <span
+            className="icon"
+          >
+            V
+          </span>
+        </button>
+        <div
+          className="group"
+        >
+          <div
+            className="base color-picker"
+          >
+            <button
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                className="icon"
+              >
+                '
+              </span>
+              <span
+                className="icon"
+              >
+                V
+              </span>
+            </button>
             <div
-              className="base popover x-background-near bottom left"
+              className="base popover x-background-far bottom left"
             >
               <div
-                className="color-menu"
+                className="rcp-root rcp"
               >
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "red",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "blue",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "green",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "yellow",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "orange",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "purple",
-                    }
-                  }
-                  tabIndex={0}
-                >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "pink",
-                    }
-                  }
-                  tabIndex={0}
+                <div
+                  className="rcp-interactive"
+                  onPointerDown={[Function]}
                 >
-                  o
-                </span>
-                <span
-                  className="icon color-option"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  style={
-                    {
-                      "color": "brown",
+                  <div
+                    className="rcp-saturation"
+                    style={
+                      {
+                        "backgroundColor": "hsl(0 100% 50%)",
+                        "height": 200,
+                      }
                     }
-                  }
-                  tabIndex={0}
+                  >
+                    <div
+                      className="rcp-saturation-cursor"
+                      style={
+                        {
+                          "backgroundColor": "rgb(0 0 0)",
+                          "left": 0,
+                          "top": 200,
+                        }
+                      }
+                    />
+                  </div>
+                </div>
+                <div
+                  className="rcp-body"
                 >
-                  o
-                </span>
+                  <section
+                    className="rcp-section"
+                  >
+                    <div
+                      className="rcp-interactive"
+                      onPointerDown={[Function]}
+                    >
+                      <div
+                        className="rcp-hue"
+                      >
+                        <div
+                          className="rcp-hue-cursor"
+                          style={
+                            {
+                              "backgroundColor": "hsl(0 100% 50%)",
+                              "left": 0,
+                            }
+                          }
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className="rcp-interactive"
+                      onPointerDown={[Function]}
+                    >
+                      <div
+                        className="rcp-alpha"
+                        style={
+                          {
+                            "background": "linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 1)) top left / auto auto,
+                      conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
+                      repeat",
+                          }
+                        }
+                      >
+                        <div
+                          className="rcp-alpha-cursor"
+                          style={
+                            {
+                              "background": "linear-gradient(to right, rgb(0 0 0 / 1), rgb(0 0 0 / 1)) top left / auto auto,
+                        conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
+                        repeat",
+                              "left": 1,
+                            }
+                          }
+                        />
+                      </div>
+                    </div>
+                  </section>
+                </div>
               </div>
             </div>
-          </button>
-          <button
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="icon"
-            >
-              ]
-            </span>
-          </button>
-          <button
-            onClick={[Function]}
-            type="button"
+          </div>
+          <div
+            className="base color-picker"
           >
-            <span
-              className="icon"
+            <button
+              onClick={[Function]}
+              type="button"
             >
-              .
-            </span>
-          </button>
-          <button
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="icon"
+              <span
+                className="icon"
+              >
+                #
+              </span>
+              <span
+                className="icon"
+              >
+                V
+              </span>
+            </button>
+            <div
+              className="base popover x-background-far bottom left"
             >
-              -
-            </span>
-          </button>
+              <div
+                className="rcp-root rcp"
+              >
+                <div
+                  className="rcp-interactive"
+                  onPointerDown={[Function]}
+                >
+                  <div
+                    className="rcp-saturation"
+                    style={
+                      {
+                        "backgroundColor": "hsl(0 100% 50%)",
+                        "height": 200,
+                      }
+                    }
+                  >
+                    <div
+                      className="rcp-saturation-cursor"
+                      style={
+                        {
+                          "backgroundColor": "rgb(255 255 255)",
+                          "left": 0,
+                          "top": 0,
+                        }
+                      }
+                    />
+                  </div>
+                </div>
+                <div
+                  className="rcp-body"
+                >
+                  <section
+                    className="rcp-section"
+                  >
+                    <div
+                      className="rcp-interactive"
+                      onPointerDown={[Function]}
+                    >
+                      <div
+                        className="rcp-hue"
+                      >
+                        <div
+                          className="rcp-hue-cursor"
+                          style={
+                            {
+                              "backgroundColor": "hsl(0 100% 50%)",
+                              "left": 0,
+                            }
+                          }
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className="rcp-interactive"
+                      onPointerDown={[Function]}
+                    >
+                      <div
+                        className="rcp-alpha"
+                        style={
+                          {
+                            "background": "linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 1)) top left / auto auto,
+                      conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
+                      repeat",
+                          }
+                        }
+                      >
+                        <div
+                          className="rcp-alpha-cursor"
+                          style={
+                            {
+                              "background": "linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 1)) top left / auto auto,
+                        conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
+                        repeat",
+                              "left": 1,
+                            }
+                          }
+                        />
+                      </div>
+                    </div>
+                  </section>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <div
           className="group"
@@ -27045,31 +27387,6 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
             </span>
           </button>
         </div>
-        <div
-          className="group"
-        >
-          <button
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="icon"
-            >
-              \\
-            </span>
-          </button>
-          <button
-            className="flip"
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="icon"
-            >
-              \\
-            </span>
-          </button>
-        </div>
       </div>
       <div
         className="content-editable"
@@ -29892,6 +30209,128 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/SelectInput With Default 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input"
+  >
+    <div
+      className="base single"
+    >
+      <label
+        className="base form-label x-paragraph"
+        htmlFor="workType"
+      >
+        Work Type
+      </label>
+      <div
+        className="select-wrapper"
+      >
+        <select
+          className="input y-paragraph"
+          disabled={false}
+          id="workType"
+          name="workType"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value=""
+        >
+          <option
+            disabled={true}
+            value=""
+          >
+            Select an option
+          </option>
+          <option
+            disabled={false}
+            value="Work"
+          >
+            Work
+          </option>
+          <option
+            disabled={false}
+            value="Managing"
+          >
+            Managing
+          </option>
+          <option
+            disabled={false}
+            value="Training"
+          >
+            Training
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/SelectInput With Default No Override 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input"
+  >
+    <div
+      className="base single"
+    >
+      <label
+        className="base form-label x-paragraph"
+        htmlFor="workType"
+      >
+        Work Type
+      </label>
+      <div
+        className="select-wrapper"
+      >
+        <select
+          className="input y-paragraph"
+          disabled={false}
+          id="workType"
+          name="workType"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value="Training"
+        >
+          <option
+            disabled={true}
+            value=""
+          >
+            Select an option
+          </option>
+          <option
+            disabled={false}
+            value="Work"
+          >
+            Work
+          </option>
+          <option
+            disabled={false}
+            value="Managing"
+          >
+            Managing
+          </option>
+          <option
+            disabled={false}
+            value="Training"
+          >
+            Training
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/TextInput Base 1`] = `
 <form
   action="#"
@@ -30802,6 +31241,48 @@ exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
 </form>
 `;
 
+exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
+<div
+  className="base expandable-lexical-preview y-paragraph"
+>
+  <p
+    className="title h2"
+  >
+    Task Instructions
+  </p>
+  <div
+    className="base editor-input y-paragraph disabled"
+    style={
+      {
+        "--resize": "vertical",
+        "--rows": "10em",
+      }
+    }
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="taskDescription"
+    />
+    <div
+      aria-autocomplete="none"
+      aria-readonly={true}
+      className="content-editable"
+      contentEditable={false}
+      id="taskDescription"
+      role="textbox"
+      spellCheck={true}
+    />
+  </div>
+  <button
+    className="base button base expand-button ai-icon x-background-far modifierCompact"
+    onClick={[Function]}
+    type="button"
+  >
+    D
+  </button>
+</div>
+`;
+
 exports[`Storyshots r/SwitchRouteMap Base 1`] = `"This component does not need a visual test."`;
 
 exports[`Storyshots r/common/PrivateRoute Base 1`] = `"This component does not need a visual test."`;