@pareto-engineering/design-system 4.0.0-alpha.72 → 4.0.0-alpha.74

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

@@ -15584,43 +15584,47 @@ exports[`Storyshots f/FormInput Base 1`] = `
   <div
     className="base select-input form-input"
   >
-    <label
-      className="base form-label x-paragraph"
-      htmlFor="food"
-    >
-      What do you want for dinner ?
-    </label>
     <div
-      className="select-wrapper"
+      className="base single"
     >
-      <select
-        className="input y-paragraph"
-        disabled={false}
-        id="food"
-        name="food"
-        onBlur={[Function]}
-        onChange={[Function]}
-        value=""
+      <label
+        className="base form-label x-paragraph"
+        htmlFor="food"
       >
-        <option
-          disabled={false}
-          value="italian"
-        >
-          A nice pizza
-        </option>
-        <option
-          disabled={false}
-          value="turkish"
-        >
-          A delicious kebab
-        </option>
-        <option
+        What do you want for dinner ?
+      </label>
+      <div
+        className="select-wrapper"
+      >
+        <select
+          className="input y-paragraph"
           disabled={false}
-          value="french"
+          id="food"
+          name="food"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value=""
         >
-          A three course delicate french meal
-        </option>
-      </select>
+          <option
+            disabled={false}
+            value="italian"
+          >
+            A nice pizza
+          </option>
+          <option
+            disabled={false}
+            value="turkish"
+          >
+            A delicious kebab
+          </option>
+          <option
+            disabled={false}
+            value="french"
+          >
+            A three course delicate french meal
+          </option>
+        </select>
+      </div>
     </div>
   </div>
   <div
@@ -15785,43 +15789,47 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
   <div
     className="base select-input form-input"
   >
-    <label
-      className="base form-label x-paragraph"
-      htmlFor="food"
-    >
-      What do you want for dinner ?
-    </label>
     <div
-      className="select-wrapper disabled"
+      className="base single"
     >
-      <select
-        className="input y-paragraph"
-        disabled={true}
-        id="food"
-        name="food"
-        onBlur={[Function]}
-        onChange={[Function]}
-        value=""
+      <label
+        className="base form-label x-paragraph"
+        htmlFor="food"
       >
-        <option
-          disabled={false}
-          value="italian"
-        >
-          A nice pizza
-        </option>
-        <option
-          disabled={false}
-          value="turkish"
-        >
-          A delicious kebab
-        </option>
-        <option
-          disabled={false}
-          value="french"
+        What do you want for dinner ?
+      </label>
+      <div
+        className="select-wrapper disabled"
+      >
+        <select
+          className="input y-paragraph"
+          disabled={true}
+          id="food"
+          name="food"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value=""
         >
-          A three course delicate french meal
-        </option>
-      </select>
+          <option
+            disabled={false}
+            value="italian"
+          >
+            A nice pizza
+          </option>
+          <option
+            disabled={false}
+            value="turkish"
+          >
+            A delicious kebab
+          </option>
+          <option
+            disabled={false}
+            value="french"
+          >
+            A three course delicate french meal
+          </option>
+        </select>
+      </div>
     </div>
   </div>
   <div
@@ -15982,24 +15990,28 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
   <div
     className="base select-input form-input"
   >
-    <label
-      className="base form-label x-paragraph"
-      htmlFor="status"
-    >
-      Select Task Status
-    </label>
     <div
-      className="select-wrapper"
+      className="base single"
     >
-      <select
-        className="input y-paragraph"
-        disabled={false}
-        id="status"
-        name="status"
-        onBlur={[Function]}
-        onChange={[Function]}
-        value=""
-      />
+      <label
+        className="base form-label x-paragraph"
+        htmlFor="status"
+      >
+        Select Task Status
+      </label>
+      <div
+        className="select-wrapper"
+      >
+        <select
+          className="input y-paragraph"
+          disabled={false}
+          id="status"
+          name="status"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value=""
+        />
+      </div>
     </div>
   </div>
   <div
@@ -20147,24 +20159,28 @@ exports[`Storyshots f/fields/QuerySelect Base 1`] = `
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="status"
-      >
-        Select Task Status
-      </label>
       <div
