@pareto-engineering/design-system 5.0.2 → 5.0.4

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

@@ -451,28 +451,7 @@ exports[`Storyshots Example/Page Logged Out 1`] = `
 
 exports[`Storyshots a/AppContext Base 1`] = `"Sample AppContext"`;
 
-exports[`Storyshots a/BlurOverlay Base 1`] = `
-<div
-  className="base blur-overlay modifierActive"
->
-  <div
-    style={
-      {
-        "backgroundColor": "blue",
-        "bottom": "0",
-        "color": "white",
-        "height": "100px",
-        "minWidth": "100%",
-        "position": "fixed",
-      }
-    }
-  >
-    Sample Foreground Component
-  </div>
-</div>
-`;
-
-exports[`Storyshots a/Charts/AreaChart Default 1`] = `
+exports[`Storyshots a/AreaChart Default 1`] = `
 <div
   style={
     {
@@ -498,7 +477,7 @@ exports[`Storyshots a/Charts/AreaChart Default 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Select Item
+          Submission status
           <span
             className="icon "
           >
@@ -520,7 +499,7 @@ exports[`Storyshots a/Charts/AreaChart Default 1`] = `
                 }
               }
             />
-             Average
+            Average
             <span
               className="icon checkmark"
             >
@@ -539,7 +518,7 @@ exports[`Storyshots a/Charts/AreaChart Default 1`] = `
                 }
               }
             />
-             Best
+            Best
             <span
               className="icon checkmark"
             >
@@ -558,7 +537,7 @@ exports[`Storyshots a/Charts/AreaChart Default 1`] = `
                 }
               }
             />
-             Worst
+            Worst
             <span
               className="icon checkmark"
             >
@@ -569,79 +548,58 @@ exports[`Storyshots a/Charts/AreaChart Default 1`] = `
       </div>
     </div>
     <div
-      className="base custom-legend horizontal"
+      className="base custom-legend"
     >
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "purple",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            Average
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "purple",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          Average
+        </span>
       </div>
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "green",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            Best
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "green",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          Best
+        </span>
       </div>
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "orange",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            Worst
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "orange",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          Worst
+        </span>
       </div>
     </div>
     <div
@@ -656,7 +614,7 @@ exports[`Storyshots a/Charts/AreaChart Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
+exports[`Storyshots a/AreaChart Filled 1`] = `
 <div
   style={
     {
@@ -682,7 +640,7 @@ exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Select Item
+          Submission status
           <span
             className="icon "
           >
@@ -704,7 +662,7 @@ exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
                 }
               }
             />
-             Average
+            Average
             <span
               className="icon checkmark"
             >
@@ -723,7 +681,7 @@ exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
                 }
               }
             />
-             Best
+            Best
             <span
               className="icon checkmark"
             >
@@ -742,7 +700,7 @@ exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
                 }
               }
             />
-             Worst
+            Worst
             <span
               className="icon checkmark"
             >
@@ -753,79 +711,58 @@ exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
       </div>
     </div>
     <div
-      className="base custom-legend horizontal"
+      className="base custom-legend"
     >
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "purple",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            Average
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "purple",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          Average
+        </span>
       </div>
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "green",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            Best
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "green",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          Best
+        </span>
       </div>
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "orange",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            Worst
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "orange",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          Worst
+        </span>
       </div>
     </div>
     <div
@@ -840,7 +777,7 @@ exports[`Storyshots a/Charts/AreaChart Filled 1`] = `
 </div>
 `;
 
-exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
+exports[`Storyshots a/AreaChart Side By Side 1`] = `
 <div
   style={
     {
@@ -873,7 +810,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
             onClick={[Function]}
             type="button"
           >
-            Select Item
+            Submission status
             <span
               className="icon "
             >
@@ -895,7 +832,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
                   }
                 }
               />
-               Average
+              Average
               <span
                 className="icon checkmark"
               >
@@ -914,7 +851,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
                   }
                 }
               />
-               Best
+              Best
               <span
                 className="icon checkmark"
               >
@@ -933,7 +870,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
                   }
                 }
               />
-               Worst
+              Worst
               <span
                 className="icon checkmark"
               >
@@ -944,79 +881,58 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
         </div>
       </div>
       <div
-        className="base custom-legend horizontal"
+        className="base custom-legend"
       >
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "purple",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Average
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Average
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "green",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Best
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Best
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "orange",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Worst
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "orange",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Worst
+          </span>
         </div>
       </div>
       <div
@@ -1053,7 +969,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
             onClick={[Function]}
             type="button"
           >
-            Select Item
+            Submission status
             <span
               className="icon "
             >
@@ -1075,7 +991,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
                   }
                 }
               />
-               Average
+              Average
               <span
                 className="icon checkmark"
               >
@@ -1094,7 +1010,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
                   }
                 }
               />
-               Best
+              Best
               <span
                 className="icon checkmark"
               >
@@ -1113,7 +1029,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
                   }
                 }
               />
-               Worst
+              Worst
               <span
                 className="icon checkmark"
               >
@@ -1124,79 +1040,58 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
         </div>
       </div>
       <div
-        className="base custom-legend horizontal"
+        className="base custom-legend"
       >
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "purple",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Average
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Average
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "green",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Best
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Best
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "orange",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Worst
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "orange",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Worst
+          </span>
         </div>
       </div>
       <div
@@ -1212,7 +1107,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side 1`] = `
 </div>
 `;
 
-exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
+exports[`Storyshots a/AreaChart Side By Side Filled 1`] = `
 <div
   style={
     {
@@ -1245,7 +1140,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
             onClick={[Function]}
             type="button"
           >
-            Select Item
+            Submission status
             <span
               className="icon "
             >
@@ -1267,7 +1162,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
                   }
                 }
               />
-               Average
+              Average
               <span
                 className="icon checkmark"
               >
@@ -1286,7 +1181,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
                   }
                 }
               />
-               Best
+              Best
               <span
                 className="icon checkmark"
               >
@@ -1305,7 +1200,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
                   }
                 }
               />
-               Worst
+              Worst
               <span
                 className="icon checkmark"
               >
@@ -1316,79 +1211,58 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
         </div>
       </div>
       <div
-        className="base custom-legend horizontal"
+        className="base custom-legend"
       >
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "purple",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Average
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Average
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "green",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Best
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Best
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "orange",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Worst
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "orange",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Worst
+          </span>
         </div>
       </div>
       <div
@@ -1425,7 +1299,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
             onClick={[Function]}
             type="button"
           >
-            Select Item
+            Submission status
             <span
               className="icon "
             >
@@ -1447,7 +1321,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
                   }
                 }
               />
-               Average
+              Average
               <span
                 className="icon checkmark"
               >
@@ -1466,7 +1340,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
                   }
                 }
               />
-               Best
+              Best
               <span
                 className="icon checkmark"
               >
@@ -1485,7 +1359,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
                   }
                 }
               />
-               Worst
+              Worst
               <span
                 className="icon checkmark"
               >
@@ -1496,79 +1370,58 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
         </div>
       </div>
       <div
-        className="base custom-legend horizontal"
+        className="base custom-legend"
       >
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "purple",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Average
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Average
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "green",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Best
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Best
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "orange",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Worst
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "orange",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            Worst
+          </span>
         </div>
       </div>
       <div
@@ -1584,7 +1437,7 @@ exports[`Storyshots a/Charts/AreaChart Side By Side Filled 1`] = `
 </div>
 `;
 
-exports[`Storyshots a/Charts/BarChart Default 1`] = `
+exports[`Storyshots a/BarChart Default 1`] = `
 <div
   style={
     {
@@ -1610,7 +1463,7 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Select Item
+          Submission status
           <span
             className="icon "
           >
@@ -1632,7 +1485,7 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
                 }
               }
             />
-            Pending Review
+            pendingReview
             <span
               className="icon checkmark"
             >
@@ -1651,7 +1504,7 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
                 }
               }
             />
-            Accepted
+            accepted
             <span
               className="icon checkmark"
             >
@@ -1670,7 +1523,7 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
                 }
               }
             />
-            Rejected
+            rejected
             <span
               className="icon checkmark"
             >
@@ -1689,7 +1542,7 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
                 }
               }
             />
-            To Revise
+            toRevise
             <span
               className="icon checkmark"
             >
@@ -1708,7 +1561,7 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
                 }
               }
             />
-            Revised
+            revised
             <span
               className="icon checkmark"
             >
@@ -1719,127 +1572,92 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
       </div>
     </div>
     <div
-      className="base custom-legend horizontal"
+      className="base custom-legend"
     >
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "purple",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            pendingReview
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "purple",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          pendingReview
+        </span>
       </div>
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "green",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            accepted
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "green",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          accepted
+        </span>
       </div>
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "orange",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            rejected
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "orange",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          rejected
+        </span>
       </div>
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "blue",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            toRevise
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "blue",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          toRevise
+        </span>
       </div>
       <div
         className="item"
       >
-        <div
-          className="title"
-        >
-          <span
-            className="dot"
-            style={
-              {
-                "backgroundColor": "red",
-              }
-            }
-          />
-          <span
-            className="text"
-          >
-            revised
-          </span>
-        </div>
         <span
-          className="sub-title"
+          className="dot"
+          style={
+            {
+              "backgroundColor": "red",
+            }
+          }
         />
+        <span
+          className="text"
+        >
+          revised
+        </span>
       </div>
     </div>
     <div
@@ -1854,7 +1672,7 @@ exports[`Storyshots a/Charts/BarChart Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
+exports[`Storyshots a/BarChart Side By Side 1`] = `
 <div
   style={
     {
@@ -1887,7 +1705,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
             onClick={[Function]}
             type="button"
           >
-            Select Item
+            Submission status
             <span
               className="icon "
             >
@@ -1909,7 +1727,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              Pending Review
+              pendingReview
               <span
                 className="icon checkmark"
               >
@@ -1928,7 +1746,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              Accepted
+              accepted
               <span
                 className="icon checkmark"
               >
@@ -1947,7 +1765,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              Rejected
+              rejected
               <span
                 className="icon checkmark"
               >
@@ -1966,7 +1784,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              To Revise
+              toRevise
               <span
                 className="icon checkmark"
               >
@@ -1985,7 +1803,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              Revised
+              revised
               <span
                 className="icon checkmark"
               >
@@ -1996,127 +1814,92 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
         </div>
       </div>
       <div
-        className="base custom-legend horizontal"
+        className="base custom-legend"
       >
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "purple",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              pendingReview
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            pendingReview
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "green",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              accepted
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            accepted
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "orange",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              rejected
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "orange",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            rejected
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "blue",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              toRevise
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "blue",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            toRevise
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "red",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              revised
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "red",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            revised
+          </span>
         </div>
       </div>
       <div
@@ -2153,7 +1936,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
             onClick={[Function]}
             type="button"
           >
-            Select Item
+            Submission status
             <span
               className="icon "
             >
@@ -2175,7 +1958,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              Pending Review
+              pendingReview
               <span
                 className="icon checkmark"
               >
@@ -2194,7 +1977,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              Accepted
+              accepted
               <span
                 className="icon checkmark"
               >
@@ -2213,7 +1996,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              Rejected
+              rejected
               <span
                 className="icon checkmark"
               >
@@ -2232,7 +2015,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              To Revise
+              toRevise
               <span
                 className="icon checkmark"
               >
@@ -2251,7 +2034,7 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
                   }
                 }
               />
-              Revised
+              revised
               <span
                 className="icon checkmark"
               >
@@ -2262,643 +2045,124 @@ exports[`Storyshots a/Charts/BarChart Side By Side 1`] = `
         </div>
       </div>
       <div
