@pareto-engineering/design-system 4.0.0-alpha.76 → 4.0.0-alpha.78

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

@@ -1103,7 +1103,7 @@ exports[`Storyshots a/DatePicker Base 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day"
+                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -1120,7 +1120,7 @@ exports[`Storyshots a/DatePicker Base 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={-1}
+                  tabIndex={0}
                   type="button"
                 >
                   1
@@ -1303,7 +1303,7 @@ exports[`Storyshots a/DatePicker Base 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
+                  className="rdp-button_reset rdp-button rdp-day"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -1320,7 +1320,7 @@ exports[`Storyshots a/DatePicker Base 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={0}
+                  tabIndex={-1}
                   type="button"
                 >
                   8
@@ -2467,7 +2467,7 @@ exports[`Storyshots a/DatePicker Multiple Selection 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day"
+                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -2484,7 +2484,7 @@ exports[`Storyshots a/DatePicker Multiple Selection 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={-1}
+                  tabIndex={0}
                   type="button"
                 >
                   1
@@ -2667,7 +2667,7 @@ exports[`Storyshots a/DatePicker Multiple Selection 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
+                  className="rdp-button_reset rdp-button rdp-day"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -2684,7 +2684,7 @@ exports[`Storyshots a/DatePicker Multiple Selection 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={0}
+                  tabIndex={-1}
                   type="button"
                 >
                   8
@@ -3831,7 +3831,7 @@ exports[`Storyshots a/DatePicker Range Selection 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day"
+                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -3848,7 +3848,7 @@ exports[`Storyshots a/DatePicker Range Selection 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={-1}
+                  tabIndex={0}
                   type="button"
                 >
                   1
@@ -4031,7 +4031,7 @@ exports[`Storyshots a/DatePicker Range Selection 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
+                  className="rdp-button_reset rdp-button rdp-day"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -4048,7 +4048,7 @@ exports[`Storyshots a/DatePicker Range Selection 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={0}
+                  tabIndex={-1}
                   type="button"
                 >
                   8
@@ -5195,7 +5195,7 @@ exports[`Storyshots a/DatePicker Time Range Selection 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day"
+                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -5212,7 +5212,7 @@ exports[`Storyshots a/DatePicker Time Range Selection 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={-1}
+                  tabIndex={0}
                   type="button"
                 >
                   1
@@ -5395,7 +5395,7 @@ exports[`Storyshots a/DatePicker Time Range Selection 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
+                  className="rdp-button_reset rdp-button rdp-day"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -5412,7 +5412,7 @@ exports[`Storyshots a/DatePicker Time Range Selection 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={0}
+                  tabIndex={-1}
                   type="button"
                 >
                   8
@@ -6590,7 +6590,7 @@ exports[`Storyshots a/DatePicker Time Selection 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day"
+                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -6607,7 +6607,7 @@ exports[`Storyshots a/DatePicker Time Selection 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={-1}
+                  tabIndex={0}
                   type="button"
                 >
                   1
@@ -6790,7 +6790,7 @@ exports[`Storyshots a/DatePicker Time Selection 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
+                  className="rdp-button_reset rdp-button rdp-day"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -6807,7 +6807,7 @@ exports[`Storyshots a/DatePicker Time Selection 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={0}
+                  tabIndex={-1}
                   type="button"
                 >
                   8
@@ -7974,7 +7974,7 @@ exports[`Storyshots a/DatePicker With Custom Footer 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day"
+                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -7991,7 +7991,7 @@ exports[`Storyshots a/DatePicker With Custom Footer 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={-1}
+                  tabIndex={0}
                   type="button"
                 >
                   1
@@ -8174,7 +8174,7 @@ exports[`Storyshots a/DatePicker With Custom Footer 1`] = `
                 role="presentation"
               >
                 <button
-                  className="rdp-button_reset rdp-button rdp-day rdp-day_today"
+                  className="rdp-button_reset rdp-button rdp-day"
                   name="day"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -8191,7 +8191,7 @@ exports[`Storyshots a/DatePicker With Custom Footer 1`] = `
                   onTouchStart={[Function]}
                   role="gridcell"
                   style={{}}
-                  tabIndex={0}
+                  tabIndex={-1}
                   type="button"
                 >
                   8
@@ -11116,30 +11116,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 +11641,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`] = `
@@ -26387,41 +26593,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 +26644,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 +26664,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              ]
+              ~
             </span>
           </button>
           <button
@@ -26590,7 +26674,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              .
+              ?
             </span>
           </button>
           <button
@@ -26600,33 +26684,241 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              -
+              ]
             </span>
           </button>
         </div>
-        <div
-          className="group"
-        >
-          <button
-            onClick={[Function]}
-            type="button"
+        <button
+          className="base font-size-drop-down group"
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            15px
+          </span>
+          <span
+            className="icon"
           >
-            <span
-              className="icon"
+            V
+          </span>
+        </button>
+        <div
+          className="group"
+        >
+          <div
+            className="base color-picker"
+          >
+            <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 +26926,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              \`
+              ^
             </span>
           </button>
           <button
@@ -26644,13 +26936,9 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
             <span
               className="icon"
             >
-              {
+              _
             </span>
           </button>
-        </div>
-        <div
-          className="group"
-        >
           <button
             onClick={[Function]}
             type="button"
@@ -26658,18 +26946,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 +27071,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 +27156,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 +27438,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"