-        className="select-wrapper"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={false}
-          id="status"
-          name="status"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
-        />
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="status"
+        >
+          Select Task Status
+        </label>
+        <div
+          className="select-wrapper"
+        >
+          <select
+            className="input y-paragraph"
+            disabled={false}
+            id="status"
+            name="status"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -20200,24 +20216,28 @@ exports[`Storyshots f/fields/QuerySelect Loading Options 1`] = `
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="status"
-      >
-        Select Task Status
-      </label>
       <div
-        className="select-wrapper"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={false}
-          id="status"
-          name="status"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
-        />
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="status"
+        >
+          Select Task Status
+        </label>
+        <div
+          className="select-wrapper"
+        >
+          <select
+            className="input y-paragraph"
+            disabled={false}
+            id="status"
+            name="status"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -20253,25 +20273,29 @@ exports[`Storyshots f/fields/QuerySelect Optional 1`] = `
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="status"
-      >
-        Select Task Status
-         (Optional)
-      </label>
       <div
-        className="select-wrapper"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={false}
-          id="status"
-          name="status"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
-        />
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="status"
+        >
+          Select Task Status
+           (Optional)
+        </label>
+        <div
+          className="select-wrapper"
+        >
+          <select
+            className="input y-paragraph"
+            disabled={false}
+            id="status"
+            name="status"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -20307,24 +20331,28 @@ exports[`Storyshots f/fields/QuerySelect With Default Value 1`] = `
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="status"
-      >
-        Select Task Status
-      </label>
       <div
-        className="select-wrapper"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={false}
-          id="status"
-          name="status"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value="VGFza1N0YXR1c05vZGU6NGRiYjNlMmItMGIxYy00ZjIxLTk0MmUtZTNjZGQwMjdiNjU3"
-        />
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="status"
+        >
+          Select Task Status
+        </label>
+        <div
+          className="select-wrapper"
+        >
+          <select
+            className="input y-paragraph"
+            disabled={false}
+            id="status"
+            name="status"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value="VGFza1N0YXR1c05vZGU6NGRiYjNlMmItMGIxYy00ZjIxLTk0MmUtZTNjZGQwMjdiNjU3"
+          />
+        </div>
       </div>
     </div>
     <div
@@ -21057,49 +21085,53 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="workType"
-      >
-        Work Type
-      </label>
       <div
-        className="select-wrapper"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={false}
-          id="workType"
-          name="workType"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="workType"
         >
-          <option
-            disabled={true}
-            value=""
-          >
-            Select an option
-          </option>
-          <option
-            disabled={false}
-            value="Work"
-          >
-            Work
-          </option>
-          <option
-            disabled={false}
-            value="Managing"
-          >
-            Managing
-          </option>
-          <option
+          Work Type
+        </label>
+        <div
+          className="select-wrapper"
+        >
+          <select
+            className="input y-paragraph"
             disabled={false}
-            value="Training"
+            id="workType"
+            name="workType"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value=""
           >
-            Training
-          </option>
-        </select>
+            <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>
     <div
@@ -21135,49 +21167,53 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="workType"
-      >
-        Work Type
-      </label>
       <div
-        className="select-wrapper disabled"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={true}
-          id="workType"
-          name="workType"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="workType"
         >
-          <option
+          Work Type
+        </label>
+        <div
+          className="select-wrapper disabled"
+        >
+          <select
+            className="input y-paragraph"
             disabled={true}
+            id="workType"
+            name="workType"
+            onBlur={[Function]}
+            onChange={[Function]}
             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>
+            <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>
     <div
@@ -21213,54 +21249,136 @@ exports[`Storyshots f/fields/SelectInput Disabled With Description Select Input
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="workType"
-      >
-        Work Type
-      </label>
       <div
-        className="select-wrapper disabled"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={true}
-          id="workType"
-          name="workType"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="workType"
         >
-          <option
+          Work Type
+        </label>
+        <div
+          className="select-wrapper disabled"
+        >
+          <select
+            className="input y-paragraph"
             disabled={true}
+            id="workType"
+            name="workType"
+            onBlur={[Function]}
+            onChange={[Function]}
             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>
