@pareto-engineering/design-system 5.0.1 → 5.0.2

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

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