-        className="base custom-legend horizontal"
+        className="base custom-legend"
       >
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "purple",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              pendingReview
-            </span>
-          </div>
           <span
-            className="sub-title"
+            className="dot"
+            style={
+              {
+                "backgroundColor": "purple",
+              }
+            }
           />
+          <span
+            className="text"
+          >
+            pendingReview
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
+          <span
+            className="dot"
+            style={
+              {
+                "backgroundColor": "green",
+              }
+            }
+          />
+          <span
+            className="text"
           >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "green",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              accepted
-            </span>
-          </div>
-          <span
-            className="sub-title"
-          />
+            accepted
+          </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "orange",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              rejected
-            </span>
-          </div>
           <span
-            className="sub-title"
-          />
-        </div>
-        <div
-          className="item"
-        >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "blue",
-                }
+            className="dot"
+            style={
+              {
+                "backgroundColor": "orange",
               }
-            />
-            <span
-              className="text"
-            >
-              toRevise
-            </span>
-          </div>
-          <span
-            className="sub-title"
+            }
           />
-        </div>
-        <div
-          className="item"
-        >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "red",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              revised
-            </span>
-          </div>
           <span
-            className="sub-title"
-          />
-        </div>
-      </div>
-      <div
-        style={
-          {
-            "height": 400,
-            "width": "100%",
-          }
-        }
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots a/Charts/PieChart Default 1`] = `
-<div
-  style={
-    {
-      "height": "100%",
-      "width": "100%",
-    }
-  }
->
-  <div
-    className="base pie-chart"
-  >
-    <div
-      className="chart-header"
-    >
-      <h3 />
-    </div>
-    <div
-      className="chart-content"
-    >
-      <div
-        style={
-          {
-            "height": 400,
-            "width": "100%",
-          }
-        }
-      />
-      <div
-        className="base custom-legend vertical"
-      >
-        <div
-          className="item"
-        >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "#8CB0F8",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Pending Review
-            </span>
-          </div>
-          <span
-            className="sub-title"
+            className="text"
           >
