@pareto-engineering/design-system 4.0.0-alpha.42 → 4.0.0-alpha.43

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

@@ -1229,6 +1229,24 @@ exports[`Storyshots a/Label Compact 1`] = `
      
     label
   </span>,
+  <span
+    className="base label x-ui-main modifierCompact"
+  >
+    This is a
+     
+    ui-main
+     
+    label
+  </span>,
+  <span
+    className="base label x-ui-main-2 modifierCompact"
+  >
+    This is a
+     
+    ui-main-2
+     
+    label
+  </span>,
   <span
     className="base label x-twitter modifierCompact"
   >
@@ -1594,6 +1612,24 @@ exports[`Storyshots a/Label Ghost 1`] = `
      
     label
   </span>,
+  <span
+    className="base label x-ui-main modifierGhost"
+  >
+    This is a
+     
+    ui-main
+     
+    label
+  </span>,
+  <span
+    className="base label x-ui-main-2 modifierGhost"
+  >
+    This is a
+     
+    ui-main-2
+     
+    label
+  </span>,
   <span
     className="base label x-twitter modifierGhost"
   >
@@ -1959,6 +1995,24 @@ exports[`Storyshots a/Label Normal 1`] = `
      
     label
   </span>,
+  <span
+    className="base label x-ui-main"
+  >
+    This is a
+     
+    ui-main
+     
+    label
+  </span>,
+  <span
+    className="base label x-ui-main-2"
+  >
+    This is a
+     
+    ui-main-2
+     
+    label
+  </span>,
   <span
     className="base label x-twitter"
   >
@@ -3207,7 +3261,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  10 months ago
+  11 months ago
 </p>
 `;
 
@@ -3553,6 +3607,26 @@ exports[`Storyshots b/Button Arrow Left 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main arrow-left"
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter arrow-left"
     type="button"
@@ -4082,6 +4156,34 @@ exports[`Storyshots b/Button Arrow Left Simple 1`] = `
       button
     </span>
   </button>,
+  <button
+    className="base button x-ui-main modifierSimple arrow-left"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-main
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierSimple arrow-left"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-main-2
+       
+      button
+    </span>
+  </button>,
   <button
     className="base button x-twitter modifierSimple arrow-left"
     type="button"
@@ -4523,6 +4625,26 @@ exports[`Storyshots b/Button Arrow Right 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main arrow-right"
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter arrow-right"
     type="button"
@@ -5052,6 +5174,34 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
       button
     </span>
   </button>,
+  <button
+    className="base button x-ui-main modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-main
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-main-2
+       
+      button
+    </span>
+  </button>,
   <button
     className="base button x-twitter modifierSimple arrow-right"
     type="button"
@@ -5502,6 +5652,26 @@ exports[`Storyshots b/Button Compact 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter modifierCompact"
     type="button"
@@ -5938,6 +6108,28 @@ exports[`Storyshots b/Button Disabled 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter"
     disabled={true}
@@ -6383,6 +6575,28 @@ exports[`Storyshots b/Button Disabled Arrow Left 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main arrow-left"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2 arrow-left"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter arrow-left"
     disabled={true}
@@ -6828,6 +7042,28 @@ exports[`Storyshots b/Button Disabled Arrow Right 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main arrow-right"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2 arrow-right"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter arrow-right"
     disabled={true}
@@ -7282,6 +7518,28 @@ exports[`Storyshots b/Button Ghost Disabled 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter modifierGhost"
     disabled={true}
@@ -7696,6 +7954,26 @@ exports[`Storyshots b/Button Ghosts 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter modifierGhost"
     type="button"
@@ -8101,6 +8379,26 @@ exports[`Storyshots b/Button Gradient 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main modifierGradient"
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierGradient"
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter modifierGradient"
     type="button"
@@ -9058,7 +9356,89 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-background-inputs"
+    className="base button x-background-inputs"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-background-mesh"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-heading"
     type="button"
   >
     <div
@@ -9099,7 +9479,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-background-mesh"
+    className="base button x-paragraph"
     type="button"
   >
     <div
@@ -9140,7 +9520,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-heading"
+    className="base button x-subtitle"
     type="button"
   >
     <div
@@ -9181,7 +9561,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-paragraph"
+    className="base button x-metadata"
     type="button"
   >
     <div
@@ -9222,7 +9602,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-subtitle"
+    className="base button x-link"
     type="button"
   >
     <div
@@ -9263,7 +9643,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-metadata"
+    className="base button x-transparent"
     type="button"
   >
     <div
@@ -9304,7 +9684,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-link"
+    className="base button x-highlighted"
     type="button"
   >
     <div
@@ -9345,7 +9725,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-transparent"
+    className="base button x-disabled"
     type="button"
   >
     <div
@@ -9386,7 +9766,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-highlighted"
+    className="base button x-ui-main"
     type="button"
   >
     <div
@@ -9427,7 +9807,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-disabled"
+    className="base button x-ui-main-2"
     type="button"
   >
     <div
@@ -10151,6 +10531,26 @@ exports[`Storyshots b/Button Normal 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-ui-main"
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2"
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
   <button
     className="base button x-twitter"
     type="button"
@@ -10680,6 +11080,34 @@ exports[`Storyshots b/Button Simple 1`] = `
       button
     </span>
   </button>,
+  <button
+    className="base button x-ui-main modifierSimple"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-main
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierSimple"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-main-2
+       
+      button
+    </span>
+  </button>,
   <button
     className="base button x-twitter modifierSimple"
     type="button"
@@ -11276,6 +11704,36 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
       button
     </span>
   </button>,
+  <button
+    className="base button x-ui-main modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-main
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-main-2
+       
+      button
+    </span>
+  </button>,
   <button
     className="base button x-twitter modifierSimple"
     disabled={true}
@@ -11728,6 +12186,26 @@ exports[`Storyshots b/Button/Group Base 1`] = `
      
     button
   </button>
+  <button
+    className="base button x-ui-main"
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>
+  <button
+    className="base button x-ui-main-2"
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>
   <button
     className="base button x-twitter"
     type="button"
@@ -12976,6 +13454,64 @@ exports[`Storyshots b/Logo Color 1`] = `
       }
     />
   </svg>,
+  <svg
+    className="base svg base logo x-ui-main y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 156 30"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-ui-main-2 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 156 30"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
   <svg
     className="base svg base logo x-twitter y-transparent"
     height="2em"
@@ -13831,6 +14367,44 @@ exports[`Storyshots b/Logo Square 1`] = `
       }
     />
   </svg>,
+  <svg
+    className="base svg base logo x-ui-main y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-ui-main-2 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
   <svg
     className="base svg base logo x-twitter y-transparent"
     height="2em"
@@ -18491,6 +19065,147 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
               ?
             </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]}
             type="button"
@@ -18750,6 +19465,147 @@ exports[`Storyshots f/fields/EditorInput On Single Row 1`] = `
               ?
             </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]}
             type="button"
@@ -18953,6 +19809,147 @@ 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>
+            <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]}
             type="button"