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

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

@@ -11640,16 +11640,21 @@ exports[`Storyshots a/Tooltip Base 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip bottom x-background-cards"
+      className="tooltip-content bottom"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11668,9 +11673,6 @@ exports[`Storyshots a/Tooltip Base 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -11688,16 +11690,21 @@ exports[`Storyshots a/Tooltip Left 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip left x-background-cards"
+      className="tooltip-content left"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11716,9 +11723,6 @@ exports[`Storyshots a/Tooltip Left 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -11736,16 +11740,21 @@ exports[`Storyshots a/Tooltip Right 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip right x-background-cards"
+      className="tooltip-content right"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11764,9 +11773,6 @@ exports[`Storyshots a/Tooltip Right 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -11784,16 +11790,21 @@ exports[`Storyshots a/Tooltip Top 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip top x-background-cards"
+      className="tooltip-content top"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11812,9 +11823,6 @@ exports[`Storyshots a/Tooltip Top 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -26695,9 +26703,9 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
                       className="rcp-saturation-cursor"
                       style={
                         {
-                          "backgroundColor": "rgb(0 0 0)",
+                          "backgroundColor": "rgb(255 255 255)",
                           "left": 0,
-                          "top": 200,
+                          "top": 0,
                         }
                       }
                     />
@@ -26735,7 +26743,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
                         className="rcp-alpha"
                         style={
                           {
-                            "background": "linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 1)) top left / auto auto,
+                            "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",
                           }
@@ -26745,7 +26753,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
                           className="rcp-alpha-cursor"
                           style={
                             {
-                              "background": "linear-gradient(to right, rgb(0 0 0 / 1), rgb(0 0 0 / 1)) top left / auto auto,
+                              "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,
@@ -27173,9 +27181,9 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
                       className="rcp-saturation-cursor"
                       style={
                         {
-                          "backgroundColor": "rgb(0 0 0)",
+                          "backgroundColor": "rgb(255 255 255)",
                           "left": 0,
-                          "top": 200,
+                          "top": 0,
                         }
                       }
                     />
@@ -27213,7 +27221,7 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
                         className="rcp-alpha"
                         style={
                           {
-                            "background": "linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 1)) top left / auto auto,
+                            "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",
                           }
@@ -27223,7 +27231,7 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
                           className="rcp-alpha-cursor"
                           style={
                             {
-                              "background": "linear-gradient(to right, rgb(0 0 0 / 1), rgb(0 0 0 / 1)) top left / auto auto,
+                              "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,
@@ -31241,6 +31249,701 @@ exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
 </form>
 `;
 
+exports[`Storyshots g/DragAndDrop Base 1`] = `
+<ul
+  className="base drag-and-drop"
+>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      1
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      2
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      3
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      4
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      5
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      6
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      7
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      8
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`Storyshots g/DragAndDrop With Formik Inputs 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <ul
+    className="base drag-and-drop"
+  >
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            1
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-1"
+              name="input-1"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            2
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-2"
+              name="input-2"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            3
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-3"
+              name="input-3"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            4
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-4"
+              name="input-4"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            5
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-5"
+              name="input-5"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            6
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-6"
+              name="input-6"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            7
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-7"
+              name="input-7"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            8
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-8"
+              name="input-8"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
 <div
   className="base expandable-lexical-preview y-paragraph"
@@ -31252,6 +31955,7 @@ exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
   </p>
   <div
     className="base editor-input y-paragraph disabled"
+    id="the-bad-ass-input"
     style={
       {
         "--resize": "vertical",
@@ -31274,7 +31978,7 @@ exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
     />
   </div>
   <button
-    className="base button base expand-button ai-icon x-background-far modifierCompact"
+    className="base button expand-button ai-icon x-background-far modifierCompact"
     onClick={[Function]}
     type="button"
   >