-            230
+            rejected
           </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "#7F7CF6",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              Accepted
-            </span>
-          </div>
           <span
-            className="sub-title"
-          >
-            350
-          </span>
-        </div>
-        <div
-          className="item"
-        >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "#FFD66E",
-                }
+            className="dot"
+            style={
+              {
+                "backgroundColor": "blue",
               }
-            />
-            <span
-              className="text"
-            >
-              Rejected
-            </span>
-          </div>
+            }
+          />
           <span
-            className="sub-title"
+            className="text"
           >
-            80
+            toRevise
           </span>
         </div>
         <div
           className="item"
         >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "#E8E9ED",
-                }
-              }
-            />
-            <span
-              className="text"
-            >
-              To Revise
-            </span>
-          </div>
           <span
-            className="sub-title"
-          >
-            10
-          </span>
-        </div>
-        <div
-          className="item"
-        >
-          <div
-            className="title"
-          >
-            <span
-              className="dot"
-              style={
-                {
-                  "backgroundColor": "#F6BC7E",
-                }
+            className="dot"
+            style={
+              {
+                "backgroundColor": "red",
               }
-            />
-            <span
-              className="text"
-            >
-              Revised
-            </span>
-          </div>
+            }
+          />
           <span
-            className="sub-title"
+            className="text"
           >
-            60
+            revised
           </span>
         </div>
       </div>
+      <div
+        style={
+          {
+            "height": 400,
+            "width": "100%",
+          }
+        }
+      />
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots a/Charts/PieChart Side By Side 1`] = `
+exports[`Storyshots a/BlurOverlay Base 1`] = `
 <div
-  style={
-    {
-      "display": "flex",
-      "gap": "20px",
-    }
-  }
+  className="base blur-overlay modifierActive"
 >
   <div
     style={
       {
-        "flex": 1,
-      }
-    }
-  >
-    <div
-      className="base pie-chart"
-    >
-      <div
-        className="chart-header"
-      >
-        <h3 />
-      </div>
-      <div
-        className="chart-content"
-      >
-        <div
-          style={
-            {
-              "height": 400,
-              "width": "100%",
-            }
-          }
-        />
-        <div
-          className="base custom-legend vertical"
-        >
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#8CB0F8",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                Pending Review
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              230
-            </span>
-          </div>
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#7F7CF6",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                Accepted
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              350
-            </span>
-          </div>
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#FFD66E",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                Rejected
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              80
-            </span>
-          </div>
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#E8E9ED",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                To Revise
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              10
-            </span>
-          </div>
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#F6BC7E",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                Revised
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              60
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    style={
-      {
-        "flex": 1,
+        "backgroundColor": "blue",
+        "bottom": "0",
+        "color": "white",
+        "height": "100px",
+        "minWidth": "100%",
+        "position": "fixed",
       }
     }
   >
-    <div
-      className="base pie-chart"
-    >
-      <div
-        className="chart-header"
-      >
-        <h3 />
-      </div>
-      <div
-        className="chart-content"
-      >
-        <div
-          style={
-            {
-              "height": 400,
-              "width": "100%",
-            }
-          }
-        />
-        <div
-          className="base custom-legend vertical"
-        >
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#8CB0F8",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                Pending Review
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              230
-            </span>
-          </div>
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#7F7CF6",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                Accepted
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              350
-            </span>
-          </div>
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#FFD66E",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                Rejected
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              80
-            </span>
-          </div>
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#E8E9ED",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                To Revise
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              10
-            </span>
-          </div>
-          <div
-            className="item"
-          >
-            <div
-              className="title"
-            >
-              <span
-                className="dot"
-                style={
-                  {
-                    "backgroundColor": "#F6BC7E",
-                  }
-                }
-              />
-              <span
-                className="text"
-              >
-                Revised
-              </span>
-            </div>
-            <span
-              className="sub-title"
-            >
-              60
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    Sample Foreground Component
   </div>
 </div>
 `;