+            <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
+          className="base description s-1 x-metadata"
+        >
+          This is a description
+        </div>
       </div>
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/SelectInput Multiple 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    style={
+      {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "1rem",
+      }
+    }
+  >
+    <div
+      className="base select-input"
+    >
       <div
-        className="base description s-1 x-metadata"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        aria-owns="downshift-11-menu"
+        className="base multiple"
+        role="combobox"
       >
-        This is a description
+        <label
+          className="base form-label base multiple x-paragraph"
+          htmlFor="status"
+          id="downshift-11-label"
+        >
+          Status
+        </label>
+        <div
+          className="input-container"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="downshift-11-menu"
+            aria-labelledby="downshift-11-label"
+            className="input"
+            disabled={false}
+            id="downshift-11-input"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            placeholder="Type to search"
+            value=""
+          />
+        </div>
+        <div
+          className="base popover x-background-near bottom left"
+        >
+          <ul
+            aria-labelledby="downshift-11-label"
+            className="base menu y-interactive"
+            id="downshift-11-menu"
+            onMouseLeave={[Function]}
+            role="listbox"
+          />
+        </div>
       </div>
     </div>
     <div
@@ -21296,50 +21414,54 @@ exports[`Storyshots f/fields/SelectInput Optional 1`] = `
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="workType"
-      >
-        Work Type
-         (Optional)
-      </label>
       <div
-        className="select-wrapper"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={false}
-          id="workType"
-          name="workType"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="workType"
         >
-          <option
-            disabled={true}
-            value=""
-          >
-            Select an option
-          </option>
-          <option
-            disabled={false}
-            value="Work"
-          >
-            Work
-          </option>
-          <option
-            disabled={false}
-            value="Managing"
-          >
-            Managing
-          </option>
-          <option
+          Work Type
+           (Optional)
+        </label>
+        <div
+          className="select-wrapper"
+        >
+          <select
+            className="input y-paragraph"
             disabled={false}
-            value="Training"
+            id="workType"
+            name="workType"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value=""
           >
-            Training
-          </option>
-        </select>
+            <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>
     <div
@@ -21375,49 +21497,53 @@ exports[`Storyshots f/fields/SelectInput Required 1`] = `
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="workType"
-      >
-        Work Type
-      </label>
       <div
-        className="select-wrapper"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={false}
-          id="workType"
-          name="workType"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="workType"
         >
-          <option
-            disabled={true}
-            value=""
-          >
-            Select an option
-          </option>
-          <option
-            disabled={false}
-            value="Work"
-          >
-            Work
-          </option>
-          <option
-            disabled={false}
-            value="Managing"
-          >
-            Managing
-          </option>
-          <option
+          Work Type
+        </label>
+        <div
+          className="select-wrapper"
+        >
+          <select
+            className="input y-paragraph"
             disabled={false}
-            value="Training"
+            id="workType"
+            name="workType"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value=""
           >
-            Training
-          </option>
-        </select>
+            <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>
     <div
@@ -21453,67 +21579,71 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     <div
       className="base select-input"
     >
-      <label
-        className="base form-label x-paragraph"
-        htmlFor="workType"
-      >
-        Work Type
-      </label>
       <div
-        className="select-wrapper"
+        className="base single"
       >
-        <select
-          className="input y-paragraph"
-          disabled={false}
-          id="workType"
-          name="workType"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
+        <label
+          className="base form-label x-paragraph"
+          htmlFor="workType"
         >
-          <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>
-          <option
-            disabled={false}
-            value="Option1"
-          >
-            Option1
-          </option>
-          <option
-            disabled={false}
-            value="Option2"
-          >
-            Option2
-          </option>
-          <option
+          Work Type
+        </label>
+        <div
+          className="select-wrapper"
+        >
+          <select
+            className="input y-paragraph"
             disabled={false}
-            value="Option3"
+            id="workType"
+            name="workType"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value=""
           >
-            Option3
-          </option>
-        </select>
+            <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>
+            <option
+              disabled={false}
+              value="Option1"
+            >
+              Option1
+            </option>
+            <option
+              disabled={false}
+              value="Option2"
+            >
+              Option2
+            </option>
+            <option
+              disabled={false}
+              value="Option3"
+            >
+              Option3
+            </option>
+          </select>
+        </div>
       </div>
     </div>
     <div